@node-edit-utils/core 2.3.1 → 2.3.2

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

@@ -1,8 +1,216 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 2.3.1
+ * @version 2.3.2
  */
+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");
+};
+
+const getViewportLabelsOverlay = () => {
+    const canvasContainer = getCanvasContainer();
+    const container = canvasContainer || document.body;
+    // Check if overlay already exists
+    let overlay = container.querySelector(".viewport-labels-overlay");
+    if (!overlay) {
+        // Create new SVG overlay
+        overlay = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        overlay.classList.add("viewport-labels-overlay");
+        // Set fixed positioning
+        overlay.style.position = "absolute";
+        overlay.style.top = "0";
+        overlay.style.left = "0";
+        overlay.style.width = "100vw";
+        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;
+        overlay.setAttribute("width", viewportWidth.toString());
+        overlay.setAttribute("height", viewportHeight.toString());
+        container.appendChild(overlay);
+    }
+    return overlay;
+};
+
+// Global flag to prevent refreshViewportLabels during drag
+let globalIsDragging = false;
+const isViewportLabelDragging = () => globalIsDragging;
+const setViewportLabelDragging = (isDragging) => {
+    globalIsDragging = isDragging;
+};
+
+function sendPostMessage(action, data) {
+    window.parent.postMessage({
+        source: "node-edit-utils",
+        action,
+        data,
+        timestamp: Date.now(),
+    }, "*");
+}
+
+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 };
+};
+
+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 };
+};
+
+const getZoomValue = () => {
+    const zoomValue = getComputedStyle(document.body).getPropertyValue("--zoom").trim();
+    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 };
+    // 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);
+    };
+};
+
+// Store cleanup functions for drag listeners
+const dragCleanupFunctions = new Map();
+const refreshViewportLabels = () => {
+    // Skip refresh if a viewport label is being dragged
+    if (isViewportLabelDragging()) {
+        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);
+        // Create group for this viewport label
+        const 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");
+        text.setAttribute("x", "0");
+        text.setAttribute("y", "-8");
+        text.setAttribute("vector-effect", "non-scaling-stroke");
+        text.setAttribute("pointer-events", "auto");
+        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);
+    });
+};
+
 const getCanvasWindowValue = (path, canvasName = "canvas") => {
     // biome-ignore lint/suspicious/noExplicitAny: global window extension
     const canvas = window[canvasName];
@@ -32,6 +240,8 @@ function createCanvasObserver(canvasName = "canvas") {
         if (nodeTools?.refreshHighlightFrame) {
             nodeTools.refreshHighlightFrame();
         }
+        // Refresh viewport labels
+        refreshViewportLabels();
     });
     observer.observe(transformLayer, {
         attributes: true,
@@ -39,8 +249,16 @@ function createCanvasObserver(canvasName = "canvas") {
         subtree: true,
         childList: true,
     });
+    // Handle window resize for viewport labels
+    const handleResize = () => {
+        refreshViewportLabels();
+    };
+    window.addEventListener("resize", handleResize);
+    // Initial refresh of viewport labels
+    refreshViewportLabels();
     function disconnect() {
         observer.disconnect();
+        window.removeEventListener("resize", handleResize);
     }
     return {
         disconnect,
@@ -55,15 +273,6 @@ const connectResizeObserver = (element, handler) => {
     return resizeObserver;
 };
 
-function sendPostMessage(action, data) {
-    window.parent.postMessage({
-        source: "node-edit-utils",
-        action,
-        data,
-        timestamp: Date.now(),
-    }, "*");
-}
-
 const bindToWindow = (key, value) => {
     if (typeof window !== "undefined") {
         // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
@@ -91,10 +300,6 @@ const processPostMessage = (event, onNodeSelected) => {
     }
 };
 
-const getCanvasContainer = () => {
-    return document.querySelector(".canvas-container");
-};
-
 const clearHighlightFrame = () => {
     const canvasContainer = getCanvasContainer();
     const container = canvasContainer || document.body;
@@ -146,6 +351,21 @@ const isInsideComponent = (element) => {
     return false;
 };
 
+const isInsideViewport = (element) => {
+    let current = element;
+    while (current) {
+        if (current.classList.contains("viewport")) {
+            return true;
+        }
+        // Stop at node-provider to avoid checking beyond the editable area
+        if (current.getAttribute("data-role") === "node-provider") {
+            break;
+        }
+        current = current.parentElement;
+    }
+    return false;
+};
+
 const targetSameCandidates = (cache, current) => cache.length === current.length && cache.every((el, i) => el === current[i]);
 
 let candidateCache = [];
@@ -158,7 +378,16 @@ const selectNode = (event, nodeProvider, text) => {
     const clickThrough = event.metaKey || event.ctrlKey;
     const candidates = getElementsFromPoint(clickX, clickY).filter((element) => !IGNORED_DOM_ELEMENTS.includes(element.tagName.toLowerCase()) &&
         !element.classList.contains("select-none") &&
-        !isInsideComponent(element));
+        !element.classList.contains("content-layer") &&
+        !element.classList.contains("resize-handle") &&
+        !element.classList.contains("resize-presets") &&
+        !isInsideComponent(element) &&
+        isInsideViewport(element));
+    console.log("candidates", candidates);
+    if (candidates.length === 0) {
+        lastSelectedNode = null;
+        return null;
+    }
     const editableNode = text.getEditableNode();
     if (editableNode && candidates.includes(editableNode)) {
         selectedNode = editableNode;
@@ -263,16 +492,6 @@ const createCornerHandles = (group, width, height, isInstance = false, isTextEdi
     createCornerHandle(group, 0, height, "handle-bottom-left", isInstance, isTextEdit);
 };
 
-function getScreenBounds(element) {
-    const rect = element.getBoundingClientRect();
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-
 const getComponentColor$1 = () => {
     return getComputedStyle(document.documentElement).getPropertyValue("--component-color").trim() || "oklch(65.6% 0.241 354.308)";
 };
@@ -705,6 +924,7 @@ const setupMutationObserver = (node, nodeProvider, canvasName = "canvas") => {
         // Accumulate mutations instead of replacing
         pendingMutations.push(...mutations);
         scheduleProcess();
+        console.log("refreshHighlightFrame in mutationObserver");
         refreshHighlightFrame(node, nodeProvider, canvasName);
     });
     return () => {
@@ -842,14 +1062,15 @@ const createNodeTools = (element, canvasName = "canvas") => {
                 checkNodeExists();
                 if (!document.contains(node))
                     return;
+                console.log("refreshHighlightFrame in mutationObserver 2");
                 refreshHighlightFrame(node, nodeProvider, canvasName);
                 updateHighlightFrameVisibility(node);
             });
             mutationObserver.observe(node, {
                 attributes: true,
                 characterData: true,
-                childList: true,
-                subtree: true,
+                //childList: true,
+                //subtree: true,
             });
             // Also observe parent node to catch when this node is removed
             const parentNode = node.parentElement;
@@ -878,15 +1099,22 @@ const createNodeTools = (element, canvasName = "canvas") => {
                 if (!document.contains(node))
                     return; // Exit early if node was removed
                 refreshHighlightFrame(node, nodeProvider, canvasName);
+                console.log("refreshHighlightFrame in resizeObserver");
                 updateHighlightFrameVisibility(node);
             });
         }
         selectedNode = node;
         sendPostMessage("selectedNodeChanged", node?.getAttribute("data-node-id") ?? null);
         highlightNode(node) ?? null;
-        if (node && nodeProvider) {
-            updateHighlightFrameVisibility(node);
-            updateHighlightFrameVisibility(node);
+        if (node) {
+            highlightNode(node);
+            if (nodeProvider) {
+                updateHighlightFrameVisibility(node);
+                updateHighlightFrameVisibility(node);
+            }
+        }
+        else {
+            clearHighlightFrame();
         }
     };
     // Setup event listener
@@ -927,8 +1155,8 @@ const createNodeTools = (element, canvasName = "canvas") => {
 
 const DEFAULT_WIDTH = 400;
 const RESIZE_CONFIG = {
-    minWidth: 320,
-    maxWidth: 1680,
+    minWidth: 4,
+    maxWidth: 2560,
 };
 const RESIZE_PRESETS = [
     {
@@ -1079,14 +1307,27 @@ const createViewport = (container, initialWidth) => {
         isDragging = false;
     };
     const removeListeners = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
+    // Refresh viewport labels when viewport is created
+    refreshViewportLabels();
     const cleanup = () => {
         isDragging = false;
         removeListeners();
         resizeHandle.remove();
+        // Refresh labels after cleanup to remove this viewport's label if needed
+        refreshViewportLabels();
     };
     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;
+            const selectedNode = nodeTools?.getSelectedNode?.();
+            const nodeProvider = document.querySelector('[data-role="node-provider"]');
+            if (selectedNode && nodeProvider) {
+                refreshHighlightFrame(selectedNode, nodeProvider);
+            }
         },
         cleanup,
     };