@node-edit-utils/core 2.3.2 → 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/styles/styles.css

@@ -98,7 +98,7 @@
 
 @media (prefers-color-scheme: dark) {
   .viewport-label-text {
-    fill: oklch(0.3 0 0);
+    fill: oklch(0.5 0 0);
   }
 
   .viewport-label-text:hover {

package/src/lib/viewport/createViewport.ts

@@ -1,7 +1,9 @@
 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";
@@ -14,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();
   }
@@ -24,59 +27,55 @@ 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";
-    }
-
-    const width = calcWidth(event, startX, startWidth);
-    updateWidth(container, width);
-  };
+  // Track initial values for resize calculation
+  let startX = 0;
+  let startWidth = 0;
 
-  const stopResize = (event: MouseEvent): void => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (canvas) {
-      canvas.style.cursor = "default";
+  // 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";
+      }
     }
-
-    isDragging = false;
   };
 
-  const blurResize = (): void => {
-    if (canvas) {
-      canvas.style.cursor = "default";
-    }
+  const removeDragListeners = createDragHandler(resizeHandle, {
+    onStart: (_event, { startX: dragStartX }) => {
+      startX = dragStartX;
+      startWidth = container.offsetWidth;
+    },
+    onDrag: (event) => {
+      if (canvas) {
+        canvas.style.cursor = "ew-resize";
+      }
 
-    isDragging = false;
-  };
+      const width = calcWidth(event, startX, startWidth);
+      updateWidth(container, width);
+    },
+    onStop: () => {
+      if (canvas) {
+        canvas.style.cursor = "default";
+      }
+    },
+    onCancel: () => {
+      if (canvas) {
+        canvas.style.cursor = "default";
+      }
+    },
+    onPreventClick: () => {},
+  });
 
-  const removeListeners = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
+  document.addEventListener("mouseleave", handleMouseLeave);
 
-  // Refresh viewport labels when viewport is created
   refreshViewportLabels();
 
   const cleanup = (): void => {
-    isDragging = false;
-    removeListeners();
+    removeDragListeners();
+    document.removeEventListener("mouseleave", handleMouseLeave);
     resizeHandle.remove();
-    // Refresh labels after cleanup to remove this viewport's label if needed
+
     refreshViewportLabels();
   };
 
@@ -85,11 +84,9 @@ export const createViewport = (container: HTMLElement, initialWidth?: number): V
       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 nodeTools = getNodeTools();
       const selectedNode = nodeTools?.getSelectedNode?.();
-      const nodeProvider = document.querySelector('[data-role="node-provider"]') as HTMLElement | null;
+      const nodeProvider = getNodeProvider();
 
       if (selectedNode && nodeProvider) {
         refreshHighlightFrame(selectedNode, nodeProvider);

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

@@ -1,8 +1,8 @@
-import { getCanvasContainer } from "../../canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "../../canvas/helpers/getCanvasContainerOrBody";
+import { getViewportDimensions } from "../../helpers/getViewportDimensions";
 
 export const getViewportLabelsOverlay = (): SVGSVGElement => {
-  const canvasContainer = getCanvasContainer();
-  const container = canvasContainer || document.body;
+  const container = getCanvasContainerOrBody();
 
   // Check if overlay already exists
   let overlay = container.querySelector(".viewport-labels-overlay") as SVGSVGElement | null;
@@ -21,8 +21,7 @@ export const getViewportLabelsOverlay = (): SVGSVGElement => {
     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());
 

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

@@ -1,8 +1,6 @@
+import { parseTransform2d } from "../../../helpers/parseTransform";
+
 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 };
+  return parseTransform2d(transform);
 };

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

@@ -1,8 +1,6 @@
+import { parseTransform3d } from "../../../helpers/parseTransform";
+
 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 };
+  return parseTransform3d(style);
 };

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/refreshViewportLabels.ts

@@ -1,3 +1,4 @@
+import { getViewportDimensions } from "../../helpers/getViewportDimensions";
 import { getScreenBounds } from "../../node-tools/highlight/helpers/getScreenBounds";
 import { getViewportLabelsOverlay } from "./getViewportLabelsOverlay";
 import { isViewportLabelDragging } from "./isViewportLabelDragging";
@@ -15,8 +16,7 @@ export const refreshViewportLabels = (): void => {
   const overlay = getViewportLabelsOverlay();
 
   // Update SVG dimensions to match current viewport
-  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());
 

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

@@ -1,98 +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) => {
-  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);
+  // Track initial positions for calculations
+  let initialTransform = { x: 0, y: 0 };
+  let initialLabelPosition = { x: 0, y: 0 };
 
-  // Return cleanup function
-  return () => {
-    labelElement.removeEventListener("mousedown", startDrag);
-    document.removeEventListener("mousemove", handleDrag);
-    document.removeEventListener("mouseup", stopDrag);
-    window.removeEventListener("blur", cancelDrag);
-  };
+  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;
   }
 };