@html-graph/html-graph 8.17.0 → 8.18.1

package/dist/html-graph.js

@@ -619,7 +619,7 @@ const canvasErrorText = Object.freeze({
   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`,
@@ -1471,48 +1471,52 @@ const createRoundedPath = (path, roundness) => {
   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 }
   };
 };
@@ -1536,14 +1540,7 @@ class HorizontalEdgePath {
       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 },
@@ -1552,21 +1549,10 @@ class HorizontalEdgePath {
     );
     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;
   }
 }
@@ -1683,48 +1669,52 @@ class StraightEdgePath {
   }
 }
 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 }
   };
 };
@@ -1748,14 +1738,7 @@ class VerticalEdgePath {
       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 },
@@ -1764,21 +1747,10 @@ class VerticalEdgePath {
     );
     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;
   }
 }
@@ -2293,6 +2265,9 @@ class BezierEdgeShape {
     this.pathShape.render(params);
   }
 }
+const horizontalizeDirection = (direction) => {
+  return Math.cos(direction) > 0 ? 0 : Math.PI;
+};
 class HorizontalEdgeShape {
   constructor(params) {
     __publicField(this, "svg");
@@ -2373,7 +2348,18 @@ class HorizontalEdgeShape {
     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 {
@@ -2462,6 +2448,10 @@ class StraightEdgeShape {
     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");
@@ -2542,7 +2532,18 @@ class VerticalEdgeShape {
     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 {
@@ -3229,13 +3230,11 @@ class ViewportController {
         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);
       }
@@ -3305,7 +3304,7 @@ class DraggablePortsConfigurator {
       }
       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
       });
@@ -3347,7 +3346,7 @@ class DraggablePortsConfigurator {
       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
       });
@@ -3585,6 +3584,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);
@@ -4306,8 +4351,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);
     });
@@ -4325,7 +4369,7 @@ class UserConnectablePortsConfigurator {
     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;
@@ -4341,13 +4385,9 @@ class UserConnectablePortsConfigurator {
         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(
@@ -4367,9 +4407,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;
@@ -4387,13 +4426,23 @@ class UserConnectablePortsConfigurator {
       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({
@@ -4403,25 +4452,24 @@ 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.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);
@@ -4430,23 +4478,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
-    });
+    }).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);
@@ -4465,7 +4516,7 @@ class UserDraggableEdgesConfigurator {
     const draggablePortsParams = {
       mouseDownEventVerifier: this.params.mouseDownEventVerifier,
       mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-      portDragAllowedVerifier: (portId, cursor) => {
+      onPointerDownVerifier: (portId, cursor) => {
         return this.tryStartEdgeDragging(portId, cursor);
       },
       onPointerMove: (cursor) => {
@@ -4511,10 +4562,9 @@ class UserDraggableEdgesConfigurator {
     }
     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();
@@ -4544,12 +4594,18 @@ class UserDraggableEdgesConfigurator {
       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;
@@ -4563,30 +4619,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,
@@ -4615,16 +4684,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) {
@@ -4989,6 +5048,87 @@ const selectionDefaults = Object.freeze({
 });
 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);
@@ -5183,102 +5323,36 @@ 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 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
 });
@@ -5292,16 +5366,22 @@ const createDraggableEdgeParams = (config, graph) => {
       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) => {
@@ -6923,7 +7003,7 @@ class CanvasBuilder {
       const params = createConnectablePortsParams(
         this.connectablePortsConfig,
         graphControllerParams.edges.shapeFactory,
-        graphControllerParams.ports.direction
+        canvas.graph
       );
       UserConnectablePortsConfigurator.configure(
         canvas,