@html-graph/html-graph 8.17.0 → 8.18.1

package/dist/html-graph.umd.cjs

@@ -623,7 +623,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     removeNonexistentPort: (portId) => `Failed to remove port with ID ${JSON.stringify(portId)} because it does not exist`,
     accessNonexistentEdge: (edgeId) => `Failed to access edge with ID ${JSON.stringify(edgeId)} because it does not exist`,
     addEdgeWithExistingId: (edgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because an edge with this ID already exists`,
-    addEdgeWithElementInUse: (edgeId, useEdgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because its SVG element is already attached to edge with ID ${JSON.stringify(useEdgeId)}`,
+    addEdgeWithElementInUse: (edgeId, useEdgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because its element is already attached to edge with ID ${JSON.stringify(useEdgeId)}`,
     addEdgeFromNonexistentPort: (edgeId, portId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} from port with ID ${JSON.stringify(portId)} because the port does not exist`,
     addEdgeToNonexistentPort: (edgeId, portId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} to port with ID ${JSON.stringify(portId)} because the port does not exist`,
     updateNonexistentEdge: (edgeId) => `Failed to update edge with ID ${JSON.stringify(edgeId)} because it does not exist`,
@@ -1475,48 +1475,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return parts.join(" ");
   };
   const createLine$1 = (from, to) => {
-    const horizontalLineDir = to.x - from.x >= 0;
+    const fromLine = from.linePoint;
+    const toLine = to.linePoint;
+    const horizontalLineDir = toLine.x - fromLine.x >= 0;
     const fromPortDir = from.dirX >= 0;
     const toPortDir = to.dirX >= 0;
     const isSameDirPorts = fromPortDir === toPortDir;
     if (isSameDirPorts) {
       const isSameDirLine = fromPortDir === horizontalLineDir;
-      const centerX = (from.x + to.x) / 2;
-      const centerY2 = (from.y + to.y) / 2;
+      const centerX = (fromLine.x + toLine.x) / 2;
+      const centerY2 = (fromLine.y + toLine.y) / 2;
       const midpoint = { x: centerX, y: centerY2 };
       if (isSameDirLine) {
         return {
           points: [
-            { x: from.x, y: from.y },
-            { x: midpoint.x, y: from.y },
-            { x: midpoint.x, y: to.y },
-            { x: to.x, y: to.y }
+            from.arrowPoint,
+            { x: midpoint.x, y: fromLine.y },
+            { x: midpoint.x, y: toLine.y },
+            to.arrowPoint
           ],
           midpoint
         };
       }
       return {
         points: [
-          { x: from.x, y: from.y },
-          { x: from.x, y: midpoint.y },
-          { x: to.x, y: midpoint.y },
-          { x: to.x, y: to.y }
+          from.arrowPoint,
+          fromLine,
+          { x: fromLine.x, y: midpoint.y },
+          { x: toLine.x, y: midpoint.y },
+          toLine,
+          to.arrowPoint
         ],
         midpoint
       };
     }
     const isSameSourceDir = fromPortDir === horizontalLineDir;
-    const centerY = (from.y + to.y) / 2;
+    const centerY = (fromLine.y + toLine.y) / 2;
     if (isSameSourceDir) {
-      const joint2 = { x: to.x, y: from.y };
+      const joint2 = { x: toLine.x, y: fromLine.y };
       return {
-        points: [{ x: from.x, y: from.y }, joint2, { x: to.x, y: to.y }],
+        points: [from.arrowPoint, joint2, toLine, to.arrowPoint],
         midpoint: { x: joint2.x, y: centerY }
       };
     }
-    const joint = { x: from.x, y: to.y };
+    const joint = { x: fromLine.x, y: toLine.y };
     return {
-      points: [{ x: from.x, y: from.y }, joint, { x: to.x, y: to.y }],
+      points: [from.arrowPoint, fromLine, joint, to.arrowPoint],
       midpoint: { x: joint.x, y: centerY }
     };
   };
@@ -1540,14 +1544,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         fromDir,
         from
       ) : from;
-      const endArrow = hasTargetArrow ? createRotatedPoint(
-        {
-          x: to.x - arrowLength,
-          y: to.y
-        },
-        toDir,
-        to
-      ) : to;
+      const endArrow = hasTargetArrow ? createRotatedPoint({ x: to.x - arrowLength, y: to.y }, toDir, to) : to;
       const gap = arrowLength + arrowOffset;
       const beginLine = createRotatedPoint(
         { x: from.x + gap, y: from.y },
@@ -1556,21 +1553,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       );
       const endLine = createRotatedPoint({ x: to.x - gap, y: to.y }, toDir, to);
       const line = createLine$1(
-        {
-          x: beginLine.x,
-          y: beginLine.y,
-          dirX: fromDir.x
-        },
-        {
-          x: endLine.x,
-          y: endLine.y,
-          dirX: toDir.x
-        }
-      );
-      this.path = createRoundedPath(
-        [beginArrow, ...line.points, endArrow],
-        roundness
+        { arrowPoint: beginArrow, linePoint: beginLine, dirX: fromDir.x },
+        { arrowPoint: endArrow, linePoint: endLine, dirX: toDir.x }
       );
+      this.path = createRoundedPath(line.points, roundness);
       this.midpoint = line.midpoint;
     }
   }
@@ -1687,48 +1673,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   const createLine = (from, to) => {
-    const verticalLineDir = to.y - from.y >= 0;
+    const fromLine = from.linePoint;
+    const toLine = to.linePoint;
+    const verticalLineDir = toLine.y - fromLine.y >= 0;
     const fromPortDir = from.dirY >= 0;
     const toPortDir = to.dirY >= 0;
     const isSameDirPorts = fromPortDir === toPortDir;
     if (isSameDirPorts) {
       const isSameDirLine = fromPortDir === verticalLineDir;
-      const centerX2 = (from.x + to.x) / 2;
-      const centerY = (from.y + to.y) / 2;
+      const centerX2 = (fromLine.x + toLine.x) / 2;
+      const centerY = (fromLine.y + toLine.y) / 2;
       const midpoint = { x: centerX2, y: centerY };
       if (isSameDirLine) {
         return {
           points: [
-            { x: from.x, y: from.y },
-            { x: from.x, y: midpoint.y },
-            { x: to.x, y: midpoint.y },
-            { x: to.x, y: to.y }
+            from.arrowPoint,
+            { x: fromLine.x, y: midpoint.y },
+            { x: toLine.x, y: midpoint.y },
+            to.arrowPoint
           ],
           midpoint
         };
       }
       return {
         points: [
-          { x: from.x, y: from.y },
-          { x: midpoint.x, y: from.y },
-          { x: midpoint.x, y: to.y },
-          { x: to.x, y: to.y }
+          from.arrowPoint,
+          fromLine,
+          { x: midpoint.x, y: fromLine.y },
+          { x: midpoint.x, y: toLine.y },
+          toLine,
+          to.arrowPoint
         ],
         midpoint
       };
     }
     const isSameSourceDir = fromPortDir === verticalLineDir;
-    const centerX = (from.x + to.x) / 2;
+    const centerX = (fromLine.x + toLine.x) / 2;
     if (isSameSourceDir) {
-      const joint2 = { x: from.x, y: to.y };
+      const joint2 = { x: fromLine.x, y: toLine.y };
       return {
-        points: [{ x: from.x, y: from.y }, joint2, { x: to.x, y: to.y }],
+        points: [from.arrowPoint, joint2, toLine, to.arrowPoint],
         midpoint: { x: centerX, y: joint2.y }
       };
     }
-    const joint = { x: to.x, y: from.y };
+    const joint = { x: toLine.x, y: fromLine.y };
     return {
-      points: [{ x: from.x, y: from.y }, joint, { x: to.x, y: to.y }],
+      points: [from.arrowPoint, fromLine, joint, to.arrowPoint],
       midpoint: { x: centerX, y: joint.y }
     };
   };
@@ -1752,14 +1742,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         fromDir,
         from
       ) : from;
-      const endArrow = hasTargetArrow ? createRotatedPoint(
-        {
-          x: to.x - arrowLength,
-          y: to.y
-        },
-        toDir,
-        to
-      ) : to;
+      const endArrow = hasTargetArrow ? createRotatedPoint({ x: to.x - arrowLength, y: to.y }, toDir, to) : to;
       const gap = arrowLength + arrowOffset;
       const beginLine = createRotatedPoint(
         { x: from.x + gap, y: from.y },
@@ -1768,21 +1751,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       );
       const endLine = createRotatedPoint({ x: to.x - gap, y: to.y }, toDir, to);
       const line = createLine(
-        {
-          x: beginLine.x,
-          y: beginLine.y,
-          dirY: fromDir.y
-        },
-        {
-          x: endLine.x,
-          y: endLine.y,
-          dirY: toDir.y
-        }
-      );
-      this.path = createRoundedPath(
-        [beginArrow, ...line.points, endArrow],
-        roundness
+        { arrowPoint: beginArrow, linePoint: beginLine, dirY: fromDir.y },
+        { arrowPoint: endArrow, linePoint: endLine, dirY: toDir.y }
       );
+      this.path = createRoundedPath(line.points, roundness);
       this.midpoint = line.midpoint;
     }
   }
@@ -2297,6 +2269,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.pathShape.render(params);
     }
   }
+  const horizontalizeDirection = (direction) => {
+    return Math.cos(direction) > 0 ? 0 : Math.PI;
+  };
   class HorizontalEdgeShape {
     constructor(params) {
       __publicField(this, "svg");
@@ -2377,7 +2352,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.onAfterRender = this.pathShape.onAfterRender;
     }
     render(params) {
-      this.pathShape.render(params);
+      const { from, to, category } = params;
+      this.pathShape.render({
+        category,
+        from: {
+          ...from,
+          direction: horizontalizeDirection(from.direction)
+        },
+        to: {
+          ...to,
+          direction: horizontalizeDirection(to.direction)
+        }
+      });
     }
   }
   class StraightEdgeShape {
@@ -2466,6 +2452,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.pathShape.render(params);
     }
   }
+  const pi2 = Math.PI / 2;
+  const verticalizeDirection = (direction) => {
+    return Math.sin(direction) > 0 ? pi2 : -pi2;
+  };
   class VerticalEdgeShape {
     constructor(params) {
       __publicField(this, "svg");
@@ -2546,7 +2536,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.onAfterRender = this.pathShape.onAfterRender;
     }
     render(params) {
-      this.pathShape.render(params);
+      const { from, to, category } = params;
+      this.pathShape.render({
+        category,
+        from: {
+          ...from,
+          direction: verticalizeDirection(from.direction)
+        },
+        to: {
+          ...to,
+          direction: verticalizeDirection(to.direction)
+        }
+      });
     }
   }
   class DirectEdgeShape {
@@ -3233,13 +3234,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           start = timestamp;
         }
         const progress = Math.min((timestamp - start) / duration, 1);
-        if (progress <= 1) {
-          this.viewportStore.patchViewportMatrix({
-            scale: previousViewportMatrix.scale + progress * deltaMatrix.scale,
-            x: previousViewportMatrix.x + progress * deltaMatrix.x,
-            y: previousViewportMatrix.y + progress * deltaMatrix.y
-          });
-        }
+        this.viewportStore.patchViewportMatrix({
+          scale: previousViewportMatrix.scale + progress * deltaMatrix.scale,
+          x: previousViewportMatrix.x + progress * deltaMatrix.x,
+          y: previousViewportMatrix.y + progress * deltaMatrix.y
+        });
         if (progress < 1) {
           this.win.requestAnimationFrame(step);
         }
@@ -3309,7 +3308,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 +3350,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 +3588,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 +4355,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 +4373,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 +4389,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 +4411,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 +4430,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         portCoords: portPoint,
         portDirection: port.direction
       };
+      const isDirect = connectionType === "direct";
+      this.edgeInProgress = {
+        staticPortId,
+        isDirect
+      };
+      const resolvedDirection = this.params.draggingPortDirectionResolver.resolve(
+        {
+          cursor,
+          ...this.edgeInProgress
+        }
+      );
       const draggingParams = {
         overlayNodeId: OverlayId.DraggingNodeId,
         portCoords: cursorPoint,
-        portDirection: this.params.dragPortDirection
+        portDirection: resolvedDirection ?? 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 +4456,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 +4482,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 +4520,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 +4566,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 +4598,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         portCoords: staticPoint,
         portDirection: staticPort.direction
       };
+      const resolvedDirection = this.params.draggingPortDirectionResolver.resolve(
+        {
+          cursor,
+          ...this.edgeInProgress
+        }
+      );
       const draggingParams = {
         overlayNodeId: OverlayId.DraggingNodeId,
         portCoords: draggingPoint,
-        portDirection: draggingPort.direction
+        portDirection: resolvedDirection ?? 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 +4623,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 +4688,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 +5052,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 +5327,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 +5370,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 +7007,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,