@metadev/daga 1.0.0 → 1.1.0

package/fesm2022/metadev-daga.mjs

@@ -223,8 +223,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 +294,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) {
@@ -634,7 +634,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 +654,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 +664,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 +762,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) {
@@ -1336,14 +1336,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 +1369,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 +1384,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 +1403,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 +1427,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 +1448,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 +1474,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 +1543,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 +1574,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 +1583,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 +1605,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 +1627,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 +1636,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 +1650,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 +1669,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 +1681,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 +1692,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 +1707,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 +1720,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 +1731,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 +1755,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 +1780,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 +2202,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,56 +2272,62 @@ 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 = {
-    lookType: 'shaped-look',
-    shape: ClosedShape.Rectangle,
-    color: '#FFFFFF',
-    borderColor: '#000000',
-    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_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 +2337,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 +2403,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 +2433,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 +2487,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]);
-                    }
-                }
-                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]]);
+}
+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.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_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_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 +2671,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 +2740,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 +2794,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,15 +2828,186 @@ 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();
+    }
+    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;
+        }
+        this.stretch(direction, distance);
+    }
+}
+class DiagramNodeSet extends DiagramEntitySet {
+    constructor(model) {
+        super();
+        this.types = new DiagramEntitySet();
+        this.model = model;
+    }
+    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 &&
+            (type.sections.sectionsY || 0) > 0) {
+            const sectionConfiguration = {
+                ...DIAGRAM_SECTION_DEFAULTS,
+                ...type.sections
+            };
+            const sectionsX = sectionConfiguration.sectionsX;
+            const sectionsY = sectionConfiguration.sectionsY;
+            const margin = sectionConfiguration.margin;
+            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 = [
+                        node.coords[0] + margin + i * (widthPerSection + margin),
+                        node.coords[1] + margin + j * (heightPerSection + margin)
+                    ];
+                    this.model.sections.new(node, coords, widthPerSection, heightPerSection, sectionIds && sectionIds.length > sectionCount
+                        ? sectionIds[sectionCount]
+                        : undefined, sectionPortIds && sectionPortIds.length > sectionCount
+                        ? sectionPortIds[sectionCount]
+                        : undefined, sectionPortLabelIds && sectionPortLabelIds.length > sectionCount
+                        ? sectionPortLabelIds[sectionCount]
+                        : undefined);
+                    ++sectionCount;
+                }
+            }
+        }
+        // add node ports
+        if (type.ports.length > 0) {
+            for (let i = 0; i < type.ports.length; ++i) {
+                const portConfig = type.ports[i];
+                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 = {
+                        ...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);
+                }
+            }
         }
-        this.updateInView();
+        // add node label
+        if (type.label) {
+            const labelConfiguration = {
+                ...DIAGRAM_FIELD_DEFAULTS,
+                ...type.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, labelId);
+        }
+        return node;
+    }
+    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();
+        }
+    }
+    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));
     }
 }
 
@@ -2664,13 +3020,13 @@ const DIAGRAM_PORT_DEFAULTS = {
 class DiagramPort extends DiagramElement {
     constructor(model, rootElement, coords, direction, id) {
         let uniqueId;
-        if (id !== undefined && model.getPort(id) === undefined) {
+        if (id !== undefined && model.ports.get(id) === undefined) {
             uniqueId = id;
         }
         else {
             do {
                 uniqueId = `diagram-port-${++idTicker$1}`;
-            } while (model.getPort(uniqueId) !== undefined);
+            } while (model.ports.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
         this.outgoingConnections = [];
@@ -2723,6 +3079,71 @@ class DiagramPort extends DiagramElement {
         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 = {
@@ -2749,13 +3170,13 @@ class DiagramField extends DiagramElement {
     }
     constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, id) {
         let uniqueId;
-        if (id !== undefined && model.getField(id) === undefined) {
+        if (id !== undefined && model.fields.get(id) === undefined) {
             uniqueId = id;
         }
         else {
             do {
                 uniqueId = `diagram-field-${++idTicker}`;
-            } while (model.getField(uniqueId) !== undefined);
+            } while (model.fields.get(uniqueId) !== undefined);
         }
         super(model, uniqueId);
         this.rootElement = rootElement;
@@ -2794,6 +3215,57 @@ class DiagramField extends DiagramElement {
         return undefined;
     }
 }
+class DiagramFieldSet extends DiagramEntitySet {
+    constructor(model) {
+        super();
+        this.model = model;
+    }
+    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;
+        }
+        return field;
+    }
+    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();
+        }
+    }
+    filter(threshold) {
+        return this.entities.filter((e) => {
+            if (threshold) {
+                const node = e.getClosestNode();
+                return node !== undefined && node.type.priority >= threshold;
+            }
+            return true;
+        });
+    }
+    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
@@ -2808,13 +3280,11 @@ class DiagramModel {
     }
     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.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;
@@ -2838,390 +3308,29 @@ class DiagramModel {
         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.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();
         }
     }
-    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();
-        // add node sections
-        if (type.sections !== null &&
-            (type.sections.sectionsX || 0) > 0 &&
-            (type.sections.sectionsY || 0) > 0) {
-            const sectionConfiguration = {
-                ...DIAGRAM_SECTION_DEFAULTS,
-                ...type.sections
-            };
-            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;
-            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)
-                    ];
-                    this.addSection(newNode, coords, widthPerSection, heightPerSection, sectionIds && sectionIds.length > sectionCount
-                        ? sectionIds[sectionCount]
-                        : undefined, sectionPortIds && sectionPortIds.length > sectionCount
-                        ? sectionPortIds[sectionCount]
-                        : undefined, sectionPortLabelIds && sectionPortLabelIds.length > sectionCount
-                        ? sectionPortLabelIds[sectionCount]
-                        : undefined);
-                    ++sectionCount;
-                }
-            }
-        }
-        // add node ports
-        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]
-                ], 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;
-                }
-            }
-        }
-        // add node label
-        if (type.label) {
-            const labelConfiguration = {
-                ...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;
-        }
-        return newNode;
-    }
-    deleteNode(node) {
-        // remove all ports
-        while (node.sections.length > 0) {
-            this.deleteSection(node.sections[0]);
-        }
-        while (node.ports.length > 0) {
-            this.deletePort(node.ports[0]);
-        }
-        if (node.label) {
-            this.deleteField(node.label);
-        }
-        // remove from list of nodes
-        removeIfExists(this.nodes, node);
-        node.updateInView();
-    }
-    hasNodeOfType(type) {
-        return this.nodes.find((e) => e.type.id === type) !== undefined;
-    }
-    getSection(id) {
-        return this.sections.find((e) => e.id === id);
-    }
-    getSections(threshold) {
-        if (threshold === undefined) {
-            return this.sections;
-        }
-        else {
-            return this.sections.filter((e) => (e.node?.type?.priority || Number.NEGATIVE_INFINITY) >= threshold);
-        }
-    }
-    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;
-                }
-            }
-        }
-        // 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;
-        }
-        return newSection;
-    }
-    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);
-        }
-        removeIfExists(this.sections, section);
-        section.updateInView();
-    }
-    getPort(id) {
-        return this.ports.find((e) => e.id === id);
-    }
-    getPorts(threshold) {
-        if (threshold === undefined) {
-            return this.ports;
-        }
-        else {
-            return this.ports.filter((e) => (e.getNode()?.type?.priority || Number.NEGATIVE_INFINITY) >= threshold);
-        }
-    }
-    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);
-        }
-        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);
-        }
-        // remove from lists of ports
-        if (port.rootElement instanceof DiagramNode) {
-            removeIfExists(port.rootElement.ports, port);
-        }
-        else if (port.rootElement instanceof DiagramSection) {
-            removeIfExists(port.rootElement.ports, port);
-        }
-        removeIfExists(this.ports, port);
-        // remove from canvas
-        port.updateInView();
-    }
-    getConnection(id) {
-        return this.connections.find((e) => e.id === id);
-    }
-    getConnections(threshold) {
-        if (threshold === undefined) {
-            return this.connections;
-        }
-        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();
-    }
-    getField(id) {
-        return this.fields.find((e) => e.id === id);
-    }
-    getFields(threshold) {
-        if (threshold === undefined) {
-            return this.fields;
-        }
-        else {
-            return this.fields.filter((e) => {
-                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;
-    }
-    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;
-            }
-        }
-        else if (field.rootElement instanceof DiagramPort) {
-            if (field.rootElement.label === field) {
-                field.rootElement.label = undefined;
-            }
-        }
-        // remove from canvas
-        field.updateInView();
-    }
 }
 
 /**
  * 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
@@ -3264,7 +3373,7 @@ class DiagramCanvas {
                     ...config.nodeTypeDefaults,
                     ...nodeTypeConfig
                 });
-                this.model.nodeTypes.push(nodeType);
+                this.model.nodes.types.add(nodeType);
             }
         }
         // load connection types
@@ -3274,11 +3383,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 +3404,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)
@@ -3456,13 +3563,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 +3631,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()
@@ -3643,7 +3750,7 @@ 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) {
                 d3.select('body').style('cursor', 'ew-resize');
@@ -3686,7 +3793,7 @@ 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) {
                 d3.select('body').style('cursor', 'ns-resize');
@@ -3729,7 +3836,7 @@ 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) {
                 d3.select('body').style('cursor', 'ew-resize');
@@ -3772,7 +3879,7 @@ 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) {
                 d3.select('body').style('cursor', 'ns-resize');
@@ -3945,8 +4052,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 +4061,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 +4075,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()
@@ -4096,7 +4203,7 @@ 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) {
                 d3.select('body').style('cursor', 'ew-resize');
@@ -4139,7 +4246,7 @@ 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) {
                 d3.select('body').style('cursor', 'ns-resize');
@@ -4182,7 +4289,7 @@ 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) {
                 d3.select('body').style('cursor', 'ew-resize');
@@ -4225,7 +4332,7 @@ 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) {
                 d3.select('body').style('cursor', 'ns-resize');
@@ -4427,8 +4534,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 +4543,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 +4557,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()
@@ -4547,7 +4654,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 +4750,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()
@@ -4979,9 +5086,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 +5129,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) {
@@ -5415,7 +5531,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) {
@@ -5510,7 +5627,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 +5637,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 +5695,8 @@ class PaletteComponent {
                 .style('top', 0)
                 .style('z-index', 'auto');
             // try to place node
-            if (type.isUnique && this.canvas.model.hasNodeOfType(type.id)) {
+            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;
             }
@@ -6163,11 +6281,11 @@ class DiagramComponent {
         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.ɵ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:relative;display:block;min-width:40rem;min-height:20rem;width:100%;height:100%}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", 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], styles: [":host{position:relative;display:block;min-width:40rem;min-height:20rem;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -6315,10 +6433,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 +6455,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 +6475,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 +6518,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 +6528,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 +6564,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 +6572,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;