graphwise-reactodia 0.0.1-TR2 → 0.0.1-TR20

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/error/error-cause.js

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

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

@@ -0,0 +1,20 @@
+/**
+ * The stable category of a reported error. The host uses it to choose its own message.
+ */
+export var ErrorCode;
+(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";
+})(ErrorCode || (ErrorCode = {}));

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

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

package/dist/collection/components/graphwise-reactodia/models/event/event-callback.js

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

package/dist/collection/components/graphwise-reactodia/models/event/event-detail.js

@@ -0,0 +1,4 @@
+/**
+ * Name of the DOM event the `graphwise-reactodia` element dispatches for every event.
+ */
+export const GRAPHWISE_REACTODIA_EVENT = 'graphwiseReactodiaEvent';

package/dist/collection/components/graphwise-reactodia/models/event/event-type.js

@@ -0,0 +1,8 @@
+/**
+ * The kind of event the wrapper announces to the host. It selects the payload of an {@link EventDetail}.
+ */
+export var EventType;
+(function (EventType) {
+    EventType["ERROR"] = "error";
+    EventType["TEXT_SEARCH"] = "text-search";
+})(EventType || (EventType = {}));

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

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

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/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/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/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,10 +1,20 @@
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { DefaultWorkspace, SparqlDataProvider, useLoadedWorkspace, Workspace, } from "@reactodia/workspace";
+import { DecoratedDataProvider, 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 { ErrorService } from "./services/error/error.service";
+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 { toWorkspaceProps } from "./ui-config/ui-config-mapper";
 /**
- * Reactodia ships English as its built-in default bundle, so English needs no override.
+ * 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.
  *
  * Reactodia never re-reads the translations, so the component must be remounted
@@ -20,41 +30,183 @@ 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();
+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);
+const errorService = service(ErrorService);
+/**
+ * Emits a {@link EventType.TEXT_SEARCH} event for each text lookup.
+ */
+function emitTextSearch(method, params) {
+    if (method === 'lookup' && params.text) {
+        eventService.emit({ type: EventType.TEXT_SEARCH });
+    }
+}
+/**
+ * Reports every failed data provider call, unless the call was aborted, and passes the failure on to the caller.
+ */
+const reportDataFetchError = async (_method, params, body) => {
+    var _a;
+    try {
+        return await body(params);
+    }
+    catch (error) {
+        if (!((_a = params.signal) === null || _a === void 0 ? void 0 : _a.aborted)) {
+            errorService.report(ErrorCode.DATA_FETCH, error);
+        }
+        throw error;
+    }
+};
 /**
  * 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.
+ * query preset. The host owns the query configuration and always passes it in via props.
+ * The provider is decorated, so its failed calls are reported and its text lookups emit an event.
  */
-function createDataProvider(currentRepository, queryFunction, settings) {
-    return new SparqlDataProvider({
+function createDataProvider(props) {
+    const { currentRepository, config, providerSettings } = props;
+    const baseProvider = new SparqlDataProvider({
         endpointUrl: currentRepository,
         queryMethod: 'POST',
-        queryFunction,
-    }, settings);
+        queryFunction: config.queryFunction
+    }, providerSettings);
+    return new DecoratedDataProvider({
+        baseProvider,
+        decorator: (method, params, body) => {
+            emitTextSearch(method, params);
+            return reportDataFetchError(method, params, body);
+        }
+    });
+}
+/**
+ * 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) {
+    subscribeToDiagramChange(model);
+}
+/**
+ * Starts persisting the model's edits to local storage, keeping the subscription in {@link diagramStorageSubscription}.
+ */
+function subscribeToDiagramChange(model) {
+    diagramStorageSubscription === null || diagramStorageSubscription === void 0 ? void 0 : diagramStorageSubscription();
+    diagramStorageSubscription = diagramService.subscribeToDiagramChange(model, (diagram) => diagramStorageService.save(diagram));
+    subscriptions.add(diagramStorageSubscription);
+}
+/**
+ * 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}.
+ *
+ * @param model The diagram model whose edits are persisted
+ */
+function onClearDiagramStorage(model) {
+    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => {
+        // re-subscribe, to avoid any pending debounced saves, which may write over the cleared diagram
+        subscribeToDiagramChange(model);
+        diagramStorageService.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(model);
+        const dataProvider = createDataProvider(props);
+        const isReload = props.isReload;
+        const savedDiagram = diagramStorageService.load();
+        try {
+            if (isReload) {
+                // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
+                // settings, or 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 diagramService.importDiagram(model, dataProvider, 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 {
+                // 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 diagramService.importDiagram(model, dataProvider, savedDiagram, signal);
+            }
         }
-        else {
-            await model.createNewDiagram({ dataProvider, signal });
+        catch (error) {
+            if (!signal.aborted) {
+                errorService.report(ErrorCode.DIAGRAM_LOAD, error);
+            }
+            // rethrow, so the workspace shows the failure on its loading spinner
+            throw error;
         }
     }, [language]);
     /**
@@ -71,28 +223,36 @@ function ReactodiaApp(props) {
         ref: onMount,
         defaultLayout: blockingDefaultLayout,
         defaultLanguage: language,
-        translations: translationsForLanguage(language)
-    }, createElement(DefaultWorkspace, {}));
+        translations: translationsForLanguage(language),
+        typeStyleResolver: resolveTypeStyle
+    }, 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;
 }
 /**
- * Re-points the diagram at a new SPARQL endpoint or query preset by recreating it with a
- * fresh data provider. The canvas is reset to empty, matching the initial mount.
+ * Re-points the diagram at a new SPARQL endpoint by recreating it with a fresh data provider.
+ * The canvas is reset to empty, matching the initial mount, since the data of another repository
+ * has nothing to do with the current graph. A failure is reported, not thrown.
  */
 export async function updateReactodia(props) {
     if (!workspaceContext) {
         return;
     }
     const { model } = workspaceContext;
-    const dataProvider = createDataProvider(props.currentRepository, props.queryFunction, props.providerSettings);
-    await model.createNewDiagram({ dataProvider });
+    const dataProvider = createDataProvider(props);
+    try {
+        await model.createNewDiagram({ dataProvider });
+    }
+    catch (error) {
+        errorService.report(ErrorCode.DIAGRAM_LOAD, error);
+    }
 }
 /**
  * Serializes the current diagram so it can be restored after a remount (e.g. when a
@@ -105,5 +265,7 @@ export function exportReactodiaLayout() {
  * Unmounts the Reactodia application.
  */
 export function unmountReactodia(root) {
+    subscriptions.unsubscribeAll();
+    uiConfigProps = undefined;
     root.unmount();
 }

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

@@ -0,0 +1,71 @@
+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 {
+    /**
+     * Replaces the diagram content with the given serialization. Element data is requested from the data provider and
+     * the links between the imported elements are validated against it.
+     *
+     * @param model The diagram model to import into.
+     * @param dataProvider The data provider to bind to the diagram.
+     * @param diagram The serialization to import. When `undefined`, the diagram is cleared.
+     * @param signal Optional signal to abort the import.
+     */
+    importDiagram(model, dataProvider, diagram, signal) {
+        // selection is not cleared on import, so we clear it manually to avoid painting the previous selection
+        model.setSelection([]);
+        return model.importLayout({ dataProvider, diagram, signal, validateLinks: true });
+    }
+    /**
+     * 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(() => {
+                if (notifyTimer) {
+                    onChangeCallback(model.exportLayout());
+                }
+                notifyTimer = undefined;
+            }, 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);
+                notifyTimer = undefined;
+            }
+        };
+    }
+};
+DiagramService.ID = 'DiagramService';
+DiagramService.NOTIFY_DEBOUNCE_MS = 300;
+DiagramService.HISTORY_CHANGED_EVENT = 'historyChanged';
+DiagramService = DiagramService_1 = __decorate([
+    Service
+], DiagramService);
+export { DiagramService };