@metadev/daga 1.0.0 → 1.2.0

package/fesm2022/metadev-daga.mjs

@@ -7,7 +7,7 @@ import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from '@metadev/lux';
 import { LuxModule } from '@metadev/lux';
-import { Subject, delay, map, combineLatest } from 'rxjs';
+import { Subject, combineLatest, delay, map } from 'rxjs';
 
 var Side;
 (function (Side) {
@@ -71,12 +71,56 @@ class CollapseButtonComponent {
             selection.style(this.rule, this.collapsed ? this.collapsedValue : this.visibleValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <img\n    *ngIf=\"direction === Side.Bottom && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Top && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Left && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Right && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n</button>\n", styles: [".collapse-button{width:100%;height:100%;min-width:2rem;min-height:2rem;margin:0;border:0;padding:0;background-color:transparent;cursor:pointer}.collapse-button img{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    getClass() {
+        switch (this.direction) {
+            case Side.Right:
+                if (this.disabled) {
+                    return 'horizontal-none';
+                }
+                else if (this.collapsed) {
+                    return 'horizontal-right';
+                }
+                else {
+                    return 'horizontal-left';
+                }
+            case Side.Bottom:
+                if (this.disabled) {
+                    return 'vertical-none';
+                }
+                else if (this.collapsed) {
+                    return 'vertical-down';
+                }
+                else {
+                    return 'vertical-up';
+                }
+            case Side.Left:
+                if (this.disabled) {
+                    return 'horizontal-none';
+                }
+                else if (this.collapsed) {
+                    return 'horizontal-left';
+                }
+                else {
+                    return 'horizontal-right';
+                }
+            case Side.Top:
+                if (this.disabled) {
+                    return 'vertical-none';
+                }
+                else if (this.collapsed) {
+                    return 'vertical-up';
+                }
+                else {
+                    return 'vertical-down';
+                }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CollapseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CollapseButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <img\n    *ngIf=\"direction === Side.Bottom && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Bottom && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Top && disabled\"\n    src=\"/assets/daga/icon/action/drop-vertical-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-up.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Top && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-vertical-down.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Left && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Left && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n\n  <img\n    *ngIf=\"direction === Side.Right && disabled\"\n    src=\"/assets/daga/icon/action/drop-horizontal-none.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-right.svg\"\n  />\n  <img\n    *ngIf=\"direction === Side.Right && !disabled && !collapsed\"\n    src=\"/assets/daga/icon/action/drop-horizontal-left.svg\"\n  />\n</button>\n", styles: [".collapse-button{width:100%;height:100%;min-width:2rem;min-height:2rem;margin:0;border:0;padding:0;background-color:transparent;cursor:pointer}.collapse-button img{width:1.5rem;height:1.5rem}\n"] }]
+            args: [{ standalone: true, selector: 'daga-collapse-button', imports: [CommonModule], template: "<button class=\"collapse-button {{ direction }}\" (click)=\"toggleCollapse()\">\n  <div [class]=\"getClass()\"></div>\n</button>\n" }]
         }], propDecorators: { collapsableSelector: [{
                 type: Input
             }], collapsableAdditionalSelector: [{
@@ -223,8 +267,8 @@ class AdjacencyLayout {
             arrangeNode(nodesToBeArranged[0], nodeArrangement, [0, 0], nodesToBeArranged);
         }
         // place nodes according to arrangement
-        const maximumWidth = Math.max(...model.nodes.map((n) => n.width));
-        const maximumHeight = Math.max(...model.nodes.map((n) => n.height));
+        const maximumWidth = Math.max(...model.nodes.all().map((n) => n.width));
+        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
         const gapSize = (model.canvas?.gridSize || 0) * 2;
         for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
             for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
@@ -294,8 +338,8 @@ class BreadthAdjacencyLayout {
             }
         }
         // place nodes according to arrangement
-        const maximumWidth = Math.max(...model.nodes.map((n) => n.width));
-        const maximumHeight = Math.max(...model.nodes.map((n) => n.height));
+        const maximumWidth = Math.max(...model.nodes.all().map((n) => n.width));
+        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
         const gapSize = (model.canvas?.gridSize || 0) * 2;
         for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
             for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
@@ -514,7 +558,7 @@ class ForceLayout {
             temperature = temperature * coolingFactor;
             // calculate the center of the diagram for applying gravity
             const diagramCenterCoords = [0, 0];
-            if (gravityFactor !== 0) {
+            if (gravityFactor > 0) {
                 for (const node of model.nodes) {
                     diagramCenterCoords[0] =
                         diagramCenterCoords[0] + node.coords[0] + node.width / 2;
@@ -585,7 +629,7 @@ class ForceLayout {
                             newNode2Coords[1] + shiftNodeIfOverlap * (Math.random() * 2 - 1);
                     }
                     // apply gravity force
-                    if (gravityFactor !== 0) {
+                    if (gravityFactor > 0) {
                         newNode2Coords[0] =
                             newNode2Coords[0] -
                                 (node2CenterCoords[0] - diagramCenterCoords[0]) * gravityFactor;
@@ -634,7 +678,7 @@ class HorizontalLayout {
             return model;
         }
         const gapSize = (model.canvas?.gridSize || 0) * 2;
-        const nodesToBeArranged = model.nodes;
+        const nodesToBeArranged = model.nodes.all();
         nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
         let widthAccumulator = 0;
         for (const node of nodesToBeArranged) {
@@ -654,8 +698,8 @@ class PriorityLayout {
             // nothing to arrange...
             return model;
         }
-        const maximumPriority = Math.max(...model.nodeTypes.map((n) => n.priority));
-        const minimumPriority = Math.min(...model.nodeTypes.map((n) => n.priority));
+        const maximumPriority = Math.max(...model.nodes.types.all().map((n) => n.priority));
+        const minimumPriority = Math.min(...model.nodes.types.all().map((n) => n.priority));
         if (maximumPriority === minimumPriority) {
             // if there's no disparity in priorities, just use breadth layout
             new BreadthLayout().apply(model);
@@ -664,7 +708,7 @@ class PriorityLayout {
         const gapSize = (model.canvas?.gridSize || 0) * 2;
         const nodesToBeArranged = [...model.nodes];
         const nodeArrangement = [];
-        const nodesWithMaximumPriorityToBeArranged = model.getNodes(maximumPriority);
+        const nodesWithMaximumPriorityToBeArranged = model.nodes.filter(undefined, maximumPriority);
         const nodesWithMaximumPriority = [];
         if (nodesWithMaximumPriorityToBeArranged.length > 1) {
             // use bfs to sort nodes by distance to the first node
@@ -762,7 +806,7 @@ class VerticalLayout {
             return model;
         }
         const gapSize = (model.canvas?.gridSize || 0) * 2;
-        const nodesToBeArranged = model.nodes;
+        const nodesToBeArranged = model.nodes.all();
         nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
         let heightAccumulator = 0;
         for (const node of nodesToBeArranged) {
@@ -1325,6 +1369,17 @@ class ActionQueue {
         }
     }
 }
+var DiagramActions;
+(function (DiagramActions) {
+    DiagramActions["AddConnectionAction"] = "add-connection";
+    DiagramActions["AddNodeAction"] = "add-node";
+    DiagramActions["EditFieldAction"] = "edit-field";
+    DiagramActions["MoveNodeAction"] = "move-node";
+    DiagramActions["RemoveAction"] = "remove";
+    DiagramActions["StretchNodeAction"] = "stretch-node";
+    DiagramActions["StretchSectionAction"] = "stretch-section";
+    DiagramActions["UpdateValuesAction"] = "update-values";
+})(DiagramActions || (DiagramActions = {}));
 class AddNodeAction {
     constructor(canvas, type, coords, label, values, id) {
         this.canvas = canvas;
@@ -1336,14 +1391,11 @@ class AddNodeAction {
     }
     undo() {
         if (this.id) {
-            const node = this.canvas.model.getNode(this.id);
-            if (node) {
-                this.canvas.model.deleteNode(node);
-            }
+            this.canvas.model.nodes.remove(this.id);
         }
     }
     redo() {
-        const node = this.canvas.model.addNode(this.type, this.coords, this.id, this.sectionIds, this.sectionPortIds, this.sectionPortLabelIds, this.portIds, this.portLabelIds, this.labelId);
+        const node = this.canvas.model.nodes.new(this.type, this.coords, this.id, this.sectionIds, this.sectionPortIds, this.sectionPortLabelIds, this.portIds, this.portLabelIds, this.labelId);
         if (this.values !== undefined) {
             node.valueSet.setValues(structuredClone({
                 ...node.valueSet.getValues(),
@@ -1372,16 +1424,10 @@ class MoveNodeAction {
         this.to = to;
     }
     undo() {
-        const node = this.canvas.model.getNode(this.nodeId);
-        if (node) {
-            node.move(this.from);
-        }
+        this.canvas.model.nodes.get(this.nodeId)?.move(this.from);
     }
     redo() {
-        const node = this.canvas.model.getNode(this.nodeId);
-        if (node) {
-            node.move(this.to);
-        }
+        this.canvas.model.nodes.get(this.nodeId)?.move(this.to);
     }
 }
 class StretchNodeAction {
@@ -1393,16 +1439,14 @@ class StretchNodeAction {
         this.to = to;
     }
     undo() {
-        const node = this.canvas.model.getNode(this.nodeId);
-        if (node) {
-            node.stretch(this.direction, this.from - this.to);
-        }
+        this.canvas.model.nodes
+            .get(this.nodeId)
+            ?.stretch(this.direction, this.from - this.to);
     }
     redo() {
-        const node = this.canvas.model.getNode(this.nodeId);
-        if (node) {
-            node.stretch(this.direction, this.to - this.from);
-        }
+        this.canvas.model.nodes
+            .get(this.nodeId)
+            ?.stretch(this.direction, this.to - this.from);
     }
 }
 class StretchSectionAction {
@@ -1414,14 +1458,14 @@ class StretchSectionAction {
         this.to = to;
     }
     undo() {
-        const section = this.canvas.model.getSection(this.sectionId);
+        const section = this.canvas.model.sections.get(this.sectionId);
         const node = section?.node;
         if (node) {
             node.stretchSections(this.direction, this.from - this.to, section.coords);
         }
     }
     redo() {
-        const section = this.canvas.model.getSection(this.sectionId);
+        const section = this.canvas.model.sections.get(this.sectionId);
         const node = section?.node;
         if (node) {
             node.stretchSections(this.direction, this.to - this.from, section.coords);
@@ -1438,17 +1482,14 @@ class AddConnectionAction {
     }
     undo() {
         if (this.id) {
-            const connection = this.canvas.model.getConnection(this.id);
-            if (connection) {
-                this.canvas.model.deleteConnection(connection);
-            }
+            this.canvas.model.connections.remove(this.id);
         }
     }
     redo() {
-        const start = this.canvas.model.getPort(this.startId);
-        const end = this.canvas.model.getPort(this.endId);
+        const start = this.canvas.model.ports.get(this.startId);
+        const end = this.canvas.model.ports.get(this.endId);
         if (start && end) {
-            const connection = this.canvas.model.addConnection(this.type, start, end, this.id);
+            const connection = this.canvas.model.connections.new(this.type, start, end, this.id);
             // reset our id in case it was automatically generated
             this.id = connection.id;
         }
@@ -1462,14 +1503,14 @@ class EditFieldAction {
         this.to = to;
     }
     undo() {
-        const field = this.canvas.model.getField(this.fieldId);
+        const field = this.canvas.model.fields.get(this.fieldId);
         if (field) {
             field.text = this.from;
             this.canvas.updateFieldsInView(this.fieldId);
         }
     }
     redo() {
-        const field = this.canvas.model.getField(this.fieldId);
+        const field = this.canvas.model.fields.get(this.fieldId);
         if (field) {
             field.text = this.to;
             this.canvas.updateFieldsInView(this.fieldId);
@@ -1488,7 +1529,7 @@ class UpdateValuesAction {
             return this.model.valueSet;
         }
         else {
-            return this.model.getElement(this.id)?.valueSet;
+            return (this.model.nodes.get(this.id) || this.model.connections.get(this.id))?.valueSet;
         }
     }
     undo() {
@@ -1557,30 +1598,30 @@ class RemoveAction {
     }
     undo() {
         for (const node of this.nodes) {
-            this.model.nodes.push(node);
+            this.model.nodes.add(node);
         }
         for (const section of this.sections) {
-            this.model.sections.push(section);
+            this.model.sections.add(section);
         }
         for (const port of this.ports) {
-            this.model.ports.push(port);
+            this.model.ports.add(port);
         }
         for (const connection of this.connections) {
-            this.model.connections.push(connection);
+            this.model.connections.add(connection);
         }
         for (const field of this.fields) {
-            this.model.fields.push(field);
+            this.model.fields.add(field);
         }
         for (const node of this.nodes) {
             if (node.label) {
-                const label = this.model.getField(node.label._id);
+                const label = this.model.fields.get(node.label._id);
                 if (label) {
                     node.label = label;
                 }
             }
             const ports = [];
             for (const nodePort of node.ports) {
-                const port = this.model.getPort(nodePort._id);
+                const port = this.model.ports.get(nodePort._id);
                 if (port) {
                     ports.push(port);
                 }
@@ -1588,7 +1629,7 @@ class RemoveAction {
             node.ports = ports;
             const sections = [];
             for (const nodeSection of node.sections) {
-                const section = this.model.getSection(nodeSection._id);
+                const section = this.model.sections.get(nodeSection._id);
                 if (section) {
                     sections.push(section);
                 }
@@ -1597,20 +1638,20 @@ class RemoveAction {
         }
         for (const section of this.sections) {
             if (section.node) {
-                const node = this.model.getNode(section.node._id);
+                const node = this.model.nodes.get(section.node._id);
                 if (node) {
                     section.node = node;
                 }
             }
             if (section.label) {
-                const label = this.model.getField(section.label._id);
+                const label = this.model.fields.get(section.label._id);
                 if (label) {
                     section.label = label;
                 }
             }
             const ports = [];
             for (const sectionPort of section.ports) {
-                const port = this.model.getPort(sectionPort._id);
+                const port = this.model.ports.get(sectionPort._id);
                 if (port) {
                     ports.push(port);
                 }
@@ -1619,20 +1660,21 @@ class RemoveAction {
         }
         for (const port of this.ports) {
             if (port.rootElement) {
-                const rootElement = this.model.getElement(port.rootElement._id);
+                const rootElement = this.model.nodes.get(port.rootElement._id) ||
+                    this.model.sections.get(port.rootElement._id);
                 if (rootElement) {
                     port.rootElement = rootElement;
                 }
             }
             if (port.label) {
-                const label = this.model.getField(port.label._id);
+                const label = this.model.fields.get(port.label._id);
                 if (label) {
                     port.label = label;
                 }
             }
             const outgoingConnections = [];
             for (const portOutgoingConnection of port.outgoingConnections) {
-                const connection = this.model.getConnection(portOutgoingConnection._id);
+                const connection = this.model.connections.get(portOutgoingConnection._id);
                 if (connection) {
                     outgoingConnections.push(connection);
                 }
@@ -1640,7 +1682,7 @@ class RemoveAction {
             port.outgoingConnections = outgoingConnections;
             const incomingConnections = [];
             for (const portIncomingConnection of port.incomingConnections) {
-                const connection = this.model.getConnection(portIncomingConnection._id);
+                const connection = this.model.connections.get(portIncomingConnection._id);
                 if (connection) {
                     incomingConnections.push(connection);
                 }
@@ -1649,13 +1691,13 @@ class RemoveAction {
         }
         for (const connection of this.connections) {
             if (connection.start) {
-                const start = this.model.getPort(connection.start._id);
+                const start = this.model.ports.get(connection.start._id);
                 if (start) {
                     connection.setStart(start);
                 }
             }
             if (connection.end) {
-                const end = this.model.getPort(connection.end._id);
+                const end = this.model.ports.get(connection.end._id);
                 if (end) {
                     connection.setEnd(end);
                 }
@@ -1663,7 +1705,9 @@ class RemoveAction {
         }
         for (const field of this.fields) {
             if (field.rootElement) {
-                const rootElement = this.model.getElement(field.rootElement._id);
+                const rootElement = this.model.nodes.get(field.rootElement._id) ||
+                    this.model.sections.get(field.rootElement._id) ||
+                    this.model.ports.get(field.rootElement._id);
                 if (rootElement) {
                     field.rootElement = rootElement;
                 }
@@ -1680,7 +1724,7 @@ class RemoveAction {
         this.fields = [];
         // make shallow copies of the elements with their relationships
         for (const nodeId of this.nodeIds) {
-            const node = this.model.getNode(nodeId);
+            const node = this.model.nodes.get(nodeId);
             if (node) {
                 const nodeCopy = clone(node);
                 if (nodeCopy.label) {
@@ -1692,7 +1736,7 @@ class RemoveAction {
             }
         }
         for (const sectionId of this.sectionIds) {
-            const section = this.model.getSection(sectionId);
+            const section = this.model.sections.get(sectionId);
             if (section) {
                 const sectionCopy = clone(section);
                 if (sectionCopy.label) {
@@ -1703,7 +1747,7 @@ class RemoveAction {
             }
         }
         for (const portId of this.portIds) {
-            const port = this.model.getPort(portId);
+            const port = this.model.ports.get(portId);
             if (port) {
                 const portCopy = clone(port);
                 if (portCopy.rootElement) {
@@ -1718,7 +1762,7 @@ class RemoveAction {
             }
         }
         for (const connectionId of this.connectionIds) {
-            const connection = this.model.getConnection(connectionId);
+            const connection = this.model.connections.get(connectionId);
             if (connection) {
                 const connectionCopy = clone(connection);
                 if (connectionCopy.start) {
@@ -1731,7 +1775,7 @@ class RemoveAction {
             }
         }
         for (const fieldId of this.fieldIds) {
-            const field = this.model.getField(fieldId);
+            const field = this.model.fields.get(fieldId);
             if (field) {
                 const fieldCopy = clone(field);
                 if (fieldCopy.rootElement) {
@@ -1742,34 +1786,19 @@ class RemoveAction {
         }
         // delete the elements
         for (const nodeId of this.nodeIds) {
-            const node = this.model.getNode(nodeId);
-            if (node) {
-                this.model.deleteNode(node);
-            }
+            this.model.nodes.remove(nodeId);
         }
         for (const sectionId of this.sectionIds) {
-            const section = this.model.getSection(sectionId);
-            if (section) {
-                this.model.deleteSection(section);
-            }
+            this.model.sections.remove(sectionId);
         }
         for (const portId of this.portIds) {
-            const port = this.model.getPort(portId);
-            if (port) {
-                this.model.deletePort(port);
-            }
+            this.model.ports.remove(portId);
         }
         for (const connectionId of this.connectionIds) {
-            const connection = this.model.getConnection(connectionId);
-            if (connection) {
-                this.model.deleteConnection(connection);
-            }
+            this.model.connections.remove(connectionId);
         }
         for (const fieldId of this.fieldIds) {
-            const field = this.model.getField(fieldId);
-            if (field) {
-                this.model.deleteField(field);
-            }
+            this.model.fields.remove(fieldId);
         }
     }
 }
@@ -1781,7 +1810,7 @@ const clone = (obj) => {
 };
 
 /**
- * Represents an object which exists as part of a particular diagram model and has a visual representation in a diagram canvas.
+ * Represents an object which exists as part of a specific diagram model and has a visual representation in a diagram canvas.
  * @see DiagramModel
  * @see DiagramCanvas
  */
@@ -1806,6 +1835,104 @@ class DiagramElement {
         return this.model.canvas?.selectCanvasView()?.select(`g#${this.id}`);
     }
 }
+/**
+ * Represents a collection of diagram entities of a type that exists as part of a diagram model.
+ * @see DiagramEntity
+ * @see DiagramModel
+ */
+class DiagramEntitySet {
+    constructor() {
+        /**
+         * The list of entities contained in this set.
+         */
+        this.entities = [];
+        /**
+         * A mapping of entity ids to their corresponding entity in this set for quickly fetching entities based on their id.
+         */
+        this.entityMap = {};
+    }
+    /**
+     * The number of entities of this set.
+     */
+    get length() {
+        return this.entities.length;
+    }
+    /**
+     * Gets all of the entities of this set.
+     * @returns An array containing all of the entities of this set.
+     */
+    all() {
+        return [...this.entities];
+    }
+    /**
+     * Adds an entity to this set if there are no entities with the same id. Has no effect if there already exists an entity with the same id as the given entity.
+     * For creating entities with relationships with other entities, the new() method should be used instead. The add() method adds an entity but doesn't take care of setting that entity's relationships with other entities.
+     * @param entity An entity to be added to this set.
+     */
+    add(entity) {
+        if (this.entityMap[entity.id] === undefined) {
+            this.entityMap[entity.id] = entity;
+            this.entities.push(entity);
+        }
+    }
+    /**
+     * Removes all the entities in this set.
+     */
+    clear() {
+        // remove each entity individually in case classes that extend this implement their own specific cleanup
+        while (this.entities.length > 0) {
+            this.remove(this.entities[0].id);
+        }
+    }
+    /**
+     * Checks if this set contains an entity with the given id.
+     * @param id An id.
+     * @returns `true` if this set contains an entity with the given id, `false` otherwise.
+     */
+    contains(id) {
+        return this.entityMap[id] !== undefined;
+    }
+    /**
+     * Gets all of the entities of this set filtered following given criteria.
+     * @returns An array containing the entities of this set that meet the given criteria.
+     */
+    filter() {
+        return this.all();
+    }
+    /**
+     * Gets an entity of this set matching specific criteria.
+     * @returns An entity of this set.
+     */
+    find() {
+        return this.entities.length > 0 ? this.entities[0] : undefined;
+    }
+    /**
+     * Gets an entity from this set.
+     * @param id An id.
+     * @returns An entity with the given id, or `undefined` if there are no entities with the given id.
+     */
+    get(id) {
+        return this.entityMap[id];
+    }
+    /**
+     * Attempts to find and remove an entity with the given id. Has no effect if there are no entities with the given id.
+     * @param id An id.
+     */
+    remove(id) {
+        const entity = this.get(id);
+        if (entity !== undefined) {
+            delete this.entityMap[id];
+            removeIfExists(this.entities, entity);
+        }
+    }
+    *[Symbol.iterator]() {
+        let counter = 0;
+        while (counter < this.entities.length) {
+            yield this.entities[counter];
+            ++counter;
+        }
+    }
+}
 
 class Property {
     constructor(name, type, defaultValue, basic, editable, rootAttribute) {
@@ -2130,13 +2257,13 @@ class DiagramConnection extends DiagramElement {
     }
     constructor(model, type, start, end, id) {
         let uniqueId;
-        if (id !== undefined && model.getConnection(id) === undefined) {
+        if (id !== undefined && model.connections.get(id) === undefined) {
             uniqueId = id;
         }
         else {
             do {
                 uniqueId = `diagram-connection-${++idTicker$4}`;
-            } while (model.getConnection(uniqueId) !== undefined);
+            } while (model.connections.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
         this.startCoords = [0, 0];
@@ -2200,9 +2327,52 @@ class DiagramConnection extends DiagramElement {
         }
     }
 }
+class DiagramConnectionSet extends DiagramEntitySet {
+    constructor(model) {
+        super();
+        this.types = new DiagramEntitySet();
+        this.model = model;
+    }
+    new(type, start, end, id) {
+        const connection = new DiagramConnection(this.model, type, start, end, id);
+        super.add(connection);
+        connection.updateInView();
+        return connection;
+    }
+    remove(id) {
+        const connection = this.get(id);
+        if (connection) {
+            // remove from ports
+            removeIfExists(connection.start?.outgoingConnections || [], connection);
+            removeIfExists(connection.end?.incomingConnections || [], connection);
+            // remove from set of connections
+            super.remove(id);
+            // remove from canvas
+            connection.updateInView();
+        }
+    }
+    filter(type, threshold) {
+        return this.entities.filter((e) => (type ? e.type.id === type : true) &&
+            (threshold
+                ? (e.start?.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >=
+                    threshold &&
+                    (e.end?.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >=
+                        threshold
+                : true));
+    }
+    find(type, threshold) {
+        return this.entities.find((e) => (type ? e.type.id === type : true) &&
+            (threshold
+                ? (e.start?.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >=
+                    threshold &&
+                    (e.end?.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >=
+                        threshold
+                : true));
+    }
+}
 
 let idTicker$3 = 0;
-const DIAGRAM_LOOK_DEFAULTS = {
+const DIAGRAM_SECTION_LOOK_DEFAULTS = {
     lookType: 'shaped-look',
     shape: ClosedShape.Rectangle,
     color: '#FFFFFF',
@@ -2210,46 +2380,17 @@ const DIAGRAM_LOOK_DEFAULTS = {
     selectedColor: '#FFFFFF',
     selectedBorderColor: '#000000'
 };
-const DIAGRAM_NODE_TYPE_DEFAULTS = {
-    name: '',
-    defaultWidth: 0,
-    defaultHeight: 0,
+const DIAGRAM_SECTION_DEFAULTS = {
+    sectionsX: 1,
+    sectionsY: 1,
     minWidth: 0,
     minHeight: 0,
-    resizableX: false,
-    resizableY: false,
+    margin: 0,
     label: null,
     ports: [],
-    sections: null,
-    look: DIAGRAM_LOOK_DEFAULTS,
-    isUnique: false,
-    priority: 0,
-    properties: []
+    look: DIAGRAM_SECTION_LOOK_DEFAULTS
 };
-class DiagramNodeType {
-    constructor(options) {
-        const values = {
-            ...DIAGRAM_NODE_TYPE_DEFAULTS,
-            ...options
-        };
-        this.id = values.id;
-        this.name = values.name;
-        this.defaultWidth = values.defaultWidth;
-        this.defaultHeight = values.defaultHeight;
-        this.minWidth = values.minWidth;
-        this.minHeight = values.minHeight;
-        this.resizableX = values.resizableX;
-        this.resizableY = values.resizableY;
-        this.label = values.label;
-        this.ports = values.ports;
-        this.sections = values.sections;
-        this.look = values.look;
-        this.isUnique = values.isUnique;
-        this.priority = values.priority;
-        this.propertySet = new PropertySet(options?.properties || []);
-    }
-}
-class DiagramNode extends DiagramElement {
+class DiagramSection extends DiagramElement {
     get name() {
         return this.label?.text || '';
     }
@@ -2259,29 +2400,26 @@ class DiagramNode extends DiagramElement {
             this.label.updateInView();
         }
     }
-    constructor(model, type, coords = [0, 0], id) {
+    constructor(model, node, coords, width, height, id) {
         let uniqueId;
-        if (id !== undefined && model.getNode(id) === undefined) {
+        if (id !== undefined && model.sections.get(id) === undefined) {
             uniqueId = id;
         }
         else {
             do {
-                uniqueId = `diagram-node-${++idTicker$3}`;
-            } while (model.getNode(uniqueId) !== undefined);
+                uniqueId = `diagram-section-${++idTicker$3}`;
+            } while (model.sections.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
-        this.sections = [];
         this.ports = [];
-        this.type = type;
-        this.valueSet = new ValueSet(type.propertySet, this);
-        this.originalData = {};
+        this.node = node;
         this.coords = coords;
-        this.width = type.defaultWidth;
-        this.height = type.defaultHeight;
+        this.width = width;
+        this.height = height;
     }
     updateInView() {
         if (this.model.canvas && this.model.renderToCanvas) {
-            this.model.canvas.updateNodesInView(this.id);
+            this.model.canvas.updateSectionsInView(this.id);
         }
     }
     getClosestPortToPoint(coords) {
@@ -2328,36 +2466,12 @@ class DiagramNode extends DiagramElement {
         }
         return result;
     }
-    getAdjacentNodes() {
-        const result = [];
-        for (const port of this.ports) {
-            for (const incomingConnection of port.incomingConnections) {
-                const otherNode = incomingConnection.start?.getNode();
-                if (otherNode) {
-                    result.push(otherNode);
-                }
-            }
-            for (const outgoingConnection of port.outgoingConnections) {
-                const otherNode = outgoingConnection.end?.getNode();
-                if (otherNode) {
-                    result.push(otherNode);
-                }
-            }
-        }
-        return result;
-    }
     move(coords) {
         const coordDifferences = [
             coords[0] - this.coords[0],
             coords[1] - this.coords[1]
         ];
         this.coords = coords;
-        for (const section of this.sections) {
-            section.move([
-                section.coords[0] + coordDifferences[0],
-                section.coords[1] + coordDifferences[1]
-            ]);
-        }
         for (const port of this.ports) {
             port.move([
                 port.coords[0] + coordDifferences[0],
@@ -2382,29 +2496,49 @@ class DiagramNode extends DiagramElement {
             case Side.Left:
                 newCoordsX = [oldCoordsX[0] - distance, oldCoordsX[1]];
                 newCoordsY = [oldCoordsY[0], oldCoordsY[1]];
-                if (newCoordsX[1] - newCoordsX[0] < this.type.minWidth) {
-                    newCoordsX[0] = newCoordsX[1] - this.type.minWidth;
+                if (newCoordsX[1] - newCoordsX[0] <
+                    (this.node?.type?.sections?.minWidth ||
+                        DIAGRAM_SECTION_DEFAULTS.minWidth)) {
+                    newCoordsX[0] =
+                        newCoordsX[1] -
+                            (this.node?.type?.sections?.minWidth ||
+                                DIAGRAM_SECTION_DEFAULTS.minWidth);
                 }
                 break;
             case Side.Top:
                 newCoordsX = [oldCoordsX[0], oldCoordsX[1]];
                 newCoordsY = [oldCoordsY[0] - distance, oldCoordsY[1]];
-                if (newCoordsY[1] - newCoordsY[0] < this.type.minHeight) {
-                    newCoordsY[0] = newCoordsY[1] - this.type.minHeight;
+                if (newCoordsY[1] - newCoordsY[0] <
+                    (this.node?.type?.sections?.minHeight ||
+                        DIAGRAM_SECTION_DEFAULTS.minHeight)) {
+                    newCoordsY[0] =
+                        newCoordsY[1] -
+                            (this.node?.type?.sections?.minHeight ||
+                                DIAGRAM_SECTION_DEFAULTS.minHeight);
                 }
                 break;
             case Side.Right:
                 newCoordsX = [oldCoordsX[0], oldCoordsX[1] + distance];
                 newCoordsY = [oldCoordsY[0], oldCoordsY[1]];
-                if (newCoordsX[1] - newCoordsX[0] < this.type.minWidth) {
-                    newCoordsX[1] = newCoordsX[0] + this.type.minWidth;
+                if (newCoordsX[1] - newCoordsX[0] <
+                    (this.node?.type?.sections?.minWidth ||
+                        DIAGRAM_SECTION_DEFAULTS.minWidth)) {
+                    newCoordsX[1] =
+                        newCoordsX[0] +
+                            (this.node?.type?.sections?.minWidth ||
+                                DIAGRAM_SECTION_DEFAULTS.minWidth);
                 }
                 break;
             case Side.Bottom:
                 newCoordsX = [oldCoordsX[0], oldCoordsX[1]];
                 newCoordsY = [oldCoordsY[0], oldCoordsY[1] + distance];
-                if (newCoordsY[1] - newCoordsY[0] < this.type.minHeight) {
-                    newCoordsY[1] = newCoordsY[0] + this.type.minHeight;
+                if (newCoordsY[1] - newCoordsY[0] <
+                    (this.node?.type?.sections?.minHeight ||
+                        DIAGRAM_SECTION_DEFAULTS.minHeight)) {
+                    newCoordsY[1] =
+                        newCoordsY[0] +
+                            (this.node?.type?.sections?.minHeight ||
+                                DIAGRAM_SECTION_DEFAULTS.minHeight);
                 }
                 break;
         }
@@ -2416,74 +2550,181 @@ class DiagramNode extends DiagramElement {
         }
         if (this.label) {
             this.label.coords = [
-                this.coords[0] + (this.type.label?.margin || 0),
-                this.coords[1] + (this.type.label?.margin || 0)
+                this.coords[0] + (this.node?.type?.sections?.label?.margin || 0),
+                this.coords[1] + (this.node?.type?.sections?.label?.margin || 0)
             ];
-            (this.label.width = this.width - (this.type.label?.margin || 0) * 2),
-                (this.label.height = this.height - (this.type.label?.margin || 0) * 2);
+            (this.label.width =
+                this.width - (this.node?.type?.sections?.label?.margin || 0) * 2),
+                (this.label.height =
+                    this.height - (this.node?.type?.sections?.label?.margin || 0) * 2);
         }
-        // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
         this.updateInView();
     }
-    stretchSections(direction, distance, point) {
-        switch (direction) {
-            case Side.Bottom:
-                for (const section of this.sections) {
-                    if (section.coords[1] === point[1]) {
-                        section.stretch(direction, distance);
-                    }
-                    else if (section.coords[1] > point[1]) {
-                        section.move([section.coords[0], section.coords[1] + distance]);
+}
+class DiagramSectionSet extends DiagramEntitySet {
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    new(node, coords, width, height, id, portIds, portLabelIds) {
+        const section = new DiagramSection(this.model, node, coords, width, height, id);
+        super.add(section);
+        section.updateInView();
+        // add this section to its node
+        node.sections.push(section);
+        node.updateInView();
+        // add section ports
+        if (node.type.sections?.ports && node.type.sections.ports.length > 0) {
+            for (let i = 0; i < node.type.sections.ports.length; ++i) {
+                const portConfig = node.type.sections.ports[i];
+                const port = this.model.ports.new(section, [
+                    section.coords[0] + portConfig.coords[0],
+                    section.coords[1] + portConfig.coords[1]
+                ], portConfig.direction, portIds && portIds.length > i ? portIds[i] : undefined);
+                if (portConfig.label) {
+                    const labelConfiguration = {
+                        ...DIAGRAM_FIELD_DEFAULTS,
+                        ...portConfig.label
+                    };
+                    let labelCoords;
+                    switch (port.direction) {
+                        case Side.Top:
+                        case Side.Left:
+                            labelCoords = [
+                                port.coords[0] - labelConfiguration.fontSize,
+                                port.coords[1] - labelConfiguration.fontSize
+                            ];
+                            break;
+                        case Side.Bottom:
+                            labelCoords = [
+                                port.coords[0] - labelConfiguration.fontSize,
+                                port.coords[1] + labelConfiguration.fontSize
+                            ];
+                            break;
+                        case Side.Right:
+                            labelCoords = [
+                                port.coords[0] + labelConfiguration.fontSize,
+                                port.coords[1] - labelConfiguration.fontSize
+                            ];
+                            break;
+                        default:
+                            labelCoords = port.coords;
                     }
+                    this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, portLabelIds && portLabelIds.length > i
+                        ? portLabelIds[i]
+                        : undefined);
                 }
-                break;
-            case Side.Right:
-                for (const section of this.sections) {
-                    if (section.coords[0] === point[0]) {
-                        section.stretch(direction, distance);
-                    }
-                    else if (section.coords[0] > point[0]) {
-                        section.move([section.coords[0] + distance, section.coords[1]]);
-                    }
-                }
-                break;
-            case Side.Top:
-                for (const section of this.sections) {
-                    if (section.coords[1] === point[1]) {
-                        section.stretch(direction, distance);
-                    }
-                    else if (section.coords[1] < point[1]) {
-                        section.move([section.coords[0], section.coords[1] - distance]);
-                    }
+            }
+        }
+        // add section label
+        if (node.type.sections?.label) {
+            const labelConfiguration = {
+                ...DIAGRAM_FIELD_DEFAULTS,
+                ...node.type.sections.label
+            };
+            this.model.fields.new(section, [
+                section.coords[0] + labelConfiguration.margin,
+                section.coords[1] + labelConfiguration.margin
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - labelConfiguration.margin * 2, section.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, id);
+        }
+        return section;
+    }
+    remove(id) {
+        const section = this.get(id);
+        if (section) {
+            // remove all ports
+            while (section.ports.length > 0) {
+                this.model.ports.remove(section.ports[0].id);
+            }
+            // remove label
+            if (section.label) {
+                this.model.fields.remove(section.label.id);
+            }
+            // remove from root element
+            if (section.node) {
+                removeIfExists(section.node.sections, section);
+            }
+            // remove from set of sections
+            super.remove(id);
+            // remove from canvas
+            section.updateInView();
+        }
+    }
+    filter(threshold) {
+        return this.entities.filter((e) => {
+            if (threshold) {
+                const node = e.node;
+                if (node) {
+                    return node.type.priority >= threshold;
                 }
-                break;
-            case Side.Left:
-                for (const section of this.sections) {
-                    if (section.coords[0] === point[0]) {
-                        section.stretch(direction, distance);
-                    }
-                    else if (section.coords[0] < point[0]) {
-                        section.move([section.coords[0] - distance, section.coords[1]]);
-                    }
+                return false;
+            }
+            return true;
+        });
+    }
+    find(threshold) {
+        return this.entities.find((e) => {
+            if (threshold) {
+                const node = e.node;
+                if (node) {
+                    return node.type.priority >= threshold;
                 }
-                break;
-        }
-        this.stretch(direction, distance);
+                return false;
+            }
+            return true;
+        });
     }
 }
 
 let idTicker$2 = 0;
-const DIAGRAM_SECTION_DEFAULTS = {
-    sectionsX: 1,
-    sectionsY: 1,
+const DIAGRAM_NODE_LOOK_DEFAULTS = {
+    lookType: 'shaped-look',
+    shape: ClosedShape.Rectangle,
+    color: '#FFFFFF',
+    borderColor: '#000000',
+    selectedColor: '#FFFFFF',
+    selectedBorderColor: '#000000'
+};
+const DIAGRAM_NODE_TYPE_DEFAULTS = {
+    name: '',
+    defaultWidth: 0,
+    defaultHeight: 0,
     minWidth: 0,
     minHeight: 0,
-    margin: 0,
+    resizableX: false,
+    resizableY: false,
     label: null,
     ports: [],
-    look: DIAGRAM_LOOK_DEFAULTS
+    sections: null,
+    look: DIAGRAM_NODE_LOOK_DEFAULTS,
+    isUnique: false,
+    priority: 0,
+    properties: []
 };
-class DiagramSection extends DiagramElement {
+class DiagramNodeType {
+    constructor(options) {
+        const values = {
+            ...DIAGRAM_NODE_TYPE_DEFAULTS,
+            ...options
+        };
+        this.id = values.id;
+        this.name = values.name;
+        this.defaultWidth = values.defaultWidth;
+        this.defaultHeight = values.defaultHeight;
+        this.minWidth = values.minWidth;
+        this.minHeight = values.minHeight;
+        this.resizableX = values.resizableX;
+        this.resizableY = values.resizableY;
+        this.label = values.label;
+        this.ports = values.ports;
+        this.sections = values.sections;
+        this.look = values.look;
+        this.isUnique = values.isUnique;
+        this.priority = values.priority;
+        this.propertySet = new PropertySet(options?.properties || []);
+    }
+}
+class DiagramNode extends DiagramElement {
     get name() {
         return this.label?.text || '';
     }
@@ -2493,26 +2734,29 @@ class DiagramSection extends DiagramElement {
             this.label.updateInView();
         }
     }
-    constructor(model, node, coords, width, height, id) {
+    constructor(model, type, coords = [0, 0], id) {
         let uniqueId;
-        if (id !== undefined && model.getNode(id) === undefined) {
+        if (id !== undefined && model.nodes.get(id) === undefined) {
             uniqueId = id;
         }
         else {
             do {
-                uniqueId = `diagram-section-${++idTicker$2}`;
-            } while (model.getNode(uniqueId) !== undefined);
+                uniqueId = `diagram-node-${++idTicker$2}`;
+            } while (model.nodes.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
+        this.sections = [];
         this.ports = [];
-        this.node = node;
+        this.type = type;
+        this.valueSet = new ValueSet(type.propertySet, this);
+        this.originalData = {};
         this.coords = coords;
-        this.width = width;
-        this.height = height;
+        this.width = type.defaultWidth;
+        this.height = type.defaultHeight;
     }
     updateInView() {
         if (this.model.canvas && this.model.renderToCanvas) {
-            this.model.canvas.updateSectionsInView(this.id);
+            this.model.canvas.updateNodesInView(this.id);
         }
     }
     getClosestPortToPoint(coords) {
@@ -2559,12 +2803,36 @@ class DiagramSection extends DiagramElement {
         }
         return result;
     }
+    getAdjacentNodes() {
+        const result = [];
+        for (const port of this.ports) {
+            for (const incomingConnection of port.incomingConnections) {
+                const otherNode = incomingConnection.start?.getNode();
+                if (otherNode) {
+                    result.push(otherNode);
+                }
+            }
+            for (const outgoingConnection of port.outgoingConnections) {
+                const otherNode = outgoingConnection.end?.getNode();
+                if (otherNode) {
+                    result.push(otherNode);
+                }
+            }
+        }
+        return result;
+    }
     move(coords) {
         const coordDifferences = [
             coords[0] - this.coords[0],
             coords[1] - this.coords[1]
         ];
         this.coords = coords;
+        for (const section of this.sections) {
+            section.move([
+                section.coords[0] + coordDifferences[0],
+                section.coords[1] + coordDifferences[1]
+            ]);
+        }
         for (const port of this.ports) {
             port.move([
                 port.coords[0] + coordDifferences[0],
@@ -2589,49 +2857,29 @@ class DiagramSection extends DiagramElement {
             case Side.Left:
                 newCoordsX = [oldCoordsX[0] - distance, oldCoordsX[1]];
                 newCoordsY = [oldCoordsY[0], oldCoordsY[1]];
-                if (newCoordsX[1] - newCoordsX[0] <
-                    (this.node?.type?.sections?.minWidth ||
-                        DIAGRAM_SECTION_DEFAULTS.minWidth)) {
-                    newCoordsX[0] =
-                        newCoordsX[1] -
-                            (this.node?.type?.sections?.minWidth ||
-                                DIAGRAM_SECTION_DEFAULTS.minWidth);
+                if (newCoordsX[1] - newCoordsX[0] < this.type.minWidth) {
+                    newCoordsX[0] = newCoordsX[1] - this.type.minWidth;
                 }
                 break;
             case Side.Top:
                 newCoordsX = [oldCoordsX[0], oldCoordsX[1]];
                 newCoordsY = [oldCoordsY[0] - distance, oldCoordsY[1]];
-                if (newCoordsY[1] - newCoordsY[0] <
-                    (this.node?.type?.sections?.minHeight ||
-                        DIAGRAM_SECTION_DEFAULTS.minHeight)) {
-                    newCoordsY[0] =
-                        newCoordsY[1] -
-                            (this.node?.type?.sections?.minHeight ||
-                                DIAGRAM_SECTION_DEFAULTS.minHeight);
+                if (newCoordsY[1] - newCoordsY[0] < this.type.minHeight) {
+                    newCoordsY[0] = newCoordsY[1] - this.type.minHeight;
                 }
                 break;
             case Side.Right:
                 newCoordsX = [oldCoordsX[0], oldCoordsX[1] + distance];
                 newCoordsY = [oldCoordsY[0], oldCoordsY[1]];
-                if (newCoordsX[1] - newCoordsX[0] <
-                    (this.node?.type?.sections?.minWidth ||
-                        DIAGRAM_SECTION_DEFAULTS.minWidth)) {
-                    newCoordsX[1] =
-                        newCoordsX[0] +
-                            (this.node?.type?.sections?.minWidth ||
-                                DIAGRAM_SECTION_DEFAULTS.minWidth);
+                if (newCoordsX[1] - newCoordsX[0] < this.type.minWidth) {
+                    newCoordsX[1] = newCoordsX[0] + this.type.minWidth;
                 }
                 break;
             case Side.Bottom:
                 newCoordsX = [oldCoordsX[0], oldCoordsX[1]];
                 newCoordsY = [oldCoordsY[0], oldCoordsY[1] + distance];
-                if (newCoordsY[1] - newCoordsY[0] <
-                    (this.node?.type?.sections?.minHeight ||
-                        DIAGRAM_SECTION_DEFAULTS.minHeight)) {
-                    newCoordsY[1] =
-                        newCoordsY[0] +
-                            (this.node?.type?.sections?.minHeight ||
-                                DIAGRAM_SECTION_DEFAULTS.minHeight);
+                if (newCoordsY[1] - newCoordsY[0] < this.type.minHeight) {
+                    newCoordsY[1] = newCoordsY[0] + this.type.minHeight;
                 }
                 break;
         }
@@ -2643,261 +2891,71 @@ class DiagramSection extends DiagramElement {
         }
         if (this.label) {
             this.label.coords = [
-                this.coords[0] + (this.node?.type?.sections?.label?.margin || 0),
-                this.coords[1] + (this.node?.type?.sections?.label?.margin || 0)
+                this.coords[0] + (this.type.label?.margin || 0),
+                this.coords[1] + (this.type.label?.margin || 0)
             ];
-            (this.label.width =
-                this.width - (this.node?.type?.sections?.label?.margin || 0) * 2),
-                (this.label.height =
-                    this.height - (this.node?.type?.sections?.label?.margin || 0) * 2);
+            (this.label.width = this.width - (this.type.label?.margin || 0) * 2),
+                (this.label.height = this.height - (this.type.label?.margin || 0) * 2);
         }
+        // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
         this.updateInView();
     }
-}
-
-let idTicker$1 = 0;
-const DIAGRAM_PORT_DEFAULTS = {
-    radius: 12,
-    highlightedColor: 'cyan',
-    selectedColor: 'violet'
-};
-class DiagramPort extends DiagramElement {
-    constructor(model, rootElement, coords, direction, id) {
-        let uniqueId;
-        if (id !== undefined && model.getPort(id) === undefined) {
-            uniqueId = id;
-        }
-        else {
-            do {
-                uniqueId = `diagram-port-${++idTicker$1}`;
-            } while (model.getPort(uniqueId) !== undefined);
+    stretchSections(direction, distance, point) {
+        switch (direction) {
+            case Side.Bottom:
+                for (const section of this.sections) {
+                    if (section.coords[1] === point[1]) {
+                        section.stretch(direction, distance);
+                    }
+                    else if (section.coords[1] > point[1]) {
+                        section.move([section.coords[0], section.coords[1] + distance]);
+                    }
+                }
+                break;
+            case Side.Right:
+                for (const section of this.sections) {
+                    if (section.coords[0] === point[0]) {
+                        section.stretch(direction, distance);
+                    }
+                    else if (section.coords[0] > point[0]) {
+                        section.move([section.coords[0] + distance, section.coords[1]]);
+                    }
+                }
+                break;
+            case Side.Top:
+                for (const section of this.sections) {
+                    if (section.coords[1] === point[1]) {
+                        section.stretch(direction, distance);
+                    }
+                    else if (section.coords[1] < point[1]) {
+                        section.move([section.coords[0], section.coords[1] - distance]);
+                    }
+                }
+                break;
+            case Side.Left:
+                for (const section of this.sections) {
+                    if (section.coords[0] === point[0]) {
+                        section.stretch(direction, distance);
+                    }
+                    else if (section.coords[0] < point[0]) {
+                        section.move([section.coords[0] - distance, section.coords[1]]);
+                    }
+                }
+                break;
         }
-        super(model, uniqueId);
-        this.outgoingConnections = [];
-        this.incomingConnections = [];
-        this.rootElement = rootElement;
-        this.coords = coords;
-        this.direction = direction;
+        this.stretch(direction, distance);
     }
-    updateInView() {
-        if (this.model.canvas && this.model.renderToCanvas) {
-            this.model.canvas.updatePortsInView(this.id);
-        }
+}
+class DiagramNodeSet extends DiagramEntitySet {
+    constructor(model) {
+        super();
+        this.types = new DiagramEntitySet();
+        this.model = model;
     }
-    startConnection(connection) {
-        this.outgoingConnections.push(connection);
-    }
-    finishConnection(connection) {
-        this.incomingConnections.push(connection);
-    }
-    getNode() {
-        if (this.rootElement instanceof DiagramNode) {
-            return this.rootElement;
-        }
-        else if (this.rootElement instanceof DiagramSection) {
-            return this.rootElement.node;
-        }
-        return undefined;
-    }
-    move(coords) {
-        const coordDifferences = [
-            coords[0] - this.coords[0],
-            coords[1] - this.coords[1]
-        ];
-        this.coords = coords;
-        for (const connection of this.outgoingConnections) {
-            connection.setStart(this);
-        }
-        for (const connection of this.incomingConnections) {
-            connection.setEnd(this);
-        }
-        if (this.label) {
-            this.label.move([
-                this.label.coords[0] + coordDifferences[0],
-                this.label.coords[1] + coordDifferences[1]
-            ]);
-        }
-        this.updateInView();
-    }
-    distanceTo(coords) {
-        return distanceBetweenPoints(this.coords, coords);
-    }
-}
-
-let idTicker = 0;
-const DIAGRAM_FIELD_DEFAULTS = {
-    editable: true,
-    fontSize: 0,
-    margin: 0,
-    padding: 0,
-    fontFamily: null,
-    color: '#000000',
-    selectedColor: '#000000',
-    horizontalAlign: HorizontalAlign.Center,
-    verticalAlign: VerticalAlign.Center
-};
-class DiagramField extends DiagramElement {
-    get text() {
-        return this._text;
-    }
-    set text(value) {
-        if (value.trim() === '') {
-            value = this.defaultText;
-        }
-        this._text = value;
-        this.select()?.text(value);
-    }
-    constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, id) {
-        let uniqueId;
-        if (id !== undefined && model.getField(id) === undefined) {
-            uniqueId = id;
-        }
-        else {
-            do {
-                uniqueId = `diagram-field-${++idTicker}`;
-            } while (model.getField(uniqueId) !== undefined);
-        }
-        super(model, uniqueId);
-        this.rootElement = rootElement;
-        this.coords = coords;
-        this.width = width;
-        this.height = height;
-        this.fontSize = fontSize;
-        this.fontFamily = fontFamily;
-        this.color = color;
-        this.selectedColor = selectedColor;
-        this.horizontalAlign = horizontalAlign;
-        this.verticalAlign = verticalAlign;
-        this.defaultText = text;
-        this._text = text;
-        this.editable = editable;
-    }
-    updateInView() {
-        if (this.model.canvas && this.model.renderToCanvas) {
-            this.model.canvas.updateFieldsInView(this.id);
-        }
-    }
-    move(coords) {
-        this.coords = coords;
-        this.updateInView();
-    }
-    getClosestNode() {
-        if (this.rootElement instanceof DiagramNode) {
-            return this.rootElement;
-        }
-        else if (this.rootElement instanceof DiagramPort) {
-            return this.rootElement.getNode();
-        }
-        else if (this.rootElement instanceof DiagramConnection) {
-            return (this.rootElement.start?.getNode() || this.rootElement.end?.getNode());
-        }
-        return undefined;
-    }
-}
-
-class DiagramModel {
-    // canvas attribute accesors
-    // added so that the valueSet can access canvas attributes and change them
-    get layoutFormat() {
-        return this.canvas?.layoutFormat;
-    }
-    set layoutFormat(value) {
-        if (this.canvas) {
-            this.canvas.layoutFormat = value;
-        }
-    }
-    constructor(canvas, id, name, description, type, properties = []) {
-        this.renderToCanvas = true;
-        this.nodeTypes = [];
-        this.connectionTypes = [];
-        this.nodes = [];
-        this.sections = [];
-        this.ports = [];
-        this.connections = [];
-        this.fields = [];
-        this.canvas = canvas;
-        this.id = id;
-        this.name = name;
-        this.description = description;
-        this.type = type;
-        this.createdAt = new Date();
-        this.updatedAt = new Date();
-        this.valueSet = new ValueSet(new PropertySet(properties), this);
-    }
-    enableRenderToCanvas() {
-        this.renderToCanvas = true;
-        this.canvas?.updateModelInView();
-    }
-    disableRenderToCanvas() {
-        this.renderToCanvas = false;
-    }
-    /**
-     * Deletes everything in this diagram.
-     */
-    clear() {
-        this.id = undefined;
-        this.name = '';
-        this.description = undefined;
-        this.nodes = [];
-        this.ports = [];
-        this.connections = [];
-        this.fields = [];
-        this.createdAt = new Date();
-        this.updatedAt = new Date();
-        this.valueSet.resetValues();
-        if (this.renderToCanvas) {
-            this.canvas?.cancelAllUserActions();
-            this.canvas?.updateModelInView();
-        }
-    }
-    getElement(id) {
-        return (this.getNode(id) ||
-            this.getSection(id) ||
-            this.getPort(id) ||
-            this.getConnection(id) ||
-            this.getField(id));
-    }
-    deleteElement(element) {
-        if (element instanceof DiagramNode) {
-            this.deleteNode(element);
-        }
-        else if (element instanceof DiagramSection) {
-            this.deleteSection(element);
-        }
-        else if (element instanceof DiagramPort) {
-            this.deletePort(element);
-        }
-        else if (element instanceof DiagramConnection) {
-            this.deleteConnection(element);
-        }
-        else if (element instanceof DiagramField) {
-            this.deleteField(element);
-        }
-    }
-    getNodeType(name) {
-        return this.nodeTypes.find((e) => e.id === name);
-    }
-    getConnectionType(name) {
-        return this.connectionTypes.find((e) => e.id === name);
-    }
-    getNode(id) {
-        return this.nodes.find((e) => e.id === id);
-    }
-    getNodes(threshold) {
-        if (threshold === undefined) {
-            return this.nodes;
-        }
-        else {
-            return this.nodes.filter((e) => e.type.priority >= threshold);
-        }
-    }
-    getNodesOfType(type) {
-        return this.nodes.filter((e) => e.type.id === type);
-    }
-    addNode(type, coords, id, sectionIds, sectionPortIds, sectionPortLabelIds, portIds, portLabelIds, labelId) {
-        const newNode = new DiagramNode(this, type, coords, id);
-        this.nodes.push(newNode);
-        newNode.updateInView();
+    new(type, coords, id, sectionIds, sectionPortIds, sectionPortLabelIds, portIds, portLabelIds, labelId) {
+        const node = new DiagramNode(this.model, type, coords, id);
+        super.add(node);
+        node.updateInView();
         // add node sections
         if (type.sections !== null &&
             (type.sections.sectionsX || 0) > 0 &&
@@ -2909,16 +2967,16 @@ class DiagramModel {
             const sectionsX = sectionConfiguration.sectionsX;
             const sectionsY = sectionConfiguration.sectionsY;
             const margin = sectionConfiguration.margin;
-            const widthPerSection = (newNode.width - margin * (sectionsX + 1)) / sectionsX;
-            const heightPerSection = (newNode.height - margin * (sectionsY + 1)) / sectionsY;
+            const widthPerSection = (node.width - margin * (sectionsX + 1)) / sectionsX;
+            const heightPerSection = (node.height - margin * (sectionsY + 1)) / sectionsY;
             let sectionCount = 0;
             for (let j = 0; j < sectionsY; ++j) {
                 for (let i = 0; i < sectionsX; ++i) {
                     const coords = [
-                        newNode.coords[0] + margin + i * (widthPerSection + margin),
-                        newNode.coords[1] + margin + j * (heightPerSection + margin)
+                        node.coords[0] + margin + i * (widthPerSection + margin),
+                        node.coords[1] + margin + j * (heightPerSection + margin)
                     ];
-                    this.addSection(newNode, coords, widthPerSection, heightPerSection, sectionIds && sectionIds.length > sectionCount
+                    this.model.sections.new(node, coords, widthPerSection, heightPerSection, sectionIds && sectionIds.length > sectionCount
                         ? sectionIds[sectionCount]
                         : undefined, sectionPortIds && sectionPortIds.length > sectionCount
                         ? sectionPortIds[sectionCount]
@@ -2933,9 +2991,9 @@ class DiagramModel {
         if (type.ports.length > 0) {
             for (let i = 0; i < type.ports.length; ++i) {
                 const portConfig = type.ports[i];
-                const newPort = this.addPort(newNode, [
-                    newNode.coords[0] + portConfig.coords[0],
-                    newNode.coords[1] + portConfig.coords[1]
+                const port = this.model.ports.new(node, [
+                    node.coords[0] + portConfig.coords[0],
+                    node.coords[1] + portConfig.coords[1]
                 ], portConfig.direction, portIds && portIds.length > i ? portIds[i] : undefined);
                 if (portConfig.label) {
                     const labelConfiguration = {
@@ -2943,33 +3001,32 @@ class DiagramModel {
                         ...portConfig.label
                     };
                     let labelCoords;
-                    switch (newPort.direction) {
+                    switch (port.direction) {
                         case Side.Top:
                         case Side.Left:
                             labelCoords = [
-                                newPort.coords[0] - labelConfiguration.fontSize,
-                                newPort.coords[1] - labelConfiguration.fontSize
+                                port.coords[0] - labelConfiguration.fontSize,
+                                port.coords[1] - labelConfiguration.fontSize
                             ];
                             break;
                         case Side.Bottom:
                             labelCoords = [
-                                newPort.coords[0] - labelConfiguration.fontSize,
-                                newPort.coords[1] + labelConfiguration.fontSize
+                                port.coords[0] - labelConfiguration.fontSize,
+                                port.coords[1] + labelConfiguration.fontSize
                             ];
                             break;
                         case Side.Right:
                             labelCoords = [
-                                newPort.coords[0] + labelConfiguration.fontSize,
-                                newPort.coords[1] - labelConfiguration.fontSize
+                                port.coords[0] + labelConfiguration.fontSize,
+                                port.coords[1] - labelConfiguration.fontSize
                             ];
                             break;
                         default:
-                            labelCoords = newPort.coords;
+                            labelCoords = port.coords;
                     }
-                    const newField = this.addField(newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, portLabelIds && portLabelIds.length > i
+                    this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, portLabelIds && portLabelIds.length > i
                         ? portLabelIds[i]
                         : undefined);
-                    newPort.label = newField;
                 }
             }
         }
@@ -2979,242 +3036,353 @@ class DiagramModel {
                 ...DIAGRAM_FIELD_DEFAULTS,
                 ...type.label
             };
-            const newField = this.addField(newNode, [
-                newNode.coords[0] + labelConfiguration.margin,
-                newNode.coords[1] + labelConfiguration.margin
-            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, newNode.width - labelConfiguration.margin * 2, newNode.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelId);
-            newNode.label = newField;
+            this.model.fields.new(node, [
+                node.coords[0] + labelConfiguration.margin,
+                node.coords[1] + labelConfiguration.margin
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - labelConfiguration.margin * 2, node.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelId);
         }
-        return newNode;
+        return node;
     }
-    deleteNode(node) {
-        // remove all ports
-        while (node.sections.length > 0) {
-            this.deleteSection(node.sections[0]);
+    remove(id) {
+        const node = this.get(id);
+        if (node) {
+            // remove all sections
+            while (node.sections.length > 0) {
+                this.model.sections.remove(node.sections[0].id);
+            }
+            // remove all ports
+            while (node.ports.length > 0) {
+                this.model.ports.remove(node.ports[0].id);
+            }
+            // remove label
+            if (node.label) {
+                this.model.fields.remove(node.label.id);
+            }
+            // remove from set of nodes
+            super.remove(id);
+            // remove from canvas
+            node.updateInView();
         }
-        while (node.ports.length > 0) {
-            this.deletePort(node.ports[0]);
+    }
+    filter(type, threshold) {
+        return this.entities.filter((e) => (type ? e.type.id === type : true) &&
+            (threshold ? e.type.priority >= threshold : true));
+    }
+    find(type, threshold) {
+        return this.entities.find((e) => (type ? e.type.id === type : true) &&
+            (threshold ? e.type.priority >= threshold : true));
+    }
+}
+
+let idTicker$1 = 0;
+const DIAGRAM_PORT_DEFAULTS = {
+    radius: 12,
+    highlightedColor: 'cyan',
+    selectedColor: 'violet'
+};
+class DiagramPort extends DiagramElement {
+    constructor(model, rootElement, coords, direction, id) {
+        let uniqueId;
+        if (id !== undefined && model.ports.get(id) === undefined) {
+            uniqueId = id;
         }
-        if (node.label) {
-            this.deleteField(node.label);
+        else {
+            do {
+                uniqueId = `diagram-port-${++idTicker$1}`;
+            } while (model.ports.get(uniqueId) !== undefined);
+        }
+        super(model, uniqueId);
+        this.outgoingConnections = [];
+        this.incomingConnections = [];
+        this.rootElement = rootElement;
+        this.coords = coords;
+        this.direction = direction;
+    }
+    updateInView() {
+        if (this.model.canvas && this.model.renderToCanvas) {
+            this.model.canvas.updatePortsInView(this.id);
         }
-        // remove from list of nodes
-        removeIfExists(this.nodes, node);
-        node.updateInView();
     }
-    hasNodeOfType(type) {
-        return this.nodes.find((e) => e.type.id === type) !== undefined;
+    startConnection(connection) {
+        this.outgoingConnections.push(connection);
     }
-    getSection(id) {
-        return this.sections.find((e) => e.id === id);
+    finishConnection(connection) {
+        this.incomingConnections.push(connection);
     }
-    getSections(threshold) {
-        if (threshold === undefined) {
-            return this.sections;
+    getNode() {
+        if (this.rootElement instanceof DiagramNode) {
+            return this.rootElement;
         }
-        else {
-            return this.sections.filter((e) => (e.node?.type?.priority || Number.NEGATIVE_INFINITY) >= threshold);
+        else if (this.rootElement instanceof DiagramSection) {
+            return this.rootElement.node;
         }
+        return undefined;
     }
-    addSection(node, coords, width, height, id, portIds, portLabelIds) {
-        const newSection = new DiagramSection(this, node, coords, width, height, id);
-        this.sections.push(newSection);
-        newSection.updateInView();
-        // add to node
-        node.sections.push(newSection);
-        node.updateInView();
-        // add section ports
-        if (node.type.sections?.ports && node.type.sections.ports.length > 0) {
-            for (let i = 0; i < node.type.sections.ports.length; ++i) {
-                const portConfig = node.type.sections.ports[i];
-                const newPort = this.addPort(newSection, [
-                    newSection.coords[0] + portConfig.coords[0],
-                    newSection.coords[1] + portConfig.coords[1]
-                ], portConfig.direction, portIds && portIds.length > i ? portIds[i] : undefined);
-                if (portConfig.label) {
-                    const labelConfiguration = {
-                        ...DIAGRAM_FIELD_DEFAULTS,
-                        ...portConfig.label
-                    };
-                    let labelCoords;
-                    switch (newPort.direction) {
-                        case Side.Top:
-                        case Side.Left:
-                            labelCoords = [
-                                newPort.coords[0] - labelConfiguration.fontSize,
-                                newPort.coords[1] - labelConfiguration.fontSize
-                            ];
-                            break;
-                        case Side.Bottom:
-                            labelCoords = [
-                                newPort.coords[0] - labelConfiguration.fontSize,
-                                newPort.coords[1] + labelConfiguration.fontSize
-                            ];
-                            break;
-                        case Side.Right:
-                            labelCoords = [
-                                newPort.coords[0] + labelConfiguration.fontSize,
-                                newPort.coords[1] - labelConfiguration.fontSize
-                            ];
-                            break;
-                        default:
-                            labelCoords = newPort.coords;
-                    }
-                    const newField = this.addField(newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, portLabelIds && portLabelIds.length > i
-                        ? portLabelIds[i]
-                        : undefined);
-                    newPort.label = newField;
-                }
-            }
+    move(coords) {
+        const coordDifferences = [
+            coords[0] - this.coords[0],
+            coords[1] - this.coords[1]
+        ];
+        this.coords = coords;
+        for (const connection of this.outgoingConnections) {
+            connection.setStart(this);
         }
-        // add section label
-        if (node.type.sections?.label) {
-            const labelConfiguration = {
-                ...DIAGRAM_FIELD_DEFAULTS,
-                ...node.type.sections.label
-            };
-            const newField = this.addField(newSection, [
-                newSection.coords[0] + labelConfiguration.margin,
-                newSection.coords[1] + labelConfiguration.margin
-            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, newSection.width - labelConfiguration.margin * 2, newSection.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, id);
-            newSection.label = newField;
+        for (const connection of this.incomingConnections) {
+            connection.setEnd(this);
+        }
+        if (this.label) {
+            this.label.move([
+                this.label.coords[0] + coordDifferences[0],
+                this.label.coords[1] + coordDifferences[1]
+            ]);
         }
-        return newSection;
+        this.updateInView();
+    }
+    distanceTo(coords) {
+        return distanceBetweenPoints(this.coords, coords);
+    }
+}
+class DiagramPortSet extends DiagramEntitySet {
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    new(rootElement, coords, direction, id) {
+        const port = new DiagramPort(this.model, rootElement, coords, direction, id);
+        super.add(port);
+        port.updateInView();
+        // add this port to its root element
+        if (rootElement !== undefined) {
+            rootElement.ports.push(port);
+        }
+        return port;
+    }
+    remove(id) {
+        const port = this.get(id);
+        if (port) {
+            // remove all connections
+            while (port.outgoingConnections.length > 0) {
+                this.model.connections.remove(port.outgoingConnections[0].id);
+            }
+            while (port.incomingConnections.length > 0) {
+                this.model.connections.remove(port.incomingConnections[0].id);
+            }
+            // remove label
+            if (port.label) {
+                this.model.fields.remove(port.label.id);
+            }
+            // remove from root element
+            if (port.rootElement instanceof DiagramNode ||
+                port.rootElement instanceof DiagramSection) {
+                removeIfExists(port.rootElement.ports, port);
+            }
+            // remove from set of ports
+            super.remove(id);
+            // remove from canvas
+            port.updateInView();
+        }
+    }
+    filter(threshold) {
+        return this.entities.filter((e) => {
+            if (threshold) {
+                const node = e.getNode();
+                if (node) {
+                    return node !== undefined && node.type.priority >= threshold;
+                }
+                return false;
+            }
+            return true;
+        });
+    }
+    find(threshold) {
+        return this.entities.find((e) => {
+            if (threshold) {
+                const node = e.getNode();
+                if (node) {
+                    return node !== undefined && node.type.priority >= threshold;
+                }
+                return false;
+            }
+            return true;
+        });
+    }
+}
+
+let idTicker = 0;
+const DIAGRAM_FIELD_DEFAULTS = {
+    editable: true,
+    fontSize: 0,
+    margin: 0,
+    padding: 0,
+    fontFamily: null,
+    color: '#000000',
+    selectedColor: '#000000',
+    horizontalAlign: HorizontalAlign.Center,
+    verticalAlign: VerticalAlign.Center
+};
+class DiagramField extends DiagramElement {
+    get text() {
+        return this._text;
     }
-    deleteSection(section) {
-        // remove all ports
-        while (section.ports.length > 0) {
-            this.deletePort(section.ports[0]);
-        }
-        if (section.label) {
-            this.deleteField(section.label);
-        }
-        // remove from list of sections
-        if (section.node) {
-            removeIfExists(section.node?.sections, section);
+    set text(value) {
+        if (value.trim() === '') {
+            value = this.defaultText;
         }
-        removeIfExists(this.sections, section);
-        section.updateInView();
-    }
-    getPort(id) {
-        return this.ports.find((e) => e.id === id);
+        this._text = value;
+        this.select()?.text(value);
     }
-    getPorts(threshold) {
-        if (threshold === undefined) {
-            return this.ports;
+    constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, id) {
+        let uniqueId;
+        if (id !== undefined && model.fields.get(id) === undefined) {
+            uniqueId = id;
         }
         else {
-            return this.ports.filter((e) => (e.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >= threshold);
+            do {
+                uniqueId = `diagram-field-${++idTicker}`;
+            } while (model.fields.get(uniqueId) !== undefined);
         }
+        super(model, uniqueId);
+        this.rootElement = rootElement;
+        this.coords = coords;
+        this.width = width;
+        this.height = height;
+        this.fontSize = fontSize;
+        this.fontFamily = fontFamily;
+        this.color = color;
+        this.selectedColor = selectedColor;
+        this.horizontalAlign = horizontalAlign;
+        this.verticalAlign = verticalAlign;
+        this.defaultText = text;
+        this._text = text;
+        this.editable = editable;
     }
-    addPort(rootElement, coords, direction, id) {
-        const newPort = new DiagramPort(this, rootElement, coords, direction, id);
-        this.ports.push(newPort);
-        if (rootElement instanceof DiagramNode) {
-            rootElement.ports.push(newPort);
-        }
-        else if (rootElement instanceof DiagramSection) {
-            rootElement.ports.push(newPort);
+    updateInView() {
+        if (this.model.canvas && this.model.renderToCanvas) {
+            this.model.canvas.updateFieldsInView(this.id);
         }
-        newPort.updateInView();
-        return newPort;
     }
-    deletePort(port) {
-        // remove all connections
-        while (port.outgoingConnections.length > 0) {
-            this.deleteConnection(port.outgoingConnections[0]);
-        }
-        while (port.incomingConnections.length > 0) {
-            this.deleteConnection(port.incomingConnections[0]);
-        }
-        // remove label
-        if (port.label) {
-            this.deleteField(port.label);
+    move(coords) {
+        this.coords = coords;
+        this.updateInView();
+    }
+    getClosestNode() {
+        if (this.rootElement instanceof DiagramNode) {
+            return this.rootElement;
         }
-        // remove from lists of ports
-        if (port.rootElement instanceof DiagramNode) {
-            removeIfExists(port.rootElement.ports, port);
+        else if (this.rootElement instanceof DiagramPort) {
+            return this.rootElement.getNode();
         }
-        else if (port.rootElement instanceof DiagramSection) {
-            removeIfExists(port.rootElement.ports, port);
+        else if (this.rootElement instanceof DiagramConnection) {
+            return (this.rootElement.start?.getNode() || this.rootElement.end?.getNode());
         }
-        removeIfExists(this.ports, port);
-        // remove from canvas
-        port.updateInView();
+        return undefined;
     }
-    getConnection(id) {
-        return this.connections.find((e) => e.id === id);
+}
+class DiagramFieldSet extends DiagramEntitySet {
+    constructor(model) {
+        super();
+        this.model = model;
     }
-    getConnections(threshold) {
-        if (threshold === undefined) {
-            return this.connections;
+    new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, id) {
+        const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, id);
+        super.add(field);
+        field.updateInView();
+        // add this field to its root element
+        if (rootElement !== undefined) {
+            rootElement.label = field;
         }
-        else {
-            return this.connections.filter((e) => (e.start?.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >=
-                threshold &&
-                (e.end?.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >=
-                    threshold);
-        }
-    }
-    getConnectionsOfType(type) {
-        return this.connections.filter((e) => e.type.id === type);
-    }
-    addConnection(type, start, end, id) {
-        const newConnection = new DiagramConnection(this, type, start, end, id);
-        this.connections.push(newConnection);
-        newConnection.updateInView();
-        return newConnection;
-    }
-    deleteConnection(connection) {
-        // remove port labels
-        if (connection.start?.label) {
-            this.deleteField(connection.start.label);
-        }
-        if (connection.end?.label) {
-            this.deleteField(connection.end.label);
-        }
-        // remove from lists of connections
-        removeIfExists(connection.start?.outgoingConnections || [], connection);
-        removeIfExists(connection.end?.incomingConnections || [], connection);
-        removeIfExists(this.connections, connection);
-        // remove from canvas
-        connection.updateInView();
+        return field;
     }
-    getField(id) {
-        return this.fields.find((e) => e.id === id);
-    }
-    getFields(threshold) {
-        if (threshold === undefined) {
-            return this.fields;
+    remove(id) {
+        const field = this.get(id);
+        if (field) {
+            // remove from root element
+            if (field.rootElement instanceof DiagramNode ||
+                field.rootElement instanceof DiagramSection ||
+                field.rootElement instanceof DiagramPort) {
+                if (field.rootElement.label === field) {
+                    field.rootElement.label = undefined;
+                }
+            }
+            // remove from set of fields
+            super.remove(id);
+            // remove from canvas
+            field.updateInView();
         }
-        else {
-            return this.fields.filter((e) => {
+    }
+    filter(threshold) {
+        return this.entities.filter((e) => {
+            if (threshold) {
                 const node = e.getClosestNode();
                 return node !== undefined && node.type.priority >= threshold;
-            });
-        }
-    }
-    addField(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, id) {
-        const newField = new DiagramField(this, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, id);
-        this.fields.push(newField);
-        newField.updateInView();
-        return newField;
+            }
+            return true;
+        });
     }
-    deleteField(field) {
-        // remove from lists of fields
-        removeIfExists(this.fields, field);
-        if (field.rootElement instanceof DiagramNode) {
-            if (field.rootElement.label === field) {
-                field.rootElement.label = undefined;
+    find(threshold) {
+        return this.entities.find((e) => {
+            if (threshold) {
+                const node = e.getClosestNode();
+                return node !== undefined && node.type.priority >= threshold;
             }
+            return true;
+        });
+    }
+}
+
+class DiagramModel {
+    // canvas attribute accesors
+    // added so that the valueSet can access canvas attributes and change them
+    get layoutFormat() {
+        return this.canvas?.layoutFormat;
+    }
+    set layoutFormat(value) {
+        if (this.canvas) {
+            this.canvas.layoutFormat = value;
         }
-        else if (field.rootElement instanceof DiagramPort) {
-            if (field.rootElement.label === field) {
-                field.rootElement.label = undefined;
-            }
+    }
+    constructor(canvas, id, name, description, type, properties = []) {
+        this.renderToCanvas = true;
+        this.nodes = new DiagramNodeSet(this);
+        this.sections = new DiagramSectionSet(this);
+        this.ports = new DiagramPortSet(this);
+        this.connections = new DiagramConnectionSet(this);
+        this.fields = new DiagramFieldSet(this);
+        this.canvas = canvas;
+        this.id = id;
+        this.name = name;
+        this.description = description;
+        this.type = type;
+        this.createdAt = new Date();
+        this.updatedAt = new Date();
+        this.valueSet = new ValueSet(new PropertySet(properties), this);
+    }
+    enableRenderToCanvas() {
+        this.renderToCanvas = true;
+        this.canvas?.updateModelInView();
+    }
+    disableRenderToCanvas() {
+        this.renderToCanvas = false;
+    }
+    /**
+     * Deletes everything in this diagram.
+     */
+    clear() {
+        this.id = undefined;
+        this.name = '';
+        this.description = undefined;
+        this.createdAt = new Date();
+        this.updatedAt = new Date();
+        this.nodes.clear();
+        this.sections.clear();
+        this.ports.clear();
+        this.connections.clear();
+        this.fields.clear();
+        this.valueSet.resetValues();
+        if (this.renderToCanvas) {
+            this.canvas?.cancelAllUserActions();
+            this.canvas?.updateModelInView();
         }
-        // remove from canvas
-        field.updateInView();
     }
 }
 
@@ -3222,6 +3390,10 @@ class DiagramModel {
  * Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
  */
 const CONNECTION_PATH_BOX_THICKNESS = 12;
+/**
+ * Thickness of the resizer line used to resize nodes and sections on drag, in pixels.
+ */
+const RESIZER_THICKNESS = 6;
 /**
  * Text to display as the title of the property editor when editing this diagram's properties.
  * @see PropertyEditorComponent
@@ -3255,6 +3427,7 @@ class DiagramCanvas {
         this.priorityThreshold = config.defaultPriorityThreshold;
         this.priorityThresholds = config.priorityThresholds || [];
         this.layoutFormat = config.layoutFormat;
+        this.userActions = config.userActions || {};
         this.validators = [];
         this.actionQueue = new ActionQueue(ACTION_QUEUE_SIZE);
         // load node types
@@ -3264,7 +3437,7 @@ class DiagramCanvas {
                     ...config.nodeTypeDefaults,
                     ...nodeTypeConfig
                 });
-                this.model.nodeTypes.push(nodeType);
+                this.model.nodes.types.add(nodeType);
             }
         }
         // load connection types
@@ -3274,11 +3447,11 @@ class DiagramCanvas {
                     ...config.connectionTypeDefaults,
                     ...connectionTypeConfig
                 });
-                this.model.connectionTypes.push(connectionType);
+                this.model.connections.types.add(connectionType);
             }
             this.connectionType =
                 config.defaultConnection !== undefined
-                    ? this.model.getConnectionType(config.defaultConnection)
+                    ? this.model.connections.types.get(config.defaultConnection)
                     : undefined;
         }
     }
@@ -3295,11 +3468,9 @@ class DiagramCanvas {
         this.diagramRoot = d3.select(appendTo).append('div').node();
         d3.select(this.diagramRoot)
             .attr('tabindex', 0) // make element focusable
-            .style('position', 'absolute')
             .style('width', '100%')
             .style('height', '100%')
             .append('svg')
-            .style('position', 'absolute')
             .style('width', '100%')
             .style('height', '100%');
         d3.select(this.diagramRoot)
@@ -3309,7 +3480,9 @@ class DiagramCanvas {
             d3.select(this.diagramRoot).node()?.focus();
         })
             .on(Events.KeyUp, (event) => {
-            if (!event.ctrlKey && event.key === Keys.Delete) {
+            if (!event.ctrlKey &&
+                event.key === Keys.Delete &&
+                this.userActions[DiagramActions.RemoveAction] !== false) {
                 // delete selection
                 if (this.userSelection.length > 0) {
                     const nodesToBeDeleted = [];
@@ -3456,13 +3629,13 @@ class DiagramCanvas {
         // if there are no nodes, we have nothing to do here
         if (this.model.nodes.length > 0) {
             const canvasViewBoundingBox = this.selectCanvasView().select('rect').node().getBBox();
-            const minimumX = Math.min(...this.model.nodes.map((n) => n.coords[0]));
-            const maximumX = Math.max(...this.model.nodes.map((n) => n.coords[0] + n.width));
+            const minimumX = Math.min(...this.model.nodes.all().map((n) => n.coords[0]));
+            const maximumX = Math.max(...this.model.nodes.all().map((n) => n.coords[0] + n.width));
             const averageX = (minimumX + maximumX) / 2;
             const rangeX = maximumX - minimumX;
             const windowRangeX = canvasViewBoundingBox.width;
-            const minimumY = Math.min(...this.model.nodes.map((n) => n.coords[1]));
-            const maximumY = Math.max(...this.model.nodes.map((n) => n.coords[1] + n.height));
+            const minimumY = Math.min(...this.model.nodes.all().map((n) => n.coords[1]));
+            const maximumY = Math.max(...this.model.nodes.all().map((n) => n.coords[1] + n.height));
             const averageY = (minimumY + maximumY) / 2;
             const rangeY = maximumY - minimumY;
             const windowRangeY = canvasViewBoundingBox.height;
@@ -3524,7 +3697,7 @@ class DiagramCanvas {
     updateNodesInView(...ids) {
         let updateSelection = this.selectCanvas()
             .selectAll('g.diagram-node')
-            .data(this.model.getNodes(this.priorityThreshold), (d) => d.id);
+            .data(this.model.nodes.filter(undefined, this.priorityThreshold), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -3556,37 +3729,43 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            d3.select('body').style('cursor', 'grabbing');
-            this.draggingFrom = [event.x, event.y];
-            this.currentAction = new MoveNodeAction(this, d.id, d.coords, [0, 0]);
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                d3.select('body').style('cursor', 'grabbing');
+                this.draggingFrom = [event.x, event.y];
+                this.currentAction = new MoveNodeAction(this, d.id, d.coords, [0, 0]);
+            }
         })
             .on(DragEvents.Drag, (event, d) => {
-            const newNodeCoords = [
-                event.x - d.width / 2,
-                event.y - d.height / 2
-            ];
-            d.move(newNodeCoords);
-        })
-            .on(DragEvents.End, (event, d) => {
-            // prevent drag behavior if mouse hasn't moved
-            if ((this.draggingFrom[0] !== event.x ||
-                this.draggingFrom[1] !== event.y) &&
-                this.currentAction instanceof MoveNodeAction) {
-                let newNodeCoords = [
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const newNodeCoords = [
                     event.x - d.width / 2,
                     event.y - d.height / 2
                 ];
-                if (this.snapToGrid) {
-                    newNodeCoords = this.getClosestGridPoint(newNodeCoords);
-                }
                 d.move(newNodeCoords);
-                this.currentAction.to = newNodeCoords;
-                this.actionQueue.add(this.currentAction);
             }
-            else {
-                this.currentAction = undefined;
+        })
+            .on(DragEvents.End, (event, d) => {
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                // prevent drag behavior if mouse hasn't moved
+                if ((this.draggingFrom[0] !== event.x ||
+                    this.draggingFrom[1] !== event.y) &&
+                    this.currentAction instanceof MoveNodeAction) {
+                    let newNodeCoords = [
+                        event.x - d.width / 2,
+                        event.y - d.height / 2
+                    ];
+                    if (this.snapToGrid) {
+                        newNodeCoords = this.getClosestGridPoint(newNodeCoords);
+                    }
+                    d.move(newNodeCoords);
+                    this.currentAction.to = newNodeCoords;
+                    this.actionQueue.add(this.currentAction);
+                }
+                else {
+                    this.currentAction = undefined;
+                }
+                d3.select('body').style('cursor', 'auto');
             }
-            d3.select('body').style('cursor', 'auto');
         }));
         enterSelection.filter('.shaped-look').append('path');
         enterSelection
@@ -3643,33 +3822,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'left-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Left, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -3686,33 +3870,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'top-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Top, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -3729,33 +3918,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'right-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Right, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableX) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -3772,33 +3966,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'bottom-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Bottom, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.type.resizableY) {
+            if (this.userActions[DiagramActions.StretchNodeAction] !== false &&
+                d.type.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -3945,8 +4144,8 @@ class DiagramCanvas {
         mergeSelection
             .filter('.resizable-x')
             .select('line.left-resizer')
-            .attr('x1', 0)
-            .attr('x2', 0)
+            .attr('x1', RESIZER_THICKNESS / 2)
+            .attr('x2', RESIZER_THICKNESS / 2)
             .attr('y1', 0)
             .attr('y2', (d) => d.height);
         mergeSelection
@@ -3954,13 +4153,13 @@ class DiagramCanvas {
             .select('line.top-resizer')
             .attr('x1', 0)
             .attr('x2', (d) => d.width)
-            .attr('y1', 0)
-            .attr('y2', 0);
+            .attr('y1', RESIZER_THICKNESS / 2)
+            .attr('y2', RESIZER_THICKNESS / 2);
         mergeSelection
             .filter('.resizable-x')
             .select('line.right-resizer')
-            .attr('x1', (d) => d.width)
-            .attr('x2', (d) => d.width)
+            .attr('x1', (d) => d.width - RESIZER_THICKNESS / 2)
+            .attr('x2', (d) => d.width - RESIZER_THICKNESS / 2)
             .attr('y1', 0)
             .attr('y2', (d) => d.height);
         mergeSelection
@@ -3968,13 +4167,13 @@ class DiagramCanvas {
             .select('line.bottom-resizer')
             .attr('x1', 0)
             .attr('x2', (d) => d.width)
-            .attr('y1', (d) => d.height)
-            .attr('y2', (d) => d.height);
+            .attr('y1', (d) => d.height - RESIZER_THICKNESS / 2)
+            .attr('y2', (d) => d.height - RESIZER_THICKNESS / 2);
     }
     updateSectionsInView(...ids) {
         let updateSelection = this.selectCanvas()
             .selectAll('g.diagram-section')
-            .data(this.model.getSections(this.priorityThreshold), (d) => d.id);
+            .data(this.model.sections.filter(this.priorityThreshold), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -4006,40 +4205,46 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            const node = d.node;
-            d3.select('body').style('cursor', 'grabbing');
-            this.draggingFrom = [event.x, event.y];
-            this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const node = d.node;
+                d3.select('body').style('cursor', 'grabbing');
+                this.draggingFrom = [event.x, event.y];
+                this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+            }
         })
             .on(DragEvents.Drag, (event, d) => {
-            const node = d.node;
-            const newNodeCoords = [
-                event.x - node.width / 2,
-                event.y - node.height / 2
-            ];
-            node.move(newNodeCoords);
-        })
-            .on(DragEvents.End, (event, d) => {
-            const node = d.node;
-            // prevent drag behavior if mouse hasn't moved
-            if ((this.draggingFrom[0] !== event.x ||
-                this.draggingFrom[1] !== event.y) &&
-                this.currentAction instanceof MoveNodeAction) {
-                let newNodeCoords = [
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const node = d.node;
+                const newNodeCoords = [
                     event.x - node.width / 2,
                     event.y - node.height / 2
                 ];
-                if (this.snapToGrid) {
-                    newNodeCoords = this.getClosestGridPoint(newNodeCoords);
-                }
-                d.node?.move(newNodeCoords);
-                this.currentAction.to = newNodeCoords;
-                this.actionQueue.add(this.currentAction);
+                node.move(newNodeCoords);
             }
-            else {
-                this.currentAction = undefined;
+        })
+            .on(DragEvents.End, (event, d) => {
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                const node = d.node;
+                // prevent drag behavior if mouse hasn't moved
+                if ((this.draggingFrom[0] !== event.x ||
+                    this.draggingFrom[1] !== event.y) &&
+                    this.currentAction instanceof MoveNodeAction) {
+                    let newNodeCoords = [
+                        event.x - node.width / 2,
+                        event.y - node.height / 2
+                    ];
+                    if (this.snapToGrid) {
+                        newNodeCoords = this.getClosestGridPoint(newNodeCoords);
+                    }
+                    d.node?.move(newNodeCoords);
+                    this.currentAction.to = newNodeCoords;
+                    this.actionQueue.add(this.currentAction);
+                }
+                else {
+                    this.currentAction = undefined;
+                }
+                d3.select('body').style('cursor', 'auto');
             }
-            d3.select('body').style('cursor', 'auto');
         }));
         enterSelection.filter('.shaped-look').append('path');
         enterSelection
@@ -4096,33 +4301,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'left-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Left, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4139,33 +4349,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'top-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Top, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4182,33 +4397,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'right-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 d3.select('body').style('cursor', 'ew-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Right, d.width, d.width);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableX) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableX) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4225,33 +4445,38 @@ class DiagramCanvas {
             .append('line')
             .attr('class', 'bottom-resizer')
             .attr('stroke', 'transparent')
-            .attr('stroke-width', '5px')
+            .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
             }
         })
             .on(Events.MouseOut, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'auto');
             }
         })
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 d3.select('body').style('cursor', 'ns-resize');
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Bottom, d.height, d.height);
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.coords);
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (d.node?.type?.resizableY) {
+            if (this.userActions[DiagramActions.StretchSectionAction] !== false &&
+                d.node?.type?.resizableY) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4427,8 +4652,8 @@ class DiagramCanvas {
         mergeSelection
             .filter('.resizable-x')
             .select('line.left-resizer')
-            .attr('x1', 0)
-            .attr('x2', 0)
+            .attr('x1', RESIZER_THICKNESS / 2)
+            .attr('x2', RESIZER_THICKNESS / 2)
             .attr('y1', 0)
             .attr('y2', (d) => d.height);
         mergeSelection
@@ -4436,13 +4661,13 @@ class DiagramCanvas {
             .select('line.top-resizer')
             .attr('x1', 0)
             .attr('x2', (d) => d.width)
-            .attr('y1', 0)
-            .attr('y2', 0);
+            .attr('y1', RESIZER_THICKNESS / 2)
+            .attr('y2', RESIZER_THICKNESS / 2);
         mergeSelection
             .filter('.resizable-x')
             .select('line.right-resizer')
-            .attr('x1', (d) => d.width)
-            .attr('x2', (d) => d.width)
+            .attr('x1', (d) => d.width - RESIZER_THICKNESS / 2)
+            .attr('x2', (d) => d.width - RESIZER_THICKNESS / 2)
             .attr('y1', 0)
             .attr('y2', (d) => d.height);
         mergeSelection
@@ -4450,13 +4675,13 @@ class DiagramCanvas {
             .select('line.bottom-resizer')
             .attr('x1', 0)
             .attr('x2', (d) => d.width)
-            .attr('y1', (d) => d.height)
-            .attr('y2', (d) => d.height);
+            .attr('y1', (d) => d.height - RESIZER_THICKNESS / 2)
+            .attr('y2', (d) => d.height - RESIZER_THICKNESS / 2);
     }
     updatePortsInView(...ids) {
         let updateSelection = this.selectCanvas()
             .selectAll('g.diagram-port')
-            .data(this.model.getPorts(this.priorityThreshold), (d) => d.id);
+            .data(this.model.ports.filter(this.priorityThreshold), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -4488,50 +4713,56 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            d3.select('body').style('cursor', 'grabbing');
-            this.startConnection(d);
+            if (this.userActions[DiagramActions.AddConnectionAction] !== false) {
+                d3.select('body').style('cursor', 'grabbing');
+                this.startConnection(d);
+            }
         })
             .on(DragEvents.Drag, (event) => {
-            if (this.unfinishedConnection !== undefined) {
-                this.unfinishedConnection.endCoords = [event.x, event.y];
-                this.updateConnectionsInView();
+            if (this.userActions[DiagramActions.AddConnectionAction] !== false) {
+                if (this.unfinishedConnection !== undefined) {
+                    this.unfinishedConnection.endCoords = [event.x, event.y];
+                    this.updateConnectionsInView();
+                }
             }
         })
             .on(DragEvents.End, (event) => {
-            d3.select('body').style('cursor', 'auto');
-            if (this.mainUserHighlight instanceof DiagramPort) {
-                this.finishConnection(this.mainUserHighlight);
-            }
-            else if (this.mainUserHighlight instanceof DiagramNode ||
-                this.mainUserHighlight instanceof DiagramSection ||
-                this.mainUserHighlight instanceof DiagramField) {
-                let targetRootElement;
-                if (this.mainUserHighlight instanceof DiagramNode ||
-                    this.mainUserHighlight instanceof DiagramSection) {
-                    targetRootElement = this.mainUserHighlight;
-                }
-                else if (this.mainUserHighlight.rootElement instanceof DiagramNode ||
-                    this.mainUserHighlight.rootElement instanceof DiagramSection) {
-                    targetRootElement = this.mainUserHighlight.rootElement;
-                }
-                else {
-                    this.dropConnection();
-                    return;
+            if (this.userActions[DiagramActions.AddConnectionAction] !== false) {
+                d3.select('body').style('cursor', 'auto');
+                if (this.mainUserHighlight instanceof DiagramPort) {
+                    this.finishConnection(this.mainUserHighlight);
                 }
-                const closestPort = targetRootElement.getClosestPortToPoint([
-                    event.x,
-                    event.y
-                ]);
-                if (closestPort !== undefined) {
-                    this.finishConnection(closestPort);
+                else if (this.mainUserHighlight instanceof DiagramNode ||
+                    this.mainUserHighlight instanceof DiagramSection ||
+                    this.mainUserHighlight instanceof DiagramField) {
+                    let targetRootElement;
+                    if (this.mainUserHighlight instanceof DiagramNode ||
+                        this.mainUserHighlight instanceof DiagramSection) {
+                        targetRootElement = this.mainUserHighlight;
+                    }
+                    else if (this.mainUserHighlight.rootElement instanceof DiagramNode ||
+                        this.mainUserHighlight.rootElement instanceof DiagramSection) {
+                        targetRootElement = this.mainUserHighlight.rootElement;
+                    }
+                    else {
+                        this.dropConnection();
+                        return;
+                    }
+                    const closestPort = targetRootElement.getClosestPortToPoint([
+                        event.x,
+                        event.y
+                    ]);
+                    if (closestPort !== undefined) {
+                        this.finishConnection(closestPort);
+                    }
+                    else {
+                        this.dropConnection();
+                    }
                 }
                 else {
                     this.dropConnection();
                 }
             }
-            else {
-                this.dropConnection();
-            }
         }));
         enterSelection.append('circle');
         mergeSelection.attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`);
@@ -4547,7 +4778,7 @@ class DiagramCanvas {
     }
     updateConnectionsInView(...ids) {
         const connectionList = [
-            ...this.model.getConnections(this.priorityThreshold)
+            ...this.model.connections.filter(undefined, this.priorityThreshold)
         ];
         if (this.unfinishedConnection) {
             connectionList.push(this.unfinishedConnection);
@@ -4643,7 +4874,7 @@ class DiagramCanvas {
     updateFieldsInView(...ids) {
         let updateSelection = this.selectCanvas()
             .selectAll('foreignObject.diagram-field')
-            .data(this.model.getFields(this.priorityThreshold), (d) => d.id);
+            .data(this.model.fields.filter(this.priorityThreshold), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -4676,7 +4907,8 @@ class DiagramCanvas {
             }
         })
             .on(Events.DoubleClick, (event, d) => {
-            if (d.editable) {
+            if (this.userActions[DiagramActions.EditFieldAction] !== false &&
+                d.editable) {
                 this.currentAction = new EditFieldAction(this, d.id, d.text, '');
                 this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily, (text) => {
                     d.text = text;
@@ -4694,54 +4926,60 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (d.rootElement instanceof DiagramNode ||
-                d.rootElement instanceof DiagramSection) {
-                const node = d.rootElement instanceof DiagramNode
-                    ? d.rootElement
-                    : d.rootElement.node;
-                d3.select('body').style('cursor', 'grabbing');
-                this.draggingFrom = [event.x, event.y];
-                this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                if (d.rootElement instanceof DiagramNode ||
+                    d.rootElement instanceof DiagramSection) {
+                    const node = d.rootElement instanceof DiagramNode
+                        ? d.rootElement
+                        : d.rootElement.node;
+                    d3.select('body').style('cursor', 'grabbing');
+                    this.draggingFrom = [event.x, event.y];
+                    this.currentAction = new MoveNodeAction(this, node.id, node.coords, [0, 0]);
+                }
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (d.rootElement instanceof DiagramNode ||
-                d.rootElement instanceof DiagramSection) {
-                const node = d.rootElement instanceof DiagramNode
-                    ? d.rootElement
-                    : d.rootElement.node;
-                const newNodeCoords = [
-                    event.x - node.width / 2,
-                    event.y - node.height / 2
-                ];
-                node.move(newNodeCoords);
-            }
-        })
-            .on(DragEvents.End, (event, d) => {
-            if (d.rootElement instanceof DiagramNode ||
-                d.rootElement instanceof DiagramSection) {
-                const node = d.rootElement instanceof DiagramNode
-                    ? d.rootElement
-                    : d.rootElement.node;
-                // prevent drag behavior if mouse hasn't moved
-                if ((this.draggingFrom[0] !== event.x ||
-                    this.draggingFrom[1] !== event.y) &&
-                    this.currentAction instanceof MoveNodeAction) {
-                    let newNodeCoords = [
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                if (d.rootElement instanceof DiagramNode ||
+                    d.rootElement instanceof DiagramSection) {
+                    const node = d.rootElement instanceof DiagramNode
+                        ? d.rootElement
+                        : d.rootElement.node;
+                    const newNodeCoords = [
                         event.x - node.width / 2,
                         event.y - node.height / 2
                     ];
-                    if (this.snapToGrid) {
-                        newNodeCoords = this.getClosestGridPoint(newNodeCoords);
-                    }
                     node.move(newNodeCoords);
-                    this.currentAction.to = newNodeCoords;
-                    this.actionQueue.add(this.currentAction);
                 }
-                else {
-                    this.currentAction = undefined;
+            }
+        })
+            .on(DragEvents.End, (event, d) => {
+            if (this.userActions[DiagramActions.MoveNodeAction] !== false) {
+                if (d.rootElement instanceof DiagramNode ||
+                    d.rootElement instanceof DiagramSection) {
+                    const node = d.rootElement instanceof DiagramNode
+                        ? d.rootElement
+                        : d.rootElement.node;
+                    // prevent drag behavior if mouse hasn't moved
+                    if ((this.draggingFrom[0] !== event.x ||
+                        this.draggingFrom[1] !== event.y) &&
+                        this.currentAction instanceof MoveNodeAction) {
+                        let newNodeCoords = [
+                            event.x - node.width / 2,
+                            event.y - node.height / 2
+                        ];
+                        if (this.snapToGrid) {
+                            newNodeCoords = this.getClosestGridPoint(newNodeCoords);
+                        }
+                        node.move(newNodeCoords);
+                        this.currentAction.to = newNodeCoords;
+                        this.actionQueue.add(this.currentAction);
+                    }
+                    else {
+                        this.currentAction = undefined;
+                    }
+                    d3.select('body').style('cursor', 'auto');
                 }
-                d3.select('body').style('cursor', 'auto');
             }
         }))
             .append('xhtml:div')
@@ -4979,9 +5217,13 @@ class DiagramCanvas {
         }
         else {
             if (this.guessConnectionType) {
-                let differentConnectionType = this.model.connectionTypes.find((t) => t.canStartFromType(port.getNode()?.type?.id || ''));
+                let differentConnectionType = this.model.connections.types
+                    .all()
+                    .find((t) => t.canStartFromType(port.getNode()?.type?.id || ''));
                 if (differentConnectionType === undefined) {
-                    differentConnectionType = this.model.connectionTypes.find((t) => t.canFinishOnType(port.getNode()?.type?.id || ''));
+                    differentConnectionType = this.model.connections.types
+                        .all()
+                        .find((t) => t.canFinishOnType(port.getNode()?.type?.id || ''));
                 }
                 if (differentConnectionType !== undefined) {
                     this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, 'diagram-connection-unfinished');
@@ -5018,10 +5260,15 @@ class DiagramCanvas {
                 }
                 else {
                     if (this.guessConnectionType) {
-                        let differentConnectionType = this.model.connectionTypes.find((t) => t.canStartFromType(this.unfinishedConnection?.start?.getNode()?.type?.id || '') && t.canFinishOnType(port.getNode()?.type?.id || ''));
+                        let differentConnectionType = this.model.connections.types
+                            .all()
+                            .find((t) => t.canStartFromType(this.unfinishedConnection?.start?.getNode()?.type?.id || '') && t.canFinishOnType(port.getNode()?.type?.id || ''));
                         let invertConnection = false;
                         if (differentConnectionType === undefined) {
-                            differentConnectionType = this.model.connectionTypes.find((t) => t.canFinishOnType(this.unfinishedConnection?.start?.getNode()?.type?.id || '') && t.canStartFromType(port.getNode()?.type?.id || ''));
+                            differentConnectionType = this.model.connections.types
+                                .all()
+                                .find((t) => t.canFinishOnType(this.unfinishedConnection?.start?.getNode()?.type?.id ||
+                                '') && t.canStartFromType(port.getNode()?.type?.id || ''));
                             invertConnection = true;
                         }
                         if (differentConnectionType !== undefined) {
@@ -5279,10 +5526,10 @@ class CanvasProviderService {
     getCanvas() {
         return this._canvas;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CanvasProviderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: CanvasProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CanvasProviderService, decorators: [{
             type: Injectable
         }] });
 
@@ -5366,12 +5613,12 @@ class DiagramButtonsComponent {
     redo() {
         this.canvas.actionQueue.redo();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"diagram-buttons\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n", styles: [":host{position:absolute;right:1rem;bottom:1rem}.diagram-buttons button{position:relative;display:block;height:3rem;width:3rem;padding:0;border:0;margin-bottom:1rem;background-color:transparent}.diagram-buttons button .tooltip{visibility:hidden;z-index:1;position:absolute;top:.5rem;right:3.5rem;height:2rem;padding:.6rem;border-radius:.25rem;font-size:.8rem;font-weight:500;box-sizing:border-box;white-space:nowrap;color:#fff;background-color:#0009}.diagram-buttons button:hover .tooltip{visibility:visible}.diagram-buttons button.filter.on{background-image:url(/assets/daga/icon/buttons/filter-on.svg)}.diagram-buttons button.filter.on:hover{background-image:url(/assets/daga/icon/buttons/filter-on-hover.svg)}.diagram-buttons button.filter.off{background-image:url(/assets/daga/icon/buttons/filter-off.svg)}.diagram-buttons button.filter.off:hover{background-image:url(/assets/daga/icon/buttons/filter-off-hover.svg)}.diagram-buttons button.layout{background-image:url(/assets/daga/icon/buttons/layout.svg)}.diagram-buttons button.layout:hover{background-image:url(/assets/daga/icon/buttons/layout-hover.svg)}.diagram-buttons button.zoom-in{background-image:url(/assets/daga/icon/buttons/zoom-in.svg)}.diagram-buttons button.zoom-in:hover{background-image:url(/assets/daga/icon/buttons/zoom-in-hover.svg)}.diagram-buttons button.zoom-out{background-image:url(/assets/daga/icon/buttons/zoom-out.svg)}.diagram-buttons button.zoom-out:hover{background-image:url(/assets/daga/icon/buttons/zoom-out-hover.svg)}.diagram-buttons button.center{background-image:url(/assets/daga/icon/buttons/center.svg)}.diagram-buttons button.center:hover{background-image:url(/assets/daga/icon/buttons/center-hover.svg)}.diagram-buttons button.undo{background-image:url(/assets/daga/icon/buttons/undo.svg)}.diagram-buttons button.undo:hover{background-image:url(/assets/daga/icon/buttons/undo-hover.svg)}.diagram-buttons button.redo{background-image:url(/assets/daga/icon/buttons/redo.svg)}.diagram-buttons button.redo:hover{background-image:url(/assets/daga/icon/buttons/redo-hover.svg)}.diagram-buttons button.more-options{background-image:url(/assets/daga/icon/buttons/ellipsis.svg)}.diagram-buttons button.more-options:hover{background-image:url(/assets/daga/icon/buttons/ellipsis-hover.svg)}.diagram-buttons .collapsable-buttons.collapsing{animation-name:collapse-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.expanding{animation-name:expand-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.collapsed{transform:scaleY(0);height:0}@keyframes collapse-animation{0%{transform:scale(1);transform-origin:0% 0%;height:12rem}to{transform:scaleY(0);transform-origin:0% 0%;height:0}}@keyframes expand-animation{0%{transform:scaleY(0);transform-origin:0% 0%;height:0}to{transform:scale(1);transform-origin:0% 0%;height:12rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"diagram-buttons\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"diagram-buttons\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n", styles: [":host{position:absolute;right:1rem;bottom:1rem}.diagram-buttons button{position:relative;display:block;height:3rem;width:3rem;padding:0;border:0;margin-bottom:1rem;background-color:transparent}.diagram-buttons button .tooltip{visibility:hidden;z-index:1;position:absolute;top:.5rem;right:3.5rem;height:2rem;padding:.6rem;border-radius:.25rem;font-size:.8rem;font-weight:500;box-sizing:border-box;white-space:nowrap;color:#fff;background-color:#0009}.diagram-buttons button:hover .tooltip{visibility:visible}.diagram-buttons button.filter.on{background-image:url(/assets/daga/icon/buttons/filter-on.svg)}.diagram-buttons button.filter.on:hover{background-image:url(/assets/daga/icon/buttons/filter-on-hover.svg)}.diagram-buttons button.filter.off{background-image:url(/assets/daga/icon/buttons/filter-off.svg)}.diagram-buttons button.filter.off:hover{background-image:url(/assets/daga/icon/buttons/filter-off-hover.svg)}.diagram-buttons button.layout{background-image:url(/assets/daga/icon/buttons/layout.svg)}.diagram-buttons button.layout:hover{background-image:url(/assets/daga/icon/buttons/layout-hover.svg)}.diagram-buttons button.zoom-in{background-image:url(/assets/daga/icon/buttons/zoom-in.svg)}.diagram-buttons button.zoom-in:hover{background-image:url(/assets/daga/icon/buttons/zoom-in-hover.svg)}.diagram-buttons button.zoom-out{background-image:url(/assets/daga/icon/buttons/zoom-out.svg)}.diagram-buttons button.zoom-out:hover{background-image:url(/assets/daga/icon/buttons/zoom-out-hover.svg)}.diagram-buttons button.center{background-image:url(/assets/daga/icon/buttons/center.svg)}.diagram-buttons button.center:hover{background-image:url(/assets/daga/icon/buttons/center-hover.svg)}.diagram-buttons button.undo{background-image:url(/assets/daga/icon/buttons/undo.svg)}.diagram-buttons button.undo:hover{background-image:url(/assets/daga/icon/buttons/undo-hover.svg)}.diagram-buttons button.redo{background-image:url(/assets/daga/icon/buttons/redo.svg)}.diagram-buttons button.redo:hover{background-image:url(/assets/daga/icon/buttons/redo-hover.svg)}.diagram-buttons button.more-options{background-image:url(/assets/daga/icon/buttons/ellipsis.svg)}.diagram-buttons button.more-options:hover{background-image:url(/assets/daga/icon/buttons/ellipsis-hover.svg)}.diagram-buttons .collapsable-buttons.collapsing{animation-name:collapse-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.expanding{animation-name:expand-animation;animation-duration:1s;animation-fill-mode:forwards}.diagram-buttons .collapsable-buttons.collapsed{transform:scaleY(0);height:0}@keyframes collapse-animation{0%{transform:scale(1);transform-origin:0% 0%;height:12rem}to{transform:scaleY(0);transform-origin:0% 0%;height:0}}@keyframes expand-animation{0%{transform:scaleY(0);transform-origin:0% 0%;height:0}to{transform:scale(1);transform-origin:0% 0%;height:12rem}}\n"] }]
+            args: [{ standalone: true, selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"diagram-buttons\">\n  <button *ngIf=\"enableZoom\" class=\"zoom-in\" (click)=\"zoomIn()\">\n    <span class=\"tooltip\">Zoom in</span>\n  </button>\n  <button *ngIf=\"enableZoom\" class=\"zoom-out\" (click)=\"zoomOut()\">\n    <span class=\"tooltip\">Zoom out</span>\n  </button>\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\n    <button *ngIf=\"enableZoom\" class=\"center\" (click)=\"center()\">\n      <span class=\"tooltip\">Fit diagram to screen</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\n      <span class=\"tooltip\">Undo</span>\n    </button>\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\n      <span class=\"tooltip\">Redo</span>\n    </button>\n    <button\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\n      class=\"layout\"\n      (click)=\"layout()\"\n    >\n      <span class=\"tooltip\">Apply layout</span>\n    </button>\n    <button\n      *ngIf=\"enableFilter && canvas.priorityThresholds.length >= 2\"\n      class=\"filter\"\n      [class]=\"filterOn ? 'on' : 'off'\"\n      (click)=\"filter()\"\n    >\n      <span class=\"tooltip\">Apply filter</span>\n    </button>\n  </div>\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { collapsableButtons: [{
                 type: ViewChild,
                 args: ['collapsableButtons']
@@ -5415,7 +5662,8 @@ class ErrorsComponent {
     }
     showError(error) {
         if (error.elementId && error.propertyNames) {
-            this.canvas.setPropertyEditorSelection(this.canvas.model.getElement(error.elementId));
+            this.canvas.setPropertyEditorSelection(this.canvas.model.nodes.get(error.elementId) ||
+                this.canvas.model.connections.get(error.elementId));
             this.canvas.parentComponent.propertyEditor?.highlightProperty(...error.propertyNames);
         }
         else if (!error.elementId && error.propertyNames) {
@@ -5424,12 +5672,12 @@ class ErrorsComponent {
         }
         // TODO: IF ERROR IS IN AN ELEMENT BUT NOT IN A SPECIFIC PROPERTY, WE COULD HIGHLIGHT THE ELEMENT
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", styles: [":host{left:2rem;bottom:0;position:absolute;width:calc(100% - 8rem)}.errors-summary{position:absolute;right:2rem;top:-2rem;height:2rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;flex-direction:row;align-items:center}.errors-summary.no-errors{background-color:var(--panel-secondary-color);color:var(--font-color)}.errors-summary.with-errors{background-color:#e64545;color:#fff}.errors-summary span{flex:1 0 auto;padding:.5rem}.errors-summary .collapse-button-container{flex:0 0 auto;padding-left:.5rem;padding-right:.5rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;background-color:var(--error-color)}.errors-summary .collapse-button-container daga-collapse-button{filter:brightness(10)}.error-panel{width:100%;max-height:12rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.5rem;background-color:var(--font-color);color:#fff;overflow:auto}.error-panel ol{counter-reset:count;list-style:decimal;padding:0;padding-left:5rem;margin:0;font-size:.95rem}.error-panel ol li{counter-increment:count;cursor:pointer;padding-bottom:.25rem}.error-panel ol li:hover{text-decoration:underline}.error-panel ol li::marker{content:\"ERROR \" counters(count,\".\",decimal-leading-zero) \" \";font-family:var(--monospace-font-family);font-size:.9rem;font-weight:400;color:#ffffffbf}.error-panel ol li b{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ErrorsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", styles: [":host{left:2rem;bottom:0;position:absolute;width:calc(100% - 8rem)}.errors-summary{position:absolute;right:2rem;top:-2rem;height:2rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;flex-direction:row;align-items:center}.errors-summary.no-errors{background-color:var(--panel-secondary-color);color:var(--font-color)}.errors-summary.with-errors{background-color:#e64545;color:#fff}.errors-summary span{flex:1 0 auto;padding:.5rem}.errors-summary .collapse-button-container{flex:0 0 auto;padding-left:.5rem;padding-right:.5rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;background-color:var(--error-color)}.errors-summary .collapse-button-container daga-collapse-button{filter:brightness(10)}.error-panel{width:100%;max-height:12rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding:.5rem;background-color:var(--font-color);color:#fff;overflow:auto}.error-panel ol{counter-reset:count;list-style:decimal;padding:0;padding-left:5rem;margin:0;font-size:.95rem}.error-panel ol li{counter-increment:count;cursor:pointer;padding-bottom:.25rem}.error-panel ol li:hover{text-decoration:underline}.error-panel ol li::marker{content:\"ERROR \" counters(count,\".\",decimal-leading-zero) \" \";font-family:var(--monospace-font-family);font-size:.9rem;font-weight:400;color:#ffffffbf}.error-panel ol li b{font-weight:700}\n"] }]
+            args: [{ standalone: true, selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
                 type: ViewChild,
                 args: ['errors']
@@ -5510,7 +5758,7 @@ class PaletteComponent {
     }
     appendTemplate(template, classes) {
         if (template.templateType === 'node') {
-            const nodeType = this.canvas.model.getNodeType(template.type);
+            const nodeType = this.canvas.model.nodes.types.get(template.type);
             if (nodeType) {
                 this.appendNodeTemplate(nodeType, template, classes);
             }
@@ -5520,7 +5768,7 @@ class PaletteComponent {
         }
         else if (template.templateType === 'connection') {
             {
-                const connectionType = this.canvas.model.getConnectionType(template.type);
+                const connectionType = this.canvas.model.connections.types.get(template.type);
                 if (connectionType) {
                     this.appendConnectionTemplate(connectionType, template, classes);
                 }
@@ -5578,7 +5826,12 @@ class PaletteComponent {
                 .style('top', 0)
                 .style('z-index', 'auto');
             // try to place node
-            if (type.isUnique && this.canvas.model.hasNodeOfType(type.id)) {
+            if (this.canvas.userActions[DiagramActions.AddNodeAction] === false) {
+                // can't place, the user isn't allowed to place nodes
+                return;
+            }
+            if (type.isUnique &&
+                this.canvas.model.nodes.find(type.id) !== undefined) {
                 // can't place, it's unique and that node is already in the model
                 return;
             }
@@ -5778,12 +6031,12 @@ class PaletteComponent {
                 .text(templateConfig.label);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", styles: [".panel{width:12rem}.palette-view{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", styles: [".panel{width:12rem}.palette-view{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}\n"] }]
+            args: [{ standalone: true, selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"panel {{ location }}\">\n  <daga-collapse-button\n    #collapseButton\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -5851,12 +6104,12 @@ class TextListEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextListEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"] }]
+            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
@@ -5927,12 +6180,12 @@ class TextMapEditorComponent {
             this.addToValue();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextMapEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <img src=\"/assets/daga/icon/property/close.svg\" />\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <img src=\"/assets/daga/icon/property/add.svg\" />\n  </button>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"] }]
+            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], keyInput: [{
@@ -5949,6 +6202,9 @@ class ObjectEditorComponent {
     get canvas() {
         return this.canvasProvider.getCanvas();
     }
+    get userCanEdit() {
+        return this.canvas.userActions[DiagramActions.UpdateValuesAction] !== false;
+    }
     get valueSet() {
         return this._valueSet;
     }
@@ -6025,10 +6281,10 @@ class ObjectEditorComponent {
         }
         return date && !isNaN(date.valueOf()) ? new Date(date).toISOString() : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <img src=\"/assets/daga/icon/property/hide.svg\" />\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"], dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: i3.AutocompleteListComponent, selector: "lux-autocomplete-list", inputs: ["value", "lang", "inputId", "dataSource", "placeholder", "disabled", "deleteLabelTemplate", "addMessage", "required", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange"] }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "component", type: i3.RadiogroupComponent, selector: "lux-radiogroup", inputs: ["name", "disabled", "readonly", "required", "items", "value"], outputs: ["itemsChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <div class=\"icon hide-icon\"></div>\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: i3.AutocompleteListComponent, selector: "lux-autocomplete-list", inputs: ["value", "lang", "inputId", "dataSource", "placeholder", "disabled", "deleteLabelTemplate", "addMessage", "required", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange"] }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "component", type: i3.RadiogroupComponent, selector: "lux-radiogroup", inputs: ["name", "disabled", "readonly", "required", "items", "value"], outputs: ["itemsChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: ObjectEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-object-editor', imports: [
                         CommonModule,
@@ -6036,7 +6292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         FormsModule,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <img src=\"/assets/daga/icon/property/hide.svg\" />\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n", styles: [".property{padding-top:.5rem;padding-bottom:.5rem}.property .property-name{display:flex;justify-content:space-between;align-items:center;height:1.5rem;padding-bottom:.5rem;margin:0;width:100%;font-size:.75rem;font-weight:500;text-transform:uppercase}.value-item-input,.value-item-element{display:flex;align-items:stretch;flex-direction:row;height:1.5rem;gap:.5rem}.value-item-element{margin-bottom:.5rem}.left-bar{padding-left:1rem;border-left:.25rem solid var(--property-background-color)}lux-input,.relatively-positioned,p.value-item{height:1.5rem;flex-grow:1;flex-basis:0}p.value-item{margin:0;overflow:hidden;text-overflow:ellipsis}.relatively-positioned{position:relative}button.property-button{min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;font-size:1rem}button.property-button img{padding:.25rem;width:1rem;height:1rem}button.property-button:hover{background-color:var(--property-background-color)}button.clear{position:absolute;top:0;right:0;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;padding:0;border-radius:.25rem;border:none;background-color:transparent;background:var(--lux-autocomplete-icon-clear);background-size:.5rem .5rem;z-index:1}\n"] }]
+                    ], template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <div class=\"icon hide-icon\"></div>\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
@@ -6074,12 +6330,12 @@ class PropertyEditorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n", styles: [".panel{width:24rem}.title{margin:0;width:100%;font-size:1rem;font-weight:500}.panel-content{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: PropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-property-editor', imports: [CommonModule, CollapseButtonComponent, ObjectEditorComponent], template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n", styles: [".panel{width:24rem}.title{margin:0;width:100%;font-size:1rem;font-weight:500}.panel-content{padding:1rem}\n"] }]
+            args: [{ standalone: true, selector: 'daga-property-editor', imports: [CommonModule, CollapseButtonComponent, ObjectEditorComponent], template: "<div #panel class=\"panel bottom {{ location }}\">\n  <daga-collapse-button\n    [collapsableSelector]=\"panel\"\n    [collapsableAdditionalSelector]=\"'.panel-content'\"\n    [rule]=\"'display'\"\n    [collapsedValue]=\"'none'\"\n    [visibleValue]=\"'block'\"\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -6099,10 +6355,10 @@ class DagaConfigurationService {
     getConfig() {
         return this._config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaConfigurationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaConfigurationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaConfigurationService, decorators: [{
             type: Injectable
         }] });
 
@@ -6124,10 +6380,10 @@ class DiagramEditorComponent {
     ngAfterViewInit() {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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 #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n", styles: [":host,.append-to{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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 #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-diagram-editor', imports: [
                         CommonModule,
@@ -6135,7 +6391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         PaletteComponent,
                         PropertyEditorComponent,
                         ErrorsComponent
-                    ], template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n", styles: [":host,.append-to{display:block;width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons #diagramButtons />\n<daga-palette\n  *ngIf=\"config.palettes && config.palettes.length > 0\"\n  #palette\n  [location]=\"Corner.TopLeft\"\n  [palettes]=\"config.palettes\"\n/>\n<daga-property-editor #propertyEditor [location]=\"Corner.TopRight\" />\n<daga-errors />\n" }]
         }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { appendTo: [{
                 type: ViewChild,
                 args: ['appendTo']
@@ -6162,19 +6418,24 @@ class DiagramComponent {
     ngOnInit() {
         this.configurationService.init(this.config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:absolute;min-width:40rem;min-height:20rem}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-diagram', template: `<ng-content></ng-content>`, providers: [CanvasProviderService, DagaConfigurationService], styles: [":host{position:absolute;min-width:40rem;min-height:20rem}\n"] }]
+            args: [{
+                    standalone: true,
+                    selector: 'daga-diagram',
+                    template: `<ng-content></ng-content>`,
+                    providers: [CanvasProviderService, DagaConfigurationService]
+                }]
         }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { config: [{
                 type: Input
             }] } });
 
 class DagaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramComponent,
             DiagramEditorComponent,
@@ -6187,7 +6448,7 @@ class DagaModule {
             CommonModule,
             FormsModule,
             LuxModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramEditorComponent,
             ErrorsComponent,
@@ -6200,7 +6461,7 @@ class DagaModule {
             FormsModule,
             LuxModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: DagaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -6315,10 +6576,10 @@ class DagaImporter {
         model.createdAt = new Date(data.createdAt);
         model.updatedAt = new Date(data.updatedAt);
         for (const node of data.nodes || []) {
-            const newNodeType = model.getNodeType(node.type);
+            const newNodeType = model.nodes.types.get(node.type);
             if (newNodeType) {
                 const newNode = new DiagramNode(model, newNodeType, node.coords, node.id);
-                model.nodes.push(newNode);
+                model.nodes.add(newNode);
                 newNode.width = node.width;
                 newNode.height = node.height;
                 if (node.data) {
@@ -6337,13 +6598,13 @@ class DagaImporter {
                         ], newNode.width - labelConfiguration.margin * 2, newNode.height - labelConfiguration.margin * 2, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable);
                         newField.text = node.label;
                         newNode.label = newField;
-                        model.fields.push(newField);
+                        model.fields.add(newField);
                     }
                 }
                 for (const section of node.sections || []) {
                     const newSection = new DiagramSection(model, newNode, section.coords, section.width, section.height, section.id);
                     newNode.sections?.push(newSection);
-                    model.sections.push(newSection);
+                    model.sections.add(newSection);
                     if (section.label) {
                         // add section label
                         if (newNodeType.sections?.label) {
@@ -6357,14 +6618,14 @@ class DagaImporter {
                             ], newSection.width - labelConfiguration.margin * 2, newSection.height - labelConfiguration.margin * 2, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable);
                             newField.text = section.label;
                             newSection.label = newField;
-                            model.fields.push(newField);
+                            model.fields.add(newField);
                         }
                     }
                     let portCounter = 0;
                     for (const port of section.ports || []) {
                         const newPort = new DiagramPort(model, newSection, port.coords, port.direction, port.id);
                         newSection.ports.push(newPort);
-                        model.ports.push(newPort);
+                        model.ports.add(newPort);
                         if (port.label) {
                             // add port label
                             if (newNodeType.ports.length > portCounter &&
@@ -6400,7 +6661,7 @@ class DagaImporter {
                                 const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable);
                                 newField.text = port.label;
                                 newPort.label = newField;
-                                model.fields.push(newField);
+                                model.fields.add(newField);
                             }
                             ++portCounter;
                         }
@@ -6410,7 +6671,7 @@ class DagaImporter {
                 for (const port of node.ports || []) {
                     const newPort = new DiagramPort(model, newNode, port.coords, port.direction, port.id);
                     newNode.ports.push(newPort);
-                    model.ports.push(newPort);
+                    model.ports.add(newPort);
                     if (port.label) {
                         // add port label
                         if (newNodeType.ports.length > portCounter &&
@@ -6446,7 +6707,7 @@ class DagaImporter {
                             const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable);
                             newField.text = port.label;
                             newPort.label = newField;
-                            model.fields.push(newField);
+                            model.fields.add(newField);
                         }
                         ++portCounter;
                     }
@@ -6454,10 +6715,10 @@ class DagaImporter {
             }
         }
         for (const connection of data.connections || []) {
-            const newConnectionType = model.getConnectionType(connection.type);
+            const newConnectionType = model.connections.types.get(connection.type);
             if (newConnectionType) {
-                const newConnection = new DiagramConnection(model, newConnectionType, connection.start ? model.getPort(connection.start) : undefined, connection.end ? model.getPort(connection.end) : undefined, connection.id);
-                model.connections.push(newConnection);
+                const newConnection = new DiagramConnection(model, newConnectionType, connection.start ? model.ports.get(connection.start) : undefined, connection.end ? model.ports.get(connection.end) : undefined, connection.id);
+                model.connections.add(newConnection);
                 newConnection.startLabel = connection.startLabel;
                 newConnection.middleLabel = connection.middleLabel;
                 newConnection.endLabel = connection.endLabel;
@@ -6476,5 +6737,5 @@ class DagaImporter {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, CollapseButtonComponent, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramField, DiagramModel, DiagramNode, DiagramNodeType, DiagramPort, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalLayout, MoveNodeAction, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, StretchNodeAction, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalLayout, layouts };
+export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, 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, MoveNodeAction, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, Side, StretchNodeAction, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map