@metadev/daga 4.2.13 → 4.2.15

package/Changelog.md

@@ -6,6 +6,20 @@ 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)
+- Add `zoomAndPanTo()` method to canvas to enable zooming and panning with animation [#364](https://github.com/metadevpro/daga/pull/364)
+- Enable configuring nodes and sections to be only resizable when selected [#365](https://github.com/metadevpro/daga/pull/365)
+
 ## v. 4.2.13
 
 - Fix check for whether a browser is Safari [#363](https://github.com/metadevpro/daga/pull/363)

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) {
@@ -2977,6 +2991,11 @@ const getTopPadding$1 = config => {
   }
 };
 
+exports.ResizableMode = void 0;
+(function (ResizableMode) {
+  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
+})(exports.ResizableMode || (exports.ResizableMode = {}));
+
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -3181,12 +3200,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableX() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableX) !== undefined) {
+      if (sectionType.resizableX === exports.ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       return sectionType.resizableX;
     }
-    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) || false;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableX()) || false;
   }
   /**
    * Returns whether this section can be resized vertically.
@@ -3195,12 +3217,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableY() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableY) !== undefined) {
+      if (sectionType.resizableY === exports.ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       return sectionType.resizableY;
     }
-    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) || false;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableY()) || false;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -3711,6 +3736,28 @@ class DiagramNode extends DiagramElement {
   getPriority() {
     return this.type.priority;
   }
+  /**
+   * Returns whether this node can be resized horizontally.
+   * @public
+   */
+  getResizableX() {
+    const resizableX = this.type.resizableX;
+    if (resizableX === exports.ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableX;
+  }
+  /**
+   * Returns whether this node can be resized vertically.
+   * @public
+   */
+  getResizableY() {
+    const resizableY = this.type.resizableY;
+    if (resizableY === exports.ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableY;
+  }
   /**
    * Get the port of this node which is closest to the given coordinates.
    * @param coords A point in the diagram.
@@ -4733,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();
+      }
     }
   }
   /**
@@ -6665,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);
 };
@@ -6686,6 +6735,34 @@ const getRelatedNodeOrItself = element => {
   }
   return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
 };
+const needsResizerX = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableX !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableX !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerX(element.node);
+    }
+  }
+  return false;
+};
+const needsResizerY = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableY !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableY !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerY(element.node);
+    }
+  }
+  return false;
+};
 const initializeLook = selection => {
   selection.filter('.shaped-look').append('path');
   selection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
@@ -7451,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
@@ -7479,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 || {};
@@ -7511,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) {
@@ -7771,7 +7849,14 @@ class DiagramCanvas {
     }
   }
   getViewCoordinates() {
-    return [this.zoomTransform.x, this.zoomTransform.y];
+    var _a, _b, _c;
+    const canvasViewBoundingBox = (_c = (_b = (_a = this.selectCanvasView()) === null || _a === void 0 ? void 0 : _a.select('rect')) === null || _b === void 0 ? void 0 : _b.node()) === null || _c === void 0 ? void 0 : _c.getBBox();
+    /*
+    transform the coordinates of the zoomTransform to the coordinates
+    needed to point the zoomTransfrom to the center of the screen to
+    ensure that canvas.translateTo(getViewCoordinates()) has no effect
+    */
+    return [((canvasViewBoundingBox.width + canvasViewBoundingBox.x) / 2 - this.zoomTransform.x) / this.zoomTransform.k, ((canvasViewBoundingBox.height + canvasViewBoundingBox.y) / 2 - this.zoomTransform.y) / this.zoomTransform.k];
   }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
@@ -7783,12 +7868,42 @@ class DiagramCanvas {
       this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
     }
   }
-  center() {
+  zoomAndPanTo(x, y, z, duration) {
+    if (!duration || duration <= 0) {
+      this.zoomBehavior.scaleTo(this.selectCanvasView(), z);
+      this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
+      return;
+    }
+    this.zoomBehavior.interpolate(d3__namespace.interpolate);
+    const [startingX, startingY] = this.getViewCoordinates();
+    const startingZoom = this.getZoomLevel();
+    const targetX = x,
+      targetY = y,
+      targetZoom = z;
+    this.selectCanvasElements().transition().duration(duration).ease(d3__namespace.easeCubicInOut).tween('progress', () => {
+      let animationInterrupted = false;
+      return value => {
+        try {
+          if (!animationInterrupted) {
+            const currentX = value * (targetX - startingX) + startingX;
+            const currentY = value * (targetY - startingY) + startingY;
+            const currentZoom = value * (targetZoom - startingZoom) + startingZoom;
+            this.zoomBehavior.scaleTo(this.selectCanvasView(), currentZoom);
+            this.zoomBehavior.translateTo(this.selectCanvasView(), currentX, currentY);
+          }
+        } catch (e) {
+          console.warn('Animation has been interrupted');
+          animationInterrupted = true;
+        }
+      };
+    });
+  }
+  center(nodeIds, maxZoomLevel, duration) {
     var _a;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
       const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
-      const nonRemovedNodes = this.model.nodes.all();
+      const nonRemovedNodes = (nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.map(i => this.model.nodes.get(i)).filter(n => !!n)) || this.model.nodes.all();
       const minimumX = Math.min(...nonRemovedNodes.map(n => n.coords[0]));
       const maximumX = Math.max(...nonRemovedNodes.map(n => n.coords[0] + n.width));
       const averageX = (minimumX + maximumX) / 2;
@@ -7803,12 +7918,12 @@ class DiagramCanvas {
        * (windowRangeX / rangeX) is the zoom level to fit everything horizontally
        * (windowRangeY / rangeY) is the zoom level to fit everything vertically
        * the minimum between them is the zoom to fit everything in the screen both horizontally and vertically
-       * we also add 1 to the list so that if the zoom exceeds 1 it is set to 1
+       * we also add maxZoomLevel to the list so that if the zoom exceeds maxZoomLevel it is set to maxZoomLevel
+       * or 1 if maxZoomLevel is undefined
        * a zoom bigger than 1 means zooming in instead of out, and we don't want to zoom in if it's not necessary
        */
-      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, 1);
-      this.translateTo(averageX, averageY);
-      this.zoomTo(zoom);
+      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, maxZoomLevel !== undefined ? maxZoomLevel : 1);
+      this.zoomAndPanTo(averageX, averageY, zoom, duration);
     }
   }
   getClosestGridPoint(point) {
@@ -7864,7 +7979,7 @@ class DiagramCanvas {
   updateNodesInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${d.type.resizableX ? ' resizable-x' : ''}${d.type.resizableY ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -7928,27 +8043,27 @@ class DiagramCanvas {
     }));
     initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Left, d.coords[0] - pointerCoords[0]);
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -7964,27 +8079,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8000,27 +8115,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
@@ -8036,27 +8151,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           if (this.snapToGrid) {
@@ -8075,17 +8190,17 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updateSectionsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
       var _a;
-      return `diagram-section${d.getResizableX() ? ' resizable-x' : ''}${d.getResizableY() ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
+      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -8304,10 +8419,10 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updatePortsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
@@ -8392,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;
@@ -8414,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);
@@ -8547,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');
@@ -9107,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 => {
@@ -9121,6 +9238,7 @@ class DiagramCanvas {
           }
           if (differentConnectionType !== undefined) {
             this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+            this.unfinishedConnectionPort = port;
           }
         }
       }
@@ -9194,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;