Skip to main content

Workspace Components

<Workspace /> is a top-level component which establishes workspace context, which stores graph data and provides means to display and interact with the diagram.

Hooks​

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 when the workspace component is unmounted.

useWorkspace() hook can be used from inside <Workspace /> child components to access workspace context; see workspace context for details.

Workspace Layout​

The UI of the workspace is defined by the child components provided to the <Workspace />:

Default built-in layout is provided as <DefaultWorkspace /> component which includes the unified search, main menu and action toolbars and all built-in canvas widgets.

Alternative (classic) built-in layout is provided as <ClassicWorkspace /> component which uses layout panels with class tree, instances search, link types toolbox, <ClassicToolbar /> and all built-in canvas widgets.

When providing a custom workspace layout it is required to use <WorkspaceRoot /> as a top-level parent component to establish necessary style defaults, including styles for light or dark color scheme.

Example: canvas-only custom layout​

Result
Loading...
Live Editor
function Example() {
  const {defaultLayout} = Reactodia.useWorker(Layouts);

  const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
      const {model, view} = context;
      const dataProvider = new Reactodia.EmptyDataProvider();
      await model.createNewDiagram({dataProvider, signal});
      model.createElement('http://example.com/entity');
      const canvas = view.findAnyCanvas();
      canvas.renderingState.syncUpdate();
      canvas.zoomToFit();
  }, []);

  return (
    <div className='reactodia-live-editor'>
      <Reactodia.Workspace ref={onMount}
        defaultLayout={defaultLayout}>
        <Reactodia.WorkspaceRoot>
          <Reactodia.Canvas />
        </Reactodia.WorkspaceRoot>
      </Reactodia.Workspace>
    </div>
  );
}