@html-graph/html-graph 8.15.1 → 8.17.0

package/dist/html-graph.js

@@ -619,6 +619,7 @@ const canvasErrorText = Object.freeze({
   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`,
@@ -637,6 +638,7 @@ class GraphStore {
     __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");
@@ -817,6 +819,9 @@ class GraphStore {
     }
     return edge;
   }
+  findEdgeIdByElement(element) {
+    return this.edgesElementsMap.get(element);
+  }
   addEdge(request) {
     if (this.hasEdge(request.id)) {
       throw new CanvasError(canvasErrorText.addEdgeWithExistingId(request.id));
@@ -831,6 +836,12 @@ class GraphStore {
         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);
   }
@@ -888,6 +899,7 @@ class GraphStore {
     this.portCycleEdges.clear();
     this.elementPorts.clear();
     this.nodesElementsMap.clear();
+    this.edgesElementsMap.clear();
     this.edges.clear();
     this.ports.clear();
     this.nodes.clear();
@@ -996,6 +1008,7 @@ class GraphStore {
         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);
@@ -1004,7 +1017,7 @@ class GraphStore {
     }
   }
   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);
@@ -1012,6 +1025,7 @@ class GraphStore {
     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) => {
@@ -2673,6 +2687,11 @@ class InteractiveEdgeShape {
     __publicField(this, "line");
     __publicField(this, "sourceArrow");
     __publicField(this, "targetArrow");
+    // TODO: make private
+    /**
+     * @deprecated
+     * do use shape.svg instead
+     */
     __publicField(this, "handle", createEdgeGroup());
     __publicField(this, "onAfterRender");
     __publicField(this, "interactiveLine");
@@ -2829,6 +2848,9 @@ class Graph {
       shape: payload.shape
     };
   }
+  findEdgeIdByElement(element) {
+    return this.graphStore.findEdgeIdByElement(element);
+  }
   getPortIncomingEdgeIds(portId) {
     return this.graphStore.getPortIncomingEdgeIds(portId);
   }
@@ -3283,11 +3305,11 @@ class DraggablePortsConfigurator {
       }
       const target = event.currentTarget;
       const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-      const accepted = this.params.onPortPointerDown(portId, {
+      const dragAllowed = this.params.portDragAllowedVerifier(portId, {
         x: mouseEvent.clientX,
         y: mouseEvent.clientY
       });
-      if (!accepted) {
+      if (!dragAllowed) {
         return;
       }
       event.stopPropagation();
@@ -3304,8 +3326,8 @@ class DraggablePortsConfigurator {
         event.clientY
       );
       if (!isInside) {
-        this.params.onPointerMoveOutside();
-        this.stopMouseDrag();
+        this.removeWindowMouseListeners();
+        this.params.onPointerOutside();
         return;
       }
       this.params.onPointerMove({ x: event.clientX, y: event.clientY });
@@ -3314,8 +3336,8 @@ class DraggablePortsConfigurator {
       if (!this.params.mouseUpEventVerifier(event)) {
         return;
       }
+      this.removeWindowMouseListeners();
       this.params.onPointerUp({ x: event.clientX, y: event.clientY });
-      this.stopMouseDrag();
     });
     __publicField(this, "onPortTouchStart", (event) => {
       const touchEvent = event;
@@ -3325,11 +3347,11 @@ class DraggablePortsConfigurator {
       const touch = touchEvent.touches[0];
       const target = event.currentTarget;
       const portId = this.canvas.graph.findPortIdsByElement(target)[0];
-      const accepted = this.params.onPortPointerDown(portId, {
+      const dragAllowed = this.params.portDragAllowedVerifier(portId, {
         x: touch.clientX,
         y: touch.clientY
       });
-      if (!accepted) {
+      if (!dragAllowed) {
         return;
       }
       event.stopPropagation();
@@ -3350,16 +3372,16 @@ class DraggablePortsConfigurator {
         touch.clientY
       );
       if (!isInside) {
-        this.params.onPointerMoveOutside();
-        this.stopTouchDrag();
+        this.removeWindowTouchListeners();
+        this.params.onPointerOutside();
         return;
       }
       this.params.onPointerMove({ x: touch.clientX, y: touch.clientY });
     });
     __publicField(this, "onWindowTouchFinish", (event) => {
+      this.removeWindowTouchListeners();
       const touch = event.changedTouches[0];
       this.params.onPointerUp({ x: touch.clientX, y: touch.clientY });
-      this.stopTouchDrag();
     });
     __publicField(this, "reset", () => {
       this.canvas.graph.getAllPortIds().forEach((portId) => {
@@ -3368,10 +3390,9 @@ class DraggablePortsConfigurator {
       });
     });
     __publicField(this, "revert", () => {
-      this.params.onStopDrag();
-      this.reset();
       this.removeWindowMouseListeners();
       this.removeWindowTouchListeners();
+      this.reset();
     });
     this.canvas = canvas;
     this.window = window2;
@@ -3397,14 +3418,6 @@ class DraggablePortsConfigurator {
     element.removeEventListener("mousedown", this.onPortMouseDown);
     element.removeEventListener("touchstart", this.onPortTouchStart);
   }
-  stopMouseDrag() {
-    this.params.onStopDrag();
-    this.removeWindowMouseListeners();
-  }
-  stopTouchDrag() {
-    this.params.onStopDrag();
-    this.removeWindowTouchListeners();
-  }
   removeWindowMouseListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove);
     this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -3415,45 +3428,161 @@ class DraggablePortsConfigurator {
     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 {
@@ -4193,34 +4322,39 @@ class UserConnectablePortsConfigurator {
       this.viewportStore,
       this.window
     );
+    const draggablePortsParams = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      portDragAllowedVerifier: (portId, cursor) => {
+        const connectionType = this.params.connectionTypeResolver(portId);
+        if (connectionType === null) {
+          return false;
+        }
+        this.grabPort(portId, cursor, connectionType);
+        return true;
+      },
+      onPointerMove: (cursor) => {
+        this.moveDraggingPort(cursor);
+      },
+      onPointerUp: (cursor) => {
+        this.tryCreateConnection(cursor);
+        this.resetDragState();
+      },
+      onPointerOutside: () => {
+        const staticPortId = this.staticPortId;
+        const isTargetDragging = this.isTargetDragging;
+        this.resetDragState();
+        this.params.onEdgeCreationInterrupted({
+          staticPortId,
+          isDirect: isTargetDragging
+        });
+      }
+    };
     DraggablePortsConfigurator.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
-      {
-        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        onStopDrag: () => {
-          this.resetDragState();
-        },
-        onPortPointerDown: (portId, cursor) => {
-          const connectionType = this.params.connectionTypeResolver(portId);
-          if (connectionType === null) {
-            return false;
-          }
-          this.grabPort(portId, cursor, connectionType);
-          return true;
-        },
-        onPointerMove: (cursor) => {
-          this.moveDraggingPort(cursor);
-        },
-        onPointerMoveOutside: () => {
-          this.handleEdgeCreationInterrupted();
-        },
-        onPointerUp: (cursor) => {
-          this.tryCreateConnection(cursor);
-        }
-      }
+      draggablePortsParams
     );
   }
   static configure(canvas, overlayLayer, viewportStore, win, pointInsideVerifier, params) {
@@ -4276,15 +4410,19 @@ class UserConnectablePortsConfigurator {
   tryCreateConnection(cursor) {
     const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
     if (draggingPortId === null) {
-      this.handleEdgeCreationInterrupted();
+      this.params.onEdgeCreationInterrupted({
+        staticPortId: this.staticPortId,
+        isDirect: this.isTargetDragging
+      });
       return;
     }
     const staticPortId = this.staticPortId;
     const sourceId = this.isTargetDragging ? staticPortId : draggingPortId;
     const targetId = this.isTargetDragging ? draggingPortId : staticPortId;
     const request = { from: sourceId, to: targetId };
+    const connectionAllowed = this.params.connectionAllowedVerifier(request);
     const processedRequest = this.params.connectionPreprocessor(request);
-    if (processedRequest !== null) {
+    if (connectionAllowed && processedRequest !== null) {
       this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated);
       this.canvas.addEdge(processedRequest);
       this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated);
@@ -4303,13 +4441,6 @@ class UserConnectablePortsConfigurator {
       y: nodeContentCoords.y
     });
   }
-  handleEdgeCreationInterrupted() {
-    const staticPortId = this.staticPortId;
-    this.params.onEdgeCreationInterrupted({
-      staticPortId,
-      isDirect: this.isTargetDragging
-    });
-  }
 }
 class UserDraggableEdgesConfigurator {
   constructor(canvas, overlayLayer, viewportStore, window2, pointInsideVerifier, params) {
@@ -4331,38 +4462,36 @@ class UserDraggableEdgesConfigurator {
       this.viewportStore,
       this.window
     );
+    const draggablePortsParams = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      portDragAllowedVerifier: (portId, cursor) => {
+        return this.tryStartEdgeDragging(portId, cursor);
+      },
+      onPointerMove: (cursor) => {
+        this.moveDraggingPort(cursor);
+      },
+      onPointerUp: (cursor) => {
+        this.tryCreateConnection(cursor);
+        this.resetDragState();
+      },
+      onPointerOutside: () => {
+        const edge = this.draggingEdgePayload;
+        this.resetDragState();
+        this.params.onEdgeReattachInterrupted({
+          id: edge.id,
+          from: edge.from,
+          to: edge.to,
+          shape: edge.shape,
+          priority: edge.priority
+        });
+      }
+    };
     DraggablePortsConfigurator.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
-      {
-        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        onStopDrag: () => {
-          this.resetDragState();
-        },
-        onPortPointerDown: (portId, cursor) => {
-          return this.tryStartEdgeDragging(portId, cursor);
-        },
-        onPointerMove: (cursor) => {
-          this.moveDraggingPort(cursor);
-        },
-        onPointerMoveOutside: () => {
-          const edge = this.draggingEdgePayload;
-          queueMicrotask(() => {
-            this.params.onEdgeReattachInterrupted({
-              id: edge.id,
-              from: edge.from,
-              to: edge.to,
-              shape: edge.shape,
-              priority: edge.priority
-            });
-          });
-        },
-        onPointerUp: (cursor) => {
-          this.tryCreateConnection(cursor);
-        }
-      }
+      draggablePortsParams
     );
   }
   static configure(canvas, overlayLayer, viewportStore, win, pointInsideVerifier, params) {
@@ -4377,7 +4506,7 @@ class UserDraggableEdgesConfigurator {
   }
   tryStartEdgeDragging(portId, cursor) {
     const edgeId = this.params.draggingEdgeResolver(portId);
-    if (edgeId === null || !this.canvas.graph.hasEdge(edgeId)) {
+    if (edgeId === null) {
       return false;
     }
     const edge = this.canvas.graph.getEdge(edgeId);
@@ -4466,8 +4595,12 @@ class UserDraggableEdgesConfigurator {
       shape: edge.shape,
       priority: edge.priority
     };
+    const connectionAllowed = this.params.connectionAllowedVerifier({
+      from,
+      to
+    });
     const processedRequest = this.params.connectionPreprocessor(request);
-    if (processedRequest !== null) {
+    if (connectionAllowed && processedRequest !== null) {
       this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached);
       this.canvas.addEdge(processedRequest);
       this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
@@ -4543,6 +4676,26 @@ class TopologyChangeAsyncLayoutApplicationStrategyConfigurator {
     this.defererFn(this.apply);
   }
 }
+class LayoutApplier {
+  constructor(canvas, layoutAlgorithm, params) {
+    this.canvas = canvas;
+    this.layoutAlgorithm = layoutAlgorithm;
+    this.params = params;
+  }
+  apply() {
+    const coords = this.layoutAlgorithm.calculateCoordinates({
+      graph: this.canvas.graph,
+      viewport: this.canvas.viewport
+    });
+    this.params.onBeforeApplied();
+    coords.forEach((point, nodeId) => {
+      if (!this.params.staticNodeResolver(nodeId)) {
+        this.canvas.updateNode(nodeId, point);
+      }
+    });
+    this.params.onAfterApplied();
+  }
+}
 class LayoutConfigurator {
   static configure(canvas, params) {
     const strategy = params.applyOn;
@@ -4588,6 +4741,27 @@ class AnimationSeries {
     this.win.requestAnimationFrame(this.step);
   }
 }
+class AnimatedLayoutApplier {
+  constructor(canvas, layoutAlgorithm, params) {
+    this.canvas = canvas;
+    this.layoutAlgorithm = layoutAlgorithm;
+    this.params = params;
+  }
+  apply(dt) {
+    const coords = this.layoutAlgorithm.calculateNextCoordinates({
+      graph: this.canvas.graph,
+      viewport: this.canvas.viewport,
+      dt
+    });
+    this.params.onBeforeApplied();
+    coords.forEach((point, nodeId) => {
+      if (!this.params.staticNodeResolver(nodeId)) {
+        this.canvas.updateNode(nodeId, point);
+      }
+    });
+    this.params.onAfterApplied();
+  }
+}
 class AnimatedLayoutConfigurator {
   constructor(canvas, params, win) {
     __publicField(this, "applier");
@@ -4607,311 +4781,151 @@ class AnimatedLayoutConfigurator {
   }
 }
 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");
@@ -4953,22 +4967,38 @@ class Layers {
     this.element.removeChild(this.host);
   }
 }
+const forceDirectedDefaults = Object.freeze({
+  seed: "HTMLGraph is awesome",
+  maxTimeDeltaSec: 0.01,
+  nodeCharge: 1e5,
+  nodeMass: 1,
+  edgeEquilibriumLength: 300,
+  edgeStiffness: 1e3,
+  dtSec: 0.01,
+  maxIterations: 1e3,
+  convergenceVelocity: 10,
+  maxForce: 1e7,
+  nodeForceCoefficient: 1,
+  barnesHutAreaRadiusThreshold: 0.01,
+  barnesHutTheta: 1
+});
+const selectionDefaults = Object.freeze({
+  mouseDownEventVerifier: (event) => event.button === 0,
+  mouseUpEventVerifier: (event) => event.button === 0,
+  movementThreshold: 10
+});
+const noopFn = () => {
+};
 const createDraggableNodesParams = (config) => {
   var _a, _b, _c, _d, _e, _f;
-  const onNodeDragStarted = ((_a = config.events) == null ? void 0 : _a.onNodeDragStarted) ?? (() => {
-  });
-  const onNodeDrag = ((_b = config.events) == null ? void 0 : _b.onNodeDrag) ?? (() => {
-  });
   const nodeDragVerifier = config.nodeDragVerifier ?? (() => true);
-  const onNodeDragFinished = ((_c = config.events) == null ? void 0 : _c.onNodeDragFinished) ?? (() => {
-  });
   const moveOnTop = config.moveOnTop !== false;
   const moveEdgesOnTop = config.moveEdgesOnTop !== false && moveOnTop;
-  const cursor = (_d = config.mouse) == null ? void 0 : _d.dragCursor;
+  const cursor = (_a = config.mouse) == null ? void 0 : _a.dragCursor;
   const dragCursor = cursor !== void 0 ? cursor : "grab";
-  const defaultMouseDownEventVerifier = (_e = config.mouse) == null ? void 0 : _e.mouseDownEventVerifier;
+  const defaultMouseDownEventVerifier = (_b = config.mouse) == null ? void 0 : _b.mouseDownEventVerifier;
   const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-  const defaultMouseUpEventVerifier = (_f = config.mouse) == null ? void 0 : _f.mouseUpEventVerifier;
+  const defaultMouseUpEventVerifier = (_c = config.mouse) == null ? void 0 : _c.mouseUpEventVerifier;
   const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
   return {
     moveOnTop,
@@ -4977,10 +5007,10 @@ const createDraggableNodesParams = (config) => {
     gridSize: config.gridSize ?? null,
     mouseDownEventVerifier,
     mouseUpEventVerifier,
-    onNodeDragStarted,
-    onNodeDrag,
+    onNodeDragStarted: ((_d = config.events) == null ? void 0 : _d.onNodeDragStarted) ?? noopFn,
+    onNodeDrag: ((_e = config.events) == null ? void 0 : _e.onNodeDrag) ?? noopFn,
     nodeDragVerifier,
-    onNodeDragFinished
+    onNodeDragFinished: ((_f = config.events) == null ? void 0 : _f.onNodeDragFinished) ?? noopFn
   };
 };
 const createShiftLimitTransformPreprocessor = (preprocessorParams) => {
@@ -5098,34 +5128,26 @@ const createTransformableViewportParams = (transformConfig) => {
     };
   }
   const shiftCursor = ((_b = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _b.cursor) !== void 0 ? transformConfig.shift.cursor : "grab";
-  const onBeforeTransformStarted = ((_c = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _c.onBeforeTransformChange) ?? (() => {
-  });
-  const onTransformFinished = ((_d = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _d.onTransformChange) ?? (() => {
-  });
-  const defaultMouseDownEventVerifier = (_e = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _e.mouseDownEventVerifier;
+  const defaultMouseDownEventVerifier = (_c = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _c.mouseDownEventVerifier;
   const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-  const defaultMouseUpEventVerifier = (_f = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _f.mouseUpEventVerifier;
+  const defaultMouseUpEventVerifier = (_d = transformConfig == null ? void 0 : transformConfig.shift) == null ? void 0 : _d.mouseUpEventVerifier;
   const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
-  const defaultMouseWheelEventVerifier = (_g = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _g.mouseWheelEventVerifier;
+  const defaultMouseWheelEventVerifier = (_e = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _e.mouseWheelEventVerifier;
   const mouseWheelEventVerifier = defaultMouseWheelEventVerifier !== void 0 ? defaultMouseWheelEventVerifier : () => true;
   return {
     wheelSensitivity,
-    onTransformStarted: ((_h = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _h.onTransformStarted) ?? (() => {
-    }),
-    onTransformFinished: ((_i = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _i.onTransformFinished) ?? (() => {
-    }),
-    onBeforeTransformChange: onBeforeTransformStarted,
-    onTransformChange: onTransformFinished,
+    onTransformStarted: ((_f = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _f.onTransformStarted) ?? noopFn,
+    onTransformFinished: ((_g = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _g.onTransformFinished) ?? noopFn,
+    onBeforeTransformChange: ((_h = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _h.onBeforeTransformChange) ?? noopFn,
+    onTransformChange: ((_i = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _i.onTransformChange) ?? noopFn,
     transformPreprocessor,
     shiftCursor,
     mouseDownEventVerifier,
     mouseUpEventVerifier,
     mouseWheelEventVerifier,
     scaleWheelFinishTimeout: ((_j = transformConfig == null ? void 0 : transformConfig.scale) == null ? void 0 : _j.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((_k = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _k.onResizeTransformStarted) ?? (() => {
-    }),
-    onResizeTransformFinished: ((_l = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _l.onResizeTransformFinished) ?? (() => {
-    })
+    onResizeTransformStarted: ((_k = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _k.onResizeTransformStarted) ?? noopFn,
+    onResizeTransformFinished: ((_l = transformConfig == null ? void 0 : transformConfig.events) == null ? void 0 : _l.onResizeTransformFinished) ?? noopFn
   };
 };
 const createContent = (radius, color) => {
@@ -5233,34 +5255,35 @@ const resolveEdgeShapeFactory = (config) => {
       });
   }
 };
+const defaults$3 = Object.freeze({
+  connectionTypeResolver: () => "direct",
+  connectionPreprocessor: (request) => request,
+  connectionAllowedVerifier: () => true,
+  mouseEventVerifier: (event) => event.button === 0
+});
 const createConnectablePortsParams = (config, defaultEdgeShapeFactory, defaultDragPortDirection) => {
   var _a, _b, _c;
-  const defaultConnectionTypeResolver = () => "direct";
-  const defaultConnectionPreprocessor = (request) => request;
-  const defaultMouseEventVerifier = (event) => event.button === 0;
-  const defaultOnAfterEdgeCreated = () => {
-  };
-  const defaultOnAfterEdgeConnectionPrevented = () => {
-  };
-  const defaultOnAfterEdgeConnectionInterrupted = () => {
-  };
   return {
-    connectionTypeResolver: config.connectionTypeResolver ?? defaultConnectionTypeResolver,
-    connectionPreprocessor: config.connectionPreprocessor ?? defaultConnectionPreprocessor,
-    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaultMouseEventVerifier,
-    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaultMouseEventVerifier,
-    onAfterEdgeCreated: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeCreated) ?? defaultOnAfterEdgeCreated,
-    onEdgeCreationInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeCreationInterrupted) ?? defaultOnAfterEdgeConnectionInterrupted,
-    onEdgeCreationPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeCreationPrevented) ?? defaultOnAfterEdgeConnectionPrevented,
+    connectionTypeResolver: config.connectionTypeResolver ?? defaults$3.connectionTypeResolver,
+    connectionPreprocessor: config.connectionPreprocessor ?? defaults$3.connectionPreprocessor,
+    connectionAllowedVerifier: config.connectionAllowedVerifier ?? defaults$3.connectionAllowedVerifier,
+    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$3.mouseEventVerifier,
+    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$3.mouseEventVerifier,
+    onAfterEdgeCreated: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeCreated) ?? noopFn,
+    onEdgeCreationInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeCreationInterrupted) ?? noopFn,
+    onEdgeCreationPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeCreationPrevented) ?? noopFn,
     dragPortDirection: config.dragPortDirection ?? defaultDragPortDirection,
     edgeShapeFactory: config.edgeShape !== void 0 ? resolveEdgeShapeFactory(config.edgeShape) : defaultEdgeShapeFactory
   };
 };
+const defaults$2 = Object.freeze({
+  connectionAllowedVerifier: () => true,
+  connectionPreprocessor: (request) => request,
+  mouseDownEventVerifier: (event) => event.button === 0 && event.ctrlKey,
+  mouseUpEventVerifier: (event) => event.button === 0
+});
 const createDraggableEdgeParams = (config, graph) => {
   var _a, _b, _c;
-  const defaultConnectionPreprocessor = (request) => request;
-  const defaultMouseDownEventVerifier = (event) => event.button === 0 && event.ctrlKey;
-  const defaultMouseUpEventVerifier = (event) => event.button === 0;
   const defaultDraggingEdgeResolver = (portId) => {
     const edgeIds = graph.getPortAdjacentEdgeIds(portId);
     if (edgeIds.length > 0) {
@@ -5269,21 +5292,16 @@ const createDraggableEdgeParams = (config, graph) => {
       return null;
     }
   };
-  const defaultOnAfterEdgeReattached = () => {
-  };
-  const defaultOnAfterEdgeReattachPrevented = () => {
-  };
-  const defaultOnAfterEdgeReattachInterrupted = () => {
-  };
   return {
-    connectionPreprocessor: config.connectionPreprocessor ?? defaultConnectionPreprocessor,
-    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaultMouseDownEventVerifier,
-    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaultMouseUpEventVerifier,
+    connectionPreprocessor: config.connectionPreprocessor ?? defaults$2.connectionPreprocessor,
+    connectionAllowedVerifier: config.connectionAllowedVerifier ?? defaults$2.connectionAllowedVerifier,
+    mouseDownEventVerifier: config.mouseDownEventVerifier ?? defaults$2.mouseDownEventVerifier,
+    mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$2.mouseUpEventVerifier,
     draggingEdgeResolver: config.draggingEdgeResolver ?? defaultDraggingEdgeResolver,
     draggingEdgeShapeFactory: config.draggingEdgeShape !== void 0 ? resolveEdgeShapeFactory(config.draggingEdgeShape) : null,
-    onAfterEdgeReattached: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeReattached) ?? defaultOnAfterEdgeReattached,
-    onEdgeReattachInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeReattachInterrupted) ?? defaultOnAfterEdgeReattachInterrupted,
-    onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? defaultOnAfterEdgeReattachPrevented
+    onAfterEdgeReattached: ((_a = config.events) == null ? void 0 : _a.onAfterEdgeReattached) ?? noopFn,
+    onEdgeReattachInterrupted: ((_b = config.events) == null ? void 0 : _b.onEdgeReattachInterrupted) ?? noopFn,
+    onEdgeReattachPrevented: ((_c = config.events) == null ? void 0 : _c.onEdgeReattachPrevented) ?? noopFn
   };
 };
 const createVirtualScrollParams = (config) => {
@@ -5295,10 +5313,8 @@ const createVirtualScrollParams = (config) => {
 const createVirtualScrollHtmlViewParams = (config) => {
   var _a, _b;
   return {
-    onAfterNodeDetached: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onAfterNodeDetached) ?? (() => {
-    }),
-    onBeforeNodeAttached: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onBeforeNodeAttached) ?? (() => {
-    })
+    onAfterNodeDetached: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onAfterNodeDetached) ?? noopFn,
+    onBeforeNodeAttached: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onBeforeNodeAttached) ?? noopFn
   };
 };
 class CanvasBuilderError extends Error {
@@ -6309,26 +6325,6 @@ const sfc32 = (a, b, c, d) => {
     return (t >>> 0) / 4294967296;
   };
 };
-const forceDirectedDefaults = Object.freeze({
-  seed: "HTMLGraph is awesome",
-  maxTimeDeltaSec: 0.01,
-  nodeCharge: 1e5,
-  nodeMass: 1,
-  edgeEquilibriumLength: 300,
-  edgeStiffness: 1e3,
-  dtSec: 0.01,
-  maxIterations: 1e3,
-  convergenceVelocity: 10,
-  maxForce: 1e7,
-  nodeForceCoefficient: 1,
-  barnesHutAreaRadiusThreshold: 0.01,
-  barnesHutTheta: 1
-});
-const selectionDefaults = Object.freeze({
-  mouseDownEventVerifier: (event) => event.button === 0,
-  mouseUpEventVerifier: (event) => event.button === 0,
-  movementThreshold: 10
-});
 const resolveAnimatedLayoutAlgorithm = (config) => {
   var _a, _b;
   switch (config == null ? void 0 : config.type) {
@@ -6355,11 +6351,7 @@ const resolveAnimatedLayoutAlgorithm = (config) => {
   }
 };
 const defaults$1 = {
-  staticNodeResolver: () => false,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  }
+  staticNodeResolver: () => false
 };
 const createAnimatedLayoutParams = (config) => {
   var _a, _b;
@@ -6367,8 +6359,8 @@ const createAnimatedLayoutParams = (config) => {
   return {
     algorithm,
     staticNodeResolver: (config == null ? void 0 : config.staticNodeResolver) ?? defaults$1.staticNodeResolver,
-    onBeforeApplied: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onBeforeApplied) ?? defaults$1.onBeforeApplied,
-    onAfterApplied: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onAfterApplied) ?? defaults$1.onAfterApplied
+    onBeforeApplied: ((_a = config == null ? void 0 : config.events) == null ? void 0 : _a.onBeforeApplied) ?? noopFn,
+    onAfterApplied: ((_b = config == null ? void 0 : config.events) == null ? void 0 : _b.onAfterApplied) ?? noopFn
   };
 };
 const resolveLayoutApplyOn = (applyOn) => {
@@ -6391,10 +6383,6 @@ const resolveLayoutApplyOn = (applyOn) => {
 };
 const defaults = Object.freeze({
   staticNodeResolver: () => false,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  },
   hierarchicalLayout: {
     layerWidth: 300,
     layerSpace: 300
@@ -6601,8 +6589,8 @@ const createLayoutParams = (config) => {
     algorithm: resolveLayoutAlgorithm(config.algorithm),
     applyOn: resolveLayoutApplyOn(config.applyOn),
     staticNodeResolver: config.staticNodeResolver ?? defaults.staticNodeResolver,
-    onBeforeApplied: ((_a = config.events) == null ? void 0 : _a.onBeforeApplied) ?? defaults.onBeforeApplied,
-    onAfterApplied: ((_b = config.events) == null ? void 0 : _b.onAfterApplied) ?? defaults.onAfterApplied
+    onBeforeApplied: ((_a = config.events) == null ? void 0 : _a.onBeforeApplied) ?? noopFn,
+    onAfterApplied: ((_b = config.events) == null ? void 0 : _b.onAfterApplied) ?? noopFn
   };
 };
 const patchAnimatedLayoutDraggableNodesParams = (params, staticNodes) => {
@@ -6725,6 +6713,14 @@ const createUserSelectableCanvasParams = (config) => {
     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);
@@ -6738,6 +6734,7 @@ class CanvasBuilder {
     __publicField(this, "layoutConfig", {});
     __publicField(this, "animatedLayoutConfig", {});
     __publicField(this, "userSelectableNodesConfig");
+    __publicField(this, "userSelectableEdgesConfig");
     __publicField(this, "userSelectableCanvasConfig");
     __publicField(this, "hasDraggableNodes", false);
     __publicField(this, "hasTransformableViewport", false);
@@ -6751,6 +6748,7 @@ class CanvasBuilder {
     __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);
   }
@@ -6807,6 +6805,10 @@ class CanvasBuilder {
     this.userSelectableNodesConfig = config;
     return this;
   }
+  enableUserSelectableEdges(config) {
+    this.userSelectableEdgesConfig = config;
+    return this;
+  }
   enableUserSelectableCanvas(config) {
     this.userSelectableCanvasConfig = config;
     return this;
@@ -6864,6 +6866,18 @@ class CanvasBuilder {
     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
@@ -6872,6 +6886,7 @@ class CanvasBuilder {
         canvas,
         this.window,
         this.pointInsideVerifier,
+        this.eventTagger,
         params
       );
     }
@@ -6884,6 +6899,7 @@ class CanvasBuilder {
         layers.main,
         this.window,
         this.pointInsideVerifier,
+        this.eventTagger,
         params
       );
     }
@@ -6955,9 +6971,7 @@ class CanvasBuilder {
       LayoutConfigurator.configure(canvas, layoutParams);
     }
     if (this.hasAnimatedLayout) {
-      let config = createAnimatedLayoutParams(
-        this.animatedLayoutConfig
-      );
+      let config = createAnimatedLayoutParams(this.animatedLayoutConfig);
       if (this.hasDraggableNodes) {
         subscribeAnimatedLayoutStaticNodesUpdate(
           canvas,
@@ -6970,11 +6984,9 @@ class CanvasBuilder {
       }
       AnimatedLayoutConfigurator.configure(canvas, config, this.window);
     }
-    const onBeforeDestroy = () => {
+    canvas.onBeforeDestroy.subscribe(() => {
       layers.destroy();
-      canvas.onBeforeDestroy.unsubscribe(onBeforeDestroy);
-    };
-    canvas.onBeforeDestroy.subscribe(onBeforeDestroy);
+    });
     return canvas;
   }
   createHtmlView(host, graphStore, viewportStore) {