@metadev/daga 5.1.1 → 5.1.3

package/index.esm.js

@@ -101,6 +101,53 @@ var VerticalAlign;
   VerticalAlign["Bottom"] = "bottom";
 })(VerticalAlign || (VerticalAlign = {}));
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
  * Round the coordinates of the given point to the nearest whole number.
  * @public
@@ -1193,40 +1240,6 @@ const clone = o => {
   return res;
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 /**
  * Converts a configuration for a look into an easier to consult object of fully qualified looks for each case.
  *
@@ -1484,6 +1497,7 @@ const diffProperties = (a, b, valueSet) => {
  */
 const isObject = x => x !== undefined && x !== null && x.constructor === Object;
 
+var _ValueSet_instances, _a$1, _ValueSet_values, _ValueSet_valueSets, _ValueSet_ownTimestamps, _ValueSet_constructSubValueSet;
 /**
  * A set of values corresponding to a set of properties.
  * @public
@@ -1491,17 +1505,18 @@ const isObject = x => x !== undefined && x !== null && x.constructor === Object;
  */
 class ValueSet {
   constructor(propertySet, rootElement) {
+    _ValueSet_instances.add(this);
     this.displayedProperties = [];
     this.hiddenProperties = [];
-    this.values = {};
-    this.valueSets = {};
+    _ValueSet_values.set(this, {});
+    _ValueSet_valueSets.set(this, {});
     /**
      * Collaborative timestamps for all keys in this.values that have ever been set,
      * even if since they've since been set to the default value.
      *
      * Object values (in this.valueSets) store their own timestamps separately.
      */
-    this.ownTimestamps = {};
+    _ValueSet_ownTimestamps.set(this, {});
     this.propertySet = propertySet;
     this.rootElement = rootElement;
     this.resetValues();
@@ -1576,16 +1591,16 @@ class ValueSet {
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getValue(key) {
-    var _a;
-    const rootAttribute = (_a = this.propertySet.getProperty(key)) === null || _a === void 0 ? void 0 : _a.rootAttribute;
+    var _b;
+    const rootAttribute = (_b = this.propertySet.getProperty(key)) === null || _b === void 0 ? void 0 : _b.rootAttribute;
     if (rootAttribute !== undefined && rootAttribute !== null) {
-      this.values[key] = this.getRootElementValue(rootAttribute);
+      __classPrivateFieldGet(this, _ValueSet_values, "f")[key] = this.getRootElementValue(rootAttribute);
     }
     const property = this.propertySet.getProperty(key);
     if (property.type === Type.Object) {
-      return this.valueSets[key].getValues();
+      return __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].getValues();
     } else {
-      return this.values[key];
+      return __classPrivateFieldGet(this, _ValueSet_values, "f")[key];
     }
   }
   /**
@@ -1598,7 +1613,7 @@ class ValueSet {
     for (const key in this.propertySet.propertyMap) {
       const property = this.propertySet.getProperty(key);
       if (property.type === Type.Object) {
-        result[key] = this.valueSets[key].getValues();
+        result[key] = __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].getValues();
       } else {
         result[key] = this.getValue(key);
       }
@@ -1615,7 +1630,7 @@ class ValueSet {
     for (const key in keys) {
       const property = this.propertySet.getProperty(key);
       if (property.type === Type.Object) {
-        result[key] = this.valueSets[key].getValuesForKeys(keys[key]);
+        result[key] = __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].getValuesForKeys(keys[key]);
       } else {
         result[key] = this.getValue(key);
       }
@@ -1632,9 +1647,9 @@ class ValueSet {
     for (const key in this.propertySet.propertyMap) {
       const property = this.propertySet.getProperty(key);
       if (property.type === Type.Object) {
-        result[key] = this.valueSets[key].getTimestamps();
+        result[key] = __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].getTimestamps();
       } else {
-        const timestamp = this.ownTimestamps[key];
+        const timestamp = __classPrivateFieldGet(this, _ValueSet_ownTimestamps, "f")[key];
         if (timestamp) result[key] = timestamp;
       }
     }
@@ -1687,9 +1702,9 @@ class ValueSet {
     const property = this.propertySet.getProperty(key);
     if (property) {
       if (property.type === Type.Object) {
-        this.valueSets[key].setValues(value);
+        __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].setValues(value);
       } else {
-        this.values[key] = value;
+        __classPrivateFieldGet(this, _ValueSet_values, "f")[key] = value;
         if (!equals(value, property.defaultValue)) {
           this.displayProperty(property);
         }
@@ -1710,7 +1725,7 @@ class ValueSet {
     for (const key in values) {
       const property = this.propertySet.getProperty(key);
       if (property.type === Type.Object) {
-        this.valueSets[key].setValues(values[key]);
+        __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].setValues(values[key]);
       } else {
         this.setValue(key, values[key]);
       }
@@ -1722,13 +1737,13 @@ class ValueSet {
    * @param values An object containing all the CollabTimestamps in the set.
    */
   setTimestamps(timestamps) {
-    this.ownTimestamps = {};
+    __classPrivateFieldSet(this, _ValueSet_ownTimestamps, {}, "f");
     for (const key in timestamps) {
       const property = this.propertySet.getProperty(key);
       if (property.type === Type.Object) {
-        this.valueSets[key].setTimestamps(timestamps[key]);
+        __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].setTimestamps(timestamps[key]);
       } else {
-        this.ownTimestamps[key] = timestamps[key];
+        __classPrivateFieldGet(this, _ValueSet_ownTimestamps, "f")[key] = timestamps[key];
       }
     }
   }
@@ -1741,7 +1756,7 @@ class ValueSet {
     for (const key in values) {
       const property = this.propertySet.getProperty(key);
       if (property.type === Type.Object) {
-        this.valueSets[key].overwriteValues(values[key]);
+        __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].overwriteValues(values[key]);
       } else {
         this.setValue(key, values[key]);
       }
@@ -1756,11 +1771,11 @@ class ValueSet {
     for (const key in values) {
       const property = this.propertySet.getProperty(key);
       if (property.type === Type.Object) {
-        this.valueSets[key].overwriteValuesLww(values[key], timestamp);
+        __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key].overwriteValuesLww(values[key], timestamp);
       } else {
-        if (timestampWins(timestamp, this.ownTimestamps[key])) {
+        if (timestampWins(timestamp, __classPrivateFieldGet(this, _ValueSet_ownTimestamps, "f")[key])) {
           this.setValue(key, values[key]);
-          this.ownTimestamps[key] = timestamp;
+          __classPrivateFieldGet(this, _ValueSet_ownTimestamps, "f")[key] = timestamp;
         }
       }
     }
@@ -1773,18 +1788,18 @@ class ValueSet {
   resetValues() {
     this.displayedProperties = [];
     this.hiddenProperties = [];
-    this.ownTimestamps = {};
+    __classPrivateFieldSet(this, _ValueSet_ownTimestamps, {}, "f");
     for (const key in this.propertySet.propertyMap) {
       const property = this.propertySet.getProperty(key);
       const rootAttribute = property.rootAttribute;
       if (property.type === Type.Object) {
-        this.valueSets[key] = this.constructSubValueSet(key);
+        __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key] = __classPrivateFieldGet(this, _ValueSet_instances, "m", _ValueSet_constructSubValueSet).call(this, key);
       } else {
-        this.values[key] = clone(property.defaultValue);
+        __classPrivateFieldGet(this, _ValueSet_values, "f")[key] = clone(property.defaultValue);
       }
       if (rootAttribute !== undefined && rootAttribute !== null) {
         if (property.defaultValue !== undefined && !equals(this.getRootElementValue(rootAttribute), property.defaultValue)) {
-          this.setRootElementValue(rootAttribute, this.values[key]);
+          this.setRootElementValue(rootAttribute, __classPrivateFieldGet(this, _ValueSet_values, "f")[key]);
         }
       }
       if (property.basic !== false) {
@@ -1794,19 +1809,6 @@ class ValueSet {
       }
     }
   }
-  /**
-   * 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);
-    valueSet.overwriteValues(clone(property.defaultValue));
-    return valueSet;
-  }
   /**
    * Gets the ValueSet under the given key when there are nested ValueSets.
    * @private
@@ -1814,7 +1816,7 @@ class ValueSet {
    * @returns A ValueSet.
    */
   getSubValueSet(key) {
-    return this.valueSets[key];
+    return __classPrivateFieldGet(this, _ValueSet_valueSets, "f")[key];
   }
   /**
    * Moves the given property to the list of displayed properties.
@@ -1839,6 +1841,13 @@ class ValueSet {
     }
   }
 }
+_a$1 = ValueSet, _ValueSet_values = new WeakMap(), _ValueSet_valueSets = new WeakMap(), _ValueSet_ownTimestamps = new WeakMap(), _ValueSet_instances = new WeakSet(), _ValueSet_constructSubValueSet = function _ValueSet_constructSubValueSet(key) {
+  const property = this.propertySet.getProperty(key);
+  const propertySet = new PropertySet(property.properties);
+  const valueSet = new _a$1(propertySet, this.rootElement);
+  valueSet.overwriteValues(clone(property.defaultValue));
+  return valueSet;
+};
 
 /**
  * Represents a collection of diagram entities of a type that exists as part of a diagram model.
@@ -1976,6 +1985,7 @@ class DiagramEntitySet {
   }
 }
 
+var _DiagramElement_id;
 /**
  * Default priority value for diagram elements.
  * @private
@@ -1993,7 +2003,7 @@ class DiagramElement {
    * @public
    */
   get id() {
-    return this._id;
+    return __classPrivateFieldGet(this, _DiagramElement_id, "f");
   }
   /**
    * Whether this diagram element is currently in the user highlight.
@@ -2011,6 +2021,7 @@ class DiagramElement {
     return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
   }
   constructor(model, id) {
+    _DiagramElement_id.set(this, void 0);
     /**
      * Whether this diagram element has itself been explicitly removed.
      *
@@ -2029,7 +2040,7 @@ class DiagramElement {
      */
     this.selfRemovedTimestamp = null;
     this.model = model;
-    this._id = id;
+    __classPrivateFieldSet(this, _DiagramElement_id, id, "f");
   }
   /**
    * Obtain the selection of this element.
@@ -2040,6 +2051,7 @@ class DiagramElement {
     return (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.selectCanvasView()) === null || _b === void 0 ? void 0 : _b.select(`[id='${escapeSelector(this.id)}']`);
   }
 }
+_DiagramElement_id = new WeakMap();
 class DiagramElementSet extends DiagramEntitySet {
   all(includeRemoved = false) {
     if (includeRemoved) {
@@ -2117,6 +2129,7 @@ class DiagramElementSet extends DiagramEntitySet {
   }
 }
 
+var _DiagramConnection_type, _DiagramConnectionSet_model;
 /**
  * Default values of the parameters of a diagram connection.
  * @private
@@ -2201,12 +2214,12 @@ class DiagramConnectionType {
  */
 class DiagramConnection extends DiagramElement {
   get type() {
-    return this._type;
+    return __classPrivateFieldGet(this, _DiagramConnection_type, "f");
   }
   set type(type) {
     var _a, _b;
-    if (type !== this._type) {
-      this._type = type;
+    if (type !== __classPrivateFieldGet(this, _DiagramConnection_type, "f")) {
+      __classPrivateFieldSet(this, _DiagramConnection_type, type, "f");
       if (this.valueSet) {
         this.valueSet = new ValueSet(type.propertySet, this);
       }
@@ -2402,6 +2415,7 @@ class DiagramConnection extends DiagramElement {
       throw new Error(`DiagramConnection cannot have an empty or null id`);
     }
     super(model, id);
+    _DiagramConnection_type.set(this, void 0);
     /**
      * Coordinates of the start point of this connection.
      * @public
@@ -2432,7 +2446,7 @@ class DiagramConnection extends DiagramElement {
      * @public
      */
     this.points = [];
-    this._type = type;
+    __classPrivateFieldSet(this, _DiagramConnection_type, type, "f");
     this.valueSet = new ValueSet(type.propertySet, this);
     this.originalData = {};
     this.setStart(start);
@@ -2609,6 +2623,7 @@ class DiagramConnection extends DiagramElement {
     }
   }
 }
+_DiagramConnection_type = new WeakMap();
 class DiagramConnectionSet extends DiagramElementSet {
   /**
    * Instance a set of connections for the given model. This method is used internally.
@@ -2616,12 +2631,13 @@ class DiagramConnectionSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
+    _DiagramConnectionSet_model.set(this, void 0);
     /**
      * Set of the possible types of connection that the connections of this set can have.
      * @public
      */
     this.types = new DiagramEntitySet();
-    this.model = model;
+    __classPrivateFieldSet(this, _DiagramConnectionSet_model, model, "f");
   }
   /**
    * Instance a new connection and add it to this set.
@@ -2644,7 +2660,7 @@ class DiagramConnectionSet extends DiagramElementSet {
       }
       connectionType = foundConnectionType;
     }
-    const connection = new DiagramConnection(this.model, connectionType, start, end, id);
+    const connection = new DiagramConnection(__classPrivateFieldGet(this, _DiagramConnectionSet_model, "f"), connectionType, start, end, id);
     super.add(connection);
     connection.updateInView();
     connection.valueSet.resetValues();
@@ -2666,6 +2682,7 @@ class DiagramConnectionSet extends DiagramElementSet {
     }
   }
 }
+_DiagramConnectionSet_model = new WeakMap();
 
 /**
  * The different modes for when a node or section can be resized.
@@ -2689,6 +2706,7 @@ var ResizableMode;
   ResizableMode[ResizableMode["Never"] = 2] = "Never";
 })(ResizableMode || (ResizableMode = {}));
 
+var _DiagramField_text, _DiagramFieldSet_model;
 /**
  * Default values of the parameters of a diagram field.
  * @private
@@ -2725,14 +2743,14 @@ class DiagramField extends DiagramElement {
    * @public
    */
   get text() {
-    return this._text;
+    return __classPrivateFieldGet(this, _DiagramField_text, "f");
   }
   set text(value) {
     var _a;
     if (value === null || value === undefined || (value === null || value === void 0 ? void 0 : value.trim()) === '') {
       value = this.defaultText;
     }
-    this._text = value;
+    __classPrivateFieldSet(this, _DiagramField_text, value, "f");
     this.updateInView();
     if (this.fit) {
       (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id, this.shrink);
@@ -2763,6 +2781,7 @@ class DiagramField extends DiagramElement {
       throw new Error('DiagramField for rootElement already exists');
     }
     super(model, id);
+    _DiagramField_text.set(this, void 0);
     /**
      * Collaborative timestamp for text.
      * @public
@@ -2801,7 +2820,7 @@ class DiagramField extends DiagramElement {
     this.highlightedLook = looks.highlightedLook;
     this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
     this.defaultText = text;
-    this._text = text;
+    __classPrivateFieldSet(this, _DiagramField_text, text, "f");
     this.editable = editable;
     this.fit = fit;
     this.shrink = shrink;
@@ -2831,6 +2850,7 @@ class DiagramField extends DiagramElement {
     return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
   }
 }
+_DiagramField_text = new WeakMap();
 class DiagramFieldSet extends DiagramElementSet {
   /**
    * Instance a set of fields for the given model. This method is used internally.
@@ -2838,14 +2858,15 @@ class DiagramFieldSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
-    this.model = model;
+    _DiagramFieldSet_model.set(this, void 0);
+    __classPrivateFieldSet(this, _DiagramFieldSet_model, model, "f");
   }
   /**
    * 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, width, height, horizontalAlign, verticalAlign, orientation, multiline, look, text, editable, fit, shrink) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, horizontalAlign, verticalAlign, orientation, multiline, look, text, editable, fit, shrink);
+    const field = new DiagramField(__classPrivateFieldGet(this, _DiagramFieldSet_model, "f"), rootElement, coords, width, height, horizontalAlign, verticalAlign, orientation, multiline, look, text, editable, fit, shrink);
     super.add(field);
     field.updateInView();
     // add this field to its root element
@@ -2871,6 +2892,7 @@ class DiagramFieldSet extends DiagramElementSet {
     }
   }
 }
+_DiagramFieldSet_model = new WeakMap();
 const getBottomMargin = config => {
   if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
@@ -3079,6 +3101,7 @@ class DiagramResizer {
 }
 const DIAGRAM_DEFAULT_RESIZER = new DiagramResizer(DIAGRAM_RESIZER_DEFAULTS);
 
+var _DiagramSectionSet_model;
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -3566,7 +3589,8 @@ class DiagramSectionSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
-    this.model = model;
+    _DiagramSectionSet_model.set(this, void 0);
+    __classPrivateFieldSet(this, _DiagramSectionSet_model, model, "f");
   }
   /**
    * 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.
@@ -3574,7 +3598,7 @@ class DiagramSectionSet extends DiagramElementSet {
    */
   new(node, indexXInNode, indexYInNode, coords, width, height, id) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const section = new DiagramSection(this.model, node, indexXInNode, indexYInNode, coords, width, height, id);
+    const section = new DiagramSection(__classPrivateFieldGet(this, _DiagramSectionSet_model, "f"), node, indexXInNode, indexYInNode, coords, width, height, id);
     super.add(section);
     section.updateInView();
     // add this section to its node
@@ -3585,7 +3609,7 @@ class DiagramSectionSet extends DiagramElementSet {
     if (sectionPorts && sectionPorts.length > 0) {
       for (let i = 0; i < sectionPorts.length; ++i) {
         const portConfig = sectionPorts[i];
-        const port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, section, [section.coords[0] + (portConfig.coords[0] || 0), section.coords[1] + (portConfig.coords[1] || 0)], portConfig.connectionPoint !== undefined ? [section.coords[0] + (portConfig.connectionPoint[0] || 0), section.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig === null || portConfig === void 0 ? void 0 : portConfig.direction, `${section.id}_${i}`, portConfig.anchorPointX || 'floating', portConfig.anchorPointY || 'floating');
+        const port = __classPrivateFieldGet(this, _DiagramSectionSet_model, "f").ports.new(portConfig.type !== undefined ? __classPrivateFieldGet(this, _DiagramSectionSet_model, "f").ports.types.get(portConfig.type) : undefined, section, [section.coords[0] + (portConfig.coords[0] || 0), section.coords[1] + (portConfig.coords[1] || 0)], portConfig.connectionPoint !== undefined ? [section.coords[0] + (portConfig.connectionPoint[0] || 0), section.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig === null || portConfig === void 0 ? void 0 : portConfig.direction, `${section.id}_${i}`, portConfig.anchorPointX || 'floating', portConfig.anchorPointY || 'floating');
         if ((_e = port.type) === null || _e === void 0 ? void 0 : _e.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === void 0 ? void 0 : _f.label);
           labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
@@ -3604,7 +3628,7 @@ class DiagramSectionSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          __classPrivateFieldGet(this, _DiagramSectionSet_model, "f").fields.new(port, labelCoords, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
@@ -3613,7 +3637,7 @@ class DiagramSectionSet extends DiagramElementSet {
     if (sectionLabel) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), sectionLabel);
       labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
-      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      __classPrivateFieldGet(this, _DiagramSectionSet_model, "f").fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     return section;
   }
@@ -3622,11 +3646,11 @@ class DiagramSectionSet extends DiagramElementSet {
     if (section) {
       // remove all ports
       while (section.ports.length > 0) {
-        this.model.ports.remove(section.ports[0].id);
+        __classPrivateFieldGet(this, _DiagramSectionSet_model, "f").ports.remove(section.ports[0].id);
       }
       // remove label
       if (section.label) {
-        this.model.fields.remove(section.label.id);
+        __classPrivateFieldGet(this, _DiagramSectionSet_model, "f").fields.remove(section.label.id);
       }
       // remove from root element
       if (section.node) {
@@ -3639,7 +3663,9 @@ class DiagramSectionSet extends DiagramElementSet {
     }
   }
 }
+_DiagramSectionSet_model = new WeakMap();
 
+var _DiagramNode_type, _DiagramNodeSet_model;
 /**
  * Default values of the look of a diagram node.
  * @private
@@ -3670,6 +3696,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   defaultHeight: 1,
   minWidth: 1,
   minHeight: 1,
+  defaultZ: 0,
   resizableX: false,
   resizableY: false,
   snapToGridOffset: [0, 0, 0, 0],
@@ -3699,6 +3726,7 @@ class DiagramNodeType {
     this.defaultHeight = values.defaultHeight;
     this.minWidth = values.minWidth;
     this.minHeight = values.minHeight;
+    this.defaultZ = values.defaultZ;
     if (typeof options.resizableX === 'undefined') {
       this.resizerX = new DiagramResizer({
         mode: ResizableMode.Never
@@ -3750,12 +3778,12 @@ class DiagramNodeType {
  */
 class DiagramNode extends DiagramElement {
   get type() {
-    return this._type;
+    return __classPrivateFieldGet(this, _DiagramNode_type, "f");
   }
   set type(type) {
     var _a, _b;
-    if (type !== this._type) {
-      this._type = type;
+    if (type !== __classPrivateFieldGet(this, _DiagramNode_type, "f")) {
+      __classPrivateFieldSet(this, _DiagramNode_type, type, "f");
       if (this.valueSet) {
         this.valueSet = new ValueSet(type.propertySet, this);
       }
@@ -3848,6 +3876,7 @@ class DiagramNode extends DiagramElement {
       throw new Error(`DiagramNode cannot have an empty or null id`);
     }
     super(model, id);
+    _DiagramNode_type.set(this, void 0);
     /**
      * Nodes contained within this node.
      * @public
@@ -3873,12 +3902,13 @@ class DiagramNode extends DiagramElement {
      * @public
      */
     this.geometryTimestamp = null;
-    this._type = type;
+    __classPrivateFieldSet(this, _DiagramNode_type, type, "f");
     this.valueSet = new ValueSet(type.propertySet, this);
     this.originalData = {};
     this.coords = coords;
     this.width = type.defaultWidth;
     this.height = type.defaultHeight;
+    this.z = type.defaultZ;
   }
   get removed() {
     return this.selfRemoved;
@@ -3906,6 +3936,16 @@ class DiagramNode extends DiagramElement {
       child.raise();
     }
   }
+  /**
+   * Put this element above other elements in the view if they have a lower z coordinate.
+   */
+  raiseWithZ() {
+    this.raise();
+    const overlappingNodesWithHigherPriority = this.model.nodes.filter(n => n.id !== this.id && n.z > this.z && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [this.coords, [this.coords[0] + this.width, this.coords[1] + this.height]]));
+    for (const n of overlappingNodesWithHigherPriority) {
+      n.raiseWithZ();
+    }
+  }
   getPriority() {
     return this.type.priority;
   }
@@ -4209,6 +4249,7 @@ class DiagramNode extends DiagramElement {
     }
     this.setGeometry({
       coords,
+      z: this.z,
       width: this.width,
       height: this.height,
       // We already moved the sections above - skip changing them in setDimensions.
@@ -4260,6 +4301,7 @@ class DiagramNode extends DiagramElement {
     }
     this.setGeometry({
       coords: [newCoordsX[0], newCoordsY[0]],
+      z: this.z,
       width: newCoordsX[1] - newCoordsX[0],
       height: newCoordsY[1] - newCoordsY[0],
       // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
@@ -4367,6 +4409,7 @@ class DiagramNode extends DiagramElement {
     }
     return {
       coords: [...this.coords],
+      z: this.z,
       width: this.width,
       height: this.height,
       sections,
@@ -4383,6 +4426,7 @@ class DiagramNode extends DiagramElement {
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
     this.coords = [...geometry.coords];
+    this.z = geometry.z;
     this.width = geometry.width;
     this.height = geometry.height;
     const newCoordsX = [this.coords[0], this.coords[0] + this.width];
@@ -4523,6 +4567,7 @@ class DiagramNode extends DiagramElement {
     this.stretch(Side.Bottom, margin + rowHeight);
   }
 }
+_DiagramNode_type = new WeakMap();
 class DiagramNodeSet extends DiagramElementSet {
   /**
    * Instance a set of nodes for the given model. This method is used internally.
@@ -4530,12 +4575,13 @@ class DiagramNodeSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
+    _DiagramNodeSet_model.set(this, void 0);
     /**
      * Set of the possible types of node that the nodes of this set can have.
      * @public
      */
     this.types = new DiagramEntitySet();
-    this.model = model;
+    __classPrivateFieldSet(this, _DiagramNodeSet_model, model, "f");
   }
   /**
    * Instance a new node and add it to this set.
@@ -4557,7 +4603,7 @@ class DiagramNodeSet extends DiagramElementSet {
       }
       nodeType = foundNodeType;
     }
-    const node = new DiagramNode(this.model, nodeType, coords, id);
+    const node = new DiagramNode(__classPrivateFieldGet(this, _DiagramNodeSet_model, "f"), nodeType, coords, id);
     super.add(node);
     node.updateInView();
     // add node sections
@@ -4567,7 +4613,7 @@ class DiagramNodeSet extends DiagramElementSet {
       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], ((_a = nodeType.sectionGrid.defaultWidths) === null || _a === void 0 ? void 0 : _a[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH, ((_b = nodeType.sectionGrid.defaultHeights) === null || _b === void 0 ? void 0 : _b[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
+          __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").sections.new(node, i, j, [widthAccumulator, heightAccumulator], ((_a = nodeType.sectionGrid.defaultWidths) === null || _a === void 0 ? void 0 : _a[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH, ((_b = nodeType.sectionGrid.defaultHeights) === null || _b === void 0 ? void 0 : _b[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
           widthAccumulator += (((_c = nodeType.sectionGrid.defaultWidths) === null || _c === void 0 ? void 0 : _c[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH) + (nodeType.sectionGrid.margin || 0);
         }
         heightAccumulator += (((_d = nodeType.sectionGrid.defaultHeights) === null || _d === void 0 ? void 0 : _d[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT) + (nodeType.sectionGrid.margin || 0);
@@ -4577,8 +4623,8 @@ class DiagramNodeSet extends DiagramElementSet {
     if (nodeType.ports.length > 0) {
       for (let i = 0; i < nodeType.ports.length; ++i) {
         const portConfig = nodeType.ports[i];
-        const portType = portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined;
-        const port = this.model.ports.new(portType, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_port_${i}`, portConfig.anchorPointX || 'floating', portConfig.anchorPointY || 'floating');
+        const portType = portConfig.type !== undefined ? __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").ports.types.get(portConfig.type) : undefined;
+        const port = __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").ports.new(portType, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_port_${i}`, portConfig.anchorPointX || 'floating', portConfig.anchorPointY || 'floating');
         if ((_e = port.type) === null || _e === void 0 ? void 0 : _e.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === void 0 ? void 0 : _f.label);
           labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
@@ -4597,7 +4643,7 @@ class DiagramNodeSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").fields.new(port, labelCoords, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
@@ -4605,13 +4651,13 @@ class DiagramNodeSet extends DiagramElementSet {
     if (nodeType.label) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), nodeType.label);
       labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
-      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     // add node decorators
     if (nodeType.decorators.length > 0) {
       for (let i = 0; i < nodeType.decorators.length; ++i) {
         const decoratorConfig = nodeType.decorators[i];
-        this.model.decorators.new(node, [node.coords[0] + decoratorConfig.coords[0], node.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, node.getPriority(), decoratorConfig.svg, `${node.id}_decorator_${i}`, decoratorConfig.anchorPointX || 'floating', decoratorConfig.anchorPointY || 'floating');
+        __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").decorators.new(node, [node.coords[0] + decoratorConfig.coords[0], node.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, node.getPriority(), decoratorConfig.svg, `${node.id}_decorator_${i}`, decoratorConfig.anchorPointX || 'floating', decoratorConfig.anchorPointY || 'floating');
       }
     }
     node.valueSet.resetValues();
@@ -4627,23 +4673,23 @@ class DiagramNodeSet extends DiagramElementSet {
       }
       // remove all children
       while (node.children.length > 0) {
-        this.model.nodes.remove(node.children[0].id);
+        __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").nodes.remove(node.children[0].id);
       }
       // remove all sections
       while (node.sections.length > 0) {
-        this.model.sections.remove(node.sections[0].id);
+        __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").sections.remove(node.sections[0].id);
       }
       // remove all ports
       while (node.ports.length > 0) {
-        this.model.ports.remove(node.ports[0].id);
+        __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").ports.remove(node.ports[0].id);
       }
       // remove all decorators
       while (node.decorators.length > 0) {
-        this.model.decorators.remove(node.decorators[0].id);
+        __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").decorators.remove(node.decorators[0].id);
       }
       // remove label
       if (node.label) {
-        this.model.fields.remove(node.label.id);
+        __classPrivateFieldGet(this, _DiagramNodeSet_model, "f").fields.remove(node.label.id);
       }
       // remove from set of nodes
       super.remove(id);
@@ -4668,6 +4714,7 @@ class DiagramNodeSet extends DiagramElementSet {
     return nodesAtLocation;
   }
 }
+_DiagramNodeSet_model = new WeakMap();
 /**
  * Removes any nodes from the given list which are a descendant of another node in the list.
  * @param nodes A list of nodes.
@@ -4775,6 +4822,7 @@ const getTopPadding = config => {
   }
 };
 
+var _DiagramDecoratorSet_model;
 /**
  * A foreign object which is inserted with arbitrary SVG code into a diagram.
  * Similar to a diagram object, but it's part of a node or section and it moves and stretches as its geometry changes.
@@ -4833,7 +4881,8 @@ class DiagramDecoratorSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
-    this.model = model;
+    _DiagramDecoratorSet_model.set(this, void 0);
+    __classPrivateFieldSet(this, _DiagramDecoratorSet_model, model, "f");
   }
   /**
    * Instance a new decorator and add it to this set.
@@ -4847,7 +4896,7 @@ class DiagramDecoratorSet extends DiagramElementSet {
    * @returns The instanced decorator.
    */
   new(rootElement, coords, width, height, priority, svg, id, anchorPointX = 'floating', anchorPointY = 'floating') {
-    const decorator = new DiagramDecorator(this.model, rootElement, coords, width, height, priority, svg, id, anchorPointX, anchorPointY);
+    const decorator = new DiagramDecorator(__classPrivateFieldGet(this, _DiagramDecoratorSet_model, "f"), rootElement, coords, width, height, priority, svg, id, anchorPointX, anchorPointY);
     super.add(decorator);
     decorator.updateInView();
     // add this port to its root element
@@ -4870,7 +4919,9 @@ class DiagramDecoratorSet extends DiagramElementSet {
     }
   }
 }
+_DiagramDecoratorSet_model = new WeakMap();
 
+var _DiagramObjectSet_model;
 /**
  * A foreign object which is inserted with arbitrary SVG code into a diagram.
  * Diagram objects are not serialized with other diagram elements.
@@ -4922,7 +4973,8 @@ class DiagramObjectSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
-    this.model = model;
+    _DiagramObjectSet_model.set(this, void 0);
+    __classPrivateFieldSet(this, _DiagramObjectSet_model, model, "f");
   }
   /**
    * Instance a new object and add it to this set.
@@ -4936,7 +4988,7 @@ class DiagramObjectSet extends DiagramElementSet {
    * @returns The instanced object.
    */
   new(coords, width, height, priority, svg, id) {
-    const object = new DiagramObject(this.model, coords, width, height, priority, svg, id);
+    const object = new DiagramObject(__classPrivateFieldGet(this, _DiagramObjectSet_model, "f"), coords, width, height, priority, svg, id);
     super.add(object);
     object.updateInView();
     return object;
@@ -4951,7 +5003,9 @@ class DiagramObjectSet extends DiagramElementSet {
     }
   }
 }
+_DiagramObjectSet_model = new WeakMap();
 
+var _DiagramPort_type, _DiagramPortSet_model;
 /**
  * Default values of the look of a diagram port.
  * @private
@@ -5014,11 +5068,11 @@ class DiagramPortType {
  */
 class DiagramPort extends DiagramElement {
   get type() {
-    return this._type;
+    return __classPrivateFieldGet(this, _DiagramPort_type, "f");
   }
   set type(type) {
-    if (type !== this._type) {
-      this._type = type;
+    if (type !== __classPrivateFieldGet(this, _DiagramPort_type, "f")) {
+      __classPrivateFieldSet(this, _DiagramPort_type, type, "f");
       this.updateInView();
     }
   }
@@ -5143,6 +5197,7 @@ class DiagramPort extends DiagramElement {
       throw new Error(`DiagramPort cannot have an empty or null id`);
     }
     super(model, id);
+    _DiagramPort_type.set(this, void 0);
     /**
      * Connections that start at this port.
      * @public
@@ -5153,7 +5208,7 @@ class DiagramPort extends DiagramElement {
      * @public
      */
     this.incomingConnections = [];
-    this._type = type;
+    __classPrivateFieldSet(this, _DiagramPort_type, type, "f");
     this.rootElement = rootElement;
     this.coords = coords;
     this.connectionPoint = connectionPoint || coords;
@@ -5241,6 +5296,7 @@ class DiagramPort extends DiagramElement {
     return distanceBetweenPoints(this.coords, coords);
   }
 }
+_DiagramPort_type = new WeakMap();
 class DiagramPortSet extends DiagramElementSet {
   /**
    * Instance a set of ports for the given model. This method is used internally.
@@ -5248,19 +5304,20 @@ class DiagramPortSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
+    _DiagramPortSet_model.set(this, void 0);
     /**
      * Set of the possible types of port that the ports of this set can have.
      * @public
      */
     this.types = new DiagramEntitySet();
-    this.model = model;
+    __classPrivateFieldSet(this, _DiagramPortSet_model, model, "f");
   }
   /**
    * 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(type, rootElement, coords, connectionPoint, direction, id, anchorPointX = 'floating', anchorPointY = 'floating') {
-    const port = new DiagramPort(this.model, type, rootElement, coords, connectionPoint, direction, id, anchorPointX, anchorPointY);
+    const port = new DiagramPort(__classPrivateFieldGet(this, _DiagramPortSet_model, "f"), type, rootElement, coords, connectionPoint, direction, id, anchorPointX, anchorPointY);
     super.add(port);
     port.updateInView();
     // add this port to its root element
@@ -5274,14 +5331,14 @@ class DiagramPortSet extends DiagramElementSet {
     if (port) {
       // remove all connections
       while (port.outgoingConnections.length > 0) {
-        this.model.connections.remove(port.outgoingConnections[0].id);
+        __classPrivateFieldGet(this, _DiagramPortSet_model, "f").connections.remove(port.outgoingConnections[0].id);
       }
       while (port.incomingConnections.length > 0) {
-        this.model.connections.remove(port.incomingConnections[0].id);
+        __classPrivateFieldGet(this, _DiagramPortSet_model, "f").connections.remove(port.incomingConnections[0].id);
       }
       // remove label
       if (port.label) {
-        this.model.fields.remove(port.label.id);
+        __classPrivateFieldGet(this, _DiagramPortSet_model, "f").fields.remove(port.label.id);
       }
       // remove from root element
       if (port.rootElement instanceof DiagramNode || port.rootElement instanceof DiagramSection) {
@@ -5294,6 +5351,7 @@ class DiagramPortSet extends DiagramElementSet {
     }
   }
 }
+_DiagramPortSet_model = new WeakMap();
 
 /**
  * Importer which imports a diagram from its daga model representation.
@@ -5530,6 +5588,7 @@ class DagaImporter {
   }
 }
 
+var _SetSelfRemovedCollabAction_instances, _SetSelfRemovedCollabAction_doOne;
 /**
  * Collaborative action which consists of adding a node.
  * @private
@@ -5559,6 +5618,7 @@ class AddNodeCollabAction {
     } else {
       node.valueSet.resetValues();
     }
+    node.raiseWithZ();
   }
   serialize() {
     return {
@@ -5717,6 +5777,7 @@ class SetGeometryCollabAction {
         }
       }
       (_c = node.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(node);
+      node.raiseWithZ();
       node.geometryTimestamp = this.timestamp;
     }
   }
@@ -5881,6 +5942,7 @@ class UpdateValuesCollabAction {
  */
 class SetSelfRemovedCollabAction {
   constructor(canvas, nodeIds, sectionIds, portIds, connectionIds, fieldIds, selfRemoved, timestamp) {
+    _SetSelfRemovedCollabAction_instances.add(this);
     this.canvas = canvas;
     this.nodeIds = nodeIds;
     this.sectionIds = sectionIds;
@@ -5890,27 +5952,21 @@ class SetSelfRemovedCollabAction {
     this.selfRemoved = selfRemoved;
     this.timestamp = timestamp;
   }
-  doOne(elt) {
-    if (elt && timestampWins(this.timestamp, elt.selfRemovedTimestamp)) {
-      elt.selfRemoved = this.selfRemoved;
-      elt.selfRemovedTimestamp = this.timestamp;
-    }
-  }
   do() {
     for (const nodeId of this.nodeIds) {
-      this.doOne(this.canvas.model.nodes.get(nodeId, true));
+      __classPrivateFieldGet(this, _SetSelfRemovedCollabAction_instances, "m", _SetSelfRemovedCollabAction_doOne).call(this, this.canvas.model.nodes.get(nodeId, true));
     }
     for (const sectionId of this.sectionIds) {
-      this.doOne(this.canvas.model.sections.get(sectionId, true));
+      __classPrivateFieldGet(this, _SetSelfRemovedCollabAction_instances, "m", _SetSelfRemovedCollabAction_doOne).call(this, this.canvas.model.sections.get(sectionId, true));
     }
     for (const portId of this.portIds) {
-      this.doOne(this.canvas.model.ports.get(portId, true));
+      __classPrivateFieldGet(this, _SetSelfRemovedCollabAction_instances, "m", _SetSelfRemovedCollabAction_doOne).call(this, this.canvas.model.ports.get(portId, true));
     }
     for (const connectionId of this.connectionIds) {
-      this.doOne(this.canvas.model.connections.get(connectionId, true));
+      __classPrivateFieldGet(this, _SetSelfRemovedCollabAction_instances, "m", _SetSelfRemovedCollabAction_doOne).call(this, this.canvas.model.connections.get(connectionId, true));
     }
     for (const fieldId of this.fieldIds) {
-      this.doOne(this.canvas.model.fields.get(fieldId, true));
+      __classPrivateFieldGet(this, _SetSelfRemovedCollabAction_instances, "m", _SetSelfRemovedCollabAction_doOne).call(this, this.canvas.model.fields.get(fieldId, true));
     }
     // update view
     this.canvas.updateNodesInView(...this.nodeIds);
@@ -5937,6 +5993,12 @@ class SetSelfRemovedCollabAction {
     return new SetSelfRemovedCollabAction(canvas, serialized.nodeIds, serialized.sectionIds, serialized.portIds, serialized.connectionIds, serialized.fieldIds, serialized.removed, serialized.timestamp);
   }
 }
+_SetSelfRemovedCollabAction_instances = new WeakSet(), _SetSelfRemovedCollabAction_doOne = function _SetSelfRemovedCollabAction_doOne(elt) {
+  if (elt && timestampWins(this.timestamp, elt.selfRemovedTimestamp)) {
+    elt.selfRemoved = this.selfRemoved;
+    elt.selfRemovedTimestamp = this.timestamp;
+  }
+};
 /**
  * Collaborative action which consists of pasting elements from an external source into a diagram.
  *
@@ -6108,13 +6170,19 @@ class CollabEngine {
   }
 }
 
+var _ActionStack_canvas;
 /**
  * A stack of recent actions taken by the user.
  * @private
  */
 class ActionStack {
   constructor(canvas, maximum) {
-    this.canvas = canvas;
+    /**
+     * Canvas that this action stack belongs to.
+     * @private
+     */
+    _ActionStack_canvas.set(this, void 0);
+    __classPrivateFieldSet(this, _ActionStack_canvas, canvas, "f");
     this.maximum = maximum;
     this.history = [];
     this.index = 0;
@@ -6134,7 +6202,7 @@ class ActionStack {
       this.history.push(action);
       ++this.index;
     }
-    this.canvas.diagramChange$.next({
+    __classPrivateFieldGet(this, _ActionStack_canvas, "f").diagramChange$.next({
       action,
       method: DiagramActionMethod.Do
     });
@@ -6153,7 +6221,7 @@ class ActionStack {
         hasEffect = action.undo();
       } while (!hasEffect && this.index > 0);
     }
-    this.canvas.diagramChange$.next({
+    __classPrivateFieldGet(this, _ActionStack_canvas, "f").diagramChange$.next({
       action,
       method: DiagramActionMethod.Undo
     });
@@ -6172,12 +6240,13 @@ class ActionStack {
         ++this.index;
       } while (!hasEffect && this.index < this.history.length);
     }
-    this.canvas.diagramChange$.next({
+    __classPrivateFieldGet(this, _ActionStack_canvas, "f").diagramChange$.next({
       action,
       method: DiagramActionMethod.Redo
     });
   }
 }
+_ActionStack_canvas = new WeakMap();
 /**
  * The different methods of an action.
  * @private
@@ -6947,14 +7016,28 @@ class DiagramModel {
 }
 
 /**
- * Checks if the given mouse event was produced with a secondary button press.
+ * Checks if the given pointer event was produced with a secondary button press.
  * @private
- * @param event A mouse event.
- * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
+ * @param event A pointer event.
+ * @returns `true` if the given pointer event was produced with a secondary button press, `false` otherwise.
  */
 const isSecondaryButton = event => {
   return !!event.button;
 };
+/**
+ * Obtain the pointer event which is valid for passing to the `d3.pointer()` function.
+ * @param event A pointer event.
+ * @returns A pointer event which can be passed to the `d3.pointer()` function.
+ */
+const getEventHoldingCoordinates = event => {
+  if (event.type === 'drag' || event.type === 'start' || event.type === 'end') {
+    const sourceEvent = event.sourceEvent;
+    if (sourceEvent && (sourceEvent.type === 'touchmove' || sourceEvent.type === 'touchstart' || sourceEvent.type === 'touchend')) {
+      return sourceEvent.touches[0] || sourceEvent.changedTouches[0];
+    }
+  }
+  return event;
+};
 /**
  * Get the SVG path of a diagram connection.
  * @private
@@ -7161,6 +7244,7 @@ const getGridSpacingY = gridConfig => {
   return value;
 };
 
+var _DiagramContextMenu_canvas, _DiagramContextMenu_config, _DiagramContextMenu_contextMenuContainer;
 const CONTEXT_MENU_MENU_RADIUS = 96;
 const CONTEXT_MENU_BUTTON_RADIUS = 32;
 const CONTEXT_MENU_TOTAL_RADIUS = CONTEXT_MENU_MENU_RADIUS + CONTEXT_MENU_BUTTON_RADIUS;
@@ -7181,8 +7265,11 @@ class DiagramContextMenu {
    * @param canvas A canvas.
    */
   constructor(canvas, config) {
-    this.canvas = canvas;
-    this.config = config || CONTEXT_MENU_DEFAULTS;
+    _DiagramContextMenu_canvas.set(this, void 0);
+    _DiagramContextMenu_config.set(this, void 0);
+    _DiagramContextMenu_contextMenuContainer.set(this, void 0);
+    __classPrivateFieldSet(this, _DiagramContextMenu_canvas, canvas, "f");
+    __classPrivateFieldSet(this, _DiagramContextMenu_config, config || CONTEXT_MENU_DEFAULTS, "f");
   }
   /**
    * Opens the context menu at the location determined by the given mouse event.
@@ -7191,11 +7278,11 @@ class DiagramContextMenu {
    */
   open(event) {
     this.close();
-    const coordsRelativeToRoot = this.canvas.getPointerLocationRelativeToRoot(event);
-    const coordsRelativeToCanvas = this.canvas.getPointerLocationRelativeToCanvas(event);
+    const coordsRelativeToRoot = __classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").getPointerLocationRelativeToRoot(event);
+    const coordsRelativeToCanvas = __classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").getPointerLocationRelativeToCanvas(event);
     // append to the root (svg) element so the context menu is not affected by zoom transforms on the canvas view
-    const contextMenuContainer = this.canvas.selectSVGElement().append('foreignObject').attr('class', 'daga-context-menu').attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).attr('height', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).style('pointer-events', 'none').on(Events.ContextMenu, newEvent => {
-      if (this.canvas.canUserPerformAction(DiagramActions.ContextMenu)) {
+    const contextMenuContainer = __classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").selectSVGElement().append('foreignObject').attr('class', 'daga-context-menu').attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).attr('height', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).style('pointer-events', 'none').on(Events.ContextMenu, newEvent => {
+      if (__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         this.open(newEvent);
       }
@@ -7203,9 +7290,9 @@ class DiagramContextMenu {
       event.preventDefault();
       this.close();
     });
-    this.contextMenuContainer = contextMenuContainer;
+    __classPrivateFieldSet(this, _DiagramContextMenu_contextMenuContainer, contextMenuContainer, "f");
     const buttons = [];
-    if (!(this.canvas.userSelection.length === 0) && this.canvas.canUserPerformAction(DiagramActions.Clipboard) && this.canvas.canUserPerformAction(DiagramActions.Remove)) {
+    if (!(__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").userSelection.length === 0) && __classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").canUserPerformAction(DiagramActions.Clipboard) && __classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").canUserPerformAction(DiagramActions.Remove)) {
       buttons.push({
         name: 'CUT',
         imageClass: 'daga-cut',
@@ -7215,7 +7302,7 @@ class DiagramContextMenu {
         }
       });
     }
-    if (!(this.canvas.userSelection.length === 0) && this.canvas.canUserPerformAction(DiagramActions.Clipboard)) {
+    if (!(__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").userSelection.length === 0) && __classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").canUserPerformAction(DiagramActions.Clipboard)) {
       buttons.push({
         name: 'COPY',
         imageClass: 'daga-copy',
@@ -7225,7 +7312,7 @@ class DiagramContextMenu {
         }
       });
     }
-    if (this.canvas.canUserPerformAction(DiagramActions.Paste)) {
+    if (__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").canUserPerformAction(DiagramActions.Paste)) {
       buttons.push({
         name: 'PASTE',
         imageClass: 'daga-paste',
@@ -7235,7 +7322,7 @@ class DiagramContextMenu {
         }
       });
     }
-    if (!(this.canvas.userSelection.length === 0) && this.canvas.canUserPerformAction(DiagramActions.Remove)) {
+    if (!(__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").userSelection.length === 0) && __classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f").canUserPerformAction(DiagramActions.Remove)) {
       buttons.push({
         name: 'DELETE',
         imageClass: 'daga-delete',
@@ -7245,8 +7332,8 @@ class DiagramContextMenu {
         }
       });
     }
-    for (const customButton of this.config.customButtons || CONTEXT_MENU_DEFAULTS.customButtons) {
-      if (customButton.condition !== undefined ? customButton.condition(this.canvas) : true) {
+    for (const customButton of __classPrivateFieldGet(this, _DiagramContextMenu_config, "f").customButtons || CONTEXT_MENU_DEFAULTS.customButtons) {
+      if (customButton.condition !== undefined ? customButton.condition(__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f")) : true) {
         buttons.push(customButton);
       }
     }
@@ -7265,12 +7352,12 @@ class DiagramContextMenu {
       const buttonContainer = contextMenuContainer.append('xhtml:div').attr('class', `daga-context-menu-button ${button.onPress !== undefined ? ' daga-clickable' : ''}`).attr('tabindex', 0).style('position', 'absolute').style('box-sizing', 'border-box').style('width', `${2 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('height', `${2 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('border-radius', `${CONTEXT_MENU_BUTTON_RADIUS}px`).style('pointer-events', 'auto').on(Events.Click, event => {
         if (buttonOnPress) {
           event.preventDefault();
-          buttonOnPress(this.canvas);
+          buttonOnPress(__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f"));
         }
       }).on(Events.KeyDown, event => {
         if (buttonOnPress && event.key === Keys.Enter) {
           event.preventDefault();
-          buttonOnPress(this.canvas);
+          buttonOnPress(__classPrivateFieldGet(this, _DiagramContextMenu_canvas, "f"));
         }
       });
       if (button.imageClass !== undefined) {
@@ -7293,11 +7380,13 @@ class DiagramContextMenu {
    */
   close() {
     var _a;
-    (_a = this.contextMenuContainer) === null || _a === void 0 ? void 0 : _a.remove();
-    this.contextMenuContainer = undefined;
+    (_a = __classPrivateFieldGet(this, _DiagramContextMenu_contextMenuContainer, "f")) === null || _a === void 0 ? void 0 : _a.remove();
+    __classPrivateFieldSet(this, _DiagramContextMenu_contextMenuContainer, undefined, "f");
   }
 }
+_DiagramContextMenu_canvas = new WeakMap(), _DiagramContextMenu_config = new WeakMap(), _DiagramContextMenu_contextMenuContainer = new WeakMap();
 
+var _DiagramUserHighlight_canvas, _DiagramUserHighlight_focus, _DiagramUserHighlight_highlightSections;
 /**
  * Stores the functionality regarding the user highlight of a diagram canvas.
  * @public
@@ -7311,9 +7400,14 @@ class DiagramUserHighlight extends DiagramElementSet {
    */
   constructor(canvas, highlightSections = true) {
     super();
-    this.focus = undefined;
-    this.canvas = canvas;
-    this.highlightSections = highlightSections;
+    _DiagramUserHighlight_canvas.set(this, void 0);
+    _DiagramUserHighlight_focus.set(this, undefined);
+    /**
+     * Whether sections can be highlighted individually or the whole node must be highlighted when highlighting a section.
+     */
+    _DiagramUserHighlight_highlightSections.set(this, void 0);
+    __classPrivateFieldSet(this, _DiagramUserHighlight_canvas, canvas, "f");
+    __classPrivateFieldSet(this, _DiagramUserHighlight_highlightSections, highlightSections, "f");
   }
   /**
    * Gets the focus of the user highlight, which is the element where the current user highlight started regardless of which other elements were highlighted as a consequence.
@@ -7321,7 +7415,7 @@ class DiagramUserHighlight extends DiagramElementSet {
    * @returns A diagram element.
    */
   getFocus() {
-    return this.focus;
+    return __classPrivateFieldGet(this, _DiagramUserHighlight_focus, "f");
   }
   /**
    * Unhighlights all highlighted elements and highlights the given element as the main element of the user highlight.
@@ -7329,7 +7423,7 @@ class DiagramUserHighlight extends DiagramElementSet {
    */
   focusOn(element) {
     this.clear();
-    this.focus = element;
+    __classPrivateFieldSet(this, _DiagramUserHighlight_focus, element, "f");
     if ((element instanceof DiagramField || element instanceof DiagramDecorator) && element.rootElement) {
       this.focusOn(element.rootElement);
     } else {
@@ -7339,51 +7433,51 @@ class DiagramUserHighlight extends DiagramElementSet {
   add(element) {
     super.add(element);
     if (element instanceof DiagramNode) {
-      if (!this.highlightSections) {
+      if (!__classPrivateFieldGet(this, _DiagramUserHighlight_highlightSections, "f")) {
         for (const section of element.sections) {
           super.add(section);
           for (const port of section.ports) {
             super.add(port);
-            this.canvas.updatePortsInView(port.id);
+            __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updatePortsInView(port.id);
           }
           if (section.label) {
             super.add(section.label);
-            this.canvas.updateFieldsInView(section.label.id);
+            __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateFieldsInView(section.label.id);
           }
-          this.canvas.updateSectionsInView(section.id);
+          __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateSectionsInView(section.id);
         }
       }
       for (const port of element.ports) {
         super.add(port);
-        this.canvas.updatePortsInView(port.id);
+        __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updatePortsInView(port.id);
       }
       if (element.label) {
         super.add(element.label);
-        this.canvas.updateFieldsInView(element.label.id);
+        __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateFieldsInView(element.label.id);
       }
-      this.canvas.updateNodesInView(element.id);
+      __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateNodesInView(element.id);
     } else if (element instanceof DiagramSection) {
-      if (!this.highlightSections && element.node) {
+      if (!__classPrivateFieldGet(this, _DiagramUserHighlight_highlightSections, "f") && element.node) {
         this.add(element.node);
       } else {
         for (const port of element.ports) {
           super.add(port);
-          this.canvas.updatePortsInView(port.id);
+          __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updatePortsInView(port.id);
         }
         if (element.label) {
           super.add(element.label);
-          this.canvas.updateFieldsInView(element.label.id);
+          __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateFieldsInView(element.label.id);
         }
-        this.canvas.updateSectionsInView(element.id);
+        __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateSectionsInView(element.id);
       }
     } else if (element instanceof DiagramPort) {
       if (element.label) {
         super.add(element.label);
-        this.canvas.updateFieldsInView(element.label.id);
+        __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateFieldsInView(element.label.id);
       }
-      this.canvas.updatePortsInView(element.id);
+      __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updatePortsInView(element.id);
     } else if (element instanceof DiagramConnection) {
-      this.canvas.updateConnectionsInView(element.id);
+      __classPrivateFieldGet(this, _DiagramUserHighlight_canvas, "f").updateConnectionsInView(element.id);
     }
   }
   clear() {
@@ -7392,9 +7486,10 @@ class DiagramUserHighlight extends DiagramElementSet {
       this.remove(entity.id);
       entity.updateInView();
     }
-    this.focus = undefined;
+    __classPrivateFieldSet(this, _DiagramUserHighlight_focus, undefined, "f");
   }
 }
+_DiagramUserHighlight_canvas = new WeakMap(), _DiagramUserHighlight_focus = new WeakMap(), _DiagramUserHighlight_highlightSections = new WeakMap();
 
 const DAGA_FILE_VERSION = 1;
 
@@ -7606,6 +7701,7 @@ class DagaExporter {
   }
 }
 
+var _DiagramUserSelection_instances, _DiagramUserSelection_canvas, _DiagramUserSelection_diagramPropertiesText, _DiagramUserSelection_propertyEditorSelection, _DiagramUserSelection_propertyEditorValues, _DiagramUserSelection_makeUpdateValuesAction;
 /**
  * Text to display by default as the title of the property editor when editing the properties of a diagram's value set.
  * @private
@@ -7626,12 +7722,17 @@ class DiagramUserSelection extends DiagramElementSet {
    */
   constructor(canvas, diagramPropertiesText) {
     super();
-    this.canvas = canvas;
+    _DiagramUserSelection_instances.add(this);
+    _DiagramUserSelection_canvas.set(this, void 0);
+    _DiagramUserSelection_diagramPropertiesText.set(this, void 0);
+    _DiagramUserSelection_propertyEditorSelection.set(this, void 0);
+    _DiagramUserSelection_propertyEditorValues.set(this, void 0);
+    __classPrivateFieldSet(this, _DiagramUserSelection_canvas, canvas, "f");
     // TODO: would be a good idea to be able to configure how often this fires, or whether at all
-    this.canvas.propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
-      this.makeUpdateValuesAction();
+    __classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f").propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
+      __classPrivateFieldGet(this, _DiagramUserSelection_instances, "m", _DiagramUserSelection_makeUpdateValuesAction).call(this);
     });
-    this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
+    __classPrivateFieldSet(this, _DiagramUserSelection_diagramPropertiesText, diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT, "f");
   }
   add(element) {
     if (this.contains(element.id)) {
@@ -7640,9 +7741,9 @@ class DiagramUserSelection extends DiagramElementSet {
     }
     if (this.length === 0) {
       // if there is nothing else selected, open our selection in the property editor
-      if (this.propertyEditorSelection === undefined && (element instanceof DiagramNode || element instanceof DiagramConnection)) {
+      if (__classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f") === undefined && (element instanceof DiagramNode || element instanceof DiagramConnection)) {
         this.openInPropertyEditor(element);
-      } else if (this.propertyEditorSelection === undefined && element instanceof DiagramSection) {
+      } else if (__classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f") === undefined && element instanceof DiagramSection) {
         this.openInPropertyEditor(element.node);
       } else {
         this.openInPropertyEditor(undefined);
@@ -7664,7 +7765,7 @@ class DiagramUserSelection extends DiagramElementSet {
   remove(id) {
     const element = this.get(id);
     if (element) {
-      if (this.propertyEditorSelection === element) {
+      if (__classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f") === element) {
         this.openInPropertyEditor(undefined);
       }
       super.remove(id);
@@ -7735,9 +7836,9 @@ class DiagramUserSelection extends DiagramElementSet {
           fieldIdsToBeDeleted.push(userSelectionElement.id);
         }
       }
-      const removeAction = new RemoveAction(this.canvas, nodeIdsToBeDeleted, sectionIdsToBeDeleted, portIdsToBeDeleted, connectionIdsToBeDeleted, fieldIdsToBeDeleted);
+      const removeAction = new RemoveAction(__classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f"), nodeIdsToBeDeleted, sectionIdsToBeDeleted, portIdsToBeDeleted, connectionIdsToBeDeleted, fieldIdsToBeDeleted);
       removeAction.do();
-      this.canvas.actionStack.add(removeAction);
+      __classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f").actionStack.add(removeAction);
     }
   }
   /**
@@ -7780,8 +7881,8 @@ class DiagramUserSelection extends DiagramElementSet {
         if (userSelection.type !== 'daga-user-selection') {
           return;
         }
-        const action = new PasteAction(this.canvas, userSelection.nodes, userSelection.connections, coords);
-        this.canvas.actionStack.add(action);
+        const action = new PasteAction(__classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f"), userSelection.nodes, userSelection.connections, coords);
+        __classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f").actionStack.add(action);
         action.do();
       } catch (_a) {
         return;
@@ -7799,17 +7900,17 @@ class DiagramUserSelection extends DiagramElementSet {
   openInPropertyEditor(selection, makeUpdateValuesAction = true) {
     var _a;
     if (makeUpdateValuesAction) {
-      this.makeUpdateValuesAction();
+      __classPrivateFieldGet(this, _DiagramUserSelection_instances, "m", _DiagramUserSelection_makeUpdateValuesAction).call(this);
     }
-    const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === void 0 ? void 0 : _a.propertyEditor;
+    const propertyEditor = (_a = __classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f").parentComponent) === null || _a === void 0 ? void 0 : _a.propertyEditor;
     if (propertyEditor === undefined) {
       return;
     }
     const selectedValueSet = selection === null || selection === void 0 ? void 0 : selection.valueSet;
     if (selectedValueSet) {
-      this.propertyEditorSelection = selection;
+      __classPrivateFieldSet(this, _DiagramUserSelection_propertyEditorSelection, selection, "f");
       if (makeUpdateValuesAction) {
-        this.propertyEditorValues = clone(selectedValueSet.getValues());
+        __classPrivateFieldSet(this, _DiagramUserSelection_propertyEditorValues, clone(selectedValueSet.getValues()), "f");
       }
       if (propertyEditor) {
         if (selection instanceof DiagramNode || selection instanceof DiagramConnection) {
@@ -7826,42 +7927,43 @@ class DiagramUserSelection extends DiagramElementSet {
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
         } else {
-          propertyEditor.title = this.diagramPropertiesText;
+          propertyEditor.title = __classPrivateFieldGet(this, _DiagramUserSelection_diagramPropertiesText, "f");
           // force the update of the valueSet
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
         }
       }
     } else {
-      this.propertyEditorSelection = undefined;
-      this.propertyEditorValues = undefined;
+      __classPrivateFieldSet(this, _DiagramUserSelection_propertyEditorSelection, undefined, "f");
+      __classPrivateFieldSet(this, _DiagramUserSelection_propertyEditorValues, undefined, "f");
       if (propertyEditor) {
         propertyEditor.title = '';
         propertyEditor.valueSet = undefined;
       }
     }
   }
-  makeUpdateValuesAction() {
-    var _a, _b, _c;
-    if (this.propertyEditorSelection === undefined || this.propertyEditorValues === undefined) {
-      return;
-    }
-    const previousSelectionId = this.propertyEditorSelection instanceof DiagramModel ? undefined : this.propertyEditorSelection.id;
-    // check if there have been changes in the previously selected ValueSet,
-    // and create an UpdateValuesAction if there have
-    if (equals(this.propertyEditorValues, (_a = this.propertyEditorSelection) === null || _a === void 0 ? void 0 : _a.valueSet.getValues())) {
-      return;
-    }
-    const from = this.propertyEditorValues;
-    const to = clone((_b = this.propertyEditorSelection) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
-    const [fromDiff, toDiff] = diffProperties(from, to, (_c = this.propertyEditorSelection) === null || _c === void 0 ? void 0 : _c.valueSet);
-    const currentAction = new UpdateValuesAction(this.canvas, previousSelectionId, fromDiff, toDiff);
-    currentAction.do();
-    this.canvas.actionStack.add(currentAction);
-    this.propertyEditorValues = to;
-  }
 }
+_DiagramUserSelection_canvas = new WeakMap(), _DiagramUserSelection_diagramPropertiesText = new WeakMap(), _DiagramUserSelection_propertyEditorSelection = new WeakMap(), _DiagramUserSelection_propertyEditorValues = new WeakMap(), _DiagramUserSelection_instances = new WeakSet(), _DiagramUserSelection_makeUpdateValuesAction = function _DiagramUserSelection_makeUpdateValuesAction() {
+  var _a, _b, _c;
+  if (__classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f") === undefined || __classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorValues, "f") === undefined) {
+    return;
+  }
+  const previousSelectionId = __classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f") instanceof DiagramModel ? undefined : __classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f").id;
+  // check if there have been changes in the previously selected ValueSet,
+  // and create an UpdateValuesAction if there have
+  if (equals(__classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorValues, "f"), (_a = __classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f")) === null || _a === void 0 ? void 0 : _a.valueSet.getValues())) {
+    return;
+  }
+  const from = __classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorValues, "f");
+  const to = clone((_b = __classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f")) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
+  const [fromDiff, toDiff] = diffProperties(from, to, (_c = __classPrivateFieldGet(this, _DiagramUserSelection_propertyEditorSelection, "f")) === null || _c === void 0 ? void 0 : _c.valueSet);
+  const currentAction = new UpdateValuesAction(__classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f"), previousSelectionId, fromDiff, toDiff);
+  currentAction.do();
+  __classPrivateFieldGet(this, _DiagramUserSelection_canvas, "f").actionStack.add(currentAction);
+  __classPrivateFieldSet(this, _DiagramUserSelection_propertyEditorValues, to, "f");
+};
 
+var _DiagramCanvas_instances, _a, _DiagramCanvas_canvasCount, _DiagramCanvas_diagramRoot, _DiagramCanvas_connectionType, _DiagramCanvas_gridPatternId, _DiagramCanvas_ancillaryGridPatternIds, _DiagramCanvas_zoomBehavior, _DiagramCanvas_zoomTransform, _DiagramCanvas_priorityThreshold, _DiagramCanvas_priorityThresholds, _DiagramCanvas_unfinishedConnection, _DiagramCanvas_unfinishedConnectionTracer, _DiagramCanvas_unfinishedConnectionPort, _DiagramCanvas_inputFieldContainer, _DiagramCanvas_multipleSelectionContainer, _DiagramCanvas_draggingFrom, _DiagramCanvas_dragging, _DiagramCanvas_secondaryButton, _DiagramCanvas_currentAction, _DiagramCanvas_updateConnectionLabelsInView, _DiagramCanvas_updateConnectionMarkersInView, _DiagramCanvas_startConnection, _DiagramCanvas_finishConnection, _DiagramCanvas_dropConnection, _DiagramCanvas_createInputField, _DiagramCanvas_removeInputField, _DiagramCanvas_minimumSizeOfField, _DiagramCanvas_setFieldTextAndWrap, _DiagramCanvas_setFieldText, _DiagramCanvas_startMovingNode, _DiagramCanvas_continueMovingNode, _DiagramCanvas_finishMovingNode, _DiagramCanvas_startMultipleSelection, _DiagramCanvas_continueMultipleSelection, _DiagramCanvas_finishMultipleSelection;
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -7876,13 +7978,13 @@ const ACTION_STACK_SIZE = 25;
 const UNFINISHED_CONNECTION_ID = 'diagram-connection-unfinished';
 class DiagramCanvas {
   get connectionType() {
-    return this._connectionType;
+    return __classPrivateFieldGet(this, _DiagramCanvas_connectionType, "f");
   }
   set connectionType(value) {
-    var _a, _b;
-    this._connectionType = value;
+    var _b, _c;
+    __classPrivateFieldSet(this, _DiagramCanvas_connectionType, value, "f");
     // refresh the palette every time connectionType is set so that the palette keeps track of updates to the connectionType
-    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
+    (_c = (_b = this.parentComponent) === null || _b === void 0 ? void 0 : _b.palette) === null || _c === void 0 ? void 0 : _c.refreshPalette();
   }
   /**
    * Constructs a canvas object.
@@ -7891,45 +7993,62 @@ class DiagramCanvas {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(parentComponent, config) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-    this.gridPatternId = `daga-grid-pattern-id-${++DiagramCanvas.canvasCount}`;
-    this.ancillaryGridPatternIds = [];
-    this.zoomTransform = d3.zoomIdentity;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var _z, _0;
+    _DiagramCanvas_instances.add(this);
+    _DiagramCanvas_diagramRoot.set(this, void 0);
+    _DiagramCanvas_connectionType.set(this, void 0);
+    _DiagramCanvas_gridPatternId.set(this, `daga-grid-pattern-id-${__classPrivateFieldSet(_z = _a, _a, (_0 = __classPrivateFieldGet(_z, _a, "f", _DiagramCanvas_canvasCount), ++_0), "f", _DiagramCanvas_canvasCount)}`);
+    _DiagramCanvas_ancillaryGridPatternIds.set(this, []);
+    _DiagramCanvas_zoomBehavior.set(this, void 0);
+    _DiagramCanvas_zoomTransform.set(this, d3.zoomIdentity);
+    _DiagramCanvas_priorityThreshold.set(this, void 0);
+    _DiagramCanvas_priorityThresholds.set(this, void 0);
+    _DiagramCanvas_unfinishedConnection.set(this, void 0);
+    /**
+     * Invisible path followed by an unfinished connection. Used for making unfinished connections stop before the cursor rather than stopping right at the cursor.
+     */
+    _DiagramCanvas_unfinishedConnectionTracer.set(this, void 0);
+    _DiagramCanvas_unfinishedConnectionPort.set(this, void 0);
+    _DiagramCanvas_inputFieldContainer.set(this, void 0);
+    _DiagramCanvas_multipleSelectionContainer.set(this, void 0);
     // used to distinguish drags from clicks when dragging elements and during multiple selection
-    this.draggingFrom = [0, 0];
+    _DiagramCanvas_draggingFrom.set(this, [0, 0]);
     // used to distinguish drags from clicks during multiple selection
-    this.dragging = false;
+    _DiagramCanvas_dragging.set(this, false);
     // used to track whether a click is secondary or primary
-    this.secondaryButton = false;
+    _DiagramCanvas_secondaryButton.set(this, false);
+    // current action that started but hasn't finished yet
+    _DiagramCanvas_currentAction.set(this, void 0);
     this.validatorChange$ = new Subject();
     this.diagramChange$ = new Subject();
     this.diagramEvent$ = new Subject();
     this.propertyEditorChanges$ = new Subject();
     this.parentComponent = parentComponent;
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
-    this.userSelection = new DiagramUserSelection(this, (_b = (_a = config.components) === null || _a === void 0 ? void 0 : _a.propertyEditor) === null || _b === void 0 ? void 0 : _b.title);
-    this.userHighlight = new DiagramUserHighlight(this, ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.highlightSections) !== false);
-    this.contextMenu = new DiagramContextMenu(this, (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.contextMenu);
+    this.userSelection = new DiagramUserSelection(this, (_c = (_b = config.components) === null || _b === void 0 ? void 0 : _b.propertyEditor) === null || _c === void 0 ? void 0 : _c.title);
+    this.userHighlight = new DiagramUserHighlight(this, ((_d = config.canvas) === null || _d === void 0 ? void 0 : _d.highlightSections) !== false);
+    this.contextMenu = new DiagramContextMenu(this, (_e = config.canvas) === null || _e === void 0 ? void 0 : _e.contextMenu);
     // TODO
-    this.backgroundConfig = (_f = (_e = config.canvas) === null || _e === void 0 ? void 0 : _e.background) !== null && _f !== void 0 ? _f : BACKGROUND_DEFAULTS;
-    this.gridConfig = applyGridDefaults((_g = config.canvas) === null || _g === void 0 ? void 0 : _g.grid);
+    this.backgroundConfig = (_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.background) !== null && _g !== void 0 ? _g : BACKGROUND_DEFAULTS;
+    this.gridConfig = applyGridDefaults((_h = config.canvas) === null || _h === void 0 ? void 0 : _h.grid);
     this.ancillaryGridsConfig = [];
-    for (let i = 0; i < (((_j = (_h = config.canvas) === null || _h === void 0 ? void 0 : _h.ancillaryGrids) === null || _j === void 0 ? void 0 : _j.length) || 0); ++i) {
-      this.ancillaryGridsConfig.push(applyGridDefaults((_l = (_k = config.canvas) === null || _k === void 0 ? void 0 : _k.ancillaryGrids) === null || _l === void 0 ? void 0 : _l[i]));
-      this.ancillaryGridPatternIds.push(`${this.gridPatternId}-ancillary-${i}`);
-    }
-    this.zoomFactor = ((_m = config.canvas) === null || _m === void 0 ? void 0 : _m.zoomFactor) || 2;
-    this.panRate = ((_o = config.canvas) === null || _o === void 0 ? void 0 : _o.panRate) || 100;
-    this.inferConnectionType = ((_p = config.connectionSettings) === null || _p === void 0 ? void 0 : _p.inferConnectionType) || false;
-    this.autoTightenConnections = ((_q = config.connectionSettings) === null || _q === void 0 ? void 0 : _q.autoTighten) !== false;
-    this.tightenConnectionsAcrossPortTypes = ((_r = config.connectionSettings) === null || _r === void 0 ? void 0 : _r.tightenAcrossPortTypes) || false;
-    this.allowConnectionLoops = ((_s = config.connectionSettings) === null || _s === void 0 ? void 0 : _s.allowLoops) || false;
-    this.allowSharingPorts = ((_t = config.connectionSettings) === null || _t === void 0 ? void 0 : _t.sharePorts) !== false;
-    this.allowSharingBothPorts = ((_u = config.connectionSettings) === null || _u === void 0 ? void 0 : _u.shareBothPorts) || false;
-    this.portHighlightRadius = ((_v = config.connectionSettings) === null || _v === void 0 ? void 0 : _v.portHighlightRadius) || 100;
+    for (let i = 0; i < (((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.ancillaryGrids) === null || _k === void 0 ? void 0 : _k.length) || 0); ++i) {
+      this.ancillaryGridsConfig.push(applyGridDefaults((_m = (_l = config.canvas) === null || _l === void 0 ? void 0 : _l.ancillaryGrids) === null || _m === void 0 ? void 0 : _m[i]));
+      __classPrivateFieldGet(this, _DiagramCanvas_ancillaryGridPatternIds, "f").push(`${__classPrivateFieldGet(this, _DiagramCanvas_gridPatternId, "f")}-ancillary-${i}`);
+    }
+    this.zoomFactor = ((_o = config.canvas) === null || _o === void 0 ? void 0 : _o.zoomFactor) || 2;
+    this.panRate = ((_p = config.canvas) === null || _p === void 0 ? void 0 : _p.panRate) || 100;
+    this.inferConnectionType = ((_q = config.connectionSettings) === null || _q === void 0 ? void 0 : _q.inferConnectionType) || false;
+    this.autoTightenConnections = ((_r = config.connectionSettings) === null || _r === void 0 ? void 0 : _r.autoTighten) !== false;
+    this.tightenConnectionsAcrossPortTypes = ((_s = config.connectionSettings) === null || _s === void 0 ? void 0 : _s.tightenAcrossPortTypes) || false;
+    this.allowConnectionLoops = ((_t = config.connectionSettings) === null || _t === void 0 ? void 0 : _t.allowLoops) || false;
+    this.allowSharingPorts = ((_u = config.connectionSettings) === null || _u === void 0 ? void 0 : _u.sharePorts) !== false;
+    this.allowSharingBothPorts = ((_v = config.connectionSettings) === null || _v === void 0 ? void 0 : _v.shareBothPorts) || false;
+    this.portHighlightRadius = ((_w = config.connectionSettings) === null || _w === void 0 ? void 0 : _w.portHighlightRadius) || 100;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.priorityThresholds) || [];
-    this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
+    __classPrivateFieldSet(this, _DiagramCanvas_priorityThresholds, ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.priorityThresholds) || [], "f");
+    __classPrivateFieldSet(this, _DiagramCanvas_priorityThreshold, __classPrivateFieldGet(this, _DiagramCanvas_priorityThresholds, "f") ? __classPrivateFieldGet(this, _DiagramCanvas_priorityThresholds, "f")[0] : undefined, "f");
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
     this.validators = [];
@@ -7955,7 +8074,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = ((_x = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _x === void 0 ? void 0 : _x.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
+      __classPrivateFieldSet(this, _DiagramCanvas_connectionType, ((_y = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _y === void 0 ? void 0 : _y.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined, "f");
     }
   }
   addValidator(validator) {
@@ -7967,38 +8086,38 @@ class DiagramCanvas {
     this.validatorChange$.next();
   }
   getPriorityThresholdOptions() {
-    return this.priorityThresholds;
+    return __classPrivateFieldGet(this, _DiagramCanvas_priorityThresholds, "f");
   }
   getPriorityThreshold() {
-    return this.priorityThreshold;
+    return __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f");
   }
   setPriorityThreshold(priority) {
-    var _a, _b;
-    this.priorityThreshold = priority;
+    var _b, _c;
+    __classPrivateFieldSet(this, _DiagramCanvas_priorityThreshold, priority, "f");
     this.updateModelInView();
     for (const node of this.model.nodes) {
       this.fitNodeInView(node.id);
     }
-    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
+    (_c = (_b = this.parentComponent) === null || _b === void 0 ? void 0 : _b.palette) === null || _c === void 0 ? void 0 : _c.refreshPalette();
   }
   // View methods
   initView(appendTo) {
     const appendToSelection = d3.select(appendTo);
     // remove all children
     appendToSelection.html('');
-    this.diagramRoot = appendToSelection.append('div').node();
+    __classPrivateFieldSet(this, _DiagramCanvas_diagramRoot, appendToSelection.append('div').node(), "f");
     this.selectRoot().attr('tabindex', 0) // make element focusable
     .style('width', '100%').style('height', '100%').append('svg').style('width', '100%').style('height', '100%');
     this.selectRoot().on(Events.Click, () => {
-      var _a;
+      var _b;
       // focus on the diagram when clicking so that we can focus on the diagram
       // keyboard events only work if we're focusing on the diagram
-      (_a = this.selectRoot().node()) === null || _a === void 0 ? void 0 : _a.focus();
+      (_b = this.selectRoot().node()) === null || _b === void 0 ? void 0 : _b.focus();
     }).on(Events.ContextMenu, event => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, null);
@@ -8107,33 +8226,33 @@ class DiagramCanvas {
         if (this.canUserPerformAction(DiagramActions.Zoom)) {
           event.preventDefault();
           // move left, faster if we're zoomed out and slower if we're zoomed in
-          this.translateBy(this.panRate / this.zoomTransform.k, 0);
+          this.translateBy(this.panRate / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k, 0);
         }
       }
       if (event.key === Keys.ArrowRight) {
         if (this.canUserPerformAction(DiagramActions.Zoom)) {
           event.preventDefault();
           // move right, faster if we're zoomed out and slower if we're zoomed in
-          this.translateBy(-this.panRate / this.zoomTransform.k, 0);
+          this.translateBy(-this.panRate / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k, 0);
         }
       }
       if (event.key === Keys.ArrowDown) {
         if (this.canUserPerformAction(DiagramActions.Zoom)) {
           event.preventDefault();
           // move down, faster if we're zoomed out and slower if we're zoomed in
-          this.translateBy(0, -this.panRate / this.zoomTransform.k);
+          this.translateBy(0, -this.panRate / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k);
         }
       }
       if (event.key === Keys.ArrowUp) {
         if (this.canUserPerformAction(DiagramActions.Zoom)) {
           event.preventDefault();
           // move up, faster if we're zoomed out and slower if we're zoomed in
-          this.translateBy(0, this.panRate / this.zoomTransform.k);
+          this.translateBy(0, this.panRate / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k);
         }
       }
     });
     const canvasView = this.selectSVGElement().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
-    canvasView.call(this.zoomBehavior = d3.zoom().filter(event => {
+    canvasView.call(__classPrivateFieldSet(this, _DiagramCanvas_zoomBehavior, d3.zoom().filter(event => {
       // Disable double-click zoom by filtering out dblclick events
       return event.type !== Events.DoubleClick;
     }).on(ZoomEvents.Zoom, event => {
@@ -8154,29 +8273,29 @@ class DiagramCanvas {
           setCursorStyle(CursorStyle.AllScroll);
         }
       }
-      this.zoomTransform = event.transform;
+      __classPrivateFieldSet(this, _DiagramCanvas_zoomTransform, event.transform, "f");
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
-      for (const gridPatternId of [this.gridPatternId, ...this.ancillaryGridPatternIds]) {
+      for (const gridPatternId of [__classPrivateFieldGet(this, _DiagramCanvas_gridPatternId, "f"), ...__classPrivateFieldGet(this, _DiagramCanvas_ancillaryGridPatternIds, "f")]) {
         this.selectCanvasView().select(`#${gridPatternId}`).attr('patternTransform', transformAttribute);
       }
       this.contextMenu.close();
-      this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
+      this.diagramEvent$.next(new DiagramZoomEvent([__classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").x, __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").y], __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k));
     }).on(ZoomEvents.End, () => {
       setCursorStyle();
-    }));
+    }), "f"));
     const canvasDefs = canvasView.append('defs');
     const canvasBackground = [];
     canvasBackground.push(initializeBackground(canvasView, this.backgroundConfig).attr('class', 'daga-background'));
     for (let i = 0; i < this.ancillaryGridsConfig.length; ++i) {
-      canvasBackground.push(initializeGrid(this, canvasView, canvasDefs, this.ancillaryGridPatternIds[i], this.ancillaryGridsConfig[i]));
+      canvasBackground.push(initializeGrid(this, canvasView, canvasDefs, __classPrivateFieldGet(this, _DiagramCanvas_ancillaryGridPatternIds, "f")[i], this.ancillaryGridsConfig[i]));
     }
-    canvasBackground.push(initializeGrid(this, canvasView, canvasDefs, this.gridPatternId, this.gridConfig));
+    canvasBackground.push(initializeGrid(this, canvasView, canvasDefs, __classPrivateFieldGet(this, _DiagramCanvas_gridPatternId, "f"), this.gridConfig));
     for (const canvasBackgroundElement of canvasBackground) {
       canvasBackgroundElement.on(Events.MouseMove, event => {
-        if (this.unfinishedConnection !== undefined) {
+        if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f") !== undefined) {
           const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-          this.unfinishedConnection.endCoords = pointerCoords;
+          __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").endCoords = pointerCoords;
         }
       });
       canvasBackgroundElement.on(Events.MouseOver, () => {
@@ -8201,55 +8320,55 @@ class DiagramCanvas {
       canvasBackgroundElement.call(d3.drag().filter(event => {
         return this.multipleSelectionOn || isSecondaryButton(event);
       }).on(DragEvents.Start, event => {
-        this.startMultipleSelection(event);
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
       }).on(DragEvents.Drag, event => {
-        this.continueMultipleSelection(event);
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
       }).on(DragEvents.End, event => {
-        this.finishMultipleSelection(event);
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
       }));
     }
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
   getZoomLevel() {
-    return this.zoomTransform.k;
+    return __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k;
   }
   zoomBy(factor) {
     if (!isNaN(factor)) {
-      this.zoomBehavior.scaleBy(this.selectCanvasView(), factor);
+      __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").scaleBy(this.selectCanvasView(), factor);
     }
   }
   zoomTo(level) {
     if (!isNaN(level)) {
-      this.zoomBehavior.scaleTo(this.selectCanvasView(), level);
+      __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").scaleTo(this.selectCanvasView(), level);
     }
   }
   getViewCoordinates() {
-    var _a, _b, _c;
-    const canvasViewBoundingBox = (_c = (_b = (_a = this.selectCanvasView()) === null || _a === void 0 ? void 0 : _a.select('.daga-background')) === null || _b === void 0 ? void 0 : _b.node()) === null || _c === void 0 ? void 0 : _c.getBBox();
+    var _b, _c, _d;
+    const canvasViewBoundingBox = (_d = (_c = (_b = this.selectCanvasView()) === null || _b === void 0 ? void 0 : _b.select('.daga-background')) === null || _c === void 0 ? void 0 : _c.node()) === null || _d === void 0 ? void 0 : _d.getBBox();
     /*
     transform the coordinates of the zoomTransform to the coordinates
     needed to point the zoomTransfrom to the center of the screen to
     ensure that canvas.translateTo(getViewCoordinates()) has no effect
     */
-    return [((canvasViewBoundingBox.width + canvasViewBoundingBox.x) / 2 - this.zoomTransform.x) / this.zoomTransform.k, ((canvasViewBoundingBox.height + canvasViewBoundingBox.y) / 2 - this.zoomTransform.y) / this.zoomTransform.k];
+    return [((canvasViewBoundingBox.width + canvasViewBoundingBox.x) / 2 - __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").x) / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k, ((canvasViewBoundingBox.height + canvasViewBoundingBox.y) / 2 - __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").y) / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k];
   }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
-      this.zoomBehavior.translateBy(this.selectCanvasView(), x, y);
+      __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").translateBy(this.selectCanvasView(), x, y);
     }
   }
   translateTo(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
-      this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
+      __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").translateTo(this.selectCanvasView(), x, y);
     }
   }
   zoomAndPanTo(x, y, z, duration) {
     if (!duration || duration <= 0) {
-      this.zoomBehavior.scaleTo(this.selectCanvasView(), z);
-      this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
+      __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").scaleTo(this.selectCanvasView(), z);
+      __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").translateTo(this.selectCanvasView(), x, y);
       return;
     }
-    this.zoomBehavior.interpolate(d3.interpolate);
+    __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").interpolate(d3.interpolate);
     const [startingX, startingY] = this.getViewCoordinates();
     const startingZoom = this.getZoomLevel();
     const targetX = x,
@@ -8263,8 +8382,8 @@ class DiagramCanvas {
             const currentX = value * (targetX - startingX) + startingX;
             const currentY = value * (targetY - startingY) + startingY;
             const currentZoom = value * (targetZoom - startingZoom) + startingZoom;
-            this.zoomBehavior.scaleTo(this.selectCanvasView(), currentZoom);
-            this.zoomBehavior.translateTo(this.selectCanvasView(), currentX, currentY);
+            __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").scaleTo(this.selectCanvasView(), currentZoom);
+            __classPrivateFieldGet(this, _DiagramCanvas_zoomBehavior, "f").translateTo(this.selectCanvasView(), currentX, currentY);
           }
         } catch (e) {
           console.warn('Animation has been interrupted.', e);
@@ -8274,10 +8393,10 @@ class DiagramCanvas {
     });
   }
   center(nodeIds, maxZoomLevel, duration) {
-    var _a;
+    var _b;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
-      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('.daga-background').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
+      const canvasViewBoundingBox = (_b = this.selectCanvasView().select('.daga-background').node()) === null || _b === void 0 ? void 0 : _b.getBBox();
       if (!canvasViewBoundingBox.width || !canvasViewBoundingBox.height) {
         // prevent errors if the width or height is invalid
         return;
@@ -8319,35 +8438,19 @@ class DiagramCanvas {
     return [pointX, pointY];
   }
   getCoordinatesOnScreen() {
-    var _a;
-    const rootBoundingClientRect = (_a = this.selectSVGElement().node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var _b;
+    const rootBoundingClientRect = (_b = this.selectSVGElement().node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
     const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.height) || 0];
-    return [[-this.zoomTransform.x / this.zoomTransform.k, -this.zoomTransform.y / this.zoomTransform.k], [(rootDimensions[0] - this.zoomTransform.x) / this.zoomTransform.k, (rootDimensions[1] - this.zoomTransform.y) / this.zoomTransform.k]];
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getEventHoldingCoordinates(event) {
-    if (event.type === 'drag' || event.type === 'start' || event.type === 'end') {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const sourceEvent = event.sourceEvent;
-      if (sourceEvent && (sourceEvent.type === 'touchmove' || sourceEvent.type === 'touchstart' || sourceEvent.type === 'touchend')) {
-        return (
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          event.sourceEvent.touches[0] ||
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          event.sourceEvent.changedTouches[0]
-        );
-      }
-    }
-    return event;
+    return [[-__classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").x / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k, -__classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").y / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k], [(rootDimensions[0] - __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").x) / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k, (rootDimensions[1] - __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").y) / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k]];
   }
   getPointerLocationRelativeToCanvas(event) {
-    return d3.pointer(this.getEventHoldingCoordinates(event), this.selectCanvasElements().node());
+    return d3.pointer(getEventHoldingCoordinates(event), this.selectCanvasElements().node());
   }
   getPointerLocationRelativeToRoot(event) {
-    return d3.pointer(this.getEventHoldingCoordinates(event), this.selectSVGElement().node());
+    return d3.pointer(getEventHoldingCoordinates(event), this.selectSVGElement().node());
   }
   getPointerLocationRelativeToBody(event) {
-    return d3.pointer(this.getEventHoldingCoordinates(event), d3.select('body').node());
+    return d3.pointer(getEventHoldingCoordinates(event), d3.select('body').node());
   }
   getPointerLocationRelativeToScreen(event) {
     const pointerLocationRelativeToBody = this.getPointerLocationRelativeToBody(event);
@@ -8363,7 +8466,7 @@ class DiagramCanvas {
     this.updateDecoratorsInView();
   }
   updateNodesInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") !== undefined ? e.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''}${needsResizerXY(d) ? ' resizable-xy' : ''} ${d.type.defaultLook.lookType}`);
     if (ids && ids.length > 0) {
@@ -8372,7 +8475,7 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
-      if (!this.dragging) {
+      if (!__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
@@ -8385,10 +8488,10 @@ class DiagramCanvas {
       this.userSelection.toggle(d);
       this.diagramEvent$.next(new DiagramSelectionEvent([d], d.selected));
     }).on(Events.ContextMenu, (event, d) => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
@@ -8405,27 +8508,27 @@ class DiagramCanvas {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, isSecondaryButton(event), "f");
       return true;
     }).on(DragEvents.Start, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
       } else {
-        this.startMovingNode(event, d);
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMovingNode).call(this, event, d);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.continueMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
       } else {
-        this.continueMovingNode(event, d);
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMovingNode).call(this, event, d);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.finishMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
       } else {
-        this.finishMovingNode(event, d);
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMovingNode).call(this, event, d);
       }
-      this.secondaryButton = false;
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, false, "f");
     }));
     initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('rect').attr('class', 'left-resizer').on(Events.MouseOver, (_event, d) => {
@@ -8439,7 +8542,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8449,7 +8552,7 @@ class DiagramCanvas {
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8457,10 +8560,10 @@ class DiagramCanvas {
           pointerCoords[1] += d.type.snapToGridOffset[1];
         }
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8475,7 +8578,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8485,7 +8588,7 @@ class DiagramCanvas {
         d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
@@ -8493,10 +8596,10 @@ class DiagramCanvas {
           pointerCoords[1] += d.type.snapToGridOffset[3];
         }
         d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8511,7 +8614,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8521,7 +8624,7 @@ class DiagramCanvas {
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8529,10 +8632,10 @@ class DiagramCanvas {
           pointerCoords[1] += d.type.snapToGridOffset[1];
         }
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8547,7 +8650,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8557,7 +8660,7 @@ class DiagramCanvas {
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
@@ -8565,10 +8668,10 @@ class DiagramCanvas {
           pointerCoords[1] += d.type.snapToGridOffset[3];
         }
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8583,7 +8686,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle(CursorStyle.NWSEResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8594,7 +8697,7 @@ class DiagramCanvas {
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8603,10 +8706,10 @@ class DiagramCanvas {
         }
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8621,7 +8724,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle(CursorStyle.NESWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8632,7 +8735,7 @@ class DiagramCanvas {
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8641,10 +8744,10 @@ class DiagramCanvas {
         }
         d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8659,7 +8762,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle(CursorStyle.NESWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8670,7 +8773,7 @@ class DiagramCanvas {
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8679,10 +8782,10 @@ class DiagramCanvas {
         }
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8697,7 +8800,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle(CursorStyle.NWSEResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8708,7 +8811,7 @@ class DiagramCanvas {
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8717,10 +8820,10 @@ class DiagramCanvas {
         }
         d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
-        this.currentAction.to = d.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8736,11 +8839,11 @@ class DiagramCanvas {
     mergeSelection.filter('.resizable-xy').select('rect.bottom-right-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
   }
   updateSectionsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") !== undefined ? e.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
-      var _a;
-      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''}${needsResizerXY(d) ? ' resizable-xy' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
+      var _b;
+      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''}${needsResizerXY(d) ? ' resizable-xy' : ''} ${(_b = d.look) === null || _b === void 0 ? void 0 : _b.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -8748,7 +8851,7 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
-      if (!this.dragging) {
+      if (!__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
@@ -8762,10 +8865,10 @@ class DiagramCanvas {
       this.userSelection.toggle(elementToBeToggled);
       this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
     }).on(Events.ContextMenu, (event, d) => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
@@ -8783,42 +8886,42 @@ class DiagramCanvas {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, isSecondaryButton(event), "f");
       return true;
     }).on(DragEvents.Start, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
       } else {
         const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
-          this.startMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMovingNode).call(this, event, node);
         } else {
           setCursorStyle(CursorStyle.NotAllowed);
         }
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.continueMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
       } else {
         const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
-          this.continueMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMovingNode).call(this, event, node);
         } else {
           setCursorStyle(CursorStyle.NotAllowed);
         }
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.finishMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
       } else {
         const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
-          this.finishMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMovingNode).call(this, event, node);
         } else {
           setCursorStyle();
         }
       }
-      this.secondaryButton = false;
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, false, "f");
     }));
     initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('rect').attr('class', 'left-resizer').on(Events.MouseOver, (_event, d) => {
@@ -8832,7 +8935,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.EWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8842,16 +8945,16 @@ class DiagramCanvas {
         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.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8866,7 +8969,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.EWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8876,16 +8979,16 @@ class DiagramCanvas {
         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.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8900,7 +9003,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.NSResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8910,16 +9013,16 @@ class DiagramCanvas {
         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.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8934,7 +9037,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.NSResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8944,16 +9047,16 @@ class DiagramCanvas {
         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.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -8968,7 +9071,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.NWSEResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -8979,17 +9082,17 @@ class DiagramCanvas {
         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.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
         d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -9004,7 +9107,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.NESWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -9015,17 +9118,17 @@ class DiagramCanvas {
         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.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
         d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -9040,7 +9143,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.NESWResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -9051,17 +9154,17 @@ class DiagramCanvas {
         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.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
         d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -9076,7 +9179,7 @@ class DiagramCanvas {
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
         setCursorStyle(CursorStyle.NWSEResize);
-        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry()), "f");
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
@@ -9087,17 +9190,17 @@ class DiagramCanvas {
         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.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction && __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
         d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
-        this.currentAction.to = d.node.getGeometry();
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.node.getGeometry();
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
       }
       setCursorStyle();
     }));
@@ -9113,7 +9216,7 @@ class DiagramCanvas {
     mergeSelection.filter('.resizable-xy').select('rect.bottom-right-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
   }
   updatePortsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") !== undefined ? e.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-port ${d.look.lookType}`);
     if (ids && ids.length > 0) {
@@ -9122,28 +9225,28 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-      if (!this.unfinishedConnection && !this.dragging) {
+      var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+      if (!__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f") && !__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         // if there is an unfinished connection, the port will be highlighted automatically if the pointer is close
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
-      if (this.unfinishedConnection) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) {
         const canConnectionFinishAtThisPort =
         // can start at the starting port
-        this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === void 0 ? void 0 : _a.getNode()) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.id) || '') && ((_d = this.unfinishedConnection.start) === null || _d === void 0 ? void 0 : _d.allowsOutgoing) &&
+        __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canStartFromType(((_d = (_c = (_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_e = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _e === void 0 ? void 0 : _e.allowsOutgoing) &&
         // can end at the ending port
-        this.unfinishedConnection.type.canFinishOnType(((_f = (_e = d.getNode()) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.id) || '') && d.allowsIncoming ||
+        __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canFinishOnType(((_g = (_f = d.getNode()) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.id) || '') && d.allowsIncoming ||
         // can start at the ending port
-        this.unfinishedConnection.type.canStartFromType(((_h = (_g = d.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && d.allowsOutgoing &&
+        __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canStartFromType(((_j = (_h = d.getNode()) === null || _h === void 0 ? void 0 : _h.type) === null || _j === void 0 ? void 0 : _j.id) || '') && d.allowsOutgoing &&
         // can end at the starting port
-        this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.getNode()) === null || _k === void 0 ? void 0 : _k.type) === null || _l === void 0 ? void 0 : _l.id) || '') && ((_m = this.unfinishedConnection.start) === null || _m === void 0 ? void 0 : _m.allowsIncoming);
+        __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canFinishOnType(((_m = (_l = (_k = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _k === void 0 ? void 0 : _k.getNode()) === null || _l === void 0 ? void 0 : _l.type) === null || _m === void 0 ? void 0 : _m.id) || '') && ((_o = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _o === void 0 ? void 0 : _o.allowsIncoming);
         if (!canConnectionFinishAtThisPort) {
           setCursorStyle(CursorStyle.NoDrop);
         }
       }
     }).on(Events.MouseOut, () => {
-      if (this.unfinishedConnection) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) {
         setCursorStyle(CursorStyle.Grabbing);
       }
     }).on(Events.Click, (event, d) => {
@@ -9156,10 +9259,10 @@ class DiagramCanvas {
       this.userSelection.toggle(elementToBeToggled);
       this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
     }).on(Events.ContextMenu, (event, d) => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
@@ -9177,33 +9280,33 @@ class DiagramCanvas {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, isSecondaryButton(event), "f");
       return true;
     }).on(DragEvents.Start, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
       } else {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && (this.allowSharingPorts || d.incomingConnections.filter(c => !c.removed).length === 0 && d.outgoingConnections.filter(c => !c.removed).length === 0) && !d.removed) {
           setCursorStyle(CursorStyle.Grabbing);
-          this.startConnection(d);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startConnection).call(this, d);
           // should be true after having called this.startConnection()
-          if (this.unfinishedConnection) {
-            this.unfinishedConnectionTracer = this.selectCanvasElements().append('path').attr('stroke', 'none').attr('fill', 'none');
+          if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) {
+            __classPrivateFieldSet(this, _DiagramCanvas_unfinishedConnectionTracer, this.selectCanvasElements().append('path').attr('stroke', 'none').attr('fill', 'none'), "f");
           }
         } else {
           setCursorStyle(CursorStyle.NotAllowed);
         }
       }
     }).on(DragEvents.Drag, (event, d) => {
-      var _a, _b, _c, _d, _e;
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.continueMultipleSelection(event);
+      var _b, _c, _d, _e, _f;
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
       } else {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
-          if (this.unfinishedConnection !== undefined) {
+          if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f") !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.points, this.unfinishedConnection.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.type.defaultStartMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.type.defaultEndMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
-            const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
+            (_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnectionTracer, "f")) === null || _b === void 0 ? void 0 : _b.attr('d', getConnectionPath(__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").startCoords, endCoords, __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").startDirection, __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").endDirection, __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").points, __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_c = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.defaultStartMarkerLook) === null || _c === void 0 ? void 0 : _c.width, (_d = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.defaultEndMarkerLook) === null || _d === void 0 ? void 0 : _d.width));
+            const unfinishedConnectionGhostNode = (_e = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnectionTracer, "f")) === null || _e === void 0 ? void 0 : _e.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
               const unfinishedConnectionTotalLength = unfinishedConnectionGhostNode.getTotalLength();
@@ -9211,13 +9314,13 @@ class DiagramCanvas {
                 margin = 0;
               }
               const beforeUnfinishedConnectionEnd = unfinishedConnectionGhostNode.getPointAtLength(unfinishedConnectionTotalLength - margin);
-              this.unfinishedConnection.endCoords = [beforeUnfinishedConnectionEnd.x, beforeUnfinishedConnectionEnd.y];
+              __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").endCoords = [beforeUnfinishedConnectionEnd.x, beforeUnfinishedConnectionEnd.y];
             } else {
               // if it fails, just use the event coordinates
-              this.unfinishedConnection.endCoords = endCoords;
+              __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").endCoords = endCoords;
             }
             this.updateConnectionsInView(UNFINISHED_CONNECTION_ID);
-            (_e = this.unfinishedConnectionPort) === null || _e === void 0 ? void 0 : _e.raise(false);
+            (_f = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnectionPort, "f")) === null || _f === void 0 ? void 0 : _f.raise(false);
             // highlight closest target port
             if (this.model.ports.length > 0) {
               const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
@@ -9240,17 +9343,17 @@ class DiagramCanvas {
         }
       }
     }).on(DragEvents.End, (event, d) => {
-      var _a;
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.finishMultipleSelection(event);
+      var _b;
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
       } else {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
-          (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.remove();
+          (_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnectionTracer, "f")) === null || _b === void 0 ? void 0 : _b.remove();
           const userHighlight = this.userHighlight.getFocus();
           if (userHighlight instanceof DiagramPort) {
-            this.finishConnection(userHighlight);
+            __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishConnection).call(this, userHighlight);
           } else if (userHighlight instanceof DiagramField && userHighlight.rootElement instanceof DiagramPort) {
-            this.finishConnection(userHighlight.rootElement);
+            __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishConnection).call(this, userHighlight.rootElement);
           } else if (userHighlight instanceof DiagramNode || userHighlight instanceof DiagramSection || userHighlight instanceof DiagramField) {
             let targetRootElement;
             if (userHighlight instanceof DiagramNode || userHighlight instanceof DiagramSection) {
@@ -9258,22 +9361,22 @@ class DiagramCanvas {
             } else if (userHighlight.rootElement instanceof DiagramNode || userHighlight.rootElement instanceof DiagramSection) {
               targetRootElement = userHighlight.rootElement;
             } else {
-              this.dropConnection();
+              __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
               return;
             }
             const closestPort = targetRootElement.getClosestPortToPoint([event.x, event.y]);
             if (closestPort !== undefined) {
-              this.finishConnection(closestPort);
+              __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishConnection).call(this, closestPort);
             } else {
-              this.dropConnection();
+              __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
             }
           } else {
-            this.dropConnection();
+            __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
           }
         }
         setCursorStyle();
       }
-      this.secondaryButton = false;
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, false, "f");
     }));
     enterSelection.filter('.image-look').append('image');
     initializeLook(enterSelection);
@@ -9281,9 +9384,9 @@ class DiagramCanvas {
     updateLook(mergeSelection);
   }
   updateConnectionsInView(...ids) {
-    const connectionList = this.model.connections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true);
-    if (this.unfinishedConnection) {
-      connectionList.push(this.unfinishedConnection);
+    const connectionList = this.model.connections.filter(e => __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") !== undefined ? e.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") : true);
+    if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) {
+      connectionList.push(__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f"));
     }
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-connection').data(connectionList, d => d.id);
     const exitSelection = updateSelection.exit();
@@ -9294,7 +9397,7 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
-      if (d.end !== undefined && !this.dragging) {
+      if (d.end !== undefined && !__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
@@ -9307,10 +9410,10 @@ class DiagramCanvas {
       this.userSelection.toggle(d);
       this.diagramEvent$.next(new DiagramSelectionEvent([d], d.selected));
     }).on(Events.ContextMenu, (event, d) => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
@@ -9327,14 +9430,14 @@ class DiagramCanvas {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, isSecondaryButton(event), "f");
       return true;
     }).on(DragEvents.Start, event => {
-      this.startMultipleSelection(event);
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
     }).on(DragEvents.Drag, event => {
-      this.continueMultipleSelection(event);
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
     }).on(DragEvents.End, event => {
-      this.finishMultipleSelection(event);
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
     }));
     enterSelection.append('path').attr('class', 'diagram-connection-path');
     enterSelection.append('path').attr('class', 'diagram-connection-path-box');
@@ -9350,22 +9453,22 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('path');
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
-      var _a, _b;
-      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+      var _b, _c;
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = d.type.defaultStartMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = d.type.defaultEndMarkerLook) === null || _c === void 0 ? void 0 : _c.width);
     }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
-      var _a, _b;
-      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+      var _b, _c;
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = d.type.defaultStartMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = d.type.defaultEndMarkerLook) === null || _c === void 0 ? void 0 : _c.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
     .attr('pointer-events', 'stroke').attr('stroke-width', d => (d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.data().forEach(connection => {
-      this.updateConnectionLabelsInView(connection);
-      this.updateConnectionMarkersInView(connection);
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_updateConnectionLabelsInView).call(this, connection);
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_updateConnectionMarkersInView).call(this, connection);
     });
   }
   updateFieldsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-field').data(this.model.fields.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-field').data(this.model.fields.filter(e => __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") !== undefined ? e.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-field');
     if (ids && ids.length > 0) {
@@ -9374,7 +9477,7 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
-      if (!this.dragging) {
+      if (!__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
@@ -9388,10 +9491,10 @@ class DiagramCanvas {
       this.userSelection.toggle(elementToBeToggled);
       this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
     }).on(Events.ContextMenu, (event, d) => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
@@ -9409,15 +9512,14 @@ class DiagramCanvas {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.EditField) && d.editable && !d.removed) {
-        this.currentAction = new EditFieldAction(this, d.id, d.text, '');
         this.openTextInput(d.id);
       }
     }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, isSecondaryButton(event), "f");
       return true;
     }).on(DragEvents.Start, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
       } else {
         let node;
         if (d.rootElement instanceof DiagramNode) {
@@ -9426,14 +9528,14 @@ class DiagramCanvas {
           node = d.rootElement.node;
         }
         if (node) {
-          this.startMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMovingNode).call(this, event, node);
         } else {
           setCursorStyle(CursorStyle.NotAllowed);
         }
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.continueMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
       } else {
         let node;
         if (d.rootElement instanceof DiagramNode) {
@@ -9442,14 +9544,14 @@ class DiagramCanvas {
           node = d.rootElement.node;
         }
         if (node) {
-          this.continueMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMovingNode).call(this, event, node);
         } else {
           setCursorStyle(CursorStyle.NotAllowed);
         }
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.finishMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
       } else {
         let node;
         if (d.rootElement instanceof DiagramNode) {
@@ -9458,24 +9560,24 @@ class DiagramCanvas {
           node = d.rootElement.node;
         }
         if (node) {
-          this.finishMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMovingNode).call(this, event, node);
         } else {
           setCursorStyle();
         }
       }
-      this.secondaryButton = false;
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, false, "f");
     }));
     enterSelection.append('text').style('user-select', 'none').style('font-kerning', 'none').style('white-space', 'nowrap');
     enterSelection.append('rect');
     mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]}) rotate(${d.orientation} ${d.width / 2} ${d.height / 2})`).attr('opacity', d => d.removed ? 0.5 : 1).select('text').attr('x', d => d.horizontalAlign === HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === HorizontalAlign.Center ? 'middle' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === VerticalAlign.Center ? d.height / 2 : d.verticalAlign === VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === VerticalAlign.Center ? 'middle' : d.verticalAlign === VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('font-family', d => d.look.fontFamily || "'Wonder Unit Sans', sans-serif").attr('font-weight', d => d.look.fontWeight || DIAGRAM_FIELD_DEFAULTS.look.fontWeight).attr('fill', d => d.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).style('font-kerning', 'none').each(d => {
-      this.setFieldTextAndWrap(d);
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_setFieldTextAndWrap).call(this, d);
     });
     mergeSelection
     // add a transparent rectangle to capture pointer events on the text
     .select('rect').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('fill', 'transparent');
   }
   updateObjectsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-object').data(this.model.objects.filter(e => __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") !== undefined ? e.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-object');
     if (ids && ids.length > 0) {
@@ -9485,10 +9587,10 @@ class DiagramCanvas {
     mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.svg);
     exitSelection.remove();
     enterSelection.on(Events.ContextMenu, (event, d) => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
@@ -9501,24 +9603,24 @@ class DiagramCanvas {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, isSecondaryButton(event), "f");
       return true;
     }).on(DragEvents.Start, event => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
       }
     }).on(DragEvents.Drag, event => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.continueMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
       }
     }).on(DragEvents.End, event => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.finishMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
       }
     }));
   }
   updateDecoratorsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-decorator').data(this.model.decorators.filter(e => __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") !== undefined ? e.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f") : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-decorator');
     if (ids && ids.length > 0) {
@@ -9528,7 +9630,7 @@ class DiagramCanvas {
     mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.svg);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
-      if (!this.dragging) {
+      if (!__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
@@ -9544,10 +9646,10 @@ class DiagramCanvas {
         this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
       }
     }).on(Events.ContextMenu, (event, d) => {
-      if (this.dragging) {
+      if (__classPrivateFieldGet(this, _DiagramCanvas_dragging, "f")) {
         event.preventDefault();
         event.stopPropagation();
-        this.dragging = false;
+        __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
         return;
       }
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
@@ -9567,11 +9669,11 @@ class DiagramCanvas {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, isSecondaryButton(event), "f");
       return true;
     }).on(DragEvents.Start, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMultipleSelection).call(this, event);
       } else {
         let node;
         if (d.rootElement instanceof DiagramNode) {
@@ -9580,14 +9682,14 @@ class DiagramCanvas {
           node = d.rootElement.node;
         }
         if (node) {
-          this.startMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_startMovingNode).call(this, event, node);
         } else {
           setCursorStyle(CursorStyle.NotAllowed);
         }
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.continueMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMultipleSelection).call(this, event);
       } else {
         let node;
         if (d.rootElement instanceof DiagramNode) {
@@ -9596,14 +9698,14 @@ class DiagramCanvas {
           node = d.rootElement.node;
         }
         if (node) {
-          this.continueMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_continueMovingNode).call(this, event, node);
         } else {
           setCursorStyle(CursorStyle.NotAllowed);
         }
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.finishMultipleSelection(event);
+      if (this.multipleSelectionOn || __classPrivateFieldGet(this, _DiagramCanvas_secondaryButton, "f")) {
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMultipleSelection).call(this, event);
       } else {
         let node;
         if (d.rootElement instanceof DiagramNode) {
@@ -9612,187 +9714,76 @@ class DiagramCanvas {
           node = d.rootElement.node;
         }
         if (node) {
-          this.finishMovingNode(event, node);
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_finishMovingNode).call(this, event, node);
         } else {
           setCursorStyle();
         }
       }
-      this.secondaryButton = false;
+      __classPrivateFieldSet(this, _DiagramCanvas_secondaryButton, false, "f");
     }));
   }
-  updateConnectionLabelsInView(connection) {
-    var _a, _b, _c;
-    const connectionSelection = this.selectCanvasView().select(`[id='${escapeSelector(connection.id)}']`);
-    const pathSelection = connectionSelection.select('path');
-    const pathNode = pathSelection.node();
-    const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), connection.type.label);
-    labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
-    if (pathNode) {
-      const pathLength = pathNode.getTotalLength();
-      let startLabelShiftX = 0;
-      let startLabelShiftY = 0;
-      let middleLabelShiftX = 0;
-      let middleLabelShiftY = 0;
-      let endLabelShiftX = 0;
-      let endLabelShiftY = 0;
-      if (labelConfiguration.look.fillColor === 'transparent') {
-        // background color is transparent / not set, so we find an alternative position for the label
-        const deltaX = connection.endCoords[0] - connection.startCoords[0];
-        const deltaY = connection.endCoords[1] - connection.startCoords[1];
-        switch (connection.startDirection) {
-          case Side.Top:
-            startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
-            endLabelShiftX = startLabelShiftX;
-            break;
-          case Side.Bottom:
-            startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
-            endLabelShiftX = startLabelShiftX;
-            break;
-          case Side.Left:
-            startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
-            endLabelShiftY = startLabelShiftY;
-            break;
-          case Side.Right:
-            startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
-            endLabelShiftY = startLabelShiftY;
-            break;
-          default:
-            startLabelShiftX = 0.5;
-            endLabelShiftX = startLabelShiftX;
-            startLabelShiftY = -0.5;
-            endLabelShiftY = startLabelShiftY;
-        }
-        switch (connection.endDirection) {
-          case Side.Top:
-            endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
-            break;
-          case Side.Bottom:
-            endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
-            break;
-          case Side.Left:
-            endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
-            break;
-          case Side.Right:
-            endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
-            break;
-          default:
-            endLabelShiftX = 0.5;
-            endLabelShiftY = -0.5;
-        }
-        if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-          // horizontal quadrant
-          middleLabelShiftX = deltaX > 0 ? -0.5 : 0.5;
-          middleLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
-        } else {
-          // vertical quadrant
-          middleLabelShiftX = deltaX > 0 ? 0.5 : -0.5;
-          middleLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
-        }
-      }
-      // bind start labels
-      connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).text(connection.startLabel);
-      const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-      if (startLabelBoundingRect) {
-        // don't create space for the label if the label is empty
-        const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
-        const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
-        let pathStartLabelPoint;
-        switch (connection.startDirection) {
-          case Side.Left:
-            pathStartLabelPoint = pathNode.getPointAtLength(getRightMargin(labelConfiguration) + boundingWidth / 2);
-            break;
-          case Side.Right:
-            pathStartLabelPoint = pathNode.getPointAtLength(getLeftMargin(labelConfiguration) + boundingWidth / 2);
-            break;
-          case Side.Top:
-            pathStartLabelPoint = pathNode.getPointAtLength(getBottomMargin(labelConfiguration) + boundingHeight / 2);
-            break;
-          case Side.Bottom:
-            pathStartLabelPoint = pathNode.getPointAtLength(getTopMargin(labelConfiguration) + boundingHeight / 2);
-            break;
-          default:
-            pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
-        }
-        connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
-      }
-      // bind middle labels
-      connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).style('font-kerning', 'none').text(connection.middleLabel);
-      const middleLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-      if (middleLabelBoundingRect) {
-        // don't create space for the label if the label is empty
-        const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
-        const boundingHeight = !connection.middleLabel ? 0 : middleLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
-        const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
-        connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x + middleLabelShiftX * boundingWidth},${pathMiddleLabelPoint.y + middleLabelShiftY * boundingHeight})`);
-      }
-      // bind end labels
-      connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).style('font-kerning', 'none').text(connection.endLabel);
-      const endLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-      if (endLabelBoundingRect) {
-        // don't create space for the label if the label is empty
-        const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
-        const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
-        let pathEndLabelPoint;
-        switch (connection.endDirection) {
-          case Side.Left:
-            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getRightMargin(labelConfiguration) + boundingWidth / 2));
-            break;
-          case Side.Right:
-            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getLeftMargin(labelConfiguration) + boundingWidth / 2));
-            break;
-          case Side.Top:
-            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getBottomMargin(labelConfiguration) + boundingHeight / 2));
-            break;
-          case Side.Bottom:
-            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getTopMargin(labelConfiguration) + boundingHeight / 2));
-            break;
-          default:
-            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
-        }
-        connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
-      }
-    }
-  }
-  updateConnectionMarkersInView(connection) {
-    const connectionSelection = this.selectCanvasView().select(`[id='${escapeSelector(connection.id)}']`);
-    const startMarkerSelection = connectionSelection.select('marker.diagram-connection-start-marker');
-    const endMarkerSelection = connectionSelection.select('marker.diagram-connection-end-marker');
-    if (connection.startMarkerLook !== null) {
-      startMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.startMarkerLook.width).attr('markerHeight', connection.startMarkerLook.height).attr('refX', connection.startMarkerLook.refX).attr('refY', connection.startMarkerLook.refY).select('image').attr('href', connection.startMarkerLook.image).attr('width', connection.startMarkerLook.width).attr('height', connection.startMarkerLook.height);
-    } else {
-      startMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
-    }
-    if (connection.endMarkerLook !== null) {
-      endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.endMarkerLook.width).attr('markerHeight', connection.endMarkerLook.height).attr('refX', connection.endMarkerLook.refX).attr('refY', connection.endMarkerLook.refY).select('image').attr('href', connection.endMarkerLook.image).attr('width', connection.endMarkerLook.width).attr('height', connection.endMarkerLook.height);
-    } else {
-      endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
+  bringToFront(node) {
+    const overlappingNodes = this.model.nodes.filter(n => n.id !== node.id && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]]));
+    let maximumZ = node.z;
+    for (const n of overlappingNodes) {
+      if (n.z > maximumZ) {
+        maximumZ = n.z;
+      }
     }
+    maximumZ += 1;
+    const action = new SetGeometryAction(this, DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
+    node.setGeometry(Object.assign(Object.assign({}, node.getGeometry()), {
+      z: maximumZ
+    }));
+    node.raiseWithZ();
+    action.to = node.getGeometry();
+    __classPrivateFieldSet(this, _DiagramCanvas_currentAction, action, "f");
+    __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+    this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+    __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
+  }
+  sendToBack(node) {
+    const overlappingNodes = this.model.nodes.filter(n => n.id !== node.id && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]]));
+    let minimumZ = node.z;
+    for (const n of overlappingNodes) {
+      if (n.z < minimumZ) {
+        minimumZ = n.z;
+      }
+    }
+    minimumZ -= 1;
+    const action = new SetGeometryAction(this, DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
+    node.setGeometry(Object.assign(Object.assign({}, node.getGeometry()), {
+      z: minimumZ
+    }));
+    node.raiseWithZ();
+    action.to = node.getGeometry();
+    __classPrivateFieldSet(this, _DiagramCanvas_currentAction, action, "f");
+    __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+    this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+    __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
   }
   fieldRootFitsInView(id) {
-    var _a, _b, _c, _d;
+    var _b, _c, _d, _e;
     const field = this.model.fields.get(id);
     if (!field) {
       return false;
     }
     if (field.rootElement instanceof DiagramNode || field.rootElement instanceof DiagramSection) {
-      const fieldDimensions = this.minimumSizeOfField(field);
-      const stretchX = fieldDimensions[0] + getLeftMargin((_a = field.rootElement.type) === null || _a === void 0 ? void 0 : _a.label) + getRightMargin((_b = field.rootElement.type) === null || _b === void 0 ? void 0 : _b.label) - field.rootElement.width;
-      const stretchY = fieldDimensions[1] + getTopMargin((_c = field.rootElement.type) === null || _c === void 0 ? void 0 : _c.label) + getBottomMargin((_d = field.rootElement.type) === null || _d === void 0 ? void 0 : _d.label) - field.rootElement.height;
+      const fieldDimensions = __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_minimumSizeOfField).call(this, field);
+      const stretchX = fieldDimensions[0] + getLeftMargin((_b = field.rootElement.type) === null || _b === void 0 ? void 0 : _b.label) + getRightMargin((_c = field.rootElement.type) === null || _c === void 0 ? void 0 : _c.label) - field.rootElement.width;
+      const stretchY = fieldDimensions[1] + getTopMargin((_d = field.rootElement.type) === null || _d === void 0 ? void 0 : _d.label) + getBottomMargin((_e = field.rootElement.type) === null || _e === void 0 ? void 0 : _e.label) - field.rootElement.height;
       return stretchX <= 0 && stretchY <= 0;
     }
     return true;
   }
   fitFieldRootInView(id, shrink = true) {
-    var _a, _b, _c;
+    var _b, _c, _d;
     const field = this.model.fields.get(id);
     if (!field) {
       return;
     }
     if (field.rootElement instanceof DiagramNode) {
-      const fieldDimensions = this.minimumSizeOfField(field);
+      const fieldDimensions = __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_minimumSizeOfField).call(this, field);
       let stretchX = fieldDimensions[0] + getLeftMargin(field.rootElement.type.label) + getRightMargin(field.rootElement.type.label) - field.rootElement.width;
       let stretchY = fieldDimensions[1] + getTopMargin(field.rootElement.type.label) + getBottomMargin(field.rootElement.type.label) - field.rootElement.height;
       const spacingX = getGridSpacingX(this.gridConfig);
@@ -9818,15 +9809,15 @@ class DiagramCanvas {
       }
     }
     if (field.rootElement instanceof DiagramSection) {
-      const fieldDimensions = this.minimumSizeOfField(field);
+      const fieldDimensions = __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_minimumSizeOfField).call(this, field);
       let minimumFieldWidth = fieldDimensions[0];
       let minimumFieldHeight = fieldDimensions[1];
-      for (const section of ((_a = field.rootElement.node) === null || _a === void 0 ? void 0 : _a.sections) || []) {
+      for (const section of ((_b = field.rootElement.node) === null || _b === void 0 ? void 0 : _b.sections) || []) {
         if (section.label) {
           if (section.indexXInNode === field.rootElement.indexXInNode && section.indexYInNode !== field.rootElement.indexYInNode) {
-            minimumFieldWidth = Math.max(minimumFieldWidth, this.minimumSizeOfField(section.label)[0]);
+            minimumFieldWidth = Math.max(minimumFieldWidth, __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_minimumSizeOfField).call(this, section.label)[0]);
           } else if (section.indexXInNode !== field.rootElement.indexXInNode && section.indexYInNode === field.rootElement.indexYInNode) {
-            minimumFieldHeight = Math.max(minimumFieldHeight, this.minimumSizeOfField(section.label)[1]);
+            minimumFieldHeight = Math.max(minimumFieldHeight, __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_minimumSizeOfField).call(this, section.label)[1]);
           }
         }
       }
@@ -9855,25 +9846,25 @@ class DiagramCanvas {
         stretchY = (field.rootElement.getMinHeight() || 0) - field.rootElement.height;
       }
       if (shrink || stretchX > 0) {
-        (_b = field.rootElement.node) === null || _b === void 0 ? void 0 : _b.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+        (_c = field.rootElement.node) === null || _c === void 0 ? void 0 : _c.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
       }
       if (shrink || stretchY > 0) {
-        (_c = field.rootElement.node) === null || _c === void 0 ? void 0 : _c.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+        (_d = field.rootElement.node) === null || _d === void 0 ? void 0 : _d.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
       }
     }
   }
   fitNodeInView(id, shrink = true) {
-    var _a, _b;
+    var _b, _c;
     const node = this.model.nodes.get(id);
     if (!node) {
       return;
     }
-    if (node.sections.length > 0 && this.priorityThreshold) {
+    if (node.sections.length > 0 && __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f")) {
       let newNodeWidth = 0;
       let newNodeHeight = 0;
       // calculate newNodeWidth, newNodeHeight as the rightmost and bottommost points of any of the sections of the node
       for (const section of node.sections) {
-        if (section.getPriority() >= this.priorityThreshold) {
+        if (section.getPriority() >= __classPrivateFieldGet(this, _DiagramCanvas_priorityThreshold, "f")) {
           const sectionLastXCoordRelativeToNode = section.coords[0] + section.width - node.coords[0];
           const sectionLastYCoordRelativeToNode = section.coords[1] + section.height - node.coords[1];
           newNodeWidth = Math.max(newNodeWidth, sectionLastXCoordRelativeToNode);
@@ -9881,8 +9872,8 @@ class DiagramCanvas {
         }
       }
       // add the margin that goes between the rightmost and bottommost points of the sections and the edge of the node
-      newNodeWidth += ((_a = node.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
-      newNodeHeight += ((_b = node.type.sectionGrid) === null || _b === void 0 ? void 0 : _b.margin) || 0;
+      newNodeWidth += ((_b = node.type.sectionGrid) === null || _b === void 0 ? void 0 : _b.margin) || 0;
+      newNodeHeight += ((_c = node.type.sectionGrid) === null || _c === void 0 ? void 0 : _c.margin) || 0;
       if (shrink || newNodeWidth > node.width) {
         node.stretch(Side.Right, newNodeWidth - node.width);
       }
@@ -9892,7 +9883,7 @@ class DiagramCanvas {
     }
   }
   selectRoot() {
-    return d3.select(this.diagramRoot);
+    return d3.select(__classPrivateFieldGet(this, _DiagramCanvas_diagramRoot, "f"));
   }
   selectSVGElement() {
     return this.selectRoot().select('svg');
@@ -9903,107 +9894,10 @@ class DiagramCanvas {
   selectCanvasElements() {
     return this.selectCanvasView().select(`.daga-canvas-elements`);
   }
-  // User actions
-  startConnection(port) {
-    var _a, _b, _c, _d;
-    if (port.allowsOutgoing || port.allowsIncoming) {
-      if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '') && port.allowsOutgoing || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && port.allowsIncoming)) {
-        this.unfinishedConnection = new DiagramConnection(this.model, this.connectionType, port, undefined, UNFINISHED_CONNECTION_ID);
-        this.unfinishedConnectionPort = port;
-      } else {
-        if (this.inferConnectionType) {
-          let differentConnectionType = this.model.connections.types.all().find(t => {
-            var _a, _b;
-            return port.allowsOutgoing && t.canStartFromType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '');
-          });
-          if (differentConnectionType === undefined) {
-            differentConnectionType = this.model.connections.types.all().find(t => {
-              var _a, _b;
-              return port.allowsIncoming && t.canFinishOnType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '');
-            });
-          }
-          if (differentConnectionType !== undefined) {
-            this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
-            this.unfinishedConnectionPort = port;
-          }
-        }
-      }
-    }
-  }
-  finishConnection(port) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-    this.userHighlight.clear();
-    if (this.unfinishedConnection !== undefined) {
-      if (!this.allowConnectionLoops && this.unfinishedConnection.start === port) {
-        this.dropConnection();
-        return;
-      }
-      if (!this.allowSharingPorts && (port.incomingConnections.filter(c => !c.removed).length > 0 || port.outgoingConnections.filter(c => !c.removed).length > 0)) {
-        this.dropConnection();
-        return;
-      }
-      if (!this.allowSharingBothPorts && this.model.connections.find(c => {
-        var _a, _b;
-        return !c.removed && (c.start === ((_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) && c.end === port || c.end === ((_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.start) && c.start === port);
-      }) !== undefined) {
-        this.dropConnection();
-        return;
-      }
-      if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming) {
-        const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.id, port.id);
-        // clean up the previous unfinished connection
-        this.dropConnection();
-        addConnectionAction.do();
-        this.actionStack.add(addConnectionAction);
-      } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === void 0 ? void 0 : _k.start) === null || _l === void 0 ? void 0 : _l.getNode()) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === void 0 ? void 0 : _p.start) === null || _q === void 0 ? void 0 : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === void 0 ? void 0 : _r.type) === null || _s === void 0 ? void 0 : _s.id) || '') && port.allowsOutgoing) {
-        const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === void 0 ? void 0 : _t.id);
-        // clean up the previous unfinished connection
-        this.dropConnection();
-        addConnectionAction.do();
-        this.actionStack.add(addConnectionAction);
-      } else {
-        if (this.inferConnectionType) {
-          let differentConnectionType = this.model.connections.types.all().find(t => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming;
-          });
-          let invertConnection = false;
-          if (differentConnectionType === undefined) {
-            differentConnectionType = this.model.connections.types.all().find(t => {
-              var _a, _b, _c, _d, _e, _f, _g, _h;
-              return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsOutgoing;
-            });
-            invertConnection = true;
-          }
-          if (differentConnectionType !== undefined) {
-            const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === void 0 ? void 0 : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === void 0 ? void 0 : _v.id : port.id);
-            // clean up the previous unfinished connection
-            this.dropConnection();
-            addConnectionAction.do();
-            this.actionStack.add(addConnectionAction);
-          } else {
-            // error: connection target of wrong type and no allowed type can be found
-            this.dropConnection();
-          }
-        } else {
-          // error: connection target of wrong type and can't guess for a different type
-          this.dropConnection();
-        }
-      }
-    }
-  }
-  dropConnection() {
-    var _a, _b, _c, _d;
-    (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.setStart(undefined);
-    (_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.setEnd(undefined);
-    (_d = (_c = this.unfinishedConnection) === null || _c === void 0 ? void 0 : _c.select()) === null || _d === void 0 ? void 0 : _d.remove();
-    this.unfinishedConnection = undefined;
-    this.unfinishedConnectionPort = undefined;
-  }
   cancelAllUserActions() {
-    this.currentAction = undefined;
-    this.dropConnection();
-    this.removeInputField();
+    __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
+    __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
+    __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_removeInputField).call(this);
     this.contextMenu.close();
     this.userSelection.clear();
   }
@@ -10013,7 +9907,8 @@ class DiagramCanvas {
   openTextInput(id) {
     const field = this.model.fields.get(id);
     if (field) {
-      this.createInputField(field.text, field.coords, field.width, field.height, field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize, field.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily, field.orientation, field.multiline, () => {
+      __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new EditFieldAction(this, field.id, field.text, ''), "f");
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_createInputField).call(this, field.text, field.coords, field.width, field.height, field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize, field.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily, field.orientation, field.multiline, () => {
         // (_text)
         /*
             Empty for now
@@ -10022,257 +9917,483 @@ class DiagramCanvas {
             */
       }, text => {
         field.text = text;
-        if (this.currentAction instanceof EditFieldAction) {
-          this.currentAction.to = text;
-          this.currentAction.do();
-          this.actionStack.add(this.currentAction);
-          this.currentAction = undefined;
+        if (__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof EditFieldAction) {
+          __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = text;
+          __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+          this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+          __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
         }
       });
     }
   }
-  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, multiline, changeCallback, finishCallback) {
-    // if we have a text input open, close it before creating a new one
-    this.removeInputField();
-    const inputFieldContainer = this.selectCanvasElements().append('foreignObject').attr('x', `${coords[0]}px`).attr('y', `${coords[1]}px`).attr('width', `${width}px`).attr('height', `${height}px`).style('box-sizing', 'border-box').style('border', '1px solid');
-    this.inputFieldContainer = inputFieldContainer;
-    const inputField = inputFieldContainer.append('xhtml:textarea');
-    let inputFieldWidth;
-    let inputFieldHeight;
-    inputField.text(text).style('box-sizing', 'border-box').style('width', `${width}px`).style('height', `${height}px`).style('font-size', `${fontSize}px`).style('font-family', fontFamily).style('resize', 'none').style('outline', 0).style('border', 0).style('margin', 0).style('padding', 0).on(Events.KeyDown, event => {
-      event.stopPropagation();
-      if (event.key === Keys.Escape || event.key === Keys.Enter && !multiline) {
-        const value = inputField.property('value') || '';
-        this.removeInputField();
-        if (finishCallback) {
-          finishCallback(value);
-        }
-      }
-    }).on(Events.KeyUp, event => {
-      event.stopPropagation();
-    }).on(Events.Input, () => {
-      const value = inputField.property('value');
-      inputField.attr('cols', numberOfColumns(value) + 1);
-      inputField.attr('rows', numberOfRows(value) + 1);
-      // reset width and height so that later the scrollWidth and scrollHeight are fit to the size of the text
-      inputField.style('width', '');
-      inputField.style('height', '');
-      // add one diagram unit of margin of error
-      inputFieldWidth = inputField.property('scrollWidth') + 1;
-      inputFieldHeight = inputField.property('scrollHeight') + 1;
-      // keep the field from shrinking below its original size
-      const newWidth = Math.max(inputFieldWidth, width);
-      const newHeight = Math.max(inputFieldHeight, height);
-      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('width', `${newWidth}px`);
-      inputField.style('width', `${newWidth}px`);
-      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('height', `${newHeight}px`);
-      inputField.style('height', `${newHeight}px`);
-      if (changeCallback) {
-        changeCallback(value);
+}
+_a = DiagramCanvas, _DiagramCanvas_diagramRoot = new WeakMap(), _DiagramCanvas_connectionType = new WeakMap(), _DiagramCanvas_gridPatternId = new WeakMap(), _DiagramCanvas_ancillaryGridPatternIds = new WeakMap(), _DiagramCanvas_zoomBehavior = new WeakMap(), _DiagramCanvas_zoomTransform = new WeakMap(), _DiagramCanvas_priorityThreshold = new WeakMap(), _DiagramCanvas_priorityThresholds = new WeakMap(), _DiagramCanvas_unfinishedConnection = new WeakMap(), _DiagramCanvas_unfinishedConnectionTracer = new WeakMap(), _DiagramCanvas_unfinishedConnectionPort = new WeakMap(), _DiagramCanvas_inputFieldContainer = new WeakMap(), _DiagramCanvas_multipleSelectionContainer = new WeakMap(), _DiagramCanvas_draggingFrom = new WeakMap(), _DiagramCanvas_dragging = new WeakMap(), _DiagramCanvas_secondaryButton = new WeakMap(), _DiagramCanvas_currentAction = new WeakMap(), _DiagramCanvas_instances = new WeakSet(), _DiagramCanvas_updateConnectionLabelsInView = function _DiagramCanvas_updateConnectionLabelsInView(connection) {
+  var _b, _c, _d;
+  const connectionSelection = this.selectCanvasView().select(`[id='${escapeSelector(connection.id)}']`);
+  const pathSelection = connectionSelection.select('path');
+  const pathNode = pathSelection.node();
+  const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), connection.type.label);
+  labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
+  if (pathNode) {
+    const pathLength = pathNode.getTotalLength();
+    let startLabelShiftX = 0;
+    let startLabelShiftY = 0;
+    let middleLabelShiftX = 0;
+    let middleLabelShiftY = 0;
+    let endLabelShiftX = 0;
+    let endLabelShiftY = 0;
+    if (labelConfiguration.look.fillColor === 'transparent') {
+      // background color is transparent / not set, so we find an alternative position for the label
+      const deltaX = connection.endCoords[0] - connection.startCoords[0];
+      const deltaY = connection.endCoords[1] - connection.startCoords[1];
+      switch (connection.startDirection) {
+        case Side.Top:
+          startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
+          endLabelShiftX = startLabelShiftX;
+          break;
+        case Side.Bottom:
+          startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
+          endLabelShiftX = startLabelShiftX;
+          break;
+        case Side.Left:
+          startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
+          endLabelShiftY = startLabelShiftY;
+          break;
+        case Side.Right:
+          startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
+          endLabelShiftY = startLabelShiftY;
+          break;
+        default:
+          startLabelShiftX = 0.5;
+          endLabelShiftX = startLabelShiftX;
+          startLabelShiftY = -0.5;
+          endLabelShiftY = startLabelShiftY;
       }
-    }).on(Events.Click, event => {
-      event.stopPropagation();
-    }).on(Events.FocusOut, () => {
-      const value = inputField.property('value');
-      this.removeInputField();
-      if (finishCallback) {
-        finishCallback(value);
+      switch (connection.endDirection) {
+        case Side.Top:
+          endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
+          break;
+        case Side.Bottom:
+          endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
+          break;
+        case Side.Left:
+          endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
+          break;
+        case Side.Right:
+          endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
+          break;
+        default:
+          endLabelShiftX = 0.5;
+          endLabelShiftY = -0.5;
       }
-    });
-    const htmlInput = inputField.node();
-    htmlInput.focus();
-    htmlInput.select();
+      if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        // horizontal quadrant
+        middleLabelShiftX = deltaX > 0 ? -0.5 : 0.5;
+        middleLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
+      } else {
+        // vertical quadrant
+        middleLabelShiftX = deltaX > 0 ? 0.5 : -0.5;
+        middleLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
+      }
+    }
+    // bind start labels
+    connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).text(connection.startLabel);
+    const startLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (startLabelBoundingRect) {
+      // don't create space for the label if the label is empty
+      const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+      const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
+      let pathStartLabelPoint;
+      switch (connection.startDirection) {
+        case Side.Left:
+          pathStartLabelPoint = pathNode.getPointAtLength(getRightMargin(labelConfiguration) + boundingWidth / 2);
+          break;
+        case Side.Right:
+          pathStartLabelPoint = pathNode.getPointAtLength(getLeftMargin(labelConfiguration) + boundingWidth / 2);
+          break;
+        case Side.Top:
+          pathStartLabelPoint = pathNode.getPointAtLength(getBottomMargin(labelConfiguration) + boundingHeight / 2);
+          break;
+        case Side.Bottom:
+          pathStartLabelPoint = pathNode.getPointAtLength(getTopMargin(labelConfiguration) + boundingHeight / 2);
+          break;
+        default:
+          pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
+      }
+      connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
+      connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
+    }
+    // bind middle labels
+    connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).style('font-kerning', 'none').text(connection.middleLabel);
+    const middleLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    if (middleLabelBoundingRect) {
+      // don't create space for the label if the label is empty
+      const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+      const boundingHeight = !connection.middleLabel ? 0 : middleLabelBoundingRect.height / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
+      const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
+      connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
+      connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x + middleLabelShiftX * boundingWidth},${pathMiddleLabelPoint.y + middleLabelShiftY * boundingHeight})`);
+    }
+    // bind end labels
+    connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).style('font-kerning', 'none').text(connection.endLabel);
+    const endLabelBoundingRect = (_d = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect();
+    if (endLabelBoundingRect) {
+      // don't create space for the label if the label is empty
+      const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+      const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
+      let pathEndLabelPoint;
+      switch (connection.endDirection) {
+        case Side.Left:
+          pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getRightMargin(labelConfiguration) + boundingWidth / 2));
+          break;
+        case Side.Right:
+          pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getLeftMargin(labelConfiguration) + boundingWidth / 2));
+          break;
+        case Side.Top:
+          pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getBottomMargin(labelConfiguration) + boundingHeight / 2));
+          break;
+        case Side.Bottom:
+          pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getTopMargin(labelConfiguration) + boundingHeight / 2));
+          break;
+        default:
+          pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
+      }
+      connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
+      connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
+    }
   }
-  removeInputField() {
-    var _a, _b, _c;
-    // when removing an element, a blur event is emitted
-    // we remove the listener for blur so that it doesn't shoot again on element removal
-    (_b = (_a = this.inputFieldContainer) === null || _a === void 0 ? void 0 : _a.select('input')) === null || _b === void 0 ? void 0 : _b.on(Events.Blur, null);
-    (_c = this.inputFieldContainer) === null || _c === void 0 ? void 0 : _c.remove();
-    this.inputFieldContainer = undefined;
+}, _DiagramCanvas_updateConnectionMarkersInView = function _DiagramCanvas_updateConnectionMarkersInView(connection) {
+  const connectionSelection = this.selectCanvasView().select(`[id='${escapeSelector(connection.id)}']`);
+  const startMarkerSelection = connectionSelection.select('marker.diagram-connection-start-marker');
+  const endMarkerSelection = connectionSelection.select('marker.diagram-connection-end-marker');
+  if (connection.startMarkerLook !== null) {
+    startMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.startMarkerLook.width).attr('markerHeight', connection.startMarkerLook.height).attr('refX', connection.startMarkerLook.refX).attr('refY', connection.startMarkerLook.refY).select('image').attr('href', connection.startMarkerLook.image).attr('width', connection.startMarkerLook.width).attr('height', connection.startMarkerLook.height);
+  } else {
+    startMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
   }
-  minimumSizeOfField(field) {
-    var _a, _b;
-    const textNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text')) === null || _b === void 0 ? void 0 : _b.node();
-    if (!textNode) {
-      // happens when a field has been created but not updated in view yet
-      return [0, 0];
+  if (connection.endMarkerLook !== null) {
+    endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.endMarkerLook.width).attr('markerHeight', connection.endMarkerLook.height).attr('refX', connection.endMarkerLook.refX).attr('refY', connection.endMarkerLook.refY).select('image').attr('href', connection.endMarkerLook.image).attr('width', connection.endMarkerLook.width).attr('height', connection.endMarkerLook.height);
+  } else {
+    endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
+  }
+}, _DiagramCanvas_startConnection = function _DiagramCanvas_startConnection(port) {
+  var _b, _c, _d, _e;
+  if (port.allowsOutgoing || port.allowsIncoming) {
+    if (this.connectionType && (this.connectionType.canStartFromType(((_c = (_b = port.getNode()) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.id) || '') && port.allowsOutgoing || this.connectionType.canFinishOnType(((_e = (_d = port.getNode()) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.id) || '') && port.allowsIncoming)) {
+      __classPrivateFieldSet(this, _DiagramCanvas_unfinishedConnection, new DiagramConnection(this.model, this.connectionType, port, undefined, UNFINISHED_CONNECTION_ID), "f");
+      __classPrivateFieldSet(this, _DiagramCanvas_unfinishedConnectionPort, port, "f");
+    } else {
+      if (this.inferConnectionType) {
+        let differentConnectionType = this.model.connections.types.all().find(t => {
+          var _b, _c;
+          return port.allowsOutgoing && t.canStartFromType(((_c = (_b = port.getNode()) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.id) || '');
+        });
+        if (differentConnectionType === undefined) {
+          differentConnectionType = this.model.connections.types.all().find(t => {
+            var _b, _c;
+            return port.allowsIncoming && t.canFinishOnType(((_c = (_b = port.getNode()) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.id) || '');
+          });
+        }
+        if (differentConnectionType !== undefined) {
+          __classPrivateFieldSet(this, _DiagramCanvas_unfinishedConnection, new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID), "f");
+          __classPrivateFieldSet(this, _DiagramCanvas_unfinishedConnectionPort, port, "f");
+        }
+      }
     }
-    const textBoundingBox = textNode.getBoundingClientRect();
-    return [textBoundingBox.width / this.zoomTransform.k, textBoundingBox.height / this.zoomTransform.k];
   }
-  setFieldTextAndWrap(field) {
-    var _a, _b, _c, _d;
-    const textSelection = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text');
-    const textNode = textSelection === null || textSelection === void 0 ? void 0 : textSelection.node();
-    if (textSelection && textNode) {
-      this.setFieldText(field, textSelection, field.text);
-    } else {
-      // can happen if a field has been created but not updated in view yet
-      // not sure if this still happens but should check just in case
+}, _DiagramCanvas_finishConnection = function _DiagramCanvas_finishConnection(port) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+  this.userHighlight.clear();
+  if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f") !== undefined) {
+    if (!this.allowConnectionLoops && __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start === port) {
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
+      return;
+    }
+    if (!this.allowSharingPorts && (port.incomingConnections.filter(c => !c.removed).length > 0 || port.outgoingConnections.filter(c => !c.removed).length > 0)) {
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
       return;
     }
-    if (field.fit) {
-      // no need to wrap
+    if (!this.allowSharingBothPorts && this.model.connections.find(c => {
+      var _b, _c;
+      return !c.removed && (c.start === ((_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _b === void 0 ? void 0 : _b.start) && c.end === port || c.end === ((_c = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _c === void 0 ? void 0 : _c.start) && c.start === port);
+    }) !== undefined) {
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
       return;
     }
-    let minimumSize = this.minimumSizeOfField(field);
-    while (minimumSize[0] > field.width || minimumSize[1] > field.height) {
-      const textString = ((_d = (_c = (_b = textSelection === null || textSelection === void 0 ? void 0 : textSelection.html()) === null || _b === void 0 ? void 0 : _b.replace(/<\/tspan>/g, '\n')) === null || _c === void 0 ? void 0 : _c.replace(/<tspan[^>]*>/g, '')) === null || _d === void 0 ? void 0 : _d.slice(0, -1)) || '';
-      let newTextString = '...';
-      if (textString.endsWith('...')) {
-        newTextString = textString.slice(0, -4) + '...';
+    if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canStartFromType(((_e = (_d = (_c = (_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.getNode()) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.id) || '') && ((_g = (_f = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _f === void 0 ? void 0 : _f.start) === null || _g === void 0 ? void 0 : _g.allowsOutgoing) && __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canFinishOnType(((_j = (_h = port.getNode()) === null || _h === void 0 ? void 0 : _h.type) === null || _j === void 0 ? void 0 : _j.id) || '') && port.allowsIncoming) {
+      const addConnectionAction = new AddConnectionAction(this, __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type, (_k = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _k === void 0 ? void 0 : _k.id, port.id);
+      // clean up the previous unfinished connection
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
+      addConnectionAction.do();
+      this.actionStack.add(addConnectionAction);
+    } else if (__classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canFinishOnType(((_p = (_o = (_m = (_l = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _l === void 0 ? void 0 : _l.start) === null || _m === void 0 ? void 0 : _m.getNode()) === null || _o === void 0 ? void 0 : _o.type) === null || _p === void 0 ? void 0 : _p.id) || '') && ((_r = (_q = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _q === void 0 ? void 0 : _q.start) === null || _r === void 0 ? void 0 : _r.allowsIncoming) && __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type.canStartFromType(((_t = (_s = port.getNode()) === null || _s === void 0 ? void 0 : _s.type) === null || _t === void 0 ? void 0 : _t.id) || '') && port.allowsOutgoing) {
+      const addConnectionAction = new AddConnectionAction(this, __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").type, port.id, (_u = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _u === void 0 ? void 0 : _u.id);
+      // clean up the previous unfinished connection
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
+      addConnectionAction.do();
+      this.actionStack.add(addConnectionAction);
+    } else {
+      if (this.inferConnectionType) {
+        let differentConnectionType = this.model.connections.types.all().find(t => {
+          var _b, _c, _d, _e, _f, _g, _h, _j;
+          return t.canStartFromType(((_e = (_d = (_c = (_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.getNode()) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.id) || '') && ((_g = (_f = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _f === void 0 ? void 0 : _f.start) === null || _g === void 0 ? void 0 : _g.allowsOutgoing) && t.canFinishOnType(((_j = (_h = port.getNode()) === null || _h === void 0 ? void 0 : _h.type) === null || _j === void 0 ? void 0 : _j.id) || '') && port.allowsIncoming;
+        });
+        let invertConnection = false;
+        if (differentConnectionType === undefined) {
+          differentConnectionType = this.model.connections.types.all().find(t => {
+            var _b, _c, _d, _e, _f, _g, _h, _j;
+            return t.canFinishOnType(((_e = (_d = (_c = (_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.getNode()) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.id) || '') && ((_g = (_f = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _f === void 0 ? void 0 : _f.start) === null || _g === void 0 ? void 0 : _g.allowsIncoming) && t.canStartFromType(((_j = (_h = port.getNode()) === null || _h === void 0 ? void 0 : _h.type) === null || _j === void 0 ? void 0 : _j.id) || '') && port.allowsOutgoing;
+          });
+          invertConnection = true;
+        }
+        if (differentConnectionType !== undefined) {
+          const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_v = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _v === void 0 ? void 0 : _v.id, invertConnection ? (_w = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f").start) === null || _w === void 0 ? void 0 : _w.id : port.id);
+          // clean up the previous unfinished connection
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
+          addConnectionAction.do();
+          this.actionStack.add(addConnectionAction);
+        } else {
+          // error: connection target of wrong type and no allowed type can be found
+          __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
+        }
       } else {
-        newTextString = textString.slice(0, -1) + '...';
-      }
-      if (textSelection) {
-        this.setFieldText(field, textSelection, newTextString);
-      }
-      if (newTextString === '...') {
-        // if no more characters can be removed and the new text is a bare ellipsis, stop the execution
-        return;
+        // error: connection target of wrong type and can't guess for a different type
+        __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_dropConnection).call(this);
+      }
+    }
+  }
+}, _DiagramCanvas_dropConnection = function _DiagramCanvas_dropConnection() {
+  var _b, _c, _d, _e;
+  (_b = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _b === void 0 ? void 0 : _b.setStart(undefined);
+  (_c = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _c === void 0 ? void 0 : _c.setEnd(undefined);
+  (_e = (_d = __classPrivateFieldGet(this, _DiagramCanvas_unfinishedConnection, "f")) === null || _d === void 0 ? void 0 : _d.select()) === null || _e === void 0 ? void 0 : _e.remove();
+  __classPrivateFieldSet(this, _DiagramCanvas_unfinishedConnection, undefined, "f");
+  __classPrivateFieldSet(this, _DiagramCanvas_unfinishedConnectionPort, undefined, "f");
+}, _DiagramCanvas_createInputField = function _DiagramCanvas_createInputField(text, coords, width, height, fontSize, fontFamily, orientation, multiline, changeCallback, finishCallback) {
+  // if we have a text input open, close it before creating a new one
+  __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_removeInputField).call(this);
+  const inputFieldContainer = this.selectCanvasElements().append('foreignObject').attr('x', `${coords[0]}px`).attr('y', `${coords[1]}px`).attr('width', `${width}px`).attr('height', `${height}px`).style('box-sizing', 'border-box').style('border', '1px solid');
+  __classPrivateFieldSet(this, _DiagramCanvas_inputFieldContainer, inputFieldContainer, "f");
+  const inputField = inputFieldContainer.append('xhtml:textarea');
+  let inputFieldWidth;
+  let inputFieldHeight;
+  inputField.text(text).style('box-sizing', 'border-box').style('width', `${width}px`).style('height', `${height}px`).style('font-size', `${fontSize}px`).style('font-family', fontFamily).style('resize', 'none').style('outline', 0).style('border', 0).style('margin', 0).style('padding', 0).on(Events.KeyDown, event => {
+    event.stopPropagation();
+    if (event.key === Keys.Escape || event.key === Keys.Enter && !multiline) {
+      const value = inputField.property('value') || '';
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_removeInputField).call(this);
+      if (finishCallback) {
+        finishCallback(value);
       }
-      minimumSize = this.minimumSizeOfField(field);
     }
-  }
-  setFieldText(field, textSelection, text) {
-    const lines = text.split('\n');
-    textSelection.html('');
-    for (let i = 0; i < lines.length; ++i) {
-      textSelection.append('tspan').attr('x', field.horizontalAlign === HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + field.height / 2 : field.verticalAlign === VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) : i * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)).text(lines[i]);
+  }).on(Events.KeyUp, event => {
+    event.stopPropagation();
+  }).on(Events.Input, () => {
+    const value = inputField.property('value');
+    inputField.attr('cols', numberOfColumns(value) + 1);
+    inputField.attr('rows', numberOfRows(value) + 1);
+    // reset width and height so that later the scrollWidth and scrollHeight are fit to the size of the text
+    inputField.style('width', '');
+    inputField.style('height', '');
+    // add one diagram unit of margin of error
+    inputFieldWidth = inputField.property('scrollWidth') + 1;
+    inputFieldHeight = inputField.property('scrollHeight') + 1;
+    // keep the field from shrinking below its original size
+    const newWidth = Math.max(inputFieldWidth, width);
+    const newHeight = Math.max(inputFieldHeight, height);
+    inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('width', `${newWidth}px`);
+    inputField.style('width', `${newWidth}px`);
+    inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('height', `${newHeight}px`);
+    inputField.style('height', `${newHeight}px`);
+    if (changeCallback) {
+      changeCallback(value);
+    }
+  }).on(Events.Click, event => {
+    event.stopPropagation();
+  }).on(Events.FocusOut, () => {
+    const value = inputField.property('value');
+    __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_removeInputField).call(this);
+    if (finishCallback) {
+      finishCallback(value);
     }
-  }
-  /**
-   * Method to call to start the moving of a node triggered by a user drag event.
-   */
-  startMovingNode(event, d) {
-    if (this.canUserPerformAction(DiagramActions.MoveNode) && !d.removed) {
-      setCursorStyle(CursorStyle.Grabbing);
-      this.draggingFrom = [event.x, event.y];
-      if (d.selected && this.userSelection.count(e => e instanceof DiagramNode) > 1) {
-        this.currentAction = new MoveAction(this, this.userSelection.filter(e => e instanceof DiagramNode).map(n => n.id), d.coords);
-      } else {
-        const ancestorOfNode = d.getLastAncestor();
-        this.currentAction = new SetGeometryAction(this, DiagramActions.MoveNode, d.id, d.getGeometry(), d.getGeometry(), ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.id, ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id), ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id));
-      }
+  });
+  const htmlInput = inputField.node();
+  htmlInput.focus();
+  htmlInput.select();
+}, _DiagramCanvas_removeInputField = function _DiagramCanvas_removeInputField() {
+  var _b, _c, _d;
+  // when removing an element, a blur event is emitted
+  // we remove the listener for blur so that it does not emit again on element removal
+  (_c = (_b = __classPrivateFieldGet(this, _DiagramCanvas_inputFieldContainer, "f")) === null || _b === void 0 ? void 0 : _b.select('input')) === null || _c === void 0 ? void 0 : _c.on(Events.Blur, null);
+  (_d = __classPrivateFieldGet(this, _DiagramCanvas_inputFieldContainer, "f")) === null || _d === void 0 ? void 0 : _d.remove();
+  __classPrivateFieldSet(this, _DiagramCanvas_inputFieldContainer, undefined, "f");
+}, _DiagramCanvas_minimumSizeOfField = function _DiagramCanvas_minimumSizeOfField(field) {
+  var _b, _c;
+  const textNode = (_c = (_b = field.select()) === null || _b === void 0 ? void 0 : _b.select('text')) === null || _c === void 0 ? void 0 : _c.node();
+  if (!textNode) {
+    // happens when a field has been created but not updated in view yet
+    return [0, 0];
+  }
+  const textBoundingBox = textNode.getBoundingClientRect();
+  return [textBoundingBox.width / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k, textBoundingBox.height / __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k];
+}, _DiagramCanvas_setFieldTextAndWrap = function _DiagramCanvas_setFieldTextAndWrap(field) {
+  var _b, _c, _d, _e;
+  const textSelection = (_b = field.select()) === null || _b === void 0 ? void 0 : _b.select('text');
+  const textNode = textSelection === null || textSelection === void 0 ? void 0 : textSelection.node();
+  if (textSelection && textNode) {
+    __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_setFieldText).call(this, field, textSelection, field.text);
+  } else {
+    // can happen if a field has been created but not updated in view yet
+    // not sure if this still happens but should check just in case
+    return;
+  }
+  if (field.fit) {
+    // no need to wrap
+    return;
+  }
+  let minimumSize = __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_minimumSizeOfField).call(this, field);
+  while (minimumSize[0] > field.width || minimumSize[1] > field.height) {
+    const textString = ((_e = (_d = (_c = textSelection === null || textSelection === void 0 ? void 0 : textSelection.html()) === null || _c === void 0 ? void 0 : _c.replace(/<\/tspan>/g, '\n')) === null || _d === void 0 ? void 0 : _d.replace(/<tspan[^>]*>/g, '')) === null || _e === void 0 ? void 0 : _e.slice(0, -1)) || '';
+    let newTextString = '...';
+    if (textString.endsWith('...')) {
+      newTextString = textString.slice(0, -4) + '...';
     } else {
-      setCursorStyle(CursorStyle.NotAllowed);
+      newTextString = textString.slice(0, -1) + '...';
     }
-  }
-  /**
-   * Method to call to continue the moving of a node triggered by a user drag event.
-   */
-  continueMovingNode(event, d) {
-    if (this.canUserPerformAction(DiagramActions.MoveNode) && (this.currentAction instanceof MoveAction || this.currentAction instanceof SetGeometryAction) && !d.removed) {
-      const newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
-      if (d.selected) {
-        this.userSelection.move([newNodeCoords[0] - d.coords[0], newNodeCoords[1] - d.coords[1]]);
-      } else {
-        d.move(newNodeCoords);
-      }
-      this.userHighlight.clear();
-      this.dragging = true;
-      this.diagramEvent$.next(new DiagramDraggingNodeEvent(d));
+    if (textSelection) {
+      __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_setFieldText).call(this, field, textSelection, newTextString);
     }
-  }
-  /**
-   * Method to call to finish the moving of a node triggered by a user drag event.
-   */
-  finishMovingNode(event, d) {
-    var _a, _b, _c, _d;
-    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) {
-        let newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
-        if ((_a = this.gridConfig) === null || _a === void 0 ? void 0 : _a.snap) {
-          newNodeCoords = this.getClosestGridPoint([newNodeCoords[0] - d.type.snapToGridOffset[0], newNodeCoords[1] - d.type.snapToGridOffset[1]]);
-          newNodeCoords[0] += d.type.snapToGridOffset[0];
-          newNodeCoords[1] += d.type.snapToGridOffset[1];
-        }
-        if (this.currentAction instanceof MoveAction) {
-          const movingFrom = this.currentAction.delta;
-          this.currentAction.delta = [newNodeCoords[0] - movingFrom[0], newNodeCoords[1] - movingFrom[1]];
-          // reset position of node prior to moving it again
-          if (d.selected) {
-            this.userSelection.move([movingFrom[0] - d.coords[0], movingFrom[1] - d.coords[1]]);
-          } else {
-            d.move(movingFrom);
-          }
-        } else if (this.currentAction instanceof SetGeometryAction) {
-          d.move(newNodeCoords);
-          // if moving a single node, we can change the node's parent,
-          // so we check whether we dropped this node on a potential parent
-          const nodesAtLocation = this.model.nodes.getAtCoordinates(event.x, event.y).filter(n => n.id !== d.id && !n.isDescendantOf(d));
-          // filter by which nodes can have this node as a child
-          const nodesAtLocationWhichCanHaveNodeAsAChild = nodesAtLocation.filter(n => n.type.childrenTypes.includes(d.type.id));
-          // filter by which nodes don't have descendants in this collection
-          const filteredNodesAtLocation = filterByOnlyDescendants(nodesAtLocationWhichCanHaveNodeAsAChild);
-          const droppedOn = filteredNodesAtLocation[filteredNodesAtLocation.length - 1];
-          if (droppedOn !== d.parent && (d.type.canBeParentless || droppedOn !== undefined)) {
-            const ancestorOfDroppedOn = droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.getLastAncestor();
-            const fromChildGeometry = this.currentAction.from;
-            const setParentAction = new SetParentAction(this, d.id, (_b = d.parent) === null || _b === void 0 ? void 0 : _b.id, droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id));
-            (_c = d.parent) === null || _c === void 0 ? void 0 : _c.removeChild(d);
-            if (droppedOn !== undefined) {
-              droppedOn.addChild(d);
-            }
-            setParentAction.toChildGeometry = d.getGeometry(d.id);
-            setParentAction.toAncestorGeometry = ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id);
-            this.currentAction = setParentAction;
-          } else {
-            const ancestorOfNode = d === null || d === void 0 ? void 0 : d.getLastAncestor();
-            this.currentAction.ancestorId = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.id;
-            this.currentAction.fromAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
-            (_d = d.parent) === null || _d === void 0 ? void 0 : _d.fitToChild(d);
-            this.currentAction.to = d.getGeometry(d.id);
-            this.currentAction.toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
-          }
-        }
-        if (this.currentAction !== undefined) {
-          this.currentAction.do();
-          this.actionStack.add(this.currentAction);
-          this.currentAction = undefined;
-        }
-      }
+    if (newTextString === '...') {
+      // if no more characters can be removed and the new text is a bare ellipsis, stop the execution
+      return;
     }
-    setCursorStyle();
-    this.dragging = false;
+    minimumSize = __classPrivateFieldGet(this, _DiagramCanvas_instances, "m", _DiagramCanvas_minimumSizeOfField).call(this, field);
   }
-  startMultipleSelection(event) {
-    this.draggingFrom = this.getPointerLocationRelativeToCanvas(event);
-    // we put the multiple selection rectangle in the diagram svg element
-    // so it's not affected by the zoom level in the diagram elements
-    this.multipleSelectionContainer = this.selectSVGElement().append('rect').attr('stroke', '#0E74B6').attr('fill', 'rgba(14, 116, 182, 0.06)');
+}, _DiagramCanvas_setFieldText = function _DiagramCanvas_setFieldText(field, textSelection, text) {
+  const lines = text.split('\n');
+  textSelection.html('');
+  for (let i = 0; i < lines.length; ++i) {
+    textSelection.append('tspan').attr('x', field.horizontalAlign === HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + field.height / 2 : field.verticalAlign === VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) : i * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)).text(lines[i]);
   }
-  continueMultipleSelection(event) {
-    var _a, _b, _c, _d;
-    const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-    if (this.draggingFrom[0] !== pointerCoords[0] || this.draggingFrom[1] !== pointerCoords[1]) {
-      setCursorStyle(CursorStyle.Crosshair);
-      // since the multiple selection rectangle is not affected by zoom,
-      // we compensate its coordinates based in the zoom transform to draw it
-      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === void 0 ? void 0 : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]) * this.zoomTransform.k + this.zoomTransform.x)) === null || _b === void 0 ? void 0 : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]) * this.zoomTransform.k + this.zoomTransform.y)) === null || _c === void 0 ? void 0 : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]) * this.zoomTransform.k)) === null || _d === void 0 ? void 0 : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]) * this.zoomTransform.k);
-      this.dragging = true;
+}, _DiagramCanvas_startMovingNode = function _DiagramCanvas_startMovingNode(event, d) {
+  if (this.canUserPerformAction(DiagramActions.MoveNode) && !d.removed) {
+    setCursorStyle(CursorStyle.Grabbing);
+    __classPrivateFieldSet(this, _DiagramCanvas_draggingFrom, [event.x, event.y], "f");
+    if (d.selected && this.userSelection.count(e => e instanceof DiagramNode) > 1) {
+      __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new MoveAction(this, this.userSelection.filter(e => e instanceof DiagramNode).map(n => n.id), d.coords), "f");
+    } else {
+      const ancestorOfNode = d.getLastAncestor();
+      __classPrivateFieldSet(this, _DiagramCanvas_currentAction, new SetGeometryAction(this, DiagramActions.MoveNode, d.id, d.getGeometry(), d.getGeometry(), ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.id, ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id), ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id)), "f");
     }
+  } else {
+    setCursorStyle(CursorStyle.NotAllowed);
   }
-  finishMultipleSelection(event) {
-    var _a;
-    const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-    (_a = this.multipleSelectionContainer) === null || _a === void 0 ? void 0 : _a.remove();
-    this.multipleSelectionContainer = undefined;
-    this.userSelection.clear();
-    for (const node of this.model.nodes) {
-      if (rectanglesIntersect([node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]], [this.draggingFrom, pointerCoords])) {
-        this.userSelection.add(node);
-      }
+}, _DiagramCanvas_continueMovingNode = function _DiagramCanvas_continueMovingNode(event, d) {
+  if (this.canUserPerformAction(DiagramActions.MoveNode) && (__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof MoveAction || __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction) && !d.removed) {
+    const newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
+    if (d.selected) {
+      this.userSelection.move([newNodeCoords[0] - d.coords[0], newNodeCoords[1] - d.coords[1]]);
+    } else {
+      d.move(newNodeCoords);
     }
-    this.multipleSelectionOn = false;
-    this.diagramEvent$.next(new DiagramSelectionEvent(this.userSelection.all(), true));
-    setCursorStyle();
-  }
-}
-DiagramCanvas.canvasCount = 0;
+    this.userHighlight.clear();
+    __classPrivateFieldSet(this, _DiagramCanvas_dragging, true, "f");
+    this.diagramEvent$.next(new DiagramDraggingNodeEvent(d));
+  }
+}, _DiagramCanvas_finishMovingNode = function _DiagramCanvas_finishMovingNode(event, d) {
+  var _b, _c, _d, _e;
+  if (this.canUserPerformAction(DiagramActions.MoveNode) && !d.removed) {
+    // prevent drag behavior if mouse hasn't moved
+    if (__classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[0] !== event.x || __classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[1] !== event.y) {
+      let newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
+      if ((_b = this.gridConfig) === null || _b === void 0 ? void 0 : _b.snap) {
+        newNodeCoords = this.getClosestGridPoint([newNodeCoords[0] - d.type.snapToGridOffset[0], newNodeCoords[1] - d.type.snapToGridOffset[1]]);
+        newNodeCoords[0] += d.type.snapToGridOffset[0];
+        newNodeCoords[1] += d.type.snapToGridOffset[1];
+      }
+      if (__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof MoveAction) {
+        const movingFrom = __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").delta;
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").delta = [newNodeCoords[0] - movingFrom[0], newNodeCoords[1] - movingFrom[1]];
+        // reset position of node prior to moving it again
+        if (d.selected) {
+          this.userSelection.move([movingFrom[0] - d.coords[0], movingFrom[1] - d.coords[1]]);
+        } else {
+          d.move(movingFrom);
+        }
+      } else if (__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") instanceof SetGeometryAction) {
+        d.move(newNodeCoords);
+        // if moving a single node, we can change the node's parent,
+        // so we check whether we dropped this node on a potential parent
+        const nodesAtLocation = this.model.nodes.getAtCoordinates(event.x, event.y).filter(n => n.id !== d.id && !n.isDescendantOf(d));
+        // filter by which nodes can have this node as a child
+        const nodesAtLocationWhichCanHaveNodeAsAChild = nodesAtLocation.filter(n => n.type.childrenTypes.includes(d.type.id));
+        // filter by which nodes don't have descendants in this collection
+        const filteredNodesAtLocation = filterByOnlyDescendants(nodesAtLocationWhichCanHaveNodeAsAChild);
+        const droppedOn = filteredNodesAtLocation[filteredNodesAtLocation.length - 1];
+        if (droppedOn !== d.parent && (d.type.canBeParentless || droppedOn !== undefined)) {
+          const ancestorOfDroppedOn = droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.getLastAncestor();
+          const fromChildGeometry = __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").from;
+          const setParentAction = new SetParentAction(this, d.id, (_c = d.parent) === null || _c === void 0 ? void 0 : _c.id, droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id));
+          (_d = d.parent) === null || _d === void 0 ? void 0 : _d.removeChild(d);
+          if (droppedOn !== undefined) {
+            droppedOn.addChild(d);
+          }
+          setParentAction.toChildGeometry = d.getGeometry(d.id);
+          setParentAction.toAncestorGeometry = ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id);
+          __classPrivateFieldSet(this, _DiagramCanvas_currentAction, setParentAction, "f");
+        } else {
+          const ancestorOfNode = d === null || d === void 0 ? void 0 : d.getLastAncestor();
+          __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").ancestorId = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.id;
+          __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").fromAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
+          (_e = d.parent) === null || _e === void 0 ? void 0 : _e.fitToChild(d);
+          __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").to = d.getGeometry(d.id);
+          __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
+        }
+      }
+      if (__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f") !== undefined) {
+        __classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f").do();
+        this.actionStack.add(__classPrivateFieldGet(this, _DiagramCanvas_currentAction, "f"));
+        __classPrivateFieldSet(this, _DiagramCanvas_currentAction, undefined, "f");
+      }
+    }
+  }
+  setCursorStyle();
+  __classPrivateFieldSet(this, _DiagramCanvas_dragging, false, "f");
+}, _DiagramCanvas_startMultipleSelection = function _DiagramCanvas_startMultipleSelection(event) {
+  __classPrivateFieldSet(this, _DiagramCanvas_draggingFrom, this.getPointerLocationRelativeToCanvas(event), "f");
+  // we put the multiple selection rectangle in the diagram svg element
+  // so it's not affected by the zoom level in the diagram elements
+  __classPrivateFieldSet(this, _DiagramCanvas_multipleSelectionContainer, this.selectSVGElement().append('rect').attr('stroke', '#0E74B6').attr('fill', 'rgba(14, 116, 182, 0.06)'), "f");
+}, _DiagramCanvas_continueMultipleSelection = function _DiagramCanvas_continueMultipleSelection(event) {
+  var _b, _c, _d, _e;
+  const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+  if (__classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[0] !== pointerCoords[0] || __classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[1] !== pointerCoords[1]) {
+    setCursorStyle(CursorStyle.Crosshair);
+    // since the multiple selection rectangle is not affected by zoom,
+    // we compensate its coordinates based in the zoom transform to draw it
+    (_e = (_d = (_c = (_b = __classPrivateFieldGet(this, _DiagramCanvas_multipleSelectionContainer, "f")) === null || _b === void 0 ? void 0 : _b.attr('x', Math.min(__classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[0], pointerCoords[0]) * __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").x)) === null || _c === void 0 ? void 0 : _c.attr('y', Math.min(__classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[1], pointerCoords[1]) * __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k + __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").y)) === null || _d === void 0 ? void 0 : _d.attr('width', Math.abs(__classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[0] - pointerCoords[0]) * __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k)) === null || _e === void 0 ? void 0 : _e.attr('height', Math.abs(__classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f")[1] - pointerCoords[1]) * __classPrivateFieldGet(this, _DiagramCanvas_zoomTransform, "f").k);
+    __classPrivateFieldSet(this, _DiagramCanvas_dragging, true, "f");
+  }
+}, _DiagramCanvas_finishMultipleSelection = function _DiagramCanvas_finishMultipleSelection(event) {
+  var _b;
+  const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+  (_b = __classPrivateFieldGet(this, _DiagramCanvas_multipleSelectionContainer, "f")) === null || _b === void 0 ? void 0 : _b.remove();
+  __classPrivateFieldSet(this, _DiagramCanvas_multipleSelectionContainer, undefined, "f");
+  this.userSelection.clear();
+  for (const node of this.model.nodes) {
+    if (rectanglesIntersect([node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]], [__classPrivateFieldGet(this, _DiagramCanvas_draggingFrom, "f"), pointerCoords])) {
+      this.userSelection.add(node);
+    }
+  }
+  this.multipleSelectionOn = false;
+  this.diagramEvent$.next(new DiagramSelectionEvent(this.userSelection.all(), true));
+  setCursorStyle();
+};
+_DiagramCanvas_canvasCount = {
+  value: 0
+};
 
+var _CollabClient_instances, _CollabClient_webSocket, _CollabClient_sendQueue, _CollabClient_sessions, _CollabClient_pendingSessions, _CollabClient_onOpen, _CollabClient_onMessage, _CollabClient_onClose, _CollabClient_onError, _CollabClient_send, _CollabClient_receive, _CollabClient_startSyncing;
 const VERSION = '0.0.1';
 /**
  * The client that communicates with the daga-server over WebSockets.
@@ -10282,24 +10403,26 @@ const VERSION = '0.0.1';
  */
 class CollabClient {
   constructor(dagaServer, userId) {
-    this.sendQueue = [];
+    _CollabClient_instances.add(this);
+    _CollabClient_webSocket.set(this, void 0);
+    _CollabClient_sendQueue.set(this, []);
     /**
      * Joined sessions by locator.
      */
-    this.sessions = new Map();
+    _CollabClient_sessions.set(this, new Map());
     /**
      * Created but unacked sessions by refId.
      */
-    this.pendingSessions = new Map();
+    _CollabClient_pendingSessions.set(this, 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({
+    __classPrivateFieldSet(this, _CollabClient_webSocket, new WebSocket(this.dagaServer, 'esgrima'), "f");
+    __classPrivateFieldGet(this, _CollabClient_webSocket, "f").addEventListener('open', __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_onOpen).bind(this));
+    __classPrivateFieldGet(this, _CollabClient_webSocket, "f").addEventListener('message', __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_onMessage).bind(this));
+    __classPrivateFieldGet(this, _CollabClient_webSocket, "f").addEventListener('close', __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_onClose).bind(this));
+    __classPrivateFieldGet(this, _CollabClient_webSocket, "f").addEventListener('error', __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_onError).bind(this));
+    __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_send).call(this, {
       type: 'HELO',
       clientId: this.clientId,
       userId: this.userId,
@@ -10307,86 +10430,6 @@ class CollabClient {
       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) {
-    var _a, _b;
-    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);
-          (_a = session.joinRoomResolve) === null || _a === void 0 ? void 0 : _a.call(session);
-          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);
-          (_b = session.createRoomResolve) === null || _b === void 0 ? void 0 : _b.call(session, session.locator);
-          session.createRoomResolve = undefined;
-          // Deliver queued AddMessages now that we have a locator.
-          for (const message of session.addQueue) {
-            this.send(Object.assign(Object.assign({}, message), {
-              locator: session.locator
-            }));
-          }
-          session.addQueue = [];
-        }
-    }
-  }
   /**
    * Creates and joins a room. The given canvas becomes collaborative, starting
    * with its current model.
@@ -10401,7 +10444,7 @@ class CollabClient {
     canvas.collabEngine.isInRoom = true;
     const refId = v4();
     const initialModel = new DagaExporter().export(canvas.model, true);
-    this.send({
+    __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_send).call(this, {
       type: 'CREA',
       clientId: this.clientId,
       userId: this.userId,
@@ -10414,10 +10457,10 @@ class CollabClient {
       locator: null,
       addQueue: []
     };
-    this.pendingSessions.set(refId, session);
+    __classPrivateFieldGet(this, _CollabClient_pendingSessions, "f").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);
+    __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_startSyncing).call(this, session);
     return new Promise(resolve => {
       session.createRoomResolve = resolve;
     });
@@ -10436,7 +10479,7 @@ class CollabClient {
       throw new Error('Canvas is already in a room');
     }
     canvas.collabEngine.isInRoom = true;
-    this.send({
+    __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_send).call(this, {
       type: 'ENRO',
       clientId: this.clientId,
       userId: this.userId,
@@ -10448,36 +10491,104 @@ class CollabClient {
       locator,
       addQueue: []
     };
-    this.sessions.set(locator, session);
+    __classPrivateFieldGet(this, _CollabClient_sessions, "f").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()
-        });
-      }
-    };
-  }
 }
+_CollabClient_webSocket = new WeakMap(), _CollabClient_sendQueue = new WeakMap(), _CollabClient_sessions = new WeakMap(), _CollabClient_pendingSessions = new WeakMap(), _CollabClient_instances = new WeakSet(), _CollabClient_onOpen = function _CollabClient_onOpen() {
+  // Send queued messages.
+  for (const serialized of __classPrivateFieldGet(this, _CollabClient_sendQueue, "f")) {
+    __classPrivateFieldGet(this, _CollabClient_webSocket, "f").send(serialized);
+  }
+  __classPrivateFieldSet(this, _CollabClient_sendQueue, [], "f");
+}, _CollabClient_onMessage = function _CollabClient_onMessage(e) {
+  const serialized = e.data;
+  const message = JSON.parse(serialized);
+  __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_receive).call(this, message);
+}, _CollabClient_onClose = function _CollabClient_onClose(e) {
+  console.error('WebSocket closed', e);
+}, _CollabClient_onError = function _CollabClient_onError(e) {
+  console.error('WebSocket error', e);
+}, _CollabClient_send = function _CollabClient_send(message) {
+  const serialized = JSON.stringify(message);
+  if (__classPrivateFieldGet(this, _CollabClient_webSocket, "f").readyState === WebSocket.OPEN) {
+    __classPrivateFieldGet(this, _CollabClient_webSocket, "f").send(serialized);
+  } else {
+    // Queue until after we connect.
+    __classPrivateFieldGet(this, _CollabClient_sendQueue, "f").push(serialized);
+  }
+}, _CollabClient_receive = function _CollabClient_receive(message) {
+  var _a, _b;
+  switch (message.type) {
+    case 'EACK':
+      {
+        const session = __classPrivateFieldGet(this, _CollabClient_sessions, "f").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);
+        __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_startSyncing).call(this, session);
+        (_a = session.joinRoomResolve) === null || _a === void 0 ? void 0 : _a.call(session);
+        session.joinRoomResolve = undefined;
+        break;
+      }
+    case 'ADD':
+      {
+        const session = __classPrivateFieldGet(this, _CollabClient_sessions, "f").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 = __classPrivateFieldGet(this, _CollabClient_pendingSessions, "f").get(message.refId);
+        if (session === undefined) {
+          throw new Error(`CACK for unknown refId: "${message.refId}"`);
+        }
+        session.locator = message.locator;
+        __classPrivateFieldGet(this, _CollabClient_pendingSessions, "f").delete(message.refId);
+        __classPrivateFieldGet(this, _CollabClient_sessions, "f").set(session.locator, session);
+        (_b = session.createRoomResolve) === null || _b === void 0 ? void 0 : _b.call(session, session.locator);
+        session.createRoomResolve = undefined;
+        // Deliver queued AddMessages now that we have a locator.
+        for (const message of session.addQueue) {
+          __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_send).call(this, Object.assign(Object.assign({}, message), {
+            locator: session.locator
+          }));
+        }
+        session.addQueue = [];
+      }
+  }
+}, _CollabClient_startSyncing = function _CollabClient_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 {
+      __classPrivateFieldGet(this, _CollabClient_instances, "m", _CollabClient_send).call(this, {
+        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.
  */
@@ -10485,66 +10596,67 @@ function now() {
   return new Date().toISOString();
 }
 
+var _Grid_grid, _Grid_offsetX, _Grid_offsetY;
 /**
  * A two dimensional array of elements of the given class that can extend infinitely in any direction, both positive and negative.
  * @private
  */
 class Grid {
   constructor() {
-    this.grid = [[undefined]];
-    this.offsetX = 0;
-    this.offsetY = 0;
+    _Grid_grid.set(this, [[undefined]]);
+    _Grid_offsetX.set(this, 0);
+    _Grid_offsetY.set(this, 0);
   }
   /**
    * Get the minimum x coordinate among the elements in the grid.
    */
   minX() {
-    return -this.offsetX;
+    return -__classPrivateFieldGet(this, _Grid_offsetX, "f");
   }
   /**
    * Get the maximum x coordinate among the elements in the grid.
    */
   maxX() {
-    return this.width() - 1 - this.offsetX;
+    return this.width() - 1 - __classPrivateFieldGet(this, _Grid_offsetX, "f");
   }
   /**
    * Get the minimum y coordinate among the elements in the grid.
    */
   minY() {
-    return -this.offsetY;
+    return -__classPrivateFieldGet(this, _Grid_offsetY, "f");
   }
   /**
    * Get the maximum y coordinate among the elements in the grid.
    */
   maxY() {
-    return this.height() - 1 - this.offsetY;
+    return this.height() - 1 - __classPrivateFieldGet(this, _Grid_offsetY, "f");
   }
   /**
    * Get the total extension of the grid along the x axis.
    */
   width() {
-    return this.grid[0].length;
+    return __classPrivateFieldGet(this, _Grid_grid, "f")[0].length;
   }
   /**
    * Get the total extension of the grid along the y axis.
    */
   height() {
-    return this.grid.length;
+    return __classPrivateFieldGet(this, _Grid_grid, "f").length;
   }
   /**
    * Add a new column at the start of the x axis.
    */
   addColumnLeft() {
-    for (const row of this.grid) {
+    for (const row of __classPrivateFieldGet(this, _Grid_grid, "f")) {
       row.splice(0, 0, undefined);
     }
-    this.offsetX = this.offsetX + 1;
+    __classPrivateFieldSet(this, _Grid_offsetX, __classPrivateFieldGet(this, _Grid_offsetX, "f") + 1, "f");
   }
   /**
    * Add a new column at the end of the x axis.
    */
   addColumnRight() {
-    for (const row of this.grid) {
+    for (const row of __classPrivateFieldGet(this, _Grid_grid, "f")) {
       row.push(undefined);
     }
   }
@@ -10553,28 +10665,28 @@ class Grid {
    */
   addRowTop() {
     const newRow = [];
-    for (let i = 0; i < this.grid[0].length; ++i) {
+    for (let i = 0; i < __classPrivateFieldGet(this, _Grid_grid, "f")[0].length; ++i) {
       newRow.push(undefined);
     }
-    this.grid.splice(0, 0, newRow);
-    this.offsetY = this.offsetY + 1;
+    __classPrivateFieldGet(this, _Grid_grid, "f").splice(0, 0, newRow);
+    __classPrivateFieldSet(this, _Grid_offsetY, __classPrivateFieldGet(this, _Grid_offsetY, "f") + 1, "f");
   }
   /**
    * Add a new row at the end of the y axis.
    */
   addRowBottom() {
     const newRow = [];
-    for (let i = 0; i < this.grid[0].length; ++i) {
+    for (let i = 0; i < __classPrivateFieldGet(this, _Grid_grid, "f")[0].length; ++i) {
       newRow.push(undefined);
     }
-    this.grid.push(newRow);
+    __classPrivateFieldGet(this, _Grid_grid, "f").push(newRow);
   }
   /**
    * Get the element at the given coordinates or undefined if there is no element at the given coordinates.
    */
   get(coords) {
-    if (this.grid[coords[1] + this.offsetY]) {
-      return this.grid[coords[1] + this.offsetY][coords[0] + this.offsetX];
+    if (__classPrivateFieldGet(this, _Grid_grid, "f")[coords[1] + __classPrivateFieldGet(this, _Grid_offsetY, "f")]) {
+      return __classPrivateFieldGet(this, _Grid_grid, "f")[coords[1] + __classPrivateFieldGet(this, _Grid_offsetY, "f")][coords[0] + __classPrivateFieldGet(this, _Grid_offsetX, "f")];
     }
     return undefined;
   }
@@ -10582,19 +10694,19 @@ class Grid {
    * Set the element at the given coordinates to the given element.
    */
   set(coords, value) {
-    while (coords[0] < -this.offsetX) {
+    while (coords[0] < -__classPrivateFieldGet(this, _Grid_offsetX, "f")) {
       this.addColumnLeft();
     }
-    while (coords[0] >= this.width() - this.offsetX) {
+    while (coords[0] >= this.width() - __classPrivateFieldGet(this, _Grid_offsetX, "f")) {
       this.addColumnRight();
     }
-    while (coords[1] < -this.offsetY) {
+    while (coords[1] < -__classPrivateFieldGet(this, _Grid_offsetY, "f")) {
       this.addRowTop();
     }
-    while (coords[1] >= this.height() - this.offsetY) {
+    while (coords[1] >= this.height() - __classPrivateFieldGet(this, _Grid_offsetY, "f")) {
       this.addRowBottom();
     }
-    this.grid[coords[1] + this.offsetY][coords[0] + this.offsetX] = value;
+    __classPrivateFieldGet(this, _Grid_grid, "f")[coords[1] + __classPrivateFieldGet(this, _Grid_offsetY, "f")][coords[0] + __classPrivateFieldGet(this, _Grid_offsetX, "f")] = value;
   }
   /**
    * Get the closest coordinates to the given coordinates that are not set to an element.
@@ -10624,6 +10736,7 @@ class Grid {
     }
   }
 }
+_Grid_grid = new WeakMap(), _Grid_offsetX = new WeakMap(), _Grid_offsetY = new WeakMap();
 
 /**
  * A layout which places adjacent nodes close by, placing nodes in order according to depth first search.