@metadev/daga 4.1.0 → 4.2.1

package/index.esm.js

@@ -137,17 +137,67 @@ const translateCoordinate = (oldCoordinate, oldCoordinates, newCoordinates) => {
   return (oldCoordinate - oldCoordinates[0]) / (oldCoordinates[1] - oldCoordinates[0]) * (newCoordinates[1] - newCoordinates[0]) + newCoordinates[0];
 };
 /**
- * Moves the coordinates of the given point according to the given changes in coordinates.
+ * Moves the coordinates of the given point according to the given changes in coordinates and anchor points.
  * @public
  * @param oldPoint A point.
  * @param oldCoordsX A range of coordinates along the x axis.
  * @param oldCoordsY A range of coordinates along the y axis.
  * @param newCoordsX A range of coordinates along the x axis.
  * @param newCoordsY A range of coordinates along the y axis.
+ * @param anchorPointX The horizontal anchor point behavior.
+ * @param anchorPointY The vertical anchor point behavior.
  * @returns A new point.
  */
-const translatePoint = (oldPoint, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY) => {
-  return [translateCoordinate(oldPoint[0], oldCoordsX, newCoordsX), translateCoordinate(oldPoint[1], oldCoordsY, newCoordsY)];
+const translatePointWithAnchors = (oldPoint, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, anchorPointX, anchorPointY) => {
+  const newX = (() => {
+    switch (anchorPointX) {
+      case 'start':
+        // Always maintain the same distance from the left edge
+        return newCoordsX[0] + (oldPoint[0] - oldCoordsX[0]);
+      case 'end':
+        // Always maintain the same distance from the right edge
+        return newCoordsX[1] - (oldCoordsX[1] - oldPoint[0]);
+      case 'middle':
+        {
+          // Always maintain the same relative position from the center
+          const oldCenterX = (oldCoordsX[0] + oldCoordsX[1]) / 2;
+          const newCenterX = (newCoordsX[0] + newCoordsX[1]) / 2;
+          const oldWidth = oldCoordsX[1] - oldCoordsX[0];
+          const newWidth = newCoordsX[1] - newCoordsX[0];
+          const relativePosition = (oldPoint[0] - oldCenterX) / oldWidth;
+          return newCenterX + relativePosition * newWidth;
+        }
+      case 'floating':
+      default:
+        // Scale proportionally (original behavior)
+        return translateCoordinate(oldPoint[0], oldCoordsX, newCoordsX);
+    }
+  })();
+  const newY = (() => {
+    switch (anchorPointY) {
+      case 'start':
+        // Always maintain the same distance from the top edge
+        return newCoordsY[0] + (oldPoint[1] - oldCoordsY[0]);
+      case 'end':
+        // Always maintain the same distance from the bottom edge
+        return newCoordsY[1] - (oldCoordsY[1] - oldPoint[1]);
+      case 'middle':
+        {
+          // Always maintain the same relative position from the center
+          const oldCenterY = (oldCoordsY[0] + oldCoordsY[1]) / 2;
+          const newCenterY = (newCoordsY[0] + newCoordsY[1]) / 2;
+          const oldHeight = oldCoordsY[1] - oldCoordsY[0];
+          const newHeight = newCoordsY[1] - newCoordsY[0];
+          const relativePosition = (oldPoint[1] - oldCenterY) / oldHeight;
+          return newCenterY + relativePosition * newHeight;
+        }
+      case 'floating':
+      default:
+        // Scale proportionally (original behavior)
+        return translateCoordinate(oldPoint[1], oldCoordsY, newCoordsY);
+    }
+  })();
+  return [newX, newY];
 };
 /**
  * Calculates the euclidean distance between two points.
@@ -244,6 +294,10 @@ var ZoomEvents;
   ZoomEvents["End"] = "end";
 })(ZoomEvents || (ZoomEvents = {}));
 
+const escapeSelector = selector => {
+  return selector.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, '\\$1');
+};
+
 /**
  * An enumeration of the possible shapes of a line.
  * @public
@@ -804,7 +858,7 @@ const numberOfColumns = s => {
 };
 const numberOfRows = s => {
   var _a;
-  return ((_a = s.match(/\n/g)) === null || _a === undefined ? undefined : _a.length) || 0;
+  return ((_a = s.match(/\n/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
 };
 
 /******************************************************************************
@@ -1001,10 +1055,6 @@ class DiagramEntitySet {
   }
 }
 
-const escapeSelector = selector => {
-  return selector.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, '\\$1');
-};
-
 /**
  * Default priority value for diagram elements.
  * @private
@@ -1030,14 +1080,14 @@ class DiagramElement {
    */
   get highlighted() {
     var _a, _b;
-    return ((_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userHighlight) === null || _b === undefined ? undefined : _b.contains(this.id)) || false;
+    return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userHighlight) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
   }
   /**
    * Whether this diagram element is currently in the user selection.
    */
   get selected() {
     var _a, _b;
-    return ((_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.contains(this.id)) || false;
+    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) {
     /**
@@ -1066,7 +1116,7 @@ class DiagramElement {
    */
   select() {
     var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`[id='${escapeSelector(this.id)}']`);
+    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)}']`);
   }
 }
 class DiagramElementSet extends DiagramEntitySet {
@@ -1464,7 +1514,7 @@ class ValueSet {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getValue(key) {
     var _a;
-    const rootAttribute = (_a = this.propertySet.getProperty(key)) === null || _a === undefined ? undefined : _a.rootAttribute;
+    const rootAttribute = (_a = this.propertySet.getProperty(key)) === null || _a === void 0 ? void 0 : _a.rootAttribute;
     if (rootAttribute !== undefined && rootAttribute !== null) {
       this.values[key] = this.getRootElementValue(rootAttribute);
     }
@@ -1549,7 +1599,7 @@ class ValueSet {
     if (property && property.type === Type.Object) {
       return this.getSubValueSet(key).hasAnySetValue();
     }
-    return !empty(value) && !equals(value, property === null || property === undefined ? undefined : property.defaultValue);
+    return !empty(value) && !equals(value, property === null || property === void 0 ? void 0 : property.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -1816,20 +1866,24 @@ class DiagramConnection extends DiagramElement {
   }
   set type(type) {
     var _a, _b;
-    (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.openInPropertyEditor(undefined);
-    this._type = type;
-    if (this.valueSet) {
-      this.valueSet = new ValueSet(type.propertySet, this);
+    if (type !== this._type) {
+      this._type = type;
+      if (this.valueSet) {
+        this.valueSet = new ValueSet(type.propertySet, this);
+      }
+      (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.openInPropertyEditor(this, false);
+      this.updateInView();
     }
-    this.updateInView();
   }
   get typeString() {
     return this.type.id;
   }
   set typeString(typeString) {
-    const type = this.model.connections.types.get(typeString);
-    if (type) {
-      this.type = type;
+    if (typeString !== this.type.id) {
+      const type = this.model.connections.types.get(typeString);
+      if (type) {
+        this.type = type;
+      }
     }
   }
   /**
@@ -2005,11 +2059,11 @@ class DiagramConnection extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateConnectionsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateConnectionsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
@@ -2025,12 +2079,12 @@ class DiagramConnection extends DiagramElement {
       this.start = start;
       if (start !== undefined) {
         start.outgoingConnections.push(this);
-        this.startDirection = start === null || start === undefined ? undefined : start.direction;
-        this.startCoords = (start === null || start === undefined ? undefined : start.connectionPoint) || [0, 0];
+        this.startDirection = start === null || start === void 0 ? void 0 : start.direction;
+        this.startCoords = (start === null || start === void 0 ? void 0 : start.connectionPoint) || [0, 0];
       }
     } else {
-      this.startDirection = start === null || start === undefined ? undefined : start.direction;
-      this.startCoords = (start === null || start === undefined ? undefined : start.connectionPoint) || [0, 0];
+      this.startDirection = start === null || start === void 0 ? void 0 : start.direction;
+      this.startCoords = (start === null || start === void 0 ? void 0 : start.connectionPoint) || [0, 0];
     }
     this.updateInView();
   }
@@ -2048,12 +2102,12 @@ class DiagramConnection extends DiagramElement {
       this.end = end;
       if (end !== undefined) {
         end.incomingConnections.push(this);
-        this.endDirection = end === null || end === undefined ? undefined : end.direction;
-        this.endCoords = (end === null || end === undefined ? undefined : end.connectionPoint) || [0, 0];
+        this.endDirection = end === null || end === void 0 ? void 0 : end.direction;
+        this.endCoords = (end === null || end === void 0 ? void 0 : end.connectionPoint) || [0, 0];
       }
     } else {
-      this.endDirection = end === null || end === undefined ? undefined : end.direction;
-      this.endCoords = (end === null || end === undefined ? undefined : end.connectionPoint) || [0, 0];
+      this.endDirection = end === null || end === void 0 ? void 0 : end.direction;
+      this.endCoords = (end === null || end === void 0 ? void 0 : end.connectionPoint) || [0, 0];
     }
     this.updateInView();
   }
@@ -2064,7 +2118,7 @@ class DiagramConnection extends DiagramElement {
    */
   tighten() {
     var _a, _b;
-    if (((_a = this.start) === null || _a === undefined ? undefined : _a.rootElement) && this.end) {
+    if (((_a = this.start) === null || _a === void 0 ? void 0 : _a.rootElement) && this.end) {
       const alternativeStartPortsSortedByDistanceAscending = this.start.rootElement.ports.map(p => [p, p.distanceTo(this.end.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeStartPorts: for (const alternativeStartPort of alternativeStartPortsSortedByDistanceAscending) {
         if (alternativeStartPort === this.end) {
@@ -2098,7 +2152,7 @@ class DiagramConnection extends DiagramElement {
         }
       }
     }
-    if (((_b = this.end) === null || _b === undefined ? undefined : _b.rootElement) && this.start) {
+    if (((_b = this.end) === null || _b === void 0 ? void 0 : _b.rootElement) && this.start) {
       const alternativeEndPortsSortedByDistanceAscending = this.end.rootElement.ports.map(p => [p, p.distanceTo(this.start.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeEndPorts: for (const alternativeEndPort of alternativeEndPortsSortedByDistanceAscending) {
         if (alternativeEndPort === this.start) {
@@ -2194,8 +2248,8 @@ class DiagramConnectionSet extends DiagramElementSet {
     const connection = this.get(id, true);
     if (connection) {
       // remove from ports
-      removeIfExists(((_a = connection.start) === null || _a === undefined ? undefined : _a.outgoingConnections) || [], connection);
-      removeIfExists(((_b = connection.end) === null || _b === undefined ? undefined : _b.incomingConnections) || [], connection);
+      removeIfExists(((_a = connection.start) === null || _a === void 0 ? void 0 : _a.outgoingConnections) || [], connection);
+      removeIfExists(((_b = connection.end) === null || _b === void 0 ? void 0 : _b.incomingConnections) || [], connection);
       // remove from set of connections
       super.remove(id);
       // remove from canvas
@@ -2219,7 +2273,9 @@ const DIAGRAM_FIELD_DEFAULTS = {
   selectedColor: '#000000',
   horizontalAlign: HorizontalAlign.Center,
   verticalAlign: VerticalAlign.Center,
-  fit: false
+  orientation: Side.Top,
+  fit: false,
+  shrink: true
 };
 /**
  * A field which displays text and is part of a diagram element.
@@ -2238,17 +2294,17 @@ class DiagramField extends DiagramElement {
   }
   set text(value) {
     var _a;
-    if (value === null || value === undefined || (value === null || value === undefined ? undefined : value.trim()) === '') {
+    if (value === null || value === undefined || (value === null || value === void 0 ? void 0 : value.trim()) === '') {
       value = this.defaultText;
     }
     this._text = value;
     this.updateInView();
     if (this.fit) {
-      (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.fitFieldRootInView(this.id);
+      (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id, this.shrink);
     }
   }
-  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit) {
-    const id = `${rootElement === null || rootElement === undefined ? undefined : rootElement.id}_field`;
+  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink) {
+    const id = `${rootElement === null || rootElement === void 0 ? void 0 : rootElement.id}_field`;
     if (model.fields.get(id) !== undefined) {
       throw new Error('DiagramField for rootElement already exists');
     }
@@ -2268,21 +2324,42 @@ class DiagramField extends DiagramElement {
     this.selectedColor = selectedColor;
     this.horizontalAlign = horizontalAlign;
     this.verticalAlign = verticalAlign;
+    if (!isNaN(Number(orientation))) {
+      this.orientation = Number(orientation);
+    } else {
+      switch (orientation) {
+        case Side.Top:
+          this.orientation = 0;
+          break;
+        case Side.Right:
+          this.orientation = 90;
+          break;
+        case Side.Bottom:
+          this.orientation = 180;
+          break;
+        case Side.Left:
+          this.orientation = 270;
+          break;
+        default:
+          this.orientation = 0;
+      }
+    }
     this.defaultText = text;
     this._text = text;
     this.editable = editable;
     this.fit = fit;
+    this.shrink = shrink;
   }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateFieldsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateFieldsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Change the coordinates of this field to the given coordinates.
@@ -2295,7 +2372,7 @@ class DiagramField extends DiagramElement {
   }
   getPriority() {
     var _a;
-    return ((_a = this.rootElement) === null || _a === undefined ? undefined : _a.getPriority()) || DEFAULT_PRIORITY;
+    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
   }
 }
 class DiagramFieldSet extends DiagramElementSet {
@@ -2311,8 +2388,8 @@ class DiagramFieldSet extends DiagramElementSet {
    * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
    * @private
    */
-  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, fit) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit);
+  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink) {
+    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink);
     super.add(field);
     field.updateInView();
     // add this field to its root element
@@ -2326,7 +2403,7 @@ class DiagramFieldSet extends DiagramElementSet {
     const field = this.get(id, true);
     if (field) {
       // remove from root element
-      if (((_a = field.rootElement) === null || _a === undefined ? undefined : _a.label) !== undefined) {
+      if (((_a = field.rootElement) === null || _a === void 0 ? void 0 : _a.label) !== undefined) {
         if (field.rootElement.label === field) {
           field.rootElement.label = undefined;
         }
@@ -2339,7 +2416,7 @@ class DiagramFieldSet extends DiagramElementSet {
   }
 }
 const getBottomMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  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;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2358,7 +2435,7 @@ const getBottomMargin = config => {
   }
 };
 const getLeftMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  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;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2377,7 +2454,7 @@ const getLeftMargin = config => {
   }
 };
 const getRightMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  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;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2396,7 +2473,7 @@ const getRightMargin = config => {
   }
 };
 const getTopMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  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;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2415,7 +2492,7 @@ const getTopMargin = config => {
   }
 };
 const getBottomPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2434,7 +2511,7 @@ const getBottomPadding$1 = config => {
   }
 };
 const getLeftPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2453,7 +2530,7 @@ const getLeftPadding$1 = config => {
   }
 };
 const getRightPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2472,7 +2549,7 @@ const getRightPadding$1 = config => {
   }
 };
 const getTopPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2543,6 +2620,8 @@ class DiagramSectionType {
     this.label = options.label || null;
     this.ports = options.ports || [];
     this.priority = options.priority || DEFAULT_PRIORITY;
+    this.resizableX = options.resizableX;
+    this.resizableY = options.resizableY;
     const looks = extractLooksFromConfig(options.look || DIAGRAM_NODE_LOOK_DEFAULTS);
     this.defaultLook = looks.defaultLook;
     this.selectedLook = looks.selectedLook;
@@ -2564,7 +2643,7 @@ class DiagramSection extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
+    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -2579,15 +2658,15 @@ class DiagramSection extends DiagramElement {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     if (this.selected) {
       if (this.highlighted) {
-        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : ((_a = this.type) === null || _a === undefined ? undefined : _a.selectedAndHighlightedLook) || ((_b = this.node) === null || _b === undefined ? undefined : _b.look);
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : ((_a = this.type) === null || _a === void 0 ? void 0 : _a.selectedAndHighlightedLook) || ((_b = this.node) === null || _b === void 0 ? void 0 : _b.look);
       } else {
-        return this._selectedLook !== undefined ? this._selectedLook : ((_c = this.type) === null || _c === undefined ? undefined : _c.selectedLook) || ((_d = this.node) === null || _d === undefined ? undefined : _d.look);
+        return this._selectedLook !== undefined ? this._selectedLook : ((_c = this.type) === null || _c === void 0 ? void 0 : _c.selectedLook) || ((_d = this.node) === null || _d === void 0 ? void 0 : _d.look);
       }
     } else {
       if (this.highlighted) {
-        return this._highlightedLook !== undefined ? this._highlightedLook : ((_e = this.type) === null || _e === undefined ? undefined : _e.highlightedLook) || ((_f = this.node) === null || _f === undefined ? undefined : _f.look);
+        return this._highlightedLook !== undefined ? this._highlightedLook : ((_e = this.type) === null || _e === void 0 ? void 0 : _e.highlightedLook) || ((_f = this.node) === null || _f === void 0 ? void 0 : _f.look);
       } else {
-        return this._defaultLook !== undefined ? this._defaultLook : ((_g = this.type) === null || _g === undefined ? undefined : _g.defaultLook) || ((_h = this.node) === null || _h === undefined ? undefined : _h.look);
+        return this._defaultLook !== undefined ? this._defaultLook : ((_g = this.type) === null || _g === void 0 ? void 0 : _g.defaultLook) || ((_h = this.node) === null || _h === void 0 ? void 0 : _h.look);
       }
     }
   }
@@ -2640,11 +2719,11 @@ class DiagramSection extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateSectionsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateSectionsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
     if (this.label) {
       this.label.raise();
     }
@@ -2657,19 +2736,47 @@ class DiagramSection extends DiagramElement {
   }
   get type() {
     var _a, _b, _c, _d, _e;
-    return (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode];
+    return (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) === null || _e === void 0 ? void 0 : _e[this.indexXInNode];
   }
   getMinWidth() {
     var _a, _b, _c, _d;
-    return ((_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.minWidths) === null || _d === undefined ? undefined : _d[this.indexXInNode]) || DIAGRAM_SECTION_MIN_WIDTH;
+    return ((_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.minWidths) === null || _d === void 0 ? void 0 : _d[this.indexXInNode]) || DIAGRAM_SECTION_MIN_WIDTH;
   }
   getMinHeight() {
     var _a, _b, _c, _d;
-    return ((_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.minHeights) === null || _d === undefined ? undefined : _d[this.indexYInNode]) || DIAGRAM_SECTION_MIN_HEIGHT;
+    return ((_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.minHeights) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) || DIAGRAM_SECTION_MIN_HEIGHT;
   }
   getPriority() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode]) === null || _f === undefined ? undefined : _f.priority) || DEFAULT_PRIORITY;
+    return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) === null || _e === void 0 ? void 0 : _e[this.indexXInNode]) === null || _f === void 0 ? void 0 : _f.priority) || DEFAULT_PRIORITY;
+  }
+  /**
+   * Returns whether this section can be resized horizontally.
+   * If the section has a specific resizableX setting, it uses that.
+   * Otherwise, it inherits from the parent node's resizableX setting.
+   * @public
+   */
+  getResizableX() {
+    var _a, _b;
+    const sectionType = this.type;
+    if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableX) !== undefined) {
+      return sectionType.resizableX;
+    }
+    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) || false;
+  }
+  /**
+   * Returns whether this section can be resized vertically.
+   * If the section has a specific resizableY setting, it uses that.
+   * Otherwise, it inherits from the parent node's resizableY setting.
+   * @public
+   */
+  getResizableY() {
+    var _a, _b;
+    const sectionType = this.type;
+    if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableY) !== undefined) {
+      return sectionType.resizableY;
+    }
+    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) || false;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -2829,19 +2936,19 @@ class DiagramSection extends DiagramElement {
     const newCoordsY = [this.coords[1], this.coords[1] + this.height];
     // Move ports to match the new coords.
     for (const port of this.ports) {
-      port.move(translatePoint(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
+      port.move(translatePointWithAnchors(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, port.anchorPointX, port.anchorPointY));
     }
     // Set label's dimensions as a function of ours.
     const type = this.type;
     if (this.label) {
-      this.label.coords = [this.coords[0] + getLeftMargin(type === null || type === undefined ? undefined : type.label), this.coords[1] + getTopMargin(type === null || type === undefined ? undefined : type.label)];
-      this.label.width = this.width - getLeftMargin(type === null || type === undefined ? undefined : type.label) - getRightMargin(type === null || type === undefined ? undefined : type.label);
-      this.label.height = this.height - getTopMargin(type === null || type === undefined ? undefined : type.label) - getBottomMargin(type === null || type === undefined ? undefined : type.label);
+      this.label.coords = [this.coords[0] + getLeftMargin(type === null || type === void 0 ? void 0 : type.label), this.coords[1] + getTopMargin(type === null || type === void 0 ? void 0 : type.label)];
+      this.label.width = this.width - getLeftMargin(type === null || type === void 0 ? void 0 : type.label) - getRightMargin(type === null || type === void 0 ? void 0 : type.label);
+      this.label.height = this.height - getTopMargin(type === null || type === void 0 ? void 0 : type.label) - getBottomMargin(type === null || type === void 0 ? void 0 : type.label);
       this.label.updateInView();
     }
     // Move decorators to match the new coords.
     for (const decorator of this.decorators) {
-      decorator.move(translatePoint(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
+      decorator.move(translatePointWithAnchors(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, decorator.anchorPointX, decorator.anchorPointY));
     }
     // Update canvas.
     this.getConnections().forEach(c => c.tighten());
@@ -2870,13 +2977,13 @@ class DiagramSectionSet extends DiagramElementSet {
     node.sections.push(section);
     node.updateInView();
     // add section ports
-    const sectionPorts = (_d = (_c = (_b = (_a = node.type.sectionGrid) === null || _a === undefined ? undefined : _a.sections) === null || _b === undefined ? undefined : _b[indexYInNode]) === null || _c === undefined ? undefined : _c[indexXInNode]) === null || _d === undefined ? undefined : _d.ports;
+    const sectionPorts = (_d = (_c = (_b = (_a = node.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.sections) === null || _b === void 0 ? void 0 : _b[indexYInNode]) === null || _c === void 0 ? void 0 : _c[indexXInNode]) === null || _d === void 0 ? void 0 : _d.ports;
     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 === undefined ? undefined : portConfig.direction, `${section.id}_${i}`);
-        if ((_e = port.type) === null || _e === undefined ? undefined : _e.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === undefined ? undefined : _f.label);
+        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');
+        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);
           const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
           const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
@@ -2892,15 +2999,15 @@ class DiagramSectionSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
     // add section label
-    const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === undefined ? undefined : _g.sections) === null || _h === undefined ? undefined : _h[indexYInNode]) === null || _j === undefined ? undefined : _j[indexXInNode]) === null || _k === undefined ? undefined : _k.label;
+    const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[indexYInNode]) === null || _j === void 0 ? void 0 : _j[indexXInNode]) === null || _k === void 0 ? void 0 : _k.label;
     if (sectionLabel) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), sectionLabel);
-      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     return section;
   }
@@ -3004,7 +3111,7 @@ class DiagramNodeType {
     this.canBeParentless = values.canBeParentless;
     this.childrenTypes = values.childrenTypes;
     this.priority = values.priority;
-    this.propertySet = new PropertySet((options === null || options === undefined ? undefined : options.properties) || []);
+    this.propertySet = new PropertySet((options === null || options === void 0 ? void 0 : options.properties) || []);
   }
 }
 /**
@@ -3020,20 +3127,24 @@ class DiagramNode extends DiagramElement {
   }
   set type(type) {
     var _a, _b;
-    (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.openInPropertyEditor(undefined);
-    this._type = type;
-    if (this.valueSet) {
-      this.valueSet = new ValueSet(type.propertySet, this);
+    if (type !== this._type) {
+      this._type = type;
+      if (this.valueSet) {
+        this.valueSet = new ValueSet(type.propertySet, this);
+      }
+      (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.openInPropertyEditor(this, false);
+      this.updateInView();
     }
-    this.updateInView();
   }
   get typeString() {
     return this.type.id;
   }
   set typeString(typeString) {
-    const type = this.model.nodes.types.get(typeString);
-    if (type) {
-      this.type = type;
+    if (typeString !== this.type.id) {
+      const type = this.model.nodes.types.get(typeString);
+      if (type) {
+        this.type = type;
+      }
     }
   }
   /**
@@ -3042,7 +3153,7 @@ class DiagramNode extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
+    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -3132,11 +3243,11 @@ class DiagramNode extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateNodesInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateNodesInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
     for (const section of this.sections) {
       section.raise();
     }
@@ -3243,7 +3354,7 @@ class DiagramNode extends DiagramElement {
         if (!includeRemoved && incomingConnection.removed) {
           continue;
         }
-        const otherNode = (_a = incomingConnection.start) === null || _a === undefined ? undefined : _a.getNode();
+        const otherNode = (_a = incomingConnection.start) === null || _a === void 0 ? void 0 : _a.getNode();
         if (otherNode) {
           if (!includeRemoved && otherNode.removed) {
             continue;
@@ -3255,7 +3366,7 @@ class DiagramNode extends DiagramElement {
         if (!includeRemoved && outgoingConnection.removed) {
           continue;
         }
-        const otherNode = (_b = outgoingConnection.end) === null || _b === undefined ? undefined : _b.getNode();
+        const otherNode = (_b = outgoingConnection.end) === null || _b === void 0 ? void 0 : _b.getNode();
         if (otherNode) {
           if (!includeRemoved && otherNode.removed) {
             continue;
@@ -3274,7 +3385,7 @@ class DiagramNode extends DiagramElement {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     let node = this;
     while (node.parent !== undefined) {
-      node = node === null || node === undefined ? undefined : node.parent;
+      node = node === null || node === void 0 ? void 0 : node.parent;
     }
     return node;
   }
@@ -3333,21 +3444,42 @@ class DiagramNode extends DiagramElement {
     child.parent = undefined;
   }
   fitToChild(child) {
+    // if the node includes sections, we stretch the sections as well when fitting to a child node
+    // we assume it is most natural to stretch the last row and column of section
+    // TODO: consider being able to configure which row or column gets stretched first
+    const maxSectionIndexX = Math.max(...this.sections.map(s => s.indexXInNode));
+    const maxSectionIndexY = Math.max(...this.sections.map(s => s.indexYInNode));
     const excessLeft = this.coords[0] - child.coords[0] + this.type.leftPadding;
     if (excessLeft >= 0) {
-      this.stretch(Side.Left, excessLeft);
+      if (this.sections.length > 0) {
+        this.stretchSections(Side.Left, excessLeft, maxSectionIndexX, maxSectionIndexY);
+      } else {
+        this.stretch(Side.Left, excessLeft);
+      }
     }
     const excessTop = this.coords[1] - child.coords[1] + this.type.topPadding;
     if (excessTop >= 0) {
-      this.stretch(Side.Top, excessTop);
+      if (this.sections.length > 0) {
+        this.stretchSections(Side.Top, excessTop, maxSectionIndexX, maxSectionIndexY);
+      } else {
+        this.stretch(Side.Top, excessTop);
+      }
     }
     const excessRight = child.coords[0] + child.width - (this.coords[0] + this.width) + this.type.rightPadding;
     if (excessRight >= 0) {
-      this.stretch(Side.Right, excessRight);
+      if (this.sections.length > 0) {
+        this.stretchSections(Side.Right, excessRight, maxSectionIndexX, maxSectionIndexY);
+      } else {
+        this.stretch(Side.Right, excessRight);
+      }
     }
     const excessBottom = child.coords[1] + child.height - (this.coords[1] + this.height) + this.type.bottomPadding;
     if (excessBottom >= 0) {
-      this.stretch(Side.Bottom, excessBottom);
+      if (this.sections.length > 0) {
+        this.stretchSections(Side.Bottom, excessBottom, maxSectionIndexX, maxSectionIndexY);
+      } else {
+        this.stretch(Side.Bottom, excessBottom);
+      }
     }
     if (this.parent) {
       // ensure this node also fits inside its parent after stretching
@@ -3562,7 +3694,7 @@ class DiagramNode extends DiagramElement {
     }
     // Move ports to match the new coords.
     for (const port of this.ports) {
-      port.move(translatePoint(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
+      port.move(translatePointWithAnchors(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, port.anchorPointX, port.anchorPointY));
     }
     // Set label's dimensions as a function of ours.
     if (this.label) {
@@ -3573,7 +3705,7 @@ class DiagramNode extends DiagramElement {
     }
     // Move decorators to match the new coords.
     for (const decorator of this.decorators) {
-      decorator.move(translatePoint(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
+      decorator.move(translatePointWithAnchors(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, decorator.anchorPointX, decorator.anchorPointY));
     }
     // Update canvas.
     this.getConnections().forEach(c => c.tighten());
@@ -3585,7 +3717,7 @@ class DiagramNode extends DiagramElement {
    */
   removeSectionColumn(columnIndex) {
     var _a;
-    const margin = ((_a = this.type.sectionGrid) === null || _a === undefined ? undefined : _a.margin) || 0;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
     let columnWidth = 0;
     const sections = [...this.sections];
     for (const section of sections) {
@@ -3608,7 +3740,7 @@ class DiagramNode extends DiagramElement {
    */
   removeSectionRow(rowIndex) {
     var _a;
-    const margin = ((_a = this.type.sectionGrid) === null || _a === undefined ? undefined : _a.margin) || 0;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
     let rowHeight = 0;
     const sections = [...this.sections];
     for (const section of sections) {
@@ -3631,7 +3763,7 @@ class DiagramNode extends DiagramElement {
    */
   copySectionColumn(columnIndex) {
     var _a;
-    const margin = ((_a = this.type.sectionGrid) === null || _a === undefined ? undefined : _a.margin) || 0;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
     let columnWidth = 0;
     const sections = [...this.sections];
     for (const section of sections) {
@@ -3658,7 +3790,7 @@ class DiagramNode extends DiagramElement {
    */
   copySectionRow(rowIndex) {
     var _a;
-    const margin = ((_a = this.type.sectionGrid) === null || _a === undefined ? undefined : _a.margin) || 0;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
     let rowHeight = 0;
     const sections = [...this.sections];
     for (const section of sections) {
@@ -3724,10 +3856,10 @@ 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 === undefined ? undefined : _a[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH, ((_b = nodeType.sectionGrid.defaultHeights) === null || _b === undefined ? undefined : _b[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
-          widthAccumulator += (((_c = nodeType.sectionGrid.defaultWidths) === null || _c === undefined ? undefined : _c[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH) + (nodeType.sectionGrid.margin || 0);
+          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}`);
+          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 === undefined ? undefined : _d[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT) + (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);
       }
     }
     // add node ports
@@ -3735,9 +3867,9 @@ class DiagramNodeSet extends DiagramElementSet {
       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}`);
-        if ((_e = port.type) === null || _e === undefined ? undefined : _e.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === undefined ? undefined : _f.label);
+        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');
+        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);
           const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
           const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
@@ -3753,24 +3885,24 @@ class DiagramNodeSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
     // add node label
     if (nodeType.label) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), nodeType.label);
-      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', 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.html, `${node.id}_decorator_${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.html, `${node.id}_decorator_${i}`, decoratorConfig.anchorPointX || 'floating', decoratorConfig.anchorPointY || 'floating');
       }
     }
     node.valueSet.resetValues();
-    (_g = node.model.canvas) === null || _g === undefined ? undefined : _g.fitNodeInView(node.id);
+    (_g = node.model.canvas) === null || _g === void 0 ? void 0 : _g.fitNodeInView(node.id);
     return node;
   }
   remove(id) {
@@ -3862,7 +3994,7 @@ const filterByOnlyDescendants = nodes => {
   return nodes;
 };
 const getBottomPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -3881,7 +4013,7 @@ const getBottomPadding = config => {
   }
 };
 const getLeftPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -3900,7 +4032,7 @@ const getLeftPadding = config => {
   }
 };
 const getRightPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -3919,7 +4051,7 @@ const getRightPadding = config => {
   }
 };
 const getTopPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -4003,20 +4135,25 @@ class DiagramPort extends DiagramElement {
     return this._type;
   }
   set type(type) {
-    this._type = type;
-    this.updateInView();
+    if (type !== this._type) {
+      this._type = type;
+      this.updateInView();
+    }
   }
   get typeString() {
     var _a;
-    return (_a = this.type) === null || _a === undefined ? undefined : _a.id;
+    return (_a = this.type) === null || _a === void 0 ? void 0 : _a.id;
   }
   set typeString(typeString) {
-    if (typeString === undefined) {
-      this.type = undefined;
-    } else {
-      const type = this.model.ports.types.get(typeString);
-      if (type) {
-        this.type = type;
+    var _a;
+    if (typeString !== ((_a = this.type) === null || _a === void 0 ? void 0 : _a.id)) {
+      if (typeString === undefined) {
+        this.type = undefined;
+      } else {
+        const type = this.model.ports.types.get(typeString);
+        if (type) {
+          this.type = type;
+        }
       }
     }
   }
@@ -4025,14 +4162,14 @@ class DiagramPort extends DiagramElement {
    */
   get allowsOutgoing() {
     var _a, _b;
-    return ((_a = this.type) === null || _a === undefined ? undefined : _a.allowsOutgoing) !== undefined ? (_b = this.type) === null || _b === undefined ? undefined : _b.allowsOutgoing : true;
+    return ((_a = this.type) === null || _a === void 0 ? void 0 : _a.allowsOutgoing) !== undefined ? (_b = this.type) === null || _b === void 0 ? void 0 : _b.allowsOutgoing : true;
   }
   /**
    * Whether this port can be used as a connection end point.
    */
   get allowsIncoming() {
     var _a, _b;
-    return ((_a = this.type) === null || _a === undefined ? undefined : _a.allowsIncoming) !== undefined ? (_b = this.type) === null || _b === undefined ? undefined : _b.allowsIncoming : true;
+    return ((_a = this.type) === null || _a === void 0 ? void 0 : _a.allowsIncoming) !== undefined ? (_b = this.type) === null || _b === void 0 ? void 0 : _b.allowsIncoming : true;
   }
   /**
    * Name of this port. Alias for this port's label's text.
@@ -4040,7 +4177,7 @@ class DiagramPort extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
+    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -4055,15 +4192,15 @@ class DiagramPort extends DiagramElement {
     var _a, _b, _c, _d;
     if (this.selected) {
       if (this.highlighted) {
-        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : (_a = this.type || DIAGRAM_PORT_LOOKS) === null || _a === undefined ? undefined : _a.selectedAndHighlightedLook;
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : (_a = this.type || DIAGRAM_PORT_LOOKS) === null || _a === void 0 ? void 0 : _a.selectedAndHighlightedLook;
       } else {
-        return this._selectedLook !== undefined ? this._selectedLook : (_b = this.type || DIAGRAM_PORT_LOOKS) === null || _b === undefined ? undefined : _b.selectedLook;
+        return this._selectedLook !== undefined ? this._selectedLook : (_b = this.type || DIAGRAM_PORT_LOOKS) === null || _b === void 0 ? void 0 : _b.selectedLook;
       }
     } else {
       if (this.highlighted) {
-        return this._highlightedLook !== undefined ? this._highlightedLook : (_c = this.type || DIAGRAM_PORT_LOOKS) === null || _c === undefined ? undefined : _c.highlightedLook;
+        return this._highlightedLook !== undefined ? this._highlightedLook : (_c = this.type || DIAGRAM_PORT_LOOKS) === null || _c === void 0 ? void 0 : _c.highlightedLook;
       } else {
-        return this._defaultLook !== undefined ? this._defaultLook : (_d = this.type || DIAGRAM_PORT_LOOKS) === null || _d === undefined ? undefined : _d.defaultLook;
+        return this._defaultLook !== undefined ? this._defaultLook : (_d = this.type || DIAGRAM_PORT_LOOKS) === null || _d === void 0 ? void 0 : _d.defaultLook;
       }
     }
   }
@@ -4092,7 +4229,7 @@ class DiagramPort extends DiagramElement {
    */
   get width() {
     var _a;
-    return ((_a = this.type) === null || _a === undefined ? undefined : _a.width) || DIAGRAM_PORT_TYPE_DEFAULTS.width;
+    return ((_a = this.type) === null || _a === void 0 ? void 0 : _a.width) || DIAGRAM_PORT_TYPE_DEFAULTS.width;
   }
   /**
    * Current height of this port. Same as the width.
@@ -4101,7 +4238,7 @@ class DiagramPort extends DiagramElement {
   get height() {
     return this.width;
   }
-  constructor(model, type, rootElement, coords, connectionPoint, direction, id) {
+  constructor(model, type, rootElement, coords, connectionPoint, direction, id, anchorPointX = 'floating', anchorPointY = 'floating') {
     if (model.ports.get(id) !== undefined) {
       throw new Error(`DiagramPort with id "${id}" already exists`);
     }
@@ -4124,17 +4261,19 @@ class DiagramPort extends DiagramElement {
     this.coords = coords;
     this.connectionPoint = connectionPoint || coords;
     this.direction = direction;
+    this.anchorPointX = anchorPointX;
+    this.anchorPointY = anchorPointY;
   }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updatePortsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updatePortsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
     if (this.label) {
       this.label.raise();
     }
@@ -4176,7 +4315,7 @@ class DiagramPort extends DiagramElement {
   }
   getPriority() {
     var _a;
-    return ((_a = this.rootElement) === null || _a === undefined ? undefined : _a.getPriority()) || DEFAULT_PRIORITY;
+    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
   }
   /**
    * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
@@ -4221,8 +4360,8 @@ class DiagramPortSet extends DiagramElementSet {
    * 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) {
-    const port = new DiagramPort(this.model, type, rootElement, coords, connectionPoint, direction, id);
+  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);
     super.add(port);
     port.updateInView();
     // add this port to its root element
@@ -4307,7 +4446,7 @@ class DagaImporter {
         // add node label
         if (newNodeType.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
-          const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+          const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
           newField.text = node.label;
           newNode.label = newField;
           model.fields.add(newField);
@@ -4317,19 +4456,19 @@ class DagaImporter {
       for (const child of node.children || []) {
         const newChild = this.importNode(model, child);
         if (newChild !== undefined) {
-          (_a = newNode.children) === null || _a === undefined ? undefined : _a.push(newChild);
+          (_a = newNode.children) === null || _a === void 0 ? void 0 : _a.push(newChild);
           newChild.parent = newNode;
         }
       }
       for (const section of node.sections || []) {
         const newSection = new DiagramSection(model, newNode, section.indexXInNode, section.indexYInNode, section.coords, section.width, section.height, section.id);
-        (_b = newNode.sections) === null || _b === undefined ? undefined : _b.push(newSection);
+        (_b = newNode.sections) === null || _b === void 0 ? void 0 : _b.push(newSection);
         model.sections.add(newSection);
         if (section.label) {
           // add section label
-          if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[section.indexYInNode]) === null || _e === undefined ? undefined : _e[section.indexXInNode]) === null || _f === undefined ? undefined : _f.label) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === undefined ? undefined : _g.sections) === null || _h === undefined ? undefined : _h[section.indexYInNode]) === null || _j === undefined ? undefined : _j[section.indexXInNode]) === null || _k === undefined ? undefined : _k.label);
-            const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+          if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
+            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
+            const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
             newField.text = section.label;
             newSection.label = newField;
             model.fields.add(newField);
@@ -4344,8 +4483,8 @@ class DagaImporter {
           model.ports.add(newPort);
           if (port.label) {
             // add port label
-            if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === undefined ? undefined : newPortType.label)) {
-              const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === undefined ? undefined : newPortType.label);
+            if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === void 0 ? void 0 : newPortType.label)) {
+              const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === void 0 ? void 0 : newPortType.label);
               let labelCoords;
               switch (newPort.direction) {
                 case Side.Top:
@@ -4361,7 +4500,7 @@ class DagaImporter {
                 default:
                   labelCoords = newPort.coords;
               }
-              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
               newField.text = port.label;
               newPort.label = newField;
               model.fields.add(newField);
@@ -4391,8 +4530,8 @@ class DagaImporter {
         model.ports.add(newPort);
         if (port.label) {
           // add port label
-          if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === undefined ? undefined : newPortType.label)) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === undefined ? undefined : newPortType.label);
+          if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === void 0 ? void 0 : newPortType.label)) {
+            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === void 0 ? void 0 : newPortType.label);
             let labelCoords;
             switch (newPort.direction) {
               case Side.Top:
@@ -4408,7 +4547,7 @@ class DagaImporter {
               default:
                 labelCoords = newPort.coords;
             }
-            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
             newField.text = port.label;
             newPort.label = newField;
             model.fields.add(newField);
@@ -4492,14 +4631,16 @@ class AddNodeCollabAction {
     var _a;
     const node = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
     if (this.parentId !== undefined) {
-      (_a = this.canvas.model.nodes.get(this.parentId)) === null || _a === undefined ? undefined : _a.addChild(node);
-    }
-    if (this.values !== undefined) {
-      node.valueSet.setValues(structuredClone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
+      (_a = this.canvas.model.nodes.get(this.parentId)) === null || _a === void 0 ? void 0 : _a.addChild(node);
     }
     if (node.label) {
       node.label.text = this.label || '';
     }
+    if (this.values !== undefined) {
+      node.valueSet.setValues(structuredClone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
+    } else {
+      node.valueSet.resetValues();
+    }
   }
   serialize() {
     return {
@@ -4614,7 +4755,7 @@ class MoveCollabAction {
       const node = this.canvas.model.nodes.get(nodeId, true);
       if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
         node.move([node.coords[0] + this.delta[0], node.coords[1] + this.delta[1]]);
-        (_a = node.parent) === null || _a === undefined ? undefined : _a.fitToChild(node);
+        (_a = node.parent) === null || _a === void 0 ? void 0 : _a.fitToChild(node);
         node.geometryTimestamp = this.timestamp;
       }
     }
@@ -4649,15 +4790,15 @@ class SetGeometryCollabAction {
     if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
       node.setGeometry(this.to);
       // Re-fit the labels, in case their text has changed since `this.to` was measured.
-      if ((_a = node.label) === null || _a === undefined ? undefined : _a.fit) {
-        this.canvas.fitFieldRootInView(node.label.id);
+      if ((_a = node.label) === null || _a === void 0 ? void 0 : _a.fit) {
+        this.canvas.fitFieldRootInView(node.label.id, node.label.shrink);
       }
       for (const section of node.sections) {
-        if ((_b = section.label) === null || _b === undefined ? undefined : _b.fit) {
-          this.canvas.fitFieldRootInView(section.label.id);
+        if ((_b = section.label) === null || _b === void 0 ? void 0 : _b.fit) {
+          this.canvas.fitFieldRootInView(section.label.id, section.label.shrink);
         }
       }
-      (_c = node.parent) === null || _c === undefined ? undefined : _c.fitToChild(node);
+      (_c = node.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(node);
       node.geometryTimestamp = this.timestamp;
     }
   }
@@ -4691,9 +4832,9 @@ class SetParentCollabAction {
     const childNode = this.canvas.model.nodes.get(this.childId, true);
     const parentNode = this.parentId !== undefined ? this.canvas.model.nodes.get(this.parentId, true) : undefined;
     if (childNode && (this.parentId !== undefined ? parentNode : true) && timestampWins(this.timestamp, childNode.geometryTimestamp)) {
-      (_a = childNode.parent) === null || _a === undefined ? undefined : _a.removeChild(childNode);
+      (_a = childNode.parent) === null || _a === void 0 ? void 0 : _a.removeChild(childNode);
       childNode.setGeometry(this.childGeometry);
-      parentNode === null || parentNode === undefined ? undefined : parentNode.addChild(childNode);
+      parentNode === null || parentNode === void 0 ? void 0 : parentNode.addChild(childNode);
     }
   }
   serialize() {
@@ -4790,12 +4931,12 @@ class UpdateValuesCollabAction {
     if (this.id === undefined) {
       return this.canvas.model.valueSet;
     } else {
-      return (_a = this.canvas.model.nodes.get(this.id, true) || this.canvas.model.connections.get(this.id, true)) === null || _a === undefined ? undefined : _a.valueSet;
+      return (_a = this.canvas.model.nodes.get(this.id, true) || this.canvas.model.connections.get(this.id, true)) === null || _a === void 0 ? void 0 : _a.valueSet;
     }
   }
   do() {
     var _a;
-    (_a = this.getValueSet()) === null || _a === undefined ? undefined : _a.overwriteValuesLww(this.to, this.timestamp);
+    (_a = this.getValueSet()) === null || _a === void 0 ? void 0 : _a.overwriteValuesLww(this.to, this.timestamp);
   }
   serialize() {
     return {
@@ -5775,7 +5916,7 @@ class DiagramHighlightedEvent extends DiagramEvent {
  * @see DiagramSection
  */
 class DiagramDecorator extends DiagramElement {
-  constructor(model, rootElement, coords, width, height, priority, html, id) {
+  constructor(model, rootElement, coords, width, height, priority, html, id, anchorPointX = 'floating', anchorPointY = 'floating') {
     if (model.objects.get(id) !== undefined) {
       throw new Error(`DiagramDecorator with id "${id}" already exists`);
     }
@@ -5789,17 +5930,19 @@ class DiagramDecorator extends DiagramElement {
     this.height = height;
     this.priority = priority;
     this.html = html;
+    this.anchorPointX = anchorPointX;
+    this.anchorPointY = anchorPointY;
   }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateDecoratorsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateDecoratorsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Change the coordinates of this decorator to the given coordinates.
@@ -5834,8 +5977,8 @@ class DiagramDecoratorSet extends DiagramElementSet {
    * @param id The id of the decorator. Cannot be an empty string.
    * @returns The instanced decorator.
    */
-  new(rootElement, coords, width, height, priority, html, id) {
-    const decorator = new DiagramDecorator(this.model, rootElement, coords, width, height, priority, html, id);
+  new(rootElement, coords, width, height, priority, html, id, anchorPointX = 'floating', anchorPointY = 'floating') {
+    const decorator = new DiagramDecorator(this.model, rootElement, coords, width, height, priority, html, id, anchorPointX, anchorPointY);
     super.add(decorator);
     decorator.updateInView();
     // add this port to its root element
@@ -5884,11 +6027,11 @@ class DiagramObject extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateObjectsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateObjectsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Change the coordinates of this object to the given coordinates.
@@ -6005,7 +6148,7 @@ class DiagramModel {
    */
   clear() {
     var _a, _b;
-    (_a = this.canvas) === null || _a === undefined ? undefined : _a.cancelAllUserActions();
+    (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.cancelAllUserActions();
     this.id = undefined;
     this.name = '';
     this.description = undefined;
@@ -6020,7 +6163,7 @@ class DiagramModel {
     this.objects.clear();
     this.decorators.clear();
     this.valueSet.resetValues();
-    (_b = this.canvas) === null || _b === undefined ? undefined : _b.updateModelInView();
+    (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.updateModelInView();
   }
 }
 
@@ -6086,7 +6229,6 @@ const updateLook = selection => {
   selection.filter('.stretchable-image-look').select('image.bottom-right-image').attr('x', d => d.width - d.look.rightMargin).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.look.rightMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottomRight);
 };
 const GRID_DEFAULTS = {
-  enabled: true,
   style: 'dots',
   color: 'rgba(0, 0, 0, 0.1)',
   snap: false,
@@ -6244,7 +6386,7 @@ class DiagramContextMenu {
    */
   close() {
     var _a;
-    (_a = this.contextMenuContainer) === null || _a === undefined ? undefined : _a.remove();
+    (_a = this.contextMenuContainer) === null || _a === void 0 ? void 0 : _a.remove();
     this.contextMenuContainer = undefined;
   }
 }
@@ -6380,11 +6522,11 @@ class DagaExporter {
       for (const port of section.ports) {
         ports.push(Object.assign({
           id: port.id,
-          type: (_a = port.type) === null || _a === undefined ? undefined : _a.id,
+          type: (_a = port.type) === null || _a === void 0 ? void 0 : _a.id,
           coords: roundPoint(port.coords),
           connectionPoint: roundPoint(port.connectionPoint),
           direction: port.direction,
-          label: ((_b = port.label) === null || _b === undefined ? undefined : _b.text) || ''
+          label: ((_b = port.label) === null || _b === void 0 ? void 0 : _b.text) || ''
         }, includeCollabMeta ? {
           collabMeta: Object.assign({
             removed: port.removed,
@@ -6396,7 +6538,7 @@ class DagaExporter {
       sections.push(Object.assign({
         id: section.id,
         ports,
-        label: ((_c = section.label) === null || _c === undefined ? undefined : _c.text) || '',
+        label: ((_c = section.label) === null || _c === void 0 ? void 0 : _c.text) || '',
         indexXInNode: section.indexXInNode,
         indexYInNode: section.indexYInNode,
         coords: roundPoint(section.coords),
@@ -6414,11 +6556,11 @@ class DagaExporter {
     for (const port of node.ports) {
       ports.push(Object.assign({
         id: port.id,
-        type: (_d = port.type) === null || _d === undefined ? undefined : _d.id,
+        type: (_d = port.type) === null || _d === void 0 ? void 0 : _d.id,
         coords: roundPoint(port.coords),
         connectionPoint: roundPoint(port.connectionPoint),
         direction: port.direction,
-        label: ((_e = port.label) === null || _e === undefined ? undefined : _e.text) || ''
+        label: ((_e = port.label) === null || _e === void 0 ? void 0 : _e.text) || ''
       }, includeCollabMeta ? {
         collabMeta: Object.assign({
           removed: port.removed,
@@ -6433,7 +6575,7 @@ class DagaExporter {
       children,
       sections,
       ports,
-      label: ((_f = node.label) === null || _f === undefined ? undefined : _f.text) || '',
+      label: ((_f = node.label) === null || _f === void 0 ? void 0 : _f.text) || '',
       coords: roundPoint(node.coords),
       width: node.width,
       height: node.height,
@@ -6453,8 +6595,8 @@ class DagaExporter {
     return Object.assign({
       id: connection.id,
       type: connection.type.id,
-      start: ((_a = connection.start) === null || _a === undefined ? undefined : _a.id) || '',
-      end: ((_b = connection.end) === null || _b === undefined ? undefined : _b.id) || '',
+      start: ((_a = connection.start) === null || _a === void 0 ? void 0 : _a.id) || '',
+      end: ((_b = connection.end) === null || _b === void 0 ? void 0 : _b.id) || '',
       startLabel: connection.startLabel,
       middleLabel: connection.middleLabel,
       endLabel: connection.endLabel,
@@ -6669,19 +6811,25 @@ class DiagramUserSelection extends DiagramElementSet {
    * Opens the value set of a diagram model or a diagram element in the property editor.
    * @public
    * @param selection A diagram model or a diagram element with a value set.
+   * @param makeUpdateValuesAction Whether the method should create an UpdateValuesAction.
    * @see PropertyEditor
+   * @see UpdateValuesAction
    */
-  openInPropertyEditor(selection) {
+  openInPropertyEditor(selection, makeUpdateValuesAction = true) {
     var _a;
-    this.makeUpdateValuesAction();
-    const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === undefined ? undefined : _a.propertyEditor;
+    if (makeUpdateValuesAction) {
+      this.makeUpdateValuesAction();
+    }
+    const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === void 0 ? void 0 : _a.propertyEditor;
     if (propertyEditor === undefined) {
       return;
     }
-    const selectedValueSet = selection === null || selection === undefined ? undefined : selection.valueSet;
+    const selectedValueSet = selection === null || selection === void 0 ? void 0 : selection.valueSet;
     if (selectedValueSet) {
       this.propertyEditorSelection = selection;
-      this.propertyEditorValues = structuredClone(selectedValueSet.getValues());
+      if (makeUpdateValuesAction) {
+        this.propertyEditorValues = structuredClone(selectedValueSet.getValues());
+      }
       if (propertyEditor) {
         if (selection instanceof DiagramNode || selection instanceof DiagramConnection) {
           if (selection instanceof DiagramNode) {
@@ -6720,12 +6868,12 @@ class DiagramUserSelection extends DiagramElementSet {
     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 === undefined ? undefined : _a.valueSet.getValues())) {
+    if (equals(this.propertyEditorValues, (_a = this.propertyEditorSelection) === null || _a === void 0 ? void 0 : _a.valueSet.getValues())) {
       return;
     }
     const from = this.propertyEditorValues;
-    const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === undefined ? undefined : _b.valueSet.getValues());
-    const [fromDiff, toDiff] = diffProperties(from, to, (_c = this.propertyEditorSelection) === null || _c === undefined ? undefined : _c.valueSet);
+    const to = structuredClone((_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);
@@ -6733,6 +6881,26 @@ class DiagramUserSelection extends DiagramElementSet {
   }
 }
 
+const degreesToRadians = theta => theta * Math.PI / 180;
+/**
+ * Calculates the original size of the a rectangle that has been rotated by the given number of degrees resulting in a bounding box of the given size.
+ *
+ * @param width The width of a bounding box.
+ * @param height The height of a bounding box.
+ * @param orientation A rotation in degrees.
+ * @returns The size of the original rectangle.
+ */
+const unrotate = (width, height, orientation) => {
+  // TODO: this method fails under certain edge cases
+  // like for example, when angle is 45 degrees so sin(theta) == cos(theta)
+  const theta = degreesToRadians(orientation);
+  const orientationSine = Math.sin(theta);
+  const orientationCosine = Math.cos(theta);
+  const oldWidth = (Math.abs(width * orientationCosine) - Math.abs(height * orientationSine)) / (orientationCosine * orientationCosine - orientationSine * orientationSine);
+  const oldHeight = (Math.abs(width * orientationSine) - Math.abs(height * orientationCosine)) / (orientationSine * orientationSine - orientationCosine * orientationCosine);
+  return [oldWidth, oldHeight];
+};
+
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -6759,7 +6927,7 @@ class DiagramCanvas {
     var _a, _b;
     this._connectionType = value;
     // 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 === undefined ? undefined : _a.palette) === null || _b === undefined ? undefined : _b.refreshPalette();
+    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
   }
   /**
    * Constructs a canvas object.
@@ -6785,18 +6953,18 @@ class DiagramCanvas {
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
     this.userSelection = new DiagramUserSelection(this);
     this.userHighlight = new DiagramUserHighlight(this);
-    this.contextMenu = new DiagramContextMenu(this, (_a = config.canvas) === null || _a === undefined ? undefined : _a.contextMenu);
-    this.backgroundColor = ((_b = config.canvas) === null || _b === undefined ? undefined : _b.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_e = (_d = (_c = config.canvas) === null || _c === undefined ? undefined : _c.grid) === null || _d === undefined ? undefined : _d.style) !== null && _e !== undefined ? _e : GRID_DEFAULTS.style;
-    this.gridSize = ((_g = (_f = config.canvas) === null || _f === undefined ? undefined : _f.grid) === null || _g === undefined ? undefined : _g.enabled) === false || ((_h = config.canvas) === null || _h === undefined ? undefined : _h.grid) === undefined ? 0 : Math.abs(((_k = (_j = config.canvas) === null || _j === undefined ? undefined : _j.grid) === null || _k === undefined ? undefined : _k.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_m = (_l = config.canvas) === null || _l === undefined ? undefined : _l.grid) === null || _m === undefined ? undefined : _m.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_p = (_o = config.canvas) === null || _o === undefined ? undefined : _o.grid) === null || _p === undefined ? undefined : _p.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_r = (_q = config.canvas) === null || _q === undefined ? undefined : _q.grid) === null || _r === undefined ? undefined : _r.enabled) === false || ((_s = config.canvas) === null || _s === undefined ? undefined : _s.grid) === undefined ? false : ((_u = (_t = config.canvas) === null || _t === undefined ? undefined : _t.grid) === null || _u === undefined ? undefined : _u.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_v = config.canvas) === null || _v === undefined ? undefined : _v.zoomFactor) || 2;
-    this.panRate = ((_w = config.canvas) === null || _w === undefined ? undefined : _w.panRate) || 100;
+    this.contextMenu = new DiagramContextMenu(this, (_a = config.canvas) === null || _a === void 0 ? void 0 : _a.contextMenu);
+    this.backgroundColor = ((_b = config.canvas) === null || _b === void 0 ? void 0 : _b.backgroundColor) || '#FFFFFF';
+    this.gridStyle = (_e = (_d = (_c = config.canvas) === null || _c === void 0 ? void 0 : _c.grid) === null || _d === void 0 ? void 0 : _d.style) !== null && _e !== void 0 ? _e : GRID_DEFAULTS.style;
+    this.gridSize = ((_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.enabled) === false || ((_h = config.canvas) === null || _h === void 0 ? void 0 : _h.grid) === undefined ? 0 : Math.abs(((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.spacing) || GRID_DEFAULTS.spacing);
+    this.gridThickness = Math.abs(((_m = (_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === null || _m === void 0 ? void 0 : _m.thickness) || GRID_DEFAULTS.thickness);
+    this.gridColor = ((_p = (_o = config.canvas) === null || _o === void 0 ? void 0 : _o.grid) === null || _p === void 0 ? void 0 : _p.color) || GRID_DEFAULTS.color;
+    this.snapToGrid = ((_r = (_q = config.canvas) === null || _q === void 0 ? void 0 : _q.grid) === null || _r === void 0 ? void 0 : _r.enabled) === false || ((_s = config.canvas) === null || _s === void 0 ? void 0 : _s.grid) === undefined ? false : ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.snap) || GRID_DEFAULTS.snap;
+    this.zoomFactor = ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.zoomFactor) || 2;
+    this.panRate = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.panRate) || 100;
     this.inferConnectionType = config.inferConnectionType || false;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_x = config.canvas) === null || _x === undefined ? undefined : _x.priorityThresholds) || [];
+    this.priorityThresholds = ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -6847,7 +7015,7 @@ class DiagramCanvas {
     for (const node of this.model.nodes) {
       this.fitNodeInView(node.id);
     }
-    (_b = (_a = this.parentComponent) === null || _a === undefined ? undefined : _a.palette) === null || _b === undefined ? undefined : _b.refreshPalette();
+    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
   }
   // View methods
   initView(appendTo) {
@@ -6861,7 +7029,7 @@ class DiagramCanvas {
       var _a;
       // 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 = d3.select(this.diagramRoot).node()) === null || _a === undefined ? undefined : _a.focus();
+      (_a = d3.select(this.diagramRoot).node()) === null || _a === void 0 ? void 0 : _a.focus();
     }).on(Events.ContextMenu, event => {
       if (this.dragging) {
         event.preventDefault();
@@ -7001,6 +7169,32 @@ class DiagramCanvas {
       }
     });
     const canvasView = this.selectSVGElement().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
+    canvasView.call(this.zoomBehavior = d3.zoom().on(ZoomEvents.Zoom, event => {
+      if (event.sourceEvent) {
+        // zoom event was triggered by user
+        if (!this.canUserPerformAction(DiagramActions.Zoom)) {
+          setCursorStyle(CursorStyle.NotAllowed);
+          return;
+        }
+        if (event.sourceEvent.type === Events.Wheel && event.sourceEvent.wheelDelta !== undefined) {
+          if (event.sourceEvent.wheelDelta > 0) {
+            setCursorStyle(CursorStyle.ZoomIn);
+          }
+          if (event.sourceEvent.wheelDelta < 0) {
+            setCursorStyle(CursorStyle.ZoomOut);
+          }
+        } else if (event.sourceEvent.type === Events.MouseMove) {
+          setCursorStyle(CursorStyle.AllScroll);
+        }
+      }
+      this.zoomTransform = event.transform;
+      const transformAttribute = event.transform.toString();
+      this.selectCanvasElements().attr('transform', transformAttribute);
+      d3.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
+      this.contextMenu.close();
+    }).on(ZoomEvents.End, () => {
+      setCursorStyle();
+    }));
     canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(Events.MouseMove, event => {
       if (this.unfinishedConnection !== undefined) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
@@ -7031,60 +7225,35 @@ class DiagramCanvas {
       this.continueMultipleSelection(event);
     }).on(DragEvents.End, event => {
       this.finishMultipleSelection(event);
-    })).call(this.zoomBehavior = d3.zoom().on(ZoomEvents.Zoom, event => {
-      if (event.sourceEvent) {
-        // zoom event was triggered by user
-        if (!this.canUserPerformAction(DiagramActions.Zoom)) {
-          setCursorStyle(CursorStyle.NotAllowed);
-          return;
-        }
-        if (event.sourceEvent.type === Events.Wheel && event.sourceEvent.wheelDelta !== undefined) {
-          if (event.sourceEvent.wheelDelta > 0) {
-            setCursorStyle(CursorStyle.ZoomIn);
-          }
-          if (event.sourceEvent.wheelDelta < 0) {
-            setCursorStyle(CursorStyle.ZoomOut);
-          }
-        } else if (event.sourceEvent.type === Events.MouseMove) {
-          setCursorStyle(CursorStyle.AllScroll);
-        }
-      }
-      this.zoomTransform = event.transform;
-      const transformAttribute = event.transform.toString();
-      this.selectCanvasElements().attr('transform', transformAttribute);
-      d3.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
-      this.contextMenu.close();
-    }).on(ZoomEvents.End, () => {
-      setCursorStyle();
     }));
     initializeGrid(this, canvasView, this.backgroundPatternId);
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
   zoomBy(factor) {
     if (!isNaN(factor)) {
-      this.zoomBehavior.scaleBy(this.selectCanvasView().select('rect'), factor);
+      this.zoomBehavior.scaleBy(this.selectCanvasView(), factor);
     }
   }
   zoomTo(level) {
     if (!isNaN(level)) {
-      this.zoomBehavior.scaleTo(this.selectCanvasView().select('rect'), level);
+      this.zoomBehavior.scaleTo(this.selectCanvasView(), level);
     }
   }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
-      this.zoomBehavior.translateBy(this.selectCanvasView().select('rect'), x, y);
+      this.zoomBehavior.translateBy(this.selectCanvasView(), x, y);
     }
   }
   translateTo(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
-      this.zoomBehavior.translateTo(this.selectCanvasView().select('rect'), x, y);
+      this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
     }
   }
   center() {
     var _a;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
-      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === undefined ? undefined : _a.getBBox();
+      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
       const nonRemovedNodes = this.model.nodes.all();
       const minimumX = Math.min(...nonRemovedNodes.map(n => n.coords[0]));
       const maximumX = Math.max(...nonRemovedNodes.map(n => n.coords[0] + n.width));
@@ -7116,8 +7285,8 @@ class DiagramCanvas {
   }
   getCoordinatesOnScreen() {
     var _a;
-    const rootBoundingClientRect = (_a = this.selectSVGElement().node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
-    const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.height) || 0];
+    const rootBoundingClientRect = (_a = this.selectSVGElement().node()) === null || _a === void 0 ? void 0 : _a.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
@@ -7371,8 +7540,8 @@ class DiagramCanvas {
     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);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
-      var _a, _b, _c, _d, _e;
-      return `diagram-section${((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.resizableY) ? ' resizable-y' : ''} ${(_e = d.look) === null || _e === undefined ? undefined : _e.lookType}`;
+      var _a;
+      return `diagram-section${d.getResizableX() ? ' resizable-x' : ''}${d.getResizableY() ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -7421,7 +7590,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.startMultipleSelection(event);
       } else {
-        const node = d === null || d === undefined ? undefined : d.node;
+        const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
           this.startMovingNode(event, node);
         } else {
@@ -7432,7 +7601,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.continueMultipleSelection(event);
       } else {
-        const node = d === null || d === undefined ? undefined : d.node;
+        const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
           this.continueMovingNode(event, node);
         } else {
@@ -7443,7 +7612,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.finishMultipleSelection(event);
       } else {
-        const node = d === null || d === undefined ? undefined : d.node;
+        const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
           this.finishMovingNode(event, node);
         } else {
@@ -7454,32 +7623,27 @@ class DiagramCanvas {
     }));
     initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      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());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7493,32 +7657,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      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());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7532,32 +7691,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      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());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7571,32 +7725,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      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());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
-      var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7635,13 +7784,13 @@ class DiagramCanvas {
       if (this.unfinishedConnection) {
         const canConnectionFinishAtThisPort =
         // can start at the starting port
-        this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === undefined ? undefined : _a.getNode()) === null || _b === undefined ? undefined : _b.type) === null || _c === undefined ? undefined : _c.id) || '') && ((_d = this.unfinishedConnection.start) === null || _d === undefined ? undefined : _d.allowsOutgoing) &&
+        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) &&
         // can end at the ending port
-        this.unfinishedConnection.type.canFinishOnType(((_f = (_e = d.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '') && d.allowsIncoming ||
+        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 ||
         // can start at the ending port
-        this.unfinishedConnection.type.canStartFromType(((_h = (_g = d.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && d.allowsOutgoing &&
+        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 &&
         // can end at the starting port
-        this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = this.unfinishedConnection.start) === null || _j === undefined ? undefined : _j.getNode()) === null || _k === undefined ? undefined : _k.type) === null || _l === undefined ? undefined : _l.id) || '') && ((_m = this.unfinishedConnection.start) === null || _m === undefined ? undefined : _m.allowsIncoming);
+        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);
         if (!canConnectionFinishAtThisPort) {
           setCursorStyle(CursorStyle.NoDrop);
         }
@@ -7706,8 +7855,8 @@ class DiagramCanvas {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === undefined ? undefined : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === undefined ? undefined : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === undefined ? undefined : _c.width));
-            const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === undefined ? undefined : _d.node();
+            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
+            const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
               const unfinishedConnectionTotalLength = unfinishedConnectionGhostNode.getTotalLength();
@@ -7748,7 +7897,7 @@ class DiagramCanvas {
         this.finishMultipleSelection(event);
       } else {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
-          (_a = this.unfinishedConnectionTracer) === null || _a === undefined ? undefined : _a.remove();
+          (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.remove();
           const userHighlight = this.userHighlight.getFocus();
           if (userHighlight instanceof DiagramPort) {
             this.finishConnection(userHighlight);
@@ -7854,11 +8003,11 @@ class DiagramCanvas {
     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, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.width, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.width);
+      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.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).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.width, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.width);
+      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
     .attr('pointer-events', 'stroke').attr('stroke-width', d => `${d.look.thickness + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
@@ -7913,8 +8062,12 @@ class DiagramCanvas {
       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.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, text => {
-          d.text = text;
+        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, _text => {
+          /*
+          Empty for now
+          We should create a better function to stretch the root element as the text expands
+          Bear in mind that DiagramNode.setGeometry() calls DiagramNode.raise(), which breaks the input field
+          */
         }, text => {
           d.text = text;
           if (this.currentAction instanceof EditFieldAction) {
@@ -7978,7 +8131,7 @@ class DiagramCanvas {
       }
       this.secondaryButton = false;
     })).append('xhtml:div').style('width', '100%').style('height', '100%').style('display', 'flex').append('xhtml:p').style('box-sizing', 'border-box').style('outline', 0).style('margin', 0).style('border', 0).style('padding', 0).style('user-select', 'none').style('font-kerning', 'none').style('white-space', 'nowrap');
-    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('div').style('justify-content', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'flex-end' : 'flex-start').style('align-items', d => d.verticalAlign === VerticalAlign.Center ? 'center' : d.verticalAlign === VerticalAlign.Bottom ? 'end' : 'start').select('p').style('max-width', d => d.fit ? 'default' : '100%').style('max-height', d => d.fit ? 'default' : '100%').style('overflow', d => d.fit ? 'default' : 'hidden').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').style('font-size', d => `${d.fontSize}px`).style('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").style('font-weight', d => d.highlighted ? 600 : 400).style('color', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').html(d => d.text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
+    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('div').style('justify-content', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'flex-end' : 'flex-start').style('align-items', d => d.verticalAlign === VerticalAlign.Center ? 'center' : d.verticalAlign === VerticalAlign.Bottom ? 'end' : 'start').select('p').style('max-width', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[0]}px`).style('max-height', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[1]}px`).style('overflow', d => d.fit ? 'default' : 'clip').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').style('transform', d => `rotate(${d.orientation}deg)`).style('font-size', d => `${d.fontSize}px`).style('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").style('font-weight', d => d.highlighted ? 600 : 400).style('color', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').html(d => d.text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
   }
   updateObjectsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
@@ -8136,7 +8289,7 @@ class DiagramCanvas {
       const pathLength = pathNode.getTotalLength();
       // bind start labels
       connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.startLabel);
-      const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
+      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);
@@ -8147,7 +8300,7 @@ class DiagramCanvas {
       }
       // bind middle labels
       connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.middleLabel);
-      const middleLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _b === undefined ? undefined : _b.getBoundingClientRect();
+      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);
@@ -8158,7 +8311,7 @@ class DiagramCanvas {
       }
       // bind end labels
       connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.endLabel);
-      const endLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _c === undefined ? undefined : _c.getBoundingClientRect();
+      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);
@@ -8192,13 +8345,13 @@ class DiagramCanvas {
     }
     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 === undefined ? undefined : _a.label) + getRightMargin((_b = field.rootElement.type) === null || _b === undefined ? undefined : _b.label) - field.rootElement.width;
-      const stretchY = fieldDimensions[1] + getTopMargin((_c = field.rootElement.type) === null || _c === undefined ? undefined : _c.label) + getBottomMargin((_d = field.rootElement.type) === null || _d === undefined ? undefined : _d.label) - field.rootElement.height;
+      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;
       return stretchX <= 0 && stretchY <= 0;
     }
     return true;
   }
-  fitFieldRootInView(id, shrink) {
+  fitFieldRootInView(id, shrink = true) {
     var _a, _b, _c;
     const field = this.model.fields.get(id);
     if (!field) {
@@ -8230,7 +8383,7 @@ class DiagramCanvas {
       const fieldDimensions = this.minimumSizeOfField(field);
       let minimumFieldWidth = fieldDimensions[0];
       let minimumFieldHeight = fieldDimensions[1];
-      for (const section of ((_a = field.rootElement.node) === null || _a === undefined ? undefined : _a.sections) || []) {
+      for (const section of ((_a = field.rootElement.node) === null || _a === void 0 ? void 0 : _a.sections) || []) {
         if (section.label) {
           if (section.indexXInNode === field.rootElement.indexXInNode && section.indexYInNode !== field.rootElement.indexYInNode) {
             minimumFieldWidth = Math.max(minimumFieldWidth, this.minimumSizeOfField(section.label)[0]);
@@ -8246,8 +8399,8 @@ class DiagramCanvas {
         fieldDimensions[1] = minimumFieldHeight;
       }
       const type = field.rootElement.type;
-      let stretchX = fieldDimensions[0] + getLeftMargin(type === null || type === undefined ? undefined : type.label) + getRightMargin(type === null || type === undefined ? undefined : type.label) - field.rootElement.width;
-      let stretchY = fieldDimensions[1] + getTopMargin(type === null || type === undefined ? undefined : type.label) + getBottomMargin(type === null || type === undefined ? undefined : type.label) - field.rootElement.height;
+      let stretchX = fieldDimensions[0] + getLeftMargin(type === null || type === void 0 ? void 0 : type.label) + getRightMargin(type === null || type === void 0 ? void 0 : type.label) - field.rootElement.width;
+      let stretchY = fieldDimensions[1] + getTopMargin(type === null || type === void 0 ? void 0 : type.label) + getBottomMargin(type === null || type === void 0 ? void 0 : type.label) - field.rootElement.height;
       if (this.snapToGrid) {
         stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
         stretchY = Math.ceil(stretchY / this.gridSize) * this.gridSize;
@@ -8259,15 +8412,15 @@ class DiagramCanvas {
       if (field.rootElement.height + stretchY < (field.rootElement.getMinHeight() || 0)) {
         stretchY = (field.rootElement.getMinHeight() || 0) - field.rootElement.height;
       }
-      if (shrink !== false || stretchX > 0) {
-        (_b = field.rootElement.node) === null || _b === undefined ? undefined : _b.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      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);
       }
-      if (shrink !== false || stretchY > 0) {
-        (_c = field.rootElement.node) === null || _c === undefined ? undefined : _c.stretchSections(Side.Bottom, stretchY, 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);
       }
     }
   }
-  fitNodeInView(id) {
+  fitNodeInView(id, shrink = true) {
     var _a, _b;
     const node = this.model.nodes.get(id);
     if (!node) {
@@ -8286,10 +8439,14 @@ 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 === undefined ? undefined : _a.margin) || 0;
-      newNodeHeight += ((_b = node.type.sectionGrid) === null || _b === undefined ? undefined : _b.margin) || 0;
-      node.stretch(Side.Right, newNodeWidth - node.width);
-      node.stretch(Side.Bottom, newNodeHeight - node.height);
+      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;
+      if (shrink || newNodeWidth > node.width) {
+        node.stretch(Side.Right, newNodeWidth - node.width);
+      }
+      if (shrink || newNodeHeight > node.height) {
+        node.stretch(Side.Bottom, newNodeHeight - node.height);
+      }
     }
   }
   selectRoot() {
@@ -8308,18 +8465,18 @@ class DiagramCanvas {
   startConnection(port) {
     var _a, _b, _c, _d;
     if (port.allowsOutgoing || port.allowsIncoming) {
-      if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '') && port.allowsOutgoing || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && 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);
       } 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 === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
+            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 === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
+              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) {
@@ -8334,14 +8491,14 @@ class DiagramCanvas {
     this.userHighlight.clear();
     if (this.unfinishedConnection !== undefined) {
       if (this.unfinishedConnection.start !== port) {
-        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsIncoming) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === undefined ? undefined : _j.id, port.id);
+        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 === undefined ? undefined : _k.start) === null || _l === undefined ? undefined : _l.getNode()) === null || _m === undefined ? undefined : _m.type) === null || _o === undefined ? undefined : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === undefined ? undefined : _p.start) === null || _q === undefined ? undefined : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === undefined ? undefined : _r.type) === null || _s === undefined ? undefined : _s.id) || '') && port.allowsOutgoing) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === undefined ? undefined : _t.id);
+        } 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();
@@ -8350,18 +8507,18 @@ class DiagramCanvas {
           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 === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsIncoming;
+              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 === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsOutgoing;
+                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 === undefined ? undefined : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === undefined ? undefined : _v.id : port.id);
+              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();
@@ -8383,9 +8540,9 @@ class DiagramCanvas {
   }
   dropConnection() {
     var _a, _b, _c, _d;
-    (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.setStart(undefined);
-    (_b = this.unfinishedConnection) === null || _b === undefined ? undefined : _b.setEnd(undefined);
-    (_d = (_c = this.unfinishedConnection) === null || _c === undefined ? undefined : _c.select()) === null || _d === undefined ? undefined : _d.remove();
+    (_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;
   }
   cancelAllUserActions() {
@@ -8398,7 +8555,7 @@ class DiagramCanvas {
   canUserPerformAction(action) {
     return this.userActions[action] !== false;
   }
-  createInputField(text, coords, width, height, fontSize, fontFamily, changeCallback, finishCallback) {
+  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, 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');
@@ -8430,9 +8587,9 @@ class DiagramCanvas {
       // keep the field from shrinking below its original size
       const newWidth = Math.max(inputFieldWidth, width);
       const newHeight = Math.max(inputFieldHeight, height);
-      inputFieldContainer === null || inputFieldContainer === undefined ? undefined : inputFieldContainer.attr('width', `${newWidth}px`);
+      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('width', `${newWidth}px`);
       inputField.style('width', `${newWidth}px`);
-      inputFieldContainer === null || inputFieldContainer === undefined ? undefined : inputFieldContainer.attr('height', `${newHeight}px`);
+      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('height', `${newHeight}px`);
       inputField.style('height', `${newHeight}px`);
       if (changeCallback) {
         changeCallback(value);
@@ -8454,13 +8611,13 @@ class DiagramCanvas {
     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 === undefined ? undefined : _a.select('input')) === null || _b === undefined ? undefined : _b.on(Events.Blur, null);
-    (_c = this.inputFieldContainer) === null || _c === undefined ? undefined : _c.remove();
+    (_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;
   }
   minimumSizeOfField(field) {
     var _a, _b;
-    const pNode = (_b = (_a = field.select()) === null || _a === undefined ? undefined : _a.select('p')) === null || _b === undefined ? undefined : _b.node();
+    const pNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('p')) === null || _b === void 0 ? void 0 : _b.node();
     if (!pNode) {
       // happens when a field has been created but not updated in view yet
       return [0, 0];
@@ -8479,7 +8636,7 @@ class DiagramCanvas {
         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 === undefined ? undefined : ancestorOfNode.id, ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id), ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id));
+        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));
       }
     } else {
       setCursorStyle(CursorStyle.NotAllowed);
@@ -8532,23 +8689,23 @@ class DiagramCanvas {
           const filteredNodesAtLocation = filterByOnlyDescendants(nodesAtLocationWhichCanHaveNodeAsAChild);
           const droppedOn = filteredNodesAtLocation[filteredNodesAtLocation.length - 1];
           if (droppedOn !== d.parent && (d.type.canBeParentless || droppedOn !== undefined)) {
-            const ancestorOfDroppedOn = droppedOn === null || droppedOn === undefined ? undefined : droppedOn.getLastAncestor();
+            const ancestorOfDroppedOn = droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.getLastAncestor();
             const fromChildGeometry = this.currentAction.from;
-            const setParentAction = new SetParentAction(this, d.id, (_a = d.parent) === null || _a === undefined ? undefined : _a.id, droppedOn === null || droppedOn === undefined ? undefined : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id));
-            (_b = d.parent) === null || _b === undefined ? undefined : _b.removeChild(d);
+            const setParentAction = new SetParentAction(this, d.id, (_a = d.parent) === null || _a === void 0 ? void 0 : _a.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));
+            (_b = d.parent) === null || _b === void 0 ? void 0 : _b.removeChild(d);
             if (droppedOn !== undefined) {
               droppedOn.addChild(d);
             }
             setParentAction.toChildGeometry = d.getGeometry(d.id);
-            setParentAction.toAncestorGeometry = ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.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 === undefined ? undefined : d.getLastAncestor();
-            this.currentAction.ancestorId = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.id;
-            this.currentAction.fromAncestorGeometry = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id);
-            (_c = d.parent) === null || _c === undefined ? undefined : _c.fitToChild(d);
+            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);
+            (_c = d.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(d);
             this.currentAction.to = d.getGeometry(d.id);
-            this.currentAction.toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id);
+            this.currentAction.toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
           }
         }
         if (this.currentAction !== undefined) {
@@ -8574,14 +8731,14 @@ class DiagramCanvas {
       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 === undefined ? undefined : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]) * this.zoomTransform.k + this.zoomTransform.x)) === null || _b === undefined ? undefined : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]) * this.zoomTransform.k + this.zoomTransform.y)) === null || _c === undefined ? undefined : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]) * this.zoomTransform.k)) === null || _d === undefined ? undefined : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]) * this.zoomTransform.k);
+      (_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;
     }
   }
   finishMultipleSelection(event) {
     var _a;
     const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-    (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.remove();
+    (_a = this.multipleSelectionContainer) === null || _a === void 0 ? void 0 : _a.remove();
     this.multipleSelectionContainer = undefined;
     this.userSelection.clear();
     for (const node of this.model.nodes) {
@@ -8675,7 +8832,7 @@ class CollabClient {
           const initialModel = message.initialModel;
           new DagaImporter().import(session.canvas.model, initialModel);
           this.startSyncing(session);
-          (_a = session.joinRoomResolve) === null || _a === undefined ? undefined : _a.call(session);
+          (_a = session.joinRoomResolve) === null || _a === void 0 ? void 0 : _a.call(session);
           session.joinRoomResolve = undefined;
           break;
         }
@@ -8698,7 +8855,7 @@ class CollabClient {
           session.locator = message.locator;
           this.pendingSessions.delete(message.refId);
           this.sessions.set(session.locator, session);
-          (_b = session.createRoomResolve) === null || _b === undefined ? undefined : _b.call(session, session.locator);
+          (_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) {
@@ -8971,7 +9128,7 @@ class AdjacencyLayout {
     // place nodes according to arrangement
     const maximumWidth = Math.max(...model.nodes.map(n => n.width));
     const maximumHeight = Math.max(...model.nodes.map(n => n.height));
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
@@ -9039,7 +9196,7 @@ class BreadthAdjacencyLayout {
     // place nodes according to arrangement
     const maximumWidth = Math.max(...model.nodes.map(n => n.width));
     const maximumHeight = Math.max(...model.nodes.map(n => n.height));
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
@@ -9066,7 +9223,7 @@ class BreadthLayout {
       // nothing to arrange...
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     let nodesToBeArranged = model.nodes.filter(n => !n.parent);
     // Arrange nodes by a breadth first search
     const firstNode = nodesToBeArranged[0];
@@ -9132,8 +9289,8 @@ class ForceLayout {
       return model;
     }
     // as a starting point, we apply a simple layout
-    new BreadthLayout().apply(model);
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    new BreadthLayout(this.gapSize).apply(model);
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const coolingFactor = 0.99;
     const minimumTemperature = 1;
     const attractionFactor = 0.1;
@@ -9229,7 +9386,7 @@ class HorizontalLayout {
       // nothing to arrange...
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let widthAccumulator = 0;
@@ -9259,10 +9416,10 @@ class PriorityLayout {
     const minimumPriority = Math.min(...model.nodes.map(n => n.getPriority()));
     if (maximumPriority === minimumPriority) {
       // if there's no disparity in priorities, just use breadth layout
-      new BreadthLayout().apply(model);
+      new BreadthLayout(this.gapSize).apply(model);
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     const nodeArrangement = [];
     const nodesWithMaximumPriorityToBeArranged = model.nodes.filter(n => !n.parent).filter(n => n.getPriority() >= maximumPriority);
@@ -9369,10 +9526,10 @@ class TreeLayout {
     const minimumPriority = Math.min(...model.nodes.map(n => n.getPriority()));
     if (maximumPriority === minimumPriority) {
       // if there's no disparity in priorities, just use breadth layout
-      new BreadthLayout().apply(model);
+      new BreadthLayout(this.gapSize).apply(model);
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent).sort((n1, n2) => n2.getPriority() - n1.getPriority());
     const branches = [];
     while (nodesToBeArranged.length > 0) {
@@ -9466,7 +9623,7 @@ class VerticalLayout {
       // nothing to arrange...
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let heightAccumulator = 0;