@html-graph/html-graph 8.16.0 → 8.17.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.portDragAllowedVerifier(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.portDragAllowedVerifier(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");
@@ -4371,34 +4326,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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) {
@@ -4454,15 +4414,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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);
@@ -4481,13 +4445,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         y: nodeContentCoords.y
       });
     }
-    handleEdgeCreationInterrupted() {
-      const staticPortId = this.staticPortId;
-      this.params.onEdgeCreationInterrupted({
-        staticPortId,
-        isDirect: this.isTargetDragging
-      });
-    }
   }
   class UserDraggableEdgesConfigurator {
     constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
@@ -4509,38 +4466,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,
+        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) {
@@ -4555,7 +4510,7 @@ 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);
@@ -4644,8 +4599,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);
@@ -4721,6 +4680,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 +4745,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 +4895,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 +4916,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 +4971,38 @@ 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 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 +5011,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 +5132,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) => {
@@ -5252,34 +5259,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         });
     }
   };
+  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) {
@@ -5288,21 +5296,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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) => {
@@ -5314,10 +5317,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 +6329,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 +6355,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 +6363,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 +6387,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 +6593,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) => {
@@ -7002,9 +6975,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 +6988,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) {