graphwise-reactodia 0.0.1-TR1 → 0.0.1-TR10

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"queryFunction":[16,"query-function"],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
+  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"],"theme":["onThemeChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/index.cjs.js

@@ -1,2 +1,9 @@
 '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';
+
+exports.CLEAR_DIAGRAM_STORAGE_EVENT = CLEAR_DIAGRAM_STORAGE_EVENT;

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-CcJr5lkF.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"queryFunction":[16,"query-function"],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
+  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"],"theme":["onThemeChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,12 +1,14 @@
 import { h, Host } from "@stencil/core";
-import { exportReactodiaLayout, mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
+import { mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
+import { LanguageKey } from "./i18n/language-key";
+import { resetColors } from "./styles/type-style.resolver";
 /**
  * A web component that renders a graph with the Reactodia workspace.
  *
  * The component is backed by a SPARQL endpoint but is endpoint-agnostic: the host passes
- * the active repository's endpoint via `current-repository` and a `queryFunction` that
- * performs the actual HTTP request. Reactodia fetches all node, link and type data lazily
- * through them; the canvas starts empty and the user populates it via the search bar.
+ * the active repository's endpoint via `current-repository` and a `config.queryFunction`
+ * that performs the actual HTTP request. Reactodia fetches all node, link and type data
+ * lazily through them; the canvas starts empty and the user populates it via the search bar.
  *
  * The component is a thin wrapper around Reactodia: query configuration lives outside the
  * wrapper and is supplied through the `providerSettings` prop.
@@ -16,20 +18,24 @@ export class GraphwiseReactodia {
         /**
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
-        this.language = 'en';
+        this.language = LanguageKey.EN;
     }
     onProviderSettingsChange() {
         this.renderGraph();
     }
     onLanguageChange() {
         // The translations are evaluated by the workspace at construction, so the only way
-        // to re-translate the UI is to re-create the graph. We carry the
-        // current diagram across the remount so switching languages does not wipe the canvas.
-        const diagram = exportReactodiaLayout();
-        this.renderGraph(diagram);
+        // to re-translate the UI is to re-create the graph.
+        this.renderGraph(true);
     }
-    componentDidLoad() {
-        this.renderGraph();
+    onThemeChange() {
+        resetColors();
+        this.renderGraph(true);
+    }
+    connectedCallback() {
+        if (this.config) {
+            this.renderGraph();
+        }
     }
     disconnectedCallback() {
         if (this.reactRoot) {
@@ -38,26 +44,27 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: '3fca0e2163335fc2cb0fc3c57291e4f29234f2c2' }));
+        return (h(Host, { key: 'f3247ee3254896e4e4987bd2fa0e3dfce1ce1d2a' }));
     }
-    renderGraph(initialDiagram) {
+    renderGraph(isReloading) {
+        var _a;
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
         }
-        if (!this.queryFunction) {
-            throw new Error('queryFunction is required');
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
+            throw new Error('config.queryFunction is required');
         }
         if (!this.hostElement) {
             return;
         }
         const props = {
-            initialDiagram,
+            isReload: isReloading,
             currentRepository: this.currentRepository,
-            queryFunction: this.queryFunction,
+            config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
         };
-        if (this.reactRoot && !initialDiagram) {
+        if (this.reactRoot && !isReloading) {
             void updateReactodia(props);
         }
         else {
@@ -87,35 +94,35 @@ export class GraphwiseReactodia {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The active repository id. Appended to {@link queryFunction} as the request `url`;\nchanging it re-points the graph at the new repository (and resets the canvas),\nwhich is how runtime repository changes are handled."
+                    "text": "The active repository id. Appended to {@link queryFunction } as the request `url`;\nchanging it re-points the graph at the new repository (and resets the canvas),\nwhich is how runtime repository changes are handled."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false
             },
-            "queryFunction": {
+            "config": {
                 "type": "unknown",
-                "attribute": "query-function",
+                "attribute": "config",
                 "mutable": false,
                 "complexType": {
-                    "original": "SparqlQueryFunction",
-                    "resolved": "(params: { url: string; body?: string; headers: { [header: string]: string; }; method: string; signal?: AbortSignal; }) => Promise<Response>",
+                    "original": "ReactodiaConfig",
+                    "resolved": "ReactodiaConfig",
                     "references": {
-                        "SparqlQueryFunction": {
+                        "ReactodiaConfig": {
                             "location": "import",
-                            "path": "@reactodia/workspace",
-                            "id": "node_modules::SparqlQueryFunction"
+                            "path": "./models/reactodia-config",
+                            "id": "src/components/graphwise-reactodia/models/reactodia-config.ts::ReactodiaConfig"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "HTTP transport for the SPARQL requests. Set by the host so requests go through the host's HTTP layer (auth,\ninterceptors) instead of a built-in `fetch`."
+                    "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."
                 },
                 "getter": false,
                 "setter": false
@@ -125,9 +132,15 @@ export class GraphwiseReactodia {
                 "attribute": "language",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "LanguageKey",
+                    "resolved": "LanguageKey.EN | LanguageKey.FR",
+                    "references": {
+                        "LanguageKey": {
+                            "location": "import",
+                            "path": "./i18n/language-key",
+                            "id": "src/components/graphwise-reactodia/i18n/language-key.ts::LanguageKey"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -138,7 +151,7 @@ export class GraphwiseReactodia {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'en'"
+                "defaultValue": "LanguageKey.EN"
             },
             "providerSettings": {
                 "type": "unknown",
@@ -151,7 +164,7 @@ export class GraphwiseReactodia {
                         "SparqlDataProviderSettings": {
                             "location": "import",
                             "path": "@reactodia/workspace",
-                            "id": "node_modules::SparqlDataProviderSettings"
+                            "id": "reactodia-workspace/dist/typings/workspace.d.ts::SparqlDataProviderSettings"
                         }
                     }
                 },
@@ -163,6 +176,25 @@ export class GraphwiseReactodia {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme currently applied by the host (e.g. `light`, `dark`). The value itself is never read -\nthe node colors are taken from the host's CSS custom properties - it only signals that those\nvalues have changed. The host owns the theme, including whether it follows the OS color scheme,\nso the change is passed in instead of being detected here."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -177,6 +209,9 @@ export class GraphwiseReactodia {
             }, {
                 "propName": "language",
                 "methodName": "onLanguageChange"
+            }, {
+                "propName": "theme",
+                "methodName": "onThemeChange"
             }];
     }
 }

package/dist/collection/components/graphwise-reactodia/i18n/language-key.js

@@ -0,0 +1,5 @@
+export var LanguageKey;
+(function (LanguageKey) {
+    LanguageKey["EN"] = "en";
+    LanguageKey["FR"] = "fr";
+})(LanguageKey || (LanguageKey = {}));

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

@@ -1,4 +1,6 @@
 import frTranslation from "./fr.reactodia.translation.json";
+import { LanguageKey } from "./language-key";
+// English is provided by default from reactodia so we don't need to include it here, unless we override it
 export const TRANSLATIONS = {
-    'fr': frTranslation
+    [LanguageKey.FR]: frTranslation
 };

package/dist/collection/components/graphwise-reactodia/models/clear-diagram-storage-event.js

@@ -0,0 +1,5 @@
+/**
+ * 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.
+ */
+export const CLEAR_DIAGRAM_STORAGE_EVENT = 'graphwise-reactodia:clear-diagram-storage';

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

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

package/dist/collection/components/graphwise-reactodia/models/subscription-list.js

@@ -0,0 +1,35 @@
+/**
+ * A collection of {@link Subscription}s that can be released together. Components collect the
+ * subscriptions they open and call {@link unsubscribeAll} on teardown so nothing is left
+ * listening.
+ */
+export class SubscriptionList {
+    constructor(subscriptions = []) {
+        this.items = subscriptions;
+    }
+    /**
+     * Adds a subscription to the list.
+     */
+    add(subscription) {
+        this.items.push(subscription);
+    }
+    /**
+     * Adds multiple subscriptions to the list.
+     */
+    addAll(subscriptions) {
+        this.items.push(...subscriptions);
+    }
+    /**
+     * Removes a subscription from the list without unsubscribing it.
+     */
+    remove(subscription) {
+        this.items = this.items.filter((sub) => sub !== subscription);
+    }
+    /**
+     * Calls every subscription (unsubscribing it) and clears the list.
+     */
+    unsubscribeAll() {
+        this.items.forEach((subscription) => subscription());
+        this.items = [];
+    }
+}

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

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

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

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

package/dist/collection/components/graphwise-reactodia/providers/service/service-inject.js

@@ -0,0 +1,15 @@
+import { ServiceProvider } from "./service.provider";
+/**
+ * Injects the singleton instance of the given service class from the {@link ServiceProvider}.
+ *
+ * @param serviceClass The class of the service to inject.
+ * @returns The shared instance of the specified service class.
+ * @template T The type of the service to inject.
+ * @example
+ * ```typescript
+ * const diagramStateService = service(DiagramStateService);
+ * ```
+ */
+export function service(serviceClass) {
+    return ServiceProvider.get(serviceClass);
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Decorator for a service class.
+ * It receives the class and simply type checks it with the {@link Service} interface.
+ * Works as a contract, which enforces the service class to have a static ID member.
+ * We can't simply implement the interface, since this will enforce the ID to be an instance member, which is not what we want.
+ *
+ * @param _serviceClass The decorated service class, checked for its ID and discarded.
+ * @template T The type of the service instance.
+ * @example
+ * ```TypeScript
+ * @Service
+ * export class WindowService {
+ *   static readonly ID = 'WindowService';
+ * }
+ * ```
+ */
+export function Service(_serviceClass) {
+    // no implementation needed. We only use the type checking of the parameter
+}

package/dist/collection/components/graphwise-reactodia/providers/service/service.provider.js

@@ -0,0 +1,20 @@
+/**
+ * Provider for all {@link Service} instances. Services are singletons: there is only one
+ * instance of each service, created on demand and cached here so every consumer shares it.
+ */
+export class ServiceProvider {
+    /**
+     * Returns the instance of the given service type, creating and caching it on first request.
+     *
+     * @param serviceClass The service type to retrieve.
+     * @returns The shared instance of the service.
+     * @template T The type of the service to retrieve.
+     */
+    static get(serviceClass) {
+        if (!ServiceProvider.SERVICE_INSTANCES.has(serviceClass.ID)) {
+            ServiceProvider.SERVICE_INSTANCES.set(serviceClass.ID, new serviceClass());
+        }
+        return ServiceProvider.SERVICE_INSTANCES.get(serviceClass.ID);
+    }
+}
+ServiceProvider.SERVICE_INSTANCES = new Map();

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

@@ -1,8 +1,14 @@
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { DefaultWorkspace, SparqlDataProvider, useLoadedWorkspace, Workspace, } from "@reactodia/workspace";
+import { DefaultWorkspace, SparqlDataProvider, useLoadedWorkspace, Workspace } from "@reactodia/workspace";
 import { blockingDefaultLayout } from "@reactodia/workspace/layout-sync";
 import { TRANSLATIONS } from "./i18n/translations";
+import { service } from "./providers/service/service-inject";
+import { DiagramService } from "./services/diagram/diagram.service";
+import { DiagramStorageService } from "./services/diagram-storage/diagram-storage.service";
+import { EventService } from "./services/event/event.service";
+import { SubscriptionList } from "./models/subscription-list";
+import { resolveTypeStyle } from "./styles/type-style.resolver";
 /**
  * Reactodia ships English as its built-in default bundle, so English needs no override.
  * Other languages are layered on top as partial bundles; unknown codes fall back to English.
@@ -20,41 +26,123 @@ function translationsForLanguage(language) {
  * runs outside React and therefore cannot call the `useWorkspace` hook.
  */
 let workspaceContext = null;
+/**
+ * Active listeners that persist diagram edits to local storage. Populated when the workspace
+ * mounts and released in {@link unmountReactodia}, so persistence follows the same lifecycle as
+ * the React root.
+ */
+const subscriptions = new SubscriptionList();
 /**
  * Builds a Reactodia {@link SparqlDataProvider} for the given endpoint using the supplied
  * query preset. The host owns the query configuration and passes it in via props; when none
  * is provided we fall back to Reactodia's generic {@link OwlRdfsSettings} OWL/RDFS preset.
  */
-function createDataProvider(currentRepository, queryFunction, settings) {
+function createDataProvider(props) {
+    const { currentRepository, config, providerSettings } = props;
     return new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
-        queryFunction,
-    }, settings);
+        queryFunction: config.queryFunction
+    }, providerSettings);
+}
+/**
+ * Places the seed entities on the canvas. Each IRI is added as a placeholder element, and data is then loaded for the
+ * respective nodes using the {@link DataDiagramModel.requestData} method.
+ */
+async function seedIrisToCanvas(context, dataProvider, seed, signal) {
+    const { model, performLayout } = context;
+    await model.createNewDiagram({ dataProvider, signal });
+    for (const iri of seed) {
+        model.createElement(iri);
+    }
+    await model.requestData();
+    await performLayout({ signal });
+}
+/**
+ * Places a pre-resolved graph (e.g. a CONSTRUCT query result) on the canvas. The difference between this and
+ * {@link seedIrisToCanvas} is that this method does not request link data from the SPARQL endpoint, since describe/construct
+ * queries are not persisted in the DB. Here we expect provided links and query for element data only
+ */
+async function seedGraphToCanvas(context, dataProvider, links, signal) {
+    const { model, performLayout } = context;
+    await model.createNewDiagram({ dataProvider, signal });
+    const uniqueIris = new Set();
+    links.forEach((link) => {
+        var _a;
+        uniqueIris.add(link.source);
+        uniqueIris.add(link.target);
+        // this is a createOrGet, regardless of the name, so we don't need to worry about duplicates.
+        model.createElement(link.source);
+        model.createElement(link.target);
+        (_a = link.rawPredicates) === null || _a === void 0 ? void 0 : _a.forEach((predicate) => {
+            model.createLinks({
+                linkTypeId: predicate,
+                sourceId: link.source,
+                targetId: link.target,
+                properties: {}
+            });
+        });
+    });
+    await model.requestElementData(Array.from(uniqueIris));
+    await performLayout({ signal });
+}
+/**
+ * Subscribes to the model's changes so diagram edits are persisted to local storage. The
+ * subscription is tracked in {@link subscriptions} so it is released together with the React
+ * root in {@link unmountReactodia}.
+ */
+function onDiagramChange(model) {
+    const storage = service(DiagramStorageService);
+    const diagramService = service(DiagramService);
+    subscriptions.add(diagramService.subscribeToDiagramChange(model, (diagram) => storage.save(diagram)));
+}
+/**
+ * Subscribes to the host's "clear persisted diagram" command so the saved layout is dropped on
+ * request (e.g. before a fresh seed should take precedence over previously saved edits). The
+ * subscription is tracked in {@link subscriptions} so it is released together with the React
+ * root in {@link unmountReactodia}.
+ */
+function onClearDiagramStorage() {
+    const storage = service(DiagramStorageService);
+    const eventService = service(EventService);
+    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => storage.clear()));
 }
 /**
  * The Reactodia workspace React component.
  *
  * Authored with `React.createElement` (no TSX) on purpose, since there are differences in stencil and react
  *
- * The canvas starts empty; the user populates it through the workspace search bar
- * (Reactodia's `DefaultWorkspace` unified search), which is backed by the SPARQL
- * data provider's lookup.
+ * Without a seed the canvas starts empty and the user populates it through the workspace
+ * search bar (Reactodia's `DefaultWorkspace` unified search), backed by the SPARQL data
+ * provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
  */
 function ReactodiaApp(props) {
-    const { currentRepository, queryFunction, language, initialDiagram, providerSettings } = props;
+    const { language, config } = props;
+    const currentDiagram = props.isReload ? exportReactodiaLayout() : undefined;
     const { onMount } = useLoadedWorkspace(async ({ context, signal }) => {
+        var _a, _b;
         workspaceContext = context;
         const { model } = context;
-        const dataProvider = createDataProvider(currentRepository, queryFunction, providerSettings);
-        // A language change remounts this component to rebuild the workspace with the new
-        // translation bundle; restoring the exported diagram keeps the user's canvas intact.
-        // This is done because there is no existing mechanism to re-translate the UI at runtime (not for the UI labels at least)
-        if (initialDiagram) {
-            await model.importLayout({ dataProvider, diagram: initialDiagram, signal });
+        onDiagramChange(model);
+        onClearDiagramStorage();
+        const dataProvider = createDataProvider(props);
+        const isReload = props.isReload;
+        const savedDiagram = service(DiagramStorageService).load();
+        if (isReload) {
+            // Simply reload without using the current state. This may happen when the user switches the language at runtime.
+            // since there is no existing mechanism to re-translate the UI at runtime (not for the UI labels at least)
+            await model.importLayout({ dataProvider, diagram: currentDiagram, signal, validateLinks: true });
+        }
+        else if ((_a = config.seedIris) === null || _a === void 0 ? void 0 : _a.length) {
+            await seedIrisToCanvas(context, dataProvider, config.seedIris, signal);
+        }
+        else if ((_b = config.seedGraph) === null || _b === void 0 ? void 0 : _b.length) {
+            await seedGraphToCanvas(context, dataProvider, config.seedGraph, signal);
         }
         else {
-            await model.createNewDiagram({ dataProvider, signal });
+            // Restore the previously saved layout when present, otherwise start empty. Either way this binds the
+            // data provider (savedDiagram is undefined -> empty diagram), so the unified search/lookup works.
+            await model.importLayout({ dataProvider, diagram: savedDiagram, signal, validateLinks: true });
         }
     }, [language]);
     /**
@@ -71,7 +159,8 @@ function ReactodiaApp(props) {
         ref: onMount,
         defaultLayout: blockingDefaultLayout,
         defaultLanguage: language,
-        translations: translationsForLanguage(language)
+        translations: translationsForLanguage(language),
+        typeStyleResolver: resolveTypeStyle
     }, createElement(DefaultWorkspace, {}));
 }
 /**
@@ -91,7 +180,7 @@ export async function updateReactodia(props) {
         return;
     }
     const { model } = workspaceContext;
-    const dataProvider = createDataProvider(props.currentRepository, props.queryFunction, props.providerSettings);
+    const dataProvider = createDataProvider(props);
     await model.createNewDiagram({ dataProvider });
 }
 /**
@@ -105,5 +194,6 @@ export function exportReactodiaLayout() {
  * Unmounts the Reactodia application.
  */
 export function unmountReactodia(root) {
+    subscriptions.unsubscribeAll();
     root.unmount();
 }

package/dist/collection/components/graphwise-reactodia/services/diagram/diagram.service.js

@@ -0,0 +1,54 @@
+var __decorate = (this && this.__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);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DiagramService_1;
+import { Service } from "../../providers/service/service";
+/**
+ * Service for diagram related operations and subscriptions
+ */
+let DiagramService = DiagramService_1 = class DiagramService {
+    /**
+     * Subscribes to diagram changes. On every debounced change the current layout is
+     * exported and passed to the callback.
+     * Debounce time for the callback trigger is needed, because certain events (like moving a node) can trigger
+     * multiple `historyChanged` events in a short time.
+     *
+     * @param model The diagram model to observe.
+     * @param onChangeCallback Called with the exported layout when the diagram changes.
+     * @returns A {@link Subscription} that, when called, removes the listener and drops any
+     * pending notification.
+     */
+    subscribeToDiagramChange(model, onChangeCallback) {
+        let notifyTimer;
+        const onHistoryChange = () => {
+            if (notifyTimer) {
+                clearTimeout(notifyTimer);
+            }
+            notifyTimer = setTimeout(() => {
+                notifyTimer = undefined;
+                onChangeCallback(model.exportLayout());
+            }, DiagramService_1.NOTIFY_DEBOUNCE_MS);
+        };
+        model.history.events.on(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
+        return () => {
+            model.history.events.off(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
+            if (notifyTimer) {
+                clearTimeout(notifyTimer);
+            }
+        };
+    }
+};
+DiagramService.ID = 'DiagramService';
+DiagramService.NOTIFY_DEBOUNCE_MS = 300;
+DiagramService.HISTORY_CHANGED_EVENT = 'historyChanged';
+DiagramService = DiagramService_1 = __decorate([
+    Service
+], DiagramService);
+export { DiagramService };

package/dist/collection/components/graphwise-reactodia/services/diagram-storage/diagram-storage.service.js

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__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);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DiagramStorageService_1;
+import { Service } from "../../providers/service/service";
+import { service } from "../../providers/service/service-inject";
+import { WindowService } from "../window/window.service";
+/**
+ * Service for local store-related diagram operations
+ */
+let DiagramStorageService = DiagramStorageService_1 = class DiagramStorageService {
+    /**
+     * Load the persisted diagram from the local store, or `undefined` when nothing is stored (or the stored value
+     * is unreadable).
+     */
+    load() {
+        const raw = this.storage.getItem(DiagramStorageService_1.STORAGE_KEY);
+        if (!raw) {
+            return undefined;
+        }
+        return JSON.parse(raw);
+    }
+    /**
+     * Persists the given diagram serialization.
+     */
+    save(diagram) {
+        this.storage.setItem(DiagramStorageService_1.STORAGE_KEY, JSON.stringify(diagram));
+    }
+    /**
+     * Removes the persisted diagram. Used when a new view (a seed) should take precedence over
+     * previously saved edits.
+     */
+    clear() {
+        this.storage.removeItem(DiagramStorageService_1.STORAGE_KEY);
+    }
+    /**
+     * Local storage getter
+     */
+    get storage() {
+        return service(WindowService).getWindow().localStorage;
+    }
+};
+DiagramStorageService.ID = 'DiagramStorageService';
+DiagramStorageService.STORAGE_KEY = 'diagram.state';
+DiagramStorageService = DiagramStorageService_1 = __decorate([
+    Service
+], DiagramStorageService);
+export { DiagramStorageService };