@html-graph/html-graph 8.17.0 → 8.18.0

package/dist/html-graph.umd.cjs

@@ -3309,7 +3309,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         const target = event.currentTarget;
         const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-        const dragAllowed = this.params.portDragAllowedVerifier(portId, {
+        const dragAllowed = this.params.onPointerDownVerifier(portId, {
           x: mouseEvent.clientX,
           y: mouseEvent.clientY
         });
@@ -3351,7 +3351,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const touch = touchEvent.touches[0];
         const target = event.currentTarget;
         const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-        const dragAllowed = this.params.portDragAllowedVerifier(portId, {
+        const dragAllowed = this.params.onPointerDownVerifier(portId, {
           x: touch.clientX,
           y: touch.clientY
         });
@@ -3589,6 +3589,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
   }
+  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);
@@ -4310,8 +4356,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   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);
       });
@@ -4329,7 +4374,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const draggablePortsParams = {
         mouseDownEventVerifier: this.params.mouseDownEventVerifier,
         mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        portDragAllowedVerifier: (portId, cursor) => {
+        onPointerDownVerifier: (portId, cursor) => {
           const connectionType = this.params.connectionTypeResolver(portId);
           if (connectionType === null) {
             return false;
@@ -4345,13 +4390,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           this.resetDragState();
         },
         onPointerOutside: () => {
-          const staticPortId = this.staticPortId;
-          const isTargetDragging = this.isTargetDragging;
+          const params2 = this.edgeInProgress;
           this.resetDragState();
-          this.params.onEdgeCreationInterrupted({
-            staticPortId,
-            isDirect: isTargetDragging
-          });
+          this.params.onEdgeCreationInterrupted(params2);
         }
       };
       DraggablePortsConfigurator.configure(
@@ -4371,9 +4412,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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;
@@ -4391,13 +4431,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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({
@@ -4407,25 +4454,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
     }
     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.params.onEdgeCreationInterrupted({
-          staticPortId: this.staticPortId,
-          isDirect: this.isTargetDragging
-        });
+      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 request = resolveCreateEdgeRequest(
+        this.edgeInProgress,
+        targetPortId
+      );
       const connectionAllowed = this.params.connectionAllowedVerifier(request);
-      const processedRequest = this.params.connectionPreprocessor(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);
@@ -4434,23 +4480,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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
-      });
+      }).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);
@@ -4469,7 +4518,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const draggablePortsParams = {
         mouseDownEventVerifier: this.params.mouseDownEventVerifier,
         mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        portDragAllowedVerifier: (portId, cursor) => {
+        onPointerDownVerifier: (portId, cursor) => {
           return this.tryStartEdgeDragging(portId, cursor);
         },
         onPointerMove: (cursor) => {
@@ -4515,10 +4564,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       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();
@@ -4548,12 +4596,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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;
@@ -4567,30 +4619,43 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     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,
@@ -4619,16 +4684,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         });
       }
     }
-    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) {
@@ -4993,6 +5048,87 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   });
   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 nodeDragVerifier = config.nodeDragVerifier ?? (() => true);
@@ -5187,102 +5323,36 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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 defaults$3 = Object.freeze({
     connectionTypeResolver: () => "direct",
     connectionPreprocessor: (request) => request,
     connectionAllowedVerifier: () => true,
     mouseEventVerifier: (event) => event.button === 0
   });
-  const createConnectablePortsParams = (config, defaultEdgeShapeFactory, defaultDragPortDirection) => {
+  const createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
     var _a, _b, _c;
+    const connectionAllowedVerifier = config.connectionAllowedVerifier ?? defaults$3.connectionAllowedVerifier;
     return {
       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,
-      connectionAllowedVerifier: config.connectionAllowedVerifier ?? defaults$3.connectionAllowedVerifier,
       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,
-      dragPortDirection: config.dragPortDirection ?? defaultDragPortDirection,
-      edgeShapeFactory: config.edgeShape !== void 0 ? resolveEdgeShapeFactory(config.edgeShape) : defaultEdgeShapeFactory
+      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
   });
@@ -5296,16 +5366,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return null;
       }
     };
+    const connectionAllowedVerifier = config.connectionAllowedVerifier ?? defaults$2.connectionAllowedVerifier;
     return {
       connectionPreprocessor: config.connectionPreprocessor ?? defaults$2.connectionPreprocessor,
-      connectionAllowedVerifier: config.connectionAllowedVerifier ?? defaults$2.connectionAllowedVerifier,
+      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) ?? noopFn,
       onEdgeReattachInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeReattachInterrupted) ?? noopFn,
-      onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? noopFn
+      onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? noopFn,
+      draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(
+        config.dragPortDirection,
+        graph,
+        connectionAllowedVerifier
+      )
     };
   };
   const createVirtualScrollParams = (config) => {
@@ -6927,7 +7003,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const params = createConnectablePortsParams(
           this.connectablePortsConfig,
           graphControllerParams.edges.shapeFactory,
-          graphControllerParams.ports.direction
+          canvas.graph
         );
         UserConnectablePortsConfigurator.configure(
           canvas,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "8.17.0",
+  "version": "8.18.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",