@metadev/daga 4.2.14 → 4.2.16

package/Changelog.md

@@ -6,6 +6,19 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.16
+
+- Fix bug where the `DagaImporter` fails to create a node's label if it's blank [#373](https://github.com/metadevpro/daga/pull/373)
+- Add `openTextInput` method to `Canvas` to enable opening a text box editor for a text via API [#374](https://github.com/metadevpro/daga/pull/374)
+
+## v. 4.2.15
+
+- Configure center animation duration in buttons component [#368](https://github.com/metadevpro/daga/pull/368)
+- Handle interruptions in zoom and pan animations [#369](https://github.com/metadevpro/daga/pull/369)
+- Render ports on top of connections in diagram [#370](https://github.com/metadevpro/daga/pull/370)
+- Enable making a connection pass through extra points if configured as such [#371](https://github.com/metadevpro/daga/pull/371)
+- Allow configuring the tightening of connections across ports of different types [#372](https://github.com/metadevpro/daga/pull/372)
+
 ## v. 4.2.14
 
 - Fix `getViewCoordinates()` canvas method to return coordinates such that using those coordinates for the `translateTo()` method results in no changes [#364](https://github.com/metadevpro/daga/pull/364)

package/index.cjs.js

@@ -1194,13 +1194,17 @@ const clone = o => {
   if (typeof o !== 'object') {
     return o;
   }
+  if (Array.isArray(o)) {
+    return o.map(clone);
+  }
   const res = {};
   for (const e of Object.entries(o)) {
-    if (typeof e[1] === 'object') {
-      res[e[0]] = clone(e[1]);
-    } else {
-      res[e[0]] = e[1];
-    }
+    res[e[0]] = clone(e[1]);
+    // if (typeof e[1] === 'object') {
+    //   res[e[0]] = clone(e[1]);
+    // } else {
+    //   res[e[0]] = e[1];
+    // }
   }
   return res;
 };
@@ -2441,7 +2445,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 = [];
@@ -2459,8 +2463,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`.
@@ -2514,11 +2520,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) {
@@ -2529,6 +2536,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;
@@ -2556,7 +2567,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) {
@@ -2567,6 +2578,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;
@@ -2635,6 +2650,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;
@@ -2649,6 +2665,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) {
@@ -4766,17 +4784,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();
+      }
     }
   }
   /**
@@ -4930,23 +4950,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.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);
@@ -4959,16 +4977,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.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 || []) {
@@ -6698,8 +6714,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);
 };
@@ -7512,7 +7528,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__namespace.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -7540,12 +7556,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 || {};
@@ -7572,7 +7589,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) {
@@ -7864,12 +7881,20 @@ class DiagramCanvas {
       targetY = y,
       targetZoom = z;
     this.selectCanvasElements().transition().duration(duration).ease(d3__namespace.easeCubicInOut).tween('progress', () => {
+      let animationInterrupted = false;
       return value => {
-        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);
+        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;
+        }
       };
     });
   }
@@ -8482,14 +8507,14 @@ class DiagramCanvas {
         }
       }
     }).on(exports.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(exports.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;
@@ -8504,6 +8529,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);
@@ -8637,11 +8663,11 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape || 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('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');
     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');
@@ -8696,21 +8722,7 @@ class DiagramCanvas {
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(exports.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__namespace.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -9197,6 +9209,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 => {
@@ -9211,6 +9224,7 @@ class DiagramCanvas {
           }
           if (differentConnectionType !== undefined) {
             this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+            this.unfinishedConnectionPort = port;
           }
         }
       }
@@ -9284,6 +9298,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;
@@ -9295,6 +9310,27 @@ class DiagramCanvas {
   canUserPerformAction(action) {
     return this.userActions[action] !== false;
   }
+  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, () => {
+        // (_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, changeCallback, finishCallback) {
     // if we have a text input open, close it before creating a new one
     this.removeInputField();

package/index.esm.js

@@ -1173,13 +1173,17 @@ const clone = o => {
   if (typeof o !== 'object') {
     return o;
   }
+  if (Array.isArray(o)) {
+    return o.map(clone);
+  }
   const res = {};
   for (const e of Object.entries(o)) {
-    if (typeof e[1] === 'object') {
-      res[e[0]] = clone(e[1]);
-    } else {
-      res[e[0]] = e[1];
-    }
+    res[e[0]] = clone(e[1]);
+    // if (typeof e[1] === 'object') {
+    //   res[e[0]] = clone(e[1]);
+    // } else {
+    //   res[e[0]] = e[1];
+    // }
   }
   return res;
 };
@@ -2420,7 +2424,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 = [];
@@ -2438,8 +2442,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`.
@@ -2493,11 +2499,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) {
@@ -2508,6 +2515,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;
@@ -2535,7 +2546,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) {
@@ -2546,6 +2557,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;
@@ -2614,6 +2629,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;
@@ -2628,6 +2644,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) {
@@ -4745,17 +4763,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();
+      }
     }
   }
   /**
@@ -4909,23 +4929,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.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);
@@ -4938,16 +4956,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.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 || []) {
@@ -6677,8 +6693,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);
 };
@@ -7491,7 +7507,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
@@ -7519,12 +7535,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 || {};
@@ -7551,7 +7568,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) {
@@ -7843,12 +7860,20 @@ class DiagramCanvas {
       targetY = y,
       targetZoom = z;
     this.selectCanvasElements().transition().duration(duration).ease(d3.easeCubicInOut).tween('progress', () => {
+      let animationInterrupted = false;
       return value => {
-        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);
+        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;
+        }
       };
     });
   }
@@ -8461,14 +8486,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;
@@ -8483,6 +8508,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);
@@ -8616,11 +8642,11 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape || 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('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');
     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');
@@ -8675,21 +8701,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);
@@ -9176,6 +9188,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 => {
@@ -9190,6 +9203,7 @@ class DiagramCanvas {
           }
           if (differentConnectionType !== undefined) {
             this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+            this.unfinishedConnectionPort = port;
           }
         }
       }
@@ -9263,6 +9277,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;
@@ -9274,6 +9289,27 @@ class DiagramCanvas {
   canUserPerformAction(action) {
     return this.userActions[action] !== false;
   }
+  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, () => {
+        // (_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, changeCallback, finishCallback) {
     // if we have a text input open, close it before creating a new one
     this.removeInputField();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.2.14",
+  "version": "4.2.16",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/lib/diagram/canvas/diagram-canvas-util.d.ts

@@ -20,7 +20,7 @@ export declare const isSecondaryButton: (event: MouseEvent) => boolean;
  * @private
  * @see linePath
  */
-export declare const getConnectionPath: (shape: LineShape | LineFunction, startCoords: Point, endCoords: Point, startDirection: Side | undefined, endDirection: Side | undefined, width: number, startMarkerWidth: number | undefined, endMarkerWidth: number | undefined) => string;
+export declare const getConnectionPath: (shape: LineShape | LineFunction, startCoords: Point, endCoords: Point, startDirection: Side | undefined, endDirection: Side | undefined, points: Point[], width: number, startMarkerWidth: number | undefined, endMarkerWidth: number | undefined) => string;
 export declare const setCursorStyle: (style?: CursorStyle) => void;
 export declare const getRelatedNodeOrItself: (element: DiagramNode | DiagramSection | DiagramPort | DiagramField) => DiagramNode | DiagramSection | DiagramPort | DiagramField;
 export declare const needsResizerX: (element: DiagramNode | DiagramSection) => boolean;

package/src/lib/diagram/canvas/diagram-canvas.d.ts

@@ -53,6 +53,7 @@ export declare class DiagramCanvas implements Canvas {
     get connectionType(): DiagramConnectionType | undefined;
     set connectionType(value: DiagramConnectionType | undefined);
     autoTightenConnections: boolean;
+    tightenConnectionsAcrossPortTypes: boolean;
     allowConnectionLoops: boolean;
     allowSharingPorts: boolean;
     allowSharingBothPorts: boolean;
@@ -73,6 +74,7 @@ export declare class DiagramCanvas implements Canvas {
      * Invisible path followed by an unfinished connection. Used for making unfinished connections stop before the cursor rather than stopping right at the cursor.
      */
     private unfinishedConnectionTracer?;
+    private unfinishedConnectionPort?;
     private inputFieldContainer?;
     private multipleSelectionContainer?;
     private draggingFrom;
@@ -136,6 +138,7 @@ export declare class DiagramCanvas implements Canvas {
     private dropConnection;
     cancelAllUserActions(): void;
     canUserPerformAction(action: DiagramActions): boolean;
+    openTextInput(id: string): void;
     private createInputField;
     private removeInputField;
     private minimumSizeOfField;

package/src/lib/diagram/config/diagram-components-config.d.ts

@@ -52,6 +52,11 @@ export interface ButtonsComponentConfig {
      * @default 'top'
      */
     direction?: Side;
+    /**
+     * Duration of the center animation when pressing the center button. May be set to `0` or `undefined` to make it instant without animation.
+     * @default undefined
+     */
+    centerAnimationDuration?: number;
     /**
      * Whether to enable the user action (undo, redo) buttons in this component.
      * @default true

package/src/lib/diagram/config/diagram-config.d.ts

@@ -103,6 +103,11 @@ export interface ConnectionSettingsConfig {
      * @default true
      */
     autoTighten?: boolean;
+    /**
+     * When tightening a connection allow changing the start and end ports to ports of a different type.
+     * @default false
+     */
+    tightenAcrossPortTypes?: boolean;
     /**
      * Whether a connection can use the same port as start and end.
      * @default false

package/src/lib/diagram/model/diagram-connection.d.ts

@@ -138,7 +138,7 @@ export declare class DiagramConnection extends DiagramElement {
      */
     endLabel: string;
     /**
-     * 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
      */
     points: Point[];

package/src/lib/diagram/model/diagram-port.d.ts

@@ -173,7 +173,7 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
     constructor(model: DiagramModel, type: DiagramPortType | undefined, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, connectionPoint: Point | undefined, direction: Side, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint);
     get removed(): boolean;
     updateInView(): void;
-    raise(): void;
+    raise(raiseConnections?: boolean): void;
     /**
      * Add a connection to this port's list of outgoing connections.
      * @public

package/src/lib/interfaces/canvas.d.ts

@@ -108,6 +108,11 @@ export interface Canvas {
      * @public
      */
     autoTightenConnections: boolean;
+    /**
+     * Whether a connection can be tightened to use ports of a different type.
+     * @public
+     */
+    tightenConnectionsAcrossPortTypes: boolean;
     /**
      * Whether a connection can use the same port as start and end.
      * @public
@@ -351,6 +356,11 @@ export interface Canvas {
      * @param shrink Whether the node should shrink if there is excess space; `true` by default
      */
     fitNodeInView(id: string, shrink?: boolean): void;
+    /**
+     * Open a text input for a field.
+     * @param id The id of a field.
+     */
+    openTextInput(id: string): void;
     /**
      * Get the d3 Selection containing the root html div element of the canvas.
      * @private