@metadev/daga 4.2.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
@@ -1001,10 +1055,6 @@ class DiagramEntitySet {
   }
 }
 
-const escapeSelector = selector => {
-  return selector.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, '\\$1');
-};
-
 /**
  * Default priority value for diagram elements.
  * @private
@@ -1816,20 +1866,24 @@ class DiagramConnection extends DiagramElement {
   }
   set type(type) {
     var _a, _b;
-    (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _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;
+      }
     }
   }
   /**
@@ -2220,7 +2274,8 @@ const DIAGRAM_FIELD_DEFAULTS = {
   horizontalAlign: HorizontalAlign.Center,
   verticalAlign: VerticalAlign.Center,
   orientation: Side.Top,
-  fit: false
+  fit: false,
+  shrink: true
 };
 /**
  * A field which displays text and is part of a diagram element.
@@ -2245,10 +2300,10 @@ class DiagramField extends DiagramElement {
     this._text = value;
     this.updateInView();
     if (this.fit) {
-      (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _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, orientation, text, editable, fit) {
+  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');
@@ -2269,11 +2324,31 @@ class DiagramField extends DiagramElement {
     this.selectedColor = selectedColor;
     this.horizontalAlign = horizontalAlign;
     this.verticalAlign = verticalAlign;
-    this.orientation = orientation;
+    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;
@@ -2313,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, orientation, text, editable, fit) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, 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
@@ -2545,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;
@@ -2673,6 +2750,34 @@ class DiagramSection extends DiagramElement {
     var _a, _b, _c, _d, _e, _f;
     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.
    * @param coords A point in the diagram.
@@ -2831,7 +2936,7 @@ 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;
@@ -2843,7 +2948,7 @@ class DiagramSection 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());
@@ -2876,7 +2981,7 @@ class DiagramSectionSet extends DiagramElementSet {
     if (sectionPorts && sectionPorts.length > 0) {
       for (let i = 0; i < sectionPorts.length; ++i) {
         const portConfig = sectionPorts[i];
-        const port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, section, [section.coords[0] + (portConfig.coords[0] || 0), section.coords[1] + (portConfig.coords[1] || 0)], portConfig.connectionPoint !== undefined ? [section.coords[0] + (portConfig.connectionPoint[0] || 0), section.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig === null || portConfig === void 0 ? void 0 : portConfig.direction, `${section.id}_${i}`);
+        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);
@@ -2894,7 +2999,7 @@ 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.orientation, '', 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);
         }
       }
     }
@@ -2902,7 +3007,7 @@ class DiagramSectionSet extends DiagramElementSet {
     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.orientation, '', 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;
   }
@@ -3022,20 +3127,24 @@ class DiagramNode extends DiagramElement {
   }
   set type(type) {
     var _a, _b;
-    (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _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;
+      }
     }
   }
   /**
@@ -3335,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
@@ -3564,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) {
@@ -3575,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());
@@ -3737,7 +3867,7 @@ 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}`);
+        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);
@@ -3755,20 +3885,20 @@ 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.orientation, '', 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.orientation, '', 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();
@@ -4005,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 === 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;
+        }
       }
     }
   }
@@ -4103,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`);
     }
@@ -4126,6 +4261,8 @@ 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;
@@ -4223,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
@@ -4309,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.orientation, '', 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);
@@ -4331,7 +4468,7 @@ class DagaImporter {
           // add section label
           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);
+            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);
@@ -4363,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.orientation, '', 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);
@@ -4410,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.orientation, '', 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);
@@ -4654,11 +4791,11 @@ class SetGeometryCollabAction {
       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 === void 0 ? void 0 : _a.fit) {
-        this.canvas.fitFieldRootInView(node.label.id);
+        this.canvas.fitFieldRootInView(node.label.id, node.label.shrink);
       }
       for (const section of node.sections) {
         if ((_b = section.label) === null || _b === void 0 ? void 0 : _b.fit) {
-          this.canvas.fitFieldRootInView(section.label.id);
+          this.canvas.fitFieldRootInView(section.label.id, section.label.shrink);
         }
       }
       (_c = node.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(node);
@@ -5779,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`);
     }
@@ -5793,6 +5930,8 @@ 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;
@@ -5838,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
@@ -6672,11 +6811,15 @@ 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();
+    if (makeUpdateValuesAction) {
+      this.makeUpdateValuesAction();
+    }
     const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === void 0 ? void 0 : _a.propertyEditor;
     if (propertyEditor === undefined) {
       return;
@@ -6684,7 +6827,9 @@ class DiagramUserSelection extends DiagramElementSet {
     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) {
@@ -6736,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
@@ -7004,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);
@@ -7034,53 +7225,28 @@ 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() {
@@ -7374,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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.resizableY) ? ' resizable-y' : ''} ${(_e = d.look) === null || _e === void 0 ? void 0 : _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));
@@ -7457,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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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);
@@ -7496,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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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);
@@ -7535,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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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);
@@ -7574,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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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 === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _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);
@@ -7916,7 +8062,7 @@ 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, d.orientation, 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
@@ -7985,24 +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('transform', d => {
-      if (!isNaN(Number(d.orientation))) {
-        return `rotate(${d.orientation}deg)`;
-      } else {
-        switch (d.orientation) {
-          case Side.Top:
-            return 'rotate(0deg)';
-          case Side.Right:
-            return 'rotate(90deg)';
-          case Side.Bottom:
-            return 'rotate(180deg)';
-          case Side.Left:
-            return 'rotate(270deg)';
-          default:
-            return 'rotate(0deg)';
-        }
-      }
-    }).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);
@@ -8222,7 +8351,7 @@ class DiagramCanvas {
     }
     return true;
   }
-  fitFieldRootInView(id, shrink) {
+  fitFieldRootInView(id, shrink = true) {
     var _a, _b, _c;
     const field = this.model.fields.get(id);
     if (!field) {
@@ -8283,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) {
+      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) {
+      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) {
@@ -8312,8 +8441,12 @@ class DiagramCanvas {
       // add the margin that goes between the rightmost and bottommost points of the sections and the edge of the node
       newNodeWidth += ((_a = node.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
       newNodeHeight += ((_b = node.type.sectionGrid) === null || _b === void 0 ? void 0 : _b.margin) || 0;
-      node.stretch(Side.Right, newNodeWidth - node.width);
-      node.stretch(Side.Bottom, newNodeHeight - node.height);
+      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() {
@@ -9156,7 +9289,7 @@ class ForceLayout {
       return model;
     }
     // as a starting point, we apply a simple layout
-    new BreadthLayout().apply(model);
+    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;
@@ -9283,7 +9416,7 @@ 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 === void 0 ? void 0 : _a.gridSize) || 0) * 2;
@@ -9393,7 +9526,7 @@ 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 === void 0 ? void 0 : _a.gridSize) || 0) * 2;