@html-graph/html-graph 8.16.0 → 8.18.0

package/dist/html-graph.js

@@ -2687,6 +2687,11 @@ class InteractiveEdgeShape {
     __publicField(this, "line");
     __publicField(this, "sourceArrow");
     __publicField(this, "targetArrow");
+    // TODO: make private
+    /**
+     * @deprecated
+     * do use shape.svg instead
+     */
     __publicField(this, "handle", createEdgeGroup());
     __publicField(this, "onAfterRender");
     __publicField(this, "interactiveLine");
@@ -3300,11 +3305,11 @@ class DraggablePortsConfigurator {
       }
       const target = event.currentTarget;
       const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-      const accepted = this.params.onPortPointerDown(portId, {
+      const dragAllowed = this.params.onPointerDownVerifier(portId, {
         x: mouseEvent.clientX,
         y: mouseEvent.clientY
       });
-      if (!accepted) {
+      if (!dragAllowed) {
         return;
       }
       event.stopPropagation();
@@ -3321,8 +3326,8 @@ class DraggablePortsConfigurator {
         event.clientY
       );
       if (!isInside) {
-        this.params.onPointerMoveOutside();
-        this.stopMouseDrag();
+        this.removeWindowMouseListeners();
+        this.params.onPointerOutside();
         return;
       }
       this.params.onPointerMove({ x: event.clientX, y: event.clientY });
@@ -3331,8 +3336,8 @@ class DraggablePortsConfigurator {
       if (!this.params.mouseUpEventVerifier(event)) {
         return;
       }
+      this.removeWindowMouseListeners();
       this.params.onPointerUp({ x: event.clientX, y: event.clientY });
-      this.stopMouseDrag();
     });
     __publicField(this, "onPortTouchStart", (event) => {
       const touchEvent = event;
@@ -3342,11 +3347,11 @@ class DraggablePortsConfigurator {
       const touch = touchEvent.touches[0];
       const target = event.currentTarget;
       const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-      const accepted = this.params.onPortPointerDown(portId, {
+      const dragAllowed = this.params.onPointerDownVerifier(portId, {
         x: touch.clientX,
         y: touch.clientY
       });
-      if (!accepted) {
+      if (!dragAllowed) {
         return;
       }
       event.stopPropagation();
@@ -3367,16 +3372,16 @@ class DraggablePortsConfigurator {
         touch.clientY
       );
       if (!isInside) {
-        this.params.onPointerMoveOutside();
-        this.stopTouchDrag();
+        this.removeWindowTouchListeners();
+        this.params.onPointerOutside();
         return;
       }
       this.params.onPointerMove({ x: touch.clientX, y: touch.clientY });
     });
     __publicField(this, "onWindowTouchFinish", (event) => {
+      this.removeWindowTouchListeners();
       const touch = event.changedTouches[0];
       this.params.onPointerUp({ x: touch.clientX, y: touch.clientY });
-      this.stopTouchDrag();
     });
     __publicField(this, "reset", () => {
       this.canvas.graph.getAllPortIds().forEach((portId) => {
@@ -3385,10 +3390,9 @@ class DraggablePortsConfigurator {
       });
     });
     __publicField(this, "revert", () => {
-      this.params.onStopDrag();
-      this.reset();
       this.removeWindowMouseListeners();
       this.removeWindowTouchListeners();
+      this.reset();
     });
     this.canvas = canvas;
     this.window = window2;
@@ -3414,14 +3418,6 @@ class DraggablePortsConfigurator {
     element.removeEventListener("mousedown", this.onPortMouseDown);
     element.removeEventListener("touchstart", this.onPortTouchStart);
   }
-  stopMouseDrag() {
-    this.params.onStopDrag();
-    this.removeWindowMouseListeners();
-  }
-  stopTouchDrag() {
-    this.params.onStopDrag();
-    this.removeWindowTouchListeners();
-  }
   removeWindowMouseListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove);
     this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -3432,47 +3428,6 @@ class DraggablePortsConfigurator {
     this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class LayoutApplier {
-  constructor(canvas, layoutAlgorithm, params) {
-    this.canvas = canvas;
-    this.layoutAlgorithm = layoutAlgorithm;
-    this.params = params;
-  }
-  apply() {
-    const coords = this.layoutAlgorithm.calculateCoordinates({
-      graph: this.canvas.graph,
-      viewport: this.canvas.viewport
-    });
-    this.params.onBeforeApplied();
-    coords.forEach((point, nodeId) => {
-      if (!this.params.staticNodeResolver(nodeId)) {
-        this.canvas.updateNode(nodeId, point);
-      }
-    });
-    this.params.onAfterApplied();
-  }
-}
-class AnimatedLayoutApplier {
-  constructor(canvas, layoutAlgorithm, params) {
-    this.canvas = canvas;
-    this.layoutAlgorithm = layoutAlgorithm;
-    this.params = params;
-  }
-  apply(dt) {
-    const coords = this.layoutAlgorithm.calculateNextCoordinates({
-      graph: this.canvas.graph,
-      viewport: this.canvas.viewport,
-      dt
-    });
-    this.params.onBeforeApplied();
-    coords.forEach((point, nodeId) => {
-      if (!this.params.staticNodeResolver(nodeId)) {
-        this.canvas.updateNode(nodeId, point);
-      }
-    });
-    this.params.onAfterApplied();
-  }
-}
 class EventTagger {
   constructor() {
     __publicField(this, "field", "_htmlGraphTags");
@@ -3630,6 +3585,52 @@ class UserSelectableElementsConfigurator {
     }
   }
 }
+const resolveCreateEdgeRequest = (params, targetPortId) => {
+  return {
+    from: params.isDirect ? params.staticPortId : targetPortId,
+    to: params.isDirect ? targetPortId : params.staticPortId
+  };
+};
+class ClosestConnectablePortDraggingPortDirectionResolver {
+  constructor(graph, connectionAllowedVerifier) {
+    this.graph = graph;
+    this.connectionAllowedVerifier = connectionAllowedVerifier;
+  }
+  resolve(params) {
+    let closestDirection = void 0;
+    let closestDistance = Infinity;
+    const { cursor } = params;
+    this.graph.getAllPortIds().forEach((portId) => {
+      const { element, direction, nodeId } = this.graph.getPort(portId);
+      const { x, y } = this.graph.getNode(nodeId);
+      if (x === null || y === null) {
+        return;
+      }
+      const request = resolveCreateEdgeRequest(params, portId);
+      if (!this.connectionAllowedVerifier(request)) {
+        return;
+      }
+      const { top, left, width, height } = element.getBoundingClientRect();
+      const center = { x: left + width / 2, y: top + height / 2 };
+      const dx = cursor.x - center.x;
+      const dy = cursor.y - center.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestDirection = direction;
+      }
+    });
+    return closestDirection;
+  }
+}
+class ConstantDraggingPortDirectionResolver {
+  constructor(direction) {
+    this.direction = direction;
+  }
+  resolve() {
+    return this.direction;
+  }
+}
 class UserDraggableNodesConfigurator {
   constructor(canvas, element, window2, pointInsideVerifier, params) {
     __publicField(this, "grabbedNode", null);
@@ -4351,8 +4352,7 @@ class BackgroundConfigurator {
 class UserConnectablePortsConfigurator {
   constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
     __publicField(this, "overlayCanvas");
-    __publicField(this, "staticPortId", null);
-    __publicField(this, "isTargetDragging", true);
+    __publicField(this, "edgeInProgress", null);
     __publicField(this, "onEdgeCreated", (edgeId) => {
       this.params.onAfterEdgeCreated(edgeId);
     });
@@ -4367,34 +4367,35 @@ class UserConnectablePortsConfigurator {
       this.viewportStore,
       this.window
     );
+    const draggablePortsParams = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      onPointerDownVerifier: (portId, cursor) => {
+        const connectionType = this.params.connectionTypeResolver(portId);
+        if (connectionType === null) {
+          return false;
+        }
+        this.grabPort(portId, cursor, connectionType);
+        return true;
+      },
+      onPointerMove: (cursor) => {
+        this.moveDraggingPort(cursor);
+      },
+      onPointerUp: (cursor) => {
+        this.tryCreateConnection(cursor);
+        this.resetDragState();
+      },
+      onPointerOutside: () => {
+        const params2 = this.edgeInProgress;
+        this.resetDragState();
+        this.params.onEdgeCreationInterrupted(params2);
+      }
+    };
     DraggablePortsConfigurator.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
-      {
-        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        onStopDrag: () => {
-          this.resetDragState();
-        },
-        onPortPointerDown: (portId, cursor) => {
-          const connectionType = this.params.connectionTypeResolver(portId);
-          if (connectionType === null) {
-            return false;
-          }
-          this.grabPort(portId, cursor, connectionType);
-          return true;
-        },
-        onPointerMove: (cursor) => {
-          this.moveDraggingPort(cursor);
-        },
-        onPointerMoveOutside: () => {
-          this.handleEdgeCreationInterrupted();
-        },
-        onPointerUp: (cursor) => {
-          this.tryCreateConnection(cursor);
-        }
-      }
+      draggablePortsParams
     );
   }
   static configure(canvas, overlayLayer, viewportStore, win, pointInsideVerifier, params) {
@@ -4407,9 +4408,8 @@ class UserConnectablePortsConfigurator {
       params
     );
   }
-  grabPort(portId, cursor, connectionType) {
-    const port = this.canvas.graph.getPort(portId);
-    this.staticPortId = portId;
+  grabPort(staticPortId, cursor, connectionType) {
+    const port = this.canvas.graph.getPort(staticPortId);
     const portRect = port.element.getBoundingClientRect();
     const portX = portRect.x + portRect.width / 2;
     const portY = portRect.y + portRect.height / 2;
@@ -4427,13 +4427,20 @@ class UserConnectablePortsConfigurator {
       portCoords: portPoint,
       portDirection: port.direction
     };
+    const isDirect = connectionType === "direct";
+    this.edgeInProgress = {
+      staticPortId,
+      isDirect
+    };
     const draggingParams = {
       overlayNodeId: OverlayId.DraggingNodeId,
       portCoords: cursorPoint,
-      portDirection: this.params.dragPortDirection
+      portDirection: this.params.draggingPortDirectionResolver.resolve({
+        cursor,
+        ...this.edgeInProgress
+      }) ?? port.direction
     };
-    this.isTargetDragging = connectionType === "direct";
-    const [sourceParams, targetParams] = this.isTargetDragging ? [staticParams, draggingParams] : [draggingParams, staticParams];
+    const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(targetParams));
     this.overlayCanvas.addEdge({
@@ -4443,22 +4450,25 @@ class UserConnectablePortsConfigurator {
     });
   }
   resetDragState() {
-    this.staticPortId = null;
-    this.isTargetDragging = true;
+    this.edgeInProgress = null;
     this.overlayCanvas.clear();
   }
   tryCreateConnection(cursor) {
-    const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
-    if (draggingPortId === null) {
-      this.handleEdgeCreationInterrupted();
+    const targetPortId = findPortAtPoint(this.canvas.graph, cursor);
+    if (targetPortId === null) {
+      this.params.onEdgeCreationInterrupted(this.edgeInProgress);
       return;
     }
-    const staticPortId = this.staticPortId;
-    const sourceId = this.isTargetDragging ? staticPortId : draggingPortId;
-    const targetId = this.isTargetDragging ? draggingPortId : staticPortId;
-    const request = { from: sourceId, to: targetId };
-    const processedRequest = this.params.connectionPreprocessor(request);
-    if (processedRequest !== null) {
+    const request = resolveCreateEdgeRequest(
+      this.edgeInProgress,
+      targetPortId
+    );
+    const connectionAllowed = this.params.connectionAllowedVerifier(request);
+    const processedRequest = this.params.connectionPreprocessor({
+      from: request.from,
+      to: request.to
+    });
+    if (connectionAllowed && processedRequest !== null) {
       this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated);
       this.canvas.addEdge(processedRequest);
       this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated);
@@ -4466,30 +4476,26 @@ class UserConnectablePortsConfigurator {
       this.params.onEdgeCreationPrevented(request);
     }
   }
-  moveDraggingPort(dragPoint) {
+  moveDraggingPort(cursor) {
     const canvasRect = this.overlayLayer.getBoundingClientRect();
     const nodeContentCoords = this.canvas.viewport.createContentCoords({
-      x: dragPoint.x - canvasRect.x,
-      y: dragPoint.y - canvasRect.y
+      x: cursor.x - canvasRect.x,
+      y: cursor.y - canvasRect.y
+    });
+    const direction = this.params.draggingPortDirectionResolver.resolve({
+      cursor,
+      ...this.edgeInProgress
     });
     this.overlayCanvas.updateNode(OverlayId.DraggingNodeId, {
       x: nodeContentCoords.x,
       y: nodeContentCoords.y
-    });
-  }
-  handleEdgeCreationInterrupted() {
-    const staticPortId = this.staticPortId;
-    this.params.onEdgeCreationInterrupted({
-      staticPortId,
-      isDirect: this.isTargetDragging
-    });
+    }).updatePort(OverlayId.DraggingNodeId, { direction });
   }
 }
 class UserDraggableEdgesConfigurator {
   constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
     __publicField(this, "overlayCanvas");
-    __publicField(this, "staticPortId", null);
-    __publicField(this, "isTargetDragging", true);
+    __publicField(this, "edgeInProgress", null);
     __publicField(this, "draggingEdgePayload", null);
     __publicField(this, "onEdgeReattached", (edgeId) => {
       this.params.onAfterEdgeReattached(edgeId);
@@ -4505,38 +4511,36 @@ class UserDraggableEdgesConfigurator {
       this.viewportStore,
       this.window
     );
+    const draggablePortsParams = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      onPointerDownVerifier: (portId, cursor) => {
+        return this.tryStartEdgeDragging(portId, cursor);
+      },
+      onPointerMove: (cursor) => {
+        this.moveDraggingPort(cursor);
+      },
+      onPointerUp: (cursor) => {
+        this.tryCreateConnection(cursor);
+        this.resetDragState();
+      },
+      onPointerOutside: () => {
+        const edge = this.draggingEdgePayload;
+        this.resetDragState();
+        this.params.onEdgeReattachInterrupted({
+          id: edge.id,
+          from: edge.from,
+          to: edge.to,
+          shape: edge.shape,
+          priority: edge.priority
+        });
+      }
+    };
     DraggablePortsConfigurator.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
-      {
-        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        onStopDrag: () => {
-          this.resetDragState();
-        },
-        onPortPointerDown: (portId, cursor) => {
-          return this.tryStartEdgeDragging(portId, cursor);
-        },
-        onPointerMove: (cursor) => {
-          this.moveDraggingPort(cursor);
-        },
-        onPointerMoveOutside: () => {
-          const edge = this.draggingEdgePayload;
-          queueMicrotask(() => {
-            this.params.onEdgeReattachInterrupted({
-              id: edge.id,
-              from: edge.from,
-              to: edge.to,
-              shape: edge.shape,
-              priority: edge.priority
-            });
-          });
-        },
-        onPointerUp: (cursor) => {
-          this.tryCreateConnection(cursor);
-        }
-      }
+      draggablePortsParams
     );
   }
   static configure(canvas, overlayLayer, viewportStore, win, pointInsideVerifier, params) {
@@ -4551,15 +4555,14 @@ class UserDraggableEdgesConfigurator {
   }
   tryStartEdgeDragging(portId, cursor) {
     const edgeId = this.params.draggingEdgeResolver(portId);
-    if (edgeId === null || !this.canvas.graph.hasEdge(edgeId)) {
+    if (edgeId === null) {
       return false;
     }
     const edge = this.canvas.graph.getEdge(edgeId);
     const isSourceDragging = portId === edge.from;
-    const isTargetDragging = portId === edge.to;
+    const isDirect = portId === edge.to;
     const staticPortId = isSourceDragging ? edge.to : edge.from;
-    this.staticPortId = staticPortId;
-    this.isTargetDragging = isTargetDragging;
+    this.edgeInProgress = { staticPortId, isDirect };
     const draggingPort = this.canvas.graph.getPort(portId);
     const staticPort = this.canvas.graph.getPort(staticPortId);
     const staticRect = staticPort.element.getBoundingClientRect();
@@ -4589,12 +4592,16 @@ class UserDraggableEdgesConfigurator {
       portCoords: staticPoint,
       portDirection: staticPort.direction
     };
+    const direction = this.params.draggingPortDirectionResolver.resolve({
+      cursor,
+      ...this.edgeInProgress
+    });
     const draggingParams = {
       overlayNodeId: OverlayId.DraggingNodeId,
       portCoords: draggingPoint,
-      portDirection: draggingPort.direction
+      portDirection: direction ?? draggingPort.direction
     };
-    const [sourceParams, targetParams] = this.isTargetDragging ? [staticParams, draggingParams] : [draggingParams, staticParams];
+    const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(targetParams));
     const overlayEdgeShape = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(OverlayId.EdgeId) : edge.shape;
@@ -4608,30 +4615,43 @@ class UserDraggableEdgesConfigurator {
   }
   resetDragState() {
     this.draggingEdgePayload = null;
-    this.staticPortId = null;
-    this.isTargetDragging = true;
+    this.edgeInProgress = null;
     this.overlayCanvas.clear();
   }
-  moveDraggingPort(dragPoint) {
+  moveDraggingPort(cursor) {
     const canvasRect = this.overlayLayer.getBoundingClientRect();
     const nodeViewCoords = {
-      x: dragPoint.x - canvasRect.x,
-      y: dragPoint.y - canvasRect.y
+      x: cursor.x - canvasRect.x,
+      y: cursor.y - canvasRect.y
     };
     const nodeContentCoords = this.canvas.viewport.createContentCoords(nodeViewCoords);
+    const direction = this.params.draggingPortDirectionResolver.resolve({
+      cursor,
+      ...this.edgeInProgress
+    });
     this.overlayCanvas.updateNode(OverlayId.DraggingNodeId, {
       x: nodeContentCoords.x,
       y: nodeContentCoords.y
-    });
+    }).updatePort(OverlayId.DraggingNodeId, { direction });
   }
   tryCreateConnection(cursor) {
     const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
     this.overlayCanvas.removeEdge(OverlayId.EdgeId);
     if (draggingPortId === null) {
-      this.handleEdgeReattachInterrupted();
+      const edge2 = this.draggingEdgePayload;
+      this.params.onEdgeReattachInterrupted({
+        id: edge2.id,
+        from: edge2.from,
+        to: edge2.to,
+        shape: edge2.shape,
+        priority: edge2.priority
+      });
       return;
     }
-    const [from, to] = this.isTargetDragging ? [this.staticPortId, draggingPortId] : [draggingPortId, this.staticPortId];
+    const { from, to } = resolveCreateEdgeRequest(
+      this.edgeInProgress,
+      draggingPortId
+    );
     const edge = this.draggingEdgePayload;
     const request = {
       id: edge.id,
@@ -4640,8 +4660,12 @@ class UserDraggableEdgesConfigurator {
       shape: edge.shape,
       priority: edge.priority
     };
+    const connectionAllowed = this.params.connectionAllowedVerifier({
+      from,
+      to
+    });
     const processedRequest = this.params.connectionPreprocessor(request);
-    if (processedRequest !== null) {
+    if (connectionAllowed && processedRequest !== null) {
       this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached);
       this.canvas.addEdge(processedRequest);
       this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
@@ -4656,16 +4680,6 @@ class UserDraggableEdgesConfigurator {
       });
     }
   }
-  handleEdgeReattachInterrupted() {
-    const edge = this.draggingEdgePayload;
-    this.params.onEdgeReattachInterrupted({
-      id: edge.id,
-      from: edge.from,
-      to: edge.to,
-      shape: edge.shape,
-      priority: edge.priority
-    });
-  }
 }
 class ManualLayoutApplicationStrategyConfigurator {
   constructor(applier, trigger) {
@@ -4717,6 +4731,26 @@ class TopologyChangeAsyncLayoutApplicationStrategyConfigurator {
     this.defererFn(this.apply);
   }
 }
+class LayoutApplier {
+  constructor(canvas, layoutAlgorithm, params) {
+    this.canvas = canvas;
+    this.layoutAlgorithm = layoutAlgorithm;
+    this.params = params;
+  }
+  apply() {
+    const coords = this.layoutAlgorithm.calculateCoordinates({
+      graph: this.canvas.graph,
+      viewport: this.canvas.viewport
+    });
+    this.params.onBeforeApplied();
+    coords.forEach((point, nodeId) => {
+      if (!this.params.staticNodeResolver(nodeId)) {
+        this.canvas.updateNode(nodeId, point);
+      }
+    });
+    this.params.onAfterApplied();
+  }
+}
 class LayoutConfigurator {
   static configure(canvas, params) {
     const strategy = params.applyOn;
@@ -4762,6 +4796,27 @@ class AnimationSeries {
     this.win.requestAnimationFrame(this.step);
   }
 }
+class AnimatedLayoutApplier {
+  constructor(canvas, layoutAlgorithm, params) {
+    this.canvas = canvas;
+    this.layoutAlgorithm = layoutAlgorithm;
+    this.params = params;
+  }
+  apply(dt) {
+    const coords = this.layoutAlgorithm.calculateNextCoordinates({
+      graph: this.canvas.graph,
+      viewport: this.canvas.viewport,
+      dt
+    });
+    this.params.onBeforeApplied();
+    coords.forEach((point, nodeId) => {
+      if (!this.params.staticNodeResolver(nodeId)) {
+        this.canvas.updateNode(nodeId, point);
+      }
+    });
+    this.params.onAfterApplied();
+  }
+}
 class AnimatedLayoutConfigurator {
   constructor(canvas, params, win) {
     __publicField(this, "applier");
@@ -4891,9 +4946,6 @@ class UserSelectableCanvasConfigurator {
     __publicField(this, "configurator");
     __publicField(this, "onCanvasSelected");
     __publicField(this, "selectionHandledTag", selectionHandled);
-    __publicField(this, "restore", () => {
-      this.configurator.disable(this.element);
-    });
     this.canvas = canvas;
     this.element = element;
     this.window = window2;
@@ -4915,7 +4967,9 @@ class UserSelectableCanvasConfigurator {
       }
     );
     this.configurator.enable(this.element);
-    this.canvas.onBeforeDestroy.subscribe(this.restore);
+    this.canvas.onBeforeDestroy.subscribe(() => {
+      this.configurator.disable(this.element);
+    });
   }
   static configure(canvas, element, window2, pointInsideVerifier, eventTagger, params) {
     new UserSelectableCanvasConfigurator(
@@ -4968,22 +5022,119 @@ class Layers {
     this.element.removeChild(this.host);
   }
 }
+const forceDirectedDefaults = Object.freeze({
+  seed: "HTMLGraph is awesome",
+  maxTimeDeltaSec: 0.01,
+  nodeCharge: 1e5,
+  nodeMass: 1,
+  edgeEquilibriumLength: 300,
+  edgeStiffness: 1e3,
+  dtSec: 0.01,
+  maxIterations: 1e3,
+  convergenceVelocity: 10,
+  maxForce: 1e7,
+  nodeForceCoefficient: 1,
+  barnesHutAreaRadiusThreshold: 0.01,
+  barnesHutTheta: 1
+});
+const selectionDefaults = Object.freeze({
+  mouseDownEventVerifier: (event) => event.button === 0,
+  mouseUpEventVerifier: (event) => event.button === 0,
+  movementThreshold: 10
+});
+const noopFn = () => {
+};
+const resolveDraggingPortDirectionResolver = (config, graph, connectionAllowedVerifier) => {
+  if (config === "closest-connectable-port") {
+    return new ClosestConnectablePortDraggingPortDirectionResolver(
+      graph,
+      connectionAllowedVerifier
+    );
+  }
+  return new ConstantDraggingPortDirectionResolver(config);
+};
+const resolveEdgeShapeFactory = (config) => {
+  if (typeof config === "function") {
+    return config;
+  }
+  switch (config.type) {
+    case "straight":
+      return () => new StraightEdgeShape({
+        color: config.color,
+        width: config.width,
+        arrowLength: config.arrowLength,
+        arrowOffset: config.arrowOffset,
+        arrowRenderer: config.arrowRenderer,
+        hasSourceArrow: config.hasSourceArrow,
+        hasTargetArrow: config.hasTargetArrow,
+        cycleSquareSide: config.cycleSquareSide,
+        roundness: config.roundness,
+        detourDistance: config.detourDistance,
+        detourDirection: config.detourDirection
+      });
+    case "horizontal":
+      return () => new HorizontalEdgeShape({
+        color: config.color,
+        width: config.width,
+        arrowLength: config.arrowLength,
+        arrowOffset: config.arrowOffset,
+        arrowRenderer: config.arrowRenderer,
+        hasSourceArrow: config.hasSourceArrow,
+        hasTargetArrow: config.hasTargetArrow,
+        cycleSquareSide: config.cycleSquareSide,
+        roundness: config.roundness,
+        detourDistance: config.detourDistance
+      });
+    case "vertical":
+      return () => new VerticalEdgeShape({
+        color: config.color,
+        width: config.width,
+        arrowLength: config.arrowLength,
+        arrowOffset: config.arrowOffset,
+        arrowRenderer: config.arrowRenderer,
+        hasSourceArrow: config.hasSourceArrow,
+        hasTargetArrow: config.hasTargetArrow,
+        cycleSquareSide: config.cycleSquareSide,
+        roundness: config.roundness,
+        detourDistance: config.detourDistance
+      });
+    case "direct":
+      return () => new DirectEdgeShape({
+        color: config.color,
+        width: config.width,
+        arrowLength: config.arrowLength,
+        arrowRenderer: config.arrowRenderer,
+        hasSourceArrow: config.hasSourceArrow,
+        hasTargetArrow: config.hasTargetArrow,
+        sourceOffset: config.sourceOffset,
+        targetOffset: config.targetOffset
+      });
+    default:
+      return () => new BezierEdgeShape({
+        color: config.color,
+        width: config.width,
+        arrowLength: config.arrowLength,
+        arrowRenderer: config.arrowRenderer,
+        hasSourceArrow: config.hasSourceArrow,
+        hasTargetArrow: config.hasTargetArrow,
+        cycleRadius: config.cycleRadius,
+        smallCycleRadius: config.smallCycleRadius,
+        curvature: config.curvature,
+        detourDistance: config.detourDistance,
+        detourDirection: config.detourDirection
+      });
+  }
+};
 const createDraggableNodesParams = (config) => {
   var _a, _b, _c, _d, _e, _f;
-  const onNodeDragStarted = ((_a = config.events) == null ? void 0 : _a.onNodeDragStarted) ?? (() => {
-  });
-  const onNodeDrag = ((_b = config.events) == null ? void 0 : _b.onNodeDrag) ?? (() => {
-  });
   const nodeDragVerifier = config.nodeDragVerifier ?? (() => true);
-  const onNodeDragFinished = ((_c = config.events) == null ? void 0 : _c.onNodeDragFinished) ?? (() => {
-  });
   const moveOnTop = config.moveOnTop !== false;
   const moveEdgesOnTop = config.moveEdgesOnTop !== false && moveOnTop;
-  const cursor = (_d = config.mouse) == null ? void 0 : _d.dragCursor;
+  const cursor = (_a = config.mouse) == null ? void 0 : _a.dragCursor;
   const dragCursor = cursor !== void 0 ? cursor : "grab";
-  const defaultMouseDownEventVerifier = (_e = config.mouse) == null ? void 0 : _e.mouseDownEventVerifier;
+  const defaultMouseDownEventVerifier = (_b = config.mouse) == null ? void 0 : _b.mouseDownEventVerifier;
   const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-  const defaultMouseUpEventVerifier = (_f = config.mouse) == null ? void 0 : _f.mouseUpEventVerifier;
+  const defaultMouseUpEventVerifier = (_c = config.mouse) == null ? void 0 : _c.mouseUpEventVerifier;
   const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
   return {
     moveOnTop,
@@ -4992,10 +5143,10 @@ const createDraggableNodesParams = (config) => {
     gridSize: config.gridSize ?? null,
     mouseDownEventVerifier,
     mouseUpEventVerifier,
-    onNodeDragStarted,
-    onNodeDrag,
+    onNodeDragStarted: ((_d = config.events) == null ? void 0 : _d.onNodeDragStarted) ?? noopFn,
+    onNodeDrag: ((_e = config.events) == null ? void 0 : _e.onNodeDrag) ?? noopFn,
     nodeDragVerifier,
-    onNodeDragFinished
+    onNodeDragFinished: ((_f = config.events) == null ? void 0 : _f.onNodeDragFinished) ?? noopFn
   };
 };
 const createShiftLimitTransformPreprocessor = (preprocessorParams) => {
@@ -5113,34 +5264,26 @@ const createTransformableViewportParams = (transformConfig) => {
     };
   }
   const shiftCursor = ((_b = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _b.cursor) !== void 0 ? transformConfig.shift.cursor : "grab";
-  const onBeforeTransformStarted = ((_c = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _c.onBeforeTransformChange) ?? (() => {
-  });
-  const onTransformFinished = ((_d = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _d.onTransformChange) ?? (() => {
-  });
-  const defaultMouseDownEventVerifier = (_e = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _e.mouseDownEventVerifier;
+  const defaultMouseDownEventVerifier = (_c = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _c.mouseDownEventVerifier;
   const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-  const defaultMouseUpEventVerifier = (_f = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _f.mouseUpEventVerifier;
+  const defaultMouseUpEventVerifier = (_d = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _d.mouseUpEventVerifier;
   const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
-  const defaultMouseWheelEventVerifier = (_g = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _g.mouseWheelEventVerifier;
+  const defaultMouseWheelEventVerifier = (_e = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _e.mouseWheelEventVerifier;
   const mouseWheelEventVerifier = defaultMouseWheelEventVerifier !== void 0 ? defaultMouseWheelEventVerifier : () => true;
   return {
     wheelSensitivity,
-    onTransformStarted: ((_h = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _h.onTransformStarted) ?? (() => {
-    }),
-    onTransformFinished: ((_i = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _i.onTransformFinished) ?? (() => {
-    }),
-    onBeforeTransformChange: onBeforeTransformStarted,
-    onTransformChange: onTransformFinished,
+    onTransformStarted: ((_f = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _f.onTransformStarted) ?? noopFn,
+    onTransformFinished: ((_g = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _g.onTransformFinished) ?? noopFn,
+    onBeforeTransformChange: ((_h = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _h.onBeforeTransformChange) ?? noopFn,
+    onTransformChange: ((_i = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _i.onTransformChange) ?? noopFn,
     transformPreprocessor,
     shiftCursor,
     mouseDownEventVerifier,
     mouseUpEventVerifier,
     mouseWheelEventVerifier,
     scaleWheelFinishTimeout: ((_j = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _j.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((_k = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _k.onResizeTransformStarted) ?? (() => {
-    }),
-    onResizeTransformFinished: ((_l = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _l.onResizeTransformFinished) ?? (() => {
-    })
+    onResizeTransformStarted: ((_k = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _k.onResizeTransformStarted) ?? noopFn,
+    onResizeTransformFinished: ((_l = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _l.onResizeTransformFinished) ?? noopFn
   };
 };
 const createContent = (radius, color) => {
@@ -5176,106 +5319,41 @@ const createBackgroundParams = (backgroundConfig) => {
     maxViewportScale: backgroundConfig.maxViewportScale ?? 10
   };
 };
-const resolveEdgeShapeFactory = (config) => {
-  if (typeof config === "function") {
-    return config;
-  }
-  switch (config.type) {
-    case "straight":
-      return () => new StraightEdgeShape({
-        color: config.color,
-        width: config.width,
-        arrowLength: config.arrowLength,
-        arrowOffset: config.arrowOffset,
-        arrowRenderer: config.arrowRenderer,
-        hasSourceArrow: config.hasSourceArrow,
-        hasTargetArrow: config.hasTargetArrow,
-        cycleSquareSide: config.cycleSquareSide,
-        roundness: config.roundness,
-        detourDistance: config.detourDistance,
-        detourDirection: config.detourDirection
-      });
-    case "horizontal":
-      return () => new HorizontalEdgeShape({
-        color: config.color,
-        width: config.width,
-        arrowLength: config.arrowLength,
-        arrowOffset: config.arrowOffset,
-        arrowRenderer: config.arrowRenderer,
-        hasSourceArrow: config.hasSourceArrow,
-        hasTargetArrow: config.hasTargetArrow,
-        cycleSquareSide: config.cycleSquareSide,
-        roundness: config.roundness,
-        detourDistance: config.detourDistance
-      });
-    case "vertical":
-      return () => new VerticalEdgeShape({
-        color: config.color,
-        width: config.width,
-        arrowLength: config.arrowLength,
-        arrowOffset: config.arrowOffset,
-        arrowRenderer: config.arrowRenderer,
-        hasSourceArrow: config.hasSourceArrow,
-        hasTargetArrow: config.hasTargetArrow,
-        cycleSquareSide: config.cycleSquareSide,
-        roundness: config.roundness,
-        detourDistance: config.detourDistance
-      });
-    case "direct":
-      return () => new DirectEdgeShape({
-        color: config.color,
-        width: config.width,
-        arrowLength: config.arrowLength,
-        arrowRenderer: config.arrowRenderer,
-        hasSourceArrow: config.hasSourceArrow,
-        hasTargetArrow: config.hasTargetArrow,
-        sourceOffset: config.sourceOffset,
-        targetOffset: config.targetOffset
-      });
-    default:
-      return () => new BezierEdgeShape({
-        color: config.color,
-        width: config.width,
-        arrowLength: config.arrowLength,
-        arrowRenderer: config.arrowRenderer,
-        hasSourceArrow: config.hasSourceArrow,
-        hasTargetArrow: config.hasTargetArrow,
-        cycleRadius: config.cycleRadius,
-        smallCycleRadius: config.smallCycleRadius,
-        curvature: config.curvature,
-        detourDistance: config.detourDistance,
-        detourDirection: config.detourDirection
-      });
-  }
-};
-const createConnectablePortsParams = (config, defaultEdgeShapeFactory, defaultDragPortDirection) => {
+const defaults$3 = Object.freeze({
+  connectionTypeResolver: () => "direct",
+  connectionPreprocessor: (request) => request,
+  connectionAllowedVerifier: () => true,
+  mouseEventVerifier: (event) => event.button === 0
+});
+const createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
   var _a, _b, _c;
-  const defaultConnectionTypeResolver = () => "direct";
-  const defaultConnectionPreprocessor = (request) => request;
-  const defaultMouseEventVerifier = (event) => event.button === 0;
-  const defaultOnAfterEdgeCreated = () => {
-  };
-  const defaultOnAfterEdgeConnectionPrevented = () => {
-  };
-  const defaultOnAfterEdgeConnectionInterrupted = () => {
-  };
+  const connectionAllowedVerifier = config.connectionAllowedVerifier ?? defaults$3.connectionAllowedVerifier;
   return {
-    connectionTypeResolver: config.connectionTypeResolver ?? defaultConnectionTypeResolver,
-    connectionPreprocessor: config.connectionPreprocessor ?? defaultConnectionPreprocessor,
-    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaultMouseEventVerifier,
-    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaultMouseEventVerifier,
-    onAfterEdgeCreated: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeCreated) ?? defaultOnAfterEdgeCreated,
-    onEdgeCreationInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeCreationInterrupted) ?? defaultOnAfterEdgeConnectionInterrupted,
-    onEdgeCreationPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeCreationPrevented) ?? defaultOnAfterEdgeConnectionPrevented,
-    dragPortDirection: config.dragPortDirection ?? defaultDragPortDirection,
-    edgeShapeFactory: config.edgeShape !== void 0 ? resolveEdgeShapeFactory(config.edgeShape) : defaultEdgeShapeFactory
+    connectionTypeResolver: config.connectionTypeResolver ?? defaults$3.connectionTypeResolver,
+    connectionAllowedVerifier,
+    draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(
+      config.dragPortDirection,
+      graph,
+      connectionAllowedVerifier
+    ),
+    edgeShapeFactory: config.edgeShape !== void 0 ? resolveEdgeShapeFactory(config.edgeShape) : defaultEdgeShapeFactory,
+    connectionPreprocessor: config.connectionPreprocessor ?? defaults$3.connectionPreprocessor,
+    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$3.mouseEventVerifier,
+    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$3.mouseEventVerifier,
+    onAfterEdgeCreated: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeCreated) ?? noopFn,
+    onEdgeCreationInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeCreationInterrupted) ?? noopFn,
+    onEdgeCreationPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeCreationPrevented) ?? noopFn
   };
 };
+const defaults$2 = Object.freeze({
+  connectionAllowedVerifier: () => true,
+  connectionPreprocessor: (request) => request,
+  // TODO: remove ctrl key
+  mouseDownEventVerifier: (event) => event.button === 0 && event.ctrlKey,
+  mouseUpEventVerifier: (event) => event.button === 0
+});
 const createDraggableEdgeParams = (config, graph) => {
   var _a, _b, _c;
-  const defaultConnectionPreprocessor = (request) => request;
-  const defaultMouseDownEventVerifier = (event) => event.button === 0 && event.ctrlKey;
-  const defaultMouseUpEventVerifier = (event) => event.button === 0;
   const defaultDraggingEdgeResolver = (portId) => {
     const edgeIds = graph.getPortAdjacentEdgeIds(portId);
     if (edgeIds.length > 0) {
@@ -5284,21 +5362,22 @@ const createDraggableEdgeParams = (config, graph) => {
       return null;
     }
   };
-  const defaultOnAfterEdgeReattached = () => {
-  };
-  const defaultOnAfterEdgeReattachPrevented = () => {
-  };
-  const defaultOnAfterEdgeReattachInterrupted = () => {
-  };
+  const connectionAllowedVerifier = config.connectionAllowedVerifier ?? defaults$2.connectionAllowedVerifier;
   return {
-    connectionPreprocessor: config.connectionPreprocessor ?? defaultConnectionPreprocessor,
-    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaultMouseDownEventVerifier,
-    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaultMouseUpEventVerifier,
+    connectionPreprocessor: config.connectionPreprocessor ?? defaults$2.connectionPreprocessor,
+    connectionAllowedVerifier,
+    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$2.mouseDownEventVerifier,
+    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$2.mouseUpEventVerifier,
     draggingEdgeResolver: config.draggingEdgeResolver ?? defaultDraggingEdgeResolver,
     draggingEdgeShapeFactory: config.draggingEdgeShape !== void 0 ? resolveEdgeShapeFactory(config.draggingEdgeShape) : null,
-    onAfterEdgeReattached: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeReattached) ?? defaultOnAfterEdgeReattached,
-    onEdgeReattachInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeReattachInterrupted) ?? defaultOnAfterEdgeReattachInterrupted,
-    onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? defaultOnAfterEdgeReattachPrevented
+    onAfterEdgeReattached: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeReattached) ?? noopFn,
+    onEdgeReattachInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeReattachInterrupted) ?? noopFn,
+    onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? noopFn,
+    draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(
+      config.dragPortDirection,
+      graph,
+      connectionAllowedVerifier
+    )
   };
 };
 const createVirtualScrollParams = (config) => {
@@ -5310,10 +5389,8 @@ const createVirtualScrollParams = (config) => {
 const createVirtualScrollHtmlViewParams = (config) => {
   var _a, _b;
   return {
-    onAfterNodeDetached: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onAfterNodeDetached) ?? (() => {
-    }),
-    onBeforeNodeAttached: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onBeforeNodeAttached) ?? (() => {
-    })
+    onAfterNodeDetached: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onAfterNodeDetached) ?? noopFn,
+    onBeforeNodeAttached: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onBeforeNodeAttached) ?? noopFn
   };
 };
 class CanvasBuilderError extends Error {
@@ -6324,26 +6401,6 @@ const sfc32 = (a, b, c, d) => {
     return (t >>> 0) / 4294967296;
   };
 };
-const forceDirectedDefaults = Object.freeze({
-  seed: "HTMLGraph is awesome",
-  maxTimeDeltaSec: 0.01,
-  nodeCharge: 1e5,
-  nodeMass: 1,
-  edgeEquilibriumLength: 300,
-  edgeStiffness: 1e3,
-  dtSec: 0.01,
-  maxIterations: 1e3,
-  convergenceVelocity: 10,
-  maxForce: 1e7,
-  nodeForceCoefficient: 1,
-  barnesHutAreaRadiusThreshold: 0.01,
-  barnesHutTheta: 1
-});
-const selectionDefaults = Object.freeze({
-  mouseDownEventVerifier: (event) => event.button === 0,
-  mouseUpEventVerifier: (event) => event.button === 0,
-  movementThreshold: 10
-});
 const resolveAnimatedLayoutAlgorithm = (config) => {
   var _a, _b;
   switch (config == null ? void 0 : config.type) {
@@ -6370,11 +6427,7 @@ const resolveAnimatedLayoutAlgorithm = (config) => {
   }
 };
 const defaults$1 = {
-  staticNodeResolver: () => false,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  }
+  staticNodeResolver: () => false
 };
 const createAnimatedLayoutParams = (config) => {
   var _a, _b;
@@ -6382,8 +6435,8 @@ const createAnimatedLayoutParams = (config) => {
   return {
     algorithm,
     staticNodeResolver: (config == null ? void 0 : config.staticNodeResolver) ?? defaults$1.staticNodeResolver,
-    onBeforeApplied: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onBeforeApplied) ?? defaults$1.onBeforeApplied,
-    onAfterApplied: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onAfterApplied) ?? defaults$1.onAfterApplied
+    onBeforeApplied: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onBeforeApplied) ?? noopFn,
+    onAfterApplied: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onAfterApplied) ?? noopFn
   };
 };
 const resolveLayoutApplyOn = (applyOn) => {
@@ -6406,10 +6459,6 @@ const resolveLayoutApplyOn = (applyOn) => {
 };
 const defaults = Object.freeze({
   staticNodeResolver: () => false,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  },
   hierarchicalLayout: {
     layerWidth: 300,
     layerSpace: 300
@@ -6616,8 +6665,8 @@ const createLayoutParams = (config) => {
     algorithm: resolveLayoutAlgorithm(config.algorithm),
     applyOn: resolveLayoutApplyOn(config.applyOn),
     staticNodeResolver: config.staticNodeResolver ?? defaults.staticNodeResolver,
-    onBeforeApplied: ((_a = config.events) == null ? void 0 : _a.onBeforeApplied) ?? defaults.onBeforeApplied,
-    onAfterApplied: ((_b = config.events) == null ? void 0 : _b.onAfterApplied) ?? defaults.onAfterApplied
+    onBeforeApplied: ((_a = config.events) == null ? void 0 : _a.onBeforeApplied) ?? noopFn,
+    onAfterApplied: ((_b = config.events) == null ? void 0 : _b.onAfterApplied) ?? noopFn
   };
 };
 const patchAnimatedLayoutDraggableNodesParams = (params, staticNodes) => {
@@ -6950,7 +6999,7 @@ class CanvasBuilder {
       const params = createConnectablePortsParams(
         this.connectablePortsConfig,
         graphControllerParams.edges.shapeFactory,
-        graphControllerParams.ports.direction
+        canvas.graph
       );
       UserConnectablePortsConfigurator.configure(
         canvas,
@@ -6998,9 +7047,7 @@ class CanvasBuilder {
       LayoutConfigurator.configure(canvas, layoutParams);
     }
     if (this.hasAnimatedLayout) {
-      let config = createAnimatedLayoutParams(
-        this.animatedLayoutConfig
-      );
+      let config = createAnimatedLayoutParams(this.animatedLayoutConfig);
       if (this.hasDraggableNodes) {
         subscribeAnimatedLayoutStaticNodesUpdate(
           canvas,
@@ -7013,11 +7060,9 @@ class CanvasBuilder {
       }
       AnimatedLayoutConfigurator.configure(canvas, config, this.window);
     }
-    const onBeforeDestroy = () => {
+    canvas.onBeforeDestroy.subscribe(() => {
       layers.destroy();
-      canvas.onBeforeDestroy.unsubscribe(onBeforeDestroy);
-    };
-    canvas.onBeforeDestroy.subscribe(onBeforeDestroy);
+    });
     return canvas;
   }
   createHtmlView(host, graphStore, viewportStore) {