toolbar.md

title	<Toolbar />

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

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}>
          <Reactodia.Toolbar dock='sw'
            menu={
              <>
                <Reactodia.ToolbarActionClearAll />
                <Reactodia.ToolbarActionExport kind='print' />
              </>
            }>
            <Reactodia.ToolbarActionUndo />
            <Reactodia.ToolbarActionRedo />
            <Reactodia.ToolbarActionLayout />
          </Reactodia.Toolbar>
          <Reactodia.Toolbar dock='ne'>
            <Reactodia.ToolbarAction
              onSelect={() => {
                const {overlay} = getContext();
                overlay.showDialog({content: <div>🎉</div>});
              }}>
              Show a dialog
            </Reactodia.ToolbarAction>
          </Reactodia.Toolbar>
          <Reactodia.Toolbar 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.DefaultWorkspace>
      </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.