@html-graph/html-graph 8.16.0 → 8.18.0

package/dist/html-graph.umd.cjs

@@ -2691,6 +2691,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "line");
       __publicField(this, "sourceArrow");
       __publicField(this, "targetArrow");
+      // TODO: make private
+      /**
+       * @deprecated
+       * do use shape.svg instead
+       */
       __publicField(this, "handle", createEdgeGroup());
       __publicField(this, "onAfterRender");
       __publicField(this, "interactiveLine");
@@ -3304,11 +3309,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         const target = event.currentTarget;
         const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-        const accepted = this.params.onPortPointerDown(portId, {
+        const dragAllowed = this.params.onPointerDownVerifier(portId, {
           x: mouseEvent.clientX,
           y: mouseEvent.clientY
         });
-        if (!accepted) {
+        if (!dragAllowed) {
           return;
         }
         event.stopPropagation();
@@ -3325,8 +3330,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           event.clientY
         );
         if (!isInside) {
-          this.params.onPointerMoveOutside();
-          this.stopMouseDrag();
+          this.removeWindowMouseListeners();
+          this.params.onPointerOutside();
           return;
         }
         this.params.onPointerMove({ x: event.clientX, y: event.clientY });
@@ -3335,8 +3340,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (!this.params.mouseUpEventVerifier(event)) {
           return;
         }
+        this.removeWindowMouseListeners();
         this.params.onPointerUp({ x: event.clientX, y: event.clientY });
-        this.stopMouseDrag();
       });
       __publicField(this, "onPortTouchStart", (event) => {
         const touchEvent = event;
@@ -3346,11 +3351,11 @@ 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 accepted = this.params.onPortPointerDown(portId, {
+        const dragAllowed = this.params.onPointerDownVerifier(portId, {
           x: touch.clientX,
           y: touch.clientY
         });
-        if (!accepted) {
+        if (!dragAllowed) {
           return;
         }
         event.stopPropagation();
@@ -3371,16 +3376,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           touch.clientY
         );
         if (!isInside) {
-          this.params.onPointerMoveOutside();
-          this.stopTouchDrag();
+          this.removeWindowTouchListeners();
+          this.params.onPointerOutside();
           return;
         }
         this.params.onPointerMove({ x: touch.clientX, y: touch.clientY });
       });
       __publicField(this, "onWindowTouchFinish", (event) => {
+        this.removeWindowTouchListeners();
         const touch = event.changedTouches[0];
         this.params.onPointerUp({ x: touch.clientX, y: touch.clientY });
-        this.stopTouchDrag();
       });
       __publicField(this, "reset", () => {
         this.canvas.graph.getAllPortIds().forEach((portId) => {
@@ -3389,10 +3394,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         });
       });
       __publicField(this, "revert", () => {
-        this.params.onStopDrag();
-        this.reset();
         this.removeWindowMouseListeners();
         this.removeWindowTouchListeners();
+        this.reset();
       });
       this.canvas = canvas;
       this.window = window2;
@@ -3418,14 +3422,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       element.removeEventListener("mousedown", this.onPortMouseDown);
       element.removeEventListener("touchstart", this.onPortTouchStart);
     }
-    stopMouseDrag() {
-      this.params.onStopDrag();
-      this.removeWindowMouseListeners();
-    }
-    stopTouchDrag() {
-      this.params.onStopDrag();
-      this.removeWindowTouchListeners();
-    }
     removeWindowMouseListeners() {
       this.window.removeEventListener("mousemove", this.onWindowMouseMove);
       this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -3436,47 +3432,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
     }
   }
-  class LayoutApplier {
-    constructor(canvas, layoutAlgorithm, params) {
-      this.canvas = canvas;
-      this.layoutAlgorithm = layoutAlgorithm;
-      this.params = params;
-    }
-    apply() {
-      const coords = this.layoutAlgorithm.calculateCoordinates({
-        graph: this.canvas.graph,
-        viewport: this.canvas.viewport
-      });
-      this.params.onBeforeApplied();
-      coords.forEach((point, nodeId) => {
-        if (!this.params.staticNodeResolver(nodeId)) {
-          this.canvas.updateNode(nodeId, point);
-        }
-      });
-      this.params.onAfterApplied();
-    }
-  }
-  class AnimatedLayoutApplier {
-    constructor(canvas, layoutAlgorithm, params) {
-      this.canvas = canvas;
-      this.layoutAlgorithm = layoutAlgorithm;
-      this.params = params;
-    }
-    apply(dt) {
-      const coords = this.layoutAlgorithm.calculateNextCoordinates({
-        graph: this.canvas.graph,
-        viewport: this.canvas.viewport,
-        dt
-      });
-      this.params.onBeforeApplied();
-      coords.forEach((point, nodeId) => {
-        if (!this.params.staticNodeResolver(nodeId)) {
-          this.canvas.updateNode(nodeId, point);
-        }
-      });
-      this.params.onAfterApplied();
-    }
-  }
   class EventTagger {
     constructor() {
       __publicField(this, "field", "_htmlGraphTags");
@@ -3634,6 +3589,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
   }
+  const resolveCreateEdgeRequest = (params, targetPortId) => {
+    return {
+      from: params.isDirect ? params.staticPortId : targetPortId,
+      to: params.isDirect ? targetPortId : params.staticPortId
+    };
+  };
+  class ClosestConnectablePortDraggingPortDirectionResolver {
+    constructor(graph, connectionAllowedVerifier) {
+      this.graph = graph;
+      this.connectionAllowedVerifier = connectionAllowedVerifier;
+    }
+    resolve(params) {
+      let closestDirection = void 0;
+      let closestDistance = Infinity;
+      const { cursor } = params;
+      this.graph.getAllPortIds().forEach((portId) => {
+        const { element, direction, nodeId } = this.graph.getPort(portId);
+        const { x, y } = this.graph.getNode(nodeId);
+        if (x === null || y === null) {
+          return;
+        }
+        const request = resolveCreateEdgeRequest(params, portId);
+        if (!this.connectionAllowedVerifier(request)) {
+          return;
+        }
+        const { top, left, width, height } = element.getBoundingClientRect();
+        const center = { x: left + width / 2, y: top + height / 2 };
+        const dx = cursor.x - center.x;
+        const dy = cursor.y - center.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestDirection = direction;
+        }
+      });
+      return closestDirection;
+    }
+  }
+  class ConstantDraggingPortDirectionResolver {
+    constructor(direction) {
+      this.direction = direction;
+    }
+    resolve() {
+      return this.direction;
+    }
+  }
   class UserDraggableNodesConfigurator {
     constructor(canvas, element, window2, pointInsideVerifier, params) {
       __publicField(this, "grabbedNode", null);
@@ -4355,8 +4356,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   class UserConnectablePortsConfigurator {
     constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
       __publicField(this, "overlayCanvas");
-      __publicField(this, "staticPortId", null);
-      __publicField(this, "isTargetDragging", true);
+      __publicField(this, "edgeInProgress", null);
       __publicField(this, "onEdgeCreated", (edgeId) => {
         this.params.onAfterEdgeCreated(edgeId);
       });
@@ -4371,34 +4371,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.viewportStore,
         this.window
       );
+      const draggablePortsParams = {
+        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+        onPointerDownVerifier: (portId, cursor) => {
+          const connectionType = this.params.connectionTypeResolver(portId);
+          if (connectionType === null) {
+            return false;
+          }
+          this.grabPort(portId, cursor, connectionType);
+          return true;
+        },
+        onPointerMove: (cursor) => {
+          this.moveDraggingPort(cursor);
+        },
+        onPointerUp: (cursor) => {
+          this.tryCreateConnection(cursor);
+          this.resetDragState();
+        },
+        onPointerOutside: () => {
+          const params2 = this.edgeInProgress;
+          this.resetDragState();
+          this.params.onEdgeCreationInterrupted(params2);
+        }
+      };
       DraggablePortsConfigurator.configure(
         this.canvas,
         this.window,
         this.pointInsideVerifier,
-        {
-          mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-          mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-          onStopDrag: () => {
-            this.resetDragState();
-          },
-          onPortPointerDown: (portId, cursor) => {
-            const connectionType = this.params.connectionTypeResolver(portId);
-            if (connectionType === null) {
-              return false;
-            }
-            this.grabPort(portId, cursor, connectionType);
-            return true;
-          },
-          onPointerMove: (cursor) => {
-            this.moveDraggingPort(cursor);
-          },
-          onPointerMoveOutside: () => {
-            this.handleEdgeCreationInterrupted();
-          },
-          onPointerUp: (cursor) => {
-            this.tryCreateConnection(cursor);
-          }
-        }
+        draggablePortsParams
       );
     }
     static configure(canvas, overlayLayer, viewportStore, win, pointInsideVerifier, params) {
@@ -4411,9 +4412,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         params
       );
     }
-    grabPort(portId, cursor, connectionType) {
-      const port = this.canvas.graph.getPort(portId);
-      this.staticPortId = portId;
+    grabPort(staticPortId, cursor, connectionType) {
+      const port = this.canvas.graph.getPort(staticPortId);
       const portRect = port.element.getBoundingClientRect();
       const portX = portRect.x + portRect.width / 2;
       const portY = portRect.y + portRect.height / 2;
@@ -4431,13 +4431,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         portCoords: portPoint,
         portDirection: port.direction
       };
+      const isDirect = connectionType === "direct";
+      this.edgeInProgress = {
+        staticPortId,
+        isDirect
+      };
       const draggingParams = {
         overlayNodeId: OverlayId.DraggingNodeId,
         portCoords: cursorPoint,
-        portDirection: this.params.dragPortDirection
+        portDirection: this.params.draggingPortDirectionResolver.resolve({
+          cursor,
+          ...this.edgeInProgress
+        }) ?? port.direction
       };
-      this.isTargetDragging = connectionType === "direct";
-      const [sourceParams, targetParams] = this.isTargetDragging ? [staticParams, draggingParams] : [draggingParams, staticParams];
+      const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
       this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
       this.overlayCanvas.addNode(createAddNodeOverlayRequest(targetParams));
       this.overlayCanvas.addEdge({
@@ -4447,22 +4454,25 @@ 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.handleEdgeCreationInterrupted();
+      const targetPortId = findPortAtPoint(this.canvas.graph, cursor);
+      if (targetPortId === null) {
+        this.params.onEdgeCreationInterrupted(this.edgeInProgress);
         return;
       }
-      const staticPortId = this.staticPortId;
-      const sourceId = this.isTargetDragging ? staticPortId : draggingPortId;
-      const targetId = this.isTargetDragging ? draggingPortId : staticPortId;
-      const request = { from: sourceId, to: targetId };
-      const processedRequest = this.params.connectionPreprocessor(request);
-      if (processedRequest !== null) {
+      const request = resolveCreateEdgeRequest(
+        this.edgeInProgress,
+        targetPortId
+      );
+      const connectionAllowed = this.params.connectionAllowedVerifier(request);
+      const processedRequest = this.params.connectionPreprocessor({
+        from: request.from,
+        to: request.to
+      });
+      if (connectionAllowed && processedRequest !== null) {
         this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated);
         this.canvas.addEdge(processedRequest);
         this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated);
@@ -4470,30 +4480,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.params.onEdgeCreationPrevented(request);
       }
     }
-    moveDraggingPort(dragPoint) {
+    moveDraggingPort(cursor) {
       const canvasRect = this.overlayLayer.getBoundingClientRect();
       const nodeContentCoords = this.canvas.viewport.createContentCoords({
-        x: dragPoint.x - canvasRect.x,
-        y: dragPoint.y - canvasRect.y
+        x: cursor.x - canvasRect.x,
+        y: cursor.y - canvasRect.y
+      });
+      const direction = this.params.draggingPortDirectionResolver.resolve({
+        cursor,
+        ...this.edgeInProgress
       });
       this.overlayCanvas.updateNode(OverlayId.DraggingNodeId, {
         x: nodeContentCoords.x,
         y: nodeContentCoords.y
-      });
-    }
-    handleEdgeCreationInterrupted() {
-      const staticPortId = this.staticPortId;
-      this.params.onEdgeCreationInterrupted({
-        staticPortId,
-        isDirect: this.isTargetDragging
-      });
+      }).updatePort(OverlayId.DraggingNodeId, { direction });
     }
   }
   class UserDraggableEdgesConfigurator {
     constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
       __publicField(this, "overlayCanvas");
-      __publicField(this, "staticPortId", null);
-      __publicField(this, "isTargetDragging", true);
+      __publicField(this, "edgeInProgress", null);
       __publicField(this, "draggingEdgePayload", null);
       __publicField(this, "onEdgeReattached", (edgeId) => {
         this.params.onAfterEdgeReattached(edgeId);
@@ -4509,38 +4515,36 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.viewportStore,
         this.window
       );
+      const draggablePortsParams = {
+        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+        onPointerDownVerifier: (portId, cursor) => {
+          return this.tryStartEdgeDragging(portId, cursor);
+        },
+        onPointerMove: (cursor) => {
+          this.moveDraggingPort(cursor);
+        },
+        onPointerUp: (cursor) => {
+          this.tryCreateConnection(cursor);
+          this.resetDragState();
+        },
+        onPointerOutside: () => {
+          const edge = this.draggingEdgePayload;
+          this.resetDragState();
+          this.params.onEdgeReattachInterrupted({
+            id: edge.id,
+            from: edge.from,
+            to: edge.to,
+            shape: edge.shape,
+            priority: edge.priority
+          });
+        }
+      };
       DraggablePortsConfigurator.configure(
         this.canvas,
         this.window,
         this.pointInsideVerifier,
-        {
-          mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-          mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-          onStopDrag: () => {
-            this.resetDragState();
-          },
-          onPortPointerDown: (portId, cursor) => {
-            return this.tryStartEdgeDragging(portId, cursor);
-          },
-          onPointerMove: (cursor) => {
-            this.moveDraggingPort(cursor);
-          },
-          onPointerMoveOutside: () => {
-            const edge = this.draggingEdgePayload;
-            queueMicrotask(() => {
-              this.params.onEdgeReattachInterrupted({
-                id: edge.id,
-                from: edge.from,
-                to: edge.to,
-                shape: edge.shape,
-                priority: edge.priority
-              });
-            });
-          },
-          onPointerUp: (cursor) => {
-            this.tryCreateConnection(cursor);
-          }
-        }
+        draggablePortsParams
       );
     }
     static configure(canvas, overlayLayer, viewportStore, win, pointInsideVerifier, params) {
@@ -4555,15 +4559,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     tryStartEdgeDragging(portId, cursor) {
       const edgeId = this.params.draggingEdgeResolver(portId);
-      if (edgeId === null || !this.canvas.graph.hasEdge(edgeId)) {
+      if (edgeId === null) {
         return false;
       }
       const edge = this.canvas.graph.getEdge(edgeId);
       const isSourceDragging = portId === edge.from;
-      const isTargetDragging = portId === edge.to;
+      const isDirect = portId === edge.to;
       const staticPortId = isSourceDragging ? edge.to : edge.from;
-      this.staticPortId = staticPortId;
-      this.isTargetDragging = isTargetDragging;
+      this.edgeInProgress = { staticPortId, isDirect };
       const draggingPort = this.canvas.graph.getPort(portId);
       const staticPort = this.canvas.graph.getPort(staticPortId);
       const staticRect = staticPort.element.getBoundingClientRect();
@@ -4593,12 +4596,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         portCoords: staticPoint,
         portDirection: staticPort.direction
       };
+      const direction = this.params.draggingPortDirectionResolver.resolve({
+        cursor,
+        ...this.edgeInProgress
+      });
       const draggingParams = {
         overlayNodeId: OverlayId.DraggingNodeId,
         portCoords: draggingPoint,
-        portDirection: draggingPort.direction
+        portDirection: direction ?? draggingPort.direction
       };
-      const [sourceParams, targetParams] = this.isTargetDragging ? [staticParams, draggingParams] : [draggingParams, staticParams];
+      const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
       this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
       this.overlayCanvas.addNode(createAddNodeOverlayRequest(targetParams));
       const overlayEdgeShape = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(OverlayId.EdgeId) : edge.shape;
@@ -4612,30 +4619,43 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     resetDragState() {
       this.draggingEdgePayload = null;
-      this.staticPortId = null;
-      this.isTargetDragging = true;
+      this.edgeInProgress = null;
       this.overlayCanvas.clear();
     }
-    moveDraggingPort(dragPoint) {
+    moveDraggingPort(cursor) {
       const canvasRect = this.overlayLayer.getBoundingClientRect();
       const nodeViewCoords = {
-        x: dragPoint.x - canvasRect.x,
-        y: dragPoint.y - canvasRect.y
+        x: cursor.x - canvasRect.x,
+        y: cursor.y - canvasRect.y
       };
       const nodeContentCoords = this.canvas.viewport.createContentCoords(nodeViewCoords);
+      const direction = this.params.draggingPortDirectionResolver.resolve({
+        cursor,
+        ...this.edgeInProgress
+      });
       this.overlayCanvas.updateNode(OverlayId.DraggingNodeId, {
         x: nodeContentCoords.x,
         y: nodeContentCoords.y
-      });
+      }).updatePort(OverlayId.DraggingNodeId, { direction });
     }
     tryCreateConnection(cursor) {
       const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
       this.overlayCanvas.removeEdge(OverlayId.EdgeId);
       if (draggingPortId === null) {
-        this.handleEdgeReattachInterrupted();
+        const edge2 = this.draggingEdgePayload;
+        this.params.onEdgeReattachInterrupted({
+          id: edge2.id,
+          from: edge2.from,
+          to: edge2.to,
+          shape: edge2.shape,
+          priority: edge2.priority
+        });
         return;
       }
-      const [from, to] = this.isTargetDragging ? [this.staticPortId, draggingPortId] : [draggingPortId, this.staticPortId];
+      const { from, to } = resolveCreateEdgeRequest(
+        this.edgeInProgress,
+        draggingPortId
+      );
       const edge = this.draggingEdgePayload;
       const request = {
         id: edge.id,
@@ -4644,8 +4664,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         shape: edge.shape,
         priority: edge.priority
       };
+      const connectionAllowed = this.params.connectionAllowedVerifier({
+        from,
+        to
+      });
       const processedRequest = this.params.connectionPreprocessor(request);
-      if (processedRequest !== null) {
+      if (connectionAllowed && processedRequest !== null) {
         this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached);
         this.canvas.addEdge(processedRequest);
         this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
@@ -4660,16 +4684,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         });
       }
     }
-    handleEdgeReattachInterrupted() {
-      const edge = this.draggingEdgePayload;
-      this.params.onEdgeReattachInterrupted({
-        id: edge.id,
-        from: edge.from,
-        to: edge.to,
-        shape: edge.shape,
-        priority: edge.priority
-      });
-    }
   }
   class ManualLayoutApplicationStrategyConfigurator {
     constructor(applier, trigger) {
@@ -4721,6 +4735,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.defererFn(this.apply);
     }
   }
+  class LayoutApplier {
+    constructor(canvas, layoutAlgorithm, params) {
+      this.canvas = canvas;
+      this.layoutAlgorithm = layoutAlgorithm;
+      this.params = params;
+    }
+    apply() {
+      const coords = this.layoutAlgorithm.calculateCoordinates({
+        graph: this.canvas.graph,
+        viewport: this.canvas.viewport
+      });
+      this.params.onBeforeApplied();
+      coords.forEach((point, nodeId) => {
+        if (!this.params.staticNodeResolver(nodeId)) {
+          this.canvas.updateNode(nodeId, point);
+        }
+      });
+      this.params.onAfterApplied();
+    }
+  }
   class LayoutConfigurator {
     static configure(canvas, params) {
       const strategy = params.applyOn;
@@ -4766,6 +4800,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.win.requestAnimationFrame(this.step);
     }
   }
+  class AnimatedLayoutApplier {
+    constructor(canvas, layoutAlgorithm, params) {
+      this.canvas = canvas;
+      this.layoutAlgorithm = layoutAlgorithm;
+      this.params = params;
+    }
+    apply(dt) {
+      const coords = this.layoutAlgorithm.calculateNextCoordinates({
+        graph: this.canvas.graph,
+        viewport: this.canvas.viewport,
+        dt
+      });
+      this.params.onBeforeApplied();
+      coords.forEach((point, nodeId) => {
+        if (!this.params.staticNodeResolver(nodeId)) {
+          this.canvas.updateNode(nodeId, point);
+        }
+      });
+      this.params.onAfterApplied();
+    }
+  }
   class AnimatedLayoutConfigurator {
     constructor(canvas, params, win) {
       __publicField(this, "applier");
@@ -4895,9 +4950,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "configurator");
       __publicField(this, "onCanvasSelected");
       __publicField(this, "selectionHandledTag", selectionHandled);
-      __publicField(this, "restore", () => {
-        this.configurator.disable(this.element);
-      });
       this.canvas = canvas;
       this.element = element;
       this.window = window2;
@@ -4919,7 +4971,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       );
       this.configurator.enable(this.element);
-      this.canvas.onBeforeDestroy.subscribe(this.restore);
+      this.canvas.onBeforeDestroy.subscribe(() => {
+        this.configurator.disable(this.element);
+      });
     }
     static configure(canvas, element, window2, pointInsideVerifier, eventTagger, params) {
       new UserSelectableCanvasConfigurator(
@@ -4972,22 +5026,119 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.element.removeChild(this.host);
     }
   }
+  const forceDirectedDefaults = Object.freeze({
+    seed: "HTMLGraph is awesome",
+    maxTimeDeltaSec: 0.01,
+    nodeCharge: 1e5,
+    nodeMass: 1,
+    edgeEquilibriumLength: 300,
+    edgeStiffness: 1e3,
+    dtSec: 0.01,
+    maxIterations: 1e3,
+    convergenceVelocity: 10,
+    maxForce: 1e7,
+    nodeForceCoefficient: 1,
+    barnesHutAreaRadiusThreshold: 0.01,
+    barnesHutTheta: 1
+  });
+  const selectionDefaults = Object.freeze({
+    mouseDownEventVerifier: (event) => event.button === 0,
+    mouseUpEventVerifier: (event) => event.button === 0,
+    movementThreshold: 10
+  });
+  const noopFn = () => {
+  };
+  const resolveDraggingPortDirectionResolver = (config, graph, connectionAllowedVerifier) => {
+    if (config === "closest-connectable-port") {
+      return new ClosestConnectablePortDraggingPortDirectionResolver(
+        graph,
+        connectionAllowedVerifier
+      );
+    }
+    return new ConstantDraggingPortDirectionResolver(config);
+  };
+  const resolveEdgeShapeFactory = (config) => {
+    if (typeof config === "function") {
+      return config;
+    }
+    switch (config.type) {
+      case "straight":
+        return () => new StraightEdgeShape({
+          color: config.color,
+          width: config.width,
+          arrowLength: config.arrowLength,
+          arrowOffset: config.arrowOffset,
+          arrowRenderer: config.arrowRenderer,
+          hasSourceArrow: config.hasSourceArrow,
+          hasTargetArrow: config.hasTargetArrow,
+          cycleSquareSide: config.cycleSquareSide,
+          roundness: config.roundness,
+          detourDistance: config.detourDistance,
+          detourDirection: config.detourDirection
+        });
+      case "horizontal":
+        return () => new HorizontalEdgeShape({
+          color: config.color,
+          width: config.width,
+          arrowLength: config.arrowLength,
+          arrowOffset: config.arrowOffset,
+          arrowRenderer: config.arrowRenderer,
+          hasSourceArrow: config.hasSourceArrow,
+          hasTargetArrow: config.hasTargetArrow,
+          cycleSquareSide: config.cycleSquareSide,
+          roundness: config.roundness,
+          detourDistance: config.detourDistance
+        });
+      case "vertical":
+        return () => new VerticalEdgeShape({
+          color: config.color,
+          width: config.width,
+          arrowLength: config.arrowLength,
+          arrowOffset: config.arrowOffset,
+          arrowRenderer: config.arrowRenderer,
+          hasSourceArrow: config.hasSourceArrow,
+          hasTargetArrow: config.hasTargetArrow,
+          cycleSquareSide: config.cycleSquareSide,
+          roundness: config.roundness,
+          detourDistance: config.detourDistance
+        });
+      case "direct":
+        return () => new DirectEdgeShape({
+          color: config.color,
+          width: config.width,
+          arrowLength: config.arrowLength,
+          arrowRenderer: config.arrowRenderer,
+          hasSourceArrow: config.hasSourceArrow,
+          hasTargetArrow: config.hasTargetArrow,
+          sourceOffset: config.sourceOffset,
+          targetOffset: config.targetOffset
+        });
+      default:
+        return () => new BezierEdgeShape({
+          color: config.color,
+          width: config.width,
+          arrowLength: config.arrowLength,
+          arrowRenderer: config.arrowRenderer,
+          hasSourceArrow: config.hasSourceArrow,
+          hasTargetArrow: config.hasTargetArrow,
+          cycleRadius: config.cycleRadius,
+          smallCycleRadius: config.smallCycleRadius,
+          curvature: config.curvature,
+          detourDistance: config.detourDistance,
+          detourDirection: config.detourDirection
+        });
+    }
+  };
   const createDraggableNodesParams = (config) => {
     var _a, _b, _c, _d, _e, _f;
-    const onNodeDragStarted = ((_a = config.events) == null ? void 0 : _a.onNodeDragStarted) ?? (() => {
-    });
-    const onNodeDrag = ((_b = config.events) == null ? void 0 : _b.onNodeDrag) ?? (() => {
-    });
     const nodeDragVerifier = config.nodeDragVerifier ?? (() => true);
-    const onNodeDragFinished = ((_c = config.events) == null ? void 0 : _c.onNodeDragFinished) ?? (() => {
-    });
     const moveOnTop = config.moveOnTop !== false;
     const moveEdgesOnTop = config.moveEdgesOnTop !== false && moveOnTop;
-    const cursor = (_d = config.mouse) == null ? void 0 : _d.dragCursor;
+    const cursor = (_a = config.mouse) == null ? void 0 : _a.dragCursor;
     const dragCursor = cursor !== void 0 ? cursor : "grab";
-    const defaultMouseDownEventVerifier = (_e = config.mouse) == null ? void 0 : _e.mouseDownEventVerifier;
+    const defaultMouseDownEventVerifier = (_b = config.mouse) == null ? void 0 : _b.mouseDownEventVerifier;
     const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-    const defaultMouseUpEventVerifier = (_f = config.mouse) == null ? void 0 : _f.mouseUpEventVerifier;
+    const defaultMouseUpEventVerifier = (_c = config.mouse) == null ? void 0 : _c.mouseUpEventVerifier;
     const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
     return {
       moveOnTop,
@@ -4996,10 +5147,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       gridSize: config.gridSize ?? null,
       mouseDownEventVerifier,
       mouseUpEventVerifier,
-      onNodeDragStarted,
-      onNodeDrag,
+      onNodeDragStarted: ((_d = config.events) == null ? void 0 : _d.onNodeDragStarted) ?? noopFn,
+      onNodeDrag: ((_e = config.events) == null ? void 0 : _e.onNodeDrag) ?? noopFn,
       nodeDragVerifier,
-      onNodeDragFinished
+      onNodeDragFinished: ((_f = config.events) == null ? void 0 : _f.onNodeDragFinished) ?? noopFn
     };
   };
   const createShiftLimitTransformPreprocessor = (preprocessorParams) => {
@@ -5117,34 +5268,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
     const shiftCursor = ((_b = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _b.cursor) !== void 0 ? transformConfig.shift.cursor : "grab";
-    const onBeforeTransformStarted = ((_c = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _c.onBeforeTransformChange) ?? (() => {
-    });
-    const onTransformFinished = ((_d = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _d.onTransformChange) ?? (() => {
-    });
-    const defaultMouseDownEventVerifier = (_e = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _e.mouseDownEventVerifier;
+    const defaultMouseDownEventVerifier = (_c = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _c.mouseDownEventVerifier;
     const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-    const defaultMouseUpEventVerifier = (_f = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _f.mouseUpEventVerifier;
+    const defaultMouseUpEventVerifier = (_d = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _d.mouseUpEventVerifier;
     const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
-    const defaultMouseWheelEventVerifier = (_g = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _g.mouseWheelEventVerifier;
+    const defaultMouseWheelEventVerifier = (_e = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _e.mouseWheelEventVerifier;
     const mouseWheelEventVerifier = defaultMouseWheelEventVerifier !== void 0 ? defaultMouseWheelEventVerifier : () => true;
     return {
       wheelSensitivity,
-      onTransformStarted: ((_h = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _h.onTransformStarted) ?? (() => {
-      }),
-      onTransformFinished: ((_i = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _i.onTransformFinished) ?? (() => {
-      }),
-      onBeforeTransformChange: onBeforeTransformStarted,
-      onTransformChange: onTransformFinished,
+      onTransformStarted: ((_f = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _f.onTransformStarted) ?? noopFn,
+      onTransformFinished: ((_g = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _g.onTransformFinished) ?? noopFn,
+      onBeforeTransformChange: ((_h = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _h.onBeforeTransformChange) ?? noopFn,
+      onTransformChange: ((_i = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _i.onTransformChange) ?? noopFn,
       transformPreprocessor,
       shiftCursor,
       mouseDownEventVerifier,
       mouseUpEventVerifier,
       mouseWheelEventVerifier,
       scaleWheelFinishTimeout: ((_j = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _j.wheelFinishTimeout) ?? 500,
-      onResizeTransformStarted: ((_k = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _k.onResizeTransformStarted) ?? (() => {
-      }),
-      onResizeTransformFinished: ((_l = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _l.onResizeTransformFinished) ?? (() => {
-      })
+      onResizeTransformStarted: ((_k = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _k.onResizeTransformStarted) ?? noopFn,
+      onResizeTransformFinished: ((_l = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _l.onResizeTransformFinished) ?? noopFn
     };
   };
   const createContent = (radius, color) => {
@@ -5180,106 +5323,41 @@ 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 createConnectablePortsParams = (config, defaultEdgeShapeFactory, defaultDragPortDirection) => {
+  const defaults$3 = Object.freeze({
+    connectionTypeResolver: () => "direct",
+    connectionPreprocessor: (request) => request,
+    connectionAllowedVerifier: () => true,
+    mouseEventVerifier: (event) => event.button === 0
+  });
+  const createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
     var _a, _b, _c;
-    const defaultConnectionTypeResolver = () => "direct";
-    const defaultConnectionPreprocessor = (request) => request;
-    const defaultMouseEventVerifier = (event) => event.button === 0;
-    const defaultOnAfterEdgeCreated = () => {
-    };
-    const defaultOnAfterEdgeConnectionPrevented = () => {
-    };
-    const defaultOnAfterEdgeConnectionInterrupted = () => {
-    };
+    const connectionAllowedVerifier = config.connectionAllowedVerifier ?? defaults$3.connectionAllowedVerifier;
     return {
-      connectionTypeResolver: config.connectionTypeResolver ?? defaultConnectionTypeResolver,
-      connectionPreprocessor: config.connectionPreprocessor ?? defaultConnectionPreprocessor,
-      mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaultMouseEventVerifier,
-      mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaultMouseEventVerifier,
-      onAfterEdgeCreated: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeCreated) ?? defaultOnAfterEdgeCreated,
-      onEdgeCreationInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeCreationInterrupted) ?? defaultOnAfterEdgeConnectionInterrupted,
-      onEdgeCreationPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeCreationPrevented) ?? defaultOnAfterEdgeConnectionPrevented,
-      dragPortDirection: config.dragPortDirection ?? defaultDragPortDirection,
-      edgeShapeFactory: config.edgeShape !== void 0 ? resolveEdgeShapeFactory(config.edgeShape) : defaultEdgeShapeFactory
+      connectionTypeResolver: config.connectionTypeResolver ?? defaults$3.connectionTypeResolver,
+      connectionAllowedVerifier,
+      draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(
+        config.dragPortDirection,
+        graph,
+        connectionAllowedVerifier
+      ),
+      edgeShapeFactory: config.edgeShape !== void 0 ? resolveEdgeShapeFactory(config.edgeShape) : defaultEdgeShapeFactory,
+      connectionPreprocessor: config.connectionPreprocessor ?? defaults$3.connectionPreprocessor,
+      mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$3.mouseEventVerifier,
+      mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$3.mouseEventVerifier,
+      onAfterEdgeCreated: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeCreated) ?? noopFn,
+      onEdgeCreationInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeCreationInterrupted) ?? noopFn,
+      onEdgeCreationPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeCreationPrevented) ?? noopFn
     };
   };
+  const defaults$2 = Object.freeze({
+    connectionAllowedVerifier: () => true,
+    connectionPreprocessor: (request) => request,
+    // TODO: remove ctrl key
+    mouseDownEventVerifier: (event) => event.button === 0 && event.ctrlKey,
+    mouseUpEventVerifier: (event) => event.button === 0
+  });
   const createDraggableEdgeParams = (config, graph) => {
     var _a, _b, _c;
-    const defaultConnectionPreprocessor = (request) => request;
-    const defaultMouseDownEventVerifier = (event) => event.button === 0 && event.ctrlKey;
-    const defaultMouseUpEventVerifier = (event) => event.button === 0;
     const defaultDraggingEdgeResolver = (portId) => {
       const edgeIds = graph.getPortAdjacentEdgeIds(portId);
       if (edgeIds.length > 0) {
@@ -5288,21 +5366,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return null;
       }
     };
-    const defaultOnAfterEdgeReattached = () => {
-    };
-    const defaultOnAfterEdgeReattachPrevented = () => {
-    };
-    const defaultOnAfterEdgeReattachInterrupted = () => {
-    };
+    const connectionAllowedVerifier = config.connectionAllowedVerifier ?? defaults$2.connectionAllowedVerifier;
     return {
-      connectionPreprocessor: config.connectionPreprocessor ?? defaultConnectionPreprocessor,
-      mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaultMouseDownEventVerifier,
-      mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaultMouseUpEventVerifier,
+      connectionPreprocessor: config.connectionPreprocessor ?? defaults$2.connectionPreprocessor,
+      connectionAllowedVerifier,
+      mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$2.mouseDownEventVerifier,
+      mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$2.mouseUpEventVerifier,
       draggingEdgeResolver: config.draggingEdgeResolver ?? defaultDraggingEdgeResolver,
       draggingEdgeShapeFactory: config.draggingEdgeShape !== void 0 ? resolveEdgeShapeFactory(config.draggingEdgeShape) : null,
-      onAfterEdgeReattached: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeReattached) ?? defaultOnAfterEdgeReattached,
-      onEdgeReattachInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeReattachInterrupted) ?? defaultOnAfterEdgeReattachInterrupted,
-      onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? defaultOnAfterEdgeReattachPrevented
+      onAfterEdgeReattached: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeReattached) ?? noopFn,
+      onEdgeReattachInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeReattachInterrupted) ?? noopFn,
+      onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? noopFn,
+      draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(
+        config.dragPortDirection,
+        graph,
+        connectionAllowedVerifier
+      )
     };
   };
   const createVirtualScrollParams = (config) => {
@@ -5314,10 +5393,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const createVirtualScrollHtmlViewParams = (config) => {
     var _a, _b;
     return {
-      onAfterNodeDetached: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onAfterNodeDetached) ?? (() => {
-      }),
-      onBeforeNodeAttached: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onBeforeNodeAttached) ?? (() => {
-      })
+      onAfterNodeDetached: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onAfterNodeDetached) ?? noopFn,
+      onBeforeNodeAttached: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onBeforeNodeAttached) ?? noopFn
     };
   };
   class CanvasBuilderError extends Error {
@@ -6328,26 +6405,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return (t >>> 0) / 4294967296;
     };
   };
-  const forceDirectedDefaults = Object.freeze({
-    seed: "HTMLGraph is awesome",
-    maxTimeDeltaSec: 0.01,
-    nodeCharge: 1e5,
-    nodeMass: 1,
-    edgeEquilibriumLength: 300,
-    edgeStiffness: 1e3,
-    dtSec: 0.01,
-    maxIterations: 1e3,
-    convergenceVelocity: 10,
-    maxForce: 1e7,
-    nodeForceCoefficient: 1,
-    barnesHutAreaRadiusThreshold: 0.01,
-    barnesHutTheta: 1
-  });
-  const selectionDefaults = Object.freeze({
-    mouseDownEventVerifier: (event) => event.button === 0,
-    mouseUpEventVerifier: (event) => event.button === 0,
-    movementThreshold: 10
-  });
   const resolveAnimatedLayoutAlgorithm = (config) => {
     var _a, _b;
     switch (config == null ? void 0 : config.type) {
@@ -6374,11 +6431,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   };
   const defaults$1 = {
-    staticNodeResolver: () => false,
-    onBeforeApplied: () => {
-    },
-    onAfterApplied: () => {
-    }
+    staticNodeResolver: () => false
   };
   const createAnimatedLayoutParams = (config) => {
     var _a, _b;
@@ -6386,8 +6439,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return {
       algorithm,
       staticNodeResolver: (config == null ? void 0 : config.staticNodeResolver) ?? defaults$1.staticNodeResolver,
-      onBeforeApplied: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onBeforeApplied) ?? defaults$1.onBeforeApplied,
-      onAfterApplied: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onAfterApplied) ?? defaults$1.onAfterApplied
+      onBeforeApplied: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onBeforeApplied) ?? noopFn,
+      onAfterApplied: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onAfterApplied) ?? noopFn
     };
   };
   const resolveLayoutApplyOn = (applyOn) => {
@@ -6410,10 +6463,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const defaults = Object.freeze({
     staticNodeResolver: () => false,
-    onBeforeApplied: () => {
-    },
-    onAfterApplied: () => {
-    },
     hierarchicalLayout: {
       layerWidth: 300,
       layerSpace: 300
@@ -6620,8 +6669,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       algorithm: resolveLayoutAlgorithm(config.algorithm),
       applyOn: resolveLayoutApplyOn(config.applyOn),
       staticNodeResolver: config.staticNodeResolver ?? defaults.staticNodeResolver,
-      onBeforeApplied: ((_a = config.events) == null ? void 0 : _a.onBeforeApplied) ?? defaults.onBeforeApplied,
-      onAfterApplied: ((_b = config.events) == null ? void 0 : _b.onAfterApplied) ?? defaults.onAfterApplied
+      onBeforeApplied: ((_a = config.events) == null ? void 0 : _a.onBeforeApplied) ?? noopFn,
+      onAfterApplied: ((_b = config.events) == null ? void 0 : _b.onAfterApplied) ?? noopFn
     };
   };
   const patchAnimatedLayoutDraggableNodesParams = (params, staticNodes) => {
@@ -6954,7 +7003,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const params = createConnectablePortsParams(
           this.connectablePortsConfig,
           graphControllerParams.edges.shapeFactory,
-          graphControllerParams.ports.direction
+          canvas.graph
         );
         UserConnectablePortsConfigurator.configure(
           canvas,
@@ -7002,9 +7051,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         LayoutConfigurator.configure(canvas, layoutParams);
       }
       if (this.hasAnimatedLayout) {
-        let config = createAnimatedLayoutParams(
-          this.animatedLayoutConfig
-        );
+        let config = createAnimatedLayoutParams(this.animatedLayoutConfig);
         if (this.hasDraggableNodes) {
           subscribeAnimatedLayoutStaticNodesUpdate(
             canvas,
@@ -7017,11 +7064,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         AnimatedLayoutConfigurator.configure(canvas, config, this.window);
       }
-      const onBeforeDestroy = () => {
+      canvas.onBeforeDestroy.subscribe(() => {
         layers.destroy();
-        canvas.onBeforeDestroy.unsubscribe(onBeforeDestroy);
-      };
-      canvas.onBeforeDestroy.subscribe(onBeforeDestroy);
+      });
       return canvas;
     }
     createHtmlView(host, graphStore, viewportStore) {