@html-graph/html-graph 8.15.0 → 8.16.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) => {
@@ -2829,6 +2843,9 @@ class Graph {
       shape: payload.shape
     };
   }
+  findEdgeIdByElement(element) {
+    return this.graphStore.findEdgeIdByElement(element);
+  }
   getPortIncomingEdgeIds(portId) {
     return this.graphStore.getPortIncomingEdgeIds(portId);
   }
@@ -3456,6 +3473,163 @@ class AnimatedLayoutApplier {
     this.params.onAfterApplied();
   }
 }
+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);
+    }
+  }
+}
+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
+      });
+    });
+    __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();
+      });
+    });
+    __publicField(this, "onWindowMouseUp", (event) => {
+      const mouseEvent = event;
+      if (!this.mouseUpEventVerifier(mouseEvent)) {
+        return;
+      }
+      this.removeWindowMouseListeners();
+      this.onSelected(this.selectionCandidate, event);
+    });
+    __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();
+      });
+    });
+    __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 {
   constructor(canvas, element, window2, pointInsideVerifier, params) {
     __publicField(this, "grabbedNode", null);
@@ -4348,7 +4522,16 @@ class UserDraggableEdgesConfigurator {
           this.moveDraggingPort(cursor);
         },
         onPointerMoveOutside: () => {
-          this.handleEdgeReattachInterrupted();
+          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);
@@ -4598,311 +4781,152 @@ 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);
-      });
-    });
-    __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
+        this.configurator.disable(element);
       });
     });
-    __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();
-    });
+    );
+    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);
     __publicField(this, "restore", () => {
-      this.element.removeEventListener("mousedown", this.onMouseDown);
-      this.element.removeEventListener("touchstart", this.onTouchStart);
-      this.removeWindowMouseListeners();
-      this.removeWindowTouchListeners();
+      this.configurator.disable(this.element);
     });
     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.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.restore);
-    this.element.addEventListener("mousedown", this.onMouseDown, {
-      passive: true
-    });
-    this.element.addEventListener("touchstart", this.onTouchStart, {
-      passive: true
-    });
   }
-  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");
@@ -6716,6 +6740,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);
@@ -6729,6 +6761,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);
@@ -6742,6 +6775,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);
   }
@@ -6798,6 +6832,10 @@ class CanvasBuilder {
     this.userSelectableNodesConfig = config;
     return this;
   }
+  enableUserSelectableEdges(config) {
+    this.userSelectableEdgesConfig = config;
+    return this;
+  }
   enableUserSelectableCanvas(config) {
     this.userSelectableCanvasConfig = config;
     return this;
@@ -6855,6 +6893,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
@@ -6863,6 +6913,7 @@ class CanvasBuilder {
         canvas,
         this.window,
         this.pointInsideVerifier,
+        this.eventTagger,
         params
       );
     }
@@ -6875,6 +6926,7 @@ class CanvasBuilder {
         layers.main,
         this.window,
         this.pointInsideVerifier,
+        this.eventTagger,
         params
       );
     }