@metadev/daga 1.5.2 → 1.5.4

package/Changelog.md

@@ -6,6 +6,19 @@ List of releases and changes.
 
 ## Next release Lobera
 
+## v. 1.5.4
+
+Date: _2024-09-21_
+
+- Add diagram decorators [#164](https://github.com/metadevpro/daga/issues/164) [#166](https://github.com/metadevpro/daga/pull/166)
+- Enable diagram events on diagram objects [#166](https://github.com/metadevpro/daga/pull/166)
+
+## 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

@@ -2207,6 +2207,11 @@ class DiagramSection extends DiagramElement {
          * @public
          */
         this.ports = [];
+        /**
+         * Decorators of this section.
+         * @public
+         */
+        this.decorators = [];
         this.node = node;
         this.indexXInNode = indexXInNode;
         this.indexYInNode = indexYInNode;
@@ -2396,6 +2401,10 @@ class DiagramSection extends DiagramElement {
                     this.height - (this.getConfig()?.label?.margin || 0) * 2);
             this.label.updateInView();
         }
+        // Move decorators to match the new coords.
+        for (const decorator of this.decorators) {
+            decorator.move(translatePoint(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
+        }
         // Update canvas.
         this.getConnections().forEach((c) => c.tighten());
         this.updateInView();
@@ -2597,6 +2606,11 @@ class DiagramNode extends DiagramElement {
          * @public
          */
         this.ports = [];
+        /**
+         * Decorators of this node.
+         * @public
+         */
+        this.decorators = [];
         /**
          * Collaborative timestamp for SetGeometryCollabActions.
          * @public
@@ -2913,6 +2927,10 @@ class DiagramNode extends DiagramElement {
                 (this.label.height = this.height - (this.type.label?.margin || 0) * 2);
             this.label.updateInView();
         }
+        // Move decorators to match the new coords.
+        for (const decorator of this.decorators) {
+            decorator.move(translatePoint(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
+        }
         // Update canvas.
         this.getConnections().forEach((c) => c.tighten());
         this.updateInView();
@@ -4781,8 +4799,8 @@ class PriorityLayout {
             // nothing to arrange...
             return model;
         }
-        const maximumPriority = Math.max(...model.nodes.types.all().map((n) => n.priority));
-        const minimumPriority = Math.min(...model.nodes.types.all().map((n) => n.priority));
+        const maximumPriority = Math.max(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
+        const minimumPriority = Math.min(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
         if (maximumPriority === minimumPriority) {
             // if there's no disparity in priorities, just use breadth layout
             new BreadthLayout().apply(model);
@@ -4880,6 +4898,106 @@ class PriorityLayout {
     }
 }
 
+/**
+ * A layout which arranges the nodes in trees from left to right by depth relative to the nodes with most priority.
+ * @public
+ */
+class TreeLayout {
+    apply(model) {
+        if (model.nodes.length === 0) {
+            // nothing to arrange...
+            return model;
+        }
+        const maximumPriority = Math.max(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
+        const minimumPriority = Math.min(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
+        if (maximumPriority === minimumPriority) {
+            // if there's no disparity in priorities, just use breadth layout
+            new BreadthLayout().apply(model);
+            return model;
+        }
+        const gapSize = (model.canvas?.gridSize || 0) * 2;
+        const nodesToBeArranged = [...model.nodes].sort((n1, n2) => n2.getPriority() - n1.getPriority());
+        const branches = [];
+        while (nodesToBeArranged.length > 0) {
+            const nodeToBeArranged = nodesToBeArranged[0];
+            nodesToBeArranged.splice(0, 1);
+            const branch = new Branch(undefined, nodeToBeArranged);
+            populateBranches(branch, nodesToBeArranged);
+            branches.push(branch);
+        }
+        const branchArrangement = [];
+        for (const branch of branches) {
+            branchArrangement.push([branch]);
+            arrangeBranches(branch, branchArrangement, branchArrangement.length);
+        }
+        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
+        let widthAccumulator = 0;
+        for (let i = 0; i < branchArrangement.length; ++i) {
+            let heightAccumulator = 0;
+            for (let j = 0; j < branchArrangement[i].length; ++j) {
+                const branch = branchArrangement[i][j];
+                branch.node.move([widthAccumulator, heightAccumulator]);
+                heightAccumulator +=
+                    (gapSize + maximumHeight) * branch.countBranchHeight();
+            }
+            const maximumWidth = Math.max(...branchArrangement[i].map((b) => b.node.width));
+            widthAccumulator += gapSize + maximumWidth;
+        }
+        for (const connection of model.connections) {
+            connection.tighten();
+        }
+        model.canvas?.diagramChanges$.next();
+        return model;
+    }
+}
+const populateBranches = (branch, nodesToBeArranged) => {
+    for (const adjacentNode of branch.node.getAdjacentNodes()) {
+        const indexOfAdjacentNode = nodesToBeArranged.indexOf(adjacentNode);
+        if (indexOfAdjacentNode >= 0) {
+            nodesToBeArranged.splice(indexOfAdjacentNode, 1);
+            const newBranch = branch.addBranch(adjacentNode);
+            populateBranches(newBranch, nodesToBeArranged);
+        }
+    }
+};
+const arrangeBranches = (branch, branchArrangement, index) => {
+    if (branch.branches.length > 0) {
+        while (index >= branchArrangement.length) {
+            branchArrangement.push([]);
+        }
+        for (const subbranch of branch.branches) {
+            branchArrangement[index].push(subbranch);
+            arrangeBranches(subbranch, branchArrangement, index + 1);
+        }
+    }
+};
+class Branch {
+    constructor(parent, node) {
+        this.parent = parent;
+        this.branches = [];
+        this.depth = 0;
+        this.node = node;
+    }
+    addBranch(node) {
+        const newBranch = new Branch(this, node);
+        newBranch.depth = this.depth + 1;
+        this.branches.push(newBranch);
+        return newBranch;
+    }
+    countBranchHeight() {
+        if (this.branches.length <= 0) {
+            return 1;
+        }
+        else {
+            let total = 0;
+            for (const subbranch of this.branches) {
+                total += subbranch.countBranchHeight();
+            }
+            return total;
+        }
+    }
+}
+
 /**
  * A layout which arranges all the nodes in a vertical line.
  * @public
@@ -4913,6 +5031,7 @@ const layouts = {
     force: new ForceLayout(),
     horizontal: new HorizontalLayout(),
     priority: new PriorityLayout(),
+    tree: new TreeLayout(),
     vertical: new VerticalLayout()
 };
 
@@ -5278,6 +5397,102 @@ class DagaExporter {
     }
 }
 
+/**
+ * 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;
+    }
+}
+
+/**
+ * A foreign object which is inserted with arbitrary html into a diagram.
+ * Similar to a diagram object, but it's part of a node or section and it moves and stretches as its geometry changes.
+ * Diagram decorators are not serialized with other diagram elements.
+ * @see DiagramNode
+ * @see DiagramObject
+ * @see DiagramSection
+ * @public
+ */
+class DiagramDecorator extends DiagramElement {
+    constructor(model, coords, width, height, priority, html, id) {
+        if (model.objects.get(id) !== undefined) {
+            throw new Error(`DiagramObject with id "${id}" already exists`);
+        }
+        super(model, id);
+        this.coords = coords;
+        this.width = width;
+        this.height = height;
+        this.priority = priority;
+        this.html = html;
+    }
+    select() {
+        return this.model.canvas
+            ?.selectCanvasView()
+            ?.select(`foreignObject#${this.id}`);
+    }
+    get removed() {
+        return this.selfRemoved;
+    }
+    updateInView() {
+        this.model.canvas?.updateDecoratorsInView(this.id);
+    }
+    /**
+     * Change the coordinates of this decorator to the given coordinates.
+     * @public
+     * @param coords A point in the diagram.
+     */
+    move(coords) {
+        this.coords = coords;
+        this.updateInView();
+    }
+    getPriority() {
+        return this.priority;
+    }
+}
+class DiagramDecoratorSet extends DiagramEntitySet {
+    /**
+     * Instance a set of decorators for the given model. This method is used internally.
+     * @private
+     */
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    /**
+     * Instance a new decorator and add it to this set.
+     * @private
+     */
+    new(rootElement, coords, width, height, priority, html, id) {
+        const decorator = new DiagramDecorator(this.model, coords, width, height, priority, html, id);
+        super.add(decorator);
+        decorator.updateInView();
+        // add this port to its root element
+        if (rootElement !== undefined) {
+            rootElement.decorators.push(decorator);
+        }
+        return decorator;
+    }
+    remove(id) {
+        const object = this.get(id);
+        if (object) {
+            // remove from set of objects
+            super.remove(id);
+            // remove from canvas
+            object.updateInView();
+        }
+    }
+}
+
 /**
  * A foreign object which is inserted with arbitrary html into a diagram.
  * Diagram objects are not serialized with other diagram elements.
@@ -5392,6 +5607,12 @@ class DiagramModel {
          * @public
          */
         this.objects = new DiagramObjectSet(this);
+        /**
+         * Decorators of this model.
+         * @see DiagramDecorator
+         * @public
+         */
+        this.decorators = new DiagramDecoratorSet(this);
         this.canvas = canvas;
         this.id = id;
         this.name = name;
@@ -5555,10 +5776,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 &&
@@ -5713,6 +5941,7 @@ class DiagramCanvas {
         canvasElements.append('g').attr('class', 'canvas-connections');
         canvasElements.append('g').attr('class', 'canvas-fields');
         canvasElements.append('g').attr('class', 'canvas-objects');
+        canvasElements.append('g').attr('class', 'canvas-decorators');
         this.viewInitialized$.next();
     }
     zoomBy(zoom) {
@@ -5836,6 +6065,7 @@ class DiagramCanvas {
         this.updateConnectionsInView();
         this.updateFieldsInView();
         this.updateObjectsInView();
+        this.updateDecoratorsInView();
     }
     updateNodesInView(...ids) {
         let updateSelection = this.selectCanvasNodes()
@@ -5866,12 +6096,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 +6635,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 +7210,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 +7379,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 +7479,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 +7490,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, '');
@@ -7385,6 +7649,58 @@ class DiagramCanvas {
             .attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`)
             .html((d) => d.html);
         exitSelection.remove();
+        enterSelection
+            .on(Events.ContextMenu, (event) => {
+            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, d) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+        });
+    }
+    updateDecoratorsInView(...ids) {
+        let updateSelection = this.selectCanvasDecorators()
+            .selectAll('foreignObject.diagram-decorator')
+            .data(this.model.decorators.filter((e) => !e.removed &&
+            (this.priorityThreshold !== undefined
+                ? e.getPriority() >= this.priorityThreshold
+                : true)), (d) => d.id);
+        const exitSelection = updateSelection.exit();
+        const enterSelection = updateSelection
+            .enter()
+            .append('foreignObject')
+            .attr('id', (d) => d.id)
+            .attr('class', 'diagram-decorator');
+        if (ids && ids.length > 0) {
+            updateSelection = updateSelection.filter((d) => ids.includes(d.id));
+        }
+        const mergeSelection = enterSelection.merge(updateSelection);
+        mergeSelection
+            .attr('width', (d) => `${d.width}px`)
+            .attr('height', (d) => `${d.height}px`)
+            .attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`)
+            .html((d) => d.html);
+        exitSelection.remove();
+        enterSelection
+            .on(Events.ContextMenu, (event) => {
+            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, d) => {
+            const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+            this.parentComponent.modelEvent.emit(diagramEvent);
+        });
     }
     updateConnectionLabelsInView(connection) {
         const connectionSelection = this.selectCanvasView().select(`g.diagram-connection#${connection.id}`);
@@ -7690,6 +8006,9 @@ class DiagramCanvas {
     selectCanvasObjects() {
         return this.selectRoot().select(`.canvas-objects`);
     }
+    selectCanvasDecorators() {
+        return this.selectRoot().select(`.canvas-decorators`);
+    }
     // User actions
     startConnection(port) {
         if (this.connectionType &&
@@ -9829,6 +10148,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 +10163,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 +10186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], propertyEditor: [{
                 type: ViewChild,
                 args: ['propertyEditor']
+            }], modelEvent: [{
+                type: Output
             }] } });
 
 /**
@@ -10201,5 +10527,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, DiagramDecorator, DiagramDecoratorSet, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map