@nyaruka/temba-components 0.138.6 → 0.139.0

package/out-tsc/src/flow/Plumber.js

@@ -1,117 +1,134 @@
-import { DotEndpoint, FlowchartConnector, newInstance, ready, RectangleEndpoint, EVENT_CONNECTION_DRAG, EVENT_CONNECTION_ABORT, INTERCEPT_BEFORE_DROP, EVENT_CONNECTION, EVENT_REVERT, INTERCEPT_BEFORE_DETACH, EVENT_CONNECTION_DETACHED } from '@jsplumb/browser-ui';
-import { getStore } from '../store/Store';
-const CONNECTOR_DEFAULTS = {
-    type: FlowchartConnector.type,
-    options: {
-        stub: [20, 10],
-        midpoint: 0.5,
-        alwaysRespectStubs: true,
-        cornerRadius: 5,
-        cssClass: 'plumb-connector'
-    }
-};
-const OVERLAYS_DEFAULTS = [
-    {
-        type: 'PlainArrow',
-        options: {
-            width: 13,
-            length: 13,
-            location: 0.999,
-            cssClass: 'plumb-arrow'
-        }
-    }
-];
-export const SOURCE_DEFAULTS = {
-    endpoint: {
-        type: DotEndpoint.type,
-        options: {
-            radius: 12,
-            cssClass: 'plumb-source',
-            hoverClass: 'plumb-source-hover'
-        }
-    },
-    anchors: ['Bottom', 'Continuous'],
-    maxConnections: 1,
-    source: true,
-    dragAllowedWhenFull: false
-};
-export const TARGET_DEFAULTS = {
-    endpoint: {
-        type: RectangleEndpoint.type,
-        options: {
-            width: 23,
-            height: 23,
-            cssClass: 'plumb-target',
-            hoverClass: 'plumb-target-hover'
-        }
-    },
-    anchor: {
-        type: 'Continuous',
-        options: {
-            faces: ['top', 'left', 'right'],
-            cssClass: 'continuos plumb-target-anchor'
-        }
-    },
-    deleteOnEmpty: true,
-    maxConnections: 1,
-    target: true
-};
-export class Plumber {
-    initializeJSPlumb(canvas) {
-        this.jsPlumb = newInstance({
-            container: canvas,
-            connectionsDetachable: true,
-            endpointStyle: {
-                fill: 'green'
-            },
-            connector: CONNECTOR_DEFAULTS,
-            connectionOverlays: OVERLAYS_DEFAULTS
-        });
-        // Bind to connection events
-        this.jsPlumb.bind(EVENT_CONNECTION, (info) => {
-            this.connectionDragging = false;
-            this.notifyListeners(EVENT_CONNECTION, info);
-        });
-        // Bind to connection drag events
-        this.jsPlumb.bind(EVENT_CONNECTION_DRAG, (info) => {
-            this.connectionDragging = true;
-            this.notifyListeners(EVENT_CONNECTION_DRAG, info);
-        });
-        this.jsPlumb.bind(EVENT_CONNECTION_ABORT, (info) => {
-            this.connectionDragging = false;
-            this.notifyListeners(EVENT_CONNECTION_ABORT, info);
-        });
-        this.jsPlumb.bind(EVENT_CONNECTION_DETACHED, (info) => {
-            this.connectionDragging = false;
-            this.notifyListeners(EVENT_CONNECTION_DETACHED, info);
-        });
-        this.jsPlumb.bind(EVENT_REVERT, (info) => {
-            this.notifyListeners(EVENT_REVERT, info);
-        });
-        this.jsPlumb.bind(INTERCEPT_BEFORE_DROP, () => {
-            // we always deny automatic connections
-            return false;
-        });
-        this.jsPlumb.bind(INTERCEPT_BEFORE_DETACH, () => { });
+// Shared arrow/drag constants used by both Plumber and Editor
+export const ARROW_LENGTH = 13;
+export const ARROW_HALF_WIDTH = 6.5;
+export const CURSOR_GAP = 1;
+export const EXIT_STUB = 30;
+/**
+ * Calculate a flowchart-style SVG path between two points.
+ * Routes with right-angle segments, stubs at each end, and rounded corners.
+ * Supports entering the target from top, left, or right faces.
+ */
+export function calculateFlowchartPath(sourceX, sourceY, targetX, targetY, stubStart = 20, stubEnd = 10, cornerRadius = 5, targetFace = 'top') {
+    const r = cornerRadius;
+    if (targetFace === 'top') {
+        // Target is below (or we treat it as such): exit down, horizontal jog, enter from top
+        const exitY = sourceY + stubStart;
+        const entryY = targetY - stubEnd;
+        let d = `M ${sourceX} ${sourceY}`;
+        if (sourceX === targetX) {
+            // Straight vertical — no turns needed
+            d += ` L ${targetX} ${entryY}`;
+        }
+        else {
+            // L-shape: exit curves horizontal, then straight down to target.
+            // jogY is the horizontal level — must be above entryY so the
+            // final approach into the node is always downward (no backtracking).
+            const dirX = targetX > sourceX ? 1 : -1;
+            const jogY = Math.max(sourceY + r, Math.min(exitY, entryY - r));
+            // Corner 1: vertical→horizontal at jogY
+            const r1 = Math.min(r, jogY - sourceY);
+            if (r1 >= 1) {
+                d += ` L ${sourceX} ${jogY - r1}`;
+                d += ` Q ${sourceX} ${jogY}, ${sourceX + dirX * r1} ${jogY}`;
+            }
+            else {
+                d += ` L ${sourceX} ${jogY}`;
+            }
+            // Corner 2: horizontal→vertical at targetX — leave minSeg of
+            // straight line after the curve before reaching entryY
+            const minSeg = 3;
+            const r2 = Math.min(r, Math.max(0, entryY - jogY - minSeg));
+            if (r2 >= 1) {
+                d += ` L ${targetX - dirX * r2} ${jogY}`;
+                d += ` Q ${targetX} ${jogY}, ${targetX} ${jogY + r2}`;
+            }
+            else {
+                d += ` L ${targetX} ${jogY}`;
+            }
+            d += ` L ${targetX} ${entryY}`;
+        }
+        d += ` L ${targetX} ${targetY}`;
+        return d;
+    }
+    if (targetFace === 'left' || targetFace === 'right') {
+        // Route: exit down from source, horizontal jog, vertical to target Y, stub into side
+        // When target is above source, skip the exit stub so the path turns horizontal
+        // as quickly as possible (only the corner radius creates downward travel)
+        const goingUp = targetY < sourceY;
+        const exitY = sourceY + (goingUp ? 0 : stubStart);
+        const sideDir = targetFace === 'left' ? -1 : 1;
+        // Entry point is OUTSIDE the node boundary (stub behind arrowhead)
+        const entryX = targetX + sideDir * stubEnd;
+        const dirX = entryX > sourceX ? 1 : -1;
+        // Minimum straight segment after each curve
+        const minSeg = 3;
+        // When the horizontal approach would double-back over the stub
+        // (dirX matches sideDir), keep midY at the natural exit level so
+        // the path jogs horizontally ABOVE the target and descends into
+        // the stub — never dipping past the target and curving back up.
+        // For non-backtrack, midY goes to targetY for a direct entry.
+        const midY = dirX === sideDir ? exitY + r * 2 : Math.max(exitY + r * 2, targetY);
+        let d = `M ${sourceX} ${sourceY} L ${sourceX} ${exitY}`;
+        // Corner 1: vertical→horizontal at (sourceX, midY)
+        if (midY - exitY > r) {
+            d += ` L ${sourceX} ${midY - r}`;
+            d += ` Q ${sourceX} ${midY}, ${sourceX + dirX * r} ${midY}`;
+        }
+        const vertGap = Math.abs(midY - targetY);
+        if (vertGap < 1) {
+            // midY ≈ targetY — horizontal to entryX, then stub into face
+            d += ` L ${entryX} ${targetY}`;
+            d += ` L ${targetX} ${targetY}`;
+        }
+        else {
+            // Corners 2 and 3 — turnR is limited so that at least minSeg of
+            // straight line remains between the two corners and after corner 3
+            const turnDir = targetY < midY ? -1 : 1;
+            const turnR = Math.min(r, Math.max(0, Math.floor((vertGap - minSeg) / 2)), Math.max(0, stubEnd - minSeg));
+            if (turnR >= 1) {
+                // Corner 2: horizontal→vertical at (entryX, midY)
+                d += ` L ${entryX - dirX * turnR} ${midY}`;
+                d += ` Q ${entryX} ${midY}, ${entryX} ${midY + turnDir * turnR}`;
+                // Vertical toward targetY
+                d += ` L ${entryX} ${targetY - turnDir * turnR}`;
+                // Corner 3: vertical→horizontal into side face
+                d += ` Q ${entryX} ${targetY}, ${entryX - sideDir * turnR} ${targetY}`;
+            }
+            else {
+                d += ` L ${entryX} ${midY}`;
+                d += ` L ${entryX} ${targetY}`;
+            }
+            // Horizontal stub into target face
+            d += ` L ${targetX} ${targetY}`;
+        }
+        return d;
     }
+    return `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`;
+}
+export class Plumber {
     constructor(canvas, editor) {
-        this.jsPlumb = null;
+        this.connections = new Map();
+        this.sources = new Map(); // exitId → cleanup fn
         this.pendingConnections = [];
-        this.connectionListeners = new Map();
-        this.connectionDragging = false;
         this.connectionWait = null;
+        this.connectionListeners = new Map();
+        this.dragState = null;
+        this.retryCount = 0;
+        this.maxRetries = 3;
+        // Activity overlay state
         this.activityData = null;
+        this.overlays = new Map();
         this.hoveredActivityKey = null;
         this.recentContactsPopup = null;
         this.recentContactsCache = {};
         this.pendingFetches = {};
         this.hideContactsTimeout = null;
         this.showContactsTimeout = null;
+        this.connectionDragging = false;
+        this.canvas = canvas;
         this.editor = editor;
-        ready(() => {
-            this.initializeJSPlumb(canvas);
-        });
     }
+    // --- Event system ---
     notifyListeners(eventName, info) {
         const listeners = this.connectionListeners.get(eventName) || [];
         listeners.forEach((listener) => listener(info));
@@ -131,219 +148,547 @@ export class Plumber {
             listeners.splice(index, 1);
         }
     }
-    makeTarget(uuid) {
-        const element = document.getElementById(uuid);
+    // --- Source/Target registration ---
+    makeSource(exitId) {
+        const element = document.getElementById(exitId);
         if (!element)
             return;
-        return this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);
+        // Clean up any existing listener for this exit
+        if (this.sources.has(exitId)) {
+            this.sources.get(exitId)();
+        }
+        let pendingDrag = null;
+        const DRAG_THRESHOLD = 5;
+        const onMouseDown = (e) => {
+            if (e.button !== 0)
+                return;
+            // Don't start drag from exit if it already has a connection —
+            // existing connections are picked up from the arrowhead instead
+            if (this.connections.has(exitId))
+                return;
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const nodeEl = element.closest('temba-flow-node');
+            const scope = (nodeEl === null || nodeEl === void 0 ? void 0 : nodeEl.getAttribute('uuid')) || '';
+            const originalTargetId = null;
+            const onMove = (me) => {
+                const dx = me.clientX - startX;
+                const dy = me.clientY - startY;
+                if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+                    // Exceeded threshold — start actual drag
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onUp);
+                    pendingDrag = null;
+                    this.startDrag(exitId, scope, originalTargetId, me);
+                }
+            };
+            const onUp = () => {
+                // Mouse released without dragging — let click handler fire
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+                pendingDrag = null;
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+            pendingDrag = { startX, startY, onMove, onUp };
+        };
+        element.addEventListener('mousedown', onMouseDown);
+        this.sources.set(exitId, () => {
+            element.removeEventListener('mousedown', onMouseDown);
+            if (pendingDrag) {
+                document.removeEventListener('mousemove', pendingDrag.onMove);
+                document.removeEventListener('mouseup', pendingDrag.onUp);
+                pendingDrag = null;
+            }
+        });
     }
-    makeSource(uuid) {
-        const element = document.getElementById(uuid);
-        if (!element)
-            return;
-        return this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);
+    makeTarget(_nodeId) {
+        // No-op: target detection happens via DOM hover during drag
+    }
+    // --- Connection creation ---
+    connectIds(scope, fromId, toId) {
+        this.pendingConnections.push({ scope, fromId, toId });
+        this.processPendingConnections();
     }
-    // we'll process our pending connections, but we want to debounce this
     processPendingConnections() {
-        // if we have a pending connection wait, clear it
         if (this.connectionWait) {
-            clearTimeout(this.connectionWait);
+            cancelAnimationFrame(this.connectionWait);
             this.connectionWait = null;
         }
-        // debounce the connection processing
-        this.connectionWait = setTimeout(() => {
-            this.jsPlumb.batch(() => {
-                this.pendingConnections.forEach((connection) => {
-                    var _a;
-                    const { scope, fromId, toId } = connection;
-                    // sources and targets must exist
-                    const source = document.getElementById(fromId);
-                    // const target = document.getElementById(toId);
-                    this.revalidate([fromId, toId]);
-                    // we need to find the source endpoint
-                    const sourceEndpoint = (_a = this.jsPlumb
-                        .getEndpoints(source)) === null || _a === void 0 ? void 0 : _a.find((endpoint) => endpoint.elementId === fromId ? true : false);
-                    // update endpoint have connect css class
-                    if (sourceEndpoint) {
-                        sourceEndpoint.addClass('connected');
-                    }
-                    // each connection needs its own target endpoint
-                    const targetEndpoint = this.makeTarget(toId);
-                    if (!source || !targetEndpoint) {
-                        console.warn(`Plumber: Cannot connect ${fromId} to ${toId}. Element(s) missing.`);
-                        return;
+        this.connectionWait = requestAnimationFrame(() => {
+            const failed = [];
+            const createdTargets = new Set();
+            this.pendingConnections.forEach((conn) => {
+                const { scope, fromId, toId } = conn;
+                // Remove existing connection from this exit if any
+                this.removeConnectionSVG(fromId);
+                if (!this.createConnectionSVG(fromId, scope, toId)) {
+                    failed.push(conn);
+                }
+                else {
+                    createdTargets.add(toId);
+                }
+            });
+            this.pendingConnections = [];
+            // Repaint all connections that share a target with newly created ones
+            // so anchor distribution is correct after the full batch is processed
+            if (createdTargets.size > 0) {
+                this.connections.forEach((conn, exitId) => {
+                    if (createdTargets.has(conn.toId)) {
+                        this.updateConnectionSVG(exitId);
                     }
-                    // delete connections
-                    this.jsPlumb.select({ source, targetEndpoint }).deleteAll();
-                    this.jsPlumb.connect({
-                        source: source,
-                        target: targetEndpoint,
-                        connector: {
-                            ...CONNECTOR_DEFAULTS,
-                            options: { ...CONNECTOR_DEFAULTS.options, gap: [0, 5] }
-                        },
-                        data: {
-                            nodeId: scope
-                        }
-                    });
                 });
-                this.pendingConnections = [];
+            }
+            // Retry failed connections (elements may not be laid out yet)
+            if (failed.length > 0 && this.retryCount < this.maxRetries) {
+                this.retryCount++;
+                this.pendingConnections = failed;
+                this.processPendingConnections();
+            }
+            else {
+                this.retryCount = 0;
+            }
+        });
+    }
+    // --- Anchor point distribution ---
+    determineTargetFace(sourceX, sourceY, targetRect, canvasRect) {
+        const targetCenterX = targetRect.left + targetRect.width / 2 - canvasRect.left;
+        const targetTop = targetRect.top - canvasRect.top;
+        const verticalGap = targetTop - sourceY;
+        // Top face requires enough vertical room for the exit stub, entry stub,
+        // arrow, and curved corners. Below this threshold the path components
+        // overlap and the connection backtracks, so use a side face instead.
+        if (verticalGap > 30) {
+            return 'top';
+        }
+        // Source is level with, below, or too close to target — connect to a side face
+        if (sourceX < targetCenterX) {
+            return 'left';
+        }
+        return 'right';
+    }
+    getConnectionEndpoints(fromId, toId) {
+        const fromEl = document.getElementById(fromId);
+        const toEl = document.getElementById(toId);
+        if (!fromEl || !toEl)
+            return null;
+        const canvasRect = this.canvas.getBoundingClientRect();
+        const fromRect = fromEl.getBoundingClientRect();
+        const toRect = toEl.getBoundingClientRect();
+        if (fromRect.width === 0 || toRect.width === 0)
+            return null;
+        const sourceX = fromRect.left + fromRect.width / 2 - canvasRect.left;
+        const sourceY = fromRect.bottom - canvasRect.top;
+        const targetFace = this.determineTargetFace(sourceX, sourceY, toRect, canvasRect);
+        // Find all connections targeting the same node, grouped by face
+        // Track source position for spatial sorting
+        const faceConnections = new Map();
+        this.connections.forEach((conn) => {
+            if (conn.toId === toId) {
+                const connFromEl = document.getElementById(conn.fromId);
+                if (connFromEl) {
+                    const connFromRect = connFromEl.getBoundingClientRect();
+                    const connSourceX = connFromRect.left + connFromRect.width / 2 - canvasRect.left;
+                    const connSourceY = connFromRect.bottom - canvasRect.top;
+                    const face = this.determineTargetFace(connSourceX, connSourceY, toRect, canvasRect);
+                    if (!faceConnections.has(face)) {
+                        faceConnections.set(face, []);
+                    }
+                    // Sort position: X for top face, Y for side faces
+                    const sortPos = face === 'top' ? connSourceX : connSourceY;
+                    faceConnections.get(face).push({ fromId: conn.fromId, sortPos });
+                }
+            }
+        });
+        // Add current connection to its face group if not already tracked
+        if (!faceConnections.has(targetFace)) {
+            faceConnections.set(targetFace, []);
+        }
+        const faceGroup = faceConnections.get(targetFace);
+        if (!faceGroup.find((e) => e.fromId === fromId)) {
+            const sortPos = targetFace === 'top' ? sourceX : sourceY;
+            faceGroup.push({ fromId, sortPos });
+        }
+        // Sort by spatial position so connections don't cross
+        faceGroup.sort((a, b) => a.sortPos - b.sortPos);
+        const index = faceGroup.findIndex((e) => e.fromId === fromId);
+        const count = faceGroup.length;
+        // Calculate anchor point on the chosen face
+        const targetLeft = toRect.left - canvasRect.left;
+        const targetTop = toRect.top - canvasRect.top;
+        const targetW = toRect.width;
+        const targetH = toRect.height;
+        let targetX;
+        let targetY;
+        if (targetFace === 'top') {
+            // Distribute across top face (middle 60% of width)
+            const margin = targetW * 0.2;
+            const span = targetW * 0.6;
+            targetX =
+                count === 1
+                    ? targetLeft + targetW / 2
+                    : targetLeft + margin + (span * (index + 0.5)) / count;
+            targetY = targetTop;
+        }
+        else if (targetFace === 'left') {
+            targetX = targetLeft;
+            // Distribute along left face (middle 60% of height)
+            const margin = targetH * 0.2;
+            const span = targetH * 0.6;
+            targetY =
+                count === 1
+                    ? targetTop + targetH / 2
+                    : targetTop + margin + (span * (index + 0.5)) / count;
+        }
+        else {
+            // right
+            targetX = targetLeft + targetW;
+            const margin = targetH * 0.2;
+            const span = targetH * 0.6;
+            targetY =
+                count === 1
+                    ? targetTop + targetH / 2
+                    : targetTop + margin + (span * (index + 0.5)) / count;
+        }
+        return { sourceX, sourceY, targetX, targetY, targetFace };
+    }
+    // --- SVG creation and management ---
+    createSVGElement() {
+        const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgEl.classList.add('plumb-connector');
+        svgEl.style.position = 'absolute';
+        svgEl.style.left = '0';
+        svgEl.style.top = '0';
+        svgEl.style.width = '100%';
+        svgEl.style.height = '100%';
+        svgEl.style.pointerEvents = 'none';
+        svgEl.style.overflow = 'visible';
+        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        pathEl.setAttribute('fill', 'none');
+        pathEl.setAttribute('stroke', 'var(--color-connectors)');
+        pathEl.setAttribute('stroke-width', '3');
+        pathEl.style.pointerEvents = 'stroke';
+        const arrowEl = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        arrowEl.setAttribute('fill', 'var(--color-connectors)');
+        arrowEl.classList.add('plumb-arrow');
+        arrowEl.style.pointerEvents = 'fill';
+        arrowEl.style.cursor = 'pointer';
+        svgEl.appendChild(pathEl);
+        svgEl.appendChild(arrowEl);
+        // Hover support
+        const addHover = () => svgEl.classList.add('hover');
+        const removeHover = () => svgEl.classList.remove('hover');
+        pathEl.addEventListener('mouseenter', addHover);
+        pathEl.addEventListener('mouseleave', removeHover);
+        arrowEl.addEventListener('mouseenter', addHover);
+        arrowEl.addEventListener('mouseleave', removeHover);
+        return { svgEl, pathEl, arrowEl };
+    }
+    updateSVGPath(pathEl, arrowEl, sourceX, sourceY, targetX, targetY, targetFace = 'top') {
+        const aw = ARROW_HALF_WIDTH;
+        const al = ARROW_LENGTH;
+        const stubBehindArrow = 8;
+        // Path ends at arrow BASE (not tip) so the line never pokes through the front.
+        // The arrow polygon covers from base to the node edge (tip).
+        let pathTargetX = targetX;
+        let pathTargetY = targetY;
+        if (targetFace === 'top') {
+            pathTargetY = targetY - al;
+        }
+        else if (targetFace === 'left') {
+            pathTargetX = targetX - al;
+        }
+        else if (targetFace === 'right') {
+            pathTargetX = targetX + al;
+        }
+        const effectiveStub = stubBehindArrow;
+        const d = calculateFlowchartPath(sourceX, sourceY, pathTargetX, pathTargetY, EXIT_STUB, effectiveStub, 5, targetFace);
+        pathEl.setAttribute('d', d);
+        // Arrow tip at node edge, base extends outward
+        if (targetFace === 'top') {
+            arrowEl.setAttribute('points', `${targetX},${targetY} ${targetX - aw},${targetY - al} ${targetX + aw},${targetY - al}`);
+        }
+        else if (targetFace === 'left') {
+            arrowEl.setAttribute('points', `${targetX},${targetY} ${targetX - al},${targetY - aw} ${targetX - al},${targetY + aw}`);
+        }
+        else {
+            arrowEl.setAttribute('points', `${targetX},${targetY} ${targetX + al},${targetY - aw} ${targetX + al},${targetY + aw}`);
+        }
+    }
+    createConnectionSVG(exitId, scope, toId) {
+        const endpoints = this.getConnectionEndpoints(exitId, toId);
+        if (!endpoints)
+            return false;
+        const { svgEl, pathEl, arrowEl } = this.createSVGElement();
+        this.updateSVGPath(pathEl, arrowEl, endpoints.sourceX, endpoints.sourceY, endpoints.targetX, endpoints.targetY, endpoints.targetFace);
+        this.canvas.appendChild(svgEl);
+        this.connections.set(exitId, {
+            scope,
+            fromId: exitId,
+            toId,
+            svgEl,
+            pathEl,
+            arrowEl
+        });
+        // Make arrowhead draggable for picking up existing connections
+        const DRAG_THRESHOLD = 5;
+        const onArrowMouseDown = (e) => {
+            if (e.button !== 0)
+                return;
+            e.stopPropagation();
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const onMove = (me) => {
+                const dx = me.clientX - startX;
+                const dy = me.clientY - startY;
+                if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onUp);
+                    this.startDrag(exitId, scope, toId, me);
+                }
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        };
+        arrowEl.addEventListener('mousedown', onArrowMouseDown);
+        // Mark the exit element as connected
+        const exitEl = document.getElementById(exitId);
+        if (exitEl) {
+            exitEl.classList.add('connected');
+        }
+        // Create activity overlay if activity data exists for this segment
+        if (this.activityData) {
+            const activityKey = `${exitId}:${toId}`;
+            const count = this.activityData.segments[activityKey];
+            if (count && count > 0) {
+                const overlayEl = this.createOverlayElement(count, activityKey);
+                this.canvas.appendChild(overlayEl);
+                this.overlays.set(exitId, overlayEl);
+                this.updateOverlayPosition(exitId);
+            }
+        }
+        return true;
+    }
+    updateConnectionSVG(exitId) {
+        const conn = this.connections.get(exitId);
+        if (!conn)
+            return;
+        const endpoints = this.getConnectionEndpoints(conn.fromId, conn.toId);
+        if (!endpoints)
+            return;
+        this.updateSVGPath(conn.pathEl, conn.arrowEl, endpoints.sourceX, endpoints.sourceY, endpoints.targetX, endpoints.targetY, endpoints.targetFace);
+        this.updateOverlayPosition(exitId);
+    }
+    removeConnectionSVG(exitId) {
+        const conn = this.connections.get(exitId);
+        if (!conn)
+            return;
+        const overlay = this.overlays.get(exitId);
+        if (overlay) {
+            overlay.remove();
+            this.overlays.delete(exitId);
+        }
+        conn.svgEl.remove();
+        this.connections.delete(exitId);
+    }
+    // --- Repaint ---
+    repaintEverything() {
+        this.connections.forEach((_conn, exitId) => {
+            this.updateConnectionSVG(exitId);
+        });
+    }
+    revalidate(ids) {
+        // Find all connections directly involving the given IDs
+        const directExits = [];
+        const affectedTargets = new Set();
+        this.connections.forEach((conn, exitId) => {
+            if (ids.includes(conn.fromId) ||
+                ids.includes(conn.toId) ||
+                ids.includes(conn.scope)) {
+                directExits.push(exitId);
+                affectedTargets.add(conn.toId);
+            }
+        });
+        // Also repaint sibling connections that share a target
+        // (so anchor distribution stays correct during drag)
+        const allExitsToRepaint = new Set(directExits);
+        this.connections.forEach((conn, exitId) => {
+            if (affectedTargets.has(conn.toId)) {
+                allExitsToRepaint.add(exitId);
+            }
+        });
+        allExitsToRepaint.forEach((exitId) => {
+            this.updateConnectionSVG(exitId);
+        });
+    }
+    // --- Connection removal ---
+    forgetNode(nodeId) {
+        var _a;
+        // Remove all connections where this node is source or target
+        const toRemove = [];
+        this.connections.forEach((conn, exitId) => {
+            if (conn.scope === nodeId || conn.toId === nodeId) {
+                toRemove.push(exitId);
+            }
+        });
+        toRemove.forEach((exitId) => this.removeConnectionSVG(exitId));
+        // Remove source listeners for exits of this node
+        const exitEls = (_a = document.getElementById(nodeId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.exit');
+        if (exitEls) {
+            exitEls.forEach((el) => {
+                const id = el.id;
+                if (this.sources.has(id)) {
+                    this.sources.get(id)();
+                    this.sources.delete(id);
+                }
             });
-            // Force a repaint to ensure connections are positioned correctly
-            // especially after bulk updates or view switching
-            window.requestAnimationFrame(() => {
-                if (this.jsPlumb) {
-                    this.jsPlumb.repaintEverything();
+        }
+    }
+    removeNodeConnections(nodeId, exitIds) {
+        var _a;
+        // Only remove outbound connections from this node's exits.
+        // Inbound connections are managed by their source nodes and
+        // will repaint correctly on the next revalidate.
+        const exits = exitIds ||
+            Array.from(((_a = document.getElementById(nodeId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.exit')) || []).map((el) => el.id);
+        exits.forEach((exitId) => this.removeConnectionSVG(exitId));
+    }
+    removeExitConnection(exitId) {
+        if (!this.connections.has(exitId))
+            return false;
+        this.removeConnectionSVG(exitId);
+        return true;
+    }
+    removeAllEndpoints(nodeId) {
+        var _a;
+        // Remove source listeners for this node's exits
+        const exitEls = (_a = document.getElementById(nodeId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.exit');
+        if (exitEls) {
+            exitEls.forEach((el) => {
+                const id = el.id;
+                if (this.sources.has(id)) {
+                    this.sources.get(id)();
+                    this.sources.delete(id);
                 }
             });
-        }, 0);
+        }
     }
-    connectIds(scope, fromId, toId) {
-        this.pendingConnections.push({ scope, fromId, toId });
-        this.processPendingConnections();
+    // --- Connection state ---
+    setConnectionRemovingState(exitId, isRemoving) {
+        const conn = this.connections.get(exitId);
+        if (!conn)
+            return false;
+        if (isRemoving) {
+            conn.svgEl.classList.add('removing');
+        }
+        else {
+            conn.svgEl.classList.remove('removing');
+        }
+        return true;
     }
+    // --- Activity overlays ---
     setActivityData(activityData) {
         this.activityData = activityData;
-        // Clear recent contacts cache when activity data changes
         this.clearRecentContactsCache();
         this.updateActivityOverlays();
     }
     updateActivityOverlays() {
-        if (!this.jsPlumb || !this.activityData) {
+        if (!this.activityData) {
+            this.overlays.forEach((el) => el.remove());
+            this.overlays.clear();
             return;
         }
-        // Get all connections
-        const connections = this.jsPlumb.getConnections();
-        connections.forEach((connection) => {
-            // Get the source exit element
-            const sourceElement = connection.source;
-            if (!sourceElement) {
-                return;
-            }
-            // Get destination node
-            const targetElement = connection.target;
-            if (!targetElement) {
-                return;
-            }
-            // Create activity key: exitUuid:destinationUuid
-            const exitUuid = sourceElement.id;
-            const destinationUuid = targetElement.id;
-            const activityKey = `${exitUuid}:${destinationUuid}`;
-            // Get activity count for this segment
+        const activeExitIds = new Set();
+        this.connections.forEach((conn, exitId) => {
+            const activityKey = `${conn.fromId}:${conn.toId}`;
             const count = this.activityData.segments[activityKey];
-            // Remove existing activity overlays
-            connection.removeOverlay('activity-label');
-            // Add new overlay if there's activity
             if (count && count > 0) {
-                const overlay = connection.addOverlay({
-                    type: 'Label',
-                    options: {
-                        label: count.toLocaleString(),
-                        id: 'activity-label',
-                        cssClass: 'activity-overlay',
-                        location: 20 // Fixed pixel distance from the start (exit point)
-                    }
-                });
-                // Add hover events for recent contacts popup
-                // Use setTimeout to ensure the overlay is fully rendered
-                setTimeout(() => {
-                    var _a, _b;
-                    // Try multiple ways to get the overlay element
-                    let overlayElement = overlay.canvas || overlay.element || ((_a = overlay.getElement) === null || _a === void 0 ? void 0 : _a.call(overlay));
-                    // If still not found, query the DOM directly
-                    if (!overlayElement) {
-                        const overlays = connection.getOverlays();
-                        if (Array.isArray(overlays)) {
-                            for (const ovl of overlays) {
-                                if (ovl.id === 'activity-label') {
-                                    overlayElement =
-                                        ovl.canvas || ovl.element || ((_b = ovl.getElement) === null || _b === void 0 ? void 0 : _b.call(ovl));
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    // Also try querying by CSS class
-                    if (!overlayElement && connection.canvas) {
-                        overlayElement =
-                            connection.canvas.querySelector('.activity-overlay');
-                    }
-                    if (overlayElement) {
-                        overlayElement.style.cursor = 'pointer';
-                        overlayElement.setAttribute('data-activity-key', activityKey);
-                        overlayElement.addEventListener('mouseenter', () => {
-                            var _a;
-                            // Don't show recent contacts when simulator is active
-                            const store = getStore();
-                            if (store === null || store === void 0 ? void 0 : store.getState().simulatorActive) {
-                                return;
-                            }
-                            // Get flow UUID from the editor element
-                            const editor = document.querySelector('temba-flow-editor');
-                            const flowUuid = (_a = editor === null || editor === void 0 ? void 0 : editor.definition) === null || _a === void 0 ? void 0 : _a.uuid;
-                            if (flowUuid) {
-                                // Start fetching immediately
-                                this.fetchRecentContacts(activityKey, flowUuid);
-                                // But delay showing the popup by half a second
-                                this.showContactsTimeout = window.setTimeout(() => {
-                                    this.showRecentContacts(activityKey, flowUuid);
-                                }, 500);
-                            }
-                        });
-                        overlayElement.addEventListener('mouseleave', () => {
-                            // Cancel the show timeout if still pending
-                            if (this.showContactsTimeout) {
-                                clearTimeout(this.showContactsTimeout);
-                                this.showContactsTimeout = null;
-                            }
-                            this.hoveredActivityKey = null;
-                            this.hideRecentContacts();
-                        });
-                    }
-                }, 50);
+                activeExitIds.add(exitId);
+                let overlayEl = this.overlays.get(exitId);
+                if (!overlayEl) {
+                    overlayEl = this.createOverlayElement(count, activityKey);
+                    this.canvas.appendChild(overlayEl);
+                    this.overlays.set(exitId, overlayEl);
+                }
+                else {
+                    overlayEl.textContent = count.toLocaleString();
+                    overlayEl.setAttribute('data-activity-key', activityKey);
+                }
+                this.updateOverlayPosition(exitId);
+            }
+        });
+        // Remove overlays for connections that no longer have activity
+        this.overlays.forEach((el, exitId) => {
+            if (!activeExitIds.has(exitId)) {
+                el.remove();
+                this.overlays.delete(exitId);
             }
         });
-        // Force repaint to ensure overlays are positioned correctly
-        this.repaintEverything();
     }
-    findOverlayElement(activityKey) {
-        // Find overlay by data attribute
-        const overlays = document.querySelectorAll('.activity-overlay');
-        for (const overlay of overlays) {
-            if (overlay.getAttribute('data-activity-key') === activityKey) {
-                return overlay;
+    createOverlayElement(count, activityKey) {
+        const el = document.createElement('div');
+        el.className = 'activity-overlay';
+        el.textContent = count.toLocaleString();
+        el.setAttribute('data-activity-key', activityKey);
+        el.addEventListener('mouseenter', () => {
+            const flowUuid = this.getFlowUuid();
+            if (flowUuid) {
+                this.fetchRecentContacts(activityKey, flowUuid);
+                this.showContactsTimeout = window.setTimeout(() => {
+                    this.showRecentContacts(activityKey, flowUuid);
+                }, 500);
             }
-        }
-        return null;
+        });
+        el.addEventListener('mouseleave', () => {
+            if (this.showContactsTimeout) {
+                clearTimeout(this.showContactsTimeout);
+                this.showContactsTimeout = null;
+            }
+            this.hoveredActivityKey = null;
+            this.hideRecentContacts();
+        });
+        return el;
+    }
+    updateOverlayPosition(exitId) {
+        const overlayEl = this.overlays.get(exitId);
+        const conn = this.connections.get(exitId);
+        if (!overlayEl || !conn)
+            return;
+        const endpoints = this.getConnectionEndpoints(conn.fromId, conn.toId);
+        if (!endpoints)
+            return;
+        overlayEl.style.position = 'absolute';
+        overlayEl.style.left = `${endpoints.sourceX}px`;
+        overlayEl.style.top = `${endpoints.sourceY + EXIT_STUB / 2}px`;
+        overlayEl.style.transform = 'translate(-50%, -50%)';
     }
+    getFlowUuid() {
+        var _a, _b;
+        return ((_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.definition) === null || _b === void 0 ? void 0 : _b.uuid) || null;
+    }
+    // --- Recent contacts ---
     async fetchRecentContacts(activityKey, flowUuid) {
-        // Skip if already cached or currently fetching
         if (this.recentContactsCache[activityKey] ||
             this.pendingFetches[activityKey]) {
             return;
         }
-        // Cancel any pending fetch for this key
-        if (this.pendingFetches[activityKey]) {
-            this.pendingFetches[activityKey].abort();
-        }
-        // Fetch recent contacts from endpoint
         const controller = new AbortController();
         this.pendingFetches[activityKey] = controller;
         try {
-            // Parse exit UUID and destination UUID from activity key
             const [exitUuid, destinationUuid] = activityKey.split(':');
             const endpoint = `/flow/recent_contacts/${flowUuid}/${exitUuid}/${destinationUuid}/`;
-            const response = await fetch(endpoint, {
-                signal: controller.signal
-            });
+            const response = await fetch(endpoint, { signal: controller.signal });
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const data = await response.json();
-            // API returns array directly, not wrapped in results
-            const recentContacts = Array.isArray(data) ? data : data.results || [];
-            // Cache the results
-            this.recentContactsCache[activityKey] = recentContacts;
+            this.recentContactsCache[activityKey] = Array.isArray(data)
+                ? data
+                : data.results || [];
         }
         catch (error) {
             if (error.name !== 'AbortError') {
@@ -355,40 +700,21 @@ export class Plumber {
         }
     }
     async showRecentContacts(activityKey, flowUuid) {
-        // Don't show recent contacts when simulator is active
-        const store = getStore();
-        if (store === null || store === void 0 ? void 0 : store.getState().simulatorActive) {
-            return;
-        }
-        // Find the overlay element fresh to avoid stale references
-        const overlayElement = this.findOverlayElement(activityKey);
-        if (!overlayElement) {
-            console.warn('Could not find overlay element for activity:', activityKey);
+        const overlayElement = this.findOverlayForActivityKey(activityKey);
+        if (!overlayElement)
             return;
-        }
-        // Clear any pending hide timeout
         if (this.hideContactsTimeout) {
             clearTimeout(this.hideContactsTimeout);
             this.hideContactsTimeout = null;
         }
         this.hoveredActivityKey = activityKey;
-        // Create popup if it doesn't exist
         if (!this.recentContactsPopup) {
             this.recentContactsPopup = document.createElement('div');
             this.recentContactsPopup.className = 'recent-contacts-popup';
-            // Add inline styles to ensure visibility
             this.recentContactsPopup.style.position = 'absolute';
-            this.recentContactsPopup.style.width = '200px';
-            this.recentContactsPopup.style.background = '#f3f3f3';
-            this.recentContactsPopup.style.borderRadius = '10px';
-            this.recentContactsPopup.style.boxShadow =
-                '0 1px 3px 1px rgba(130, 130, 130, 0.2)';
             this.recentContactsPopup.style.zIndex = '1015';
             this.recentContactsPopup.style.display = 'none';
             document.body.appendChild(this.recentContactsPopup);
-        }
-        // Add hover events to keep popup open (only needs to be done once)
-        if (!this.recentContactsPopup.onmouseenter) {
             this.recentContactsPopup.onmouseenter = () => {
                 if (this.hideContactsTimeout) {
                     clearTimeout(this.hideContactsTimeout);
@@ -399,14 +725,12 @@ export class Plumber {
                 this.hoveredActivityKey = null;
                 this.hideRecentContacts();
             };
-            // Add click event listener for contact names
             this.recentContactsPopup.onclick = (e) => {
                 const target = e.target;
                 if (target.classList.contains('contact-name')) {
                     this.hideRecentContacts(false);
                     const contactUuid = target.getAttribute('data-uuid');
                     if (contactUuid) {
-                        // Fire custom event through editor
                         this.editor.fireCustomEvent('temba-contact-clicked', {
                             uuid: contactUuid
                         });
@@ -414,62 +738,58 @@ export class Plumber {
                 }
             };
         }
-        // Check cache first
         if (this.recentContactsCache[activityKey]) {
             this.renderRecentContactsPopup(this.recentContactsCache[activityKey]);
             this.positionPopup(overlayElement);
         }
         else {
-            // Show loading state if data isn't ready yet
             this.recentContactsPopup.innerHTML =
                 '<div class="no-contacts-message">Loading...</div>';
             this.positionPopup(overlayElement);
-            // Wait for the fetch to complete
             await this.fetchRecentContacts(activityKey, flowUuid);
-            // Render if still hovering over this activity
             if (this.hoveredActivityKey === activityKey) {
-                const contacts = this.recentContactsCache[activityKey] || [];
-                this.renderRecentContactsPopup(contacts);
+                this.renderRecentContactsPopup(this.recentContactsCache[activityKey] || []);
                 this.positionPopup(overlayElement);
             }
         }
     }
+    findOverlayForActivityKey(activityKey) {
+        for (const [, el] of this.overlays) {
+            if (el.getAttribute('data-activity-key') === activityKey) {
+                return el;
+            }
+        }
+        return null;
+    }
     positionPopup(overlayElement) {
         if (!this.recentContactsPopup)
             return;
-        // Position popup near the overlay
         const rect = overlayElement.getBoundingClientRect();
         this.recentContactsPopup.style.left = `${rect.left + window.scrollX}px`;
         this.recentContactsPopup.style.top = `${rect.bottom + window.scrollY + 5}px`;
-        // Remove inline display style so CSS class can work
         this.recentContactsPopup.style.display = '';
-        // Trigger animation by adding class
         this.recentContactsPopup.classList.remove('show');
-        // Force reflow to restart animation
         void this.recentContactsPopup.offsetWidth;
         this.recentContactsPopup.classList.add('show');
     }
     renderRecentContactsPopup(recentContacts) {
         if (!this.recentContactsPopup)
             return;
-        const hasContacts = recentContacts.length > 0;
-        if (!hasContacts) {
-            // Simple message when no contacts
+        if (recentContacts.length === 0) {
             this.recentContactsPopup.innerHTML =
                 '<div class="no-contacts-message">No Recent Contacts</div>';
             return;
         }
-        let html = `<div class="popup-title">Recent Contacts</div>`;
+        let html = '<div class="popup-title">Recent Contacts</div>';
         recentContacts.forEach((contact) => {
-            html += `<div class="contact-row">`;
+            html += '<div class="contact-row">';
             html += `<div class="contact-name" data-uuid="${contact.contact.uuid}">${contact.contact.name}</div>`;
             if (contact.operand) {
                 html += `<div class="contact-operand">${contact.operand}</div>`;
             }
             if (contact.time) {
                 const time = new Date(contact.time);
-                const now = new Date();
-                const diffMs = now.getTime() - time.getTime();
+                const diffMs = Date.now() - time.getTime();
                 const diffMins = Math.floor(diffMs / 60000);
                 const diffHours = Math.floor(diffMs / 3600000);
                 const diffDays = Math.floor(diffMs / 86400000);
@@ -484,7 +804,7 @@ export class Plumber {
                     timeStr = `${diffDays}d ago`;
                 html += `<div class="contact-time">${timeStr}</div>`;
             }
-            html += `</div>`;
+            html += '</div>';
         });
         this.recentContactsPopup.innerHTML = html;
     }
@@ -498,118 +818,152 @@ export class Plumber {
             return;
         }
         this.hideContactsTimeout = window.setTimeout(() => {
-            // Check if we're still hovering over an activity
             if (!this.hoveredActivityKey && this.recentContactsPopup) {
                 this.recentContactsPopup.classList.remove('show');
                 this.recentContactsPopup.style.display = 'none';
                 this.hoveredActivityKey = null;
             }
-        }, 200); // Small delay to allow moving between overlay and popup
+        }, 200);
     }
     clearRecentContactsCache() {
         this.recentContactsCache = {};
-        // Cancel any pending fetches
         Object.values(this.pendingFetches).forEach((controller) => controller.abort());
         this.pendingFetches = {};
     }
-    repaintEverything() {
-        if (this.jsPlumb) {
-            this.jsPlumb.repaintEverything();
-        }
-    }
-    revalidate(ids) {
-        if (!this.jsPlumb)
+    // --- Drag-and-drop ---
+    startDrag(exitId, scope, originalTargetId, e) {
+        // Remove existing connection SVG for this exit (the connection is being dragged away)
+        this.removeConnectionSVG(exitId);
+        const { svgEl, pathEl, arrowEl } = this.createSVGElement();
+        svgEl.classList.add('dragging');
+        // Ensure the drag SVG never intercepts mouse events (e.g. hover detection on nodes)
+        pathEl.style.pointerEvents = 'none';
+        arrowEl.style.pointerEvents = 'none';
+        this.canvas.appendChild(svgEl);
+        // Calculate source point
+        const exitEl = document.getElementById(exitId);
+        if (!exitEl) {
+            svgEl.remove();
             return;
-        this.jsPlumb.batch(() => {
-            ids.forEach((id) => {
-                const element = document.getElementById(id);
-                if (element) {
-                    this.jsPlumb.revalidate(element);
-                }
+        }
+        const canvasRect = this.canvas.getBoundingClientRect();
+        const exitRect = exitEl.getBoundingClientRect();
+        const sourceX = exitRect.left + exitRect.width / 2 - canvasRect.left;
+        const sourceY = exitRect.bottom - canvasRect.top;
+        const aw = ARROW_HALF_WIDTH;
+        const al = ARROW_LENGTH;
+        const stubBehindArrow = 8;
+        // Update the drag path and arrow based on cursor position.
+        // Arrow trails just before the cursor (between source and cursor).
+        const cursorGap = CURSOR_GAP;
+        const updateDragPath = (cx, cy) => {
+            const goingUp = cy < sourceY;
+            let routeFace = 'top';
+            if (goingUp) {
+                routeFace = cx < sourceX ? 'left' : 'right';
+            }
+            // Position the arrow so its top edge sits just before the cursor.
+            // "Top" = smallest Y on screen, which is the base for a downward
+            // arrow and the tip for an upward arrow.
+            let arrowBaseY;
+            if (goingUp) {
+                // Arrow points up: tip just below cursor, base below that
+                arrowBaseY = cy + cursorGap + al;
+            }
+            else {
+                // Arrow points down: base just above cursor, tip below
+                arrowBaseY = cy - cursorGap;
+            }
+            const d = calculateFlowchartPath(sourceX, sourceY, cx, arrowBaseY, EXIT_STUB, goingUp ? 0 : stubBehindArrow, 5, routeFace);
+            pathEl.setAttribute('d', d);
+            if (goingUp) {
+                const tipY = cy + cursorGap;
+                arrowEl.setAttribute('points', `${cx},${tipY} ${cx - aw},${arrowBaseY} ${cx + aw},${arrowBaseY}`);
+            }
+            else {
+                const tipY = arrowBaseY + al;
+                arrowEl.setAttribute('points', `${cx},${tipY} ${cx - aw},${arrowBaseY} ${cx + aw},${arrowBaseY}`);
+            }
+        };
+        // Initial path to cursor
+        const cursorX = e.clientX - canvasRect.left;
+        const cursorY = e.clientY - canvasRect.top;
+        updateDragPath(cursorX, cursorY);
+        this.connectionDragging = true;
+        const onMove = (me) => {
+            const cx = me.clientX - canvasRect.left;
+            const cy = me.clientY - canvasRect.top;
+            updateDragPath(cx, cy);
+        };
+        const onUp = (_me) => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            // Remove the drag SVG
+            svgEl.remove();
+            this.connectionDragging = false;
+            this.dragState = null;
+            // Fire abort event so Editor can handle connection logic
+            this.notifyListeners('connection:abort', {
+                source: exitEl,
+                sourceId: exitId,
+                target: { id: originalTargetId },
+                data: { nodeId: scope }
             });
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        this.dragState = {
+            sourceId: exitId,
+            scope,
+            originalTargetId,
+            svgEl,
+            pathEl,
+            arrowEl,
+            onMove,
+            onUp
+        };
+        // Fire drag event so Editor knows a drag has started
+        this.notifyListeners('connection:drag', {
+            sourceId: exitId,
+            sourceX,
+            sourceY,
+            data: { nodeId: scope },
+            target: { id: originalTargetId }
         });
     }
+    // --- Reset ---
     reset() {
         if (this.connectionWait) {
-            clearTimeout(this.connectionWait);
+            cancelAnimationFrame(this.connectionWait);
             this.connectionWait = null;
         }
         this.pendingConnections = [];
-        this.jsPlumb.select().deleteAll();
-        this.jsPlumb._managedElements = {};
-    }
-    forgetNode(nodeId) {
-        if (!this.jsPlumb)
-            return;
-        const element = document.getElementById(nodeId);
-        if (!element)
-            return;
-        this.jsPlumb.deleteConnectionsForElement(element);
-        this.jsPlumb.removeAllEndpoints(element);
-        this.jsPlumb.unmanage(element);
-    }
-    removeNodeConnections(nodeId, exitIds) {
-        var _a;
-        if (!this.jsPlumb)
-            return;
-        const inbound = this.jsPlumb.select({ target: nodeId });
-        // Use provided exitIds or try to find them in DOM (fallback)
-        const exits = exitIds ||
-            Array.from(((_a = document.getElementById(nodeId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.exit')) || []).map((exit) => {
-                return exit.id;
-            }) ||
-            [];
-        inbound.deleteAll();
-        this.jsPlumb.select({ source: exits }).deleteAll();
-        this.jsPlumb.selectEndpoints({ source: exits }).deleteAll();
-    }
-    removeExitConnection(exitId) {
-        if (!this.jsPlumb)
-            return;
-        const exitElement = document.getElementById(exitId);
-        if (!exitElement)
-            return;
-        // Get all connections from this exit
-        const connections = this.jsPlumb.getConnections({ source: exitElement });
-        // Remove the connections
-        connections.forEach((connection) => {
-            this.jsPlumb.deleteConnection(connection);
-        });
-        return connections.length > 0;
-    }
-    removeAllEndpoints(nodeId) {
-        if (!this.jsPlumb)
-            return;
-        const element = document.getElementById(nodeId);
-        if (!element)
-            return;
-        this.jsPlumb.removeAllEndpoints(element, true);
-    }
-    /**
-     * Set the removing state for an exit's connection
-     * @param exitId The ID of the exit whose connections should be marked as removing
-     * @returns true if connections were found and updated, false otherwise
-     */
-    setConnectionRemovingState(exitId, isRemoving) {
-        if (!this.jsPlumb)
-            return false;
-        const exitElement = document.getElementById(exitId);
-        if (!exitElement)
-            return false;
-        // Get all connections from this exit
-        const connections = this.jsPlumb.getConnections({ source: exitElement });
-        if (connections.length === 0)
-            return false;
-        // Update the connections' CSS classes
-        connections.forEach((connection) => {
-            if (isRemoving) {
-                connection.addClass('removing');
-            }
-            else {
-                connection.removeClass('removing');
-            }
-        });
-        return true;
+        // Remove all connection SVGs
+        this.connections.forEach((conn) => conn.svgEl.remove());
+        this.connections.clear();
+        // Remove all activity overlays
+        this.overlays.forEach((el) => el.remove());
+        this.overlays.clear();
+        // Clean up recent contacts popup
+        this.hideRecentContacts(false);
+        if (this.recentContactsPopup) {
+            this.recentContactsPopup.remove();
+            this.recentContactsPopup = null;
+        }
+        this.recentContactsCache = {};
+        Object.values(this.pendingFetches).forEach((c) => c.abort());
+        this.pendingFetches = {};
+        // Remove all source listeners
+        this.sources.forEach((cleanup) => cleanup());
+        this.sources.clear();
+        // Clean up any active drag
+        if (this.dragState) {
+            document.removeEventListener('mousemove', this.dragState.onMove);
+            document.removeEventListener('mouseup', this.dragState.onUp);
+            this.dragState.svgEl.remove();
+            this.dragState = null;
+            this.connectionDragging = false;
+        }
     }
 }
 //# sourceMappingURL=Plumber.js.map