Toolbar and menu

<Toolbar /> component is a canvas widget to display a simple toolbar with a an optional dropdown menu.

Toolbar actions

There are several built-in toolbar actions that can be displayed as menu items or quick action buttons:

Action component	Description
<ToolbarAction />	Base component to display a custom action in the menu or as button.
<ToolbarActionOpen />	Opens a generic file selection dialog.
<ToolbarActionSave />	Saves diagram layout state or applies authored changes.
<ToolbarActionClearAll />	Clears diagram content (all elements, links, etc).
<ToolbarActionExport />	Exports the diagram into a file, or prints it.
<ToolbarActionUndo />	Performs an undo for a command from the command history.
<ToolbarActionRedo />	Performs a redo for a command from the command history.
<ToolbarActionLayout />	Performs the default graph layout algorithm on the diagram content.
<ToolbarLanguageSelector />	Displays a data language selector for the workspace.

Example: additional toolbars

Result

Loading...

Live Editor

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

  const {onMount, getContext} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
    const {model, view, performLayout} = context;
    model.createElement('http://example.com/entity1');
    model.createElement('http://example.com/entity2');
    model.createLinks({
      sourceId: 'http://example.com/entity1',
      targetId: 'http://example.com/entity2',
      linkTypeId: 'http://example.com/connectedTo',
      properties: {},
    });
    await performLayout({signal});
  }, []);

  return (
    <div className='reactodia-live-editor'>
      <Reactodia.Workspace ref={onMount}
        defaultLayout={defaultLayout}>
        <Reactodia.DefaultWorkspace
          actions={null}
          navigator={null}
          canvasWidgets={[
            <Reactodia.Toolbar key='bottom-left'
              dock='sw'
              menu={
                <>
                  <Reactodia.ToolbarActionClearAll />
                  <Reactodia.ToolbarActionExport kind='print' />
                </>
              }>
              <Reactodia.ToolbarActionUndo />
              <Reactodia.ToolbarActionRedo />
              <Reactodia.ToolbarActionLayout />
            </Reactodia.Toolbar>,
            <Reactodia.Toolbar key='top-right'
              dock='ne'>
              <Reactodia.ToolbarAction
                onSelect={() => {
                  const {overlay} = getContext();
                  overlay.showDialog({content: <div>🎉</div>});
                }}>
                Show a dialog
              </Reactodia.ToolbarAction>
            </Reactodia.Toolbar>,
            <Reactodia.Toolbar key='bottom-right'
              dock='se'>
              <Reactodia.ToolbarLanguageSelector
                languages={[
                  {code: 'de', label: 'Deutsch'},
                  {code: 'en', label: 'english'},
                  {code: 'es', label: 'español'},
                  {code: 'ru', label: 'русский'},
                  {code: 'zh', label: '汉语'},
                ]}
              />
            </Reactodia.Toolbar>,
          ]}
        />
      </Reactodia.Workspace>
    </div>
  );
}

Styles

The component look can be customized using the following CSS properties (see design system for more information):

Property	Description
--reactodia-toolbar-height	Default height for the toolbar and the menu toggle.