@metadev/daga 5.0.2 → 5.0.4

package/index.esm.js

@@ -210,7 +210,7 @@ const distanceBetweenPoints = (point1, point2) => {
   return Math.pow(Math.pow(point1[0] - point2[0], 2) + Math.pow(point1[1] - point2[1], 2), 0.5);
 };
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.
@@ -1170,6 +1170,9 @@ const numberOfRows = s => {
  * @private
  */
 const clone = o => {
+  if (o === null) {
+    return o;
+  }
   if (typeof o !== 'object') {
     return o;
   }
@@ -2424,7 +2427,7 @@ class DiagramConnection extends DiagramElement {
      */
     this.endLabel = '';
     /**
-     * Points that this connection passes through.
+     * Points that this connection must pass through in its route from its start point to its end point, in order.
      * @public
      */
     this.points = [];
@@ -2442,8 +2445,10 @@ class DiagramConnection extends DiagramElement {
     (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateConnectionsInView(this.id);
   }
   raise() {
-    var _a;
+    var _a, _b, _c;
     (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
+    (_b = this.start) === null || _b === void 0 ? void 0 : _b.raise(false);
+    (_c = this.end) === null || _c === void 0 ? void 0 : _c.raise(false);
   }
   /**
    * Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
@@ -2497,11 +2502,12 @@ class DiagramConnection extends DiagramElement {
    * @public
    */
   tighten() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const allowConnectionLoops = ((_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.allowConnectionLoops) || false;
     const allowSharingPorts = ((_b = this.model.canvas) === null || _b === void 0 ? void 0 : _b.allowSharingPorts) !== false;
     const allowSharingBothPorts = ((_c = this.model.canvas) === null || _c === void 0 ? void 0 : _c.allowSharingBothPorts) || false;
-    if (((_d = this.start) === null || _d === void 0 ? void 0 : _d.rootElement) && this.end) {
+    const tightenConnectionsAcrossPortTypes = ((_d = this.model.canvas) === null || _d === void 0 ? void 0 : _d.tightenConnectionsAcrossPortTypes) || false;
+    if (((_e = this.start) === null || _e === void 0 ? void 0 : _e.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 (!allowConnectionLoops && alternativeStartPort === this.end) {
@@ -2512,6 +2518,10 @@ class DiagramConnection extends DiagramElement {
           // alternative start port not valid, it doesn't allow outgoing connections
           continue checkAlternativeStartPorts;
         }
+        if (!tightenConnectionsAcrossPortTypes && alternativeStartPort.type !== this.start.type) {
+          // alternative start port not valid, the port type is different
+          continue checkAlternativeStartPorts;
+        }
         if (!allowSharingPorts && (alternativeStartPort.incomingConnections.filter(c => !c.removed && c !== this).length > 0 || alternativeStartPort.outgoingConnections.filter(c => !c.removed && c !== this).length > 0)) {
           // alternative start port not valid, it already has other connections
           continue checkAlternativeStartPorts;
@@ -2539,7 +2549,7 @@ class DiagramConnection extends DiagramElement {
         }
       }
     }
-    if (((_e = this.end) === null || _e === void 0 ? void 0 : _e.rootElement) && this.start) {
+    if (((_f = this.end) === null || _f === void 0 ? void 0 : _f.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 (!allowConnectionLoops && alternativeEndPort === this.start) {
@@ -2550,6 +2560,10 @@ class DiagramConnection extends DiagramElement {
           // alternative end port not valid, it doesn't allow incoming connections
           continue checkAlternativeEndPorts;
         }
+        if (!tightenConnectionsAcrossPortTypes && alternativeEndPort.type !== this.end.type) {
+          // alternative end port not valid, the port type is different
+          continue checkAlternativeEndPorts;
+        }
         if (!allowSharingPorts && (alternativeEndPort.incomingConnections.filter(c => !c.removed && c !== this).length > 0 || alternativeEndPort.outgoingConnections.filter(c => !c.removed && c !== this).length > 0)) {
           // alternative end port not valid, it already has other connections
           continue checkAlternativeEndPorts;
@@ -2618,6 +2632,7 @@ class DiagramConnectionSet extends DiagramElementSet {
    * @returns The instanced connection.
    */
   new(type, start, end, id) {
+    var _a, _b;
     let connectionType;
     if (type instanceof DiagramConnectionType) {
       connectionType = type;
@@ -2632,6 +2647,8 @@ class DiagramConnectionSet extends DiagramElementSet {
     super.add(connection);
     connection.updateInView();
     connection.valueSet.resetValues();
+    (_a = connection.start) === null || _a === void 0 ? void 0 : _a.raise(false);
+    (_b = connection.end) === null || _b === void 0 ? void 0 : _b.raise(false);
     return connection;
   }
   remove(id) {
@@ -2666,6 +2683,7 @@ const DIAGRAM_FIELD_DEFAULTS = {
   horizontalAlign: HorizontalAlign.Center,
   verticalAlign: VerticalAlign.Center,
   orientation: Side.Top,
+  multiline: false,
   fit: false,
   shrink: true
 };
@@ -2695,7 +2713,7 @@ class DiagramField extends DiagramElement {
       (_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, shrink) {
+  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, 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');
@@ -2736,6 +2754,7 @@ class DiagramField extends DiagramElement {
           this.orientation = 0;
       }
     }
+    this.multiline = multiline;
     this.defaultText = text;
     this._text = text;
     this.editable = editable;
@@ -2780,8 +2799,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, shrink) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink);
+  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink) {
+    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink);
     super.add(field);
     field.updateInView();
     // add this field to its root element
@@ -2960,6 +2979,11 @@ const getTopPadding$1 = config => {
   }
 };
 
+var ResizableMode;
+(function (ResizableMode) {
+  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
+})(ResizableMode || (ResizableMode = {}));
+
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -3164,12 +3188,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableX() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableX) !== undefined) {
+      if (sectionType.resizableX === ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       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;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableX()) || false;
   }
   /**
    * Returns whether this section can be resized vertically.
@@ -3178,12 +3205,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableY() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableY) !== undefined) {
+      if (sectionType.resizableY === ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       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;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableY()) || false;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -3409,7 +3439,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, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
@@ -3417,7 +3447,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, labelConfiguration.shrink);
+      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.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     return section;
   }
@@ -3694,6 +3724,28 @@ class DiagramNode extends DiagramElement {
   getPriority() {
     return this.type.priority;
   }
+  /**
+   * Returns whether this node can be resized horizontally.
+   * @public
+   */
+  getResizableX() {
+    const resizableX = this.type.resizableX;
+    if (resizableX === ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableX;
+  }
+  /**
+   * Returns whether this node can be resized vertically.
+   * @public
+   */
+  getResizableY() {
+    const resizableY = this.type.resizableY;
+    if (resizableY === ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableY;
+  }
   /**
    * Get the port of this node which is closest to the given coordinates.
    * @param coords A point in the diagram.
@@ -4315,14 +4367,14 @@ 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, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', 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, labelConfiguration.shrink);
+      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.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     // add node decorators
     if (nodeType.decorators.length > 0) {
@@ -4716,17 +4768,19 @@ class DiagramPort extends DiagramElement {
     var _a;
     (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updatePortsInView(this.id);
   }
-  raise() {
+  raise(raiseConnections = true) {
     var _a;
     (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
     if (this.label) {
       this.label.raise();
     }
-    for (const connection of this.incomingConnections) {
-      connection.raise();
-    }
-    for (const connection of this.outgoingConnections) {
-      connection.raise();
+    if (raiseConnections) {
+      for (const connection of this.incomingConnections) {
+        connection.raise();
+      }
+      for (const connection of this.outgoingConnections) {
+        connection.raise();
+      }
     }
   }
   /**
@@ -4880,23 +4934,21 @@ class DagaImporter {
       model.nodes.add(newNode);
       newNode.width = node.width;
       newNode.height = node.height;
-      if (node.label) {
-        // add node decorators
-        if (newNodeType.decorators) {
-          for (let i = 0; i < newNodeType.decorators.length; ++i) {
-            const decoratorConfig = newNodeType.decorators[i];
-            model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
-          }
-        }
-        // 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, labelConfiguration.shrink);
-          newField.text = node.label;
-          newNode.label = newField;
-          model.fields.add(newField);
-          newField.updateInView();
-        }
+      // add node decorators
+      if (newNodeType.decorators) {
+        for (let i = 0; i < newNodeType.decorators.length; ++i) {
+          const decoratorConfig = newNodeType.decorators[i];
+          model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
+        }
+      }
+      // 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.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+        newField.text = node.label;
+        newNode.label = newField;
+        model.fields.add(newField);
+        newField.updateInView();
       }
       for (const child of node.children || []) {
         const newChild = this.importNode(model, child);
@@ -4909,16 +4961,14 @@ class DagaImporter {
         const newSection = new DiagramSection(model, newNode, section.indexXInNode, section.indexYInNode, section.coords, section.width, section.height, section.id);
         (_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 === 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);
-            newField.updateInView();
-          }
+        // 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.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          newField.text = section.label;
+          newSection.label = newField;
+          model.fields.add(newField);
+          newField.updateInView();
         }
         let portCounter = 0;
         for (const port of section.ports || []) {
@@ -4945,7 +4995,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, labelConfiguration.shrink);
+              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.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
               newField.text = port.label;
               newPort.label = newField;
               model.fields.add(newField);
@@ -4992,7 +5042,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, labelConfiguration.shrink);
+            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.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
             newField.text = port.label;
             newPort.label = newField;
             model.fields.add(newField);
@@ -6289,6 +6339,7 @@ var DiagramEvents;
   DiagramEvents[DiagramEvents["SecondaryClick"] = 2] = "SecondaryClick";
   DiagramEvents[DiagramEvents["Selection"] = 3] = "Selection";
   DiagramEvents[DiagramEvents["Highlight"] = 4] = "Highlight";
+  DiagramEvents[DiagramEvents["DraggingNode"] = 5] = "DraggingNode";
 })(DiagramEvents || (DiagramEvents = {}));
 /**
  * Diagram event which consists of the user zooming or panning.
@@ -6372,6 +6423,20 @@ class DiagramHighlightedEvent extends DiagramEvent {
     this.target = target;
   }
 }
+/**
+ * Diagram event which consists of the user dragging a diagram node.
+ */
+class DiagramDraggingNodeEvent extends DiagramEvent {
+  /**
+   * Create a diagram dragging node event.
+   *
+   * @param target Diagram node which is targeted by the event.
+   */
+  constructor(target) {
+    super(DiagramEvents.DraggingNode);
+    this.target = target;
+  }
+}
 
 /**
  * A foreign object which is inserted with arbitrary html into a diagram.
@@ -6648,8 +6713,8 @@ const isSecondaryButton = event => {
  * @private
  * @see linePath
  */
-const getConnectionPath = (shape, startCoords, endCoords, startDirection, endDirection, width, startMarkerWidth, endMarkerWidth) => {
-  return linePath(shape, [startCoords, endCoords], startDirection, endDirection, Math.max(
+const getConnectionPath = (shape, startCoords, endCoords, startDirection, endDirection, points, width, startMarkerWidth, endMarkerWidth) => {
+  return linePath(shape, [startCoords, ...points, endCoords], startDirection, endDirection, Math.max(
   // reasonable value for the minimumDistanceBeforeTurn relative to the line width
   10, startMarkerWidth || 0, endMarkerWidth || 0) * width);
 };
@@ -6669,6 +6734,34 @@ const getRelatedNodeOrItself = element => {
   }
   return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
 };
+const needsResizerX = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableX !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableX !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerX(element.node);
+    }
+  }
+  return false;
+};
+const needsResizerY = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableY !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableY !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerY(element.node);
+    }
+  }
+  return false;
+};
 const initializeLook = selection => {
   selection.filter('.shaped-look').append('path');
   selection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
@@ -7143,10 +7236,10 @@ class DiagramUserSelection extends DiagramElementSet {
   constructor(canvas, diagramPropertiesText) {
     super();
     this.canvas = canvas;
+    // TODO: would be a good idea to be able to configure how often this fires, or whether at all
     this.canvas.propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
-    //console.log(diagramPropertiesText);
     this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
@@ -7378,26 +7471,6 @@ 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
@@ -7432,7 +7505,7 @@ class DiagramCanvas {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(parentComponent, config) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
     this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
     this.zoomTransform = d3.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -7460,12 +7533,13 @@ class DiagramCanvas {
     this.panRate = ((_z = config.canvas) === null || _z === void 0 ? void 0 : _z.panRate) || 100;
     this.inferConnectionType = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.inferConnectionType) || false;
     this.autoTightenConnections = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.autoTighten) !== false;
-    this.allowConnectionLoops = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.allowLoops) || false;
-    this.allowSharingPorts = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.sharePorts) !== false;
-    this.allowSharingBothPorts = ((_4 = config.connectionSettings) === null || _4 === void 0 ? void 0 : _4.shareBothPorts) || false;
-    this.portHighlightRadius = ((_5 = config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.portHighlightRadius) || 100;
+    this.tightenConnectionsAcrossPortTypes = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.tightenAcrossPortTypes) || false;
+    this.allowConnectionLoops = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.allowLoops) || false;
+    this.allowSharingPorts = ((_4 = config.connectionSettings) === null || _4 === void 0 ? void 0 : _4.sharePorts) !== false;
+    this.allowSharingBothPorts = ((_5 = config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.shareBothPorts) || false;
+    this.portHighlightRadius = ((_6 = config.connectionSettings) === null || _6 === void 0 ? void 0 : _6.portHighlightRadius) || 100;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_6 = config.canvas) === null || _6 === void 0 ? void 0 : _6.priorityThresholds) || [];
+    this.priorityThresholds = ((_7 = config.canvas) === null || _7 === void 0 ? void 0 : _7.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7492,7 +7566,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = ((_7 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _7 === void 0 ? void 0 : _7.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
+      this._connectionType = ((_8 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _8 === void 0 ? void 0 : _8.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
     }
   }
   addValidator(validator) {
@@ -7748,7 +7822,14 @@ class DiagramCanvas {
     }
   }
   getViewCoordinates() {
-    return [this.zoomTransform.x, this.zoomTransform.y];
+    var _a, _b, _c;
+    const canvasViewBoundingBox = (_c = (_b = (_a = this.selectCanvasView()) === null || _a === void 0 ? void 0 : _a.select('rect')) === null || _b === void 0 ? void 0 : _b.node()) === null || _c === void 0 ? void 0 : _c.getBBox();
+    /*
+    transform the coordinates of the zoomTransform to the coordinates
+    needed to point the zoomTransfrom to the center of the screen to
+    ensure that canvas.translateTo(getViewCoordinates()) has no effect
+    */
+    return [((canvasViewBoundingBox.width + canvasViewBoundingBox.x) / 2 - this.zoomTransform.x) / this.zoomTransform.k, ((canvasViewBoundingBox.height + canvasViewBoundingBox.y) / 2 - this.zoomTransform.y) / this.zoomTransform.k];
   }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
@@ -7760,12 +7841,42 @@ class DiagramCanvas {
       this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
     }
   }
-  center() {
+  zoomAndPanTo(x, y, z, duration) {
+    if (!duration || duration <= 0) {
+      this.zoomBehavior.scaleTo(this.selectCanvasView(), z);
+      this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
+      return;
+    }
+    this.zoomBehavior.interpolate(d3.interpolate);
+    const [startingX, startingY] = this.getViewCoordinates();
+    const startingZoom = this.getZoomLevel();
+    const targetX = x,
+      targetY = y,
+      targetZoom = z;
+    this.selectCanvasElements().transition().duration(duration).ease(d3.easeCubicInOut).tween('progress', () => {
+      let animationInterrupted = false;
+      return value => {
+        try {
+          if (!animationInterrupted) {
+            const currentX = value * (targetX - startingX) + startingX;
+            const currentY = value * (targetY - startingY) + startingY;
+            const currentZoom = value * (targetZoom - startingZoom) + startingZoom;
+            this.zoomBehavior.scaleTo(this.selectCanvasView(), currentZoom);
+            this.zoomBehavior.translateTo(this.selectCanvasView(), currentX, currentY);
+          }
+        } catch (e) {
+          console.warn('Animation has been interrupted');
+          animationInterrupted = true;
+        }
+      };
+    });
+  }
+  center(nodeIds, maxZoomLevel, duration) {
     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 === void 0 ? void 0 : _a.getBBox();
-      const nonRemovedNodes = this.model.nodes.all();
+      const nonRemovedNodes = (nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.map(i => this.model.nodes.get(i)).filter(n => !!n)) || 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));
       const averageX = (minimumX + maximumX) / 2;
@@ -7780,12 +7891,12 @@ class DiagramCanvas {
        * (windowRangeX / rangeX) is the zoom level to fit everything horizontally
        * (windowRangeY / rangeY) is the zoom level to fit everything vertically
        * the minimum between them is the zoom to fit everything in the screen both horizontally and vertically
-       * we also add 1 to the list so that if the zoom exceeds 1 it is set to 1
+       * we also add maxZoomLevel to the list so that if the zoom exceeds maxZoomLevel it is set to maxZoomLevel
+       * or 1 if maxZoomLevel is undefined
        * a zoom bigger than 1 means zooming in instead of out, and we don't want to zoom in if it's not necessary
        */
-      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, 1);
-      this.translateTo(averageX, averageY);
-      this.zoomTo(zoom);
+      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, maxZoomLevel !== undefined ? maxZoomLevel : 1);
+      this.zoomAndPanTo(averageX, averageY, zoom, duration);
     }
   }
   getClosestGridPoint(point) {
@@ -7841,7 +7952,7 @@ class DiagramCanvas {
   updateNodesInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${d.type.resizableX ? ' resizable-x' : ''}${d.type.resizableY ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -7904,28 +8015,28 @@ class DiagramCanvas {
       this.secondaryButton = false;
     }));
     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) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -7940,28 +8051,28 @@ 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) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -7976,28 +8087,28 @@ 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) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
@@ -8012,28 +8123,28 @@ 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) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           if (this.snapToGrid) {
@@ -8052,17 +8163,17 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updateSectionsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
       var _a;
-      return `diagram-section${d.getResizableX() ? ' resizable-x' : ''}${d.getResizableY() ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
+      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' 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));
@@ -8143,7 +8254,7 @@ class DiagramCanvas {
       this.secondaryButton = false;
     }));
     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) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
@@ -8177,7 +8288,7 @@ 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) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
@@ -8211,7 +8322,7 @@ 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) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
@@ -8245,7 +8356,7 @@ 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) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
@@ -8281,10 +8392,10 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updatePortsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
@@ -8369,14 +8480,14 @@ class DiagramCanvas {
         }
       }
     }).on(DragEvents.Drag, (event, d) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e;
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.continueMultipleSelection(event);
       } else {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.type.defaultStartMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.type.defaultEndMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
+            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.points, this.unfinishedConnection.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.type.defaultStartMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.type.defaultEndMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
             const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
@@ -8391,6 +8502,7 @@ class DiagramCanvas {
               this.unfinishedConnection.endCoords = endCoords;
             }
             this.updateConnectionsInView(UNFINISHED_CONNECTION_ID);
+            (_e = this.unfinishedConnectionPort) === null || _e === void 0 ? void 0 : _e.raise(false);
             // highlight closest target port
             if (this.model.ports.length > 0) {
               const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
@@ -8524,29 +8636,29 @@ 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 || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
-    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
-    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${(d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
+    .attr('pointer-events', 'stroke').attr('stroke-width', d => (d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.data().forEach(connection => {
       this.updateConnectionLabelsInView(connection);
       this.updateConnectionMarkersInView(connection);
     });
   }
   updateFieldsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-field').data(this.model.fields.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-field').data(this.model.fields.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-field');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-field');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
-    enterSelection.style('box-sizing', 'border-box').on(Events.MouseOver, (_event, d) => {
+    enterSelection.on(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
@@ -8583,22 +8695,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)
-          /*
-          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) {
-            this.currentAction.to = text;
-            this.currentAction.do();
-            this.actionStack.add(this.currentAction);
-            this.currentAction = undefined;
-          }
-        });
+        this.openTextInput(d.id);
       }
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -8652,18 +8749,25 @@ 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' : `${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/>'));
+    }));
+    enterSelection.append('text');
+    enterSelection.append('rect');
+    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]}) rotate(${d.orientation} ${d.width / 2} ${d.height / 2})`).attr('opacity', d => d.removed ? 0.5 : 1).select('text').attr('x', d => d.horizontalAlign === HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === HorizontalAlign.Center ? 'middle' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === VerticalAlign.Center ? d.height / 2 : d.verticalAlign === VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === VerticalAlign.Center ? 'middle' : d.verticalAlign === VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.fontSize).attr('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").attr('font-weight', d => d.highlighted ? 600 : 400).attr('fill', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').each(d => {
+      this.setFieldTextAndWrap(d);
+    });
+    mergeSelection
+    // add a transparent rectangle to capture pointer events on the text
+    .select('rect').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('fill', 'transparent');
   }
   updateObjectsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-object');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-object');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
     enterSelection.on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
@@ -8699,14 +8803,14 @@ class DiagramCanvas {
     }));
   }
   updateDecoratorsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-decorator');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-decorator');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
@@ -8885,10 +8989,10 @@ class DiagramCanvas {
             pathStartLabelPoint = pathNode.getPointAtLength(getLeftMargin(labelConfiguration) + boundingWidth / 2);
             break;
           case Side.Top:
-            pathStartLabelPoint = pathNode.getPointAtLength(getBottomMargin(labelConfiguration) + boundingWidth / 2);
+            pathStartLabelPoint = pathNode.getPointAtLength(getBottomMargin(labelConfiguration) + boundingHeight / 2);
             break;
           case Side.Bottom:
-            pathStartLabelPoint = pathNode.getPointAtLength(getTopMargin(labelConfiguration) + boundingWidth / 2);
+            pathStartLabelPoint = pathNode.getPointAtLength(getTopMargin(labelConfiguration) + boundingHeight / 2);
             break;
           default:
             pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
@@ -8923,10 +9027,10 @@ class DiagramCanvas {
             pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getLeftMargin(labelConfiguration) + boundingWidth / 2));
             break;
           case Side.Top:
-            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getBottomMargin(labelConfiguration) + boundingWidth / 2));
+            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getBottomMargin(labelConfiguration) + boundingHeight / 2));
             break;
           case Side.Bottom:
-            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getTopMargin(labelConfiguration) + boundingWidth / 2));
+            pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getTopMargin(labelConfiguration) + boundingHeight / 2));
             break;
           default:
             pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
@@ -9081,6 +9185,7 @@ class DiagramCanvas {
     if (port.allowsOutgoing || port.allowsIncoming) {
       if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '') && port.allowsOutgoing || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && port.allowsIncoming)) {
         this.unfinishedConnection = new DiagramConnection(this.model, this.connectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+        this.unfinishedConnectionPort = port;
       } else {
         if (this.inferConnectionType) {
           let differentConnectionType = this.model.connections.types.all().find(t => {
@@ -9095,6 +9200,7 @@ class DiagramCanvas {
           }
           if (differentConnectionType !== undefined) {
             this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+            this.unfinishedConnectionPort = port;
           }
         }
       }
@@ -9168,6 +9274,7 @@ class DiagramCanvas {
     (_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.setEnd(undefined);
     (_d = (_c = this.unfinishedConnection) === null || _c === void 0 ? void 0 : _c.select()) === null || _d === void 0 ? void 0 : _d.remove();
     this.unfinishedConnection = undefined;
+    this.unfinishedConnectionPort = undefined;
   }
   cancelAllUserActions() {
     this.currentAction = undefined;
@@ -9179,7 +9286,28 @@ class DiagramCanvas {
   canUserPerformAction(action) {
     return this.userActions[action] !== false;
   }
-  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, changeCallback, finishCallback) {
+  openTextInput(id) {
+    const field = this.model.fields.get(id);
+    if (field) {
+      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, field.multiline, () => {
+        // (_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 => {
+        field.text = text;
+        if (this.currentAction instanceof EditFieldAction) {
+          this.currentAction.to = text;
+          this.currentAction.do();
+          this.actionStack.add(this.currentAction);
+          this.currentAction = undefined;
+        }
+      });
+    }
+  }
+  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, multiline, changeCallback, finishCallback) {
     // if we have a text input open, close it before creating a new one
     this.removeInputField();
     const inputFieldContainer = this.selectCanvasElements().append('foreignObject').attr('x', `${coords[0]}px`).attr('y', `${coords[1]}px`).attr('width', `${width}px`).attr('height', `${height}px`).style('box-sizing', 'border-box').style('border', '1px solid');
@@ -9189,16 +9317,16 @@ class DiagramCanvas {
     let inputFieldHeight;
     inputField.text(text).style('box-sizing', 'border-box').style('width', `${width}px`).style('height', `${height}px`).style('font-size', `${fontSize}px`).style('font-family', fontFamily).style('resize', 'none').style('outline', 0).style('border', 0).style('margin', 0).style('padding', 0).on(Events.KeyDown, event => {
       event.stopPropagation();
-    }).on(Events.KeyUp, event => {
-      event.stopPropagation();
-      if (event.key === Keys.Escape) {
-        const value = inputField.property('value');
+      if (event.key === Keys.Escape || event.key === Keys.Enter && !multiline) {
+        const value = inputField.property('value') || '';
         this.removeInputField();
         if (finishCallback) {
           finishCallback(value);
         }
       }
-    }).on(Events.Input, () => {
+    }).on(Events.KeyUp, event => {
+      event.stopPropagation();
+    }).on(Events.Input, event => {
       const value = inputField.property('value');
       inputField.attr('cols', numberOfColumns(value) + 1);
       inputField.attr('rows', numberOfRows(value) + 1);
@@ -9241,13 +9369,54 @@ class DiagramCanvas {
   }
   minimumSizeOfField(field) {
     var _a, _b;
-    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) {
+    const textNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text')) === null || _b === void 0 ? void 0 : _b.node();
+    if (!textNode) {
       // happens when a field has been created but not updated in view yet
       return [0, 0];
     }
-    const pBoundingBox = pNode.getBoundingClientRect();
-    return [pBoundingBox.width / this.zoomTransform.k, pBoundingBox.height / this.zoomTransform.k];
+    const textBoundingBox = textNode.getBoundingClientRect();
+    return [textBoundingBox.width / this.zoomTransform.k, textBoundingBox.height / this.zoomTransform.k];
+  }
+  setFieldTextAndWrap(field) {
+    var _a, _b, _c, _d;
+    const textSelection = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text');
+    const textNode = textSelection === null || textSelection === void 0 ? void 0 : textSelection.node();
+    if (textSelection && textNode) {
+      this.setFieldText(field, textSelection, field.text);
+    } else {
+      // can happen if a field has been created but not updated in view yet
+      // not sure if this still happens but should check just in case
+      return;
+    }
+    if (field.fit) {
+      // no need to wrap
+      return;
+    }
+    let minimumSize = this.minimumSizeOfField(field);
+    while (minimumSize[0] > field.width || minimumSize[1] > field.height) {
+      const textString = ((_d = (_c = (_b = textSelection === null || textSelection === void 0 ? void 0 : textSelection.html()) === null || _b === void 0 ? void 0 : _b.replace(/<\/tspan>/g, '\n')) === null || _c === void 0 ? void 0 : _c.replace(/<tspan[^>]*>/g, '')) === null || _d === void 0 ? void 0 : _d.slice(0, -1)) || '';
+      let newTextString = '...';
+      if (textString.endsWith('...')) {
+        newTextString = textString.slice(0, -4) + '...';
+      } else {
+        newTextString = textString.slice(0, -1) + '...';
+      }
+      if (textSelection) {
+        this.setFieldText(field, textSelection, newTextString);
+      }
+      if (newTextString === '...') {
+        // if no more characters can be removed and the new text is a bare ellipsis, stop the execution
+        return;
+      }
+      minimumSize = this.minimumSizeOfField(field);
+    }
+  }
+  setFieldText(field, textSelection, text) {
+    const lines = text.split('\n');
+    textSelection.html('');
+    for (let i = 0; i < lines.length; ++i) {
+      textSelection.append('tspan').attr('x', field.horizontalAlign === HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * field.fontSize + field.height / 2 : field.verticalAlign === VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * field.fontSize : i * field.fontSize).text(lines[i]);
+    }
   }
   /**
    * Method to call to start the moving of a node triggered by a user drag event.
@@ -9279,6 +9448,7 @@ class DiagramCanvas {
       }
       this.userHighlight.clear();
       this.dragging = true;
+      this.diagramEvent$.next(new DiagramDraggingNodeEvent(d));
     }
   }
   /**
@@ -10284,4 +10454,4 @@ const getLocationsOfNodes = model => {
   return locations;
 };
 
-export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, DiagramUserHighlight, DiagramUserSelection, DiagramZoomEvent, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramDraggingNodeEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, DiagramUserHighlight, DiagramUserSelection, DiagramZoomEvent, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, ResizableMode, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };