Skip to content

Commit 0198036

Browse files
AlexeyMzAlexeyMz
committed
Update docs for v0.29.1
1 parent 3d847ab commit 0198036

38 files changed

Lines changed: 409 additions & 230 deletions

‎docs/components/canvas.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
2-
title: Canvas
2+
title: <Canvas />
33
---
44

55
# Canvas and widgets
66

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.
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.
88

99
## Getting the canvas instance
1010

11-
[useCanvas()](/docs/api/workspace/functions/useCanvas) hook called from a canvas widget can be used to get the [CanvasApi](/docs/api/workspace/interfaces/CanvasApi) instance from a context to read or subscribe to the canvas state or perform viewport-related effects:
11+
[`useCanvas()`](/docs/api/workspace/functions/useCanvas) hook called from a canvas widget can be used to get the [`CanvasApi`](/docs/api/workspace/interfaces/CanvasApi) instance from a context to read or subscribe to the canvas state or perform viewport-related effects:
1212

1313
```ts
1414
function MyWidget() {
@@ -17,7 +17,7 @@ function MyWidget() {
1717
}
1818
```
1919

20-
Alternatively, with [SharedCanvasState.findAnyCanvas()](/docs/api/workspace/classes/SharedCanvasState.md#findanycanvas) or [SharedCanvasState.findAllCanvases()](/docs/api/workspace/classes/SharedCanvasState.md#findallcanvases) methods it is possible to get canvas instance outside the canvas component:
20+
Alternatively, with [`SharedCanvasState.findAnyCanvas()`](/docs/api/workspace/classes/SharedCanvasState.md#findanycanvas) or [`SharedCanvasState.findAllCanvases()`](/docs/api/workspace/classes/SharedCanvasState.md#findallcanvases) methods it is possible to get canvas instance outside the canvas component:
2121

2222
```ts
2323
function NonWidgetComponent {

‎docs/components/class-tree.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1+
---
2+
title: <ClassTree />
3+
---
4+
15
# Class Tree
26

3-
[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.
7+
[`<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.
48

59
Element type graph is loaded from [data provider](/docs/concepts/data-provider.md) associated with the [diagram model](/docs/concepts/graph-model.md).
610

711
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.
812

913
:::tip
10-
The same functionality is also available as `SearchSectionElementTypes` [unified search section](/docs/components/unified-search.md).
14+
The same functionality is also available as `<SearchSectionElementTypes />` [unified search section](/docs/components/unified-search.md).
1115
:::
1216

1317
```tsx live

‎docs/components/connections-menu.md‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
---
2+
title: <ConnectionsMenu />
3+
---
4+
15
# Connections Menu
26

3-
[ConnectionsMenu](/docs/api/workspace/functions/ConnectionsMenu) component is a [canvas widget](/docs/components/canvas.md) to explore and navigate the graph by adding connected entities to the diagram.
7+
[`<ConnectionsMenu />`](/docs/api/workspace/functions/ConnectionsMenu) component is a [canvas widget](/docs/components/canvas.md) to explore and navigate the graph by adding connected entities to the diagram.
48

59
### Example: opening a connections menu on load
610

@@ -10,12 +14,8 @@ function Example() {
1014

1115
const {defaultLayout} = Reactodia.useWorker(Layouts);
1216

13-
const [connectionsMenuCommands] = React.useState(() =>
14-
new Reactodia.EventSource<ConnectionsMenuCommands>()
15-
);
16-
1717
const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
18-
const {model, view, performLayout} = context;
18+
const {model, view, getCommandBus, performLayout} = context;
1919

2020
const response = await fetch(GRAPH_DATA, {signal});
2121
const graphData = new N3.Parser().parse(await response.text());
@@ -26,17 +26,16 @@ function Example() {
2626
const target = model.createElement('http://www.w3.org/ns/org#Organization');
2727
await model.requestElementData([target.iri]);
2828

29-
connectionsMenuCommands.trigger('show', {targets: [target]});
29+
model.setSelection([target]);
30+
getCommandBus(Reactodia.ConnectionsMenuTopic)
31+
.trigger('show', {targets: [target]});
3032
}, []);
3133

3234
return (
3335
<div className='reactodia-live-editor'>
3436
<Reactodia.Workspace ref={onMount}
3537
defaultLayout={defaultLayout}>
36-
<Reactodia.DefaultWorkspace
37-
search={null}
38-
connectionsMenuCommands={connectionsMenuCommands}
39-
/>
38+
<Reactodia.DefaultWorkspace search={null} />
4039
</Reactodia.Workspace>
4140
</div>
4241
);

‎docs/components/drop-on-canvas.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
---
2+
title: <DropOnCanvas />
3+
---
4+
15
# Drop on Canvas
26

3-
[DropOnCanvas](/docs/api/workspace/functions/DropOnCanvas) component is a [canvas widget](/docs/components/canvas.md) to allow creating entity elements on the diagram by dragging then dropping a [URL (IRI)](/docs/concepts/data-provider.md#iri-and-rdf) to the canvas.
7+
[`<DropOnCanvas />`](/docs/api/workspace/functions/DropOnCanvas) component is a [canvas widget](/docs/components/canvas.md) to allow creating entity elements on the diagram by dragging then dropping a [URL (IRI)](/docs/concepts/data-provider.md#iri-and-rdf) to the canvas.

‎docs/components/instances-search.md‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
---
2+
title: <InstancesSearch />
3+
---
4+
15
# Instances Search
26

3-
[InstancesSearch](/docs/api/workspace/functions/InstancesSearch.md) is a component to search for entities by various filter criteria using [data provider lookup](/docs/concepts/data-provider.md) and add them as elements to the diagram.
7+
[`<InstancesSearch />`](/docs/api/workspace/functions/InstancesSearch.md) is a component to search for entities by various filter criteria using [data provider lookup](/docs/concepts/data-provider.md) and add them as elements to the diagram.
48

59
:::tip
6-
The same functionality is also available as `SearchSectionEntities` [unified search section](/docs/components/unified-search.md).
10+
The same functionality is also available as `<SearchSectionEntities />` [unified search section](/docs/components/unified-search.md).
711
:::
812

913
```tsx live
@@ -12,33 +16,30 @@ function Example() {
1216

1317
const {defaultLayout} = Reactodia.useWorker(Layouts);
1418

15-
const [instancesSearchCommands] = React.useState(() =>
16-
new Reactodia.EventSource<InstancesSearchCommands>()
17-
);
18-
1919
const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
20-
const {model, performLayout} = context;
20+
const {model, getCommandBus, performLayout} = context;
2121

2222
const response = await fetch(GRAPH_DATA, {signal});
2323
const graphData = new N3.Parser().parse(await response.text());
2424
const dataProvider = new Reactodia.RdfDataProvider({acceptBlankNodes: false});
2525
dataProvider.addGraph(graphData);
2626
await model.createNewDiagram({dataProvider, signal});
2727

28-
instancesSearchCommands.trigger('setCriteria', {
28+
getCommandBus(Reactodia.InstancesSearchTopic)
29+
.trigger('setCriteria', {
2930
criteria: {
30-
refElement: 'http://www.w3.org/ns/org#Organization',
31-
refElementLink: 'http://www.w3.org/2000/01/rdf-schema#domain',
31+
refElement: 'http://www.w3.org/ns/org#Organization',
32+
refElementLink: 'http://www.w3.org/2000/01/rdf-schema#domain',
3233
}
33-
});
34+
});
3435
}, []);
3536

3637
return (
3738
<div className='reactodia-live-editor'>
3839
<Reactodia.Workspace ref={onMount}
3940
defaultLayout={defaultLayout}>
4041
<Reactodia.WorkspaceRoot>
41-
<Reactodia.InstancesSearch commands={instancesSearchCommands} />
42+
<Reactodia.InstancesSearch />
4243
</Reactodia.WorkspaceRoot>
4344
</Reactodia.Workspace>
4445
</div>

‎docs/components/link-types-toolbox.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
---
2+
title: <LinkTypesToolbox />
3+
---
4+
15
# Link Types Toolbox
26

3-
[LinkTypesToolbox](/docs/api/workspace/functions/LinkTypesToolbox.md) is a component to display incoming and outgoing [link types](/docs/api/workspace/type-aliases/LinkTypeIri.md) from selected elements, toggle their visibility and initiate the [lookup](/docs/components/instances-search.md) for connected entities.
7+
[`<LinkTypesToolbox />`](/docs/api/workspace/functions/LinkTypesToolbox.md) is a component to display incoming and outgoing [link types](/docs/api/workspace/type-aliases/LinkTypeIri.md) from selected elements, toggle their visibility and initiate the [lookup](/docs/components/instances-search.md) for connected entities.
48

59
:::tip
6-
The same functionality is also available as `SearchSectionLinkTypes` [unified search section](/docs/components/unified-search.md).
10+
The same functionality is also available as `<SearchSectionLinkTypes />` [unified search section](/docs/components/unified-search.md).
711
:::

‎docs/components/navigator.md‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1+
---
2+
title: <Navigator />
3+
---
4+
15
# Navigator
26

3-
[Navigator](/docs/api/workspace/functions/Navigator) component is a [canvas widget](/docs/components/canvas.md) to display a minimap of the diagram contents.
7+
[`<Navigator />`](/docs/api/workspace/functions/Navigator) component is a [canvas widget](/docs/components/canvas.md) to display a minimap of the diagram contents.
48

59
```tsx live
610
function Example() {
7-
const GRAPH_DATA = 'https://reactodia.github.io/resources/orgOntology.ttl';
8-
911
const {defaultLayout} = Reactodia.useWorker(Layouts);
1012

1113
const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
1214
const {model, view, performLayout} = context;
1315

14-
const response = await fetch(GRAPH_DATA, {signal});
15-
const graphData = new N3.Parser().parse(await response.text());
16-
const dataProvider = new Reactodia.RdfDataProvider({acceptBlankNodes: false});
17-
dataProvider.addGraph(graphData);
18-
await model.importLayout({dataProvider, signal});
19-
20-
const first = model.createElement('http://www.w3.org/ns/org#Organization');
21-
const second = model.createElement('http://www.w3.org/ns/org#FormalOrganization');
22-
await Promise.all([
23-
model.requestElementData([first.iri, second.iri]),
24-
model.requestLinks(),
25-
]);
16+
const alice = model.createElement('urn:example:Alice');
17+
const bob = model.createElement('urn:example:Bob');
18+
bob.setData({...bob.data, types: ['urn:example:Balloon']});
19+
model.createLinks({
20+
sourceId: alice.iri,
21+
targetId: bob.iri,
22+
linkTypeId: 'urn:example:knows',
23+
properties: {},
24+
});
25+
2626
await performLayout({signal});
2727
}, []);
2828

@@ -31,14 +31,19 @@ function Example() {
3131
<Reactodia.Workspace ref={onMount}
3232
defaultLayout={defaultLayout}>
3333
<Reactodia.DefaultWorkspace
34-
menu={null}
35-
search={null}
36-
actions={null}
37-
navigator={{
38-
expanded: true,
39-
viewportFill: 'lightgreen',
40-
viewportStroke: {color: 'green'},
41-
}}
34+
menu={null}
35+
search={null}
36+
actions={null}
37+
navigator={{
38+
expanded: true,
39+
viewportFill: 'lightgreen',
40+
viewportStroke: {color: 'green'},
41+
}}
42+
canvas={{
43+
elementTemplateResolver: types =>
44+
types.includes('urn:example:Balloon')
45+
? Reactodia.RoundTemplate : undefined,
46+
}}
4247
/>
4348
</Reactodia.Workspace>
4449
</div>

‎docs/components/selection.md‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,45 @@
1+
---
2+
title: <Selection />, <Halo /> and <HaloLink />
3+
---
4+
15
# Halo and Selection
26

37
There are several [canvas widget](/docs/components/canvas.md) components which can be used to display actions on the selected diagram elements or links.
48

59
## Selecting elements
610

7-
[Halo](/docs/api/workspace/functions/Halo) widget allows selecting a single element to perform an element action on it.
11+
[`<Halo />`](/docs/api/workspace/functions/Halo) widget allows selecting a single element to perform an element action on it.
812

9-
[Selection](/docs/api/workspace/functions/Selection) widget allows selecting more than one element via rectangular selection box to move them together and perform an element action on them.
13+
[`<Selection />`](/docs/api/workspace/functions/Selection) widget allows selecting more than one element via rectangular selection box to move them together and perform an element action on them.
1014

1115
There are several built-in element actions that can be used:
1216
| Action component | Description |
1317
|------------------|-------------|
14-
| [SelectionAction](/docs/api/workspace/functions/SelectionAction.md) | Base component to display a custom element action. |
15-
| [SelectionActionSpinner](/docs/api/workspace/functions/SelectionActionSpinner.md) | Displays a loading spinner (useful as building block for other action components). |
16-
| [SelectionActionRemove](/docs/api/workspace/functions/SelectionActionRemove.md) | [Removes an element](/docs/api/workspace/classes/EditorController.md#removeitems) from the diagram. |
17-
| [SelectionActionZoomToFit](/docs/api/workspace/functions/SelectionActionZoomToFit.md) | Zooms-in or zooms-out the viewport to [fit](/docs/api/workspace/interfaces/CanvasApi.md#zoomtofit) all selected elements. |
18-
| [SelectionActionLayout](/docs/api/workspace/functions/SelectionActionLayout.md) | Performs graph layout algorithm on the sub-graph formed from the selected elements. |
19-
| [SelectionActionExpand](/docs/api/workspace/functions/ToolbarActionExport.md) | Toggles expanded state for the selected elements. |
20-
| [SelectionActionAnchor](/docs/api/workspace/functions/SelectionActionAnchor.md) | Displays a link to the entity IRI. |
21-
| [SelectionActionConnections](/docs/api/workspace/functions/SelectionActionConnections.md) | Opens the [connections menu](/docs/components/connections-menu.md) for the selected entities. |
22-
| [SelectionActionAddToFilter](/docs/api/workspace/functions/SelectionActionAddToFilter.md) | Adds the selected entity to the [instances search](/docs/components/instances-search.md) filter. |
23-
| [SelectionActionGroup](/docs/api/workspace/functions/SelectionActionGroup.md) | [Groups or ungroups](/docs/api/workspace/classes/DataDiagramModel.md#group) selected elements. |
24-
| [SelectionActionEstablishLink](/docs/api/workspace/functions/SelectionActionEstablishLink.md) | Starts [creating a relation](/docs/concepts/graph-authoring.md) to an existing or a new entity by dragging it. |
18+
| [`<SelectionAction />`](/docs/api/workspace/functions/SelectionAction.md) | Base component to display a custom element action. |
19+
| [`<SelectionActionSpinner />`](/docs/api/workspace/functions/SelectionActionSpinner.md) | Displays a loading spinner (useful as building block for other action components). |
20+
| [`<SelectionActionRemove />`](/docs/api/workspace/functions/SelectionActionRemove.md) | [Removes an element](/docs/api/workspace/classes/EditorController.md#removeitems) from the diagram. |
21+
| [`<SelectionActionZoomToFit />`](/docs/api/workspace/functions/SelectionActionZoomToFit.md) | Zooms-in or zooms-out the viewport to [fit](/docs/api/workspace/interfaces/CanvasApi.md#zoomtofit) all selected elements. |
22+
| [`<SelectionActionLayout />`](/docs/api/workspace/functions/SelectionActionLayout.md) | Performs graph layout algorithm on the sub-graph formed from the selected elements. |
23+
| [`<SelectionActionExpand />`](/docs/api/workspace/functions/ToolbarActionExport.md) | Toggles expanded state for the selected elements. |
24+
| [`<SelectionActionAnchor />`](/docs/api/workspace/functions/SelectionActionAnchor.md) | Displays a link to the entity IRI. |
25+
| [`<SelectionActionConnections />`](/docs/api/workspace/functions/SelectionActionConnections.md) | Opens the [connections menu](/docs/components/connections-menu.md) for the selected entities. |
26+
| [`<SelectionActionAddToFilter />`](/docs/api/workspace/functions/SelectionActionAddToFilter.md) | Adds the selected entity to the [instances search](/docs/components/instances-search.md) filter. |
27+
| [`<SelectionActionGroup />`](/docs/api/workspace/functions/SelectionActionGroup.md) | [Groups or ungroups](/docs/api/workspace/classes/DataDiagramModel.md#group) selected elements. |
28+
| [`<SelectionActionEstablishLink />`](/docs/api/workspace/functions/SelectionActionEstablishLink.md) | Starts [creating a relation](/docs/concepts/graph-authoring.md) to an existing or a new entity by dragging it. |
2529

2630
## Selecting links
2731

28-
[HaloLink](/docs/api/workspace/functions/HaloLink) widget allows selecting a single link to perform a link action on it.
32+
[`<HaloLink />`](/docs/api/workspace/functions/HaloLink) widget allows selecting a single link to perform a link action on it.
2933

3034
There are several built-in link actions that can be used:
3135
| Action component | Description |
3236
|------------------|-------------|
33-
| [LinkAction](/docs/api/workspace/functions/LinkAction.md) | Base component to display an action on the selected link. <br/>[useLinkActionContext()](/docs/api/workspace/functions/useLinkActionContext.md) hook can be used to get additional context for the selected link, including path geometry. |
34-
| [LinkActionSpinner](/docs/api/workspace/functions/LinkActionSpinner.md) | Displays a loading spinner (useful as building block for other action components). |
35-
| [LinkActionEdit](/docs/api/workspace/functions/LinkActionEdit.md) | Starts [editing the relation](/docs/concepts/graph-authoring.md). |
36-
| [LinkActionDelete](/docs/api/workspace/functions/LinkActionDelete.md) | Deletes [the relation](/docs/concepts/graph-authoring.md). |
37-
| [LinkActionMoveEndpoint](/docs/api/workspace/functions/LinkActionMoveEndpoint.md) | Displays a handle which allows to [change the relation](/docs/concepts/graph-authoring.md) by moving its endpoint (source or target) to another entity. |
38-
| [LinkActionRename](/docs/api/workspace/functions/LinkActionRename.md) | Starts [renaming a link](/docs/api/workspace/interfaces/RenameLinkProvider.md) (change the label on the diagram only). |
37+
| [`<LinkAction />`](/docs/api/workspace/functions/LinkAction.md) | Base component to display an action on the selected link. <br/>[`useLinkActionContext()`](/docs/api/workspace/functions/useLinkActionContext.md) hook can be used to get additional context for the selected link, including path geometry. |
38+
| [`<LinkActionSpinner />`](/docs/api/workspace/functions/LinkActionSpinner.md) | Displays a loading spinner (useful as building block for other action components). |
39+
| [`<LinkActionEdit />`](/docs/api/workspace/functions/LinkActionEdit.md) | Starts [editing the relation](/docs/concepts/graph-authoring.md). |
40+
| [`<LinkActionDelete />`](/docs/api/workspace/functions/LinkActionDelete.md) | Deletes [the relation](/docs/concepts/graph-authoring.md). |
41+
| [`<LinkActionMoveEndpoint />`](/docs/api/workspace/functions/LinkActionMoveEndpoint.md) | Displays a handle which allows to [change the relation](/docs/concepts/graph-authoring.md) by moving its endpoint (source or target) to another entity. |
42+
| [`<LinkActionRename />`](/docs/api/workspace/functions/LinkActionRename.md) | Starts [renaming a link](/docs/api/workspace/interfaces/RenameLinkProvider.md) (change the label on the diagram only). |
3943

4044
## Styles
4145

0 commit comments

Comments
 (0)