graphwise-reactodia 0.0.1-TR19 → 0.0.1-TR20

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

@@ -1,40 +1,24 @@
-import { createElement, Fragment } from "react";
-import { ToolbarAction, ToolbarActionClearAll, ToolbarActionExport, ToolbarActionOpen, useTranslation, useWorkspace } from "@reactodia/workspace";
-import { service } from "../providers/service/service-inject";
-import { DiagramService } from "../services/diagram/diagram.service";
-import { DiagramFileService } from "../services/diagram-file/diagram-file.service";
-import { ErrorService } from "../services/error/error.service";
-import { ErrorCode } from "../models/error/error-code";
+import { createElement } from "react";
+import { ToolbarActionClearAll, ToolbarActionExport } from "@reactodia/workspace";
+import { MenuItem } from "../models/ui/menu-item";
+import { ExportDiagramAction } from "./export-diagram-action";
+import { ImportDiagramAction } from "./import-diagram-action";
 /**
- * The workspace main menu: Reactodia's default actions, followed by the diagram download and upload.
+ * Each menu entry.
  *
  * 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.
  */
-export function GraphwiseMenu() {
-    const { model } = useWorkspace();
-    const t = useTranslation();
-    const diagramFileService = service(DiagramFileService);
-    const diagramService = service(DiagramService);
-    const errorService = service(ErrorService);
-    const downloadDiagram = () => {
-        const timestamp = new Date().toISOString().replace(/[-:]|\.\d+Z$/g, '');
-        diagramFileService.download(model.exportLayout(), `diagram-${timestamp}${DiagramFileService.FILE_EXTENSION}`);
-    };
-    const uploadDiagram = async (file) => {
-        try {
-            const diagram = await diagramFileService.read(file);
-            await diagramService.importDiagram(model, model.dataProvider, diagram);
-        }
-        catch (error) {
-            errorService.report(ErrorCode.DIAGRAM_IMPORT, error);
-        }
-    };
-    return createElement(Fragment, null, createElement(ToolbarActionClearAll, {}), createElement(ToolbarActionExport, { kind: 'exportRaster' }), createElement(ToolbarActionExport, { kind: 'exportSvg' }), createElement(ToolbarActionExport, { kind: 'print' }), 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')), createElement(ToolbarActionOpen, {
-        title: t.text('graphwise_toolbar_action.upload_diagram.title'),
-        fileAccept: DiagramFileService.FILE_EXTENSION,
-        onSelect: (file) => void uploadDiagram(file)
-    }, t.text('graphwise_toolbar_action.upload_diagram.label')));
+const MENU_ITEMS = {
+    [MenuItem.CLEAR_ALL]: (key) => createElement(ToolbarActionClearAll, { key }),
+    [MenuItem.EXPORT_PNG]: (key) => createElement(ToolbarActionExport, { key, kind: 'exportRaster' }),
+    [MenuItem.EXPORT_SVG]: (key) => createElement(ToolbarActionExport, { key, kind: 'exportSvg' }),
+    [MenuItem.PRINT]: (key) => createElement(ToolbarActionExport, { key, kind: 'print' }),
+    [MenuItem.EXPORT_JSON]: (key) => createElement(ExportDiagramAction, { key }),
+    [MenuItem.IMPORT_JSON]: (key) => createElement(ImportDiagramAction, { key })
+};
+/**
+ * The menu entries for the given menu items.
+ */
+export function createMenuItems(items) {
+    return items.map((item) => MENU_ITEMS[item](item));
 }

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

@@ -0,0 +1,31 @@
+import { createElement } from "react";
+import { ToolbarActionOpen, useTranslation, useWorkspace } from "@reactodia/workspace";
+import { service } from "../providers/service/service-inject";
+import { DiagramService } from "../services/diagram/diagram.service";
+import { DiagramFileService } from "../services/diagram-file/diagram-file.service";
+import { ErrorService } from "../services/error/error.service";
+import { ErrorCode } from "../models/error/error-code";
+/**
+ * Imports a diagram from a JSON file into the workspace.
+ */
+export 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.DIAGRAM_IMPORT, error);
+        }
+    };
+    return createElement(ToolbarActionOpen, {
+        title: t.text('graphwise_toolbar_action.import_json.title'),
+        fileAccept: DiagramFileService.FILE_EXTENSION,
+        onSelect: (file) => void importDiagram(file)
+    }, t.text('graphwise_toolbar_action.import_json.label'));
+}

package/dist/collection/components/graphwise-reactodia/models/error/error-code.js

@@ -15,4 +15,6 @@ export var ErrorCode;
     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";
 })(ErrorCode || (ErrorCode = {}));

package/dist/collection/components/graphwise-reactodia/models/sparql/sparql-query-function.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/models/sparql/sparql-query-params.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/models/ui/menu-config.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/models/ui/menu-item.js

@@ -0,0 +1,18 @@
+/**
+ * An entry of the workspace main menu.
+ */
+export var MenuItem;
+(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";
+})(MenuItem || (MenuItem = {}));

package/dist/collection/components/graphwise-reactodia/models/ui/node-action.js

@@ -0,0 +1,22 @@
+/**
+ * A button shown around a selected node that acts on it.
+ */
+export var NodeAction;
+(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";
+})(NodeAction || (NodeAction = {}));

package/dist/collection/components/graphwise-reactodia/models/ui/resolved-toolbar-position.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/models/ui/resolved-ui-config.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/models/ui/toolbar-dock.js

@@ -0,0 +1,14 @@
+/**
+ * The side or corner of the canvas a toolbar is docked to.
+ */
+export var ToolbarDock;
+(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";
+})(ToolbarDock || (ToolbarDock = {}));

package/dist/collection/components/graphwise-reactodia/models/ui/toolbar-position.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/models/ui/ui-config.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/graphwise-reactodia/node-action/node-actions.js

@@ -0,0 +1,22 @@
+import { createElement } from "react";
+import { SelectionActionAddToFilter, SelectionActionAnchor, SelectionActionAnnotate, SelectionActionConnections, SelectionActionEstablishLink, SelectionActionExpand, SelectionActionGroup, SelectionActionRemove } from "@reactodia/workspace";
+import { NodeAction } from "../models/ui/node-action";
+/**
+ * Each node action at its position in the fork's default `Halo`.
+ */
+const NODE_ACTIONS = {
+    [NodeAction.GROUP]: (key) => createElement(SelectionActionGroup, { key, dock: 'nw', dockColumn: 1 }),
+    [NodeAction.REMOVE]: (key) => createElement(SelectionActionRemove, { key, dock: 'ne' }),
+    [NodeAction.EXPAND]: (key) => createElement(SelectionActionExpand, { key, dock: 's' }),
+    [NodeAction.OPEN_LINK]: (key) => createElement(SelectionActionAnchor, { key, dock: 'w' }),
+    [NodeAction.CONNECTIONS]: (key) => createElement(SelectionActionConnections, { key, dock: 'e' }),
+    [NodeAction.ADD_TO_FILTER]: (key) => createElement(SelectionActionAddToFilter, { key, dock: 'se' }),
+    [NodeAction.ANNOTATE]: (key) => createElement(SelectionActionAnnotate, { key, dock: 'se', dockColumn: 1 }),
+    [NodeAction.ESTABLISH_LINK]: (key) => createElement(SelectionActionEstablishLink, { key, dock: 'sw' })
+};
+/**
+ * The `Halo` children for the given node actions.
+ */
+export function createNodeActions(actions) {
+    return actions.map((action) => NODE_ACTIONS[action](action));
+}

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

@@ -12,7 +12,7 @@ import { ErrorCode } from "./models/error/error-code";
 import { EventType } from "./models/event/event-type";
 import { SubscriptionList } from "./models/subscription-list";
 import { resolveTypeStyle } from "./styles/type-style.resolver";
-import { GraphwiseMenu } from "./menu/graphwise-menu";
+import { toWorkspaceProps } from "./ui-config/ui-config-mapper";
 /**
  * Reactodia ships English as its built-in default bundle, so the English bundle only adds our own keys.
  * Other languages are layered on top as partial bundles; unknown codes fall back to English.
@@ -37,6 +37,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 = service(EventService);
@@ -220,17 +225,13 @@ function ReactodiaApp(props) {
         defaultLanguage: language,
         translations: translationsForLanguage(language),
         typeStyleResolver: resolveTypeStyle
-    }, createElement(DefaultWorkspace, {
-        colorScheme: props.theme,
-        menu: createElement(GraphwiseMenu),
-        // place Undo/redo/layout actions in top right corner.
-        actionsToolbar: { dock: 'ne' }
-    }));
+    }, createElement(DefaultWorkspace, Object.assign({ colorScheme: props.theme }, uiConfigProps)));
 }
 /**
  * Mounts the Reactodia application into the given container and returns the React root.
  */
 export function mountReactodia(container, props) {
+    uiConfigProps !== null && uiConfigProps !== void 0 ? uiConfigProps : (uiConfigProps = toWorkspaceProps(props.config.ui));
     const root = createRoot(container);
     root.render(createElement(ReactodiaApp, props));
     return root;
@@ -265,5 +266,6 @@ export function exportReactodiaLayout() {
  */
 export function unmountReactodia(root) {
     subscriptions.unsubscribeAll();
+    uiConfigProps = undefined;
     root.unmount();
 }

package/dist/collection/components/graphwise-reactodia/ui-config/default-ui-config.js

@@ -0,0 +1,30 @@
+import { MenuItem } from "../models/ui/menu-item";
+import { NodeAction } from "../models/ui/node-action";
+import { ToolbarDock } from "../models/ui/toolbar-dock";
+/**
+ * The default UI configuration: Reactodia's behaviour, plus the diagram download and upload in the menu.
+ */
+export const DEFAULT_UI_CONFIG = {
+    mainToolbar: { dock: ToolbarDock.NW },
+    actionsToolbar: { dock: ToolbarDock.SW },
+    menu: {
+        items: [
+            MenuItem.CLEAR_ALL,
+            MenuItem.EXPORT_PNG,
+            MenuItem.EXPORT_SVG,
+            MenuItem.PRINT,
+            MenuItem.EXPORT_JSON,
+            MenuItem.IMPORT_JSON
+        ]
+    },
+    nodeActions: [
+        NodeAction.GROUP,
+        NodeAction.REMOVE,
+        NodeAction.EXPAND,
+        NodeAction.OPEN_LINK,
+        NodeAction.CONNECTIONS,
+        NodeAction.ADD_TO_FILTER,
+        NodeAction.ANNOTATE,
+        NodeAction.ESTABLISH_LINK
+    ]
+};

package/dist/collection/components/graphwise-reactodia/ui-config/ui-config-mapper.js

@@ -0,0 +1,51 @@
+import { createElement, Fragment } from "react";
+import { ToolbarDock } from "../models/ui/toolbar-dock";
+import { MenuItem } from "../models/ui/menu-item";
+import { NodeAction } from "../models/ui/node-action";
+import { ErrorCode } from "../models/error/error-code";
+import { service } from "../providers/service/service-inject";
+import { ErrorService } from "../services/error/error.service";
+import { mergeWithDefaults } from "../utils/object-util";
+import { DEFAULT_UI_CONFIG } from "./default-ui-config";
+import { createMenuItems } from "../menu/graphwise-menu";
+import { createNodeActions } from "../node-action/node-actions";
+const errorService = 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.
+ */
+export 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, MenuItem));
+    const nodeActions = [...new Set(resolved.nodeActions)].filter((action) => isValid(action, NodeAction));
+    return {
+        menu: menuItems.length ? createElement(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, 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.report(ErrorCode.UNKNOWN_UI_CONFIG, new Error(`Unknown UI configuration value: "${value}"`));
+    }
+    return isValid;
+}

package/dist/collection/components/graphwise-reactodia/utils/object-util.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+export 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);
+}

package/dist/collection/index.js

@@ -2,3 +2,6 @@ export { CLEAR_DIAGRAM_STORAGE_EVENT } from './components/graphwise-reactodia/mo
 export { GRAPHWISE_REACTODIA_EVENT } from './components/graphwise-reactodia/models/event/event-detail';
 export { EventType } from './components/graphwise-reactodia/models/event/event-type';
 export { ErrorCode } from './components/graphwise-reactodia/models/error/error-code';
+export { ToolbarDock } from './components/graphwise-reactodia/models/ui/toolbar-dock';
+export { MenuItem } from './components/graphwise-reactodia/models/ui/menu-item';
+export { NodeAction } from './components/graphwise-reactodia/models/ui/node-action';

package/dist/collection/pages/graphwise-reactodia/main.js

@@ -124,6 +124,20 @@ function setSeedGraph() {
   reactodia.config = {...reactodia.config, seedGraph: SEED_GRAPH};
 }
 
+// A partial host UI configuration, merged over the default.
+const HOST_UI = {
+  actionsToolbar: {dock: 'ne'},
+  nodeActions: ['group', 'remove', 'expand', 'connections', 'add-to-filter', 'annotate', 'establish-link'],
+};
+
+function setHostUi() {
+  reactodia.config = {...reactodia.config, ui: HOST_UI};
+}
+
+function setEmptyMenuUi() {
+  reactodia.config = {...reactodia.config, ui: {menu: {items: []}}};
+}
+
 function setRepository(repository) {
   reactodia.currentRepository = repository;
 }