@html-graph/html-graph 8.15.0 → 8.16.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) => {
@@ -2833,6 +2847,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);
     }
@@ -3460,6 +3477,163 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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);
@@ -4352,7 +4526,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             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);
@@ -4602,311 +4785,152 @@ 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);
-        });
-      });
-      __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");
@@ -6720,6 +6744,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);
@@ -6733,6 +6765,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);
@@ -6746,6 +6779,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);
     }
@@ -6802,6 +6836,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;
@@ -6859,6 +6897,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
@@ -6867,6 +6917,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           canvas,
           this.window,
           this.pointInsideVerifier,
+          this.eventTagger,
           params
         );
       }
@@ -6879,6 +6930,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           layers.main,
           this.window,
           this.pointInsideVerifier,
+          this.eventTagger,
           params
         );
       }