@html-graph/html-graph 8.16.0 → 8.17.0

package/dist/html-graph.js

@@ -2687,6 +2687,11 @@ class InteractiveEdgeShape {
     __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");
@@ -3300,11 +3305,11 @@ class DraggablePortsConfigurator {
       }
       const target = event.currentTarget;
       const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-      const accepted = this.params.onPortPointerDown(portId, {
+      const dragAllowed = this.params.portDragAllowedVerifier(portId, {
         x: mouseEvent.clientX,
         y: mouseEvent.clientY
       });
-      if (!accepted) {
+      if (!dragAllowed) {
         return;
       }
       event.stopPropagation();
@@ -3321,8 +3326,8 @@ class DraggablePortsConfigurator {
         event.clientY
       );
       if (!isInside) {
-        this.params.onPointerMoveOutside();
-        this.stopMouseDrag();
+        this.removeWindowMouseListeners();
+        this.params.onPointerOutside();
         return;
       }
       this.params.onPointerMove({ x: event.clientX, y: event.clientY });
@@ -3331,8 +3336,8 @@ class DraggablePortsConfigurator {
       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;
@@ -3342,11 +3347,11 @@ class DraggablePortsConfigurator {
       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.portDragAllowedVerifier(portId, {
         x: touch.clientX,
         y: touch.clientY
       });
-      if (!accepted) {
+      if (!dragAllowed) {
         return;
       }
       event.stopPropagation();
@@ -3367,16 +3372,16 @@ class DraggablePortsConfigurator {
         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) => {
@@ -3385,10 +3390,9 @@ class DraggablePortsConfigurator {
       });
     });
     __publicField(this, "revert", () => {
-      this.params.onStopDrag();
-      this.reset();
       this.removeWindowMouseListeners();
       this.removeWindowTouchListeners();
+      this.reset();
     });
     this.canvas = canvas;
     this.window = window2;
@@ -3414,14 +3418,6 @@ class DraggablePortsConfigurator {
     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);
@@ -3432,47 +3428,6 @@ class DraggablePortsConfigurator {
     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");
@@ -4367,34 +4322,39 @@ class UserConnectablePortsConfigurator {
       this.viewportStore,
       this.window
     );
+    const draggablePortsParams = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      portDragAllowedVerifier: (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 staticPortId = this.staticPortId;
+        const isTargetDragging = this.isTargetDragging;
+        this.resetDragState();
+        this.params.onEdgeCreationInterrupted({
+          staticPortId,
+          isDirect: isTargetDragging
+        });
+      }
+    };
     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) {
@@ -4450,15 +4410,19 @@ class UserConnectablePortsConfigurator {
   tryCreateConnection(cursor) {
     const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
     if (draggingPortId === null) {
-      this.handleEdgeCreationInterrupted();
+      this.params.onEdgeCreationInterrupted({
+        staticPortId: this.staticPortId,
+        isDirect: this.isTargetDragging
+      });
       return;
     }
     const staticPortId = this.staticPortId;
     const sourceId = this.isTargetDragging ? staticPortId : draggingPortId;
     const targetId = this.isTargetDragging ? draggingPortId : staticPortId;
     const request = { from: sourceId, to: targetId };
+    const connectionAllowed = this.params.connectionAllowedVerifier(request);
     const processedRequest = this.params.connectionPreprocessor(request);
-    if (processedRequest !== null) {
+    if (connectionAllowed && processedRequest !== null) {
       this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated);
       this.canvas.addEdge(processedRequest);
       this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated);
@@ -4477,13 +4441,6 @@ class UserConnectablePortsConfigurator {
       y: nodeContentCoords.y
     });
   }
-  handleEdgeCreationInterrupted() {
-    const staticPortId = this.staticPortId;
-    this.params.onEdgeCreationInterrupted({
-      staticPortId,
-      isDirect: this.isTargetDragging
-    });
-  }
 }
 class UserDraggableEdgesConfigurator {
   constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
@@ -4505,38 +4462,36 @@ class UserDraggableEdgesConfigurator {
       this.viewportStore,
       this.window
     );
+    const draggablePortsParams = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      portDragAllowedVerifier: (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) {
@@ -4551,7 +4506,7 @@ class UserDraggableEdgesConfigurator {
   }
   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);
@@ -4640,8 +4595,12 @@ class UserDraggableEdgesConfigurator {
       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);
@@ -4717,6 +4676,26 @@ class TopologyChangeAsyncLayoutApplicationStrategyConfigurator {
     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;
@@ -4762,6 +4741,27 @@ class AnimationSeries {
     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");
@@ -4891,9 +4891,6 @@ class UserSelectableCanvasConfigurator {
     __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;
@@ -4915,7 +4912,9 @@ class UserSelectableCanvasConfigurator {
       }
     );
     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(
@@ -4968,22 +4967,38 @@ class Layers {
     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 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,
@@ -4992,10 +5007,10 @@ const createDraggableNodesParams = (config) => {
     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) => {
@@ -5113,34 +5128,26 @@ const createTransformableViewportParams = (transformConfig) => {
     };
   }
   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) => {
@@ -5248,34 +5255,35 @@ const resolveEdgeShapeFactory = (config) => {
       });
   }
 };
+const defaults$3 = Object.freeze({
+  connectionTypeResolver: () => "direct",
+  connectionPreprocessor: (request) => request,
+  connectionAllowedVerifier: () => true,
+  mouseEventVerifier: (event) => event.button === 0
+});
 const createConnectablePortsParams = (config, defaultEdgeShapeFactory, defaultDragPortDirection) => {
   var _a, _b, _c;
-  const defaultConnectionTypeResolver = () => "direct";
-  const defaultConnectionPreprocessor = (request) => request;
-  const defaultMouseEventVerifier = (event) => event.button === 0;
-  const defaultOnAfterEdgeCreated = () => {
-  };
-  const defaultOnAfterEdgeConnectionPrevented = () => {
-  };
-  const defaultOnAfterEdgeConnectionInterrupted = () => {
-  };
   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,
+    connectionTypeResolver: config.connectionTypeResolver ?? defaults$3.connectionTypeResolver,
+    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
   };
 };
+const defaults$2 = Object.freeze({
+  connectionAllowedVerifier: () => true,
+  connectionPreprocessor: (request) => request,
+  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) {
@@ -5284,21 +5292,16 @@ const createDraggableEdgeParams = (config, graph) => {
       return null;
     }
   };
-  const defaultOnAfterEdgeReattached = () => {
-  };
-  const defaultOnAfterEdgeReattachPrevented = () => {
-  };
-  const defaultOnAfterEdgeReattachInterrupted = () => {
-  };
   return {
-    connectionPreprocessor: config.connectionPreprocessor ?? defaultConnectionPreprocessor,
-    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaultMouseDownEventVerifier,
-    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaultMouseUpEventVerifier,
+    connectionPreprocessor: config.connectionPreprocessor ?? defaults$2.connectionPreprocessor,
+    connectionAllowedVerifier: config.connectionAllowedVerifier ?? defaults$2.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
   };
 };
 const createVirtualScrollParams = (config) => {
@@ -5310,10 +5313,8 @@ const createVirtualScrollParams = (config) => {
 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 {
@@ -6324,26 +6325,6 @@ const sfc32 = (a, b, c, d) => {
     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) {
@@ -6370,11 +6351,7 @@ const resolveAnimatedLayoutAlgorithm = (config) => {
   }
 };
 const defaults$1 = {
-  staticNodeResolver: () => false,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  }
+  staticNodeResolver: () => false
 };
 const createAnimatedLayoutParams = (config) => {
   var _a, _b;
@@ -6382,8 +6359,8 @@ const createAnimatedLayoutParams = (config) => {
   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) => {
@@ -6406,10 +6383,6 @@ const resolveLayoutApplyOn = (applyOn) => {
 };
 const defaults = Object.freeze({
   staticNodeResolver: () => false,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  },
   hierarchicalLayout: {
     layerWidth: 300,
     layerSpace: 300
@@ -6616,8 +6589,8 @@ const createLayoutParams = (config) => {
     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) => {
@@ -6998,9 +6971,7 @@ class CanvasBuilder {
       LayoutConfigurator.configure(canvas, layoutParams);
     }
     if (this.hasAnimatedLayout) {
-      let config = createAnimatedLayoutParams(
-        this.animatedLayoutConfig
-      );
+      let config = createAnimatedLayoutParams(this.animatedLayoutConfig);
       if (this.hasDraggableNodes) {
         subscribeAnimatedLayoutStaticNodesUpdate(
           canvas,
@@ -7013,11 +6984,9 @@ class CanvasBuilder {
       }
       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) {