@metadev/daga 4.2.14 → 4.2.15

package/Changelog.md

@@ -6,6 +6,14 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## 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

@@ -2441,7 +2441,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 +2459,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 +2516,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 +2532,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 +2563,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 +2574,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 +2646,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 +2661,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 +4780,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();
+      }
     }
   }
   /**
@@ -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');
@@ -9197,6 +9223,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 +9238,7 @@ class DiagramCanvas {
           }
           if (differentConnectionType !== undefined) {
             this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+            this.unfinishedConnectionPort = port;
           }
         }
       }
@@ -9284,6 +9312,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;

package/index.esm.js

@@ -2420,7 +2420,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 +2438,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 +2495,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 +2511,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 +2542,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 +2553,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 +2625,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 +2640,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 +4759,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();
+      }
     }
   }
   /**
@@ -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');
@@ -9176,6 +9202,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 +9217,7 @@ class DiagramCanvas {
           }
           if (differentConnectionType !== undefined) {
             this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+            this.unfinishedConnectionPort = port;
           }
         }
       }
@@ -9263,6 +9291,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.2.14",
+  "version": "4.2.15",
   "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;

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