Workspace Context

Reactodia uses a common context to connect its components with the graph model and other services such as graph layout, i18n and visual graph authoring.

Services and stores in the context

The WorkspaceContext contains references to different services and state stores, here is the important ones:

Property name	Type	Description
model	DataDiagramModel	Stores the diagram content and asynchronously fetches from a data provider. See graph model.
view	SharedCanvasState	Stores common state and settings for all canvases in the workspace.
editor	EditorController	Stores, modifies and validates changes from the visual graph authoring. See graph authoring.
overlay	OverlayController	Controls UI overlays for the canvases, including dialogs and tasks.
translation	Translation	Provides a translation for UI text strings. See i18n.

Getting the workspace context

The WorkspaceContext instance can be acquired in two ways. The first one is from the result of useLoadedWorkspace() hook which is used for initialization of the Workspace component:

function Example() {
  const {defaultLayout} = Reactodia.useWorker(Layouts);

  const {onMount, getContext} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
      /* ... */
  }, []);

  const onSomething = () => {
    const {model, editor, /* etc */} = getContext();
    // Use workspace context
  };

  return (
    <Reactodia.Workspace ref={onMount}
      defaultLayout={defaultLayout}>
      {/* ... */}
    </Reactodia.Workspace>
  );
}

The second way is to use useWorkspace() hook inside the Workspace component itself, e.g. a canvas widget:

function MyWidget() {
  const {model, editor, /* etc */} = Reactodia.useWorkspace();
  // Use workspace context
}

Reactodia.defineCanvasWidget(MyWidget, element => ({element, attachment: 'viewport'}));

function Example() {
  const {defaultLayout} = Reactodia.useWorker(Layouts);
  return (
      <Reactodia.Workspace ref={onMount}
        defaultLayout={defaultLayout}>
        <Reactodia.DefaultWorkspace
          search={null}
          canvasWidgets={[<MyWidget key='my-widget' />]}
        />
      </Reactodia.Workspace>
  );
}

note

The library also uses separate context for i18n (which is accessible by useTranslation() hook and translation property of the workspace context) and a nested context for the Canvas.