@node-edit-utils/core 2.3.2 → 2.3.4

package/dist/node-edit-utils.esm.js

@@ -1,25 +1,29 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.2
+ * @version 2.3.4
  */
-function getScreenBounds(element) {
-    const rect = element.getBoundingClientRect();
+const getNodeTools = () => {
+    return window.nodeTools;
+};
+
+const getViewportDimensions = () => {
     return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
+        width: document.documentElement.clientWidth || window.innerWidth,
+        height: document.documentElement.clientHeight || window.innerHeight,
     };
-}
+};
 
 const getCanvasContainer = () => {
     return document.querySelector(".canvas-container");
 };
 
-const getViewportLabelsOverlay = () => {
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+const getCanvasContainerOrBody = () => {
+    return getCanvasContainer() || document.body;
+};
+
+const getViewportLabelOverlay = () => {
+    const container = getCanvasContainerOrBody();
     // Check if overlay already exists
     let overlay = container.querySelector(".viewport-labels-overlay");
     if (!overlay) {
@@ -34,8 +38,7 @@ const getViewportLabelsOverlay = () => {
         overlay.style.height = "100vh";
         overlay.style.pointerEvents = "none";
         overlay.style.zIndex = "500";
-        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
         overlay.setAttribute("width", viewportWidth.toString());
         overlay.setAttribute("height", viewportHeight.toString());
         container.appendChild(overlay);
@@ -45,11 +48,112 @@ const getViewportLabelsOverlay = () => {
 
 // Global flag to prevent refreshViewportLabels during drag
 let globalIsDragging = false;
-const isViewportLabelDragging = () => globalIsDragging;
-const setViewportLabelDragging = (isDragging) => {
+const isViewportDragging = () => globalIsDragging;
+const setViewportDragging = (isDragging) => {
     globalIsDragging = isDragging;
 };
 
+function getScreenBounds(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+
+/**
+ * Creates a reusable drag handler for mouse drag operations
+ * @param element - Element that triggers the drag (mousedown listener attached here)
+ * @param callbacks - Callbacks for drag lifecycle events
+ * @param options - Configuration options
+ * @returns Cleanup function to remove all event listeners
+ */
+function createDragHandler(element, callbacks, options = {}) {
+    const { preventDefault = true, stopPropagation = true } = options;
+    const state = {
+        isDragging: false,
+        hasDragged: false,
+        startX: 0,
+        startY: 0,
+    };
+    const startDrag = (event) => {
+        if (preventDefault) {
+            event.preventDefault();
+        }
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        state.isDragging = true;
+        state.hasDragged = false;
+        state.startX = event.clientX;
+        state.startY = event.clientY;
+        callbacks.onStart?.(event, state);
+    };
+    const handleDrag = (event) => {
+        if (!state.isDragging)
+            return;
+        const deltaX = event.clientX - state.startX;
+        const deltaY = event.clientY - state.startY;
+        state.hasDragged = true;
+        callbacks.onDrag(event, {
+            ...state,
+            deltaX,
+            deltaY,
+        });
+    };
+    const stopDrag = (event) => {
+        if (!state.isDragging)
+            return;
+        if (preventDefault) {
+            event.preventDefault();
+        }
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        state.isDragging = false;
+        callbacks.onStop?.(event, state);
+    };
+    const cancelDrag = () => {
+        if (!state.isDragging)
+            return;
+        state.isDragging = false;
+        callbacks.onCancel?.(state);
+    };
+    const preventClick = (event) => {
+        if (preventDefault) {
+            event.preventDefault();
+        }
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        callbacks.onPreventClick?.(event, state);
+        // Reset hasDragged flag after handling the click
+        if (state.hasDragged) {
+            state.hasDragged = false;
+        }
+    };
+    // Attach event listeners
+    element.addEventListener("mousedown", startDrag);
+    if (callbacks.onPreventClick) {
+        element.addEventListener("click", preventClick);
+    }
+    document.addEventListener("mousemove", handleDrag);
+    document.addEventListener("mouseup", stopDrag);
+    window.addEventListener("blur", cancelDrag);
+    // Return cleanup function
+    return () => {
+        element.removeEventListener("mousedown", startDrag);
+        if (callbacks.onPreventClick) {
+            element.removeEventListener("click", preventClick);
+        }
+        document.removeEventListener("mousemove", handleDrag);
+        document.removeEventListener("mouseup", stopDrag);
+        window.removeEventListener("blur", cancelDrag);
+    };
+}
+
 function sendPostMessage(action, data) {
     window.parent.postMessage({
         source: "node-edit-utils",
@@ -59,22 +163,23 @@ function sendPostMessage(action, data) {
     }, "*");
 }
 
+const parseTransform3d = (transform) => {
+    const match = transform.match(/translate3d\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
+    return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
+};
+const parseTransform2d = (transform) => {
+    const match = transform?.match(/translate\((-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)\)/);
+    return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
+};
+
 const getLabelPosition = (labelGroup) => {
     const transform = labelGroup.getAttribute("transform");
-    const match = transform?.match(/translate\((-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)\)/);
-    if (match) {
-        return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
-    }
-    return { x: 0, y: 0 };
+    return parseTransform2d(transform);
 };
 
 const getTransformValues = (element) => {
     const style = element.style.transform;
-    const match = style.match(/translate3d\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
-    if (match) {
-        return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
-    }
-    return { x: 0, y: 0 };
+    return parseTransform3d(style);
 };
 
 const getZoomValue = () => {
@@ -82,119 +187,100 @@ const getZoomValue = () => {
     return zoomValue ? parseFloat(zoomValue) : 1;
 };
 
-const setupViewportLabelDrag = (labelElement, viewportElement, viewportName) => {
-    let isDragging = false;
-    let startX = 0;
-    let startY = 0;
-    let initialTransform = { x: 0, y: 0 };
-    let initialLabelPosition = { x: 0, y: 0 };
+/**
+ * Selects the first child node inside a viewport element.
+ * Skips the resize-handle element if present.
+ */
+const selectFirstViewportNode = (viewportElement) => {
+    const firstChild = Array.from(viewportElement.children).find((child) => !child.classList.contains("resize-handle"));
+    if (firstChild) {
+        const nodeTools = getNodeTools();
+        if (nodeTools?.selectNode) {
+            const wasAlreadySelected = nodeTools.getSelectedNode() === firstChild;
+            nodeTools.selectNode(firstChild);
+            // Always emit postMessage when selecting via viewport label click,
+            // even if the node was already selected (to match behavior of direct node clicks)
+            if (wasAlreadySelected) {
+                sendPostMessage("selectedNodeChanged", firstChild.getAttribute("data-node-id") ?? null);
+            }
+        }
+    }
+};
+
+const setupViewportDrag = (labelElement, viewportElement, viewportName) => {
     // Get the parent group element that contains the label
     const labelGroup = labelElement.parentElement;
-    const startDrag = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        isDragging = true;
-        setViewportLabelDragging(true);
-        startX = event.clientX;
-        startY = event.clientY;
-        initialTransform = getTransformValues(viewportElement);
-        initialLabelPosition = getLabelPosition(labelGroup);
-    };
-    const handleDrag = (event) => {
-        if (!isDragging)
-            return;
-        const zoom = getZoomValue();
-        // Calculate mouse delta
-        const rawDeltaX = event.clientX - startX;
-        const rawDeltaY = event.clientY - startY;
-        // Adjust delta for zoom level
-        const deltaX = rawDeltaX / zoom;
-        const deltaY = rawDeltaY / zoom;
-        const newX = initialTransform.x + deltaX;
-        const newY = initialTransform.y + deltaY;
-        // Update label position with raw delta (labels are in screen space)
-        const newLabelX = initialLabelPosition.x + rawDeltaX;
-        const newLabelY = initialLabelPosition.y + rawDeltaY;
-        labelGroup.setAttribute("transform", `translate(${newLabelX}, ${newLabelY})`);
-        // Update viewport position with zoom-adjusted delta
-        viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
-    };
-    const stopDrag = (event) => {
-        if (!isDragging)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        isDragging = false;
-        setViewportLabelDragging(false);
-        const finalTransform = getTransformValues(viewportElement);
-        // Trigger refresh after drag completes to update highlight frame and labels
-        // biome-ignore lint/suspicious/noExplicitAny: global window extension
-        const nodeTools = window.nodeTools;
-        if (nodeTools?.refreshHighlightFrame) {
-            nodeTools.refreshHighlightFrame();
-        }
-        // Notify parent about the new position
-        sendPostMessage("viewport-position-changed", {
-            viewportName,
-            x: finalTransform.x,
-            y: finalTransform.y,
-        });
-    };
-    const cancelDrag = () => {
-        isDragging = false;
-        setViewportLabelDragging(false);
-    };
-    // Attach event listeners
-    labelElement.addEventListener("mousedown", startDrag);
-    document.addEventListener("mousemove", handleDrag);
-    document.addEventListener("mouseup", stopDrag);
-    window.addEventListener("blur", cancelDrag);
-    // Return cleanup function
-    return () => {
-        labelElement.removeEventListener("mousedown", startDrag);
-        document.removeEventListener("mousemove", handleDrag);
-        document.removeEventListener("mouseup", stopDrag);
-        window.removeEventListener("blur", cancelDrag);
-    };
+    // Track initial positions for calculations
+    let initialTransform = { x: 0, y: 0 };
+    let initialLabelPosition = { x: 0, y: 0 };
+    return createDragHandler(labelElement, {
+        onStart: () => {
+            setViewportDragging(true);
+            initialTransform = getTransformValues(viewportElement);
+            initialLabelPosition = getLabelPosition(labelGroup);
+            selectFirstViewportNode(viewportElement);
+        },
+        onDrag: (_event, { deltaX, deltaY }) => {
+            const zoom = getZoomValue();
+            // Adjust delta for zoom level (viewport is in canvas space)
+            const deltaXZoomed = deltaX / zoom;
+            const deltaYZoomed = deltaY / zoom;
+            // Calculate new positions
+            const newX = initialTransform.x + deltaXZoomed;
+            const newY = initialTransform.y + deltaYZoomed;
+            // Update label position with raw delta (labels are in screen space)
+            const newLabelX = initialLabelPosition.x + deltaX;
+            const newLabelY = initialLabelPosition.y + deltaY;
+            labelGroup.setAttribute("transform", `translate(${newLabelX}, ${newLabelY})`);
+            // Update viewport position with zoom-adjusted delta
+            viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
+        },
+        onStop: (_event, { hasDragged }) => {
+            setViewportDragging(false);
+            const finalTransform = getTransformValues(viewportElement);
+            // If it was a drag, handle drag completion
+            if (hasDragged) {
+                // Trigger refresh after drag completes to update highlight frame and labels
+                const nodeTools = getNodeTools();
+                if (nodeTools?.refreshHighlightFrame) {
+                    nodeTools.refreshHighlightFrame();
+                }
+            }
+            // Always notify parent about the new position on drag stop
+            sendPostMessage("viewport-position-changed", {
+                viewportName,
+                x: finalTransform.x,
+                y: finalTransform.y,
+            });
+        },
+        onCancel: () => {
+            setViewportDragging(false);
+        },
+        onPreventClick: () => { },
+    });
 };
 
-// Store cleanup functions for drag listeners
-const dragCleanupFunctions = new Map();
-const refreshViewportLabels = () => {
-    // Skip refresh if a viewport label is being dragged
-    if (isViewportLabelDragging()) {
+/**
+ * Refreshes (updates) a viewport label for a single viewport element.
+ * Creates the label if it doesn't exist, or updates its position if it does.
+ * Similar to refreshHighlightFrame - updates existing elements rather than recreating.
+ *
+ * @param viewportElement - The viewport element to refresh the label for
+ */
+const refreshViewportLabel = (viewportElement) => {
+    const viewportName = viewportElement.getAttribute("data-viewport-name");
+    if (!viewportName) {
         return;
     }
-    const overlay = getViewportLabelsOverlay();
-    // Update SVG dimensions to match current viewport
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
-    overlay.setAttribute("width", viewportWidth.toString());
-    overlay.setAttribute("height", viewportHeight.toString());
-    // Find all viewports with names
-    const viewports = document.querySelectorAll(".viewport[data-viewport-name]");
-    // Clean up existing drag listeners
-    dragCleanupFunctions.forEach((cleanup) => {
-        cleanup();
-    });
-    dragCleanupFunctions.clear();
-    // Remove existing label groups
-    const existingGroups = overlay.querySelectorAll(".viewport-label-group");
-    existingGroups.forEach((group) => {
-        group.remove();
-    });
-    // Create/update labels for each viewport
-    viewports.forEach((viewport) => {
-        const viewportElement = viewport;
-        const viewportName = viewportElement.getAttribute("data-viewport-name");
-        if (!viewportName)
-            return;
-        const bounds = getScreenBounds(viewportElement);
+    const overlay = getViewportLabelOverlay();
+    const bounds = getScreenBounds(viewportElement);
+    // Get existing label group or create if it doesn't exist
+    let group = overlay.querySelector(`[data-viewport-name="${viewportName}"]`);
+    if (!group) {
         // Create group for this viewport label
-        const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        group = document.createElementNS("http://www.w3.org/2000/svg", "g");
         group.classList.add("viewport-label-group");
         group.setAttribute("data-viewport-name", viewportName);
-        group.setAttribute("transform", `translate(${bounds.left}, ${bounds.top})`);
         // Create text element
         const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
         text.classList.add("viewport-label-text");
@@ -205,14 +291,42 @@ const refreshViewportLabels = () => {
         text.textContent = viewportName;
         group.appendChild(text);
         overlay.appendChild(group);
-        // Setup drag functionality for this label
-        const cleanup = setupViewportLabelDrag(text, viewportElement, viewportName);
-        dragCleanupFunctions.set(viewportName, cleanup);
+        // Setup drag functionality only when creating new label
+        setupViewportDrag(text, viewportElement, viewportName);
+    }
+    // Update label position (this is the refresh part - updates existing label)
+    group.setAttribute("transform", `translate(${bounds.left}, ${bounds.top})`);
+};
+
+const refreshViewportLabels = () => {
+    // Skip refresh if a viewport label is being dragged
+    if (isViewportDragging()) {
+        return;
+    }
+    const overlay = getViewportLabelOverlay();
+    // Update SVG dimensions to match current viewport (handles window resize and ensures coordinate system is correct)
+    const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
+    overlay.setAttribute("width", viewportWidth.toString());
+    overlay.setAttribute("height", viewportHeight.toString());
+    // Find all viewports with names and refresh each label
+    const viewports = document.querySelectorAll(".viewport[data-viewport-name]");
+    viewports.forEach((viewport) => {
+        refreshViewportLabel(viewport);
+    });
+    // Remove labels for viewports that no longer exist
+    const existingGroups = overlay.querySelectorAll(".viewport-label-group");
+    existingGroups.forEach((group) => {
+        const viewportName = group.getAttribute("data-viewport-name");
+        if (viewportName) {
+            const viewportExists = Array.from(viewports).some((viewport) => viewport.getAttribute("data-viewport-name") === viewportName);
+            if (!viewportExists) {
+                group.remove();
+            }
+        }
     });
 };
 
 const getCanvasWindowValue = (path, canvasName = "canvas") => {
-    // biome-ignore lint/suspicious/noExplicitAny: global window extension
     const canvas = window[canvasName];
     return path.reduce((obj, prop) => obj?.[prop], canvas);
 };
@@ -235,8 +349,7 @@ function createCanvasObserver(canvasName = "canvas") {
     const observer = new MutationObserver(() => {
         applyCanvasState(canvasName);
         // Refresh highlight frame (throttled via withRAFThrottle)
-        // biome-ignore lint/suspicious/noExplicitAny: global window extension
-        const nodeTools = window.nodeTools;
+        const nodeTools = getNodeTools();
         if (nodeTools?.refreshHighlightFrame) {
             nodeTools.refreshHighlightFrame();
         }
@@ -275,7 +388,6 @@ const connectResizeObserver = (element, handler) => {
 
 const bindToWindow = (key, value) => {
     if (typeof window !== "undefined") {
-        // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
         window[key] = value;
     }
 };
@@ -301,8 +413,7 @@ const processPostMessage = (event, onNodeSelected) => {
 };
 
 const clearHighlightFrame = () => {
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     const frame = container.querySelector(".highlight-frame-overlay");
     if (frame) {
         frame.remove();
@@ -431,7 +542,7 @@ const handleNodeClick = (event, nodeProvider, text, onNodeSelected) => {
     onNodeSelected(selectedNode);
 };
 
-const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, text) => {
+const setupEventListener = (nodeProvider, onNodeSelected, onEscapePressed, text) => {
     const messageHandler = (event) => {
         processPostMessage(event, onNodeSelected);
     };
@@ -455,6 +566,17 @@ const setupEventListener$1 = (nodeProvider, onNodeSelected, onEscapePressed, tex
     };
 };
 
+const toggleClass = (element, className, condition) => {
+    if (!element)
+        return;
+    if (condition) {
+        element.classList.add(className);
+    }
+    else {
+        element.classList.remove(className);
+    }
+};
+
 const isComponentInstance = (element) => {
     return element.getAttribute("data-instance") === "true";
 };
@@ -520,8 +642,7 @@ const createHighlightFrame = (node, isInstance = false, isTextEdit = false) => {
     svg.style.height = "100vh";
     svg.style.pointerEvents = "none";
     svg.style.zIndex = "500";
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
     svg.setAttribute("width", viewportWidth.toString());
     svg.setAttribute("height", viewportHeight.toString());
     const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -544,13 +665,8 @@ const createHighlightFrame = (node, isInstance = false, isTextEdit = false) => {
     group.appendChild(rect);
     createCornerHandles(group, minWidth, height, isInstance, isTextEdit);
     svg.appendChild(group);
-    const canvasContainer = getCanvasContainer();
-    if (canvasContainer) {
-        canvasContainer.appendChild(svg);
-    }
-    else {
-        document.body.appendChild(svg);
-    }
+    const container = getCanvasContainerOrBody();
+    container.appendChild(svg);
     return svg;
 };
 
@@ -587,19 +703,14 @@ const createTagLabel = (node, nodeTools) => {
 const createToolsContainer = (node, highlightFrame, isInstance = false, isTextEdit = false) => {
     const nodeTools = document.createElement("div");
     nodeTools.className = "node-tools";
-    if (isInstance) {
-        nodeTools.classList.add("is-instance");
-    }
-    if (isTextEdit) {
-        nodeTools.classList.add("is-text-edit");
-    }
+    toggleClass(nodeTools, "is-instance", isInstance);
+    toggleClass(nodeTools, "is-text-edit", isTextEdit);
     highlightFrame.appendChild(nodeTools);
     createTagLabel(node, nodeTools);
 };
 
 function getHighlightFrameElement() {
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     return container.querySelector(".highlight-frame-overlay");
 }
 
@@ -607,8 +718,8 @@ const highlightNode = (node) => {
     if (!node)
         return;
     const existingHighlightFrame = getHighlightFrameElement();
-    const canvasContainer = getCanvasContainer();
-    const existingToolsWrapper = canvasContainer?.querySelector(".highlight-frame-tools-wrapper") || document.body.querySelector(".highlight-frame-tools-wrapper");
+    const container = getCanvasContainerOrBody();
+    const existingToolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     if (existingHighlightFrame) {
         existingHighlightFrame.remove();
     }
@@ -627,24 +738,15 @@ const highlightNode = (node) => {
     // Create tools wrapper using CSS transform (GPU-accelerated)
     const toolsWrapper = document.createElement("div");
     toolsWrapper.classList.add("highlight-frame-tools-wrapper");
-    if (isInstance) {
-        toolsWrapper.classList.add("is-instance");
-    }
-    if (isTextEdit) {
-        toolsWrapper.classList.add("is-text-edit");
-    }
+    toggleClass(toolsWrapper, "is-instance", isInstance);
+    toggleClass(toolsWrapper, "is-text-edit", isTextEdit);
     toolsWrapper.style.position = "absolute";
     toolsWrapper.style.transform = `translate(${left}px, ${bottomY}px)`;
     toolsWrapper.style.transformOrigin = "left center";
     toolsWrapper.style.pointerEvents = "none";
     toolsWrapper.style.zIndex = "500";
     createToolsContainer(node, toolsWrapper, isInstance, isTextEdit);
-    if (canvasContainer) {
-        canvasContainer.appendChild(toolsWrapper);
-    }
-    else {
-        document.body.appendChild(toolsWrapper);
-    }
+    container.appendChild(toolsWrapper);
 };
 
 const getComponentColor = () => {
@@ -662,24 +764,13 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     const isTextEdit = node.contentEditable === "true";
     // Update SVG dimensions to match current viewport (handles window resize and ensures coordinate system is correct)
     // Use clientWidth/Height to match getBoundingClientRect() coordinate system (excludes scrollbars)
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
     frame.setAttribute("width", viewportWidth.toString());
     frame.setAttribute("height", viewportHeight.toString());
     // Update instance class
-    if (isInstance) {
-        frame.classList.add("is-instance");
-    }
-    else {
-        frame.classList.remove("is-instance");
-    }
+    toggleClass(frame, "is-instance", isInstance);
     // Update text edit class
-    if (isTextEdit) {
-        frame.classList.add("is-text-edit");
-    }
-    else {
-        frame.classList.remove("is-text-edit");
-    }
+    toggleClass(frame, "is-text-edit", isTextEdit);
     const group = frame.querySelector(".highlight-frame-group");
     if (!group)
         return;
@@ -696,8 +787,7 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     else {
         rect.removeAttribute("stroke"); // Use CSS default
     }
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     const nodeTools = toolsWrapper?.querySelector(".node-tools");
     const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
@@ -708,36 +798,10 @@ const refreshHighlightFrame = (node, nodeProvider, canvasName = "canvas") => {
     const minWidth = Math.max(width, 3);
     const bottomY = top + height;
     // Update instance classes on tools wrapper and node tools
-    if (toolsWrapper) {
-        if (isInstance) {
-            toolsWrapper.classList.add("is-instance");
-        }
-        else {
-            toolsWrapper.classList.remove("is-instance");
-        }
-        // Update text edit class
-        if (isTextEdit) {
-            toolsWrapper.classList.add("is-text-edit");
-        }
-        else {
-            toolsWrapper.classList.remove("is-text-edit");
-        }
-    }
-    if (nodeTools) {
-        if (isInstance) {
-            nodeTools.classList.add("is-instance");
-        }
-        else {
-            nodeTools.classList.remove("is-instance");
-        }
-        // Update text edit class
-        if (isTextEdit) {
-            nodeTools.classList.add("is-text-edit");
-        }
-        else {
-            nodeTools.classList.remove("is-text-edit");
-        }
-    }
+    toggleClass(toolsWrapper, "is-instance", isInstance);
+    toggleClass(toolsWrapper, "is-text-edit", isTextEdit);
+    toggleClass(nodeTools, "is-instance", isInstance);
+    toggleClass(nodeTools, "is-text-edit", isTextEdit);
     // Batch all DOM writes (single paint pass)
     // Update group transform to move entire group (rect + handles) at once
     group.setAttribute("transform", `translate(${left}, ${top})`);
@@ -803,8 +867,7 @@ const updateHighlightFrameVisibility = (node) => {
     const displayValue = hasHiddenClass ? "none" : "";
     // Batch DOM writes
     frame.style.display = displayValue;
-    const canvasContainer = getCanvasContainer();
-    const container = canvasContainer || document.body;
+    const container = getCanvasContainerOrBody();
     const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
     if (toolsWrapper) {
         toolsWrapper.style.display = displayValue;
@@ -1110,7 +1173,6 @@ const createNodeTools = (element, canvasName = "canvas") => {
             highlightNode(node);
             if (nodeProvider) {
                 updateHighlightFrameVisibility(node);
-                updateHighlightFrameVisibility(node);
             }
         }
         else {
@@ -1118,7 +1180,7 @@ const createNodeTools = (element, canvasName = "canvas") => {
         }
     };
     // Setup event listener
-    const removeListeners = setupEventListener$1(nodeProvider, selectNode, handleEscape, text);
+    const removeListeners = setupEventListener(nodeProvider, selectNode, handleEscape, text);
     const cleanup = () => {
         removeListeners();
         resizeObserver?.disconnect();
@@ -1153,6 +1215,10 @@ const createNodeTools = (element, canvasName = "canvas") => {
     return nodeTools;
 };
 
+const getNodeProvider = () => {
+    return document.querySelector('[data-role="node-provider"]');
+};
+
 const DEFAULT_WIDTH = 400;
 const RESIZE_CONFIG = {
     minWidth: 4,
@@ -1186,25 +1252,20 @@ const RESIZE_PRESETS = [
     },
 ];
 
-const setupEventListener = (resizeHandle, startResize, handleResize, stopResize, blurResize) => {
-    const handleMouseLeave = (event) => {
-        // Check if mouse is leaving the window/document
-        if (!event.relatedTarget && (event.target === document || event.target === document.documentElement)) {
-            blurResize();
-        }
-    };
-    resizeHandle.addEventListener("mousedown", startResize);
-    document.addEventListener("mousemove", handleResize);
-    document.addEventListener("mouseup", stopResize);
-    document.addEventListener("mouseleave", handleMouseLeave);
-    window.addEventListener("blur", blurResize);
-    return () => {
-        resizeHandle.removeEventListener("mousedown", startResize);
-        document.removeEventListener("mousemove", handleResize);
-        document.removeEventListener("mouseup", stopResize);
-        document.removeEventListener("mouseleave", handleMouseLeave);
-        window.removeEventListener("blur", blurResize);
-    };
+/**
+ * Removes a viewport label for a single viewport element.
+ * @param viewportElement - The viewport element to remove the label for
+ */
+const removeViewportLabel = (viewportElement) => {
+    const viewportName = viewportElement.getAttribute("data-viewport-name");
+    if (!viewportName) {
+        return;
+    }
+    const overlay = getViewportLabelOverlay();
+    const labelGroup = overlay.querySelector(`[data-viewport-name="${viewportName}"]`);
+    if (labelGroup) {
+        labelGroup.remove();
+    }
 };
 
 const createResizeHandle = (container) => {
@@ -1273,58 +1334,59 @@ const createViewport = (container, initialWidth) => {
     const width = initialWidth ?? DEFAULT_WIDTH;
     container.style.setProperty("--container-width", `${width}px`);
     createResizePresets(resizeHandle, container, updateWidth);
-    let isDragging = false;
+    // Track initial values for resize calculation
     let startX = 0;
     let startWidth = 0;
-    const startResize = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        isDragging = true;
-        startX = event.clientX;
-        startWidth = container.offsetWidth;
-    };
-    const handleResize = (event) => {
-        if (!isDragging)
-            return;
-        if (canvas) {
-            canvas.style.cursor = "ew-resize";
-        }
-        const width = calcWidth(event, startX, startWidth);
-        updateWidth(container, width);
-    };
-    const stopResize = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (canvas) {
-            canvas.style.cursor = "default";
-        }
-        isDragging = false;
-    };
-    const blurResize = () => {
-        if (canvas) {
-            canvas.style.cursor = "default";
+    // Handle mouse leave for resize (specific to resize use case)
+    const handleMouseLeave = (event) => {
+        // Check if mouse is leaving the window/document
+        if (!event.relatedTarget && (event.target === document || event.target === document.documentElement)) {
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
         }
-        isDragging = false;
     };
-    const removeListeners = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
-    // Refresh viewport labels when viewport is created
-    refreshViewportLabels();
+    const removeDragListeners = createDragHandler(resizeHandle, {
+        onStart: (_event, { startX: dragStartX }) => {
+            startX = dragStartX;
+            startWidth = container.offsetWidth;
+        },
+        onDrag: (event) => {
+            if (canvas) {
+                canvas.style.cursor = "ew-resize";
+            }
+            const width = calcWidth(event, startX, startWidth);
+            updateWidth(container, width);
+        },
+        onStop: () => {
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
+        },
+        onCancel: () => {
+            if (canvas) {
+                canvas.style.cursor = "default";
+            }
+        },
+        onPreventClick: () => { },
+    });
+    document.addEventListener("mouseleave", handleMouseLeave);
+    // Create/refresh the label for this viewport
+    refreshViewportLabel(container);
     const cleanup = () => {
-        isDragging = false;
-        removeListeners();
+        removeDragListeners();
+        document.removeEventListener("mouseleave", handleMouseLeave);
         resizeHandle.remove();
-        // Refresh labels after cleanup to remove this viewport's label if needed
-        refreshViewportLabels();
+        // Remove the label for this viewport
+        removeViewportLabel(container);
     };
     return {
         setWidth: (width) => {
             updateWidth(container, width);
-            refreshViewportLabels();
-            // Refresh highlight frame when viewport width changes to update node positions
-            // biome-ignore lint/suspicious/noExplicitAny: global window extension
-            const nodeTools = window.nodeTools;
+            refreshViewportLabel(container);
+            const nodeTools = getNodeTools();
             const selectedNode = nodeTools?.getSelectedNode?.();
-            const nodeProvider = document.querySelector('[data-role="node-provider"]');
+            const nodeProvider = getNodeProvider();
             if (selectedNode && nodeProvider) {
                 refreshHighlightFrame(selectedNode, nodeProvider);
             }