graphwise-reactodia 0.0.1-TR19 → 0.0.1-TR20

package/README.md

@@ -66,6 +66,45 @@ persisted in the DB, so they can't be fetched lazily and must be supplied by the
 
 When both are supplied `seedGraph` takes precedence over `seedIris`.
 
+## UI configuration
+
+`config.ui` (`UiConfig`) changes the default UI configuration. It is JSON and read once on mount. It is partial and
+merged over the default: objects are merged key by key, lists replace the default whole.
+
+The default UI configuration:
+
+```ts
+{
+  mainToolbar: {dock: ToolbarDock.NW},
+  actionsToolbar: {dock: ToolbarDock.SW},
+  menu: {items: [CLEAR_ALL, EXPORT_PNG, EXPORT_SVG, PRINT, EXPORT_JSON, IMPORT_JSON]},
+  nodeActions: [GROUP, REMOVE, EXPAND, OPEN_LINK, CONNECTIONS, ADD_TO_FILTER, ANNOTATE, ESTABLISH_LINK]
+}
+```
+
+| Field            | Description                                                                        |
+|------------------|------------------------------------------------------------------------------------|
+| `mainToolbar`    | `ToolbarPosition` of the toolbar with the menu and the search.                     |
+| `actionsToolbar` | `ToolbarPosition` of the toolbar with undo, redo and layout.                       |
+| `menu.items`     | `MenuItem`s of the main menu, in order. An empty list hides the menu.              |
+| `nodeActions`    | `NodeAction`s shown around a selected node.                                        |
+
+`ToolbarPosition` is `{dock?: ToolbarDock, offsetX?: number, offsetY?: number}`.
+
+E.g. the actions toolbar at the top right, without the link node action:
+
+```ts
+element.config = {
+  queryFunction,
+  ui: {
+    actionsToolbar: {dock: ToolbarDock.NE},
+    nodeActions: [GROUP, REMOVE, EXPAND, CONNECTIONS, ADD_TO_FILTER, ANNOTATE, ESTABLISH_LINK]
+  }
+};
+```
+
+An unknown value is skipped and reported as `unknown-ui-config`; an unknown dock keeps the default toolbar position.
+
 ## Events
 
 The element sends every event to the host through one DOM event, `graphwiseReactodiaEvent`. The event
@@ -118,6 +157,7 @@ The element dispatches an `error` event for every error it reports; the codes be
 | `diagram-import`        | The uploaded file was rejected or its import failed.       |
 | `local-diagram-read`    | Reading the diagram from local storage failed.             |
 | `local-diagram-save`    | Saving the diagram in local storage failed.                |
+| `unknown-ui-config`     | `config.ui` has an unknown value, which is skipped.        |
 
 Failed PNG/SVG exports and printing are not reported.
 

package/dist/cjs/graphwise-reactodia.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DtzCybH4.js');
-var errorCode = require('./error-code-BjU_V9e8.js');
+var nodeAction = require('./node-action-DkJ5ct17.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -30927,10 +30927,10 @@ function getContentFittingBoxForLayout(state) {
 }
 
 const graphwise_toolbar_action$1 = {
-	"download_diagram.label": "Export to JSON",
-	"download_diagram.title": "Export the diagram to a JSON file",
-	"upload_diagram.label": "Import from JSON",
-	"upload_diagram.title": "Replace the diagram with one from a JSON file"
+	"export_json.label": "Export to JSON",
+	"export_json.title": "Export the diagram to a JSON file",
+	"import_json.label": "Import from JSON",
+	"import_json.title": "Replace the diagram with one from a JSON file"
 };
 var enTranslation = {
 	graphwise_toolbar_action: graphwise_toolbar_action$1
@@ -31191,10 +31191,10 @@ const toolbar = {
 	"menu_toggle.title": "Ouvrir le menu"
 };
 const graphwise_toolbar_action = {
-	"download_diagram.label": "Exporter en JSON",
-	"download_diagram.title": "Exporter le diagramme en fichier JSON",
-	"upload_diagram.label": "Importer depuis JSON",
-	"upload_diagram.title": "Remplacer le diagramme par celui d'un fichier JSON"
+	"export_json.label": "Exporter en JSON",
+	"export_json.title": "Exporter le diagramme en fichier JSON",
+	"import_json.label": "Importer depuis JSON",
+	"import_json.title": "Remplacer le diagramme par celui d'un fichier JSON"
 };
 const toolbar_action = {
 	"clear_all.command": "Tout effacer",
@@ -31510,8 +31510,8 @@ let EventService = class EventService {
      */
     subscribeToClearDiagramStorage(onClear) {
         const target = service(WindowService).getWindow();
-        target.addEventListener(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
-        return () => target.removeEventListener(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        target.addEventListener(nodeAction.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        return () => target.removeEventListener(nodeAction.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
     }
 };
 EventService.ID = 'EventService';
@@ -31562,7 +31562,7 @@ let ErrorService = ErrorService_1 = class ErrorService {
             return;
         }
         causes.forEach((cause) => this.reported.add(cause));
-        this.eventService.emit({ type: errorCode.EventType.ERROR, payload: { code, error: thrown } });
+        this.eventService.emit({ type: nodeAction.EventType.ERROR, payload: { code, error: thrown } });
     }
     /**
      * Whether any link of the given cause chain is an abort or is already reported.
@@ -31616,7 +31616,7 @@ let DiagramStorageService = DiagramStorageService_1 = class DiagramStorageServic
             return JSON.parse(raw);
         }
         catch (error) {
-            this.errorService.report(errorCode.ErrorCode.LOCAL_DIAGRAM_READ, error);
+            this.errorService.report(nodeAction.ErrorCode.LOCAL_DIAGRAM_READ, error);
             return undefined;
         }
     }
@@ -31628,7 +31628,7 @@ let DiagramStorageService = DiagramStorageService_1 = class DiagramStorageServic
             this.storage.setItem(DiagramStorageService_1.STORAGE_KEY, JSON.stringify(diagram));
         }
         catch (error) {
-            this.errorService.report(errorCode.ErrorCode.LOCAL_DIAGRAM_SAVE, error);
+            this.errorService.report(nodeAction.ErrorCode.LOCAL_DIAGRAM_SAVE, error);
         }
     }
     /**
@@ -31740,6 +31740,65 @@ const resetColors = () => {
     typeToIndex.clear();
 };
 
+/**
+ * Merges an object with default values. Ported from the GraphDB Workbench `ObjectUtil.mergeWithDefaults`.
+ *
+ * For each property in `defaults`, if the value in `object` is `null` or `undefined`, the default value is used instead.
+ * Nested objects are merged recursively. Arrays and other non-plain values are treated as single values and are not
+ * merged.
+ *
+ * The returned object is a new object and does not share references with the inputs. The inputs must be
+ * structured-cloneable.
+ *
+ * @param object Source object whose values take precedence over defaults.
+ * @param defaults Default values applied when properties are missing or null.
+ * @returns A new object containing the merged result.
+ */
+function mergeWithDefaults(object, defaults) {
+    const result = structuredClone(object);
+    Object.entries(defaults).forEach(([key, defaultValue]) => {
+        const value = result[key];
+        if (value === null || value === undefined) {
+            result[key] = structuredClone(defaultValue);
+        }
+        else if (isPlainObject(value) && isPlainObject(defaultValue)) {
+            result[key] = mergeWithDefaults(value, defaultValue);
+        }
+    });
+    return result;
+}
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/**
+ * The default UI configuration: Reactodia's behaviour, plus the diagram download and upload in the menu.
+ */
+const DEFAULT_UI_CONFIG = {
+    mainToolbar: { dock: nodeAction.ToolbarDock.NW },
+    actionsToolbar: { dock: nodeAction.ToolbarDock.SW },
+    menu: {
+        items: [
+            nodeAction.MenuItem.CLEAR_ALL,
+            nodeAction.MenuItem.EXPORT_PNG,
+            nodeAction.MenuItem.EXPORT_SVG,
+            nodeAction.MenuItem.PRINT,
+            nodeAction.MenuItem.EXPORT_JSON,
+            nodeAction.MenuItem.IMPORT_JSON
+        ]
+    },
+    nodeActions: [
+        nodeAction.NodeAction.GROUP,
+        nodeAction.NodeAction.REMOVE,
+        nodeAction.NodeAction.EXPAND,
+        nodeAction.NodeAction.OPEN_LINK,
+        nodeAction.NodeAction.CONNECTIONS,
+        nodeAction.NodeAction.ADD_TO_FILTER,
+        nodeAction.NodeAction.ANNOTATE,
+        nodeAction.NodeAction.ESTABLISH_LINK
+    ]
+};
+
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -31802,37 +31861,125 @@ DiagramFileService = DiagramFileService_1 = __decorate([
 ], DiagramFileService);
 
 /**
- * The workspace main menu: Reactodia's default actions, followed by the diagram download and upload.
- *
- * Passing a `menu` to the `DefaultWorkspace` replaces its default actions, so they are listed here again.
- * Rendered inside the workspace, so the actions can use the workspace hooks.
+ * Exports the diagram as a JSON file.
  */
-function GraphwiseMenu() {
+function ExportDiagramAction() {
     const { model } = useWorkspace();
     const t = useTranslation();
     const diagramFileService = service(DiagramFileService);
-    const diagramService = service(DiagramService);
-    const errorService = service(ErrorService);
-    const downloadDiagram = () => {
+    const exportDiagram = () => {
         const timestamp = new Date().toISOString().replace(/[-:]|\.\d+Z$/g, '');
         diagramFileService.download(model.exportLayout(), `diagram-${timestamp}${DiagramFileService.FILE_EXTENSION}`);
     };
-    const uploadDiagram = async (file) => {
+    return reactExports.createElement(ToolbarAction, 
+    // The same icon as ToolbarActionSave. We don't use that action, since it disables saving on refresh
+    { className: 'reactodia-toolbar-action__save', title: t.text('graphwise_toolbar_action.export_json.title'), onSelect: exportDiagram }, t.text('graphwise_toolbar_action.export_json.label'));
+}
+
+/**
+ * Imports a diagram from a JSON file into the workspace.
+ */
+function ImportDiagramAction() {
+    const { model } = useWorkspace();
+    const t = useTranslation();
+    const diagramFileService = service(DiagramFileService);
+    const diagramService = service(DiagramService);
+    const errorService = service(ErrorService);
+    const importDiagram = async (file) => {
         try {
             const diagram = await diagramFileService.read(file);
             await diagramService.importDiagram(model, model.dataProvider, diagram);
         }
         catch (error) {
-            errorService.report(errorCode.ErrorCode.DIAGRAM_IMPORT, error);
+            errorService.report(nodeAction.ErrorCode.DIAGRAM_IMPORT, error);
         }
     };
-    return reactExports.createElement(reactExports.Fragment, null, reactExports.createElement(ToolbarActionClearAll, {}), reactExports.createElement(ToolbarActionExport, { kind: 'exportRaster' }), reactExports.createElement(ToolbarActionExport, { kind: 'exportSvg' }), reactExports.createElement(ToolbarActionExport, { kind: 'print' }), reactExports.createElement(ToolbarAction, 
-    // The same icon as ToolbarActionSave. We dont use that action, since it disables saving on refresh
-    { className: 'reactodia-toolbar-action__save', title: t.text('graphwise_toolbar_action.download_diagram.title'), onSelect: downloadDiagram }, t.text('graphwise_toolbar_action.download_diagram.label')), reactExports.createElement(ToolbarActionOpen, {
-        title: t.text('graphwise_toolbar_action.upload_diagram.title'),
+    return reactExports.createElement(ToolbarActionOpen, {
+        title: t.text('graphwise_toolbar_action.import_json.title'),
         fileAccept: DiagramFileService.FILE_EXTENSION,
-        onSelect: (file) => void uploadDiagram(file)
-    }, t.text('graphwise_toolbar_action.upload_diagram.label')));
+        onSelect: (file) => void importDiagram(file)
+    }, t.text('graphwise_toolbar_action.import_json.label'));
+}
+
+/**
+ * Each menu entry.
+ *
+ * Passing a `menu` to the `DefaultWorkspace` replaces its default actions, so they are listed here again.
+ */
+const MENU_ITEMS = {
+    [nodeAction.MenuItem.CLEAR_ALL]: (key) => reactExports.createElement(ToolbarActionClearAll, { key }),
+    [nodeAction.MenuItem.EXPORT_PNG]: (key) => reactExports.createElement(ToolbarActionExport, { key, kind: 'exportRaster' }),
+    [nodeAction.MenuItem.EXPORT_SVG]: (key) => reactExports.createElement(ToolbarActionExport, { key, kind: 'exportSvg' }),
+    [nodeAction.MenuItem.PRINT]: (key) => reactExports.createElement(ToolbarActionExport, { key, kind: 'print' }),
+    [nodeAction.MenuItem.EXPORT_JSON]: (key) => reactExports.createElement(ExportDiagramAction, { key }),
+    [nodeAction.MenuItem.IMPORT_JSON]: (key) => reactExports.createElement(ImportDiagramAction, { key })
+};
+/**
+ * The menu entries for the given menu items.
+ */
+function createMenuItems(items) {
+    return items.map((item) => MENU_ITEMS[item](item));
+}
+
+/**
+ * Each node action at its position in the fork's default `Halo`.
+ */
+const NODE_ACTIONS = {
+    [nodeAction.NodeAction.GROUP]: (key) => reactExports.createElement(SelectionActionGroup, { key, dock: 'nw', dockColumn: 1 }),
+    [nodeAction.NodeAction.REMOVE]: (key) => reactExports.createElement(SelectionActionRemove, { key, dock: 'ne' }),
+    [nodeAction.NodeAction.EXPAND]: (key) => reactExports.createElement(SelectionActionExpand, { key, dock: 's' }),
+    [nodeAction.NodeAction.OPEN_LINK]: (key) => reactExports.createElement(SelectionActionAnchor, { key, dock: 'w' }),
+    [nodeAction.NodeAction.CONNECTIONS]: (key) => reactExports.createElement(SelectionActionConnections, { key, dock: 'e' }),
+    [nodeAction.NodeAction.ADD_TO_FILTER]: (key) => reactExports.createElement(SelectionActionAddToFilter, { key, dock: 'se' }),
+    [nodeAction.NodeAction.ANNOTATE]: (key) => reactExports.createElement(SelectionActionAnnotate, { key, dock: 'se', dockColumn: 1 }),
+    [nodeAction.NodeAction.ESTABLISH_LINK]: (key) => reactExports.createElement(SelectionActionEstablishLink, { key, dock: 'sw' })
+};
+/**
+ * The `Halo` children for the given node actions.
+ */
+function createNodeActions(actions) {
+    return actions.map((action) => NODE_ACTIONS[action](action));
+}
+
+const errorService$2 = service(ErrorService);
+/**
+ * Merges the host's UI configuration over the default and maps the result to `DefaultWorkspace` props. A `null` or
+ * missing field keeps the default; objects merge key by key and lists replace the default whole. Unknown values are
+ * reported and left out; a repeated list entry is kept once.
+ *
+ * @param ui The host's UI configuration.
+ */
+function toWorkspaceProps(ui) {
+    const resolved = mergeWithDefaults(ui !== null && ui !== void 0 ? ui : {}, DEFAULT_UI_CONFIG);
+    const menuItems = [...new Set(resolved.menu.items)].filter((item) => isValid(item, nodeAction.MenuItem));
+    const nodeActions = [...new Set(resolved.nodeActions)].filter((action) => isValid(action, nodeAction.NodeAction));
+    return {
+        menu: menuItems.length ? reactExports.createElement(reactExports.Fragment, null, createMenuItems(menuItems)) : null,
+        mainToolbar: toToolbarProps(resolved.mainToolbar, DEFAULT_UI_CONFIG.mainToolbar),
+        actionsToolbar: toToolbarProps(resolved.actionsToolbar, DEFAULT_UI_CONFIG.actionsToolbar),
+        halo: { children: createNodeActions(nodeActions) }
+    };
+}
+/**
+ * Maps a toolbar position to the `DefaultWorkspace` toolbar props. With an unknown dock, `defaultPosition` is used
+ * whole, since the offsets are relative to the dock.
+ */
+function toToolbarProps(position, defaultPosition) {
+    const { dock, offsetX, offsetY } = isValid(position.dock, nodeAction.ToolbarDock) ? position : defaultPosition;
+    return { dock, dockOffsetX: offsetX, dockOffsetY: offsetY };
+}
+/**
+ * Whether `value` is one of the `known` values. Reports it as unknown UI configuration when it is not.
+ *
+ * @param value The value from the UI configuration.
+ * @param known The known values, e.g. an enum.
+ */
+function isValid(value, known) {
+    const isValid = Object.values(known).includes(value);
+    if (!isValid) {
+        errorService$2.report(nodeAction.ErrorCode.UNKNOWN_UI_CONFIG, new Error(`Unknown UI configuration value: "${value}"`));
+    }
+    return isValid;
 }
 
 /**
@@ -31859,6 +32006,11 @@ let workspaceContext = null;
  */
 const subscriptions = new SubscriptionList();
 let diagramStorageSubscription;
+/**
+ * The `DefaultWorkspace` props from the host's UI configuration. Kept across reloads, so unknown values are reported
+ * once, and cleared in {@link unmountReactodia}.
+ */
+let uiConfigProps;
 const diagramService = service(DiagramService);
 const diagramStorageService = service(DiagramStorageService);
 const eventService$1 = service(EventService);
@@ -31868,7 +32020,7 @@ const errorService$1 = service(ErrorService);
  */
 function emitTextSearch(method, params) {
     if (method === 'lookup' && params.text) {
-        eventService$1.emit({ type: errorCode.EventType.TEXT_SEARCH });
+        eventService$1.emit({ type: nodeAction.EventType.TEXT_SEARCH });
     }
 }
 /**
@@ -31881,7 +32033,7 @@ const reportDataFetchError = async (_method, params, body) => {
     }
     catch (error) {
         if (!((_a = params.signal) === null || _a === void 0 ? void 0 : _a.aborted)) {
-            errorService$1.report(errorCode.ErrorCode.DATA_FETCH, error);
+            errorService$1.report(nodeAction.ErrorCode.DATA_FETCH, error);
         }
         throw error;
     }
@@ -32020,7 +32172,7 @@ function ReactodiaApp(props) {
         }
         catch (error) {
             if (!signal.aborted) {
-                errorService$1.report(errorCode.ErrorCode.DIAGRAM_LOAD, error);
+                errorService$1.report(nodeAction.ErrorCode.DIAGRAM_LOAD, error);
             }
             // rethrow, so the workspace shows the failure on its loading spinner
             throw error;
@@ -32042,17 +32194,13 @@ function ReactodiaApp(props) {
         defaultLanguage: language,
         translations: translationsForLanguage(language),
         typeStyleResolver: resolveTypeStyle
-    }, reactExports.createElement(DefaultWorkspace, {
-        colorScheme: props.theme,
-        menu: reactExports.createElement(GraphwiseMenu),
-        // place Undo/redo/layout actions in top right corner.
-        actionsToolbar: { dock: 'ne' }
-    }));
+    }, reactExports.createElement(DefaultWorkspace, Object.assign({ colorScheme: props.theme }, uiConfigProps)));
 }
 /**
  * Mounts the Reactodia application into the given container and returns the React root.
  */
 function mountReactodia(container, props) {
+    uiConfigProps !== null && uiConfigProps !== void 0 ? uiConfigProps : (uiConfigProps = toWorkspaceProps(props.config.ui));
     const root = clientExports.createRoot(container);
     root.render(reactExports.createElement(ReactodiaApp, props));
     return root;
@@ -32072,7 +32220,7 @@ async function updateReactodia(props) {
         await model.createNewDiagram({ dataProvider });
     }
     catch (error) {
-        errorService$1.report(errorCode.ErrorCode.DIAGRAM_LOAD, error);
+        errorService$1.report(nodeAction.ErrorCode.DIAGRAM_LOAD, error);
     }
 }
 /**
@@ -32087,10 +32235,11 @@ function exportReactodiaLayout() {
  */
 function unmountReactodia(root) {
     subscriptions.unsubscribeAll();
+    uiConfigProps = undefined;
     root.unmount();
 }
 
-const graphwiseReactodiaCss = "graphwise-reactodia{--_graphwise-reactodia-type-color-01:var(--graphwise-reactodia-type-color-01);--_graphwise-reactodia-type-color-02:var(--graphwise-reactodia-type-color-02);--_graphwise-reactodia-type-color-03:var(--graphwise-reactodia-type-color-03);--_graphwise-reactodia-type-color-04:var(--graphwise-reactodia-type-color-04);--_graphwise-reactodia-type-color-05:var(--graphwise-reactodia-type-color-05);--_graphwise-reactodia-type-color-06:var(--graphwise-reactodia-type-color-06);--_graphwise-reactodia-type-color-07:var(--graphwise-reactodia-type-color-07);--_graphwise-reactodia-type-color-08:var(--graphwise-reactodia-type-color-08);--_graphwise-reactodia-type-color-09:var(--graphwise-reactodia-type-color-09);--_graphwise-reactodia-type-color-10:var(--graphwise-reactodia-type-color-10);--_graphwise-reactodia-type-color-11:var(--graphwise-reactodia-type-color-11);--_graphwise-reactodia-type-color-12:var(--graphwise-reactodia-type-color-12);--_graphwise-reactodia-type-color-13:var(--graphwise-reactodia-type-color-13);--_graphwise-reactodia-type-color-14:var(--graphwise-reactodia-type-color-14);--_graphwise-reactodia-type-color-15:var(--graphwise-reactodia-type-color-15);--_graphwise-reactodia-type-color-16:var(--graphwise-reactodia-type-color-16);--_graphwise-reactodia-type-color-17:var(--graphwise-reactodia-type-color-17);--_graphwise-reactodia-type-color-18:var(--graphwise-reactodia-type-color-18);--_graphwise-reactodia-type-color-19:var(--graphwise-reactodia-type-color-19);--_graphwise-reactodia-type-color-20:var(--graphwise-reactodia-type-color-20);--_graphwise-reactodia-type-color-contrast:var(--graphwise-reactodia-type-color-contrast, #fff)}graphwise-reactodia{display:block;width:100%;height:100%}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}graphwise-reactodia .reactodia-standard-element__thumbnail:not(:has(img)){background:var(--reactodia-element-style-color);border-radius:50%;color:var(--_graphwise-reactodia-type-color-contrast)}";
+const graphwiseReactodiaCss = "graphwise-reactodia{--_graphwise-reactodia-type-color-01:var(--graphwise-reactodia-type-color-01);--_graphwise-reactodia-type-color-02:var(--graphwise-reactodia-type-color-02);--_graphwise-reactodia-type-color-03:var(--graphwise-reactodia-type-color-03);--_graphwise-reactodia-type-color-04:var(--graphwise-reactodia-type-color-04);--_graphwise-reactodia-type-color-05:var(--graphwise-reactodia-type-color-05);--_graphwise-reactodia-type-color-06:var(--graphwise-reactodia-type-color-06);--_graphwise-reactodia-type-color-07:var(--graphwise-reactodia-type-color-07);--_graphwise-reactodia-type-color-08:var(--graphwise-reactodia-type-color-08);--_graphwise-reactodia-type-color-09:var(--graphwise-reactodia-type-color-09);--_graphwise-reactodia-type-color-10:var(--graphwise-reactodia-type-color-10);--_graphwise-reactodia-type-color-11:var(--graphwise-reactodia-type-color-11);--_graphwise-reactodia-type-color-12:var(--graphwise-reactodia-type-color-12);--_graphwise-reactodia-type-color-13:var(--graphwise-reactodia-type-color-13);--_graphwise-reactodia-type-color-14:var(--graphwise-reactodia-type-color-14);--_graphwise-reactodia-type-color-15:var(--graphwise-reactodia-type-color-15);--_graphwise-reactodia-type-color-16:var(--graphwise-reactodia-type-color-16);--_graphwise-reactodia-type-color-17:var(--graphwise-reactodia-type-color-17);--_graphwise-reactodia-type-color-18:var(--graphwise-reactodia-type-color-18);--_graphwise-reactodia-type-color-19:var(--graphwise-reactodia-type-color-19);--_graphwise-reactodia-type-color-20:var(--graphwise-reactodia-type-color-20);--_graphwise-reactodia-type-color-contrast:var(--graphwise-reactodia-type-color-contrast, #fff)}graphwise-reactodia{display:block;width:100%;height:100%}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-standard-element__thumbnail:not(:has(img)){background:var(--reactodia-element-style-color);border-radius:50%;color:var(--_graphwise-reactodia-type-color-contrast)}graphwise-reactodia .reactodia-note-annotation{overflow:auto}graphwise-reactodia .reactodia-note-annotation__editor{overflow-wrap:anywhere}";
 
 const errorService = service(ErrorService);
 const eventService = service(EventService);
@@ -32141,7 +32290,7 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2e8541c791f478484c4bad64ad758df99aba2059' }));
+        return (index.h(index.Host, { key: 'b5997ab551d1afe62b4a81166aca98a7d62f4e35' }));
     }
     subscribeToEvents() {
         this.subscriptions.add(eventService.subscribe((detail) => this.eventEmitter.emit(detail)));
@@ -32180,7 +32329,7 @@ const GraphwiseReactodia = class {
     }
     reportMissingPropError(message) {
         const error = new Error(message);
-        errorService.report(errorCode.ErrorCode.MISSING_REQUIRED_PROP, error);
+        errorService.report(nodeAction.ErrorCode.MISSING_REQUIRED_PROP, error);
         return error;
     }
     get hostElement() { return index.getElement(this); }

package/dist/cjs/index.cjs.js

@@ -1,19 +1,31 @@
 'use strict';
 
-var errorCode = require('./error-code-BjU_V9e8.js');
+var nodeAction = require('./node-action-DkJ5ct17.js');
 
 /**
  * Name of the DOM event the `graphwise-reactodia` element dispatches for every event.
  */
 const GRAPHWISE_REACTODIA_EVENT = 'graphwiseReactodiaEvent';
 
-exports.CLEAR_DIAGRAM_STORAGE_EVENT = errorCode.CLEAR_DIAGRAM_STORAGE_EVENT;
+exports.CLEAR_DIAGRAM_STORAGE_EVENT = nodeAction.CLEAR_DIAGRAM_STORAGE_EVENT;
 Object.defineProperty(exports, "ErrorCode", {
 	enumerable: true,
-	get: function () { return errorCode.ErrorCode; }
+	get: function () { return nodeAction.ErrorCode; }
 });
 Object.defineProperty(exports, "EventType", {
 	enumerable: true,
-	get: function () { return errorCode.EventType; }
+	get: function () { return nodeAction.EventType; }
+});
+Object.defineProperty(exports, "MenuItem", {
+	enumerable: true,
+	get: function () { return nodeAction.MenuItem; }
+});
+Object.defineProperty(exports, "NodeAction", {
+	enumerable: true,
+	get: function () { return nodeAction.NodeAction; }
+});
+Object.defineProperty(exports, "ToolbarDock", {
+	enumerable: true,
+	get: function () { return nodeAction.ToolbarDock; }
 });
 exports.GRAPHWISE_REACTODIA_EVENT = GRAPHWISE_REACTODIA_EVENT;

package/dist/cjs/node-action-DkJ5ct17.js

@@ -0,0 +1,96 @@
+'use strict';
+
+/**
+ * Event name for clearing the local store state of the diagram. There is an event listener listening for it, which
+ * will clear the local store state, whenever this event is fired.
+ */
+const CLEAR_DIAGRAM_STORAGE_EVENT = 'graphwise-reactodia:clear-diagram-storage';
+
+/**
+ * The kind of event the wrapper announces to the host. It selects the payload of an {@link EventDetail}.
+ */
+exports.EventType = void 0;
+(function (EventType) {
+    EventType["ERROR"] = "error";
+    EventType["TEXT_SEARCH"] = "text-search";
+})(exports.EventType || (exports.EventType = {}));
+
+/**
+ * The stable category of a reported error. The host uses it to choose its own message.
+ */
+exports.ErrorCode = void 0;
+(function (ErrorCode) {
+    /** A required prop is missing. */
+    ErrorCode["MISSING_REQUIRED_PROP"] = "missing-required-prop";
+    /** A SPARQL data provider call failed. */
+    ErrorCode["DATA_FETCH"] = "data-fetch";
+    /** The startup load, a reload or a repository switch failed. */
+    ErrorCode["DIAGRAM_LOAD"] = "diagram-load";
+    /** The uploaded file was rejected or its import failed. */
+    ErrorCode["DIAGRAM_IMPORT"] = "diagram-import";
+    /** Reading the diagram from local storage failed. */
+    ErrorCode["LOCAL_DIAGRAM_READ"] = "local-diagram-read";
+    /** Saving the diagram in local storage failed. */
+    ErrorCode["LOCAL_DIAGRAM_SAVE"] = "local-diagram-save";
+    /** The host's UI configuration has an unknown value, which is skipped. */
+    ErrorCode["UNKNOWN_UI_CONFIG"] = "unknown-ui-config";
+})(exports.ErrorCode || (exports.ErrorCode = {}));
+
+/**
+ * The side or corner of the canvas a toolbar is docked to.
+ */
+exports.ToolbarDock = void 0;
+(function (ToolbarDock) {
+    ToolbarDock["NW"] = "nw";
+    ToolbarDock["N"] = "n";
+    ToolbarDock["NE"] = "ne";
+    ToolbarDock["E"] = "e";
+    ToolbarDock["SE"] = "se";
+    ToolbarDock["S"] = "s";
+    ToolbarDock["SW"] = "sw";
+    ToolbarDock["W"] = "w";
+})(exports.ToolbarDock || (exports.ToolbarDock = {}));
+
+/**
+ * An entry of the workspace main menu.
+ */
+exports.MenuItem = void 0;
+(function (MenuItem) {
+    /** Removes all nodes from the diagram. */
+    MenuItem["CLEAR_ALL"] = "clear-all";
+    /** Exports the diagram as a PNG image. */
+    MenuItem["EXPORT_PNG"] = "export-png";
+    /** Exports the diagram as an SVG image. */
+    MenuItem["EXPORT_SVG"] = "export-svg";
+    /** Prints the diagram. */
+    MenuItem["PRINT"] = "print";
+    /** Exports the diagram as a JSON file. */
+    MenuItem["EXPORT_JSON"] = "export-json";
+    /** Imports a diagram from a JSON file. */
+    MenuItem["IMPORT_JSON"] = "import-json";
+})(exports.MenuItem || (exports.MenuItem = {}));
+
+/**
+ * A button shown around a selected node that acts on it.
+ */
+exports.NodeAction = void 0;
+(function (NodeAction) {
+    /** Groups or ungroups the selected nodes. */
+    NodeAction["GROUP"] = "group";
+    /** Removes the node from the diagram. */
+    NodeAction["REMOVE"] = "remove";
+    /** Expands or collapses the node to show its properties. */
+    NodeAction["EXPAND"] = "expand";
+    /** Opens the node IRI. */
+    NodeAction["OPEN_LINK"] = "open-link";
+    /** Opens the menu to navigate to connected nodes. */
+    NodeAction["CONNECTIONS"] = "connections";
+    /** Searches for nodes connected to this one. */
+    NodeAction["ADD_TO_FILTER"] = "add-to-filter";
+    /** Adds an annotation to the node. */
+    NodeAction["ANNOTATE"] = "annotate";
+    /** Draws a new link from the node; for an entity, only in authoring mode. */
+    NodeAction["ESTABLISH_LINK"] = "establish-link";
+})(exports.NodeAction || (exports.NodeAction = {}));
+
+exports.CLEAR_DIAGRAM_STORAGE_EVENT = CLEAR_DIAGRAM_STORAGE_EVENT;

package/dist/collection/components/graphwise-reactodia/graphwise-reactodia.css

@@ -53,11 +53,14 @@ graphwise-reactodia .reactodia-container {
   width: 100%;
   height: 100%;
 }
-graphwise-reactodia .reactodia-selection-action__link {
-  display: none;
-}
 graphwise-reactodia .reactodia-standard-element__thumbnail:not(:has(img)) {
   background: var(--reactodia-element-style-color);
   border-radius: 50%;
   color: var(--_graphwise-reactodia-type-color-contrast);
+}
+graphwise-reactodia .reactodia-note-annotation {
+  overflow: auto;
+}
+graphwise-reactodia .reactodia-note-annotation__editor {
+  overflow-wrap: anywhere;
 }

package/dist/collection/components/graphwise-reactodia/graphwise-reactodia.js

@@ -65,7 +65,7 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: '2e8541c791f478484c4bad64ad758df99aba2059' }));
+        return (h(Host, { key: 'b5997ab551d1afe62b4a81166aca98a7d62f4e35' }));
     }
     subscribeToEvents() {
         this.subscriptions.add(eventService.subscribe((detail) => this.eventEmitter.emit(detail)));
@@ -158,7 +158,7 @@ export class GraphwiseReactodia {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Host-supplied configuration: the SPARQL `queryFunction` transport and an optional `seed`\nset of entities to pre-populate the canvas with. A DOM property (an object, not an\nattribute) passed in from outside the wrapper.\n\nRead once on mount; not watched, as it only sets up the data source and initial canvas."
+                    "text": "Host-supplied configuration: the SPARQL `queryFunction` transport, an optional `seed`\nset of entities to pre-populate the canvas with and an optional `ui` configuration.\nA DOM property (an object, not an attribute) passed in from outside the wrapper.\n\nRead once on mount; not watched, as it only sets up the data source and initial canvas."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/graphwise-reactodia/menu/export-diagram-action.js

@@ -0,0 +1,19 @@
+import { createElement } from "react";
+import { ToolbarAction, useTranslation, useWorkspace } from "@reactodia/workspace";
+import { service } from "../providers/service/service-inject";
+import { DiagramFileService } from "../services/diagram-file/diagram-file.service";
+/**
+ * Exports the diagram as a JSON file.
+ */
+export function ExportDiagramAction() {
+    const { model } = useWorkspace();
+    const t = useTranslation();
+    const diagramFileService = service(DiagramFileService);
+    const exportDiagram = () => {
+        const timestamp = new Date().toISOString().replace(/[-:]|\.\d+Z$/g, '');
+        diagramFileService.download(model.exportLayout(), `diagram-${timestamp}${DiagramFileService.FILE_EXTENSION}`);
+    };
+    return createElement(ToolbarAction, 
+    // The same icon as ToolbarActionSave. We don't use that action, since it disables saving on refresh
+    { className: 'reactodia-toolbar-action__save', title: t.text('graphwise_toolbar_action.export_json.title'), onSelect: exportDiagram }, t.text('graphwise_toolbar_action.export_json.label'));
+}