@metadev/daga 1.5.2 → 1.5.3

package/Changelog.md

@@ -6,6 +6,12 @@ List of releases and changes.
 
 ## Next release Lobera
 
+## v. 1.5.3
+
+Date: _2024-09-09_
+
+- Create interface for listening to user events on the diagram [#160](https://github.com/metadevpro/daga/issues/160) [#161](https://github.com/metadevpro/daga/pull/161)
+
 ## v. 1.5.2
 
 Date: _2024-08-30_

package/fesm2022/metadev-daga.mjs

@@ -5425,6 +5425,23 @@ class DiagramModel {
     }
 }
 
+/**
+ * Represents an action taken by the user on the diagram.
+ * @public
+ */
+class DiagramEvent {
+    constructor(cause, type, target, coords) {
+        this.cause = cause;
+        this.type = type;
+        this.target = target;
+        this.coords = coords;
+        this.defaultPrevented = false;
+    }
+    preventDefault() {
+        this.defaultPrevented = true;
+    }
+}
+
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
  * @private
@@ -5555,10 +5572,17 @@ class DiagramCanvas {
             d3.select(this.diagramRoot).node()?.focus();
         })
             .on(Events.ContextMenu, (event) => {
-            if (this.canUserPerformAction(DiagramActions.ContextMenu)) {
+            const diagramEvent = new DiagramEvent(event, Events.ContextMenu, undefined);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+            if (!diagramEvent.defaultPrevented &&
+                this.canUserPerformAction(DiagramActions.ContextMenu)) {
                 event.preventDefault();
                 this.openContextMenu(event);
             }
+        })
+            .on(Events.DoubleClick, (event) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, undefined);
+            this.parentComponent.modelEvent.emit(diagramEvent);
         })
             .on(Events.KeyDown, (event) => {
             if (!event.ctrlKey &&
@@ -5866,12 +5890,19 @@ class DiagramCanvas {
             this.toggleUserSelection(d);
         })
             .on(Events.ContextMenu, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.ContextMenu)) {
+            const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+            if (!diagramEvent.defaultPrevented &&
+                this.canUserPerformAction(DiagramActions.ContextMenu)) {
                 event.preventDefault();
                 this.highlight(d);
                 this.addToUserSelection(d);
                 this.openContextMenu(event);
             }
+        })
+            .on(Events.DoubleClick, (event, d) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
         })
             .call(d3
             .drag()
@@ -6398,13 +6429,20 @@ class DiagramCanvas {
             this.toggleUserSelection(getRelatedNodeOrItself(d));
         })
             .on(Events.ContextMenu, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.ContextMenu)) {
+            const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+            if (!diagramEvent.defaultPrevented &&
+                this.canUserPerformAction(DiagramActions.ContextMenu)) {
                 event.preventDefault();
                 const elementToSelect = getRelatedNodeOrItself(d);
                 this.highlight(elementToSelect);
                 this.addToUserSelection(elementToSelect);
                 this.openContextMenu(event);
             }
+        })
+            .on(Events.DoubleClick, (event, d) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
         })
             .call(d3
             .drag()
@@ -6966,13 +7004,20 @@ class DiagramCanvas {
             this.toggleUserSelection(getRelatedNodeOrItself(d));
         })
             .on(Events.ContextMenu, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.ContextMenu)) {
+            const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+            if (!diagramEvent.defaultPrevented &&
+                this.canUserPerformAction(DiagramActions.ContextMenu)) {
                 event.preventDefault();
                 const elementToSelect = getRelatedNodeOrItself(d);
                 this.highlight(elementToSelect);
                 this.addToUserSelection(elementToSelect);
                 this.openContextMenu(event);
             }
+        })
+            .on(Events.DoubleClick, (event, d) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
         })
             .call(d3
             .drag()
@@ -7128,12 +7173,19 @@ class DiagramCanvas {
             this.toggleUserSelection(d);
         })
             .on(Events.ContextMenu, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.ContextMenu)) {
+            const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+            if (!diagramEvent.defaultPrevented &&
+                this.canUserPerformAction(DiagramActions.ContextMenu)) {
                 event.preventDefault();
                 this.highlight(d);
                 this.addToUserSelection(d);
                 this.openContextMenu(event);
             }
+        })
+            .on(Events.DoubleClick, (event, d) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
         });
         enterSelection.append('path').attr('class', 'diagram-connection-path');
         enterSelection.append('path').attr('class', 'diagram-connection-path-box');
@@ -7221,7 +7273,10 @@ class DiagramCanvas {
             this.toggleUserSelection(getRelatedNodeOrItself(d));
         })
             .on(Events.ContextMenu, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.ContextMenu)) {
+            const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+            if (!diagramEvent.defaultPrevented &&
+                this.canUserPerformAction(DiagramActions.ContextMenu)) {
                 event.preventDefault();
                 const elementToSelect = getRelatedNodeOrItself(d);
                 this.highlight(elementToSelect);
@@ -7229,8 +7284,11 @@ class DiagramCanvas {
                 this.openContextMenu(event);
             }
         })
-            .on(Events.DoubleClick, (_event, d) => {
-            if (this.canUserPerformAction(DiagramActions.EditField) &&
+            .on(Events.DoubleClick, (event, d) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+            if (!diagramEvent.defaultPrevented &&
+                this.canUserPerformAction(DiagramActions.EditField) &&
                 d.editable &&
                 !d.removed) {
                 this.currentAction = new EditFieldAction(this, d.id, d.text, '');
@@ -9829,6 +9887,11 @@ class DiagramEditorComponent {
     constructor(configurationService, canvasProvider) {
         this.configurationService = configurationService;
         this.canvasProvider = canvasProvider;
+        /**
+         * Output for user events on the diagram's model.
+         * @public
+         */
+        this.modelEvent = new EventEmitter();
         this.Corner = Corner;
         this.Side = Side;
     }
@@ -9839,7 +9902,7 @@ class DiagramEditorComponent {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", outputs: { modelEvent: "modelEvent" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
@@ -9862,6 +9925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], propertyEditor: [{
                 type: ViewChild,
                 args: ['propertyEditor']
+            }], modelEvent: [{
+                type: Output
             }] } });
 
 /**
@@ -10201,5 +10266,5 @@ function now() {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollabClient, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
+export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollabClient, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map