@html-graph/html-graph 8.15.1 → 8.17.0

package/dist/html-graph.umd.cjs

@@ -623,6 +623,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     removeNonexistentPort: (portId) => `Failed to remove port with ID ${JSON.stringify(portId)} because it does not exist`,
     accessNonexistentEdge: (edgeId) => `Failed to access edge with ID ${JSON.stringify(edgeId)} because it does not exist`,
     addEdgeWithExistingId: (edgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because an edge with this ID already exists`,
+    addEdgeWithElementInUse: (edgeId, useEdgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because its SVG element is already attached to edge with ID ${JSON.stringify(useEdgeId)}`,
     addEdgeFromNonexistentPort: (edgeId, portId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} from port with ID ${JSON.stringify(portId)} because the port does not exist`,
     addEdgeToNonexistentPort: (edgeId, portId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} to port with ID ${JSON.stringify(portId)} because the port does not exist`,
     updateNonexistentEdge: (edgeId) => `Failed to update edge with ID ${JSON.stringify(edgeId)} because it does not exist`,
@@ -641,6 +642,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
       __publicField(this, "portCycleEdges", /* @__PURE__ */ new Map());
       __publicField(this, "elementPorts", new OneToManyCollection());
+      __publicField(this, "edgesElementsMap", /* @__PURE__ */ new Map());
       __publicField(this, "afterNodeAddedEmitter");
       __publicField(this, "onAfterNodeAdded");
       __publicField(this, "afterNodeUpdatedEmitter");
@@ -821,6 +823,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return edge;
     }
+    findEdgeIdByElement(element) {
+      return this.edgesElementsMap.get(element);
+    }
     addEdge(request) {
       if (this.hasEdge(request.id)) {
         throw new CanvasError(canvasErrorText.addEdgeWithExistingId(request.id));
@@ -835,6 +840,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           canvasErrorText.addEdgeToNonexistentPort(request.id, request.to)
         );
       }
+      const useEdgeId = this.findEdgeIdByElement(request.shape.svg);
+      if (useEdgeId !== void 0) {
+        throw new CanvasError(
+          canvasErrorText.addEdgeWithElementInUse(request.id, useEdgeId)
+        );
+      }
       this.addEdgeInternal(request);
       this.afterEdgeAddedEmitter.emit(request.id);
     }
@@ -892,6 +903,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.portCycleEdges.clear();
       this.elementPorts.clear();
       this.nodesElementsMap.clear();
+      this.edgesElementsMap.clear();
       this.edges.clear();
       this.ports.clear();
       this.nodes.clear();
@@ -1000,6 +1012,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           priority: request.priority
         }
       });
+      this.edgesElementsMap.set(request.shape.svg, request.id);
       if (request.from !== request.to) {
         this.portOutgoingEdges.get(request.from).add(request.id);
         this.portIncomingEdges.get(request.to).add(request.id);
@@ -1008,7 +1021,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     removeEdgeInternal(edgeId) {
-      const { from, to } = this.getEdge(edgeId);
+      const { from, to, payload } = this.getEdge(edgeId);
       this.portCycleEdges.get(from).delete(edgeId);
       this.portCycleEdges.get(to).delete(edgeId);
       this.portIncomingEdges.get(from).delete(edgeId);
@@ -1016,6 +1029,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.portOutgoingEdges.get(from).delete(edgeId);
       this.portOutgoingEdges.get(to).delete(edgeId);
       this.edges.delete(edgeId);
+      this.edgesElementsMap.delete(payload.shape.svg);
     }
   }
   const calculateReverseMatrix = (matrix) => {
@@ -2677,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");
@@ -2833,6 +2852,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         shape: payload.shape
       };
     }
+    findEdgeIdByElement(element) {
+      return this.graphStore.findEdgeIdByElement(element);
+    }
     getPortIncomingEdgeIds(portId) {
       return this.graphStore.getPortIncomingEdgeIds(portId);
     }
@@ -3287,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();
@@ -3308,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 });
@@ -3318,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;
@@ -3329,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();
@@ -3354,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) => {
@@ -3372,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;
@@ -3401,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);
@@ -3419,45 +3432,161 @@ 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;
+  class EventTagger {
+    constructor() {
+      __publicField(this, "field", "_htmlGraphTags");
+    }
+    has(event, tag) {
+      const e = event;
+      const tags = e[this.field];
+      return tags !== void 0 && tags.has(tag);
+    }
+    tag(event, tag) {
+      const e = event;
+      const tags = e[this.field];
+      if (tags === void 0) {
+        e[this.field] = /* @__PURE__ */ new Set([tag]);
+      } else {
+        tags.add(tag);
+      }
     }
-    apply() {
-      const coords = this.layoutAlgorithm.calculateCoordinates({
-        graph: this.canvas.graph,
-        viewport: this.canvas.viewport
+  }
+  const selectionHandled = Symbol();
+  class UserSelectableElementsConfigurator {
+    constructor(window2, pointInsideVerifier, params) {
+      __publicField(this, "onSelected");
+      __publicField(this, "mouseDownEventVerifier");
+      __publicField(this, "mouseUpEventVerifier");
+      __publicField(this, "movementThreshold");
+      __publicField(this, "selectionCandidate", null);
+      __publicField(this, "previousMouse", null);
+      __publicField(this, "previousTouch", null);
+      __publicField(this, "movedDistance", 0);
+      __publicField(this, "onElementMouseDown", (event) => {
+        const mouseEvent = event;
+        if (!this.mouseDownEventVerifier(mouseEvent)) {
+          return;
+        }
+        this.selectionCandidate = mouseEvent.currentTarget;
+        this.previousMouse = { x: mouseEvent.clientX, y: mouseEvent.clientY };
+        this.movedDistance = 0;
+        this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+          passive: true
+        });
+        this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+          passive: true
+        });
       });
-      this.params.onBeforeApplied();
-      coords.forEach((point, nodeId) => {
-        if (!this.params.staticNodeResolver(nodeId)) {
-          this.canvas.updateNode(nodeId, point);
+      __publicField(this, "onElementTouchStart", (event) => {
+        const touchEvent = event;
+        const touches = touchEvent.touches;
+        if (touches.length !== 1) {
+          return;
+        }
+        this.selectionCandidate = touchEvent.currentTarget;
+        this.previousTouch = touches[0];
+        this.movedDistance = 0;
+        this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+          passive: true
+        });
+        this.window.addEventListener("touchend", this.onWindowTouchEnd, {
+          passive: true
+        });
+        this.window.addEventListener("touchcancel", this.onWindowTouchCancel, {
+          passive: true
+        });
+      });
+      __publicField(this, "onWindowMouseMove", (event) => {
+        const mouseEvent = event;
+        const inside = this.pointInsideVerifier.verify(
+          mouseEvent.clientX,
+          mouseEvent.clientY
+        );
+        if (!inside) {
+          this.removeWindowMouseListeners();
+          return;
         }
+        const previousMouse = this.previousMouse;
+        const x = mouseEvent.clientX - previousMouse.x;
+        const y = mouseEvent.clientY - previousMouse.y;
+        this.previousMouse = { x: mouseEvent.clientX, y: mouseEvent.clientY };
+        this.processMoveThresholdVerification(x, y, () => {
+          this.removeWindowMouseListeners();
+        });
       });
-      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
+      __publicField(this, "onWindowMouseUp", (event) => {
+        const mouseEvent = event;
+        if (!this.mouseUpEventVerifier(mouseEvent)) {
+          return;
+        }
+        this.removeWindowMouseListeners();
+        this.onSelected(this.selectionCandidate, event);
       });
-      this.params.onBeforeApplied();
-      coords.forEach((point, nodeId) => {
-        if (!this.params.staticNodeResolver(nodeId)) {
-          this.canvas.updateNode(nodeId, point);
+      __publicField(this, "onWindowTouchMove", (event) => {
+        const touchEvent = event;
+        const touches = touchEvent.touches;
+        if (touches.length !== 1) {
+          this.removeWindowTouchListeners();
+          return;
+        }
+        const touch = touches[0];
+        const inside = this.pointInsideVerifier.verify(
+          touch.clientX,
+          touch.clientY
+        );
+        if (!inside) {
+          this.removeWindowTouchListeners();
+          return;
         }
+        const previousTouch = this.previousTouch;
+        const x = touch.clientX - previousTouch.clientX;
+        const y = touch.clientY - previousTouch.clientY;
+        this.previousTouch = touch;
+        this.processMoveThresholdVerification(x, y, () => {
+          this.removeWindowTouchListeners();
+        });
       });
-      this.params.onAfterApplied();
+      __publicField(this, "onWindowTouchEnd", (event) => {
+        this.removeWindowTouchListeners();
+        this.onSelected(this.selectionCandidate, event);
+      });
+      __publicField(this, "onWindowTouchCancel", () => {
+        this.removeWindowTouchListeners();
+      });
+      this.window = window2;
+      this.pointInsideVerifier = pointInsideVerifier;
+      this.mouseDownEventVerifier = params.mouseDownEventVerifier;
+      this.mouseUpEventVerifier = params.mouseUpEventVerifier;
+      this.onSelected = params.onSelected;
+      this.movementThreshold = params.movementThreshold;
+    }
+    enable(element) {
+      element.addEventListener("mousedown", this.onElementMouseDown);
+      element.addEventListener("touchstart", this.onElementTouchStart);
+    }
+    disable(element) {
+      element.removeEventListener("mousedown", this.onElementMouseDown);
+      element.removeEventListener("touchstart", this.onElementTouchStart);
+      if (element === this.selectionCandidate) {
+        this.removeWindowMouseListeners();
+        this.removeWindowTouchListeners();
+      }
+    }
+    removeWindowMouseListeners() {
+      this.window.removeEventListener("mousemove", this.onWindowMouseMove);
+      this.window.removeEventListener("mouseup", this.onWindowMouseUp);
+    }
+    removeWindowTouchListeners() {
+      this.window.removeEventListener("touchmove", this.onWindowTouchMove);
+      this.window.removeEventListener("touchend", this.onWindowTouchEnd);
+      this.window.removeEventListener("touchcancel", this.onWindowTouchCancel);
+    }
+    processMoveThresholdVerification(x, y, thresholdReachedCallback) {
+      const distance = Math.sqrt(x * x + y * y);
+      this.movedDistance += distance;
+      if (this.movedDistance > this.movementThreshold) {
+        thresholdReachedCallback();
+      }
     }
   }
   class UserDraggableNodesConfigurator {
@@ -4197,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) {
@@ -4280,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);
@@ -4307,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) {
@@ -4335,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) {
@@ -4381,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);
@@ -4470,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);
@@ -4547,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;
@@ -4592,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");
@@ -4611,311 +4785,151 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   class UserSelectableNodesConfigurator {
-    constructor(canvas, window2, pointInsideVerifier, params) {
+    constructor(canvas, window2, pointInsideVerifier, eventTagger, params) {
+      __publicField(this, "configurator");
       __publicField(this, "onNodeSelected");
-      __publicField(this, "mouseDownEventVerifier");
-      __publicField(this, "mouseUpEventVerifier");
-      __publicField(this, "movementThreshold");
-      __publicField(this, "selectionCandidateNodeId", null);
-      __publicField(this, "movedDistance", 0);
-      __publicField(this, "previousMouse", null);
-      __publicField(this, "previousTouch", null);
+      __publicField(this, "selectionHandledTag", selectionHandled);
       __publicField(this, "onAfterNodeAdded", (nodeId) => {
         const { element } = this.canvas.graph.getNode(nodeId);
-        element.addEventListener("mousedown", this.onNodeMouseDown, {
-          passive: true
-        });
-        element.addEventListener("touchstart", this.onNodeTouchStart, {
-          passive: true
-        });
+        this.configurator.enable(element);
       });
       __publicField(this, "onBeforeNodeRemoved", (nodeId) => {
         const { element } = this.canvas.graph.getNode(nodeId);
-        element.removeEventListener("mousedown", this.onNodeMouseDown);
-        element.removeEventListener("touchstart", this.onNodeTouchStart);
+        this.configurator.disable(element);
       });
       __publicField(this, "reset", () => {
         this.canvas.graph.getAllNodeIds().forEach((nodeId) => {
           const { element } = this.canvas.graph.getNode(nodeId);
-          element.removeEventListener("mousedown", this.onNodeMouseDown);
-          element.removeEventListener("touchstart", this.onNodeTouchStart);
+          this.configurator.disable(element);
         });
       });
-      __publicField(this, "revert", () => {
-        this.reset();
-        this.removeWindowMouseListeners();
-        this.removeWindowTouchListeners();
-      });
-      __publicField(this, "onNodeMouseDown", (event) => {
-        const mouseEvent = event;
-        if (!this.mouseDownEventVerifier(mouseEvent)) {
-          return;
-        }
-        const nodeId = this.canvas.graph.findNodeIdByElement(
-          event.currentTarget
-        );
-        this.selectionCandidateNodeId = nodeId;
-        this.previousMouse = { x: mouseEvent.clientX, y: mouseEvent.clientY };
-        this.movedDistance = 0;
-        this.window.addEventListener("mousemove", this.onWindowMouseMove, {
-          passive: true
-        });
-        this.window.addEventListener("mouseup", this.onWindowMouseUp, {
-          passive: true
-        });
-      });
-      __publicField(this, "onNodeTouchStart", (event) => {
-        const touchEvent = event;
-        if (touchEvent.touches.length !== 1) {
-          return;
-        }
-        const nodeId = this.canvas.graph.findNodeIdByElement(
-          touchEvent.currentTarget
-        );
-        this.selectionCandidateNodeId = nodeId;
-        this.previousTouch = touchEvent.touches[0];
-        this.movedDistance = 0;
-        this.window.addEventListener("touchmove", this.onWindowTouchMove, {
-          passive: true
-        });
-        this.window.addEventListener("touchend", this.onWindowTouchEnd, {
-          passive: true
-        });
-        this.window.addEventListener("touchcancel", this.onWindowTouchCancel, {
-          passive: true
-        });
-      });
-      __publicField(this, "onWindowMouseMove", (event) => {
-        const mouseEvent = event;
-        const previousMouse = this.previousMouse;
-        const x = mouseEvent.clientX - previousMouse.x;
-        const y = mouseEvent.clientY - previousMouse.y;
-        if (!this.pointInsideVerifier.verify(mouseEvent.clientX, mouseEvent.clientY)) {
-          this.removeWindowMouseListeners();
-          return;
-        }
-        this.processMoveThresholdVerification(x, y, () => {
-          this.removeWindowMouseListeners();
-        });
-        this.previousMouse = { x: mouseEvent.clientX, y: mouseEvent.clientY };
-      });
-      __publicField(this, "onWindowTouchMove", (event) => {
-        const touchEvent = event;
-        if (touchEvent.touches.length !== 1) {
-          this.removeWindowTouchListeners();
-          return;
-        }
-        const touch = touchEvent.touches[0];
-        if (!this.pointInsideVerifier.verify(touch.clientX, touch.clientY)) {
-          this.removeWindowTouchListeners();
-          return;
-        }
-        const previousTouch = this.previousTouch;
-        const x = touch.clientX - previousTouch.clientX;
-        const y = touch.clientY - previousTouch.clientY;
-        this.processMoveThresholdVerification(x, y, () => {
-          this.removeWindowTouchListeners();
-        });
-        this.previousTouch = touch;
-      });
-      __publicField(this, "onWindowMouseUp", (event) => {
-        const mouseEvent = event;
-        if (!this.mouseUpEventVerifier(mouseEvent)) {
-          return;
-        }
-        this.removeWindowMouseListeners();
-        this.trySelectNode(event);
-      });
-      __publicField(this, "onWindowTouchEnd", (event) => {
-        this.removeWindowTouchListeners();
-        this.trySelectNode(event);
-      });
-      __publicField(this, "onWindowTouchCancel", () => {
-        this.removeWindowTouchListeners();
-      });
       this.canvas = canvas;
       this.window = window2;
       this.pointInsideVerifier = pointInsideVerifier;
-      this.mouseDownEventVerifier = params.mouseDownEventVerifier;
-      this.mouseUpEventVerifier = params.mouseUpEventVerifier;
+      this.eventTagger = eventTagger;
       this.onNodeSelected = params.onNodeSelected;
-      this.movementThreshold = params.movementThreshold;
+      this.configurator = new UserSelectableElementsConfigurator(
+        this.window,
+        this.pointInsideVerifier,
+        {
+          onSelected: (element, event) => {
+            const nodeId = this.canvas.graph.findNodeIdByElement(element);
+            this.eventTagger.tag(event, this.selectionHandledTag);
+            this.onNodeSelected(nodeId);
+          },
+          movementThreshold: params.movementThreshold,
+          mouseDownEventVerifier: params.mouseDownEventVerifier,
+          mouseUpEventVerifier: params.mouseUpEventVerifier
+        }
+      );
       this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded);
       this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved);
       this.canvas.graph.onBeforeClear.subscribe(this.reset);
-      this.canvas.onBeforeDestroy.subscribe(this.revert);
+      this.canvas.onBeforeDestroy.subscribe(this.reset);
     }
-    static configure(canvas, window2, pointInsideVerifier, params) {
+    static configure(canvas, window2, pointInsideVerifier, eventTagger, params) {
       new UserSelectableNodesConfigurator(
         canvas,
         window2,
         pointInsideVerifier,
+        eventTagger,
         params
       );
     }
-    removeWindowMouseListeners() {
-      this.window.removeEventListener("mouseup", this.onWindowMouseUp);
-      this.window.removeEventListener("mousemove", this.onWindowMouseMove);
-    }
-    removeWindowTouchListeners() {
-      this.window.removeEventListener("touchmove", this.onWindowTouchMove);
-      this.window.removeEventListener("touchend", this.onWindowTouchEnd);
-      this.window.removeEventListener("touchcancel", this.onWindowTouchCancel);
-    }
-    trySelectNode(event) {
-      const nodeId = this.selectionCandidateNodeId;
-      if (this.canvas.graph.hasNode(nodeId)) {
-        this.onNodeSelected(nodeId);
-        event.ignoreCanvasSelection = true;
-      }
-    }
-    processMoveThresholdVerification(x, y, thresholdReachedCallback) {
-      const distance = Math.sqrt(x * x + y * y);
-      this.movedDistance += distance;
-      if (this.movedDistance > this.movementThreshold) {
-        thresholdReachedCallback();
-      }
-    }
   }
-  class UserSelectableCanvasConfigurator {
-    constructor(canvas, element, window2, pointInsideVerifier, params) {
-      __publicField(this, "onCanvasSelected");
-      __publicField(this, "movementThreshold");
-      __publicField(this, "mouseDownEventVerifier");
-      __publicField(this, "mouseUpEventVerifier");
-      __publicField(this, "movedDistance", 0);
-      __publicField(this, "previousMouseDown", null);
-      __publicField(this, "previousTouch", null);
-      __publicField(this, "onMouseDown", (event) => {
-        const mouseEvent = event;
-        if (!this.mouseDownEventVerifier(mouseEvent)) {
-          return;
-        }
-        this.previousMouseDown = { x: mouseEvent.clientX, y: mouseEvent.clientY };
-        this.movedDistance = 0;
-        this.window.addEventListener("mousemove", this.onWindowMouseMove, {
-          passive: true
-        });
-        this.window.addEventListener("mouseup", this.onWindowMouseUp, {
-          passive: true
-        });
-      });
-      __publicField(this, "onTouchStart", (event) => {
-        const touchEvent = event;
-        if (touchEvent.touches.length !== 1) {
-          return;
-        }
-        const touch = touchEvent.touches[0];
-        this.previousTouch = touch;
-        this.movedDistance = 0;
-        this.window.addEventListener("touchmove", this.onWindowTouchMove, {
-          passive: true
-        });
-        this.window.addEventListener("touchend", this.onWindowTouchEnd, {
-          passive: true
-        });
-        this.window.addEventListener("touchcancel", this.onWindowTouchCancel, {
-          passive: true
-        });
+  class UserSelectableEdgesConfigurator {
+    constructor(canvas, window2, pointInsideVerifier, eventTagger, params) {
+      __publicField(this, "configurator");
+      __publicField(this, "selectionHandledTag", selectionHandled);
+      __publicField(this, "onEdgeSelected");
+      __publicField(this, "onAfterEdgeAdded", (edgeId) => {
+        const { shape } = this.canvas.graph.getEdge(edgeId);
+        this.configurator.enable(shape.svg);
       });
-      __publicField(this, "onWindowMouseMove", (event) => {
-        const mouseEvent = event;
-        if (!this.pointInsideVerifier.verify(mouseEvent.clientX, mouseEvent.clientY)) {
-          this.removeWindowMouseListeners();
-          return;
-        }
-        const previous = this.previousMouseDown;
-        const dx = mouseEvent.clientX - previous.x;
-        const dy = mouseEvent.clientY - previous.y;
-        this.processMoveThresholdVerification(dx, dy, () => {
-          this.removeWindowMouseListeners();
-        });
-        this.previousMouseDown = { x: mouseEvent.clientX, y: mouseEvent.clientY };
+      __publicField(this, "onBeforeEdgeRemoved", (edgeId) => {
+        const { shape } = this.canvas.graph.getEdge(edgeId);
+        this.configurator.disable(shape.svg);
       });
-      __publicField(this, "onWindowTouchMove", (event) => {
-        const touchEvent = event;
-        if (touchEvent.touches.length !== 1) {
-          this.removeWindowTouchListeners();
-          return;
-        }
-        const touch = touchEvent.touches[0];
-        if (!this.pointInsideVerifier.verify(touch.clientX, touch.clientY)) {
-          this.removeWindowTouchListeners();
-          return;
-        }
-        const previous = this.previousTouch;
-        const dx = touch.clientX - previous.clientX;
-        const dy = touch.clientY - previous.clientY;
-        this.processMoveThresholdVerification(dx, dy, () => {
-          this.removeWindowTouchListeners();
+      __publicField(this, "reset", () => {
+        this.canvas.graph.getAllEdgeIds().forEach((edgeId) => {
+          const { shape } = this.canvas.graph.getEdge(edgeId);
+          this.configurator.disable(shape.svg);
         });
-        this.previousTouch = touch;
       });
-      __publicField(this, "onWindowMouseUp", (event) => {
-        const mouseEvent = event;
-        if (!this.mouseUpEventVerifier(mouseEvent)) {
-          return;
-        }
-        const ignore = event.ignoreCanvasSelection;
-        if (ignore !== true) {
-          this.onCanvasSelected();
+      this.canvas = canvas;
+      this.window = window2;
+      this.pointInsideVerifier = pointInsideVerifier;
+      this.eventTagger = eventTagger;
+      this.onEdgeSelected = params.onEdgeSelected;
+      this.configurator = new UserSelectableElementsConfigurator(
+        this.window,
+        this.pointInsideVerifier,
+        {
+          onSelected: (element, event) => {
+            const edgeId = this.canvas.graph.findEdgeIdByElement(element);
+            this.eventTagger.tag(event, this.selectionHandledTag);
+            this.onEdgeSelected(edgeId);
+          },
+          movementThreshold: params.movementThreshold,
+          mouseDownEventVerifier: params.mouseDownEventVerifier,
+          mouseUpEventVerifier: params.mouseUpEventVerifier
         }
-        this.removeWindowMouseListeners();
-      });
-      __publicField(this, "onWindowTouchEnd", () => {
-        this.onCanvasSelected();
-        this.removeWindowTouchListeners();
-      });
-      __publicField(this, "onWindowTouchCancel", () => {
-        this.removeWindowTouchListeners();
-      });
-      __publicField(this, "restore", () => {
-        this.element.removeEventListener("mousedown", this.onMouseDown);
-        this.element.removeEventListener("touchstart", this.onTouchStart);
-        this.removeWindowMouseListeners();
-        this.removeWindowTouchListeners();
-      });
+      );
+      this.canvas.graph.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded);
+      this.canvas.graph.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved);
+      this.canvas.graph.onBeforeClear.subscribe(this.reset);
+      this.canvas.onBeforeDestroy.subscribe(this.reset);
+    }
+    static configure(canvas, window2, pointInsideVerifier, eventTagger, params) {
+      new UserSelectableEdgesConfigurator(
+        canvas,
+        window2,
+        pointInsideVerifier,
+        eventTagger,
+        params
+      );
+    }
+  }
+  class UserSelectableCanvasConfigurator {
+    constructor(canvas, element, window2, pointInsideVerifier, eventTagger, params) {
+      __publicField(this, "configurator");
+      __publicField(this, "onCanvasSelected");
+      __publicField(this, "selectionHandledTag", selectionHandled);
       this.canvas = canvas;
       this.element = element;
       this.window = window2;
       this.pointInsideVerifier = pointInsideVerifier;
+      this.eventTagger = eventTagger;
       this.onCanvasSelected = params.onCanvasSelected;
-      this.movementThreshold = params.movementThreshold;
-      this.mouseDownEventVerifier = params.mouseDownEventVerifier;
-      this.mouseUpEventVerifier = params.mouseUpEventVerifier;
-      this.canvas.onBeforeDestroy.subscribe(this.restore);
-      this.element.addEventListener("mousedown", this.onMouseDown, {
-        passive: true
-      });
-      this.element.addEventListener("touchstart", this.onTouchStart, {
-        passive: true
+      this.configurator = new UserSelectableElementsConfigurator(
+        this.window,
+        this.pointInsideVerifier,
+        {
+          onSelected: (_element, event) => {
+            if (!this.eventTagger.has(event, this.selectionHandledTag)) {
+              this.onCanvasSelected();
+            }
+          },
+          movementThreshold: params.movementThreshold,
+          mouseDownEventVerifier: params.mouseDownEventVerifier,
+          mouseUpEventVerifier: params.mouseUpEventVerifier
+        }
+      );
+      this.configurator.enable(this.element);
+      this.canvas.onBeforeDestroy.subscribe(() => {
+        this.configurator.disable(this.element);
       });
     }
-    static configure(canvas, element, window2, pointInsideVerifier, params) {
+    static configure(canvas, element, window2, pointInsideVerifier, eventTagger, params) {
       new UserSelectableCanvasConfigurator(
         canvas,
         element,
         window2,
         pointInsideVerifier,
+        eventTagger,
         params
       );
     }
-    removeWindowMouseListeners() {
-      this.window.removeEventListener("mousemove", this.onWindowMouseMove);
-      this.window.removeEventListener("mouseup", this.onWindowMouseUp);
-    }
-    removeWindowTouchListeners() {
-      this.window.removeEventListener("touchmove", this.onWindowTouchMove);
-      this.window.removeEventListener("touchend", this.onWindowTouchEnd);
-      this.window.removeEventListener("touchcancel", this.onWindowTouchCancel);
-    }
-    processMoveThresholdVerification(x, y, thresholdReachedCallback) {
-      const distance = Math.sqrt(x * x + y * y);
-      this.movedDistance += distance;
-      if (this.movedDistance > this.movementThreshold) {
-        thresholdReachedCallback();
-      }
-    }
   }
   const createHost = () => {
     const host = document.createElement("div");
@@ -4957,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,
@@ -4981,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) => {
@@ -5102,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) => {
@@ -5237,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) {
@@ -5273,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) => {
@@ -5299,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 {
@@ -6313,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) {
@@ -6359,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;
@@ -6371,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) => {
@@ -6395,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
@@ -6605,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) => {
@@ -6729,6 +6717,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       movementThreshold: config.movementThreshold ?? selectionDefaults.movementThreshold
     };
   };
+  const createUserSelectableEdgesParams = (config) => {
+    return {
+      onEdgeSelected: config.onEdgeSelected,
+      mouseDownEventVerifier: config.mouseDownEventVerifier ?? selectionDefaults.mouseDownEventVerifier,
+      mouseUpEventVerifier: config.mouseUpEventVerifier ?? selectionDefaults.mouseUpEventVerifier,
+      movementThreshold: config.movementThreshold ?? selectionDefaults.movementThreshold
+    };
+  };
   class CanvasBuilder {
     constructor(element) {
       __publicField(this, "used", false);
@@ -6742,6 +6738,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "layoutConfig", {});
       __publicField(this, "animatedLayoutConfig", {});
       __publicField(this, "userSelectableNodesConfig");
+      __publicField(this, "userSelectableEdgesConfig");
       __publicField(this, "userSelectableCanvasConfig");
       __publicField(this, "hasDraggableNodes", false);
       __publicField(this, "hasTransformableViewport", false);
@@ -6755,6 +6752,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "window", window);
       __publicField(this, "animationStaticNodes", /* @__PURE__ */ new Set());
       __publicField(this, "pointInsideVerifier");
+      __publicField(this, "eventTagger", new EventTagger());
       this.element = element;
       this.pointInsideVerifier = new PointInsideVerifier(element, this.window);
     }
@@ -6811,6 +6809,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.userSelectableNodesConfig = config;
       return this;
     }
+    enableUserSelectableEdges(config) {
+      this.userSelectableEdgesConfig = config;
+      return this;
+    }
     enableUserSelectableCanvas(config) {
       this.userSelectableCanvasConfig = config;
       return this;
@@ -6868,6 +6870,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (this.hasNodeResizeReactiveEdges) {
         NodeResizeReactiveEdgesConfigurator.configure(canvas);
       }
+      if (this.userSelectableEdgesConfig !== void 0) {
+        const params = createUserSelectableEdgesParams(
+          this.userSelectableEdgesConfig
+        );
+        UserSelectableEdgesConfigurator.configure(
+          canvas,
+          this.window,
+          this.pointInsideVerifier,
+          this.eventTagger,
+          params
+        );
+      }
       if (this.userSelectableNodesConfig !== void 0) {
         const params = createUserSelectableNodesParams(
           this.userSelectableNodesConfig
@@ -6876,6 +6890,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           canvas,
           this.window,
           this.pointInsideVerifier,
+          this.eventTagger,
           params
         );
       }
@@ -6888,6 +6903,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           layers.main,
           this.window,
           this.pointInsideVerifier,
+          this.eventTagger,
           params
         );
       }
@@ -6959,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,
@@ -6974,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) {