@metadev/daga 1.5.3 → 1.5.5

package/Changelog.md

@@ -6,6 +6,19 @@ List of releases and changes.
 
 ## Next release Lobera
 
+## v. 1.5.5
+
+Date: _2024-10-02_
+
+- Ensure that decorators are always removed [#167](https://github.com/metadevpro/daga/pull/167)
+
+## 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_

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();
@@ -3043,6 +3061,10 @@ class DiagramNodeSet extends DiagramEntitySet {
             while (node.ports.length > 0) {
                 this.model.ports.remove(node.ports[0].id);
             }
+            // remove all decorators
+            while (node.decorators.length > 0) {
+                this.model.decorators.remove(node.decorators[0].id);
+            }
             // remove label
             if (node.label) {
                 this.model.fields.remove(node.label.id);
@@ -3809,6 +3831,8 @@ class SetSelfRemovedCollabAction {
         this.canvas.updatePortsInView(...this.portIds);
         this.canvas.updateConnectionsInView(...this.connectionIds);
         this.canvas.updateFieldsInView(...this.fieldIds);
+        // some of the nodes and sections may have decorators, so update them
+        this.canvas.updateDecoratorsInView();
     }
     serialize() {
         return {
@@ -4781,8 +4805,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 +4904,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 +5037,7 @@ const layouts = {
     force: new ForceLayout(),
     horizontal: new HorizontalLayout(),
     priority: new PriorityLayout(),
+    tree: new TreeLayout(),
     vertical: new VerticalLayout()
 };
 
@@ -5278,6 +5403,109 @@ 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, rootElement, 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.rootElement = rootElement;
+        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 ||
+            (this.rootElement !== undefined && this.rootElement.removed));
+    }
+    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, rootElement, 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 decorator = this.get(id);
+        if (decorator) {
+            // remove from root element
+            if (decorator.rootElement instanceof DiagramNode ||
+                decorator.rootElement instanceof DiagramSection) {
+                removeIfExists(decorator.rootElement.decorators, decorator);
+            }
+            // remove from set of objects
+            super.remove(id);
+            // remove from canvas
+            decorator.updateInView();
+        }
+    }
+}
+
 /**
  * A foreign object which is inserted with arbitrary html into a diagram.
  * Diagram objects are not serialized with other diagram elements.
@@ -5392,6 +5620,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;
@@ -5420,28 +5654,12 @@ class DiagramModel {
         this.connections.clear();
         this.fields.clear();
         this.objects.clear();
+        this.decorators.clear();
         this.valueSet.resetValues();
         this.canvas?.updateModelInView();
     }
 }
 
-/**
- * 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
@@ -5737,6 +5955,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) {
@@ -5860,6 +6079,7 @@ class DiagramCanvas {
         this.updateConnectionsInView();
         this.updateFieldsInView();
         this.updateObjectsInView();
+        this.updateDecoratorsInView();
     }
     updateNodesInView(...ids) {
         let updateSelection = this.selectCanvasNodes()
@@ -7443,6 +7663,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}`);
@@ -7748,6 +8020,9 @@ class DiagramCanvas {
     selectCanvasObjects() {
         return this.selectRoot().select(`.canvas-objects`);
     }
+    selectCanvasDecorators() {
+        return this.selectRoot().select(`.canvas-decorators`);
+    }
     // User actions
     startConnection(port) {
         if (this.connectionType &&
@@ -10266,5 +10541,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, 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 };
+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