@node-edit-utils/core 2.3.1 → 2.3.3

package/src/lib/node-tools/highlight/refreshHighlightFrame.ts

@@ -1,5 +1,7 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+import { getViewportDimensions } from "@/lib/helpers/getViewportDimensions";
+import { toggleClass } from "@/lib/helpers/toggleClass";
 import { isComponentInstance } from "../select/helpers/isComponentInstance";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
 import { getScreenBounds } from "./helpers/getScreenBounds";
@@ -22,24 +24,15 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
 
   // 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") as SVGGElement | null;
   if (!group) return;
@@ -56,12 +49,11 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
     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") as HTMLElement | null;
   const nodeTools = toolsWrapper?.querySelector(".node-tools") as HTMLElement | null;
 
-  const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
+  const zoom = (getCanvasWindowValue(["zoom", "current"], canvasName) as number | undefined) ?? 1;
   const bounds = getScreenBounds(node);
 
   // Calculate all values before any DOM writes
@@ -71,32 +63,10 @@ export const refreshHighlightFrame = (node: HTMLElement, nodeProvider: HTMLEleme
   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

package/src/lib/node-tools/highlight/updateHighlightFrameVisibility.ts

@@ -1,4 +1,4 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
 
 export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
@@ -12,8 +12,7 @@ export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
   // 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") as HTMLElement | null;
   if (toolsWrapper) {
     toolsWrapper.style.display = displayValue;

package/src/lib/node-tools/select/helpers/isInsideViewport.ts

@@ -0,0 +1,19 @@
+export const isInsideViewport = (element: Element): boolean => {
+  let current: Element | null = 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;
+};
+

package/src/lib/node-tools/select/selectNode.ts

@@ -3,6 +3,7 @@ import type { NodeText } from "../text/types";
 import { IGNORED_DOM_ELEMENTS } from "./constants";
 import { getElementsFromPoint } from "./helpers/getElementsFromPoint";
 import { isInsideComponent } from "./helpers/isInsideComponent";
+import { isInsideViewport } from "./helpers/isInsideViewport";
 import { targetSameCandidates } from "./helpers/targetSameCandidates";
 
 let candidateCache: Element[] = [];
@@ -22,9 +23,20 @@ export const selectNode = (event: MouseEvent, nodeProvider: HTMLElement | null,
     (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;

package/src/lib/node-tools/text/events/setupMutationObserver.ts

@@ -50,6 +50,7 @@ export const setupMutationObserver = (
     // Accumulate mutations instead of replacing
     pendingMutations.push(...mutations);
     scheduleProcess();
+    console.log("refreshHighlightFrame in mutationObserver");
     refreshHighlightFrame(node, nodeProvider, canvasName);
   });
 

package/src/lib/styles/styles.css

@@ -71,6 +71,51 @@
   will-change: transform;
 }
 
+.viewport-labels-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: var(--z-index-highlight);
+  overflow: visible;
+  contain: layout style paint;
+  will-change: transform;
+}
+
+.viewport-label-text {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  font-family: var(--font-family-primary);
+  letter-spacing: var(--letter-spacing);
+  fill: oklch(0.5 0 0);
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .viewport-label-text {
+    fill: oklch(0.5 0 0);
+  }
+
+  .viewport-label-text:hover {
+    fill: oklch(0 0 0);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .viewport-label-text {
+    fill: oklch(0.7 0 0);
+  }
+
+  .viewport-label-text:hover {
+    fill: oklch(0.3 0 0);
+  }
+}
+
 .highlight-frame-rect {
   fill: none;
   stroke: var(--primary-color);
@@ -152,7 +197,9 @@
 }
 
 .viewport {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: var(--container-width);
 }
 

package/src/lib/viewport/constants.ts

@@ -1,8 +1,8 @@
 export const DEFAULT_WIDTH = 400;
 
 export const RESIZE_CONFIG = {
-  minWidth: 320,
-  maxWidth: 1680,
+  minWidth: 4,
+  maxWidth: 2560,
 } as const;
 
 export const RESIZE_PRESETS = [

package/src/lib/viewport/createViewport.ts

@@ -1,6 +1,10 @@
 import { getCanvasContainer } from "../canvas/helpers/getCanvasContainer";
+import { createDragHandler } from "../helpers/createDragHandler";
+import { getNodeProvider } from "../helpers/getNodeProvider";
+import { getNodeTools } from "../helpers/getNodeTools";
+import { refreshHighlightFrame } from "../node-tools/highlight/refreshHighlightFrame";
 import { DEFAULT_WIDTH } from "./constants";
-import { setupEventListener } from "./events/setupEventListener";
+import { refreshViewportLabels } from "./label/refreshViewportLabels";
 import { createResizeHandle } from "./resize/createResizeHandle";
 import { createResizePresets } from "./resize/createResizePresets";
 import type { Viewport } from "./types";
@@ -12,6 +16,7 @@ export const createViewport = (container: HTMLElement, initialWidth?: number): V
 
   // Remove any existing resize handle to prevent duplicates
   const existingHandle = container.querySelector(".resize-handle");
+
   if (existingHandle) {
     existingHandle.remove();
   }
@@ -22,60 +27,70 @@ export const createViewport = (container: HTMLElement, initialWidth?: number): V
 
   createResizePresets(resizeHandle, container, updateWidth);
 
-  let isDragging: boolean = false;
-  let startX: number = 0;
-  let startWidth: number = 0;
-
-  const startResize = (event: MouseEvent): void => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    isDragging = true;
-    startX = event.clientX;
-    startWidth = container.offsetWidth;
-  };
-
-  const handleResize = (event: MouseEvent): void => {
-    if (!isDragging) return;
-
-    if (canvas) {
-      canvas.style.cursor = "ew-resize";
+  // Track initial values for resize calculation
+  let startX = 0;
+  let startWidth = 0;
+
+  // Handle mouse leave for resize (specific to resize use case)
+  const handleMouseLeave = (event: MouseEvent): void => {
+    // Check if mouse is leaving the window/document
+    if (!event.relatedTarget && (event.target === document || event.target === document.documentElement)) {
+      if (canvas) {
+        canvas.style.cursor = "default";
+      }
     }
-
-    const width = calcWidth(event, startX, startWidth);
-    updateWidth(container, width);
   };
 
-  const stopResize = (event: MouseEvent): void => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (canvas) {
-      canvas.style.cursor = "default";
-    }
-
-    isDragging = false;
-  };
+  const removeDragListeners = createDragHandler(resizeHandle, {
+    onStart: (_event, { startX: dragStartX }) => {
+      startX = dragStartX;
+      startWidth = container.offsetWidth;
+    },
+    onDrag: (event) => {
+      if (canvas) {
+        canvas.style.cursor = "ew-resize";
+      }
 
-  const blurResize = (): void => {
-    if (canvas) {
-      canvas.style.cursor = "default";
-    }
+      const width = calcWidth(event, startX, startWidth);
+      updateWidth(container, width);
+    },
+    onStop: () => {
+      if (canvas) {
+        canvas.style.cursor = "default";
+      }
+    },
+    onCancel: () => {
+      if (canvas) {
+        canvas.style.cursor = "default";
+      }
+    },
+    onPreventClick: () => {},
+  });
 
-    isDragging = false;
-  };
+  document.addEventListener("mouseleave", handleMouseLeave);
 
-  const removeListeners = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
+  refreshViewportLabels();
 
   const cleanup = (): void => {
-    isDragging = false;
-    removeListeners();
+    removeDragListeners();
+    document.removeEventListener("mouseleave", handleMouseLeave);
     resizeHandle.remove();
+
+    refreshViewportLabels();
   };
 
   return {
     setWidth: (width: number): void => {
       updateWidth(container, width);
+      refreshViewportLabels();
+
+      const nodeTools = getNodeTools();
+      const selectedNode = nodeTools?.getSelectedNode?.();
+      const nodeProvider = getNodeProvider();
+
+      if (selectedNode && nodeProvider) {
+        refreshHighlightFrame(selectedNode, nodeProvider);
+      }
     },
     cleanup,
   };

package/src/lib/viewport/label/getViewportLabelsOverlay.ts

@@ -0,0 +1,32 @@
+import { getCanvasContainerOrBody } from "../../canvas/helpers/getCanvasContainerOrBody";
+import { getViewportDimensions } from "../../helpers/getViewportDimensions";
+
+export const getViewportLabelsOverlay = (): SVGSVGElement => {
+  const container = getCanvasContainerOrBody();
+
+  // Check if overlay already exists
+  let overlay = container.querySelector(".viewport-labels-overlay") as SVGSVGElement | null;
+
+  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 { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
+    overlay.setAttribute("width", viewportWidth.toString());
+    overlay.setAttribute("height", viewportHeight.toString());
+
+    container.appendChild(overlay);
+  }
+
+  return overlay;
+};

package/src/lib/viewport/label/helpers/getLabelPosition.ts

@@ -0,0 +1,6 @@
+import { parseTransform2d } from "../../../helpers/parseTransform";
+
+export const getLabelPosition = (labelGroup: SVGGElement): { x: number; y: number } => {
+  const transform = labelGroup.getAttribute("transform");
+  return parseTransform2d(transform);
+};

package/src/lib/viewport/label/helpers/getTransformValues.ts

@@ -0,0 +1,6 @@
+import { parseTransform3d } from "../../../helpers/parseTransform";
+
+export const getTransformValues = (element: HTMLElement): { x: number; y: number } => {
+  const style = element.style.transform;
+  return parseTransform3d(style);
+};

package/src/lib/viewport/label/helpers/getZoomValue.ts

@@ -0,0 +1,4 @@
+export const getZoomValue = (): number => {
+  const zoomValue = getComputedStyle(document.body).getPropertyValue("--zoom").trim();
+  return zoomValue ? parseFloat(zoomValue) : 1;
+};

package/src/lib/viewport/label/helpers/selectFirstViewportNode.ts

@@ -0,0 +1,18 @@
+import { getNodeTools } from "../../../helpers/getNodeTools";
+
+/**
+ * Selects the first child node inside a viewport element.
+ * Skips the resize-handle element if present.
+ */
+export const selectFirstViewportNode = (viewportElement: HTMLElement): void => {
+  const firstChild = Array.from(viewportElement.children).find((child) => !child.classList.contains("resize-handle")) as
+    | HTMLElement
+    | undefined;
+
+  if (firstChild) {
+    const nodeTools = getNodeTools();
+    if (nodeTools?.selectNode) {
+      nodeTools.selectNode(firstChild);
+    }
+  }
+};

package/src/lib/viewport/label/index.ts

@@ -0,0 +1,4 @@
+export { getViewportLabelsOverlay } from "./getViewportLabelsOverlay";
+export { isViewportLabelDragging } from "./isViewportLabelDragging";
+export { refreshViewportLabels } from "./refreshViewportLabels";
+export { setupViewportLabelDrag } from "./setupViewportLabelDrag";

package/src/lib/viewport/label/isViewportLabelDragging.ts

@@ -0,0 +1,9 @@
+// Global flag to prevent refreshViewportLabels during drag
+let globalIsDragging = false;
+
+export const isViewportLabelDragging = (): boolean => globalIsDragging;
+
+export const setViewportLabelDragging = (isDragging: boolean): void => {
+  globalIsDragging = isDragging;
+};
+

package/src/lib/viewport/label/refreshViewportLabels.ts

@@ -0,0 +1,69 @@
+import { getViewportDimensions } from "../../helpers/getViewportDimensions";
+import { getScreenBounds } from "../../node-tools/highlight/helpers/getScreenBounds";
+import { getViewportLabelsOverlay } from "./getViewportLabelsOverlay";
+import { isViewportLabelDragging } from "./isViewportLabelDragging";
+import { setupViewportLabelDrag } from "./setupViewportLabelDrag";
+
+// Store cleanup functions for drag listeners
+const dragCleanupFunctions = new Map<string, () => void>();
+
+export const refreshViewportLabels = (): void => {
+  // Skip refresh if a viewport label is being dragged
+  if (isViewportLabelDragging()) {
+    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 as HTMLElement;
+    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);
+  });
+};

package/src/lib/viewport/label/setupViewportLabelDrag.ts

@@ -0,0 +1,70 @@
+import { createDragHandler } from "../../helpers/createDragHandler";
+import { getNodeTools } from "../../helpers/getNodeTools";
+import { sendPostMessage } from "../../post-message/sendPostMessage";
+import { getLabelPosition } from "./helpers/getLabelPosition";
+import { getTransformValues } from "./helpers/getTransformValues";
+import { getZoomValue } from "./helpers/getZoomValue";
+import { selectFirstViewportNode } from "./helpers/selectFirstViewportNode";
+import { setViewportLabelDragging } from "./isViewportLabelDragging";
+
+export const setupViewportLabelDrag = (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string): (() => void) => {
+  // Get the parent group element that contains the label
+  const labelGroup = labelElement.parentElement as unknown as SVGGElement;
+
+  // Track initial positions for calculations
+  let initialTransform = { x: 0, y: 0 };
+  let initialLabelPosition = { x: 0, y: 0 };
+
+  return createDragHandler(labelElement, {
+    onStart: () => {
+      setViewportLabelDragging(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 }) => {
+      setViewportLabelDragging(false);
+
+      // 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,
+        });
+      }
+    },
+    onCancel: () => {
+      setViewportLabelDragging(false);
+    },
+    onPreventClick: () => {},
+  });
+};

package/src/lib/window/bindToWindow.ts

@@ -1,6 +1,5 @@
 export const bindToWindow = <T>(key: string, value: T): void => {
   if (typeof window !== "undefined") {
-    // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
-    (window as any)[key] = value;
+    (window as unknown as Record<string, unknown>)[key] = value;
   }
 };