Skip to content

Commit ed0cabd

Browse files
AlexeyMzAlexeyMz
committed
Update, extend and improve doc pages with cross-links
1 parent caf3773 commit ed0cabd

26 files changed

Lines changed: 247 additions & 99 deletions

‎docs/components/canvas.md‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,30 @@ title: Canvas
44

55
# Canvas Components
66

7-
Component to display a canvas for the diagram with elements, links and additional widgets.
8-
9-
API references:
10-
- [Canvas](/docs/api/workspace/functions/Canvas)
11-
- [CanvasContext](/docs/api/workspace/interfaces/CanvasContext)
12-
- [CanvasApi](/docs/api/workspace/interfaces/CanvasApi)
13-
- [useCanvas](/docs/api/workspace/functions/useCanvas)
14-
- [defineCanvasWidget](/docs/api/workspace/functions/defineCanvasWidget)
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.
8+
9+
[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.
10+
11+
## Canvas widgets
12+
13+
To define a custom canvas widget, the target React component should be marked by [defineCanvasWidget()](/docs/api/workspace/functions/defineCanvasWidget) function to define its attachment layer.
14+
15+
### Example: custom viewport widget
16+
17+
```tsx
18+
function CustomViewportWidget() {
19+
return (
20+
<div style={{position: 'absolute', right: '10px', top: '10px'}}>
21+
<button type='button'
22+
className='reactodia-btn reactodia-btn-default'>
23+
Click me
24+
</button>
25+
</div>
26+
);
27+
}
28+
29+
Reactodia.defineCanvasWidget(
30+
CustomViewportWidget,
31+
element => ({element, attachment: 'viewport'})
32+
);
33+
```

‎docs/components/class-tree.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
# Class Tree
22

3-
Component to display an [element type](/docs/api/workspace/type-aliases/ElementTypeIri.md) (class) tree for the workspace.
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.
44

55
Element type graph is loaded from [data provider](/docs/concepts/data-provider.md) associated with the [diagram model](/docs/concepts/workspace-context.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

9-
API references:
10-
- [ClassTreeProps](/docs/api/workspace/interfaces/ClassTreeProps)
9+
:::tip
10+
11+
The same functionality is also available as `SearchSectionElementTypes` [unified search section](/docs/components/unified-search.md).
12+
13+
:::

‎docs/components/connections-menu.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
# Connections Menu
22

3-
[Canvas widget](/docs/components/canvas.md) component to explore and navigate the graph by adding connected entities to the diagram.
4-
5-
API references:
6-
- [ConnectionsMenu](/docs/api/workspace/functions/ConnectionsMenu)
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.

‎docs/components/dialog.md‎

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

55
# Dialog system
66

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

9-
API references:
10-
- [OverlayController.showDialog()](/docs/api/workspace/classes/OverlayController#showdialog)
11-
- [OverlayController.hideDialog()](/docs/api/workspace/classes/OverlayController#hideDialog)
9+
[OverlayController.showDialog()](/docs/api/workspace/classes/OverlayController#showdialog) opens a dialog with the specified style and content.
10+
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.
14+
15+
### Example: a modal dialog over the viewport
16+
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>
35+
</div>
36+
),
37+
});
38+
```

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
# Drop on Canvas
22

3-
[Canvas widget](/docs/components/canvas.md) component to allow creating entity elements on the diagram by dragging then dropping a URL (IRI) to the canvas.
4-
5-
API references:
6-
- [DropOnCanvas](/docs/api/workspace/functions/DropOnCanvas)
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) to the canvas.

‎docs/components/halo.md‎

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

‎docs/components/instances-search.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Instances Search
22

3-
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.
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.
44

5-
API references:
6-
- [InstancesSearchProps](/docs/api/workspace/interfaces/InstancesSearchProps)
5+
:::tip
6+
7+
The same functionality is also available as `SearchSectionEntities` [unified search section](/docs/components/unified-search.md).
8+
9+
:::

‎docs/components/layout-panels.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Layout Panels
3+
---
4+
5+
# Resizable and Collapsible Layout Panels
6+
7+
Reactodia provides layout panel components to display a row or a column of resizable and collapsible sub-components in a accordion-like view:
8+
9+
| Layout panel component | Description |
10+
|------------------------|-------------|
11+
| [WorkspaceLayoutRow](/docs/api/workspace/functions/WorkspaceLayoutRow) | Displays a horizontal row with resizable child columns or items which can be expanded or collapsed. |
12+
| [WorkspaceLayoutColumn](/docs/api/workspace/functions/WorkspaceLayoutColumn) | Displays a vertical accordion column with resizable child items which can be expanded or collapsed. |
13+
| [WorkspaceLayoutItem](/docs/api/workspace/functions/WorkspaceLayoutItem) | Displays a child component within the layout row or column. |
14+
15+
### Example: layout with central area and side columns
16+
17+
```tsx live
18+
function SomeLayout() {
19+
return (
20+
<Reactodia.WorkspaceLayoutRow>
21+
<Reactodia.WorkspaceLayoutColumn>
22+
<Reactodia.WorkspaceLayoutItem heading='First'>
23+
First item
24+
</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>
39+
)
40+
}
41+
```

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Link Types Toolbox
22

3-
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.
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.
44

5-
API references:
6-
- [LinkTypesToolboxProps](/docs/api/workspace/interfaces/LinkTypesToolboxProps)
5+
:::tip
6+
7+
The same functionality is also available as `SearchSectionLinkTypes` [unified search section](/docs/components/unified-search.md).
8+
9+
:::

‎docs/components/navigator.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
# Navigator
22

3-
[Canvas widget](/docs/components/canvas.md) component to display a minimap of the diagram contents.
4-
5-
API references:
6-
- [Navigator](/docs/api/workspace/functions/Navigator)
3+
[Navigator](/docs/api/workspace/functions/Navigator) component is a [canvas widget](/docs/components/canvas.md) to display a minimap of the diagram contents.

0 commit comments

Comments
 (0)