@node-edit-utils/core 2.3.0 → 2.3.2

package/src/lib/node-tools/createNodeTools.ts

@@ -71,6 +71,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
         checkNodeExists();
         if (!document.contains(node)) return;
 
+        console.log("refreshHighlightFrame in mutationObserver 2");
         refreshHighlightFrame(node, nodeProvider, canvasName);
         updateHighlightFrameVisibility(node);
       });
@@ -78,8 +79,8 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
       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
@@ -111,6 +112,7 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
         if (!document.contains(node)) return; // Exit early if node was removed
 
         refreshHighlightFrame(node, nodeProvider, canvasName);
+        console.log("refreshHighlightFrame in resizeObserver");
         updateHighlightFrameVisibility(node);
       });
     }
@@ -119,9 +121,14 @@ export const createNodeTools = (element: HTMLElement | null, canvasName: string
     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();
     }
   };
 

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.3 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,14 +1,15 @@
 import { getCanvasContainer } from "../canvas/helpers/getCanvasContainer";
-import { withRAFThrottle } from "../helpers";
+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";
 import { calcWidth } from "./width/calcWidth";
 import { updateWidth } from "./width/updateWidth";
 
-export const createViewport = (container: HTMLElement): Viewport => {
+export const createViewport = (container: HTMLElement, initialWidth?: number): Viewport => {
   const canvas: HTMLElement | null = getCanvasContainer();
 
   // Remove any existing resize handle to prevent duplicates
@@ -18,7 +19,8 @@ export const createViewport = (container: HTMLElement): Viewport => {
   }
 
   const resizeHandle = createResizeHandle(container);
-  container.style.setProperty("--container-width", `${DEFAULT_WIDTH}px`);
+  const width = initialWidth ?? DEFAULT_WIDTH;
+  container.style.setProperty("--container-width", `${width}px`);
 
   createResizePresets(resizeHandle, container, updateWidth);
 
@@ -46,8 +48,6 @@ export const createViewport = (container: HTMLElement): Viewport => {
     updateWidth(container, width);
   };
 
-  const throttledHandleResize = withRAFThrottle(handleResize);
-
   const stopResize = (event: MouseEvent): void => {
     event.preventDefault();
     event.stopPropagation();
@@ -60,21 +60,40 @@ export const createViewport = (container: HTMLElement): Viewport => {
   };
 
   const blurResize = (): void => {
+    if (canvas) {
+      canvas.style.cursor = "default";
+    }
+
     isDragging = false;
   };
 
-  const removeListeners = setupEventListener(resizeHandle, startResize, throttledHandleResize, stopResize, blurResize);
+  const removeListeners = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
+
+  // Refresh viewport labels when viewport is created
+  refreshViewportLabels();
 
   const cleanup = (): void => {
     isDragging = false;
-    throttledHandleResize?.cleanup();
     removeListeners();
     resizeHandle.remove();
+    // Refresh labels after cleanup to remove this viewport's label if needed
+    refreshViewportLabels();
   };
 
   return {
     setWidth: (width: number): void => {
       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 as any).nodeTools;
+      const selectedNode = nodeTools?.getSelectedNode?.();
+      const nodeProvider = document.querySelector('[data-role="node-provider"]') as HTMLElement | null;
+
+      if (selectedNode && nodeProvider) {
+        refreshHighlightFrame(selectedNode, nodeProvider);
+      }
     },
     cleanup,
   };

package/src/lib/viewport/events/setupEventListener.ts

@@ -5,9 +5,17 @@ export const setupEventListener = (
   stopResize: (event: MouseEvent) => void,
   blurResize: () => void
 ): (() => void) => {
+  const handleMouseLeave = (event: MouseEvent): void => {
+    // 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);
 
@@ -15,6 +23,7 @@ export const setupEventListener = (
     resizeHandle.removeEventListener("mousedown", startResize);
     document.removeEventListener("mousemove", handleResize);
     document.removeEventListener("mouseup", stopResize);
+    document.removeEventListener("mouseleave", handleMouseLeave);
     window.removeEventListener("blur", blurResize);
   };
 };

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

@@ -0,0 +1,33 @@
+import { getCanvasContainer } from "../../canvas/helpers/getCanvasContainer";
+
+export const getViewportLabelsOverlay = (): SVGSVGElement => {
+  const canvasContainer = getCanvasContainer();
+  const container = canvasContainer || document.body;
+
+  // 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 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;
+};

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

@@ -0,0 +1,8 @@
+export const getLabelPosition = (labelGroup: SVGGElement): { x: number; y: number } => {
+  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 };
+};

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

@@ -0,0 +1,8 @@
+export const getTransformValues = (element: HTMLElement): { x: number; y: number } => {
+  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 };
+};

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/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 { 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 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 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,98 @@
+import { sendPostMessage } from "../../post-message/sendPostMessage";
+import { getLabelPosition } from "./helpers/getLabelPosition";
+import { getTransformValues } from "./helpers/getTransformValues";
+import { getZoomValue } from "./helpers/getZoomValue";
+import { setViewportLabelDragging } from "./isViewportLabelDragging";
+
+export const setupViewportLabelDrag = (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string): (() => void) => {
+  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 as unknown as SVGGElement;
+
+  const startDrag = (event: MouseEvent): void => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    isDragging = true;
+    setViewportLabelDragging(true);
+    startX = event.clientX;
+    startY = event.clientY;
+    initialTransform = getTransformValues(viewportElement);
+    initialLabelPosition = getLabelPosition(labelGroup);
+  };
+
+  const handleDrag = (event: MouseEvent): void => {
+    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: MouseEvent): void => {
+    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 as any).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 = (): void => {
+    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);
+  };
+};