graphwise-reactodia 0.0.1-TR17 → 0.0.1-TR18

package/README.md

@@ -66,19 +66,41 @@ persisted in the DB, so they can't be fetched lazily and must be supplied by the
 
 When both are supplied `seedGraph` takes precedence over `seedIris`.
 
-## Error handling
+## Events
+
+The element sends every event to the host through one DOM event, `graphwiseReactodiaEvent`. The event
+only informs the host and it bubbles. Its name is exported as `GRAPHWISE_REACTODIA_EVENT`.
+
+`detail` is an `EventDetail`: `{type, payload}`. `type` is an `EventType`; `payload` depends on it:
 
-The element dispatches a `graphwiseReactodiaError` DOM event for every error it reports; the codes below
-list them. The event only informs the host and it bubbles. Its name is exported as
-`GRAPHWISE_REACTODIA_ERROR_EVENT`.
+| `type`  | `payload`       |
+|---------|-----------------|
+| `error` | `ErrorReport`   |
 
-```js
-element.addEventListener('graphwiseReactodiaError', (event) => {
-  const {code, error} = event.detail;
+Checking `type` narrows `payload`:
+
+```ts
+element.addEventListener(GRAPHWISE_REACTODIA_EVENT, (event) => {
+  const detail = (event as CustomEvent<EventDetail>).detail;
+  if (detail.type === EventType.ERROR) {
+    const {code, error} = detail.payload; // an ErrorReport
+  }
 });
 ```
 
-`detail` is an `ErrorReport`:
+`EventDetail<T>` is one event, e.g. for a handler of a single type:
+
+```ts
+function onError(detail: EventDetail<EventType.ERROR>): void {
+  const {code, error} = detail.payload;
+}
+```
+
+## Error handling
+
+The element dispatches an `error` event for every error it reports; the codes below list them.
+
+`payload` is an `ErrorReport`:
 
 | Field   | Description                                                                             |
 |---------|-----------------------------------------------------------------------------------------|

package/dist/cjs/{error-code-NpXlqCEN.js → error-code-BdRU0RQ9.js}

@@ -6,6 +6,14 @@
  */
 const CLEAR_DIAGRAM_STORAGE_EVENT = 'graphwise-reactodia:clear-diagram-storage';
 
+/**
+ * The kind of event the wrapper announces to the host. It selects the payload of an {@link EventDetail}.
+ */
+exports.EventType = void 0;
+(function (EventType) {
+    EventType["ERROR"] = "error";
+})(exports.EventType || (exports.EventType = {}));
+
 /**
  * The stable category of a reported error. The host uses it to choose its own message.
  */

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DtzCybH4.js');
-var errorCode = require('./error-code-NpXlqCEN.js');
+var errorCode = require('./error-code-BdRU0RQ9.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -31475,12 +31475,63 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
     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;
 };
+/**
+ * Service for event based operations
+ */
+let EventService = class EventService {
+    /**
+     * Announces an event to the host.
+     *
+     * @param detail The event detail.
+     */
+    emit(detail) {
+        var _a;
+        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, detail);
+    }
+    /**
+     * Subscribes to the emitted events, replacing the previous subscriber.
+     *
+     * @param callback Called with every emitted event.
+     * @returns A {@link Subscription} that, when called, removes the callback, unless it has already been replaced.
+     */
+    subscribe(callback) {
+        this.callback = callback;
+        return () => {
+            if (this.callback === callback) {
+                this.callback = undefined;
+            }
+        };
+    }
+    /**
+     * 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();
+        target.addEventListener(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+        return () => target.removeEventListener(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
+    }
+};
+EventService.ID = 'EventService';
+EventService = __decorate$3([
+    Service
+], EventService);
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 ErrorService_1;
 /**
  * Service that collects the failures of the wrapper and the fork, so they can be announced to the host.
  */
 let ErrorService = ErrorService_1 = class ErrorService {
     constructor() {
+        this.eventService = service(EventService);
         this.reported = new WeakSet();
     }
     /**
@@ -31506,27 +31557,12 @@ let ErrorService = ErrorService_1 = class ErrorService {
      * @param thrown The thrown value.
      */
     report(code, thrown) {
-        var _a;
         const causes = this.causeChain(thrown);
         if (this.isAbortedOrAlreadyReported(causes)) {
             return;
         }
         causes.forEach((cause) => this.reported.add(cause));
-        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { code, error: thrown });
-    }
-    /**
-     * Subscribes to the reported errors, replacing the previous subscriber.
-     *
-     * @param callback Called with every reported error.
-     * @returns A {@link Subscription} that, when called, removes the callback, unless it has already been replaced.
-     */
-    subscribe(callback) {
-        this.callback = callback;
-        return () => {
-            if (this.callback === callback) {
-                this.callback = undefined;
-            }
-        };
+        this.eventService.emit({ type: errorCode.EventType.ERROR, payload: { code, error: thrown } });
     }
     /**
      * Whether any link of the given cause chain is an abort or is already reported.
@@ -31549,11 +31585,11 @@ let ErrorService = ErrorService_1 = class ErrorService {
 };
 ErrorService.ID = 'ErrorService';
 ErrorService.ABORT_ERROR_NAME = 'AbortError';
-ErrorService = ErrorService_1 = __decorate$3([
+ErrorService = ErrorService_1 = __decorate$2([
     Service
 ], ErrorService);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -31611,37 +31647,10 @@ let DiagramStorageService = DiagramStorageService_1 = class DiagramStorageServic
 };
 DiagramStorageService.ID = 'DiagramStorageService';
 DiagramStorageService.STORAGE_KEY = 'diagram.state';
-DiagramStorageService = DiagramStorageService_1 = __decorate$2([
+DiagramStorageService = DiagramStorageService_1 = __decorate$1([
     Service
 ], DiagramStorageService);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
-/**
- * Service for event based operations
- */
-let EventService = 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();
-        target.addEventListener(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
-        return () => target.removeEventListener(errorCode.CLEAR_DIAGRAM_STORAGE_EVENT, onClear);
-    }
-};
-EventService.ID = 'EventService';
-EventService = __decorate$1([
-    Service
-], EventService);
-
 /**
  * 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
@@ -31852,7 +31861,7 @@ const subscriptions = new SubscriptionList();
 let diagramStorageSubscription;
 const diagramService = service(DiagramService);
 const diagramStorageService = service(DiagramStorageService);
-const eventService = service(EventService);
+const eventService$1 = service(EventService);
 const errorService$1 = service(ErrorService);
 /**
  * Reports every failed data provider call, unless the call was aborted, and passes the failure on to the caller.
@@ -31949,7 +31958,7 @@ function subscribeToDiagramChange(model) {
  * @param model The diagram model whose edits are persisted
  */
 function onClearDiagramStorage(model) {
-    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => {
+    subscriptions.add(eventService$1.subscribeToClearDiagramStorage(() => {
         // re-subscribe, to avoid any pending debounced saves, which may write over the cleared diagram
         subscribeToDiagramChange(model);
         diagramStorageService.clear();
@@ -32070,10 +32079,11 @@ function unmountReactodia(root) {
 const graphwiseReactodiaCss = "graphwise-reactodia{--_graphwise-reactodia-type-color-01:var(--graphwise-reactodia-type-color-01);--_graphwise-reactodia-type-color-02:var(--graphwise-reactodia-type-color-02);--_graphwise-reactodia-type-color-03:var(--graphwise-reactodia-type-color-03);--_graphwise-reactodia-type-color-04:var(--graphwise-reactodia-type-color-04);--_graphwise-reactodia-type-color-05:var(--graphwise-reactodia-type-color-05);--_graphwise-reactodia-type-color-06:var(--graphwise-reactodia-type-color-06);--_graphwise-reactodia-type-color-07:var(--graphwise-reactodia-type-color-07);--_graphwise-reactodia-type-color-08:var(--graphwise-reactodia-type-color-08);--_graphwise-reactodia-type-color-09:var(--graphwise-reactodia-type-color-09);--_graphwise-reactodia-type-color-10:var(--graphwise-reactodia-type-color-10);--_graphwise-reactodia-type-color-11:var(--graphwise-reactodia-type-color-11);--_graphwise-reactodia-type-color-12:var(--graphwise-reactodia-type-color-12);--_graphwise-reactodia-type-color-13:var(--graphwise-reactodia-type-color-13);--_graphwise-reactodia-type-color-14:var(--graphwise-reactodia-type-color-14);--_graphwise-reactodia-type-color-15:var(--graphwise-reactodia-type-color-15);--_graphwise-reactodia-type-color-16:var(--graphwise-reactodia-type-color-16);--_graphwise-reactodia-type-color-17:var(--graphwise-reactodia-type-color-17);--_graphwise-reactodia-type-color-18:var(--graphwise-reactodia-type-color-18);--_graphwise-reactodia-type-color-19:var(--graphwise-reactodia-type-color-19);--_graphwise-reactodia-type-color-20:var(--graphwise-reactodia-type-color-20);--_graphwise-reactodia-type-color-contrast:var(--graphwise-reactodia-type-color-contrast, #fff)}graphwise-reactodia{display:block;width:100%;height:100%}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}graphwise-reactodia .reactodia-standard-element__thumbnail:not(:has(img)){background:var(--reactodia-element-style-color);border-radius:50%;color:var(--_graphwise-reactodia-type-color-contrast)}";
 
 const errorService = service(ErrorService);
+const eventService = service(EventService);
 const GraphwiseReactodia = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEmitter = index.createEvent(this, "graphwiseReactodiaError");
+        this.eventEmitter = index.createEvent(this, "graphwiseReactodiaEvent");
         this.subscriptions = new SubscriptionList();
         /**
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
@@ -32102,7 +32112,7 @@ const GraphwiseReactodia = class {
         this.renderGraph(true);
     }
     connectedCallback() {
-        this.subscribeToErrors();
+        this.subscribeToEvents();
         this.renderGraph();
     }
     componentDidLoad() {
@@ -32117,10 +32127,10 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a96eea05561061bbed34b5134abc44f07402211f' }));
+        return (index.h(index.Host, { key: '2e8541c791f478484c4bad64ad758df99aba2059' }));
     }
-    subscribeToErrors() {
-        this.subscriptions.add(errorService.subscribe((error) => this.errorEmitter.emit(error)));
+    subscribeToEvents() {
+        this.subscriptions.add(eventService.subscribe((detail) => this.eventEmitter.emit(detail)));
     }
     renderGraph(isReloading) {
         var _a;

package/dist/cjs/index.cjs.js

@@ -1,15 +1,19 @@
 'use strict';
 
-var errorCode = require('./error-code-NpXlqCEN.js');
+var errorCode = require('./error-code-BdRU0RQ9.js');
 
 /**
- * Name of the DOM event the `graphwise-reactodia` element dispatches for every reported error.
+ * Name of the DOM event the `graphwise-reactodia` element dispatches for every event.
  */
-const GRAPHWISE_REACTODIA_ERROR_EVENT = 'graphwiseReactodiaError';
+const GRAPHWISE_REACTODIA_EVENT = 'graphwiseReactodiaEvent';
 
 exports.CLEAR_DIAGRAM_STORAGE_EVENT = errorCode.CLEAR_DIAGRAM_STORAGE_EVENT;
 Object.defineProperty(exports, "ErrorCode", {
 	enumerable: true,
 	get: function () { return errorCode.ErrorCode; }
 });
-exports.GRAPHWISE_REACTODIA_ERROR_EVENT = GRAPHWISE_REACTODIA_ERROR_EVENT;
+Object.defineProperty(exports, "EventType", {
+	enumerable: true,
+	get: function () { return errorCode.EventType; }
+});
+exports.GRAPHWISE_REACTODIA_EVENT = GRAPHWISE_REACTODIA_EVENT;

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

@@ -5,8 +5,10 @@ import { ErrorCode } from "./models/error/error-code";
 import { SubscriptionList } from "./models/subscription-list";
 import { service } from "./providers/service/service-inject";
 import { ErrorService } from "./services/error/error.service";
+import { EventService } from "./services/event/event.service";
 import { resetColors } from "./styles/type-style.resolver";
 const errorService = service(ErrorService);
+const eventService = service(EventService);
 /**
  * A web component that renders a graph with the Reactodia workspace.
  *
@@ -48,7 +50,7 @@ export class GraphwiseReactodia {
         this.renderGraph(true);
     }
     connectedCallback() {
-        this.subscribeToErrors();
+        this.subscribeToEvents();
         this.renderGraph();
     }
     componentDidLoad() {
@@ -63,10 +65,10 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: 'a96eea05561061bbed34b5134abc44f07402211f' }));
+        return (h(Host, { key: '2e8541c791f478484c4bad64ad758df99aba2059' }));
     }
-    subscribeToErrors() {
-        this.subscriptions.add(errorService.subscribe((error) => this.errorEmitter.emit(error)));
+    subscribeToEvents() {
+        this.subscriptions.add(eventService.subscribe((detail) => this.eventEmitter.emit(detail)));
     }
     renderGraph(isReloading) {
         var _a;
@@ -234,23 +236,23 @@ export class GraphwiseReactodia {
     }
     static get events() {
         return [{
-                "method": "errorEmitter",
-                "name": "graphwiseReactodiaError",
+                "method": "eventEmitter",
+                "name": "graphwiseReactodiaEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires, when an error has occurred. The host decides how to handle it."
+                    "text": "Fires for every event to the host, differentiated by `detail.type`."
                 },
                 "complexType": {
-                    "original": "ErrorReport",
-                    "resolved": "ErrorReport",
+                    "original": "EventDetail",
+                    "resolved": "{ type: EventType; payload: ErrorReport; }",
                     "references": {
-                        "ErrorReport": {
+                        "EventDetail": {
                             "location": "import",
-                            "path": "./models/error/error-report",
-                            "id": "src/components/graphwise-reactodia/models/error/error-report.ts::ErrorReport"
+                            "path": "./models/event/event-detail",
+                            "id": "src/components/graphwise-reactodia/models/event/event-detail.ts::EventDetail"
                         }
                     }
                 }

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

@@ -1,4 +1 @@
-/**
- * Name of the DOM event the `graphwise-reactodia` element dispatches for every reported error.
- */
-export const GRAPHWISE_REACTODIA_ERROR_EVENT = 'graphwiseReactodiaError';
+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,7 @@
+/**
+ * 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 || (EventType = {}));

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

@@ -10,11 +10,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var ErrorService_1;
 import { Service } from "../../providers/service/service";
+import { service } from "../../providers/service/service-inject";
+import { EventType } from "../../models/event/event-type";
+import { EventService } from "../event/event.service";
 /**
  * Service that collects the failures of the wrapper and the fork, so they can be announced to the host.
  */
 let ErrorService = ErrorService_1 = class ErrorService {
     constructor() {
+        this.eventService = service(EventService);
         this.reported = new WeakSet();
     }
     /**
@@ -40,27 +44,12 @@ let ErrorService = ErrorService_1 = class ErrorService {
      * @param thrown The thrown value.
      */
     report(code, thrown) {
-        var _a;
         const causes = this.causeChain(thrown);
         if (this.isAbortedOrAlreadyReported(causes)) {
             return;
         }
         causes.forEach((cause) => this.reported.add(cause));
-        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { code, error: thrown });
-    }
-    /**
-     * Subscribes to the reported errors, replacing the previous subscriber.
-     *
-     * @param callback Called with every reported error.
-     * @returns A {@link Subscription} that, when called, removes the callback, unless it has already been replaced.
-     */
-    subscribe(callback) {
-        this.callback = callback;
-        return () => {
-            if (this.callback === callback) {
-                this.callback = undefined;
-            }
-        };
+        this.eventService.emit({ type: EventType.ERROR, payload: { code, error: thrown } });
     }
     /**
      * Whether any link of the given cause chain is an abort or is already reported.

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

@@ -16,6 +16,29 @@ import { WindowService } from "../window/window.service";
  * Service for event based operations
  */
 let EventService = class EventService {
+    /**
+     * Announces an event to the host.
+     *
+     * @param detail The event detail.
+     */
+    emit(detail) {
+        var _a;
+        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, detail);
+    }
+    /**
+     * Subscribes to the emitted events, replacing the previous subscriber.
+     *
+     * @param callback Called with every emitted event.
+     * @returns A {@link Subscription} that, when called, removes the callback, unless it has already been replaced.
+     */
+    subscribe(callback) {
+        this.callback = callback;
+        return () => {
+            if (this.callback === callback) {
+                this.callback = undefined;
+            }
+        };
+    }
     /**
      * Subscribes to the host's "clear persisted diagram" command.
      *

package/dist/collection/index.js

@@ -1,3 +1,4 @@
 export { CLEAR_DIAGRAM_STORAGE_EVENT } from './components/graphwise-reactodia/models/clear-diagram-storage-event';
-export { GRAPHWISE_REACTODIA_ERROR_EVENT } from './components/graphwise-reactodia/models/error/error-report';
+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';

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

@@ -42,8 +42,12 @@ function hangingQueryFunction(params) {
 const reportedErrors = [];
 window.reportedErrors = reportedErrors;
 // The listener is on the document, since the tests replace the element.
-document.addEventListener('graphwiseReactodiaError', (event) => {
-  reportedErrors.push({code: event.detail.code, message: event.detail.error.message});
+document.addEventListener('graphwiseReactodiaEvent', (event) => {
+  if (event.detail.type !== 'error') {
+    return;
+  }
+  const {code, error} = event.detail.payload;
+  reportedErrors.push({code, message: error.message});
 });
 
 const SEED_NODES = ['http://example.com/alice', 'http://example.com/bob'];

package/dist/esm/{error-code-7lGYbTwb.js → error-code-DHI2bePh.js}

@@ -4,6 +4,14 @@
  */
 const CLEAR_DIAGRAM_STORAGE_EVENT = 'graphwise-reactodia:clear-diagram-storage';
 
+/**
+ * The kind of event the wrapper announces to the host. It selects the payload of an {@link EventDetail}.
+ */
+var EventType;
+(function (EventType) {
+    EventType["ERROR"] = "error";
+})(EventType || (EventType = {}));
+
 /**
  * The stable category of a reported error. The host uses it to choose its own message.
  */
@@ -23,4 +31,4 @@ var ErrorCode;
     ErrorCode["LOCAL_DIAGRAM_SAVE"] = "local-diagram-save";
 })(ErrorCode || (ErrorCode = {}));
 
-export { CLEAR_DIAGRAM_STORAGE_EVENT as C, ErrorCode as E };
+export { CLEAR_DIAGRAM_STORAGE_EVENT as C, EventType as E, ErrorCode as a };