@node-edit-utils/core 2.3.3 → 2.3.4

package/dist/lib/viewport/label/getViewportLabelOverlay.d.ts

@@ -0,0 +1 @@
+export declare const getViewportLabelOverlay: () => SVGSVGElement;

package/dist/lib/viewport/label/index.d.ts

@@ -1,4 +1,6 @@
-export { getViewportLabelsOverlay } from "./getViewportLabelsOverlay";
-export { isViewportLabelDragging } from "./isViewportLabelDragging";
+export { getViewportLabelOverlay } from "./getViewportLabelOverlay";
+export { isViewportDragging } from "./isViewportDragging";
+export { refreshViewportLabel } from "./refreshViewportLabel";
 export { refreshViewportLabels } from "./refreshViewportLabels";
-export { setupViewportLabelDrag } from "./setupViewportLabelDrag";
+export { removeViewportLabel } from "./removeViewportLabel";
+export { setupViewportDrag } from "./setupViewportDrag";

package/dist/lib/viewport/label/isViewportDragging.d.ts

@@ -0,0 +1,2 @@
+export declare const isViewportDragging: () => boolean;
+export declare const setViewportDragging: (isDragging: boolean) => void;

package/dist/lib/viewport/label/refreshViewportLabel.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export declare const refreshViewportLabel: (viewportElement: HTMLElement) => void;

package/dist/lib/viewport/label/removeViewportLabel.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Removes a viewport label for a single viewport element.
+ * @param viewportElement - The viewport element to remove the label for
+ */
+export declare const removeViewportLabel: (viewportElement: HTMLElement) => void;

package/dist/lib/viewport/label/setupViewportDrag.d.ts

@@ -0,0 +1 @@
+export declare const setupViewportDrag: (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string) => (() => void);

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.3
+ * @version 2.3.4
  */
 'use strict';
 
@@ -16,16 +16,6 @@ const getViewportDimensions = () => {
     };
 };
 
-function getScreenBounds(element) {
-    const rect = element.getBoundingClientRect();
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-
 const getCanvasContainer = () => {
     return document.querySelector(".canvas-container");
 };
@@ -34,7 +24,7 @@ const getCanvasContainerOrBody = () => {
     return getCanvasContainer() || document.body;
 };
 
-const getViewportLabelsOverlay = () => {
+const getViewportLabelOverlay = () => {
     const container = getCanvasContainerOrBody();
     // Check if overlay already exists
     let overlay = container.querySelector(".viewport-labels-overlay");
@@ -60,11 +50,21 @@ 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)
@@ -198,12 +198,18 @@ const selectFirstViewportNode = (viewportElement) => {
     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 setupViewportLabelDrag = (labelElement, viewportElement, viewportName) => {
+const setupViewportDrag = (labelElement, viewportElement, viewportName) => {
     // Get the parent group element that contains the label
     const labelGroup = labelElement.parentElement;
     // Track initial positions for calculations
@@ -211,7 +217,7 @@ const setupViewportLabelDrag = (labelElement, viewportElement, viewportName) =>
     let initialLabelPosition = { x: 0, y: 0 };
     return createDragHandler(labelElement, {
         onStart: () => {
-            setViewportLabelDragging(true);
+            setViewportDragging(true);
             initialTransform = getTransformValues(viewportElement);
             initialLabelPosition = getLabelPosition(labelGroup);
             selectFirstViewportNode(viewportElement);
@@ -232,66 +238,51 @@ const setupViewportLabelDrag = (labelElement, viewportElement, viewportName) =>
             viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
         },
         onStop: (_event, { hasDragged }) => {
-            setViewportLabelDragging(false);
+            setViewportDragging(false);
+            const finalTransform = getTransformValues(viewportElement);
             // If it was a drag, handle drag completion
             if (hasDragged) {
-                const finalTransform = getTransformValues(viewportElement);
                 // Trigger refresh after drag completes to update highlight frame and labels
                 const nodeTools = getNodeTools();
                 if (nodeTools?.refreshHighlightFrame) {
                     nodeTools.refreshHighlightFrame();
                 }
-                // Notify parent about the new position
-                sendPostMessage("viewport-position-changed", {
-                    viewportName,
-                    x: finalTransform.x,
-                    y: finalTransform.y,
-                });
             }
+            // Always notify parent about the new position on drag stop
+            sendPostMessage("viewport-position-changed", {
+                viewportName,
+                x: finalTransform.x,
+                y: finalTransform.y,
+            });
         },
         onCancel: () => {
-            setViewportLabelDragging(false);
+            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 { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
-    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");
@@ -302,9 +293,38 @@ 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();
+            }
+        }
     });
 };
 
@@ -1234,6 +1254,22 @@ const RESIZE_PRESETS = [
     },
 ];
 
+/**
+ * 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) => {
     const handle = document.createElement("div");
     handle.className = "resize-handle";
@@ -1337,17 +1373,19 @@ const createViewport = (container, initialWidth) => {
         onPreventClick: () => { },
     });
     document.addEventListener("mouseleave", handleMouseLeave);
-    refreshViewportLabels();
+    // Create/refresh the label for this viewport
+    refreshViewportLabel(container);
     const cleanup = () => {
         removeDragListeners();
         document.removeEventListener("mouseleave", handleMouseLeave);
         resizeHandle.remove();
-        refreshViewportLabels();
+        // Remove the label for this viewport
+        removeViewportLabel(container);
     };
     return {
         setWidth: (width) => {
             updateWidth(container, width);
-            refreshViewportLabels();
+            refreshViewportLabel(container);
             const nodeTools = getNodeTools();
             const selectedNode = nodeTools?.getSelectedNode?.();
             const nodeProvider = getNodeProvider();

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

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.3
+ * @version 2.3.4
  */
 const getNodeTools = () => {
     return window.nodeTools;
@@ -14,16 +14,6 @@ const getViewportDimensions = () => {
     };
 };
 
-function getScreenBounds(element) {
-    const rect = element.getBoundingClientRect();
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-
 const getCanvasContainer = () => {
     return document.querySelector(".canvas-container");
 };
@@ -32,7 +22,7 @@ const getCanvasContainerOrBody = () => {
     return getCanvasContainer() || document.body;
 };
 
-const getViewportLabelsOverlay = () => {
+const getViewportLabelOverlay = () => {
     const container = getCanvasContainerOrBody();
     // Check if overlay already exists
     let overlay = container.querySelector(".viewport-labels-overlay");
@@ -58,11 +48,21 @@ 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)
@@ -196,12 +196,18 @@ const selectFirstViewportNode = (viewportElement) => {
     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 setupViewportLabelDrag = (labelElement, viewportElement, viewportName) => {
+const setupViewportDrag = (labelElement, viewportElement, viewportName) => {
     // Get the parent group element that contains the label
     const labelGroup = labelElement.parentElement;
     // Track initial positions for calculations
@@ -209,7 +215,7 @@ const setupViewportLabelDrag = (labelElement, viewportElement, viewportName) =>
     let initialLabelPosition = { x: 0, y: 0 };
     return createDragHandler(labelElement, {
         onStart: () => {
-            setViewportLabelDragging(true);
+            setViewportDragging(true);
             initialTransform = getTransformValues(viewportElement);
             initialLabelPosition = getLabelPosition(labelGroup);
             selectFirstViewportNode(viewportElement);
@@ -230,66 +236,51 @@ const setupViewportLabelDrag = (labelElement, viewportElement, viewportName) =>
             viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
         },
         onStop: (_event, { hasDragged }) => {
-            setViewportLabelDragging(false);
+            setViewportDragging(false);
+            const finalTransform = getTransformValues(viewportElement);
             // If it was a drag, handle drag completion
             if (hasDragged) {
-                const finalTransform = getTransformValues(viewportElement);
                 // Trigger refresh after drag completes to update highlight frame and labels
                 const nodeTools = getNodeTools();
                 if (nodeTools?.refreshHighlightFrame) {
                     nodeTools.refreshHighlightFrame();
                 }
-                // Notify parent about the new position
-                sendPostMessage("viewport-position-changed", {
-                    viewportName,
-                    x: finalTransform.x,
-                    y: finalTransform.y,
-                });
             }
+            // Always notify parent about the new position on drag stop
+            sendPostMessage("viewport-position-changed", {
+                viewportName,
+                x: finalTransform.x,
+                y: finalTransform.y,
+            });
         },
         onCancel: () => {
-            setViewportLabelDragging(false);
+            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 { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
-    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");
@@ -300,9 +291,38 @@ 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();
+            }
+        }
     });
 };
 
@@ -1232,6 +1252,22 @@ const RESIZE_PRESETS = [
     },
 ];
 
+/**
+ * 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) => {
     const handle = document.createElement("div");
     handle.className = "resize-handle";
@@ -1335,17 +1371,19 @@ const createViewport = (container, initialWidth) => {
         onPreventClick: () => { },
     });
     document.addEventListener("mouseleave", handleMouseLeave);
-    refreshViewportLabels();
+    // Create/refresh the label for this viewport
+    refreshViewportLabel(container);
     const cleanup = () => {
         removeDragListeners();
         document.removeEventListener("mouseleave", handleMouseLeave);
         resizeHandle.remove();
-        refreshViewportLabels();
+        // Remove the label for this viewport
+        removeViewportLabel(container);
     };
     return {
         setWidth: (width) => {
             updateWidth(container, width);
-            refreshViewportLabels();
+            refreshViewportLabel(container);
             const nodeTools = getNodeTools();
             const selectedNode = nodeTools?.getSelectedNode?.();
             const nodeProvider = getNodeProvider();