@html-graph/html-graph 8.17.0 → 8.18.0

package/README.md

@@ -30,9 +30,9 @@ import { CanvasBuilder } from "@html-graph/html-graph";
 const element = document.getElementById("canvas");
 
 const canvas = new CanvasBuilder(element)
-  .enableUserTransformableViewport()
-  .enableUserDraggableNodes()
-  .enableBackground()
+  .enableUserTransformableViewport() // Enables viewport pan and zoom
+  .enableUserDraggableNodes() // Enables draggable nodes
+  .enableBackground() // Renders background
   .build();
 ```
 

package/dist/html-graph.d.ts

@@ -291,17 +291,14 @@ export declare type CenterFn = (width: number, height: number) => Point;
 export declare interface ConnectablePortsConfig {
     readonly edgeShape?: EdgeShapeConfig;
     readonly connectionTypeResolver?: ConnectionTypeResolver;
-    readonly connectionPreprocessor?: ConnectionPreprocessor;
     readonly connectionAllowedVerifier?: ConnectionAllowedVerifier;
+    readonly connectionPreprocessor?: ConnectionPreprocessor;
     readonly mouseDownEventVerifier?: MouseEventVerifier;
     readonly mouseUpEventVerifier?: MouseEventVerifier;
-    readonly dragPortDirection?: number | undefined;
+    readonly dragPortDirection?: DraggingPortDirectionConfig;
     readonly events?: {
         readonly onAfterEdgeCreated?: (edgeId: Identifier) => void;
-        readonly onEdgeCreationInterrupted?: (params: {
-            readonly staticPortId: Identifier;
-            readonly isDirect: boolean;
-        }) => void;
+        readonly onEdgeCreationInterrupted?: (params: EdgeCreationInProgressParams) => void;
         readonly onEdgeCreationPrevented?: (request: AddEdgeRequest) => void;
     };
 }
@@ -380,13 +377,14 @@ declare interface DotsRenderer {
     readonly color?: string;
 }
 
-declare interface DraggableEdgesConfig {
+export declare interface DraggableEdgesConfig {
     readonly connectionPreprocessor?: ConnectionPreprocessor;
     readonly connectionAllowedVerifier?: ConnectionAllowedVerifier;
     readonly mouseDownEventVerifier?: MouseEventVerifier;
     readonly mouseUpEventVerifier?: MouseEventVerifier;
     readonly draggingEdgeResolver?: DraggingEdgeResolver;
     readonly draggingEdgeShape?: EdgeShapeConfig;
+    readonly dragPortDirection?: DraggingPortDirectionConfig;
     readonly events?: {
         readonly onAfterEdgeReattached?: (edgeId: Identifier) => void;
         readonly onEdgeReattachInterrupted?: (edge: GraphEdge & {
@@ -415,6 +413,13 @@ export declare interface DraggableNodesConfig {
 
 export declare type DraggingEdgeResolver = (portId: Identifier) => Identifier | null;
 
+declare type DraggingPortDirectionConfig = number | undefined | "closest-connectable-port";
+
+export declare interface EdgeCreationInProgressParams {
+    readonly staticPortId: Identifier;
+    readonly isDirect: boolean;
+}
+
 declare interface EdgePath {
     readonly path: string;
     readonly midpoint: Point;
@@ -771,11 +776,7 @@ export declare interface LayoutAlgorithmParams {
     readonly viewport: Viewport;
 }
 
-export declare type LayoutApplyOn = {
-    type: "topologyChangeMacrotask";
-} | {
-    type: "topologyChangeMicrotask";
-} | EventSubject<void>;
+export declare type LayoutApplyOn = TopologyChangeMacrotask | TopologyChangeMicrotask | EventSubject<void>;
 
 export declare interface LayoutConfig {
     readonly algorithm?: LayoutAlgorithmConfig | undefined;
@@ -946,6 +947,18 @@ export declare interface StructuredEdgeShape extends EdgeShape {
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
 }
 
+/**
+ * @deprecated
+ * use topologyChangeMicrotask instead
+ */
+declare type TopologyChangeMacrotask = {
+    type: "topologyChangeMacrotask";
+};
+
+declare type TopologyChangeMicrotask = {
+    type: "topologyChangeMicrotask";
+};
+
 export declare type TransformDeclaration = {
     readonly a?: number | undefined;
     readonly b?: number | undefined;

package/dist/html-graph.js

@@ -3305,7 +3305,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 +3347,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 +3585,52 @@ class UserSelectableElementsConfigurator {
     }
   }
 }
+const resolveCreateEdgeRequest = (params, targetPortId) => {
+  return {
+    from: params.isDirect ? params.staticPortId : targetPortId,
+    to: params.isDirect ? targetPortId : params.staticPortId
+  };
+};
+class ClosestConnectablePortDraggingPortDirectionResolver {
+  constructor(graph, connectionAllowedVerifier) {
+    this.graph = graph;
+    this.connectionAllowedVerifier = connectionAllowedVerifier;
+  }
+  resolve(params) {
+    let closestDirection = void 0;
+    let closestDistance = Infinity;
+    const { cursor } = params;
+    this.graph.getAllPortIds().forEach((portId) => {
+      const { element, direction, nodeId } = this.graph.getPort(portId);
+      const { x, y } = this.graph.getNode(nodeId);
+      if (x === null || y === null) {
+        return;
+      }
+      const request = resolveCreateEdgeRequest(params, portId);
+      if (!this.connectionAllowedVerifier(request)) {
+        return;
+      }
+      const { top, left, width, height } = element.getBoundingClientRect();
+      const center = { x: left + width / 2, y: top + height / 2 };
+      const dx = cursor.x - center.x;
+      const dy = cursor.y - center.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestDirection = direction;
+      }
+    });
+    return closestDirection;
+  }
+}
+class ConstantDraggingPortDirectionResolver {
+  constructor(direction) {
+    this.direction = direction;
+  }
+  resolve() {
+    return this.direction;
+  }
+}
 class UserDraggableNodesConfigurator {
   constructor(canvas, element, window2, pointInsideVerifier, params) {
     __publicField(this, "grabbedNode", null);
@@ -4306,8 +4352,7 @@ class BackgroundConfigurator {
 class UserConnectablePortsConfigurator {
   constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
     __publicField(this, "overlayCanvas");
-    __publicField(this, "staticPortId", null);
-    __publicField(this, "isTargetDragging", true);
+    __publicField(this, "edgeInProgress", null);
     __publicField(this, "onEdgeCreated", (edgeId) => {
       this.params.onAfterEdgeCreated(edgeId);
     });
@@ -4325,7 +4370,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 +4386,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 +4408,8 @@ class UserConnectablePortsConfigurator {
       params
     );
   }
-  grabPort(portId, cursor, connectionType) {
-    const port = this.canvas.graph.getPort(portId);
-    this.staticPortId = portId;
+  grabPort(staticPortId, cursor, connectionType) {
+    const port = this.canvas.graph.getPort(staticPortId);
     const portRect = port.element.getBoundingClientRect();
     const portX = portRect.x + portRect.width / 2;
     const portY = portRect.y + portRect.height / 2;
@@ -4387,13 +4427,20 @@ class UserConnectablePortsConfigurator {
       portCoords: portPoint,
       portDirection: port.direction
     };
+    const isDirect = connectionType === "direct";
+    this.edgeInProgress = {
+      staticPortId,
+      isDirect
+    };
     const draggingParams = {
       overlayNodeId: OverlayId.DraggingNodeId,
       portCoords: cursorPoint,
-      portDirection: this.params.dragPortDirection
+      portDirection: this.params.draggingPortDirectionResolver.resolve({
+        cursor,
+        ...this.edgeInProgress
+      }) ?? port.direction
     };
-    this.isTargetDragging = connectionType === "direct";
-    const [sourceParams, targetParams] = this.isTargetDragging ? [staticParams, draggingParams] : [draggingParams, staticParams];
+    const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(targetParams));
     this.overlayCanvas.addEdge({
@@ -4403,25 +4450,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 +4476,26 @@ class UserConnectablePortsConfigurator {
       this.params.onEdgeCreationPrevented(request);
     }
   }
-  moveDraggingPort(dragPoint) {
+  moveDraggingPort(cursor) {
     const canvasRect = this.overlayLayer.getBoundingClientRect();
     const nodeContentCoords = this.canvas.viewport.createContentCoords({
-      x: dragPoint.x - canvasRect.x,
-      y: dragPoint.y - canvasRect.y
+      x: cursor.x - canvasRect.x,
+      y: cursor.y - canvasRect.y
+    });
+    const direction = this.params.draggingPortDirectionResolver.resolve({
+      cursor,
+      ...this.edgeInProgress
     });
     this.overlayCanvas.updateNode(OverlayId.DraggingNodeId, {
       x: nodeContentCoords.x,
       y: nodeContentCoords.y
-    });
+    }).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 +4514,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 +4560,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 +4592,16 @@ class UserDraggableEdgesConfigurator {
       portCoords: staticPoint,
       portDirection: staticPort.direction
     };
+    const direction = this.params.draggingPortDirectionResolver.resolve({
+      cursor,
+      ...this.edgeInProgress
+    });
     const draggingParams = {
       overlayNodeId: OverlayId.DraggingNodeId,
       portCoords: draggingPoint,
-      portDirection: draggingPort.direction
+      portDirection: direction ?? draggingPort.direction
     };
-    const [sourceParams, targetParams] = this.isTargetDragging ? [staticParams, draggingParams] : [draggingParams, staticParams];
+    const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
     this.overlayCanvas.addNode(createAddNodeOverlayRequest(targetParams));
     const overlayEdgeShape = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(OverlayId.EdgeId) : edge.shape;
@@ -4563,30 +4615,43 @@ class UserDraggableEdgesConfigurator {
   }
   resetDragState() {
     this.draggingEdgePayload = null;
-    this.staticPortId = null;
-    this.isTargetDragging = true;
+    this.edgeInProgress = null;
     this.overlayCanvas.clear();
   }
-  moveDraggingPort(dragPoint) {
+  moveDraggingPort(cursor) {
     const canvasRect = this.overlayLayer.getBoundingClientRect();
     const nodeViewCoords = {
-      x: dragPoint.x - canvasRect.x,
-      y: dragPoint.y - canvasRect.y
+      x: cursor.x - canvasRect.x,
+      y: cursor.y - canvasRect.y
     };
     const nodeContentCoords = this.canvas.viewport.createContentCoords(nodeViewCoords);
+    const direction = this.params.draggingPortDirectionResolver.resolve({
+      cursor,
+      ...this.edgeInProgress
+    });
     this.overlayCanvas.updateNode(OverlayId.DraggingNodeId, {
       x: nodeContentCoords.x,
       y: nodeContentCoords.y
-    });
+    }).updatePort(OverlayId.DraggingNodeId, { direction });
   }
   tryCreateConnection(cursor) {
     const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
     this.overlayCanvas.removeEdge(OverlayId.EdgeId);
     if (draggingPortId === null) {
-      this.handleEdgeReattachInterrupted();
+      const edge2 = this.draggingEdgePayload;
+      this.params.onEdgeReattachInterrupted({
+        id: edge2.id,
+        from: edge2.from,
+        to: edge2.to,
+        shape: edge2.shape,
+        priority: edge2.priority
+      });
       return;
     }
-    const [from, to] = this.isTargetDragging ? [this.staticPortId, draggingPortId] : [draggingPortId, this.staticPortId];
+    const { from, to } = resolveCreateEdgeRequest(
+      this.edgeInProgress,
+      draggingPortId
+    );
     const edge = this.draggingEdgePayload;
     const request = {
       id: edge.id,
@@ -4615,16 +4680,6 @@ class UserDraggableEdgesConfigurator {
       });
     }
   }
-  handleEdgeReattachInterrupted() {
-    const edge = this.draggingEdgePayload;
-    this.params.onEdgeReattachInterrupted({
-      id: edge.id,
-      from: edge.from,
-      to: edge.to,
-      shape: edge.shape,
-      priority: edge.priority
-    });
-  }
 }
 class ManualLayoutApplicationStrategyConfigurator {
   constructor(applier, trigger) {
@@ -4989,6 +5044,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 +5319,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 +5362,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 +6999,7 @@ class CanvasBuilder {
       const params = createConnectablePortsParams(
         this.connectablePortsConfig,
         graphControllerParams.edges.shapeFactory,
-        graphControllerParams.ports.direction
+        canvas.graph
       );
       UserConnectablePortsConfigurator.configure(
         canvas,