graphwise-reactodia 0.0.1-TR7 → 0.0.1-TR8

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-Cypw7ydc.js';
+import { CLEAR_DIAGRAM_STORAGE_EVENT } from './index.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -18577,11 +18578,15 @@ function addWatermark(svg, viewBox, watermarkSvg) {
 	image.setAttribute("opacity", "0.3");
 	svg.insertBefore(image, svg.firstChild);
 }
+function stripPseudoElements(selectorText) {
+	if (!selectorText.includes("::")) return selectorText;
+	return selectorText.split(",").map((selector) => selector.replace(/::[a-zA-Z-]+/g, "").trim()).filter(Boolean).join(", ");
+}
 function collectAppliedCssFromDocument(targetSubtree) {
 	const appliedRules = [];
 	enumerateStylesheets((rule) => {
-		const selectorWithoutPseudo = rule.selectorText.replace(/::[a-zA-Z-]+$/, "");
-		if (targetSubtree.querySelector(selectorWithoutPseudo)) appliedRules.push(rule);
+		const selector = stripPseudoElements(rule.selectorText);
+		if (selector && targetSubtree.querySelector(selector)) appliedRules.push(rule);
 	});
 	return appliedRules;
 }
@@ -30640,6 +30645,188 @@ const TRANSLATIONS = {
     [LanguageKey.FR]: frTranslation
 };
 
+/**
+ * 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.
+ */
+class ServiceProvider {
+    /**
+     * Returns the instance of the given service type, creating and caching it on first request.
+     *
+     * @param type The service type to retrieve.
+     * @returns The shared instance of the service.
+     * @template T The type of the service to retrieve.
+     */
+    static get(type) {
+        if (!ServiceProvider.SERVICE_INSTANCES.has(type.name)) {
+            ServiceProvider.SERVICE_INSTANCES.set(type.name, new type());
+        }
+        return ServiceProvider.SERVICE_INSTANCES.get(type.name);
+    }
+}
+ServiceProvider.SERVICE_INSTANCES = new Map();
+
+/**
+ * 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);
+ * ```
+ */
+function service(serviceClass) {
+    return ServiceProvider.get(serviceClass);
+}
+
+/**
+ * Service for diagram related operations and subscriptions
+ */
+class DiagramService {
+    /**
+     * Subscribes to diagram changes. On every debounced change the current layout is
+     * exported and passed to the callback
+     *
+     * @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.NOTIFY_DEBOUNCE_MS);
+        };
+        model.history.events.on(DiagramService.HISTORY_CHANGED_EVENT, onHistoryChange);
+        return () => {
+            model.history.events.off(DiagramService.HISTORY_CHANGED_EVENT, onHistoryChange);
+            if (notifyTimer) {
+                clearTimeout(notifyTimer);
+            }
+        };
+    }
+}
+/**
+ * Debounce time for the callback trigger. This is needed, because certain events (like moving a node) can trigger
+ * multiple `historyChanged` events in a short time.
+ */
+DiagramService.NOTIFY_DEBOUNCE_MS = 300;
+DiagramService.HISTORY_CHANGED_EVENT = 'historyChanged';
+
+/**
+ * Service that provides access to browser window-related functionality.
+ */
+class WindowService {
+    getWindow() {
+        return window;
+    }
+}
+
+/**
+ * Service for local store-related diagram operations
+ */
+class DiagramStorageService {
+    /**
+     * Load the persisted diagram from the local store, or `undefined` when nothing is stored (or the stored value
+     * is unreadable).
+     */
+    load() {
+        var _a;
+        const raw = (_a = this.storage) === null || _a === void 0 ? void 0 : _a.getItem(DiagramStorageService.STORAGE_KEY);
+        if (!raw) {
+            return undefined;
+        }
+        return JSON.parse(raw);
+    }
+    /**
+     * Persists the given diagram serialization.
+     */
+    save(diagram) {
+        var _a;
+        (_a = this.storage) === null || _a === void 0 ? void 0 : _a.setItem(DiagramStorageService.STORAGE_KEY, JSON.stringify(diagram));
+    }
+    /**
+     * Removes the persisted diagram. Used when a new view (a seed) should take precedence over
+     * previously saved edits.
+     */
+    clear() {
+        var _a;
+        (_a = this.storage) === null || _a === void 0 ? void 0 : _a.removeItem(DiagramStorageService.STORAGE_KEY);
+    }
+    /**
+     * Local storage getter
+     */
+    get storage() {
+        var _a;
+        return (_a = service(WindowService).getWindow()) === null || _a === void 0 ? void 0 : _a.localStorage;
+    }
+}
+DiagramStorageService.STORAGE_KEY = 'diagram.state';
+
+/**
+ * Service for event based operations
+ */
+class EventService {
+    /**
+     * Subscribes to the host's "clear persisted diagram" command.
+     *
+     * @param onClear Called whenever the event fires.
+     * @returns A {@link Subscription} that, when called, removes the listener.
+     */
+    subscribeToClearDiagramStorage(onClear) {
+        const target = service(WindowService).getWindow();
+        if (!target) {
+            return () => undefined;
+        }
+        target.addEventListener(CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        return () => target.removeEventListener(CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+    }
+}
+
+/**
+ * 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.
+ */
+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 = [];
+    }
+}
+
 /**
  * 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.
@@ -30657,6 +30844,12 @@ 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
@@ -30667,15 +30860,16 @@ function createDataProvider(props) {
     return new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
-        queryFunction: config.queryFunction,
+        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 seedCanvas(context, seed, signal) {
+async function seedIrisToCanvas(context, dataProvider, seed, signal) {
     const { model, performLayout } = context;
+    await model.createNewDiagram({ dataProvider, signal });
     for (const iri of seed) {
         model.createElement(iri);
     }
@@ -30683,18 +30877,13 @@ async function seedCanvas(context, seed, signal) {
     await performLayout({ signal });
 }
 /**
- * Places a pre-resolved graph (e.g. a CONSTRUCT query result) on the canvas. The relationships
- * are computed and not persisted in the repository, so the edges are drawn directly from the
- * supplied data instead of being fetched. The node IRIs do exist in the repository, so only
- * their display data is hydrated via {@link DataDiagramModel.requestElementData}.
- *
- * Note we use `requestElementData` rather than `requestData`: the latter would also query the
- * provider for *all* persisted links between the seeded nodes, over-fetching beyond the
- * CONSTRUCT's selection. Hydrating elements alone keeps the canvas to exactly the supplied
- * edges, while further expansion continues lazily against the SPARQL provider.
+ * 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 seedGraphCanvas(context, links, signal) {
+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;
@@ -30712,11 +30901,30 @@ async function seedGraphCanvas(context, links, signal) {
             });
         });
     });
-    // Request data only for elements.
-    // Link data is not available in the DB, since we are displaying construct/describe queries
     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.
  *
@@ -30727,26 +30935,32 @@ async function seedGraphCanvas(context, links, signal) {
  * provider's lookup. With a seed, the seeded nodes are placed on the canvas on startup.
  */
 function ReactodiaApp(props) {
-    const { language, initialDiagram, config } = 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;
+        onDiagramChange(model);
+        onClearDiagramStorage();
         const dataProvider = createDataProvider(props);
-        // 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 });
+        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 });
+        }
+        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 });
-            if ((_a = config.seedGraph) === null || _a === void 0 ? void 0 : _a.length) {
-                await seedGraphCanvas(context, config.seedGraph, signal);
-            }
-            else if ((_b = config.seedIris) === null || _b === void 0 ? void 0 : _b.length) {
-                await seedCanvas(context, config.seedIris, 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 });
         }
     }, [language]);
     /**
@@ -30797,6 +31011,7 @@ function exportReactodiaLayout() {
  * Unmounts the Reactodia application.
  */
 function unmountReactodia(root) {
+    subscriptions.unsubscribeAll();
     root.unmount();
 }
 
@@ -30815,13 +31030,13 @@ const GraphwiseReactodia = class {
     }
     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);
     }
     connectedCallback() {
-        this.renderGraph();
+        if (this.config) {
+            this.renderGraph();
+        }
     }
     disconnectedCallback() {
         if (this.reactRoot) {
@@ -30830,9 +31045,9 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (h(Host, { key: '63c58ee1d28c4866aa66d3dcf4893879de4d09f6' }));
+        return (h(Host, { key: 'b33d3709a5d7b1fdde8d528d036d9dbc962d6c76' }));
     }
-    renderGraph(initialDiagram) {
+    renderGraph(isReloading) {
         var _a;
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
@@ -30844,13 +31059,13 @@ const GraphwiseReactodia = class {
             return;
         }
         const props = {
-            initialDiagram,
+            isReload: isReloading,
             currentRepository: this.currentRepository,
             config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
         };
-        if (this.reactRoot && !initialDiagram) {
+        if (this.reactRoot && !isReloading) {
             void updateReactodia(props);
         }
         else {

package/dist/esm/index.js

@@ -1 +1,7 @@
+/**
+ * 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';
 
+export { CLEAR_DIAGRAM_STORAGE_EVENT };

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

@@ -1 +1 @@
-import{p as e,b as r}from"./p-Cypw7ydc.js";export{s as setNonce}from"./p-Cypw7ydc.js";import{g as t}from"./p-CalY52z6.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await t(),r([["p-eb362faa",[[0,"graphwise-reactodia",{currentRepository:[1,"current-repository"],config:[16],language:[1],providerSettings:[16,"provider-settings"]},null,{currentRepository:["onProviderSettingsChange"],providerSettings:["onProviderSettingsChange"],language:["onLanguageChange"]}]]]],e))));
+import{p as e,b as r}from"./p-Cypw7ydc.js";export{s as setNonce}from"./p-Cypw7ydc.js";import{g as t}from"./p-CalY52z6.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await t(),r([["p-80cb6eef",[[0,"graphwise-reactodia",{currentRepository:[1,"current-repository"],config:[16],language:[1],providerSettings:[16,"provider-settings"]},null,{currentRepository:["onProviderSettingsChange"],providerSettings:["onProviderSettingsChange"],language:["onLanguageChange"]}]]]],e))));

package/dist/graphwise-reactodia/index.esm.js

@@ -0,0 +1 @@
+const a="graphwise-reactodia:clear-diagram-storage";export{a as CLEAR_DIAGRAM_STORAGE_EVENT}