@metadev/daga 1.5.4 → 1.5.6

package/fesm2022/metadev-daga.mjs

@@ -655,60 +655,6 @@ const addIfNotExists = (arr, obj) => {
     return arr;
 };
 
-/**
- * Default priority value for diagram elements.
- * @private
- */
-const DEFAULT_PRIORITY = 0;
-/**
- * Represents an object which exists as part of a specific diagram model and has a visual representation in a diagram canvas.
- * @public
- * @see DiagramModel
- * @see DiagramCanvas
- */
-class DiagramElement {
-    get id() {
-        return this._id;
-    }
-    constructor(model, id) {
-        /**
-         * Whether this diagram element is currently highlighted by the user.
-         * @private
-         */
-        this.highlighted = false;
-        /**
-         * Whether this diagram element is currently selected by the user.
-         * @private
-         */
-        this.selected = false;
-        /**
-         * Whether this diagram element has itself been explicitly removed.
-         *
-         * Override the `removed` getter so that it returns true if and only if:
-         * - `selfRemoved` is true, or
-         * - `removed` is true for any of this element's dependencies.
-         *
-         * For example, a DiagramConnection is removed if either of its ports are removed,
-         * even if the connection's own `selfRemoved` field is false.
-         * @private
-         */
-        this.selfRemoved = false;
-        /**
-         * Collaborative timestamp for selfRemoved.
-         * @private
-         */
-        this.selfRemovedTimestamp = null;
-        this.model = model;
-        this._id = id;
-    }
-    /**
-     * Obtain the selection of this element.
-     * @private
-     */
-    select() {
-        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.
  * @public
@@ -729,11 +675,11 @@ class DiagramEntitySet {
         this.entityMap = {};
     }
     /**
-     * The number of entities of this set.
+     * The number of entities in this set.
      * @public
      */
     get length() {
-        return this.entities.length;
+        return this.size();
     }
     /**
      * Gets all of the entities of this set.
@@ -774,6 +720,14 @@ class DiagramEntitySet {
     contains(id) {
         return this.entityMap[id] !== undefined;
     }
+    /**
+     * Counts the number of entities of this set following the given criteria.
+     * @public
+     * @returns The number of entities of this set following the given criteria.
+     */
+    count(predicate) {
+        return this.entities.filter(predicate).length;
+    }
     /**
      * Gets all of the entities of this set filtered following given criteria.
      * @public
@@ -799,6 +753,14 @@ class DiagramEntitySet {
     get(id) {
         return this.entityMap[id];
     }
+    /**
+     * Gets all of the entities of this set mapped to the result of the given function applied to them.
+     * @public
+     * @returns An array containing the entities of this set that meet the given criteria.
+     */
+    map(callback) {
+        return this.entities.map(callback);
+    }
     /**
      * Attempts to find and remove an entity with the given id. Has no effect if there are no entities with the given id.
      * @public
@@ -811,15 +773,159 @@ class DiagramEntitySet {
             removeIfExists(this.entities, entity);
         }
     }
+    /**
+     * Gets the number of entities in this set.
+     * @public
+     */
+    size() {
+        return this.entities.length;
+    }
     /**
      * Iterator to iterate over the entities of this set.
      * @public
      */
     *[Symbol.iterator]() {
-        let counter = 0;
-        while (counter < this.entities.length) {
-            yield this.entities[counter];
-            ++counter;
+        for (const entity of this.entities) {
+            yield entity;
+        }
+    }
+}
+
+/**
+ * Default priority value for diagram elements.
+ * @private
+ */
+const DEFAULT_PRIORITY = 0;
+/**
+ * Represents an object which exists as part of a specific diagram model and has a visual representation in a diagram canvas.
+ * @public
+ * @see DiagramModel
+ * @see DiagramCanvas
+ */
+class DiagramElement {
+    get id() {
+        return this._id;
+    }
+    constructor(model, id) {
+        /**
+         * Whether this diagram element is currently highlighted by the user.
+         * @private
+         */
+        this.highlighted = false;
+        /**
+         * Whether this diagram element is currently selected by the user.
+         * @private
+         */
+        this.selected = false;
+        /**
+         * Whether this diagram element has itself been explicitly removed.
+         *
+         * Override the `removed` getter so that it returns true if and only if:
+         * - `selfRemoved` is true, or
+         * - `removed` is true for any of this element's dependencies.
+         *
+         * For example, a DiagramConnection is removed if either of its ports are removed,
+         * even if the connection's own `selfRemoved` field is false.
+         * @private
+         */
+        this.selfRemoved = false;
+        /**
+         * Collaborative timestamp for selfRemoved.
+         * @private
+         */
+        this.selfRemovedTimestamp = null;
+        this.model = model;
+        this._id = id;
+    }
+    /**
+     * Obtain the selection of this element.
+     * @private
+     */
+    select() {
+        return this.model.canvas?.selectCanvasView()?.select(`g#${this.id}`);
+    }
+}
+class DiagramElementSet extends DiagramEntitySet {
+    all(includeRemoved = false) {
+        if (includeRemoved) {
+            return super.all();
+        }
+        else {
+            return super.filter((e) => !e.removed);
+        }
+    }
+    contains(id, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.contains(id);
+        }
+        else {
+            return super.contains(id) && !this.entityMap[id].removed;
+        }
+    }
+    count(predicate, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.count(predicate);
+        }
+        else {
+            return super.count((e, i, a) => predicate(e, i, a) && !e.removed);
+        }
+    }
+    filter(predicate, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.filter(predicate);
+        }
+        else {
+            return super.filter((e, i, a) => predicate(e, i, a) && !e.removed);
+        }
+    }
+    find(predicate, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.find(predicate);
+        }
+        else {
+            return super.find((e, i, a) => predicate(e, i, a) && !e.removed);
+        }
+    }
+    get(id, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.get(id);
+        }
+        else {
+            return super.contains(id) && !this.entityMap[id].removed
+                ? super.get(id)
+                : undefined;
+        }
+    }
+    map(callback, includeRemoved = false) {
+        if (includeRemoved) {
+            return super.map(callback);
+        }
+        else {
+            return super.filter((e) => !e.removed).map(callback);
+        }
+    }
+    /**
+     * Gets the number of entities in this set.
+     * @public
+     */
+    size(includeRemoved = false) {
+        if (includeRemoved) {
+            return super.size();
+        }
+        else {
+            return super.filter((e) => !e.removed).length;
+        }
+    }
+    *[Symbol.iterator](includeRemoved = false) {
+        if (includeRemoved) {
+            for (const entity of this.entities) {
+                yield entity;
+            }
+        }
+        else {
+            for (const entity of this.entities.filter((e) => !e.removed)) {
+                yield entity;
+            }
         }
     }
 }
@@ -1692,7 +1798,7 @@ class DiagramConnection extends DiagramElement {
         }
     }
 }
-class DiagramConnectionSet extends DiagramEntitySet {
+class DiagramConnectionSet extends DiagramElementSet {
     /**
      * Instance a set of connections for the given model. This method is used internally.
      * @private
@@ -2263,10 +2369,13 @@ class DiagramSection extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getIncomingConnections() {
+    getIncomingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
         }
@@ -2277,10 +2386,13 @@ class DiagramSection extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getOutgoingConnections() {
+    getOutgoingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2291,13 +2403,19 @@ class DiagramSection extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getConnections() {
+    getConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2392,13 +2510,17 @@ class DiagramSection extends DiagramElement {
         // Set label's dimensions as a function of ours.
         if (this.label) {
             this.label.coords = [
-                this.coords[0] + (this.getConfig()?.label?.margin || 0),
-                this.coords[1] + (this.getConfig()?.label?.margin || 0)
+                this.coords[0] + getLeftMargin(this.getConfig()?.label),
+                this.coords[1] + getTopMargin(this.getConfig()?.label)
             ];
-            (this.label.width =
-                this.width - (this.getConfig()?.label?.margin || 0) * 2),
-                (this.label.height =
-                    this.height - (this.getConfig()?.label?.margin || 0) * 2);
+            this.label.width =
+                this.width -
+                    getLeftMargin(this.getConfig()?.label) -
+                    getRightMargin(this.getConfig()?.label);
+            this.label.height =
+                this.height -
+                    getTopMargin(this.getConfig()?.label) -
+                    getBottomMargin(this.getConfig()?.label);
             this.label.updateInView();
         }
         // Move decorators to match the new coords.
@@ -2410,7 +2532,7 @@ class DiagramSection extends DiagramElement {
         this.updateInView();
     }
 }
-class DiagramSectionSet extends DiagramEntitySet {
+class DiagramSectionSet extends DiagramElementSet {
     /**
      * Instance a set of sections for the given model. This method is used internally.
      * @private
@@ -2480,9 +2602,13 @@ class DiagramSectionSet extends DiagramEntitySet {
                 ...sectionLabel
             };
             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, labelConfiguration.fit);
+                section.coords[0] + getLeftMargin(labelConfiguration),
+                section.coords[1] + getTopMargin(labelConfiguration)
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width -
+                getLeftMargin(labelConfiguration) -
+                getRightMargin(labelConfiguration), section.height -
+                getTopMargin(labelConfiguration) -
+                getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
         return section;
     }
@@ -2656,10 +2782,13 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getIncomingConnections() {
+    getIncomingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
         }
@@ -2670,10 +2799,13 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getOutgoingConnections() {
+    getOutgoingConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2684,13 +2816,19 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of connections.
      */
-    getConnections() {
+    getConnections(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 result.push(incomingConnection);
             }
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 result.push(outgoingConnection);
             }
         }
@@ -2701,18 +2839,30 @@ class DiagramNode extends DiagramElement {
      * @public
      * @returns A list of nodes.
      */
-    getAdjacentNodes() {
+    getAdjacentNodes(includeRemoved = false) {
         const result = [];
         for (const port of this.ports) {
             for (const incomingConnection of port.incomingConnections) {
+                if (!includeRemoved && incomingConnection.removed) {
+                    continue;
+                }
                 const otherNode = incomingConnection.start?.getNode();
                 if (otherNode) {
+                    if (!includeRemoved && otherNode.removed) {
+                        continue;
+                    }
                     result.push(otherNode);
                 }
             }
             for (const outgoingConnection of port.outgoingConnections) {
+                if (!includeRemoved && outgoingConnection.removed) {
+                    continue;
+                }
                 const otherNode = outgoingConnection.end?.getNode();
                 if (otherNode) {
+                    if (!includeRemoved && otherNode.removed) {
+                        continue;
+                    }
                     result.push(otherNode);
                 }
             }
@@ -2920,11 +3070,17 @@ class DiagramNode extends DiagramElement {
         // Set label's dimensions as a function of ours.
         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] + getLeftMargin(this.type.label),
+                this.coords[1] + getTopMargin(this.type.label)
             ];
-            (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 -
+                    getLeftMargin(this.type.label) -
+                    getRightMargin(this.type.label);
+            this.label.height =
+                this.height -
+                    getTopMargin(this.type.label) -
+                    getBottomMargin(this.type.label);
             this.label.updateInView();
         }
         // Move decorators to match the new coords.
@@ -2936,7 +3092,7 @@ class DiagramNode extends DiagramElement {
         this.updateInView();
     }
 }
-class DiagramNodeSet extends DiagramEntitySet {
+class DiagramNodeSet extends DiagramElementSet {
     /**
      * Instance a set of nodes for the given model. This method is used internally.
      * @private
@@ -3042,9 +3198,13 @@ class DiagramNodeSet extends DiagramEntitySet {
                 ...nodeType.label
             };
             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, labelConfiguration.fit);
+                node.coords[0] + getLeftMargin(labelConfiguration),
+                node.coords[1] + getTopMargin(labelConfiguration)
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width -
+                getLeftMargin(labelConfiguration) -
+                getRightMargin(labelConfiguration), node.height -
+                getTopMargin(labelConfiguration) -
+                getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
         node.valueSet.resetValues();
         node.model.canvas?.fitNodeInView(node.id);
@@ -3061,6 +3221,10 @@ class DiagramNodeSet extends DiagramEntitySet {
             while (node.ports.length > 0) {
                 this.model.ports.remove(node.ports[0].id);
             }
+            // remove all decorators
+            while (node.decorators.length > 0) {
+                this.model.decorators.remove(node.decorators[0].id);
+            }
             // remove label
             if (node.label) {
                 this.model.fields.remove(node.label.id);
@@ -3179,7 +3343,7 @@ class DiagramPort extends DiagramElement {
         return distanceBetweenPoints(this.coords, coords);
     }
 }
-class DiagramPortSet extends DiagramEntitySet {
+class DiagramPortSet extends DiagramElementSet {
     /**
      * Instance a set of ports for the given model. This method is used internally.
      * @private
@@ -3322,7 +3486,7 @@ class DiagramField extends DiagramElement {
         return this.rootElement?.getPriority() || DEFAULT_PRIORITY;
     }
 }
-class DiagramFieldSet extends DiagramEntitySet {
+class DiagramFieldSet extends DiagramElementSet {
     /**
      * Instance a set of fields for the given model. This method is used internally.
      * @private
@@ -3363,6 +3527,206 @@ class DiagramFieldSet extends DiagramEntitySet {
         }
     }
 }
+const getBottomMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[2];
+        }
+        else {
+            return config.margin[2];
+        }
+    }
+};
+const getLeftMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[1];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[1];
+        }
+        else {
+            return config.margin[3];
+        }
+    }
+};
+const getRightMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[1];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[1];
+        }
+        else {
+            return config.margin[1];
+        }
+    }
+};
+const getTopMargin = (config) => {
+    if (config?.margin === null || config?.margin === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.margin;
+    }
+    else if (typeof config.margin === 'number') {
+        return config.margin;
+    }
+    else {
+        if (config.margin.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.margin;
+        }
+        else if (config.margin.length === 1) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 2) {
+            return config.margin[0];
+        }
+        else if (config.margin.length === 3) {
+            return config.margin[0];
+        }
+        else {
+            return config.margin[0];
+        }
+    }
+};
+const getBottomPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[2];
+        }
+        else {
+            return config.padding[2];
+        }
+    }
+};
+const getLeftPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[1];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[1];
+        }
+        else {
+            return config.padding[3];
+        }
+    }
+};
+const getRightPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[1];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[1];
+        }
+        else {
+            return config.padding[1];
+        }
+    }
+};
+const getTopPadding = (config) => {
+    if (config?.padding === null || config?.padding === undefined) {
+        return DIAGRAM_FIELD_DEFAULTS.padding;
+    }
+    else if (typeof config.padding === 'number') {
+        return config.padding;
+    }
+    else {
+        if (config.padding.length === 0) {
+            return DIAGRAM_FIELD_DEFAULTS.padding;
+        }
+        else if (config.padding.length === 1) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 2) {
+            return config.padding[0];
+        }
+        else if (config.padding.length === 3) {
+            return config.padding[0];
+        }
+        else {
+            return config.padding[0];
+        }
+    }
+};
 
 /**
  * Importer which imports a diagram from its daga model representation.
@@ -3410,9 +3774,13 @@ class DagaImporter {
                         ...newNodeType.label
                     };
                     const newField = new DiagramField(model, newNode, [
-                        newNode.coords[0] + labelConfiguration.margin,
-                        newNode.coords[1] + labelConfiguration.margin
-                    ], newNode.width - labelConfiguration.margin * 2, newNode.height - labelConfiguration.margin * 2, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+                        newNode.coords[0] + getLeftMargin(labelConfiguration),
+                        newNode.coords[1] + getTopMargin(labelConfiguration)
+                    ], newNode.width -
+                        getLeftMargin(labelConfiguration) -
+                        getRightMargin(labelConfiguration), newNode.height -
+                        getTopMargin(labelConfiguration) -
+                        getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
                     newField.text = node.label;
                     newNode.label = newField;
                     model.fields.add(newField);
@@ -3431,9 +3799,13 @@ class DagaImporter {
                             ...newNodeType.sectionGrid?.sections?.[section.indexYInNode]?.[section.indexXInNode]?.label
                         };
                         const newField = new DiagramField(model, newSection, [
-                            newSection.coords[0] + labelConfiguration.margin,
-                            newSection.coords[1] + labelConfiguration.margin
-                        ], newSection.width - labelConfiguration.margin * 2, newSection.height - labelConfiguration.margin * 2, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+                            newSection.coords[0] + getLeftMargin(labelConfiguration),
+                            newSection.coords[1] + getTopMargin(labelConfiguration)
+                        ], newSection.width -
+                            getLeftMargin(labelConfiguration) -
+                            getRightMargin(labelConfiguration), newSection.height -
+                            getTopMargin(labelConfiguration) -
+                            getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
                         newField.text = section.label;
                         newSection.label = newField;
                         model.fields.add(newField);
@@ -3650,7 +4022,7 @@ class SetGeometryCollabAction {
         this.timestamp = timestamp;
     }
     do() {
-        const node = this.canvas.model.nodes.get(this.nodeId);
+        const node = this.canvas.model.nodes.get(this.nodeId, true);
         if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
             node.setGeometry(this.to);
             // Re-fit the labels, in case their text has changed since `this.to` was measured.
@@ -3691,8 +4063,8 @@ class AddConnectionCollabAction {
         this.endId = endId;
     }
     do() {
-        const start = this.canvas.model.ports.get(this.startId);
-        const end = this.canvas.model.ports.get(this.endId);
+        const start = this.canvas.model.ports.get(this.startId, true);
+        const end = this.canvas.model.ports.get(this.endId, true);
         if (start && end) {
             this.canvas.model.connections.new(this.typeId, start, end, this.id);
         }
@@ -3723,7 +4095,7 @@ class EditFieldCollabAction {
         this.timestamp = timestamp;
     }
     do() {
-        const field = this.canvas.model.fields.get(this.fieldId);
+        const field = this.canvas.model.fields.get(this.fieldId, true);
         if (field && timestampWins(this.timestamp, field.textTimestamp)) {
             field.text = this.to;
             field.textTimestamp = this.timestamp;
@@ -3758,8 +4130,8 @@ class UpdateValuesCollabAction {
             return this.canvas.model.valueSet;
         }
         else {
-            return (this.canvas.model.nodes.get(this.id) ||
-                this.canvas.model.connections.get(this.id))?.valueSet;
+            return (this.canvas.model.nodes.get(this.id, true) ||
+                this.canvas.model.connections.get(this.id, true))?.valueSet;
         }
     }
     do() {
@@ -3807,19 +4179,19 @@ class SetSelfRemovedCollabAction {
     }
     do() {
         for (const nodeId of this.nodeIds) {
-            this.doOne(this.canvas.model.nodes.get(nodeId));
+            this.doOne(this.canvas.model.nodes.get(nodeId, true));
         }
         for (const sectionId of this.sectionIds) {
-            this.doOne(this.canvas.model.sections.get(sectionId));
+            this.doOne(this.canvas.model.sections.get(sectionId, true));
         }
         for (const portId of this.portIds) {
-            this.doOne(this.canvas.model.ports.get(portId));
+            this.doOne(this.canvas.model.ports.get(portId, true));
         }
         for (const connectionId of this.connectionIds) {
-            this.doOne(this.canvas.model.connections.get(connectionId));
+            this.doOne(this.canvas.model.connections.get(connectionId, true));
         }
         for (const fieldId of this.fieldIds) {
-            this.doOne(this.canvas.model.fields.get(fieldId));
+            this.doOne(this.canvas.model.fields.get(fieldId, true));
         }
         // update view
         this.canvas.updateNodesInView(...this.nodeIds);
@@ -3827,6 +4199,8 @@ class SetSelfRemovedCollabAction {
         this.canvas.updatePortsInView(...this.portIds);
         this.canvas.updateConnectionsInView(...this.connectionIds);
         this.canvas.updateFieldsInView(...this.fieldIds);
+        // some of the nodes and sections may have decorators, so update them
+        this.canvas.updateDecoratorsInView();
     }
     serialize() {
         return {
@@ -4472,13 +4846,13 @@ class AdjacencyLayout {
         }
         // arrange nodes
         const nodeArrangement = new Grid();
-        const nodesToBeArranged = [...model.nodes];
+        const nodesToBeArranged = model.nodes.all();
         while (nodesToBeArranged.length > 0) {
             arrangeNode(nodesToBeArranged[0], nodeArrangement, [0, 0], nodesToBeArranged);
         }
         // place nodes according to arrangement
-        const maximumWidth = Math.max(...model.nodes.all().map((n) => n.width));
-        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
+        const maximumWidth = Math.max(...model.nodes.map((n) => n.width));
+        const maximumHeight = Math.max(...model.nodes.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) {
@@ -4518,7 +4892,7 @@ class BreadthAdjacencyLayout {
         }
         // arrange nodes
         const nodeArrangement = new Grid();
-        const nodesToBeArranged = [...model.nodes];
+        const nodesToBeArranged = model.nodes.all();
         const nodeGridIndices = {};
         const firstNode = nodesToBeArranged[0];
         let currentNodeLevel = [firstNode];
@@ -4528,7 +4902,9 @@ class BreadthAdjacencyLayout {
             for (const nodeInThisLevel of currentNodeLevel) {
                 nodeArrangement.set(nodeArrangement.getClosestEmptyCoordinate(nodeGridIndices[nodeInThisLevel.id]), nodeInThisLevel);
                 removeIfExists(nodesToBeArranged, nodeInThisLevel);
-                const nodesAdjacentToThisNode = nodeInThisLevel.getAdjacentNodes();
+                const nodesAdjacentToThisNode = nodeInThisLevel
+                    .getAdjacentNodes()
+                    .filter((n) => !n.removed);
                 for (const adjacentNode of nodesAdjacentToThisNode) {
                     if (nodesToBeArranged.includes(adjacentNode)) {
                         nextNodeLevel.push(adjacentNode);
@@ -4548,8 +4924,8 @@ class BreadthAdjacencyLayout {
             }
         }
         // place nodes according to arrangement
-        const maximumWidth = Math.max(...model.nodes.all().map((n) => n.width));
-        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
+        const maximumWidth = Math.max(...model.nodes.map((n) => n.width));
+        const maximumHeight = Math.max(...model.nodes.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) {
@@ -4578,7 +4954,7 @@ class BreadthLayout {
             return model;
         }
         const gapSize = (model.canvas?.gridSize || 0) * 2;
-        let nodesToBeArranged = [...model.nodes];
+        let nodesToBeArranged = model.nodes.all();
         // Arrange nodes by a breadth first search
         const firstNode = nodesToBeArranged[0];
         removeIfExists(nodesToBeArranged, firstNode);
@@ -4594,7 +4970,9 @@ class BreadthLayout {
             const lastRowOfNodes = nodeArrangement[nodeArrangement.length - 1];
             const nodesInNextRow = [];
             for (const nodeInLastRow of lastRowOfNodes) {
-                const nodesAdjacentToThisNode = nodeInLastRow.getAdjacentNodes();
+                const nodesAdjacentToThisNode = nodeInLastRow
+                    .getAdjacentNodes()
+                    .filter((n) => !n.removed);
                 for (const adjacentNode of nodesAdjacentToThisNode) {
                     if (nodesToBeArranged.includes(adjacentNode)) {
                         removeIfExists(nodesToBeArranged, adjacentNode);
@@ -4799,17 +5177,17 @@ class PriorityLayout {
             // nothing to arrange...
             return model;
         }
-        const maximumPriority = Math.max(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
-        const minimumPriority = Math.min(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
+        const maximumPriority = Math.max(...model.nodes.map((n) => n.getPriority()));
+        const minimumPriority = Math.min(...model.nodes.map((n) => n.getPriority()));
         if (maximumPriority === minimumPriority) {
             // if there's no disparity in priorities, just use breadth layout
             new BreadthLayout().apply(model);
             return model;
         }
         const gapSize = (model.canvas?.gridSize || 0) * 2;
-        const nodesToBeArranged = [...model.nodes];
+        const nodesToBeArranged = model.nodes.all();
         const nodeArrangement = [];
-        const nodesWithMaximumPriorityToBeArranged = model.nodes.filter((n) => !n.removed && n.getPriority() >= maximumPriority);
+        const nodesWithMaximumPriorityToBeArranged = model.nodes.filter((n) => n.getPriority() >= maximumPriority);
         const nodesWithMaximumPriority = [];
         if (nodesWithMaximumPriorityToBeArranged.length > 1) {
             // use bfs to sort nodes by distance to the first node
@@ -4825,7 +5203,9 @@ class PriorityLayout {
                     nodesWithMaximumPriority.push(bfsNode);
                     removeIfExists(nodesWithMaximumPriorityToBeArranged, bfsNode);
                 }
-                const bfsAdjacentNodes = bfsNode.getAdjacentNodes();
+                const bfsAdjacentNodes = bfsNode
+                    .getAdjacentNodes()
+                    .filter((n) => !n.removed);
                 for (const bfsAdjacentNode of bfsAdjacentNodes) {
                     if (!bfsExplored.includes(bfsAdjacentNode)) {
                         bfsQueue.push(bfsAdjacentNode);
@@ -4865,7 +5245,9 @@ class PriorityLayout {
                     break;
                 }
                 else {
-                    const bfsAdjacentNodes = bfsNode.getAdjacentNodes();
+                    const bfsAdjacentNodes = bfsNode
+                        .getAdjacentNodes()
+                        .filter((n) => !n.removed);
                     for (const bfsAdjacentNode of bfsAdjacentNodes) {
                         if (!bfsExplored.includes(bfsAdjacentNode)) {
                             bfsQueue.push(bfsAdjacentNode);
@@ -4908,8 +5290,8 @@ class TreeLayout {
             // nothing to arrange...
             return model;
         }
-        const maximumPriority = Math.max(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
-        const minimumPriority = Math.min(...model.nodes.filter((n) => !n.removed).map((n) => n.getPriority()));
+        const maximumPriority = Math.max(...model.nodes.map((n) => n.getPriority()));
+        const minimumPriority = Math.min(...model.nodes.map((n) => n.getPriority()));
         if (maximumPriority === minimumPriority) {
             // if there's no disparity in priorities, just use breadth layout
             new BreadthLayout().apply(model);
@@ -4930,7 +5312,7 @@ class TreeLayout {
             branchArrangement.push([branch]);
             arrangeBranches(branch, branchArrangement, branchArrangement.length);
         }
-        const maximumHeight = Math.max(...model.nodes.all().map((n) => n.height));
+        const maximumHeight = Math.max(...model.nodes.map((n) => n.height));
         let widthAccumulator = 0;
         for (let i = 0; i < branchArrangement.length; ++i) {
             let heightAccumulator = 0;
@@ -4951,7 +5333,9 @@ class TreeLayout {
     }
 }
 const populateBranches = (branch, nodesToBeArranged) => {
-    for (const adjacentNode of branch.node.getAdjacentNodes()) {
+    for (const adjacentNode of branch.node
+        .getAdjacentNodes()
+        .filter((n) => !n.removed)) {
         const indexOfAdjacentNode = nodesToBeArranged.indexOf(adjacentNode);
         if (indexOfAdjacentNode >= 0) {
             nodesToBeArranged.splice(indexOfAdjacentNode, 1);
@@ -5260,12 +5644,12 @@ class DagaExporter {
         if (model.description) {
             result.description = model.description;
         }
-        for (const node of model.nodes) {
+        for (const node of model.nodes.all(true)) {
             if (!includeCollabMeta && node.removed)
                 continue;
             result.nodes.push(this.exportNode(node, includeCollabMeta));
         }
-        for (const connection of model.connections) {
+        for (const connection of model.connections.all(true)) {
             if (!includeCollabMeta && connection.removed)
                 continue;
             result.connections.push(this.exportConnection(connection, includeCollabMeta));
@@ -5424,11 +5808,12 @@ class DiagramEvent {
  * @public
  */
 class DiagramDecorator extends DiagramElement {
-    constructor(model, coords, width, height, priority, html, id) {
+    constructor(model, rootElement, coords, width, height, priority, html, id) {
         if (model.objects.get(id) !== undefined) {
             throw new Error(`DiagramObject with id "${id}" already exists`);
         }
         super(model, id);
+        this.rootElement = rootElement;
         this.coords = coords;
         this.width = width;
         this.height = height;
@@ -5441,7 +5826,8 @@ class DiagramDecorator extends DiagramElement {
             ?.select(`foreignObject#${this.id}`);
     }
     get removed() {
-        return this.selfRemoved;
+        return (this.selfRemoved ||
+            (this.rootElement !== undefined && this.rootElement.removed));
     }
     updateInView() {
         this.model.canvas?.updateDecoratorsInView(this.id);
@@ -5459,7 +5845,7 @@ class DiagramDecorator extends DiagramElement {
         return this.priority;
     }
 }
-class DiagramDecoratorSet extends DiagramEntitySet {
+class DiagramDecoratorSet extends DiagramElementSet {
     /**
      * Instance a set of decorators for the given model. This method is used internally.
      * @private
@@ -5473,7 +5859,7 @@ class DiagramDecoratorSet extends DiagramEntitySet {
      * @private
      */
     new(rootElement, coords, width, height, priority, html, id) {
-        const decorator = new DiagramDecorator(this.model, coords, width, height, priority, html, id);
+        const decorator = new DiagramDecorator(this.model, rootElement, coords, width, height, priority, html, id);
         super.add(decorator);
         decorator.updateInView();
         // add this port to its root element
@@ -5483,12 +5869,17 @@ class DiagramDecoratorSet extends DiagramEntitySet {
         return decorator;
     }
     remove(id) {
-        const object = this.get(id);
-        if (object) {
+        const decorator = this.get(id);
+        if (decorator) {
+            // remove from root element
+            if (decorator.rootElement instanceof DiagramNode ||
+                decorator.rootElement instanceof DiagramSection) {
+                removeIfExists(decorator.rootElement.decorators, decorator);
+            }
             // remove from set of objects
             super.remove(id);
             // remove from canvas
-            object.updateInView();
+            decorator.updateInView();
         }
     }
 }
@@ -5534,7 +5925,7 @@ class DiagramObject extends DiagramElement {
         return this.priority;
     }
 }
-class DiagramObjectSet extends DiagramEntitySet {
+class DiagramObjectSet extends DiagramElementSet {
     /**
      * Instance a set of objects for the given model. This method is used internally.
      * @private
@@ -5641,6 +6032,7 @@ class DiagramModel {
         this.connections.clear();
         this.fields.clear();
         this.objects.clear();
+        this.decorators.clear();
         this.valueSet.resetValues();
         this.canvas?.updateModelInView();
     }
@@ -5798,20 +6190,20 @@ class DiagramCanvas {
             if (event.ctrlKey && event.key === 'a') {
                 event.preventDefault();
                 // select all
-                for (const node of this.model.nodes.filter((n) => !n.removed)) {
+                for (const node of this.model.nodes) {
                     this.addToUserSelection(node);
                 }
-                for (const connection of this.model.connections.filter((c) => !c.removed)) {
+                for (const connection of this.model.connections) {
                     this.addToUserSelection(connection);
                 }
             }
             if (event.ctrlKey && event.key === 'i') {
                 event.preventDefault();
                 // invert selection
-                for (const node of this.model.nodes.filter((n) => !n.removed)) {
+                for (const node of this.model.nodes) {
                     this.toggleUserSelection(node);
                 }
-                for (const connection of this.model.connections.filter((c) => !c.removed)) {
+                for (const connection of this.model.connections) {
                     this.toggleUserSelection(connection);
                 }
             }
@@ -5839,13 +6231,45 @@ class DiagramCanvas {
                 this.cancelAllUserActions();
             }
             if (event.ctrlKey && event.key === 'y') {
+                event.preventDefault();
                 // redo
                 this.actionQueue.redo();
             }
             if (event.ctrlKey && event.key === 'z') {
+                event.preventDefault();
                 // undo
                 this.actionQueue.undo();
             }
+            if (event.key === '+') {
+                event.preventDefault();
+                // zoom in
+                this.parentComponent.diagramButtons.zoomIn();
+            }
+            if (event.key === '-') {
+                event.preventDefault();
+                // zoom out
+                this.parentComponent.diagramButtons.zoomOut();
+            }
+            if (event.key === Keys.ArrowLeft) {
+                event.preventDefault();
+                // move left, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(-100 / this.zoomTransform.k, 0);
+            }
+            if (event.key === Keys.ArrowRight) {
+                event.preventDefault();
+                // move right, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(100 / this.zoomTransform.k, 0);
+            }
+            if (event.key === Keys.ArrowDown) {
+                event.preventDefault();
+                // move down, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(0, -100 / this.zoomTransform.k);
+            }
+            if (event.key === Keys.ArrowUp) {
+                event.preventDefault();
+                // move up, faster if we're zoomed out and slower if we're zoomed in
+                this.translateBy(0, 100 / this.zoomTransform.k);
+            }
         });
         const canvasView = this.selectRoot()
             .append('g')
@@ -5968,13 +6392,14 @@ 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.all().map((n) => n.coords[0]));
-            const maximumX = Math.max(...this.model.nodes.all().map((n) => n.coords[0] + n.width));
+            const nonRemovedNodes = this.model.nodes.all();
+            const minimumX = Math.min(...nonRemovedNodes.map((n) => n.coords[0]));
+            const maximumX = Math.max(...nonRemovedNodes.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.all().map((n) => n.coords[1]));
-            const maximumY = Math.max(...this.model.nodes.all().map((n) => n.coords[1] + n.height));
+            const minimumY = Math.min(...nonRemovedNodes.map((n) => n.coords[1]));
+            const maximumY = Math.max(...nonRemovedNodes.map((n) => n.coords[1] + n.height));
             const averageY = (minimumY + maximumY) / 2;
             const rangeY = maximumY - minimumY;
             const windowRangeY = canvasViewBoundingBox.height;
@@ -6070,10 +6495,9 @@ class DiagramCanvas {
     updateNodesInView(...ids) {
         let updateSelection = this.selectCanvasNodes()
             .selectAll('g.diagram-node')
-            .data(this.model.nodes.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.nodes.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -6609,10 +7033,9 @@ class DiagramCanvas {
     updateSectionsInView(...ids) {
         let updateSelection = this.selectCanvasSections()
             .selectAll('g.diagram-section')
-            .data(this.model.sections.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.sections.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7167,10 +7590,9 @@ class DiagramCanvas {
     updatePortsInView(...ids) {
         let updateSelection = this.selectCanvasPorts()
             .selectAll('g.diagram-port')
-            .data(this.model.ports.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.ports.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7273,7 +7695,7 @@ class DiagramCanvas {
                         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                         let minDistanceFound = Number.POSITIVE_INFINITY;
                         let closestPortFound = undefined;
-                        for (const port of this.model.ports.filter((p) => !p.removed)) {
+                        for (const port of this.model.ports) {
                             const distance = port.distanceTo(pointerCoords);
                             if (distance < minDistanceFound) {
                                 minDistanceFound = distance;
@@ -7345,10 +7767,9 @@ class DiagramCanvas {
             .attr('opacity', (d) => (d.highlighted || d.selected ? 0.5 : 0));
     }
     updateConnectionsInView(...ids) {
-        const connectionList = this.model.connections.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true));
+        const connectionList = this.model.connections.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true);
         if (this.unfinishedConnection) {
             connectionList.push(this.unfinishedConnection);
         }
@@ -7452,10 +7873,9 @@ class DiagramCanvas {
     updateFieldsInView(...ids) {
         let updateSelection = this.selectCanvasFields()
             .selectAll('foreignObject.diagram-field')
-            .data(this.model.fields.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.fields.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7629,10 +8049,9 @@ class DiagramCanvas {
     updateObjectsInView(...ids) {
         let updateSelection = this.selectCanvasObjects()
             .selectAll('foreignObject.diagram-object')
-            .data(this.model.objects.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.objects.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7667,10 +8086,9 @@ class DiagramCanvas {
     updateDecoratorsInView(...ids) {
         let updateSelection = this.selectCanvasDecorators()
             .selectAll('foreignObject.diagram-decorator')
-            .data(this.model.decorators.filter((e) => !e.removed &&
-            (this.priorityThreshold !== undefined
-                ? e.getPriority() >= this.priorityThreshold
-                : true)), (d) => d.id);
+            .data(this.model.decorators.filter((e) => this.priorityThreshold !== undefined
+            ? e.getPriority() >= this.priorityThreshold
+            : true), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -7734,13 +8152,14 @@ class DiagramCanvas {
                 const boundingWidth = !connection.startLabel
                     ? 0
                     : startLabelBoundingRect.width / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getLeftPadding(labelConfiguration) +
+                        getRightPadding(labelConfiguration);
                 const boundingHeight = !connection.startLabel
                     ? 0
                     : startLabelBoundingRect.height / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
-                const pathStartLabelPoint = pathNode.getPointAtLength(labelConfiguration.margin +
-                    Math.max(boundingWidth / 2, boundingHeight / 2));
+                        getTopPadding(labelConfiguration) +
+                        getBottomPadding(labelConfiguration);
+                const pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
                 connectionSelection
                     .select('g.diagram-connection-start-label path')
                     .attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight))
@@ -7774,11 +8193,13 @@ class DiagramCanvas {
                 const boundingWidth = !connection.middleLabel
                     ? 0
                     : middleLabelBoundingRect.width / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getLeftPadding(labelConfiguration) +
+                        getRightPadding(labelConfiguration);
                 const boundingHeight = !connection.middleLabel
                     ? 0
                     : middleLabelBoundingRect.height / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getTopPadding(labelConfiguration) +
+                        getBottomPadding(labelConfiguration);
                 const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
                 connectionSelection
                     .select('g.diagram-connection-middle-label path')
@@ -7813,14 +8234,15 @@ class DiagramCanvas {
                 const boundingWidth = !connection.endLabel
                     ? 0
                     : endLabelBoundingRect.width / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getLeftPadding(labelConfiguration) +
+                        getRightPadding(labelConfiguration);
                 const boundingHeight = !connection.endLabel
                     ? 0
                     : endLabelBoundingRect.height / this.zoomTransform.k +
-                        labelConfiguration.padding * 2;
+                        getTopPadding(labelConfiguration) +
+                        getBottomPadding(labelConfiguration);
                 const pathEndLabelPoint = pathNode.getPointAtLength(pathLength -
-                    labelConfiguration.margin -
-                    Math.max(boundingWidth / 2, boundingHeight / 2));
+                    Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
                 connectionSelection
                     .select('g.diagram-connection-end-label path')
                     .attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight))
@@ -7887,10 +8309,12 @@ class DiagramCanvas {
         if (field.rootElement instanceof DiagramNode && field.fit) {
             const fieldDimensions = this.minimumSizeOfField(field);
             let stretchX = fieldDimensions[0] +
-                2 * (field.rootElement.type.label?.margin || 0) -
+                getLeftMargin(field.rootElement.type.label) +
+                getRightMargin(field.rootElement.type.label) -
                 field.rootElement.width;
             let stretchY = fieldDimensions[1] +
-                2 * (field.rootElement.type.label?.margin || 0) -
+                getTopMargin(field.rootElement.type.label) +
+                getBottomMargin(field.rootElement.type.label) -
                 field.rootElement.height;
             if (this.snapToGrid) {
                 stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
@@ -7931,10 +8355,12 @@ class DiagramCanvas {
                 fieldDimensions[1] = minimumFieldHeight;
             }
             let stretchX = fieldDimensions[0] +
-                2 * (field.rootElement?.getConfig()?.label?.margin || 0) -
+                getLeftMargin(field.rootElement?.getConfig()?.label) +
+                getRightMargin(field.rootElement?.getConfig()?.label) -
                 field.rootElement.width;
             let stretchY = fieldDimensions[1] +
-                2 * (field.rootElement?.getConfig()?.label?.margin || 0) -
+                getTopMargin(field.rootElement?.getConfig()?.label) +
+                getBottomMargin(field.rootElement?.getConfig()?.label) -
                 field.rootElement.height;
             if (this.snapToGrid) {
                 stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
@@ -9169,7 +9595,7 @@ class PaletteComponent {
             };
             thisComponent
                 .append('text')
-                .attr('transform', `translate(${type.defaultWidth / 2},${type.defaultHeight / 2 + 5})`)
+                .attr('transform', `translate(${(getLeftMargin(labelConfig) + type.defaultWidth) / 2},${(getTopMargin(labelConfig) + type.defaultHeight) / 2})`)
                 .attr('x', 0)
                 .attr('y', 0)
                 .attr('font-size', `${labelConfig.fontSize}px`)
@@ -10527,5 +10953,5 @@ function now() {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollabClient, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
+export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollabClient, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramEditorComponent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, SetGeometryAction, Side, TextListEditorComponent, TextMapEditorComponent, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map