@metadev/daga 1.4.0 → 1.4.2

package/fesm2022/metadev-daga.mjs

@@ -1,13 +1,12 @@
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { ElementRef, Component, Input, Injectable, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
 import * as d3 from 'd3';
-import * as i4 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3 from '@metadev/lux';
-import { LuxModule } from '@metadev/lux';
 import { Subject, merge, delay, map } from 'rxjs';
+import { v4 } from 'uuid';
 
 /**
  * An enumeration of the possible sides of a rectangle and directions parallel to the axes of coordinates.
@@ -243,6 +242,100 @@ const addIfNotExists = (arr, obj) => {
     return arr;
 };
 
+/**
+ * Returns whether the incoming timestamp wins over the existing timestamp.
+ *
+ * In the DiagramModel, timestamps that have never been set are left undefined;
+ * `timestampWins` treats that as an "initial timestamp" that loses to all LogicalTimestamps.
+ */
+function timestampWins(incoming, existing) {
+    if (existing === undefined)
+        return true;
+    if (incoming[0] > existing[0])
+        return true;
+    if (incoming[0] === existing[0]) {
+        // In case of equality, declare the incoming timestamp the "winner".
+        // This occurs if a client reuses a timestamp for multiple actions in a row,
+        // in which case the last created should win.
+        return incoming[1] >= existing[1];
+    }
+    return false;
+}
+
+/**
+ * Collaborative action which consists of adding a node.
+ * @see AddNodeAction
+ * @private
+ */
+class AddNodeCollabAction {
+    constructor(canvas, id, nodeTypeId, coords, label, values) {
+        this.canvas = canvas;
+        this.id = id;
+        this.nodeTypeId = nodeTypeId;
+        this.coords = coords;
+        this.label = label;
+        this.values = values;
+    }
+    do() {
+        const node = this.canvas.model.nodes.new(this.nodeTypeId, this.coords, this.id);
+        if (this.values !== undefined) {
+            node.valueSet.setValues(structuredClone({
+                ...node.valueSet.getValues(),
+                ...this.values
+            }));
+        }
+        if (node.label) {
+            node.label.text = this.label || '';
+        }
+    }
+    serialize() {
+        return {
+            type: 'add',
+            id: this.id,
+            nodeTypeId: this.nodeTypeId,
+            coords: this.coords,
+            label: this.label,
+            values: this.values
+        };
+    }
+    static deserialize(canvas, serialized) {
+        return new AddNodeCollabAction(canvas, serialized.id, serialized.nodeTypeId, serialized.coords, serialized.label, serialized.values);
+    }
+}
+/**
+ * Collaborative action which consists of moving a node.
+ * @see MoveNodeAction
+ * @private
+ */
+class MoveNodeCollabAction {
+    constructor(canvas, nodeId, to, timestamp) {
+        this.canvas = canvas;
+        this.nodeId = nodeId;
+        this.to = to;
+        this.timestamp = timestamp;
+    }
+    do() {
+        const node = this.canvas.model.nodes.get(this.nodeId);
+        if (!node)
+            return;
+        if (timestampWins(this.timestamp, node.coordsTimestamp)) {
+            node.move(this.to);
+            node.coordsTimestamp = this.timestamp;
+        }
+    }
+    serialize() {
+        return {
+            type: 'move',
+            nodeId: this.nodeId,
+            to: this.to,
+            timestamp: this.timestamp
+        };
+    }
+    static deserialize(canvas, serialized) {
+        return new MoveNodeCollabAction(canvas, serialized.nodeId, serialized.to, serialized.timestamp);
+    }
+}
+
 /**
  * A queue of recent actions taken by the user that can be undone and redone.
  * @private
@@ -362,38 +455,71 @@ var DiagramActions;
  * @private
  */
 class AddNodeAction {
-    constructor(canvas, type, coords, label, values, id) {
+    constructor(canvas, type, coords, label, values) {
         this.canvas = canvas;
         this.type = type;
         this.coords = coords;
         this.label = label;
         this.values = values;
-        this.id = id;
+        this.id = this.canvas.collabEngine.freshId();
+    }
+    do() {
+        const collabAction = new AddNodeCollabAction(this.canvas, this.id, this.type.id, this.coords, this.label, this.values);
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     undo() {
-        if (this.id) {
-            this.canvas.model.nodes.remove(this.id);
+        const node = this.canvas.model.nodes.get(this.id);
+        if (node) {
+            node.removed = true;
+            for (const section of node.sections) {
+                section.removed = true;
+                for (const port of section.ports) {
+                    port.removed = true;
+                    port.updateInView();
+                }
+                if (section.label) {
+                    section.label.removed = true;
+                    section.label.updateInView();
+                }
+                section.updateInView();
+            }
+            for (const port of node.ports) {
+                port.removed = true;
+                port.updateInView();
+            }
+            if (node.label) {
+                node.label.removed = true;
+                node.label.updateInView();
+            }
+            node.updateInView();
         }
     }
     redo() {
-        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(),
-                ...this.values
-            }));
-        }
-        if (node.label) {
-            node.label.text = this.label || '';
+        const node = this.canvas.model.nodes.get(this.id);
+        if (node) {
+            node.removed = false;
+            for (const section of node.sections) {
+                section.removed = false;
+                for (const port of section.ports) {
+                    port.removed = false;
+                    port.updateInView();
+                }
+                if (section.label) {
+                    section.label.removed = false;
+                    section.label.updateInView();
+                }
+                section.updateInView();
+            }
+            for (const port of node.ports) {
+                port.removed = false;
+                port.updateInView();
+            }
+            if (node.label) {
+                node.label.removed = false;
+                node.label.updateInView();
+            }
+            node.updateInView();
         }
-        // reset our ids in case they were automatically generated
-        this.id = node.id;
-        this.sectionIds = node.sections.map((s) => s.id);
-        this.sectionPortIds = node.sections.map((s) => s.ports.map((p) => p.id));
-        this.sectionPortLabelIds = node.sections.map((s) => s.ports.map((p) => p.label?.id));
-        this.portIds = node.ports.map((p) => p.id);
-        this.portLabelIds = node.ports.map((p) => p.label?.id);
-        this.labelId = node.label?.id;
     }
 }
 /**
@@ -408,11 +534,16 @@ class MoveNodeAction {
         this.from = from;
         this.to = to;
     }
+    do() {
+        const collabAction = new MoveNodeCollabAction(this.canvas, this.nodeId, this.to, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
+    }
     undo() {
-        this.canvas.model.nodes.get(this.nodeId)?.move(this.from);
+        const collabAction = new MoveNodeCollabAction(this.canvas, this.nodeId, this.from, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction);
     }
     redo() {
-        this.canvas.model.nodes.get(this.nodeId)?.move(this.to);
+        this.do();
     }
 }
 /**
@@ -428,15 +559,18 @@ class StretchNodeAction {
         this.from = from;
         this.to = to;
     }
+    do() {
+        this.canvas.model.nodes
+            .get(this.nodeId)
+            ?.stretch(this.direction, this.to - this.from);
+    }
     undo() {
         this.canvas.model.nodes
             .get(this.nodeId)
             ?.stretch(this.direction, this.from - this.to);
     }
     redo() {
-        this.canvas.model.nodes
-            .get(this.nodeId)
-            ?.stretch(this.direction, this.to - this.from);
+        this.do();
     }
 }
 /**
@@ -452,20 +586,23 @@ class StretchSectionAction {
         this.from = from;
         this.to = to;
     }
-    undo() {
+    do() {
         const section = this.canvas.model.sections.get(this.sectionId);
         const node = section?.node;
         if (node) {
-            node.stretchSections(this.direction, this.from - this.to, section.indexXInNode, section.indexYInNode);
+            node.stretchSections(this.direction, this.to - this.from, section.indexXInNode, section.indexYInNode);
         }
     }
-    redo() {
+    undo() {
         const section = this.canvas.model.sections.get(this.sectionId);
         const node = section?.node;
         if (node) {
-            node.stretchSections(this.direction, this.to - this.from, section.indexXInNode, section.indexYInNode);
+            node.stretchSections(this.direction, this.from - this.to, section.indexXInNode, section.indexYInNode);
         }
     }
+    redo() {
+        this.do();
+    }
 }
 /**
  * Action which consists of adding a connection.
@@ -480,12 +617,7 @@ class AddConnectionAction {
         this.endId = endId;
         this.id = id;
     }
-    undo() {
-        if (this.id) {
-            this.canvas.model.connections.remove(this.id);
-        }
-    }
-    redo() {
+    do() {
         const start = this.canvas.model.ports.get(this.startId);
         const end = this.canvas.model.ports.get(this.endId);
         if (start && end) {
@@ -494,6 +626,24 @@ class AddConnectionAction {
             this.id = connection.id;
         }
     }
+    undo() {
+        if (this.id) {
+            const connection = this.canvas.model.connections.get(this.id);
+            if (connection) {
+                connection.removed = true;
+                connection.updateInView();
+            }
+        }
+    }
+    redo() {
+        if (this.id) {
+            const connection = this.canvas.model.connections.get(this.id);
+            if (connection) {
+                connection.removed = false;
+                connection.updateInView();
+            }
+        }
+    }
 }
 /**
  * Action which consists of editing the text of a field.
@@ -507,18 +657,21 @@ class EditFieldAction {
         this.from = from;
         this.to = to;
     }
-    undo() {
+    do() {
         const field = this.canvas.model.fields.get(this.fieldId);
         if (field) {
-            field.text = this.from;
+            field.text = this.to;
         }
     }
-    redo() {
+    undo() {
         const field = this.canvas.model.fields.get(this.fieldId);
         if (field) {
-            field.text = this.to;
+            field.text = this.from;
         }
     }
+    redo() {
+        this.do();
+    }
 }
 /**
  * Action which consists of editing the values of a value set.
@@ -540,11 +693,14 @@ class UpdateValuesAction {
             return (this.model.nodes.get(this.id) || this.model.connections.get(this.id))?.valueSet;
         }
     }
+    do() {
+        this.getValueSet()?.overwriteValues(this.to);
+    }
     undo() {
-        this.getValueSet()?.setValues(this.from);
+        this.getValueSet()?.overwriteValues(this.from);
     }
     redo() {
-        this.getValueSet()?.setValues(this.to);
+        this.do();
     }
 }
 /**
@@ -552,274 +708,153 @@ class UpdateValuesAction {
  * @private
  */
 class RemoveAction {
-    constructor(model, nodes, sections, ports, connections, fields) {
-        this.nodes = [];
-        this.nodeIds = [];
-        this.sections = [];
-        this.sectionIds = [];
-        this.ports = [];
-        this.portIds = [];
-        this.connections = [];
-        this.connectionIds = [];
-        this.fields = [];
-        this.fieldIds = [];
+    constructor(model, nodeIds, sectionIds, portIds, connectionIds, fieldIds) {
         this.model = model;
-        this.nodes = nodes;
-        this.sections = sections;
-        this.ports = ports;
-        this.connections = connections;
-        this.fields = fields;
-        // if a node is deleted, its label, ports and sections must also be deleted
-        for (const node of this.nodes) {
-            if (node.label) {
-                addIfNotExists(this.fields, node.label);
-            }
-            for (const port of node.ports) {
-                addIfNotExists(this.ports, port);
-            }
-            for (const section of node.sections) {
-                addIfNotExists(this.sections, section);
-            }
-        }
-        // if a section is deleted, its label and ports must also be deleted
-        for (const section of this.sections) {
-            if (section.label) {
-                addIfNotExists(this.fields, section.label);
-            }
-            for (const port of section.ports) {
-                addIfNotExists(this.ports, port);
-            }
-        }
-        // if a port is deleted, its label and connections must also be deleted
-        for (const port of this.ports) {
-            if (port.label) {
-                addIfNotExists(this.fields, port.label);
-            }
-            for (const connection of port.outgoingConnections) {
-                addIfNotExists(this.connections, connection);
-            }
-            for (const connection of port.incomingConnections) {
-                addIfNotExists(this.connections, connection);
-            }
-        }
-        this.nodeIds = this.nodes.map((n) => n.id);
-        this.sectionIds = this.sections.map((s) => s.id);
-        this.portIds = this.ports.map((p) => p.id);
-        this.connectionIds = this.connections.map((c) => c.id);
-        this.fieldIds = this.fields.map((f) => f.id);
+        this.nodeIds = nodeIds;
+        this.sectionIds = sectionIds;
+        this.portIds = portIds;
+        this.connectionIds = connectionIds;
+        this.fieldIds = fieldIds;
     }
-    undo() {
-        for (const node of this.nodes) {
-            this.model.nodes.add(node);
-        }
-        for (const section of this.sections) {
-            this.model.sections.add(section);
-        }
-        for (const port of this.ports) {
-            this.model.ports.add(port);
-        }
-        for (const connection of this.connections) {
-            this.model.connections.add(connection);
-        }
-        for (const field of this.fields) {
-            this.model.fields.add(field);
-        }
-        for (const node of this.nodes) {
-            if (node.label) {
-                const label = this.model.fields.get(node.label.id);
-                if (label) {
-                    node.label = label;
+    do() {
+        for (const nodeId of this.nodeIds) {
+            const node = this.model.nodes.get(nodeId);
+            if (node) {
+                node.removed = true;
+                for (const section of node.sections) {
+                    addIfNotExists(this.sectionIds, section.id);
                 }
-            }
-            const ports = [];
-            for (const nodePort of node.ports) {
-                const port = this.model.ports.get(nodePort.id);
-                if (port) {
-                    ports.push(port);
+                for (const port of node.ports) {
+                    addIfNotExists(this.portIds, port.id);
                 }
-            }
-            node.ports = ports;
-            const sections = [];
-            for (const nodeSection of node.sections) {
-                const section = this.model.sections.get(nodeSection.id);
-                if (section) {
-                    sections.push(section);
+                if (node.label) {
+                    addIfNotExists(this.fieldIds, node.label.id);
                 }
             }
-            node.sections = sections;
         }
-        for (const section of this.sections) {
-            if (section.node) {
-                const node = this.model.nodes.get(section.node.id);
-                if (node) {
-                    section.node = node;
-                }
-            }
-            if (section.label) {
-                const label = this.model.fields.get(section.label.id);
-                if (label) {
-                    section.label = label;
+        for (const sectionId of this.sectionIds) {
+            const section = this.model.sections.get(sectionId);
+            if (section) {
+                section.removed = true;
+                for (const port of section.ports) {
+                    addIfNotExists(this.portIds, port.id);
                 }
-            }
-            const ports = [];
-            for (const sectionPort of section.ports) {
-                const port = this.model.ports.get(sectionPort.id);
-                if (port) {
-                    ports.push(port);
+                if (section.label) {
+                    addIfNotExists(this.fieldIds, section.label.id);
                 }
             }
-            section.ports = ports;
         }
-        for (const port of this.ports) {
-            if (port.rootElement) {
-                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.fields.get(port.label.id);
-                if (label) {
-                    port.label = label;
+        for (const portId of this.portIds) {
+            const port = this.model.ports.get(portId);
+            if (port) {
+                port.removed = true;
+                for (const connection of port.outgoingConnections) {
+                    addIfNotExists(this.connectionIds, connection.id);
                 }
-            }
-            const outgoingConnections = [];
-            for (const portOutgoingConnection of port.outgoingConnections) {
-                const connection = this.model.connections.get(portOutgoingConnection.id);
-                if (connection) {
-                    outgoingConnections.push(connection);
+                for (const connection of port.incomingConnections) {
+                    addIfNotExists(this.connectionIds, connection.id);
                 }
-            }
-            port.outgoingConnections = outgoingConnections;
-            const incomingConnections = [];
-            for (const portIncomingConnection of port.incomingConnections) {
-                const connection = this.model.connections.get(portIncomingConnection.id);
-                if (connection) {
-                    incomingConnections.push(connection);
+                if (port.label) {
+                    addIfNotExists(this.fieldIds, port.label.id);
                 }
             }
-            port.incomingConnections = incomingConnections;
         }
-        for (const connection of this.connections) {
-            if (connection.start) {
-                const start = this.model.ports.get(connection.start.id);
-                if (start) {
-                    connection.setStart(start);
-                }
-            }
-            if (connection.end) {
-                const end = this.model.ports.get(connection.end.id);
-                if (end) {
-                    connection.setEnd(end);
-                }
+        for (const connectionId of this.connectionIds) {
+            const connection = this.model.connections.get(connectionId);
+            if (connection) {
+                connection.removed = true;
             }
         }
-        for (const field of this.fields) {
-            if (field.rootElement) {
-                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;
-                }
+        for (const fieldId of this.fieldIds) {
+            const field = this.model.fields.get(fieldId);
+            if (field) {
+                field.removed = true;
             }
         }
         // update view
-        this.model.canvas?.updateModelInView();
+        this.model.canvas?.updateNodesInView(...this.nodeIds);
+        this.model.canvas?.updateSectionsInView(...this.sectionIds);
+        this.model.canvas?.updatePortsInView(...this.portIds);
+        this.model.canvas?.updateConnectionsInView(...this.connectionIds);
+        this.model.canvas?.updateFieldsInView(...this.fieldIds);
     }
-    redo() {
-        this.nodes = [];
-        this.sections = [];
-        this.ports = [];
-        this.connections = [];
-        this.fields = [];
-        // make shallow copies of the elements with their relationships
+    undo() {
         for (const nodeId of this.nodeIds) {
             const node = this.model.nodes.get(nodeId);
             if (node) {
-                const nodeCopy = clone(node);
-                if (nodeCopy.label) {
-                    nodeCopy.label = clone(nodeCopy.label);
-                }
-                nodeCopy.ports = nodeCopy.ports.map((p) => clone(p));
-                nodeCopy.sections = nodeCopy.sections.map((s) => clone(s));
-                this.nodes.push(nodeCopy);
+                node.removed = false;
             }
         }
         for (const sectionId of this.sectionIds) {
             const section = this.model.sections.get(sectionId);
             if (section) {
-                const sectionCopy = clone(section);
-                if (sectionCopy.label) {
-                    sectionCopy.label = clone(sectionCopy.label);
-                }
-                sectionCopy.ports = sectionCopy.ports.map((p) => clone(p));
-                this.sections.push(sectionCopy);
+                section.removed = false;
             }
         }
         for (const portId of this.portIds) {
             const port = this.model.ports.get(portId);
             if (port) {
-                const portCopy = clone(port);
-                if (portCopy.rootElement) {
-                    portCopy.rootElement = clone(portCopy.rootElement);
-                }
-                if (portCopy.label) {
-                    portCopy.label = clone(portCopy.label);
-                }
-                portCopy.outgoingConnections = portCopy.outgoingConnections.map((c) => clone(c));
-                portCopy.incomingConnections = portCopy.incomingConnections.map((c) => clone(c));
-                this.ports.push(portCopy);
+                port.removed = false;
             }
         }
         for (const connectionId of this.connectionIds) {
             const connection = this.model.connections.get(connectionId);
             if (connection) {
-                const connectionCopy = clone(connection);
-                if (connectionCopy.start) {
-                    connectionCopy.start = clone(connectionCopy.start);
-                }
-                if (connectionCopy.end) {
-                    connectionCopy.end = clone(connectionCopy.end);
-                }
-                this.connections.push(connectionCopy);
+                connection.removed = false;
             }
         }
         for (const fieldId of this.fieldIds) {
             const field = this.model.fields.get(fieldId);
             if (field) {
-                const fieldCopy = clone(field);
-                if (fieldCopy.rootElement) {
-                    fieldCopy.rootElement = clone(fieldCopy.rootElement);
-                }
-                this.fields.push(fieldCopy);
+                field.removed = false;
             }
         }
-        // delete the elements
+        // update view
+        this.model.canvas?.updateNodesInView(...this.nodeIds);
+        this.model.canvas?.updateSectionsInView(...this.sectionIds);
+        this.model.canvas?.updatePortsInView(...this.portIds);
+        this.model.canvas?.updateConnectionsInView(...this.connectionIds);
+        this.model.canvas?.updateFieldsInView(...this.fieldIds);
+    }
+    redo() {
         for (const nodeId of this.nodeIds) {
-            this.model.nodes.remove(nodeId);
+            const node = this.model.nodes.get(nodeId);
+            if (node) {
+                node.removed = true;
+            }
         }
         for (const sectionId of this.sectionIds) {
-            this.model.sections.remove(sectionId);
+            const section = this.model.sections.get(sectionId);
+            if (section) {
+                section.removed = true;
+            }
         }
         for (const portId of this.portIds) {
-            this.model.ports.remove(portId);
+            const port = this.model.ports.get(portId);
+            if (port) {
+                port.removed = true;
+            }
         }
         for (const connectionId of this.connectionIds) {
-            this.model.connections.remove(connectionId);
+            const connection = this.model.connections.get(connectionId);
+            if (connection) {
+                connection.removed = true;
+            }
         }
         for (const fieldId of this.fieldIds) {
-            this.model.fields.remove(fieldId);
+            const field = this.model.fields.get(fieldId);
+            if (field) {
+                field.removed = true;
+            }
         }
+        // update view
+        this.model.canvas?.updateNodesInView(...this.nodeIds);
+        this.model.canvas?.updateSectionsInView(...this.sectionIds);
+        this.model.canvas?.updatePortsInView(...this.portIds);
+        this.model.canvas?.updateConnectionsInView(...this.connectionIds);
+        this.model.canvas?.updateFieldsInView(...this.fieldIds);
     }
 }
-const clone = (obj) => {
-    if (obj === undefined || obj === null) {
-        return obj;
-    }
-    return Object.create(obj);
-};
 
 /**
  * A two dimensional array of elements of the given class that can extend infinitely in any direction, both positive and negative.
@@ -1516,7 +1551,7 @@ class PriorityLayout {
         const gapSize = (model.canvas?.gridSize || 0) * 2;
         const nodesToBeArranged = [...model.nodes];
         const nodeArrangement = [];
-        const nodesWithMaximumPriorityToBeArranged = model.nodes.filter(undefined, maximumPriority);
+        const nodesWithMaximumPriorityToBeArranged = model.nodes.filter((n) => !n.removed && n.getPriority() >= maximumPriority);
         const nodesWithMaximumPriority = [];
         if (nodesWithMaximumPriorityToBeArranged.length > 1) {
             // use bfs to sort nodes by distance to the first node
@@ -2296,6 +2331,21 @@ const stickyNotePath = (x, y, width, height) => {
     return `M ${x} ${y} L ${x + (3 * width) / 4} ${y} L ${x + (3 * width) / 4} ${y + height / 4} L ${x + (3 * width) / 4} ${y} L ${x + width} ${y + height / 4} L ${x + (3 * width) / 4} ${y + height / 4} L ${x + width} ${y + height / 4} L ${x + width} ${y + height} L ${x} ${y + height} Z`;
 };
 
+var CursorStyle;
+(function (CursorStyle) {
+    CursorStyle["AllScroll"] = "all-scroll";
+    CursorStyle["Auto"] = "auto";
+    CursorStyle["EWResize"] = "ew-resize";
+    CursorStyle["Grab"] = "grab";
+    CursorStyle["Grabbing"] = "grabbing";
+    CursorStyle["Move"] = "move";
+    CursorStyle["NoDrop"] = "no-drop";
+    CursorStyle["NSResize"] = "ns-resize";
+    CursorStyle["NotAllowed"] = "not-allowed";
+    CursorStyle["ZoomIn"] = "zoom-in";
+    CursorStyle["ZoomOut"] = "zoom-out";
+})(CursorStyle || (CursorStyle = {}));
+
 const numberOfColumns = (s) => {
     return Math.max(...s.split('\n').map((a) => a.length));
 };
@@ -2329,6 +2379,11 @@ class DiagramElement {
          * @private
          */
         this.selected = false;
+        /**
+         * Whether this diagram element has been removed.
+         * @private
+         */
+        this.removed = false;
         this.model = model;
         this._id = id;
     }
@@ -2410,16 +2465,16 @@ class DiagramEntitySet {
      * @public
      * @returns An array containing the entities of this set that meet the given criteria.
      */
-    filter() {
-        return this.all();
+    filter(predicate) {
+        return this.entities.filter(predicate);
     }
     /**
      * Gets an entity of this set matching specific criteria.
      * @public
      * @returns An entity of this set.
      */
-    find() {
-        return this.entities.length > 0 ? this.entities[0] : undefined;
+    find(predicate) {
+        return this.entities.find(predicate);
     }
     /**
      * Gets an entity from this set.
@@ -2474,7 +2529,7 @@ class Property {
     }
 }
 /**
- * The type that a property can hvae..
+ * The type that a property can have.
  * @see Property
  * @private
  */
@@ -2492,6 +2547,10 @@ var Type;
      * A type whose value must be a date.
      */
     Type["Date"] = "date";
+    /**
+     * A type whose value must be a date with a time.
+     */
+    Type["Datetime"] = "datetime";
     /**
      * A type whose value must be a number.
      */
@@ -2506,6 +2565,7 @@ var Type;
     Type["Option"] = "option";
     /**
      * A type whose value must be a list of values picked from a set of options.
+     * @see Type.Option
      */
     Type["OptionList"] = "option-list";
     /**
@@ -2569,6 +2629,13 @@ class ValueSet {
         this.rootElement = rootElement;
         this.resetValues();
     }
+    /**
+     * Get the value of the root element attribute under the given keys.
+     * If given an array of keys, the value is found under repeated lookups to enable obtaining nested values.
+     * @private
+     * @param rootAttribute A key or array of keys to look up in the root element.
+     * @returns The value if it could be found, `undefined` if nothing could be found.
+     */
     getRootElementValue(rootAttribute) {
         if (typeof rootAttribute === 'string') {
             return this.rootElement[rootAttribute];
@@ -2586,6 +2653,15 @@ class ValueSet {
         }
         return undefined;
     }
+    /**
+     * Set the value of the root element's attribute under the given keys.
+     * If given an array of keys, the value is found under repeated lookups to enable setting nested values.
+     * If the root element has a function `updateInView()`, it is called upon successful setting of the value.
+     * If the root element's attribute doesn't exist, it does nothing.
+     * @private
+     * @param rootAttribute A key or array of keys to look up in the root element.
+     * @param value The value to set the root element's attribute to.
+     */
     setRootElementValue(rootAttribute, value) {
         if (typeof rootAttribute === 'string') {
             this.rootElement[rootAttribute] = value;
@@ -2600,35 +2676,69 @@ class ValueSet {
                 }
                 rootSubelement = rootSubelement[rootSubattribute];
             }
+            if (rootSubelement === null || rootSubelement === undefined) {
+                return;
+            }
             rootSubelement[rootAttribute[rootAttribute.length - 1]] = value;
         }
+        if (typeof this.rootElement['updateInView'] === 'function') {
+            this.rootElement['updateInView']();
+        }
     }
+    /**
+     * Obtain the value under the given key.
+     * @private
+     * @param key A key.
+     * @returns The value under the given key.
+     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getValue(key) {
         const rootAttribute = this.propertySet.getProperty(key)?.rootAttribute;
         if (rootAttribute !== undefined && rootAttribute !== null) {
             this.values[key] = this.getRootElementValue(rootAttribute);
         }
-        return this.values[key];
+        const property = this.propertySet.getProperty(key);
+        if (property.type === Type.Object) {
+            return this.valueSets[key].getValues();
+        }
+        else {
+            return this.values[key];
+        }
     }
+    /**
+     * Obtain all the values in the set.
+     * @private
+     * @returns An object containing all the values in the set.
+     */
     getValues() {
         const result = {};
         for (const key in this.propertySet.propertyMap) {
             const property = this.propertySet.getProperty(key);
-            if (property.type === Type.Object &&
-                this.valueSets[key].hasAnySetValue()) {
+            if (property.type === Type.Object) {
                 result[key] = this.valueSets[key].getValues();
             }
-            else if (this.hasSetValue(key)) {
+            else {
                 result[key] = this.getValue(key);
             }
         }
         return result;
     }
+    /**
+     * Check if the value under the key is not empty.
+     * @private
+     * @param key A key.
+     * @returns `true` if the value under the key is empty, `false` otherwise.
+     */
     hasValue(key) {
         const value = this.getValue(key);
         return !empty(value);
     }
+    /**
+     * Check if the value under the key is not empty or the default value.
+     * @private
+     * @param key A key.
+     * @returns `true` if the value under the key is empty or the default value, `false` otherwise.
+     */
     hasSetValue(key) {
         const value = this.getValue(key);
         const property = this.propertySet.getProperty(key);
@@ -2637,6 +2747,11 @@ class ValueSet {
         }
         return !empty(value) && !equals(value, property?.defaultValue);
     }
+    /**
+     * Check if any of the values in the set are not empty or the default value.
+     * @private
+     * @returns `true` if any of the values in the set are not empty or the default value, `false` otherwise.
+     */
     hasAnySetValue() {
         for (const property of this.propertySet.propertyList) {
             if (this.hasSetValue(property.name)) {
@@ -2645,58 +2760,84 @@ class ValueSet {
         }
         return false;
     }
-    hasAnySetValueExcept(keys) {
-        for (const property of this.propertySet.propertyList) {
-            if (!keys.includes(property.name) && this.hasSetValue(property.name)) {
-                return true;
-            }
-        }
-        return false;
-    }
+    /**
+     * Set the value under the given key.
+     * @private
+     * @param key A key.
+     * @param value A value.
+     */
     setValue(key, value) {
-        this.values[key] = value;
         const property = this.propertySet.getProperty(key);
         if (property) {
+            if (property.type === Type.Object) {
+                this.valueSets[key].setValues(value);
+            }
+            else {
+                this.values[key] = value;
+            }
             const rootAttribute = property.rootAttribute;
             if (rootAttribute !== undefined && rootAttribute !== null) {
                 this.setRootElementValue(rootAttribute, value);
-                if (typeof this.rootElement['updateInView'] === 'function') {
-                    this.rootElement['updateInView']();
-                }
             }
             this.displayProperty(property);
         }
     }
+    /**
+     * Reset all values and then set them to the given values.
+     * @private
+     * @param values An object containing all values to set the values to.
+     */
     setValues(values) {
         this.resetValues();
-        for (const key in this.propertySet.propertyMap) {
+        for (const key in values) {
             const property = this.propertySet.getProperty(key);
-            if (!empty(values[key])) {
-                if (property.type === Type.Object) {
-                    this.valueSets[key].setValues(values[key]);
-                }
-                else if (!equals(values[key], property?.defaultValue)) {
-                    this.setValue(key, values[key]);
-                }
+            if (property.type === Type.Object) {
+                this.valueSets[key].setValues(values[key]);
+            }
+            else {
+                this.setValue(key, values[key]);
             }
         }
     }
-    hasValues() {
-        return Object.keys(this.values).length > 0;
+    /**
+     * Writes the given values over the value set's existing values without resetting the existing values.
+     * @private
+     * @param values An object containing all values to set the values to.
+     */
+    overwriteValues(values) {
+        for (const key in values) {
+            const property = this.propertySet.getProperty(key);
+            if (property.type === Type.Object) {
+                this.valueSets[key].overwriteValues(values[key]);
+            }
+            else {
+                this.setValue(key, values[key]);
+            }
+        }
     }
+    /**
+     * Set all the values of this set to the defaults.
+     * If this set has a root element and any of its properties have root attributes, the root element's attributes are also set to the property's default value if one is provided.
+     * @private
+     */
     resetValues() {
         this.displayedProperties = [];
         this.hiddenProperties = [];
         for (const key in this.propertySet.propertyMap) {
             const property = this.propertySet.getProperty(key);
             const rootAttribute = property.rootAttribute;
-            if (rootAttribute !== undefined && rootAttribute !== null) {
-                this.values[key] = this.getRootElementValue(rootAttribute);
+            if (property.type === Type.Object) {
+                this.valueSets[key] = this.constructSubValueSet(key);
             }
             else {
                 this.values[key] = structuredClone(property.defaultValue);
-                if (property.type === Type.Object) {
-                    this.valueSets[key] = this.constructSubValueSet(key);
+            }
+            if (rootAttribute !== undefined && rootAttribute !== null) {
+                if (property.defaultValue !== undefined) {
+                    this.setRootElementValue(rootAttribute, this.values[key]);
+                }
+                else {
+                    this.values[key] = this.getRootElementValue(rootAttribute);
                 }
             }
             if (property.basic) {
@@ -2707,37 +2848,56 @@ class ValueSet {
             }
         }
     }
-    displayProperty(property) {
-        if (!this.displayedProperties.includes(property)) {
-            this.displayedProperties.push(property);
-            removeIfExists(this.hiddenProperties, property);
-        }
-    }
-    hideProperty(property) {
-        if (!this.hiddenProperties.includes(property)) {
-            this.hiddenProperties.push(property);
-            removeIfExists(this.displayedProperties, property);
-        }
-    }
     /**
      * Constructs a ValueSet with its corresponding PropertySet representing the values of the object.
+     * @private
+     * @param key Key that the ValueSet is under.
+     * @returns The constructed ValueSet.
      */
     constructSubValueSet(key) {
         const property = this.propertySet.getProperty(key);
         const propertySet = new PropertySet(property.properties);
         const valueSet = new ValueSet(propertySet, this.rootElement);
-        // initialize the default values of each property
-        this.values[key] = {
-            ...valueSet.values,
-            ...this.values[key]
-        };
-        valueSet.values = this.values[key];
+        valueSet.overwriteValues(structuredClone(property.defaultValue));
         return valueSet;
     }
+    /**
+     * Get the ValueSet under the given key when there are nested ValueSets.
+     * @private
+     * @param key A key.
+     * @returns A ValueSet.
+     */
     getSubValueSet(key) {
         return this.valueSets[key];
     }
+    /**
+     * Move the given property to the list of displayed properties.
+     * @private
+     * @param property A property.
+     */
+    displayProperty(property) {
+        if (!this.displayedProperties.includes(property)) {
+            this.displayedProperties.push(property);
+            removeIfExists(this.hiddenProperties, property);
+        }
+    }
+    /**
+     * Move the given property to the list of hidden properties.
+     * @private
+     * @param property A property.
+     */
+    hideProperty(property) {
+        if (!this.hiddenProperties.includes(property)) {
+            this.hiddenProperties.push(property);
+            removeIfExists(this.displayedProperties, property);
+        }
+    }
 }
+/**
+ * Check if the given value is not empty.
+ * @param a A value.
+ * @returns `true` if the given value is not `undefined`, `null`, `''`, `[]` or `{}`; `false` otherwise.
+ */
 const empty = (a) => {
     return (a === undefined ||
         a === null ||
@@ -2745,9 +2905,47 @@ const empty = (a) => {
         (a instanceof Array && a.length === 0) ||
         (a instanceof Object && Object.keys(a).length === 0));
 };
+/**
+ * Check whether the given values are equal.
+ * @param a A value.
+ * @param b A value.
+ * @returns `true` if the given values are equal, `false` otherwise.
+ */
 const equals = (a, b) => {
     return a === b || JSON.stringify(a) === JSON.stringify(b);
 };
+/**
+ * Calculate the differences between the given values and return two objects, each containing the keys for which the values are different in each argument, containing the different values.
+ * @param a A dictionary.
+ * @param b A dictionary.
+ * @returns A tuple of two values with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+const diff = (a, b) => {
+    const aDiff = {};
+    const bDiff = {};
+    const allKeys = [];
+    for (const key in a) {
+        allKeys.push(key);
+    }
+    for (const key in b) {
+        if (!(key in a)) {
+            allKeys.push(key);
+        }
+    }
+    for (const key of allKeys) {
+        if (isObject(a[key]) && isObject(b[key])) {
+            [aDiff[key], bDiff[key]] = diff(a[key], b[key]);
+        }
+        else {
+            if (!equals(a[key], b[key])) {
+                aDiff[key] = a[key];
+                bDiff[key] = b[key];
+            }
+        }
+    }
+    return [aDiff, bDiff];
+};
+const isObject = (x) => typeof x === 'object' && !!x;
 
 let idTicker$4 = 0;
 /**
@@ -2869,6 +3067,12 @@ class DiagramConnection extends DiagramElement {
     updateInView() {
         this.model.canvas?.updateConnectionsInView(this.id);
     }
+    /**
+     * Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
+     * Add or remove this connection from the list of outgoing connections of ports correspondingly.
+     * @public
+     * @param start A port.
+     */
     setStart(start) {
         if (this.start !== start) {
             if (this.start !== undefined) {
@@ -2887,6 +3091,12 @@ class DiagramConnection extends DiagramElement {
         }
         this.updateInView();
     }
+    /**
+     * Set the end of this connection to the given port or reset this connection's ending port if `undefined`.
+     * Add or remove this connection from the list of incoming connections of ports correspondingly.
+     * @public
+     * @param end A port.
+     */
     setEnd(end) {
         if (this.end !== end) {
             if (this.end !== undefined) {
@@ -2905,6 +3115,11 @@ class DiagramConnection extends DiagramElement {
         }
         this.updateInView();
     }
+    /**
+     * Reassign the start and end ports of this connection to ports with less distance between them that have the same root element.
+     * If no ports with less distance between them are found, do nothing.
+     * @public
+     */
     tighten() {
         if (this.start?.rootElement && this.end?.rootElement) {
             const tighterStartPort = 
@@ -2942,15 +3157,44 @@ class DiagramConnection extends DiagramElement {
     }
 }
 class DiagramConnectionSet extends DiagramEntitySet {
+    /**
+     * Instance a set of connections for the given model. This method is used internally.
+     * @private
+     */
     constructor(model) {
         super();
+        /**
+         * Set of the possible types of connection that the connections of this set can have.
+         * @public
+         */
         this.types = new DiagramEntitySet();
         this.model = model;
     }
+    /**
+     * Instance a new connection and add it to this set.
+     * @public
+     * @param type The type of the connection given as either the type itself or the id of the type.
+     * @param start The start port of the connection.
+     * @param end The end port of the connection.
+     * @param id The id of the connection. Should be left undefined unless a specific id is required.
+     * @returns The instanced connection.
+     */
     new(type, start, end, id) {
-        const connection = new DiagramConnection(this.model, type, start, end, id);
+        let connectionType;
+        if (type instanceof DiagramConnectionType) {
+            connectionType = type;
+        }
+        else {
+            const foundConnectionType = this.types.get(type);
+            if (foundConnectionType === undefined) {
+                throw new TypeError(`Connection type with id '${type}' could not be found.`);
+            }
+            connectionType = foundConnectionType;
+        }
+        const connection = new DiagramConnection(this.model, connectionType, start, end, id);
         super.add(connection);
         connection.updateInView();
+        connection.valueSet.resetValues();
         return connection;
     }
     remove(id) {
@@ -2965,30 +3209,6 @@ class DiagramConnectionSet extends DiagramEntitySet {
             connection.updateInView();
         }
     }
-    filter(type, threshold) {
-        return this.entities.filter((e) => {
-            let matches = true;
-            if (type !== undefined && matches) {
-                matches = matches && e.type.id === type;
-            }
-            if (threshold !== undefined && matches) {
-                matches = matches && e.getPriority() >= threshold;
-            }
-            return matches;
-        });
-    }
-    find(type, threshold) {
-        return this.entities.find((e) => {
-            let matches = true;
-            if (type !== undefined && matches) {
-                matches = matches && e.type.id === type;
-            }
-            if (threshold !== undefined && matches) {
-                matches = matches && e.getPriority() >= threshold;
-            }
-            return matches;
-        });
-    }
 }
 
 let idTicker$3 = 0;
@@ -3100,6 +3320,11 @@ class DiagramSection extends DiagramElement {
     getPriority() {
         return (this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || DIAGRAM_SECTION_DEFAULTS.priority);
     }
+    /**
+     * Get the port of this section which is closest to the given coordinates.
+     * @param coords A point in the diagram.
+     * @returns The port of this section closest to the given coordinates, `undefined` if this section has no ports.
+     */
     getClosestPortToPoint(coords) {
         if (this.ports.length === 0) {
             return undefined;
@@ -3114,6 +3339,11 @@ class DiagramSection extends DiagramElement {
             return closestPort;
         }
     }
+    /**
+     * Get all incoming connections of all ports of this section.
+     * @public
+     * @returns A list of connections.
+     */
     getIncomingConnections() {
         const result = [];
         for (const port of this.ports) {
@@ -3123,6 +3353,11 @@ class DiagramSection extends DiagramElement {
         }
         return result;
     }
+    /**
+     * Get all outgoing connections of all ports of this section.
+     * @public
+     * @returns A list of connections.
+     */
     getOutgoingConnections() {
         const result = [];
         for (const port of this.ports) {
@@ -3132,6 +3367,11 @@ class DiagramSection extends DiagramElement {
         }
         return result;
     }
+    /**
+     * Get all connections of all ports of this section.
+     * @public
+     * @returns A list of connections.
+     */
     getConnections() {
         const result = [];
         for (const port of this.ports) {
@@ -3144,6 +3384,11 @@ class DiagramSection extends DiagramElement {
         }
         return result;
     }
+    /**
+     * Change the coordinates of this section to the given coordinates and move its ports and labels correspondingly.
+     * @public
+     * @param coords A point in the diagram.
+     */
     move(coords) {
         const coordDifferences = [
             coords[0] - this.coords[0],
@@ -3165,6 +3410,12 @@ class DiagramSection extends DiagramElement {
         this.getConnections().forEach((c) => c.tighten());
         this.updateInView();
     }
+    /**
+     * Change the dimensions of this section in the given direction by the given amount.
+     * @public
+     * @param direction A direction.
+     * @param distance A distance.
+     */
     stretch(direction, distance) {
         const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
         const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
@@ -3221,11 +3472,19 @@ class DiagramSection extends DiagramElement {
     }
 }
 class DiagramSectionSet extends DiagramEntitySet {
+    /**
+     * Instance a set of sections for the given model. This method is used internally.
+     * @private
+     */
     constructor(model) {
         super();
         this.model = model;
     }
-    new(node, indexXInNode, indexYInNode, coords, width, height, id, portIds, portLabelIds) {
+    /**
+     * Instance a new section and add it to this set. This method is normally called when instancing an element with a section and it is rarely called by itself.
+     * @private
+     */
+    new(node, indexXInNode, indexYInNode, coords, width, height, id) {
         const section = new DiagramSection(this.model, node, indexXInNode, indexYInNode, coords, width, height, id);
         super.add(section);
         section.updateInView();
@@ -3240,7 +3499,7 @@ class DiagramSectionSet extends DiagramEntitySet {
                 const port = this.model.ports.new(section, [
                     section.coords[0] + (portConfig?.coords?.[0] || 0),
                     section.coords[1] + (portConfig?.coords?.[1] || 0)
-                ], portConfig?.direction, portIds && portIds.length > i ? portIds[i] : undefined);
+                ], portConfig?.direction);
                 if (portConfig.label) {
                     const labelConfiguration = {
                         ...DIAGRAM_FIELD_DEFAULTS,
@@ -3270,9 +3529,7 @@ class DiagramSectionSet extends DiagramEntitySet {
                         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, labelConfiguration.fit, portLabelIds && portLabelIds.length > i
-                        ? portLabelIds[i]
-                        : undefined);
+                    this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
                 }
             }
         }
@@ -3286,7 +3543,7 @@ class DiagramSectionSet extends DiagramEntitySet {
             this.model.fields.new(section, [
                 section.coords[0] + labelConfiguration.margin,
                 section.coords[1] + labelConfiguration.margin
-            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - labelConfiguration.margin * 2, section.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit, id);
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - labelConfiguration.margin * 2, section.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
         return section;
     }
@@ -3311,22 +3568,6 @@ class DiagramSectionSet extends DiagramEntitySet {
             section.updateInView();
         }
     }
-    filter(threshold) {
-        return this.entities.filter((e) => {
-            if (threshold !== undefined) {
-                return e.getPriority() >= threshold;
-            }
-            return true;
-        });
-    }
-    find(threshold) {
-        return this.entities.find((e) => {
-            if (threshold !== undefined) {
-                return e.getPriority() >= threshold;
-            }
-            return true;
-        });
-    }
 }
 
 let idTicker$2 = 0;
@@ -3446,6 +3687,11 @@ class DiagramNode extends DiagramElement {
     getPriority() {
         return this.type.priority;
     }
+    /**
+     * Get the port of this node which is closest to the given coordinates.
+     * @param coords A point in the diagram.
+     * @returns The port of this node closest to the given coordinates, `undefined` if this node has no ports.
+     */
     getClosestPortToPoint(coords) {
         if (this.ports.length === 0) {
             return undefined;
@@ -3460,6 +3706,11 @@ class DiagramNode extends DiagramElement {
             return closestPort;
         }
     }
+    /**
+     * Get all incoming connections of all ports of this node, not including incoming connections of sections of this node.
+     * @public
+     * @returns A list of connections.
+     */
     getIncomingConnections() {
         const result = [];
         for (const port of this.ports) {
@@ -3469,6 +3720,11 @@ class DiagramNode extends DiagramElement {
         }
         return result;
     }
+    /**
+     * Get all outgoing connections of all ports of this node, not including outgoing connections of sections of this node.
+     * @public
+     * @returns A list of connections.
+     */
     getOutgoingConnections() {
         const result = [];
         for (const port of this.ports) {
@@ -3478,6 +3734,11 @@ class DiagramNode extends DiagramElement {
         }
         return result;
     }
+    /**
+     * Get all connections of all ports of this node, not including connections of sections of this node.
+     * @public
+     * @returns A list of connections.
+     */
     getConnections() {
         const result = [];
         for (const port of this.ports) {
@@ -3490,6 +3751,11 @@ class DiagramNode extends DiagramElement {
         }
         return result;
     }
+    /**
+     * Get all nodes that have a direct connection to this node, not including nodes that have a direct connection to sections of this node.
+     * @public
+     * @returns A list of nodes.
+     */
     getAdjacentNodes() {
         const result = [];
         for (const port of this.ports) {
@@ -3508,6 +3774,11 @@ class DiagramNode extends DiagramElement {
         }
         return result;
     }
+    /**
+     * Change the coordinates of this node to the given coordinates and move its sections, ports and labels correspondingly.
+     * @public
+     * @param coords A point in the diagram.
+     */
     move(coords) {
         const coordDifferences = [
             coords[0] - this.coords[0],
@@ -3535,6 +3806,12 @@ class DiagramNode extends DiagramElement {
         this.getConnections().forEach((c) => c.tighten());
         this.updateInView();
     }
+    /**
+     * Change the dimensions of this node in the given direction by the given amount without changing the dimensions of the sections of this node.
+     * @public
+     * @param direction A direction.
+     * @param distance A distance.
+     */
     stretch(direction, distance) {
         const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
         const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
@@ -3588,6 +3865,14 @@ class DiagramNode extends DiagramElement {
         // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
         this.updateInView();
     }
+    /**
+     * Change the dimensions of this node and its sections in the given direction by the given amount, with the sections of the given index being stretched.
+     * @public
+     * @param direction A direction.
+     * @param distance A distance.
+     * @param indexX A section index.
+     * @param indexY A section index.
+     */
     stretchSections(direction, distance, indexX, indexY) {
         let minimumStretchableDistance = Number.NEGATIVE_INFINITY;
         switch (direction) {
@@ -3668,50 +3953,71 @@ class DiagramNode extends DiagramElement {
     }
 }
 class DiagramNodeSet extends DiagramEntitySet {
+    /**
+     * Instance a set of nodes for the given model. This method is used internally.
+     * @private
+     */
     constructor(model) {
         super();
+        /**
+         * Set of the possible types of node that the nodes of this set can have.
+         * @public
+         */
         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);
+    /**
+     * Instance a new node and add it to this set.
+     * @public
+     * @param type The type of the node given as either the type itself or the id of the type.
+     * @param coords The coordinates of the top left corner of the node in the diagram.
+     * @param id The id of the node. Should be left undefined unless a specific id is required.
+     * @returns The instanced node.
+     */
+    new(type, coords, id) {
+        let nodeType;
+        if (type instanceof DiagramNodeType) {
+            nodeType = type;
+        }
+        else {
+            const foundNodeType = this.types.get(type);
+            if (foundNodeType === undefined) {
+                throw new TypeError(`Node type with id '${type}' could not be found.`);
+            }
+            nodeType = foundNodeType;
+        }
+        const node = new DiagramNode(this.model, nodeType, coords, id);
         super.add(node);
         node.updateInView();
         // add node sections
-        if (type.sectionGrid !== null) {
+        if (nodeType.sectionGrid !== null) {
             // create sections
-            let sectionCount = 0;
-            let heightAccumulator = node.coords[1] + (type.sectionGrid.margin || 0);
-            for (let j = 0; j < type.sectionGrid.sections.length; ++j) {
-                let widthAccumulator = node.coords[0] + (type.sectionGrid.margin || 0);
-                for (let i = 0; i < type.sectionGrid.sections[j].length; ++i) {
-                    this.model.sections.new(node, i, j, [widthAccumulator, heightAccumulator], type.sectionGrid.defaultWidths?.[i] ||
-                        DIAGRAM_SECTION_DEFAULT_WIDTH, type.sectionGrid.defaultHeights?.[j] ||
-                        DIAGRAM_SECTION_DEFAULT_HEIGHT, sectionIds && sectionIds.length > sectionCount
-                        ? sectionIds[sectionCount]
-                        : undefined, sectionPortIds && sectionPortIds.length > sectionCount
-                        ? sectionPortIds[sectionCount]
-                        : undefined, sectionPortLabelIds && sectionPortLabelIds.length > sectionCount
-                        ? sectionPortLabelIds[sectionCount]
-                        : undefined);
-                    ++sectionCount;
+            let heightAccumulator = node.coords[1] + (nodeType.sectionGrid.margin || 0);
+            for (let j = 0; j < nodeType.sectionGrid.sections.length; ++j) {
+                let widthAccumulator = node.coords[0] + (nodeType.sectionGrid.margin || 0);
+                for (let i = 0; i < nodeType.sectionGrid.sections[j].length; ++i) {
+                    this.model.sections.new(node, i, j, [widthAccumulator, heightAccumulator], nodeType.sectionGrid.defaultWidths?.[i] ||
+                        DIAGRAM_SECTION_DEFAULT_WIDTH, nodeType.sectionGrid.defaultHeights?.[j] ||
+                        DIAGRAM_SECTION_DEFAULT_HEIGHT);
                     widthAccumulator +=
-                        (type.sectionGrid.defaultWidths?.[i] ||
-                            DIAGRAM_SECTION_DEFAULT_WIDTH) + (type.sectionGrid.margin || 0);
+                        (nodeType.sectionGrid.defaultWidths?.[i] ||
+                            DIAGRAM_SECTION_DEFAULT_WIDTH) +
+                            (nodeType.sectionGrid.margin || 0);
                 }
                 heightAccumulator +=
-                    (type.sectionGrid.defaultHeights?.[j] ||
-                        DIAGRAM_SECTION_DEFAULT_HEIGHT) + (type.sectionGrid.margin || 0);
+                    (nodeType.sectionGrid.defaultHeights?.[j] ||
+                        DIAGRAM_SECTION_DEFAULT_HEIGHT) +
+                        (nodeType.sectionGrid.margin || 0);
             }
         }
         // add node ports
-        if (type.ports.length > 0) {
-            for (let i = 0; i < type.ports.length; ++i) {
-                const portConfig = type.ports[i];
+        if (nodeType.ports.length > 0) {
+            for (let i = 0; i < nodeType.ports.length; ++i) {
+                const portConfig = nodeType.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);
+                ], portConfig.direction);
                 if (portConfig.label) {
                     const labelConfiguration = {
                         ...DIAGRAM_FIELD_DEFAULTS,
@@ -3741,23 +4047,22 @@ class DiagramNodeSet extends DiagramEntitySet {
                         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, labelConfiguration.fit, portLabelIds && portLabelIds.length > i
-                        ? portLabelIds[i]
-                        : undefined);
+                    this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
                 }
             }
         }
         // add node label
-        if (type.label) {
+        if (nodeType.label) {
             const labelConfiguration = {
                 ...DIAGRAM_FIELD_DEFAULTS,
-                ...type.label
+                ...nodeType.label
             };
             this.model.fields.new(node, [
                 node.coords[0] + labelConfiguration.margin,
                 node.coords[1] + labelConfiguration.margin
-            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - labelConfiguration.margin * 2, node.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit, labelId);
+            ], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - labelConfiguration.margin * 2, node.height - labelConfiguration.margin * 2, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
+        node.valueSet.resetValues();
         node.model.canvas?.fitNodeInView(node.id);
         return node;
     }
@@ -3782,14 +4087,6 @@ class DiagramNodeSet extends DiagramEntitySet {
             node.updateInView();
         }
     }
-    filter(type, threshold) {
-        return this.entities.filter((e) => (type !== undefined ? e.type.id === type : true) &&
-            (threshold !== undefined ? e.type.priority >= threshold : true));
-    }
-    find(type, threshold) {
-        return this.entities.find((e) => (type !== undefined ? e.type.id === type : true) &&
-            (threshold !== undefined ? e.type.priority >= threshold : true));
-    }
 }
 
 let idTicker$1 = 0;
@@ -3839,12 +4136,27 @@ class DiagramPort extends DiagramElement {
     updateInView() {
         this.model.canvas?.updatePortsInView(this.id);
     }
+    /**
+     * Add a connection to this port's list of outgoing connections.
+     * @public
+     * @param connection A connection.
+     */
     startConnection(connection) {
         this.outgoingConnections.push(connection);
     }
+    /**
+     * Add a connection to this port's list of incoming connections.
+     * @public
+     * @param connection A connection.
+     */
     finishConnection(connection) {
         this.incomingConnections.push(connection);
     }
+    /**
+     * Get the root node of this port, which is either its rootElement if it's a node or it's rootElement's node if it's a section.
+     * @public
+     * @returns A node if it could be found, `undefined` otherwise.
+     */
     getNode() {
         if (this.rootElement instanceof DiagramNode) {
             return this.rootElement;
@@ -3857,6 +4169,11 @@ class DiagramPort extends DiagramElement {
     getPriority() {
         return this.rootElement?.getPriority() || DEFAULT_PRIORITY;
     }
+    /**
+     * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
+     * @public
+     * @param coords A point in the diagram.
+     */
     move(coords) {
         const coordDifferences = [
             coords[0] - this.coords[0],
@@ -3882,10 +4199,18 @@ class DiagramPort extends DiagramElement {
     }
 }
 class DiagramPortSet extends DiagramEntitySet {
+    /**
+     * Instance a set of ports for the given model. This method is used internally.
+     * @private
+     */
     constructor(model) {
         super();
         this.model = model;
     }
+    /**
+     * Instance a new port and add it to this set. This method is normally called when instancing an element with a port and it is rarely called by itself.
+     * @private
+     */
     new(rootElement, coords, direction, id) {
         const port = new DiagramPort(this.model, rootElement, coords, direction, id);
         super.add(port);
@@ -3921,22 +4246,6 @@ class DiagramPortSet extends DiagramEntitySet {
             port.updateInView();
         }
     }
-    filter(threshold) {
-        return this.entities.filter((e) => {
-            if (threshold !== undefined) {
-                return e.getPriority() >= threshold;
-            }
-            return true;
-        });
-    }
-    find(threshold) {
-        return this.entities.find((e) => {
-            if (threshold !== undefined) {
-                return e.getPriority() >= threshold;
-            }
-            return true;
-        });
-    }
 }
 
 let idTicker = 0;
@@ -4016,6 +4325,11 @@ class DiagramField extends DiagramElement {
     updateInView() {
         this.model.canvas?.updateFieldsInView(this.id);
     }
+    /**
+     * Change the coordinates of this field to the given coordinates.
+     * @public
+     * @param coords A point in the diagram.
+     */
     move(coords) {
         this.coords = coords;
         this.updateInView();
@@ -4025,10 +4339,18 @@ class DiagramField extends DiagramElement {
     }
 }
 class DiagramFieldSet extends DiagramEntitySet {
+    /**
+     * Instance a set of fields for the given model. This method is used internally.
+     * @private
+     */
     constructor(model) {
         super();
         this.model = model;
     }
+    /**
+     * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
+     * @private
+     */
     new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, fit, id) {
         const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit, id);
         super.add(field);
@@ -4056,26 +4378,11 @@ class DiagramFieldSet extends DiagramEntitySet {
             field.updateInView();
         }
     }
-    filter(threshold) {
-        return this.entities.filter((e) => {
-            if (threshold !== undefined) {
-                return e.getPriority() >= threshold;
-            }
-            return true;
-        });
-    }
-    find(threshold) {
-        return this.entities.find((e) => {
-            if (threshold !== undefined) {
-                return e.getPriority() >= threshold;
-            }
-            return true;
-        });
-    }
 }
 
 /**
  * Stores the data of a diagram.
+ * Represents the state of the diagram.
  * @public
  */
 class DiagramModel {
@@ -4117,6 +4424,7 @@ class DiagramModel {
         this.type = type;
         this.createdAt = new Date();
         this.updatedAt = new Date();
+        this.logicalClock = 0;
         this.valueSet = new ValueSet(new PropertySet(properties), this);
     }
     /**
@@ -4130,6 +4438,7 @@ class DiagramModel {
         this.description = undefined;
         this.createdAt = new Date();
         this.updatedAt = new Date();
+        this.logicalClock = 0;
         this.nodes.clear();
         this.sections.clear();
         this.ports.clear();
@@ -4140,21 +4449,77 @@ class DiagramModel {
     }
 }
 
-var CursorStyle;
-(function (CursorStyle) {
-    CursorStyle["AllScroll"] = "all-scroll";
-    CursorStyle["Auto"] = "auto";
-    CursorStyle["EWResize"] = "ew-resize";
-    CursorStyle["Grab"] = "grab";
-    CursorStyle["Grabbing"] = "grabbing";
-    CursorStyle["Move"] = "move";
-    CursorStyle["NoDrop"] = "no-drop";
-    CursorStyle["NSResize"] = "ns-resize";
-    CursorStyle["NotAllowed"] = "not-allowed";
-    CursorStyle["ZoomIn"] = "zoom-in";
-    CursorStyle["ZoomOut"] = "zoom-out";
-})(CursorStyle || (CursorStyle = {}));
-
+/**
+ * A collaboration engine, which manages collaboration for a diagram.
+ * @private
+ */
+class CollabEngine {
+    constructor(canvas) {
+        /**
+         * Whether we have joined (or are joining) a room on the server.
+         */
+        this.isInRoom = false;
+        this.canvas = canvas;
+        this.replicaId = v4();
+    }
+    /**
+     * Returns a fresh timestamp, suitable for use by new CollabActions.
+     */
+    freshTimestamp() {
+        this.canvas.model.logicalClock++;
+        return [this.canvas.model.logicalClock, this.replicaId];
+    }
+    /**
+     * Returns a fresh unique ID, suitable for use by new CollabActions.
+     */
+    freshId() {
+        // For more compressible saves, consider using a [dot ID](https://mattweidner.com/2023/09/26/crdt-survey-3.html#unique-ids-dots) instead of a new UUID each time.
+        return v4();
+    }
+    /**
+     * Performs the action - immediately locally, and eventually for remote collaborators.
+     */
+    doCollaboratively(action) {
+        // Perform the action locally.
+        // Note: if this errors, it will prevent the action from performing collaboratively.
+        action.do();
+        if (this.onSend) {
+            // Send the action to the server.
+            const serialized = action.serialize();
+            this.onSend(serialized);
+        }
+    }
+    /**
+     * Processes a message received from the server.
+     *
+     * The message is assumed to be non-redundant (in particular, not one of
+     * our own messages) and delivered after all prior messages on the server.
+     */
+    receive(message) {
+        // Update local logical clock.
+        if ('timestamp' in message) {
+            this.canvas.model.logicalClock = Math.max(this.canvas.model.logicalClock, message.timestamp[0]);
+        }
+        // Perform CollabAction.
+        switch (message.type) {
+            case 'add': {
+                const action = AddNodeCollabAction.deserialize(this.canvas, message);
+                action.do();
+                break;
+            }
+            case 'move': {
+                const action = MoveNodeCollabAction.deserialize(this.canvas, message);
+                action.do();
+                break;
+            }
+            default: {
+                const exhaustiveMessage = message;
+                console.error('Unknown CollabAction type, skipping:', exhaustiveMessage);
+            }
+        }
+    }
+}
+
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
  * @private
@@ -4206,6 +4571,7 @@ class DiagramCanvas {
         this.userActions = config.userActions || {};
         this.validators = [];
         this.actionQueue = new ActionQueue(this, ACTION_QUEUE_SIZE);
+        this.collabEngine = new CollabEngine(this);
         // load node types
         if (config.nodeTypes) {
             for (const nodeTypeConfig of config.nodeTypes) {
@@ -4275,30 +4641,30 @@ class DiagramCanvas {
                 this.canUserPerformAction(DiagramActions.Remove)) {
                 // delete selection
                 if (this.userSelection.length > 0) {
-                    const nodesToBeDeleted = [];
-                    const sectionsToBeDeleted = [];
-                    const portsToBeDeleted = [];
-                    const connectionsToBeDeleted = [];
-                    const fieldsToBeDeleted = [];
+                    const nodeIdsToBeDeleted = [];
+                    const sectionIdsToBeDeleted = [];
+                    const portIdsToBeDeleted = [];
+                    const connectionIdsToBeDeleted = [];
+                    const fieldIdsToBeDeleted = [];
                     for (const userSelectionElement of this.userSelection) {
                         if (userSelectionElement instanceof DiagramNode) {
-                            nodesToBeDeleted.push(userSelectionElement);
+                            nodeIdsToBeDeleted.push(userSelectionElement.id);
                         }
                         else if (userSelectionElement instanceof DiagramSection) {
-                            sectionsToBeDeleted.push(userSelectionElement);
+                            sectionIdsToBeDeleted.push(userSelectionElement.id);
                         }
                         else if (userSelectionElement instanceof DiagramPort) {
-                            portsToBeDeleted.push(userSelectionElement);
+                            portIdsToBeDeleted.push(userSelectionElement.id);
                         }
                         else if (userSelectionElement instanceof DiagramConnection) {
-                            connectionsToBeDeleted.push(userSelectionElement);
+                            connectionIdsToBeDeleted.push(userSelectionElement.id);
                         }
                         else if (userSelectionElement instanceof DiagramField) {
-                            fieldsToBeDeleted.push(userSelectionElement);
+                            fieldIdsToBeDeleted.push(userSelectionElement.id);
                         }
                     }
-                    const removeAction = new RemoveAction(this.model, nodesToBeDeleted, sectionsToBeDeleted, portsToBeDeleted, connectionsToBeDeleted, fieldsToBeDeleted);
-                    removeAction.redo();
+                    const removeAction = new RemoveAction(this.model, nodeIdsToBeDeleted, sectionIdsToBeDeleted, portIdsToBeDeleted, connectionIdsToBeDeleted, fieldIdsToBeDeleted);
+                    removeAction.do();
                     this.actionQueue.add(removeAction);
                 }
                 this.cancelAllUserActions();
@@ -4487,6 +4853,13 @@ class DiagramCanvas {
     getPointerLocationRelativeToBody(event) {
         return d3.pointer(this.getEventHoldingCoordinates(event), d3.select('body').node());
     }
+    getPointerLocationRelativeToScreen(event) {
+        const pointerLocationRelativeToBody = this.getPointerLocationRelativeToBody(event);
+        return [
+            pointerLocationRelativeToBody[0] - window.scrollX,
+            pointerLocationRelativeToBody[1] - window.scrollY
+        ];
+    }
     updateModelInView() {
         this.updateNodesInView();
         this.updateSectionsInView();
@@ -4497,7 +4870,10 @@ class DiagramCanvas {
     updateNodesInView(...ids) {
         let updateSelection = this.selectCanvasNodes()
             .selectAll('g.diagram-node')
-            .data(this.model.nodes.filter(undefined, this.priorityThreshold), (d) => d.id);
+            .data(this.model.nodes.filter((e) => !e.removed &&
+            (this.priorityThreshold !== undefined
+                ? e.getPriority() >= this.priorityThreshold
+                : true)), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -4522,7 +4898,8 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 cursorStyle(CursorStyle.Grabbing);
                 this.draggingFrom = [event.x, event.y];
                 this.currentAction = new MoveNodeAction(this, d.id, d.coords, [0, 0]);
@@ -4532,7 +4909,8 @@ class DiagramCanvas {
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 const newNodeCoords = [
                     event.x - d.width / 2,
                     event.y - d.height / 2
@@ -4541,7 +4919,8 @@ class DiagramCanvas {
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 // prevent drag behavior if mouse hasn't moved
                 if ((this.draggingFrom[0] !== event.x ||
                     this.draggingFrom[1] !== event.y) &&
@@ -4554,10 +4933,8 @@ class DiagramCanvas {
                         newNodeCoords = this.getClosestGridPoint(newNodeCoords);
                     }
                     this.currentAction.to = newNodeCoords;
-                    this.currentAction.redo();
+                    this.currentAction.do();
                     this.actionQueue.add(this.currentAction);
-                }
-                else {
                     this.currentAction = undefined;
                 }
             }
@@ -4621,13 +4998,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -4635,7 +5014,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Left, d.width, d.width);
             }
@@ -4645,14 +5025,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed &&
+                this.currentAction instanceof StretchNodeAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4672,13 +5055,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -4686,7 +5071,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Top, d.height, d.height);
             }
@@ -4696,14 +5082,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed &&
+                this.currentAction instanceof StretchNodeAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4723,13 +5112,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -4737,7 +5128,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Right, d.width, d.width);
             }
@@ -4747,14 +5139,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableX) {
+                d.type.resizableX &&
+                !d.removed &&
+                this.currentAction instanceof StretchNodeAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4774,13 +5169,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -4788,7 +5185,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
                 this.currentAction = new StretchNodeAction(this, d.id, Side.Bottom, d.height, d.height);
             }
@@ -4798,14 +5196,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchNode) &&
-                d.type.resizableY) {
+                d.type.resizableY &&
+                !d.removed &&
+                this.currentAction instanceof StretchNodeAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -4817,7 +5218,9 @@ class DiagramCanvas {
             }
             cursorStyle();
         }));
-        mergeSelection.attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`);
+        mergeSelection
+            .attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`)
+            .attr('opacity', (d) => (d.removed ? 0.5 : 1));
         mergeSelection
             .filter('.shaped-look')
             .select('path')
@@ -4981,7 +5384,10 @@ class DiagramCanvas {
     updateSectionsInView(...ids) {
         let updateSelection = this.selectCanvasSections()
             .selectAll('g.diagram-section')
-            .data(this.model.sections.filter(this.priorityThreshold), (d) => d.id);
+            .data(this.model.sections.filter((e) => !e.removed &&
+            (this.priorityThreshold !== undefined
+                ? e.getPriority() >= this.priorityThreshold
+                : true)), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -5006,7 +5412,8 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 const node = d.node;
                 cursorStyle(CursorStyle.Grabbing);
                 this.draggingFrom = [event.x, event.y];
@@ -5017,7 +5424,8 @@ class DiagramCanvas {
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 const node = d.node;
                 const newNodeCoords = [
                     event.x - node.width / 2,
@@ -5027,7 +5435,8 @@ class DiagramCanvas {
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 const node = d.node;
                 // prevent drag behavior if mouse hasn't moved
                 if ((this.draggingFrom[0] !== event.x ||
@@ -5041,10 +5450,8 @@ class DiagramCanvas {
                         newNodeCoords = this.getClosestGridPoint(newNodeCoords);
                     }
                     this.currentAction.to = newNodeCoords;
-                    this.currentAction.redo();
+                    this.currentAction.do();
                     this.actionQueue.add(this.currentAction);
-                }
-                else {
                     this.currentAction = undefined;
                 }
             }
@@ -5108,13 +5515,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -5122,7 +5531,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Left, d.width, d.width);
             }
@@ -5132,14 +5542,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed &&
+                this.currentAction instanceof StretchSectionAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -5159,13 +5572,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -5173,7 +5588,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Top, d.height, d.height);
             }
@@ -5183,14 +5599,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed &&
+                this.currentAction instanceof StretchSectionAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -5210,13 +5629,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -5224,7 +5645,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 cursorStyle(CursorStyle.EWResize);
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Right, d.width, d.width);
             }
@@ -5234,14 +5656,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableX) {
+                d.node?.type?.resizableX &&
+                !d.removed &&
+                this.currentAction instanceof StretchSectionAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -5261,13 +5686,15 @@ class DiagramCanvas {
             .attr('stroke-width', `${RESIZER_THICKNESS}px`)
             .on(Events.MouseOver, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
             }
         })
             .on(Events.MouseOut, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 cursorStyle();
             }
         })
@@ -5275,7 +5702,8 @@ class DiagramCanvas {
             .drag()
             .on(DragEvents.Start, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 cursorStyle(CursorStyle.NSResize);
                 this.currentAction = new StretchSectionAction(this, d.id, Side.Bottom, d.height, d.height);
             }
@@ -5285,14 +5713,17 @@ class DiagramCanvas {
         })
             .on(DragEvents.Drag, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed) {
                 const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
             }
         })
             .on(DragEvents.End, (event, d) => {
             if (this.canUserPerformAction(DiagramActions.StretchSection) &&
-                d.node?.type?.resizableY) {
+                d.node?.type?.resizableY &&
+                !d.removed &&
+                this.currentAction instanceof StretchSectionAction) {
                 let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
                 if (this.snapToGrid) {
                     pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -5304,7 +5735,9 @@ class DiagramCanvas {
             }
             cursorStyle();
         }));
-        mergeSelection.attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`);
+        mergeSelection
+            .attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`)
+            .attr('opacity', (d) => (d.removed ? 0.5 : 1));
         mergeSelection
             .filter('.shaped-look')
             .select('path')
@@ -5483,7 +5916,10 @@ class DiagramCanvas {
     updatePortsInView(...ids) {
         let updateSelection = this.selectCanvasPorts()
             .selectAll('g.diagram-port')
-            .data(this.model.ports.filter(this.priorityThreshold), (d) => d.id);
+            .data(this.model.ports.filter((e) => !e.removed &&
+            (this.priorityThreshold !== undefined
+                ? e.getPriority() >= this.priorityThreshold
+                : true)), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -5522,7 +5958,8 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.AddConnection)) {
+            if (this.canUserPerformAction(DiagramActions.AddConnection) &&
+                !d.removed) {
                 cursorStyle(CursorStyle.Grabbing);
                 this.startConnection(d);
                 // should be true after having called this.startConnection()
@@ -5533,9 +5970,13 @@ class DiagramCanvas {
                         .attr('fill', 'none');
                 }
             }
+            else {
+                cursorStyle(CursorStyle.NotAllowed);
+            }
         })
-            .on(DragEvents.Drag, (event) => {
-            if (this.canUserPerformAction(DiagramActions.AddConnection)) {
+            .on(DragEvents.Drag, (event, d) => {
+            if (this.canUserPerformAction(DiagramActions.AddConnection) &&
+                !d.removed) {
                 if (this.unfinishedConnection !== undefined) {
                     const endCoords = [event.x, event.y];
                     this.unfinishedConnectionTracer?.attr('d', getConnectionPath(this.unfinishedConnection.type.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.type.width, this.unfinishedConnection.startMarkerLook?.markerWidth, this.unfinishedConnection.endMarkerLook?.markerWidth));
@@ -5560,9 +6001,9 @@ class DiagramCanvas {
                 }
             }
         })
-            .on(DragEvents.End, (event) => {
-            if (this.canUserPerformAction(DiagramActions.AddConnection)) {
-                cursorStyle();
+            .on(DragEvents.End, (event, d) => {
+            if (this.canUserPerformAction(DiagramActions.AddConnection) &&
+                !d.removed) {
                 this.unfinishedConnectionTracer?.remove();
                 if (this.mainUserHighlight instanceof DiagramPort) {
                     this.finishConnection(this.mainUserHighlight);
@@ -5598,10 +6039,12 @@ class DiagramCanvas {
                     this.dropConnection();
                 }
             }
+            cursorStyle();
         }));
         enterSelection.append('circle');
         mergeSelection
             .attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`)
+            .attr('opacity', (d) => (d.removed ? 0.5 : 1))
             .select('circle')
             .attr('cx', 0)
             .attr('cy', 0)
@@ -5612,7 +6055,10 @@ class DiagramCanvas {
             .attr('opacity', (d) => (d.highlighted || d.selected ? 0.5 : 0));
     }
     updateConnectionsInView(...ids) {
-        const connectionList = this.model.connections.filter(undefined, this.priorityThreshold);
+        const connectionList = this.model.connections.filter((e) => !e.removed &&
+            (this.priorityThreshold !== undefined
+                ? e.getPriority() >= this.priorityThreshold
+                : true));
         if (this.unfinishedConnection) {
             connectionList.push(this.unfinishedConnection);
         }
@@ -5675,6 +6121,7 @@ class DiagramCanvas {
             .append('text')
             .style('user-select', 'none');
         mergeSelection
+            .attr('opacity', (d) => (d.removed ? 0.5 : 1))
             .select('path.diagram-connection-path')
             .attr('d', (d) => getConnectionPath(d.type.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.width, d.startMarkerLook?.markerWidth, d.endMarkerLook?.markerWidth))
             .attr('marker-start', (d) => `url(#${d.id}-start-marker)`)
@@ -5700,7 +6147,10 @@ class DiagramCanvas {
     updateFieldsInView(...ids) {
         let updateSelection = this.selectCanvasFields()
             .selectAll('foreignObject.diagram-field')
-            .data(this.model.fields.filter(this.priorityThreshold), (d) => d.id);
+            .data(this.model.fields.filter((e) => !e.removed &&
+            (this.priorityThreshold !== undefined
+                ? e.getPriority() >= this.priorityThreshold
+                : true)), (d) => d.id);
         const exitSelection = updateSelection.exit();
         const enterSelection = updateSelection
             .enter()
@@ -5726,7 +6176,9 @@ class DiagramCanvas {
             }
         })
             .on(Events.DoubleClick, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.EditField) && d.editable) {
+            if (this.canUserPerformAction(DiagramActions.EditField) &&
+                d.editable &&
+                !d.removed) {
                 this.currentAction = new EditFieldAction(this, d.id, d.text, '');
                 this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, (text) => {
                     d.text = text;
@@ -5743,7 +6195,8 @@ class DiagramCanvas {
             .call(d3
             .drag()
             .on(DragEvents.Start, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 if (d.rootElement instanceof DiagramNode ||
                     d.rootElement instanceof DiagramSection) {
                     const node = d.rootElement instanceof DiagramNode
@@ -5759,7 +6212,8 @@ class DiagramCanvas {
             }
         })
             .on(DragEvents.Drag, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 if (d.rootElement instanceof DiagramNode ||
                     d.rootElement instanceof DiagramSection) {
                     const node = d.rootElement instanceof DiagramNode
@@ -5774,7 +6228,8 @@ class DiagramCanvas {
             }
         })
             .on(DragEvents.End, (event, d) => {
-            if (this.canUserPerformAction(DiagramActions.MoveNode)) {
+            if (this.canUserPerformAction(DiagramActions.MoveNode) &&
+                !d.removed) {
                 if (d.rootElement instanceof DiagramNode ||
                     d.rootElement instanceof DiagramSection) {
                     const node = d.rootElement instanceof DiagramNode
@@ -5792,10 +6247,8 @@ class DiagramCanvas {
                             newNodeCoords = this.getClosestGridPoint(newNodeCoords);
                         }
                         this.currentAction.to = newNodeCoords;
-                        this.currentAction.redo();
+                        this.currentAction.do();
                         this.actionQueue.add(this.currentAction);
-                    }
-                    else {
                         this.currentAction = undefined;
                     }
                 }
@@ -5821,6 +6274,7 @@ class DiagramCanvas {
             .attr('width', (d) => `${d.width}px`)
             .attr('height', (d) => `${d.height}px`)
             .attr('transform', (d) => `translate(${d.coords[0]},${d.coords[1]})`)
+            .attr('opacity', (d) => (d.removed ? 0.5 : 1))
             .select('div')
             .style('justify-content', (d) => d.horizontalAlign === HorizontalAlign.Center
             ? 'center'
@@ -6189,7 +6643,7 @@ class DiagramCanvas {
                     const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, this.unfinishedConnection.start?.id, port.id);
                     // clean up the previous unfinished connection
                     this.dropConnection();
-                    addConnectionAction.redo();
+                    addConnectionAction.do();
                     this.actionQueue.add(addConnectionAction);
                 }
                 else if (this.unfinishedConnection.type.canFinishOnType(this.unfinishedConnection?.start?.getNode()?.type?.id || '') &&
@@ -6197,7 +6651,7 @@ class DiagramCanvas {
                     const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, this.unfinishedConnection.start?.id);
                     // clean up the previous unfinished connection
                     this.dropConnection();
-                    addConnectionAction.redo();
+                    addConnectionAction.do();
                     this.actionQueue.add(addConnectionAction);
                 }
                 else {
@@ -6221,7 +6675,7 @@ class DiagramCanvas {
                                 : port.id);
                             // clean up the previous unfinished connection
                             this.dropConnection();
-                            addConnectionAction.redo();
+                            addConnectionAction.do();
                             this.actionQueue.add(addConnectionAction);
                         }
                         else {
@@ -6310,7 +6764,10 @@ class DiagramCanvas {
             // check if there have been changes in the previously selected ValueSet,
             // and create an UpdateValuesAction if there have
             if (!equals(this.propertyEditorValues, this.propertyEditorSelection?.valueSet.getValues())) {
-                const currentAction = new UpdateValuesAction(this.model, previousSelectionId, this.propertyEditorValues, structuredClone(this.propertyEditorSelection?.valueSet.getValues()));
+                const from = this.propertyEditorValues;
+                const to = structuredClone(this.propertyEditorSelection?.valueSet.getValues());
+                const [fromDiff, toDiff] = diff(from, to);
+                const currentAction = new UpdateValuesAction(this.model, previousSelectionId, fromDiff, toDiff);
                 this.actionQueue.add(currentAction);
                 this.propertyEditorValues = undefined;
             }
@@ -6674,7 +7131,7 @@ class DiagramButtonsComponent {
         this.canvas.actionQueue.redo();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"diagram-buttons {{ location }} {{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\r\n      <span class=\"tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\r\n      <span class=\"tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"filter\"\r\n      [class]=\"filterOn ? 'on' : 'off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableUndoRedo: "enableUndoRedo", enableZoom: "enableZoom", zoomRate: "zoomRate" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"diagram-buttons {{ location }} {{ direction }}\">\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-in\"\r\n    (click)=\"zoomIn()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom in</span>\r\n  </button>\r\n  <button\r\n    *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n    class=\"zoom-out\"\r\n    (click)=\"zoomOut()\"\r\n  >\r\n    <span class=\"tooltip\">Zoom out</span>\r\n  </button>\r\n  <div #collapsableButtons class=\"collapsable-buttons collapsed\">\r\n    <button\r\n      *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n      class=\"center\"\r\n      (click)=\"center()\"\r\n    >\r\n      <span class=\"tooltip\">Fit diagram to screen</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"undo\" (click)=\"undo()\">\r\n      <span class=\"tooltip\">Undo</span>\r\n    </button>\r\n    <button *ngIf=\"enableUndoRedo\" class=\"redo\" (click)=\"redo()\">\r\n      <span class=\"tooltip\">Redo</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n      class=\"layout\"\r\n      (click)=\"layout()\"\r\n    >\r\n      <span class=\"tooltip\">Apply layout</span>\r\n    </button>\r\n    <button\r\n      *ngIf=\"enableFilter\"\r\n      class=\"filter\"\r\n      [class]=\"filterOn ? 'on' : 'off'\"\r\n      (click)=\"filter()\"\r\n    >\r\n      <span class=\"tooltip\">Apply filter</span>\r\n    </button>\r\n  </div>\r\n  <button class=\"more-options\" (click)=\"toggleCollapse()\">\r\n    <span *ngIf=\"!collapsed\" class=\"tooltip\">Less options</span>\r\n    <span *ngIf=\"collapsed\" class=\"tooltip\">More options</span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
             type: Component,
@@ -6713,7 +7170,7 @@ class ErrorsComponent {
         this.Side = Side;
     }
     ngAfterViewInit() {
-        merge([this.canvas.validatorChanges$, this.canvas.diagramChanges$])
+        merge(this.canvas.validatorChanges$, this.canvas.diagramChanges$)
             .pipe(
         // delay to avoid errors of variables changing right after checking
         delay(1), map(() => this.validate()))
@@ -6742,7 +7199,7 @@ class ErrorsComponent {
         // TODO: IF ERROR IS IN AN ELEMENT BUT NOT IN A SPECIFIC PROPERTY, WE COULD HIGHLIGHT THE ELEMENT
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"errors\">\n  <div\n    *ngIf=\"errors.length === 0\"\n    class=\"errors-summary no-errors prevent-user-select\"\n  >\n    <span>No errors found</span>\n  </div>\n  <div\n    *ngIf=\"errors.length > 0\"\n    class=\"errors-summary with-errors prevent-user-select\"\n  >\n    <span>{{ errors.length }} errors found</span>\n    <div class=\"collapse-button-container\">\n      <daga-collapse-button\n        [collapsableSelector]=\"errorsContainer\"\n        [collapsableAdditionalSelector]=\"'.error-panel'\"\n        [direction]=\"Side.Top\"\n        [rule]=\"'display'\"\n        [collapsedValue]=\"'none'\"\n        [visibleValue]=\"'block'\"\n      />\n    </div>\n  </div>\n  <div *ngIf=\"errors.length > 0\" class=\"error-panel\">\n    <ol>\n      <li\n        *ngFor=\"let error of errors; index as i\"\n        (click)=\"showError(error)\"\n        [innerHTML]=\"error.message\"\n      ></li>\n    </ol>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ErrorsComponent, decorators: [{
             type: Component,
@@ -6877,7 +7334,7 @@ class PaletteComponent {
             .drag()
             .on(DragEvents.Drag, (event) => {
             if (this.canvas.canUserPerformAction(DiagramActions.AddNode)) {
-                const pointerCoords = this.canvas.getPointerLocationRelativeToBody(event);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
                 if (pointerCoords.length < 2 ||
                     isNaN(pointerCoords[0]) ||
                     isNaN(pointerCoords[1])) {
@@ -6893,7 +7350,7 @@ class PaletteComponent {
             .on(DragEvents.Start, (event) => {
             if (this.canvas.canUserPerformAction(DiagramActions.AddNode)) {
                 d3.select('body').style('cursor', 'grabbing');
-                const pointerCoords = this.canvas.getPointerLocationRelativeToBody(event);
+                const pointerCoords = this.canvas.getPointerLocationRelativeToScreen(event);
                 if (pointerCoords.length < 2 ||
                     isNaN(pointerCoords[0]) ||
                     isNaN(pointerCoords[1])) {
@@ -6906,7 +7363,7 @@ class PaletteComponent {
                     .style('z-index', 1);
                 // when trying to place a unique node in a diagram that already has a node of that type, set cursor style to not allowed
                 if (type.isUnique &&
-                    this.canvas.model.nodes.find(type.id) !== undefined) {
+                    this.canvas.model.nodes.find((n) => !n.removed && n.type.id === type.id) !== undefined) {
                     cursorStyle(CursorStyle.NotAllowed);
                 }
             }
@@ -6922,18 +7379,18 @@ class PaletteComponent {
                     .style('z-index', 'auto');
                 // try to place node
                 if (type.isUnique &&
-                    this.canvas.model.nodes.find(type.id) !== undefined) {
+                    this.canvas.model.nodes.find((n) => !n.removed && n.type.id === type.id) !== undefined) {
                     // can't place, it's unique and that node is already in the model
                     return;
                 }
-                const pointerCoordsRelativeToBody = this.canvas.getPointerLocationRelativeToBody(event);
-                if (pointerCoordsRelativeToBody.length < 2 ||
-                    isNaN(pointerCoordsRelativeToBody[0]) ||
-                    isNaN(pointerCoordsRelativeToBody[1])) {
+                const pointerCoordsRelativeToScreen = this.canvas.getPointerLocationRelativeToScreen(event);
+                if (pointerCoordsRelativeToScreen.length < 2 ||
+                    isNaN(pointerCoordsRelativeToScreen[0]) ||
+                    isNaN(pointerCoordsRelativeToScreen[1])) {
                     // can't place, position is incorrect
                     return;
                 }
-                const element = document.elementFromPoint(pointerCoordsRelativeToBody[0], pointerCoordsRelativeToBody[1]);
+                const element = document.elementFromPoint(pointerCoordsRelativeToScreen[0], pointerCoordsRelativeToScreen[1]);
                 if (element &&
                     !this.canvas.selectCanvasView().node()?.contains(element)) {
                     // can't place, node hasn't been dropped on the canvas
@@ -6954,7 +7411,7 @@ class PaletteComponent {
                     newNodeCoords = this.canvas.getClosestGridPoint(newNodeCoords);
                 }
                 const addNodeAction = new AddNodeAction(this.canvas, type, newNodeCoords, templateConfig.label, templateConfig.values);
-                addNodeAction.redo();
+                addNodeAction.do();
                 this.canvas.actionQueue.add(addNodeAction);
                 // reset cursor
                 cursorStyle();
@@ -7131,7 +7588,7 @@ class PaletteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    #collapseButton\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    #collapseButton\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div class=\"panel-content\">\n    <div *ngIf=\"palettes.length > 1\" class=\"panel-tabs\">\n      <div\n        *ngFor=\"let palette of palettes\"\n        class=\"panel-tab\"\n        [class]=\"palette === currentPalette ? 'current-tab' : ''\"\n        (click)=\"switchPalette(palette)\"\n      >\n        {{ palette.name }}\n      </div>\n    </div>\n    <div class=\"palette-view\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Component,
@@ -7153,20 +7610,291 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }] } });
 
+const LOST_FOCUS_TIME_WINDOW_MS = 200;
+/**
+ * Combobox with autocomplete.
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
+class AutocompleteComponent {
+    set value(value) {
+        if (value === this._value) {
+            return;
+        }
+        this._value = value;
+        this.valueInput = this.getLabelOfValue(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.valueInput = '';
+        this.disabled = false;
+        this.showOptions = false;
+        this.valueChange = new EventEmitter();
+    }
+    getLabelOfValue(value) {
+        for (const option of this.options) {
+            if (option.key === value) {
+                return option.label;
+            }
+        }
+        return `${value}`;
+    }
+    onKeyup(event) {
+        if (!this.disabled) {
+            switch (event.key) {
+                case Keys.PageDown:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(0);
+                        this.scrollToOption(0);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex + 5);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.ArrowDown:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(0);
+                        this.scrollToOption(0);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex + 1);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.PageUp:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(this.options.length - 1);
+                        this.scrollToOption(this.options.length - 1);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex - 5);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.ArrowUp:
+                    if (this.focusIndex === undefined) {
+                        this.focusOnOption(this.options.length - 1);
+                        this.scrollToOption(this.options.length - 1);
+                    }
+                    else {
+                        this.focusOnOption(this.focusIndex - 1);
+                        this.scrollToOption(this.focusIndex);
+                    }
+                    event.preventDefault();
+                    break;
+                case Keys.Escape:
+                    this.closeOptions();
+                    event.preventDefault();
+                    break;
+                case Keys.Enter:
+                    this.complete(this.options[this.focusIndex || 0]);
+                    event.preventDefault();
+                    break;
+                default:
+                    this.openOptions();
+            }
+        }
+    }
+    openOptions() {
+        if (!this.disabled) {
+            const mustContain = normalizeString(this.valueInput.trim());
+            this.currentOptions = [];
+            this.currentLabelStarts = [];
+            this.currentLabelMatches = [];
+            this.currentLabelEnds = [];
+            for (const option of this.options) {
+                const normalizedLabel = normalizeString(option.label);
+                const position = normalizedLabel.indexOf(mustContain);
+                if (position >= 0) {
+                    const labelStart = option.label.substring(0, position);
+                    const labelMatch = option.label.substring(position, position + mustContain.length);
+                    const labelEnd = option.label.substring(position + mustContain.length);
+                    this.currentOptions.push(option);
+                    this.currentLabelStarts.push(labelStart);
+                    this.currentLabelMatches.push(labelMatch);
+                    this.currentLabelEnds.push(labelEnd);
+                }
+            }
+            this.showOptions = true;
+        }
+    }
+    closeOptions() {
+        this.showOptions = false;
+    }
+    focusOnOption(index) {
+        if (!this.disabled) {
+            this.focusIndex = index;
+            if (index === undefined) {
+                return;
+            }
+            if (index < 0) {
+                this.focusIndex = 0;
+            }
+            if (index >= this.options.length) {
+                this.focusIndex = this.options.length - 1;
+            }
+        }
+    }
+    onLostFocus() {
+        setTimeout(() => {
+            this.closeOptions();
+        }, LOST_FOCUS_TIME_WINDOW_MS);
+    }
+    scrollToOption(index) {
+        const target = this.mainElement.nativeElement.querySelectorAll('li')[index];
+        if (target) {
+            target.scrollIntoView({ block: 'center' });
+        }
+    }
+    clearInput() {
+        if (!this.disabled) {
+            this.value = undefined;
+            this.valueInput = '';
+            this.showOptions = false;
+            this.focusIndex = undefined;
+        }
+    }
+    complete(option) {
+        if (!this.disabled) {
+            this.value = option;
+            this.valueInput = option.label;
+            this.showOptions = false;
+            this.focusIndex = undefined;
+            this.valueChange.emit(option.key);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AutocompleteComponent, isStandalone: true, selector: "daga-autocomplete", inputs: { value: "value", valueInput: "valueInput", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "mainElement", first: true, predicate: ["main"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n  #main\r\n  class=\"autocomplete\"\r\n  [class]=\"showOptions ? 'showing-options' : ''\"\r\n  (blur)=\"closeOptions()\"\r\n>\r\n  <div class=\"autocomplete-input\">\r\n    <input\r\n      [(ngModel)]=\"valueInput\"\r\n      [disabled]=\"disabled\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (focus)=\"openOptions()\"\r\n      (blur)=\"onLostFocus()\"\r\n    />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"autocomplete-options\">\r\n    <ul class=\"autocomplete-option-list\">\r\n      <li\r\n        *ngFor=\"let option of currentOptions; let index = index\"\r\n        class=\"autocomplete-option\"\r\n        [class]=\"index === focusIndex ? 'focused' : ''\"\r\n        (mousemove)=\"focusOnOption(index)\"\r\n        (click)=\"complete(option)\"\r\n      >\r\n        <span>{{ currentLabelStarts[index] }}</span>\r\n        <span class=\"match\">{{ currentLabelMatches[index] }}</span>\r\n        <span>{{ currentLabelEnds[index] }}</span>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mainElement: [{
+                type: ViewChild,
+                args: ['main', { static: true }]
+            }], value: [{
+                type: Input
+            }], valueInput: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+const normalizeString = (a) => (a || '')
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+
+/**
+ * Editor of a property of text list type within a property editor.
+ * @see Type.TextList
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
+class OptionListEditorComponent {
+    set value(value) {
+        if (value === this._value) {
+            return;
+        }
+        const initialAndEmpty = value.length === 0 && this._value.length === 0;
+        this._value = value;
+        this.labelsOfValue = [];
+        for (const key of this._value) {
+            this.labelsOfValue.push(this.getLabelOfValue(key));
+        }
+        if (initialAndEmpty) {
+            this.valueChange.emit(this._value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this._value = [];
+        this.labelsOfValue = [];
+        this.options = [];
+        this.valueInput = undefined;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    getLabelOfValue(value) {
+        for (const option of this.options) {
+            if (option.key === value) {
+                return option.label;
+            }
+        }
+        return `${value}`;
+    }
+    removeFromValue(index) {
+        if (this._value.length > index) {
+            this._value.splice(index, 1);
+            this.labelsOfValue.splice(index, 1);
+            this.valueChange.emit(this._value);
+        }
+        this.cdr.detectChanges();
+    }
+    addToValue() {
+        if (this.valueInput !== undefined) {
+            this._value.push(this.valueInput);
+            this.labelsOfValue.push(this.getLabelOfValue(this.valueInput));
+            this.valueChange.emit(this._value);
+            this.clearInput();
+            this.cdr.detectChanges();
+        }
+    }
+    clearInput() {
+        this.valueInput = '';
+    }
+    onKeyUp(event) {
+        if (event.key === 'Enter') {
+            this.addToValue();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: OptionListEditorComponent, isStandalone: true, selector: "daga-option-list-editor", inputs: { value: "value", options: "options", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"options || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: OptionListEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <span class=\"input\">{{ labelsOfValue[index] }}</span>\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <daga-autocomplete\r\n      [disabled]=\"disabled\"\r\n      [options]=\"options || []\"\r\n      [(value)]=\"valueInput\"\r\n    />\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], valueInput: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /**
  * Editor of a property of text list type within a property editor.
- * @see TextList
+ * @see Type.TextList
  * @see PropertyEditor
  * @see ValueSet
  * @private
  */
 class TextListEditorComponent {
-    set value(val) {
-        if (val === this._value) {
+    set value(value) {
+        if (value === this._value) {
             return;
         }
-        const initialAndEmpty = val.length === 0 && this._value.length === 0;
-        this._value = val;
+        const initialAndEmpty = value.length === 0 && this._value.length === 0;
+        this._value = value;
         if (initialAndEmpty) {
             this.valueChange.emit(this._value);
         }
@@ -7215,11 +7943,11 @@ class TextListEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextListEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item\"\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(index)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value; let index = index\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item\"\r\n    (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(index)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueInput: [{
@@ -7232,18 +7960,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 /**
  * Editor of a property of text map type within a property editor.
- * @see TextMap
+ * @see Type.TextMap
  * @see PropertyEditor
  * @see ValueSet
  * @private
  */
 class TextMapEditorComponent {
-    set value(val) {
-        if (val === this._value) {
+    set value(value) {
+        if (value === this._value) {
             return;
         }
-        const initialAndEmpty = Object.keys(val).length === 0 && Object.keys(this._value).length === 0;
-        this._value = val;
+        const initialAndEmpty = Object.keys(value).length === 0 && Object.keys(this._value).length === 0;
+        this._value = value;
         if (initialAndEmpty) {
             this.valueChange.emit(this._value);
         }
@@ -7298,11 +8026,11 @@ class TextMapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TextMapEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, LuxModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.key\"\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <lux-input\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [value]=\"item.value\"\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\n  ></lux-input>\n  <button\n    *ngIf=\"!disabled\"\n    class=\"property-button\"\n    (click)=\"removeFromValue(item.key)\"\n  >\n    <div class=\"icon close-icon\"></div>\n  </button>\n</div>\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"keyInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"keyInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearKeyInput()\"\n    ></button>\n  </div>\n  <div class=\"relatively-positioned\">\n    <lux-input\n      type=\"text\"\n      (keyup)=\"onKeyUp($event)\"\n      [(ngModel)]=\"valueInput\"\n    ></lux-input>\n    <button\n      *ngIf=\"valueInput !== ''\"\n      class=\"clear\"\n      (click)=\"clearValueInput()\"\n    ></button>\n  </div>\n  <button class=\"property-button\" (click)=\"addToValue()\">\n    <div class=\"icon add-icon\"></div>\n  </button>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"value-item-element\">\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.key\"\r\n    (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <input\r\n    class=\"input\"\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [value]=\"item.value\"\r\n    (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n  />\r\n  <button\r\n    *ngIf=\"!disabled\"\r\n    class=\"property-button\"\r\n    (click)=\"removeFromValue(item.key)\"\r\n  >\r\n    <div class=\"icon close-icon\"></div>\r\n  </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"value-item-input\">\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n    <button\r\n      *ngIf=\"keyInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearKeyInput()\"\r\n    ></button>\r\n  </div>\r\n  <div class=\"input relatively-positioned\">\r\n    <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n    <button\r\n      *ngIf=\"valueInput !== ''\"\r\n      class=\"clear\"\r\n      (click)=\"clearValueInput()\"\r\n    ></button>\r\n  </div>\r\n  <button class=\"property-button\" (click)=\"addToValue()\">\r\n    <div class=\"icon add-icon\"></div>\r\n  </button>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], keyInput: [{
@@ -7326,7 +8054,8 @@ class ObjectEditorComponent {
         return this.canvasProvider.getCanvas();
     }
     get userCanEdit() {
-        return this.canvas.canUserPerformAction(DiagramActions.UpdateValues);
+        return (this.canvas.canUserPerformAction(DiagramActions.UpdateValues) &&
+            this.valueSet?.rootElement?.['removed'] !== true);
     }
     get valueSet() {
         return this._valueSet;
@@ -7343,10 +8072,6 @@ class ObjectEditorComponent {
         this.depth = 0;
         // Attributes for the template
         this.Type = Type;
-        this.booleanRadioItems = [
-            { value: false, label: 'No' },
-            { value: true, label: 'Yes' }
-        ];
     }
     displayProperty(property) {
         if (this.valueSet === undefined) {
@@ -7398,24 +8123,35 @@ class ObjectEditorComponent {
             }
         }
     }
-    convertDate(date) {
+    dateToLocalDatetimeString(date) {
         if (typeof date === 'string') {
             return date;
         }
-        return date && !isNaN(date.valueOf()) ? new Date(date).toISOString() : '';
+        if (date === null || date === undefined || isNaN(date.valueOf())) {
+            return '';
+        }
+        const offsetDate = new Date(date);
+        const timezoneOffset = offsetDate.getTimezoneOffset();
+        offsetDate.setMinutes(offsetDate.getMinutes() - timezoneOffset);
+        return offsetDate.toISOString().substring(0, 19); // for user friendliness, we trim off the milliseconds
+    }
+    localDatetimeStringToDate(string) {
+        // with no timezone specified, the local time is assumed
+        return new Date(string);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <div class=\"icon hide-icon\"></div>\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuxModule }, { kind: "component", type: i3.AutocompleteComponent, selector: "lux-autocomplete", inputs: ["inputId", "disabled", "readonly", "label", "canAddNewValues", "keepOpenAfterDelete", "value", "dataSource", "required", "placeholder", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange", "dataSourceChange"] }, { kind: "component", type: i3.AutocompleteListComponent, selector: "lux-autocomplete-list", inputs: ["value", "lang", "inputId", "dataSource", "placeholder", "disabled", "deleteLabelTemplate", "addMessage", "required", "resolveLabelsFunction", "populateFunction", "instance"], outputs: ["valueChange"] }, { kind: "component", type: i3.InputComponent, selector: "lux-input", inputs: ["rows", "cols", "step", "min", "max", "lang", "inlineErrors", "inputId", "aria-label", "readonly", "disabled", "pattern", "currency", "placeholder", "required", "type", "value"], outputs: ["valueChange", "keyPress"] }, { kind: "component", type: i3.RadiogroupComponent, selector: "lux-radiogroup", inputs: ["name", "disabled", "readonly", "required", "items", "value"], outputs: ["itemsChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"property.name + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\r\n      <div class=\"icon hide-icon\"></div>\r\n    </button>\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"property.type === Type.OptionList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ObjectEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'daga-object-editor', imports: [
+                        AutocompleteComponent,
                         CommonModule,
-                        LuxModule,
                         FormsModule,
+                        OptionListEditorComponent,
                         TextListEditorComponent,
                         TextMapEditorComponent
-                    ], template: "<div\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\n  class=\"property\"\n  [class]=\"property.name + ' depth-' + depth\"\n>\n  <p class=\"property-name\">\n    {{ property.name }}\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\n      <div class=\"icon hide-icon\"></div>\n    </button>\n  </p>\n\n  <lux-input\n    *ngIf=\"property.type === Type.Text\"\n    type=\"text\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <textarea\n    *ngIf=\"property.type === Type.TextArea\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [ngModel]=\"valueSet?.getValue(property.name)\"\n    (ngModelChange)=\"setValue(property, $event)\"\n  ></textarea>\n  <lux-input\n    *ngIf=\"property.type === Type.Number\"\n    type=\"number\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Color\"\n    type=\"color\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Date\"\n    type=\"date\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Time\"\n    type=\"time\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"convertDate(valueSet?.getValue(property.name))\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-input\n    *ngIf=\"property.type === Type.Url\"\n    type=\"url\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-input>\n  <lux-radiogroup\n    *ngIf=\"property.type === Type.Boolean\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [items]=\"booleanRadioItems\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-radiogroup>\n  <lux-autocomplete\n    *ngIf=\"property.type === Type.Option\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete>\n  <lux-autocomplete-list\n    *ngIf=\"property.type === Type.OptionList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [dataSource]=\"property.options || []\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></lux-autocomplete-list>\n  <daga-text-list-editor\n    *ngIf=\"property.type === Type.TextList\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-list-editor>\n  <daga-text-map-editor\n    *ngIf=\"property.type === Type.TextMap\"\n    [disabled]=\"!property.editable || !userCanEdit\"\n    [value]=\"valueSet?.getValue(property.name)\"\n    (valueChange)=\"setValue(property, $event)\"\n  ></daga-text-map-editor>\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\n    <daga-object-editor\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\n      [depth]=\"depth + 1\"\n    ></daga-object-editor>\n  </div>\n</div>\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\n  <p class=\"property-name\">Add property:</p>\n  <select (change)=\"displayProperty($event)\">\n    <option value=\"\">Select a property</option>\n    <option\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\n      [value]=\"property.name\"\n    >\n      {{ property.name }}\n    </option>\n  </select>\n</div>\n" }]
+                    ], template: "<div\r\n  *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n  class=\"property\"\r\n  [class]=\"property.name + ' depth-' + depth\"\r\n>\r\n  <p class=\"property-name\">\r\n    {{ property.name }}\r\n    <button class=\"property-button\" (click)=\"hideProperty(property.name)\">\r\n      <div class=\"icon hide-icon\"></div>\r\n    </button>\r\n  </p>\r\n\r\n  <input\r\n    *ngIf=\"property.type === Type.Text\"\r\n    type=\"text\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"property.type === Type.TextArea\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  ></textarea>\r\n  <input\r\n    *ngIf=\"property.type === Type.Number\"\r\n    type=\"number\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Color\"\r\n    type=\"text\"\r\n    pattern=\"#\\d{6}\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Datetime\"\r\n    type=\"datetime-local\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n    (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Date\"\r\n    type=\"date\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Time\"\r\n    type=\"time\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <input\r\n    *ngIf=\"property.type === Type.Url\"\r\n    type=\"url\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [ngModel]=\"valueSet?.getValue(property.name)\"\r\n    (ngModelChange)=\"setValue(property, $event)\"\r\n  />\r\n  <div class=\"radio\" *ngIf=\"property.type === Type.Boolean\">\r\n    <label class=\"radio-item radio-start\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"false\"\r\n        [checked]=\"valueSet?.getValue(property.name) === false\"\r\n        (change)=\"setValue(property, false)\"\r\n      />\r\n      No\r\n    </label>\r\n    <label class=\"radio-item radio-end\">\r\n      <input\r\n        type=\"radio\"\r\n        [disabled]=\"!property.editable || !userCanEdit\"\r\n        [name]=\"property.name\"\r\n        value=\"true\"\r\n        [checked]=\"valueSet?.getValue(property.name) === true\"\r\n        (change)=\"setValue(property, true)\"\r\n      />\r\n      Yes\r\n    </label>\r\n  </div>\r\n  <div class=\"relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n    <daga-autocomplete\r\n      [disabled]=\"!property.editable || !userCanEdit\"\r\n      [options]=\"property.options || []\"\r\n      [value]=\"valueSet?.getValue(property.name)\"\r\n      (valueChange)=\"setValue(property, $event)\"\r\n    />\r\n  </div>\r\n  <daga-option-list-editor\r\n    *ngIf=\"property.type === Type.OptionList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [options]=\"property.options || []\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-option-list-editor>\r\n  <daga-text-list-editor\r\n    *ngIf=\"property.type === Type.TextList\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-list-editor>\r\n  <daga-text-map-editor\r\n    *ngIf=\"property.type === Type.TextMap\"\r\n    [disabled]=\"!property.editable || !userCanEdit\"\r\n    [value]=\"valueSet?.getValue(property.name)\"\r\n    (valueChange)=\"setValue(property, $event)\"\r\n  ></daga-text-map-editor>\r\n  <div *ngIf=\"property.type === Type.Object\" class=\"left-bar\">\r\n    <daga-object-editor\r\n      [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n      [depth]=\"depth + 1\"\r\n    ></daga-object-editor>\r\n  </div>\r\n</div>\r\n<div class=\"property\" *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\">\r\n  <p class=\"property-name\">Add property:</p>\r\n  <select (change)=\"displayProperty($event)\">\r\n    <option value=\"\">Select a property</option>\r\n    <option\r\n      *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n      [value]=\"property.name\"\r\n    >\r\n      {{ property.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
                 type: Input
             }], depth: [{
@@ -7474,11 +8210,11 @@ class PropertyEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\r\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: PropertyEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'daga-property-editor', imports: [CommonModule, CollapseButtonComponent, ObjectEditorComponent], template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\n  <daga-collapse-button\n    [disabled]=\"\n      !valueSet ||\n      !valueSet.propertySet ||\n      !valueSet.propertySet.hasProperties()\n    \"\n    [direction]=\"direction\"\n    [collapsableSelector]=\"panel\"\n    collapsableAdditionalSelector=\".panel-content\"\n    rule=\"display\"\n    collapsedValue=\"none\"\n    visibleValue=\"block\"\n  />\n  <div\n    *ngIf=\"\n      valueSet && valueSet.propertySet && valueSet.propertySet.hasProperties()\n    \"\n    class=\"panel-content\"\n  >\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\n  </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'daga-property-editor', imports: [CommonModule, CollapseButtonComponent, ObjectEditorComponent], template: "<div #panel class=\"panel bottom {{ location }} {{ direction }}\">\r\n  <daga-collapse-button\r\n    #collapse\r\n    [disabled]=\"\r\n      !valueSet ||\r\n      !valueSet.propertySet ||\r\n      !valueSet.propertySet.hasProperties()\r\n    \"\r\n    [direction]=\"direction\"\r\n    [collapsableSelector]=\"panel\"\r\n    collapsableAdditionalSelector=\".panel-content\"\r\n    rule=\"display\"\r\n    collapsedValue=\"none\"\r\n    visibleValue=\"block\"\r\n  />\r\n  <div\r\n    *ngIf=\"\r\n      valueSet &&\r\n      valueSet.propertySet &&\r\n      valueSet.propertySet.hasProperties() &&\r\n      !collapse.collapsed\r\n    \"\r\n    class=\"panel-content\"\r\n  >\r\n    <p *ngIf=\"title\" class=\"title\">{{ title }}</p>\r\n    <daga-object-editor [valueSet]=\"valueSet\"></daga-object-editor>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
                 type: ViewChild,
                 args: ['panel']
@@ -7544,7 +8280,7 @@ class DiagramEditorComponent {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"append-to\" #appendTo></div>\n<daga-diagram-buttons\n  *ngIf=\"config.components?.buttons?.exists !== false\"\n  #diagramButtons\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\n  [enableFilter]=\"config.components?.buttons?.enableFilter !== false\"\n  [enableLayout]=\"config.components?.buttons?.enableLayout !== false\"\n  [enableUndoRedo]=\"config.components?.buttons?.enableUndoRedo !== false\"\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\n  [zoomRate]=\"config.components?.buttons?.zoomRate || 2\"\n/>\n<daga-palette\n  *ngIf=\"\n    config.components?.palette?.exists !== false &&\n    config.components?.palette?.sections &&\n    (config.components?.palette?.sections?.length || 0) > 0\n  \"\n  #palette\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\n  [width]=\"config.components?.palette?.width || '12rem'\"\n  [palettes]=\"config.components?.palette?.sections || []\"\n/>\n<daga-property-editor\n  *ngIf=\"config.components?.propertyEditor?.exists !== false\"\n  #propertyEditor\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\n/>\n<daga-errors *ngIf=\"config.components?.errors?.exists !== false\" />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableFilter", "enableLayout", "enableUndoRedo", "enableZoom", "zoomRate"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
@@ -7585,7 +8321,8 @@ class DagaExporter {
             updatedAt: model.updatedAt,
             nodes: [],
             connections: [],
-            data: model.valueSet.getValues()
+            data: model.valueSet.getValues(),
+            logicalClock: model.logicalClock
         };
         if (model.id) {
             result.id = model.id;
@@ -7593,7 +8330,7 @@ class DagaExporter {
         if (model.description) {
             result.description = model.description;
         }
-        for (const node of model.nodes) {
+        for (const node of model.nodes.filter((e) => !e.removed)) {
             const sections = [];
             for (const section of node.sections) {
                 const ports = [];
@@ -7625,7 +8362,7 @@ class DagaExporter {
                     label: port.label?.text || ''
                 });
             }
-            result.nodes.push({
+            const newNode = {
                 id: node.id,
                 type: node.type.id,
                 sections,
@@ -7635,9 +8372,13 @@ class DagaExporter {
                 width: node.width,
                 height: node.height,
                 data: node.valueSet.getValues()
-            });
+            };
+            if (node.coordsTimestamp) {
+                newNode.coordsTimestamp = node.coordsTimestamp;
+            }
+            result.nodes.push(newNode);
         }
-        for (const connection of model.connections) {
+        for (const connection of model.connections.filter((e) => !e.removed)) {
             result.connections.push({
                 id: connection.id,
                 type: connection.type.id,
@@ -7670,6 +8411,9 @@ class DagaImporter {
         model.type = data.type;
         model.createdAt = new Date(data.createdAt);
         model.updatedAt = new Date(data.updatedAt);
+        if (data.logicalClock) {
+            model.logicalClock = data.logicalClock;
+        }
         for (const node of data.nodes || []) {
             const newNodeType = model.nodes.types.get(node.type);
             if (newNodeType) {
@@ -7677,6 +8421,9 @@ class DagaImporter {
                 model.nodes.add(newNode);
                 newNode.width = node.width;
                 newNode.height = node.height;
+                if (node.coordsTimestamp) {
+                    newNode.coordsTimestamp = node.coordsTimestamp;
+                }
                 if (node.label) {
                     // add node label
                     if (newNodeType.label) {
@@ -7920,8 +8667,7 @@ class DagaModule {
             TextMapEditorComponent,
             PropertyEditorComponent,
             CommonModule,
-            FormsModule,
-            LuxModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
+            FormsModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
             DiagramEditorComponent,
@@ -7932,8 +8678,7 @@ class DagaModule {
             TextMapEditorComponent,
             PropertyEditorComponent,
             CommonModule,
-            FormsModule,
-            LuxModule] }); }
+            FormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DagaModule, decorators: [{
             type: NgModule,
@@ -7951,17 +8696,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         TextMapEditorComponent,
                         PropertyEditorComponent,
                         CommonModule,
-                        FormsModule,
-                        LuxModule
+                        FormsModule
                     ],
                     exports: [DiagramComponent, DiagramEditorComponent],
                     providers: [DagaConfigurationService, CanvasProviderService]
                 }]
         }] });
 
+const VERSION = '0.0.1';
+/**
+ * The client that communicates with the daga-server over WebSockets.
+ *
+ * Use this to create and join rooms.
+ * @public
+ */
+class CollabClient {
+    constructor(dagaServer, userId) {
+        this.sendQueue = [];
+        /**
+         * Joined sessions by locator.
+         */
+        this.sessions = new Map();
+        /**
+         * Created but unacked sessions by refId.
+         */
+        this.pendingSessions = new Map();
+        this.dagaServer = dagaServer;
+        this.userId = userId;
+        this.clientId = v4();
+        this.ws = new WebSocket(this.dagaServer, 'esgrima');
+        this.ws.addEventListener('open', this.onOpen.bind(this));
+        this.ws.addEventListener('message', this.onMessage.bind(this));
+        this.ws.addEventListener('close', this.onClose.bind(this));
+        this.ws.addEventListener('error', this.onError.bind(this));
+        this.send({
+            type: 'HELO',
+            clientId: this.clientId,
+            userId: this.userId,
+            version: VERSION,
+            ts: now()
+        });
+    }
+    onOpen() {
+        // Send queued messages.
+        for (const serialized of this.sendQueue) {
+            this.ws.send(serialized);
+        }
+        this.sendQueue = [];
+    }
+    onMessage(e) {
+        const serialized = e.data;
+        const message = JSON.parse(serialized);
+        this.receive(message);
+    }
+    onClose(e) {
+        console.error('WebSocket closed', e);
+    }
+    onError(e) {
+        console.error('WebSocket error', e);
+    }
+    /**
+     * Internal send method. Use instead of calling ws.send directly.
+     */
+    send(message) {
+        const serialized = JSON.stringify(message);
+        if (this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(serialized);
+        }
+        else {
+            // Queue until after we connect.
+            this.sendQueue.push(serialized);
+        }
+    }
+    /**
+     * Internal receive method. Use instead of handling ws receive events directly.
+     */
+    receive(message) {
+        switch (message.type) {
+            case 'EACK': {
+                const session = this.sessions.get(message.locator);
+                if (session === undefined) {
+                    throw new Error(`EACK for unknown locator: "${message.locator}"`);
+                }
+                const initialModel = message.initialModel;
+                new DagaImporter().import(session.canvas.model, initialModel);
+                this.startSyncing(session);
+                session.joinRoomResolve?.();
+                session.joinRoomResolve = undefined;
+                break;
+            }
+            case 'ADD': {
+                const session = this.sessions.get(message.locator);
+                if (session === undefined) {
+                    throw new Error(`ADD for unknown locator: "${message.locator}"`);
+                }
+                const action = message.payload;
+                session.canvas.collabEngine.receive(action);
+                break;
+            }
+            case 'CACK': {
+                const session = this.pendingSessions.get(message.refId);
+                if (session === undefined) {
+                    throw new Error(`CACK for unknown refId: "${message.refId}"`);
+                }
+                session.locator = message.locator;
+                this.pendingSessions.delete(message.refId);
+                this.sessions.set(session.locator, session);
+                session.createRoomResolve?.(session.locator);
+                session.createRoomResolve = undefined;
+                // Deliver queued AddMessages now that we have a locator.
+                for (const message of session.addQueue) {
+                    this.send({ ...message, locator: session.locator });
+                }
+                session.addQueue = [];
+            }
+        }
+    }
+    /**
+     * Creates and joins a room. The given canvas becomes collaborative, starting
+     * with its current model.
+     *
+     * Returns a Promise that resolves with the new room's locator once joined.
+     * @public
+     */
+    createAndJoinRoom(canvas) {
+        if (canvas.collabEngine.isInRoom) {
+            throw new Error('Canvas is already in a room');
+        }
+        canvas.collabEngine.isInRoom = true;
+        const refId = v4();
+        const initialModel = new DagaExporter().export(canvas.model);
+        this.send({
+            type: 'CREA',
+            clientId: this.clientId,
+            userId: this.userId,
+            refId,
+            initialModel,
+            ts: now()
+        });
+        const session = {
+            canvas,
+            locator: null,
+            addQueue: []
+        };
+        this.pendingSessions.set(refId, session);
+        // We need to start queuing local AddMessages immediately, in case the user edits
+        // the diagram while the CREA message is in-flight.
+        this.startSyncing(session);
+        return new Promise((resolve) => {
+            session.createRoomResolve = resolve;
+        });
+    }
+    /**
+     * Joins the room with the given locator. The given canvas becomes collaborative,
+     * **replacing** its current model with the room's model.
+     *
+     * Returns a Promise that resolves once the room has been joined and loaded into
+     * the canvas. You should hide or lock the canvas until it resolves, since any
+     * user inputs before then will be overwritten.
+     * @public
+     */
+    joinRoom(canvas, locator) {
+        if (canvas.collabEngine.isInRoom) {
+            throw new Error('Canvas is already in a room');
+        }
+        canvas.collabEngine.isInRoom = true;
+        this.send({
+            type: 'ENRO',
+            clientId: this.clientId,
+            userId: this.userId,
+            locator,
+            ts: now()
+        });
+        const session = {
+            canvas,
+            locator,
+            addQueue: []
+        };
+        this.sessions.set(locator, session);
+        return new Promise((resolve) => {
+            session.joinRoomResolve = resolve;
+        });
+    }
+    startSyncing(session) {
+        // Sync AddMessages from us to the server.
+        session.canvas.collabEngine.onSend = (action) => {
+            if (session.locator === null) {
+                // Queue until we receive the locator in the CACK message.
+                session.addQueue.push({
+                    type: 'ADD',
+                    clientId: this.clientId,
+                    userId: this.userId,
+                    payload: action,
+                    ts: now()
+                });
+            }
+            else {
+                this.send({
+                    type: 'ADD',
+                    clientId: this.clientId,
+                    userId: this.userId,
+                    locator: session.locator,
+                    payload: action,
+                    ts: now()
+                });
+            }
+        };
+    }
+}
+/**
+ * Returns the current timestamp for a message's ts field.
+ */
+function now() {
+    return new Date().toISOString();
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveNodeAction, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, Side, StretchNodeAction, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
+export { ACTION_QUEUE_SIZE, ActionQueue, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, CanvasProviderService, ClosedShape, CollabClient, CollapseButtonComponent, Corner, DagaConfigurationService, DagaExporter, DagaImporter, DagaModule, DiagramActions, DiagramButtonsComponent, DiagramCanvas, DiagramComponent, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramEditorComponent, DiagramElement, DiagramEntitySet, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ErrorsComponent, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveNodeAction, ObjectEditorComponent, PaletteComponent, PriorityLayout, Property, PropertyEditorComponent, PropertySet, RemoveAction, Side, StretchNodeAction, TextListEditorComponent, TextMapEditorComponent, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts };
 //# sourceMappingURL=metadev-daga.mjs.map