Skip to content

Commit e7d5ec8

Browse files
AlexeyMzAlexeyMz
committed
Extend doc pages for components, add examples:
* Fix common diagram open toolbar action to use overlay tasks;
1 parent ed0cabd commit e7d5ec8

14 files changed

Lines changed: 180 additions & 72 deletions

‎docs/components/canvas.md‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ title: Canvas
44

55
# Canvas Components
66

7-
[Canvas](/docs/api/workspace/functions/Canvas) is a main component to display a scrollable canvas for the diagram with [elements](/docs/concepts/diagram-model.md), [links](/docs/concepts/diagram-model.md) and additional widgets.
7+
[Canvas](/docs/api/workspace/functions/Canvas) is a main component to display a scrollable canvas for the diagram with [elements](/docs/concepts/graph-model.md), [links](/docs/concepts/graph-model.md) and additional widgets.
8+
9+
## Hooks
810

911
[useCanvas()](/docs/api/workspace/functions/useCanvas) hook called from a canvas widget, [SharedCanvasState.findAnyCanvas()](/docs/api/workspace/classes/SharedCanvasState.md#findanycanvas) or [SharedCanvasState.findAllCanvases()](/docs/api/workspace/classes/SharedCanvasState.md#findallcanvases) methods can be used to get the [CanvasApi](/docs/api/workspace/interfaces/CanvasApi) instance to read or subscribe to the canvas state or perform viewport-related effects.
1012

@@ -14,20 +16,49 @@ To define a custom canvas widget, the target React component should be marked by
1416

1517
### Example: custom viewport widget
1618

17-
```tsx
18-
function CustomViewportWidget() {
19+
```tsx live noInline
20+
function CustomSelectAllWidget() {
21+
const {model} = Reactodia.useWorkspace();
1922
return (
2023
<div style={{position: 'absolute', right: '10px', top: '10px'}}>
2124
<button type='button'
22-
className='reactodia-btn reactodia-btn-default'>
23-
Click me
25+
className='reactodia-btn reactodia-btn-default'
26+
onClick={() => model.setSelection([...model.elements])}>
27+
Select All
2428
</button>
2529
</div>
2630
);
2731
}
2832

2933
Reactodia.defineCanvasWidget(
30-
CustomViewportWidget,
34+
CustomSelectAllWidget,
3135
element => ({element, attachment: 'viewport'})
3236
);
37+
38+
function Example() {
39+
const {defaultLayout} = Reactodia.useWorker(Layouts);
40+
41+
const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
42+
const {model, view, performLayout} = context;
43+
const dataProvider = new Reactodia.EmptyDataProvider();
44+
await model.createNewDiagram({dataProvider, signal});
45+
model.createElement('http://example.com/entity1');
46+
model.createElement('http://example.com/entity2');
47+
await performLayout({signal});
48+
}, []);
49+
50+
return (
51+
<div className='reactodia-live-editor'>
52+
<Reactodia.Workspace ref={onMount}
53+
defaultLayout={defaultLayout}>
54+
<Reactodia.DefaultWorkspace
55+
search={null}
56+
canvasWidgets={[<CustomSelectAllWidget key='select-all' />]}
57+
/>
58+
</Reactodia.Workspace>
59+
</div>
60+
);
61+
}
62+
63+
render(<Example />);
3364
```

‎docs/components/class-tree.md‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[ClassTree](/docs/api/workspace/functions/ClassTree.md) is a component to display an [element type](/docs/api/workspace/type-aliases/ElementTypeIri.md) (class) tree for the workspace.
44

5-
Element type graph is loaded from [data provider](/docs/concepts/data-provider.md) associated with the [diagram model](/docs/concepts/workspace-context.md).
5+
Element type graph is loaded from [data provider](/docs/concepts/data-provider.md) associated with the [diagram model](/docs/concepts/graph-model.md).
66

77
In [graph authoring](/docs/concepts/graph-authoring.md) mode, the class tree can be used to create entity elements that are instances of the displayed types.
88

@@ -11,3 +11,33 @@ In [graph authoring](/docs/concepts/graph-authoring.md) mode, the class tree can
1111
The same functionality is also available as `SearchSectionElementTypes` [unified search section](/docs/components/unified-search.md).
1212

1313
:::
14+
15+
```tsx live
16+
function Example() {
17+
const GRAPH_DATA =
18+
'https://raw.githubusercontent.com/reactodia/reactodia-workspace/' +
19+
'master/examples/resources/orgOntology.ttl';
20+
21+
const {defaultLayout} = Reactodia.useWorker(Layouts);
22+
23+
const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
24+
const {model, performLayout} = context;
25+
const response = await fetch(GRAPH_DATA, {signal});
26+
const graphData = new N3.Parser().parse(await response.text());
27+
const dataProvider = new Reactodia.RdfDataProvider({acceptBlankNodes: false});
28+
dataProvider.addGraph(graphData);
29+
await model.createNewDiagram({dataProvider, signal});
30+
}, []);
31+
32+
return (
33+
<div className='reactodia-live-editor'>
34+
<Reactodia.Workspace ref={onMount}
35+
defaultLayout={defaultLayout}>
36+
<Reactodia.WorkspaceRoot>
37+
<Reactodia.ClassTree />
38+
</Reactodia.WorkspaceRoot>
39+
</Reactodia.Workspace>
40+
</div>
41+
);
42+
}
43+
```

‎docs/components/dialog.md‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,52 @@ title: Dialog
44

55
# Dialog system
66

7-
It is possible to show a dialog either attached to target [element](/docs/concepts/diagram-model.md), [link](/docs/concepts/diagram-model.md) or as a modal over the canvas viewport itself.
7+
It is possible to show a dialog either attached to target [element](/docs/concepts/graph-model.md), [link](/docs/concepts/graph-model.md) or as a modal over the canvas viewport itself.
88

9-
[OverlayController.showDialog()](/docs/api/workspace/classes/OverlayController#showdialog) opens a dialog with the specified style and content.
9+
The following methods and properties from [OverlayController](/docs/api/workspace/classes/OverlayController) (accessible from [workspace context](/docs/concepts/workspace-context.md)) provide means to interact with the dialogs:
1010

11-
[OverlayController.hideDialog()](/docs/api/workspace/classes/OverlayController#hideDialog) hides a currently open dialog.
12-
13-
[OverlayController.openedDialog](/docs/api/workspace/classes/OverlayController#openeddialog) property and corresponding [change event](/docs/api/workspace/interfaces/OverlayControllerEvents.md) can be used to read the state of the currently open dialog.
11+
| Method or property | Description |
12+
|--------------------|-------------|
13+
| [showDialog()](/docs/api/workspace/classes/OverlayController#showdialog) method | Opens a dialog with the specified style and content. |
14+
| [hideDialog()](/docs/api/workspace/classes/OverlayController#hidedialog) method | Hides a currently open dialog. |
15+
| [openedDialog](/docs/api/workspace/classes/OverlayController#openeddialog) property | Can be used to read the state of the currently open dialog. <br/> Has corresponding [changeOpenedDialog](/docs/api/workspace/interfaces/OverlayControllerEvents.md) event. |
1416

1517
### Example: a modal dialog over the viewport
1618

17-
```tsx
18-
const {overlay} = Reactodia.useWorkspace();
19-
overlay.showDialog({
20-
style: {
21-
caption: 'Custom modal dialog',
22-
},
23-
content: (
24-
<div className='reactodia-form'>
25-
<div className='reactodia-form__body'>
26-
<div>Custom dialog content</div>
27-
</div>
28-
<div className='reactodia-form__controls'>
29-
<button className='reactodia-btn reactodia-btn-primary'
30-
type='button'
31-
onClick={() => overlay.hideDialog()}>
32-
Close
33-
</button>
34-
</div>
19+
```tsx live
20+
function Example() {
21+
const {defaultLayout} = Reactodia.useWorker(Layouts);
22+
23+
const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
24+
const {overlay} = context;
25+
overlay.showDialog({
26+
style: {
27+
caption: 'Custom modal dialog',
28+
},
29+
content: (
30+
<div className='reactodia-form'>
31+
<div className='reactodia-form__body'>
32+
<div>Custom dialog content</div>
33+
</div>
34+
<div className='reactodia-form__controls'>
35+
<button className='reactodia-btn reactodia-btn-primary'
36+
type='button'
37+
onClick={() => overlay.hideDialog()}>
38+
Close
39+
</button>
40+
</div>
41+
</div>
42+
),
43+
});
44+
}, []);
45+
46+
return (
47+
<div className='reactodia-live-editor'>
48+
<Reactodia.Workspace ref={onMount}
49+
defaultLayout={defaultLayout}>
50+
<Reactodia.DefaultWorkspace />
51+
</Reactodia.Workspace>
3552
</div>
36-
),
37-
});
53+
);
54+
}
3855
```

‎docs/components/layout-panels.md‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,29 @@ Reactodia provides layout panel components to display a row or a column of resiz
1717
```tsx live
1818
function SomeLayout() {
1919
return (
20-
<Reactodia.WorkspaceLayoutRow>
21-
<Reactodia.WorkspaceLayoutColumn>
22-
<Reactodia.WorkspaceLayoutItem heading='First'>
23-
First item
20+
<div style={{height: '300px'}}>
21+
<Reactodia.WorkspaceLayoutRow>
22+
<Reactodia.WorkspaceLayoutColumn>
23+
<Reactodia.WorkspaceLayoutItem heading='First'>
24+
First item
25+
</Reactodia.WorkspaceLayoutItem>
26+
<Reactodia.WorkspaceLayoutItem heading='Second'>
27+
Second item
28+
</Reactodia.WorkspaceLayoutItem>
29+
<Reactodia.WorkspaceLayoutItem heading='Third'>
30+
Third item
31+
</Reactodia.WorkspaceLayoutItem>
32+
</Reactodia.WorkspaceLayoutColumn>
33+
<Reactodia.WorkspaceLayoutItem>
34+
Central area
2435
</Reactodia.WorkspaceLayoutItem>
25-
<Reactodia.WorkspaceLayoutItem heading='Second'>
26-
Second item
27-
</Reactodia.WorkspaceLayoutItem>
28-
<Reactodia.WorkspaceLayoutItem heading='Third'>
29-
Third item
30-
</Reactodia.WorkspaceLayoutItem>
31-
</Reactodia.WorkspaceLayoutColumn>
32-
<Reactodia.WorkspaceLayoutItem>
33-
Central area
34-
</Reactodia.WorkspaceLayoutItem>
35-
<Reactodia.WorkspaceLayoutItem heading='Only item in right panel'>
36-
Right panel
37-
</Reactodia.WorkspaceLayoutItem>
38-
</Reactodia.WorkspaceLayoutRow>
36+
<Reactodia.WorkspaceLayoutColumn>
37+
<Reactodia.WorkspaceLayoutItem heading='Only item in right panel'>
38+
Right panel
39+
</Reactodia.WorkspaceLayoutItem>
40+
</Reactodia.WorkspaceLayoutColumn>
41+
</Reactodia.WorkspaceLayoutRow>
42+
</div>
3943
)
4044
}
4145
```

‎docs/components/unified-search.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@
22

33
[UnifiedSearch](/docs/api/workspace/functions/UnifiedSearch.md) is a component to display a search input with a dropdown for results.
44

5+
## Hooks
6+
7+
[useUnifiedSearchSection()](/docs/api/workspace/functions/useUnifiedSearchSection.md) hook can be used to implement a custom search section.
8+
9+
## Search sections
10+
511
One or many available search sections (providers) can be specified:
612

713
| Section component | Description |
814
|-------------------|-------------|
915
| [SearchSectionElementTypes](/docs/api/workspace/functions/SearchSectionElementTypes.md) | Allows to lookup entity types displayed in the tree form and create new entities in [authoring mode](/docs/concepts/graph-authoring.md). |
1016
| [SearchSectionEntities](/docs/api/workspace/functions/SearchSectionEntities.md) | Allows to lookup entities using [data provider](/docs/concepts/data-provider.md). |
1117
| [SearchSectionLinkTypes](/docs/api/workspace/functions/SearchSectionLinkTypes.md) | Allows to lookup displayed link types and change their [visibility settings](/docs/api/workspace/classes/DiagramModel.md#getlinkvisibility). |
12-
13-
[useUnifiedSearchSection()](/docs/api/workspace/functions/useUnifiedSearchSection.md) hook can be used to implement a custom search section.

‎docs/components/visual-authoring.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
[VisualAuthoring](/docs/api/workspace/functions/VisualAuthoring) component is a [canvas widget](/docs/components/canvas.md) to provide UI for the [visual graph authoring](/docs/concepts/graph-authoring.md).
44

5-
:::note
5+
:::important
66

7-
`VisualAuthoring` widget must be provided to the canvas to display visual graph authoring UI.
7+
`VisualAuthoring` widget must be provided to the canvas to in order to display visual graph authoring UI.
88

99
:::

‎docs/components/workspace.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ title: Workspace
66

77
[Workspace](/docs/api/workspace/classes/Workspace) is a top-level component which establishes [workspace context](/docs/api/workspace/interfaces/WorkspaceContext), which stores graph data and provides means to display and interact with the diagram.
88

9+
## Hooks
10+
911
[useLoadedWorkspace()](/docs/api/workspace/functions/useLoadedWorkspace) hook should be used to perform an initial initialization for the workspace which correctly reverts the changes and aborts async operations via provided [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) when the workspace component is unmounted.
1012

1113
[useWorkspace()](/docs/api/workspace/functions/useWorkspace) hook can be used from inside `<Workspace>` child components to access workspace context.

‎docs/concepts/canvas-coordinates.md‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,27 @@ sidebar_position: 6
44

55
# Canvas Coordinates
66

7+
Reactodia uses different coordinate systems when dealing with infinitely-resizable and scalable canvas content.
8+
79
## Coordinate types
810

9-
| Type | Description |
11+
| Type | Description |
1012
|-------------------|-------------|
11-
| paper | Main coordinates system for diagram element positions and sizes — unlimited in size, always in 1:1 scale with element and link templates. |
12-
| scrollable pane | Represents scaled paper layer — unlimited in size, natively scrolled inside viewport container. |
13+
| paper | Main coordinates system for [diagram content](/docs/concepts/graph-model.md) (elements, links, etc) — unlimited in size, always in 1:1 scale with element and link templates. |
14+
| scrollable pane | Represents scaled but still unlimited in size layer, natively scrolled inside viewport container. <br/> It is possible to use [totalPaneSize()](/docs/api/workspace/functions/totalPaneSize.md) and [paneTopLeft()](/docs/api/workspace/functions/paneTopLeft.md) to get current pane bounds with the same coordinates type. |
1315
| client (viewport) | Represents fixed-size "window" into visible graph area, equal to [DOM client coordinates](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) for the [Canvas](/docs/components/canvas) component. |
14-
| page | Same as [DOM page coordinates](https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#page). |
16+
| page | Same as [DOM page coordinates](https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#page) — generally used when handling pointer-related events. |
1517

1618
![Reactodia coordinate system](/img/reactodia-coords-structure.svg)
19+
20+
## Converting coordinates from/to different types
21+
22+
| From type | To type | Method |
23+
| ------------------|-------------------|--------|
24+
| paper | scrollable pane | [paperToScrollablePaneCoords()](/docs/api/workspace/interfaces/CanvasMetrics.md#papertoscrollablepanecoords) |
25+
| | page | [paperToPageCoords()](/docs/api/workspace/interfaces/CanvasMetrics.md#papertopagecoords) |
26+
| scrollable pane | paper | [scrollablePaneToPaperCoords()](/docs/api/workspace/interfaces/CanvasMetrics.md#scrollablepanetopapercoords) |
27+
| | client (viewport) | [scrollablePaneToClientCoords()](/docs/api/workspace/interfaces/CanvasMetrics.md#scrollablepanetoclientcoords) |
28+
| client (viewport) | paper | [clientToPaperCoords()](/docs/api/workspace/interfaces/CanvasMetrics.md#clienttopapercoords) |
29+
| | scrollable pane | [clientToScrollablePaneCoords()](/docs/api/workspace/interfaces/CanvasMetrics.md#clienttoscrollablepanecoords) |
30+
| page | paper | [pageToPaperCoords()](/docs/api/workspace/interfaces/CanvasMetrics.md#pagetopapercoords) |

‎docs/concepts/diagram-model.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎docs/concepts/graph-authoring.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ sidebar_position: 7
44

55
# Graph Authoring
66

7-
This page describes visual graph authoring mechanism to edit the graph data: create, update or delete [entities and relations](/docs/concepts/diagram-model.md).
7+
This page describes visual graph authoring mechanism to edit the graph data: create, update or delete [entities and relations](/docs/concepts/graph-model.md).
88

99
API references:
1010
- [MetadataProvider](/docs/api/workspace/interfaces/MetadataProvider)

0 commit comments

Comments
 (0)