@node-edit-utils/core 2.3.2 → 2.3.4

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

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import { getTransformValues } from "./getTransformValues";
+
+describe("getTransformValues", () => {
+  it("should parse translate3d transform with positive values", () => {
+    const element = document.createElement("div");
+    element.style.transform = "translate3d(100px, 200px, 0px)";
+
+    const result = getTransformValues(element);
+    expect(result).toEqual({ x: 100, y: 200 });
+  });
+
+  it("should parse translate3d transform with negative values", () => {
+    const element = document.createElement("div");
+    element.style.transform = "translate3d(-50px, -100px, 0px)";
+
+    const result = getTransformValues(element);
+    expect(result).toEqual({ x: -50, y: -100 });
+  });
+
+  it("should parse translate3d transform with decimal values", () => {
+    const element = document.createElement("div");
+    element.style.transform = "translate3d(123.45px, 678.90px, 0px)";
+
+    const result = getTransformValues(element);
+    expect(result).toEqual({ x: 123.45, y: 678.9 });
+  });
+
+  it("should return { x: 0, y: 0 } when transform is empty", () => {
+    const element = document.createElement("div");
+
+    const result = getTransformValues(element);
+    expect(result).toEqual({ x: 0, y: 0 });
+  });
+
+  it("should return { x: 0, y: 0 } when transform doesn't match pattern", () => {
+    const element = document.createElement("div");
+    element.style.transform = "rotate(45deg)";
+
+    const result = getTransformValues(element);
+    expect(result).toEqual({ x: 0, y: 0 });
+  });
+
+  it("should handle transform with spaces", () => {
+    const element = document.createElement("div");
+    element.style.transform = "translate3d(100px, 200px, 0px)";
+
+    const result = getTransformValues(element);
+    expect(result).toEqual({ x: 100, y: 200 });
+  });
+
+  it("should handle non-zero z value", () => {
+    const element = document.createElement("div");
+    element.style.transform = "translate3d(100px, 200px, 50px)";
+
+    const result = getTransformValues(element);
+    expect(result).toEqual({ x: 100, y: 200 });
+  });
+});

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/getZoomValue.test.ts

@@ -0,0 +1,53 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getZoomValue } from "./getZoomValue";
+
+describe("getZoomValue", () => {
+  afterEach(() => {
+    // Reset CSS custom property
+    document.body.style.setProperty("--zoom", "");
+  });
+
+  it("should return 1 when --zoom is not set", () => {
+    document.body.style.removeProperty("--zoom");
+    const result = getZoomValue();
+    expect(result).toBe(1);
+  });
+
+  it("should return parsed float value from --zoom CSS variable", () => {
+    document.body.style.setProperty("--zoom", "1.5");
+    const result = getZoomValue();
+    expect(result).toBe(1.5);
+  });
+
+  it("should handle integer zoom values", () => {
+    document.body.style.setProperty("--zoom", "2");
+    const result = getZoomValue();
+    expect(result).toBe(2);
+  });
+
+  it("should handle decimal zoom values", () => {
+    document.body.style.setProperty("--zoom", "0.75");
+    const result = getZoomValue();
+    expect(result).toBe(0.75);
+  });
+
+  it("should trim whitespace from zoom value", () => {
+    // Note: CSS custom properties don't typically have whitespace, but we test the trim logic
+    // We'll mock getComputedStyle to return a value with whitespace
+    const mockGetComputedStyle = vi.spyOn(window, "getComputedStyle");
+    mockGetComputedStyle.mockReturnValue({
+      getPropertyValue: () => " 1.5 ",
+    } as unknown as CSSStyleDeclaration);
+
+    const result = getZoomValue();
+    expect(result).toBe(1.5);
+
+    mockGetComputedStyle.mockRestore();
+  });
+
+  it("should return 1 when --zoom is empty string", () => {
+    document.body.style.setProperty("--zoom", "");
+    const result = getZoomValue();
+    expect(result).toBe(1);
+  });
+});

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

@@ -0,0 +1,105 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getNodeToolsModule from "../../../helpers/getNodeTools";
+import type { NodeTools } from "../../../node-tools/types";
+import * as sendPostMessageModule from "../../../post-message/sendPostMessage";
+import { selectFirstViewportNode } from "./selectFirstViewportNode";
+
+vi.mock("../../../helpers/getNodeTools");
+vi.mock("../../../post-message/sendPostMessage");
+
+describe("selectFirstViewportNode", () => {
+  let viewportElement: HTMLElement;
+  let firstChild: HTMLElement;
+  let mockNodeTools: {
+    selectNode: ReturnType<typeof vi.fn>;
+    getSelectedNode: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    viewportElement = document.createElement("div");
+    firstChild = document.createElement("div");
+    firstChild.setAttribute("data-node-id", "test-node-1");
+    viewportElement.appendChild(firstChild);
+    document.body.appendChild(viewportElement);
+
+    mockNodeTools = {
+      selectNode: vi.fn(),
+      getSelectedNode: vi.fn(),
+    };
+
+    vi.mocked(getNodeToolsModule.getNodeTools).mockReturnValue(mockNodeTools as Partial<NodeTools> as NodeTools);
+    vi.mocked(sendPostMessageModule.sendPostMessage).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    document.body.removeChild(viewportElement);
+    vi.clearAllMocks();
+  });
+
+  it("should select first child node when nodeTools is available", () => {
+    mockNodeTools.getSelectedNode.mockReturnValue(null);
+
+    selectFirstViewportNode(viewportElement);
+
+    expect(mockNodeTools.selectNode).toHaveBeenCalledWith(firstChild);
+  });
+
+  it("should skip resize-handle element", () => {
+    const resizeHandle = document.createElement("div");
+    resizeHandle.classList.add("resize-handle");
+    viewportElement.insertBefore(resizeHandle, firstChild);
+
+    mockNodeTools.getSelectedNode.mockReturnValue(null);
+
+    selectFirstViewportNode(viewportElement);
+
+    expect(mockNodeTools.selectNode).toHaveBeenCalledWith(firstChild);
+    expect(mockNodeTools.selectNode).not.toHaveBeenCalledWith(resizeHandle);
+  });
+
+  it("should send postMessage when node was already selected", () => {
+    mockNodeTools.getSelectedNode.mockReturnValue(firstChild);
+
+    selectFirstViewportNode(viewportElement);
+
+    expect(mockNodeTools.selectNode).toHaveBeenCalledWith(firstChild);
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("selectedNodeChanged", "test-node-1");
+  });
+
+  it("should not send postMessage when node was not already selected", () => {
+    mockNodeTools.getSelectedNode.mockReturnValue(null);
+
+    selectFirstViewportNode(viewportElement);
+
+    expect(mockNodeTools.selectNode).toHaveBeenCalledWith(firstChild);
+    expect(sendPostMessageModule.sendPostMessage).not.toHaveBeenCalled();
+  });
+
+  it("should do nothing when nodeTools is not available", () => {
+    vi.mocked(getNodeToolsModule.getNodeTools).mockReturnValue(undefined);
+
+    selectFirstViewportNode(viewportElement);
+
+    expect(mockNodeTools.selectNode).not.toHaveBeenCalled();
+  });
+
+  it("should do nothing when there are no children", () => {
+    const emptyViewport = document.createElement("div");
+    document.body.appendChild(emptyViewport);
+
+    selectFirstViewportNode(emptyViewport);
+
+    expect(mockNodeTools.selectNode).not.toHaveBeenCalled();
+
+    document.body.removeChild(emptyViewport);
+  });
+
+  it("should handle null data-node-id attribute", () => {
+    firstChild.removeAttribute("data-node-id");
+    mockNodeTools.getSelectedNode.mockReturnValue(firstChild);
+
+    selectFirstViewportNode(viewportElement);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("selectedNodeChanged", null);
+  });
+});

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

@@ -0,0 +1,26 @@
+import { getNodeTools } from "../../../helpers/getNodeTools";
+import { sendPostMessage } from "../../../post-message/sendPostMessage";
+
+/**
+ * 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) {
+      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);
+      }
+    }
+  }
+};

package/src/lib/viewport/label/index.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/src/lib/viewport/label/isViewportDragging.test.ts

@@ -0,0 +1,35 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { isViewportDragging, setViewportDragging } from "./isViewportDragging";
+
+describe("isViewportDragging", () => {
+  beforeEach(() => {
+    // Reset dragging state before each test
+    setViewportDragging(false);
+  });
+
+  it("should return false initially", () => {
+    expect(isViewportDragging()).toBe(false);
+  });
+
+  it("should return true after setting dragging to true", () => {
+    setViewportDragging(true);
+    expect(isViewportDragging()).toBe(true);
+  });
+
+  it("should return false after setting dragging to false", () => {
+    setViewportDragging(true);
+    setViewportDragging(false);
+    expect(isViewportDragging()).toBe(false);
+  });
+
+  it("should maintain state across multiple calls", () => {
+    setViewportDragging(true);
+    expect(isViewportDragging()).toBe(true);
+    expect(isViewportDragging()).toBe(true);
+    expect(isViewportDragging()).toBe(true);
+
+    setViewportDragging(false);
+    expect(isViewportDragging()).toBe(false);
+    expect(isViewportDragging()).toBe(false);
+  });
+});

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

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

package/src/lib/viewport/label/refreshViewportLabel.test.ts

@@ -0,0 +1,105 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getScreenBoundsModule from "../../node-tools/highlight/helpers/getScreenBounds";
+import * as getViewportLabelOverlayModule from "./getViewportLabelOverlay";
+import { refreshViewportLabel } from "./refreshViewportLabel";
+import * as setupViewportDragModule from "./setupViewportDrag";
+
+vi.mock("./getViewportLabelOverlay");
+vi.mock("../../node-tools/highlight/helpers/getScreenBounds");
+vi.mock("./setupViewportDrag");
+
+describe("refreshViewportLabel", () => {
+  let overlay: SVGSVGElement;
+  let viewportElement: HTMLElement;
+
+  beforeEach(() => {
+    overlay = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    overlay.classList.add("viewport-labels-overlay");
+    document.body.appendChild(overlay);
+
+    viewportElement = document.createElement("div");
+    viewportElement.classList.add("viewport");
+    viewportElement.setAttribute("data-viewport-name", "test-viewport");
+    document.body.appendChild(viewportElement);
+
+    vi.mocked(getViewportLabelOverlayModule.getViewportLabelOverlay).mockReturnValue(overlay);
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 100,
+      left: 200,
+      width: 400,
+      height: 300,
+    });
+    vi.mocked(setupViewportDragModule.setupViewportDrag).mockReturnValue(() => {});
+  });
+
+  afterEach(() => {
+    document.body.removeChild(overlay);
+    document.body.removeChild(viewportElement);
+    vi.clearAllMocks();
+  });
+
+  it("should do nothing when viewport name is not set", () => {
+    viewportElement.removeAttribute("data-viewport-name");
+
+    refreshViewportLabel(viewportElement);
+
+    expect(getViewportLabelOverlayModule.getViewportLabelOverlay).not.toHaveBeenCalled();
+  });
+
+  it("should create new label group when it doesn't exist", () => {
+    refreshViewportLabel(viewportElement);
+
+    const group = overlay.querySelector(`[data-viewport-name="test-viewport"]`) as SVGGElement | null;
+    expect(group).not.toBeNull();
+    expect(group?.classList.contains("viewport-label-group")).toBe(true);
+  });
+
+  it("should create text element with correct attributes", () => {
+    refreshViewportLabel(viewportElement);
+
+    const group = overlay.querySelector(`[data-viewport-name="test-viewport"]`) as SVGGElement | null;
+    const text = group?.querySelector("text");
+    expect(text).not.toBeNull();
+    expect(text?.classList.contains("viewport-label-text")).toBe(true);
+    expect(text?.getAttribute("x")).toBe("0");
+    expect(text?.getAttribute("y")).toBe("-8");
+    expect(text?.getAttribute("vector-effect")).toBe("non-scaling-stroke");
+    expect(text?.getAttribute("pointer-events")).toBe("auto");
+    expect(text?.textContent).toBe("test-viewport");
+  });
+
+  it("should set up drag functionality when creating new label", () => {
+    refreshViewportLabel(viewportElement);
+
+    const group = overlay.querySelector(`[data-viewport-name="test-viewport"]`) as SVGGElement | null;
+    const text = group?.querySelector("text") as SVGTextElement | null;
+
+    expect(setupViewportDragModule.setupViewportDrag).toHaveBeenCalledWith(text, viewportElement, "test-viewport");
+  });
+
+  it("should update label position when group already exists", () => {
+    // Create existing group
+    const existingGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    existingGroup.setAttribute("data-viewport-name", "test-viewport");
+    existingGroup.setAttribute("transform", "translate(0, 0)");
+    overlay.appendChild(existingGroup);
+
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 150,
+      left: 250,
+      width: 400,
+      height: 300,
+    });
+
+    refreshViewportLabel(viewportElement);
+
+    expect(existingGroup.getAttribute("transform")).toBe("translate(250, 150)");
+    expect(setupViewportDragModule.setupViewportDrag).not.toHaveBeenCalled();
+  });
+
+  it("should use screen bounds to position label", () => {
+    refreshViewportLabel(viewportElement);
+
+    expect(getScreenBoundsModule.getScreenBounds).toHaveBeenCalledWith(viewportElement);
+  });
+});

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

@@ -0,0 +1,50 @@
+import { getScreenBounds } from "../../node-tools/highlight/helpers/getScreenBounds";
+import { getViewportLabelOverlay } from "./getViewportLabelOverlay";
+import { setupViewportDrag } from "./setupViewportDrag";
+
+/**
+ * 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 const refreshViewportLabel = (viewportElement: HTMLElement): void => {
+  const viewportName = viewportElement.getAttribute("data-viewport-name");
+
+  if (!viewportName) {
+    return;
+  }
+
+  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}"]`) as SVGGElement | null;
+
+  if (!group) {
+    // Create group for this viewport label
+    group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("viewport-label-group");
+    group.setAttribute("data-viewport-name", viewportName);
+
+    // 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 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})`);
+};
+

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

@@ -0,0 +1,107 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getViewportDimensionsModule from "../../helpers/getViewportDimensions";
+import * as getViewportLabelOverlayModule from "./getViewportLabelOverlay";
+import * as isViewportDraggingModule from "./isViewportDragging";
+import * as refreshViewportLabelModule from "./refreshViewportLabel";
+import { refreshViewportLabels } from "./refreshViewportLabels";
+
+vi.mock("./getViewportLabelOverlay");
+vi.mock("../../helpers/getViewportDimensions");
+vi.mock("./refreshViewportLabel");
+vi.mock("./isViewportDragging");
+
+describe("refreshViewportLabels", () => {
+  let overlay: SVGSVGElement;
+
+  beforeEach(() => {
+    overlay = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    overlay.classList.add("viewport-labels-overlay");
+    document.body.appendChild(overlay);
+
+    vi.mocked(getViewportLabelOverlayModule.getViewportLabelOverlay).mockReturnValue(overlay);
+    vi.mocked(getViewportDimensionsModule.getViewportDimensions).mockReturnValue({
+      width: 1920,
+      height: 1080,
+    });
+    vi.mocked(isViewportDraggingModule.isViewportDragging).mockReturnValue(false);
+    vi.mocked(refreshViewportLabelModule.refreshViewportLabel).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    document.body.removeChild(overlay);
+    vi.clearAllMocks();
+  });
+
+  it("should skip refresh when viewport is being dragged", () => {
+    vi.mocked(isViewportDraggingModule.isViewportDragging).mockReturnValue(true);
+
+    refreshViewportLabels();
+
+    expect(refreshViewportLabelModule.refreshViewportLabel).not.toHaveBeenCalled();
+  });
+
+  it("should update SVG dimensions", () => {
+    refreshViewportLabels();
+
+    expect(overlay.getAttribute("width")).toBe("1920");
+    expect(overlay.getAttribute("height")).toBe("1080");
+  });
+
+  it("should refresh labels for all viewports with data-viewport-name", () => {
+    const viewport1 = document.createElement("div");
+    viewport1.classList.add("viewport");
+    viewport1.setAttribute("data-viewport-name", "viewport-1");
+    document.body.appendChild(viewport1);
+
+    const viewport2 = document.createElement("div");
+    viewport2.classList.add("viewport");
+    viewport2.setAttribute("data-viewport-name", "viewport-2");
+    document.body.appendChild(viewport2);
+
+    const viewport3 = document.createElement("div");
+    viewport3.classList.add("viewport");
+    // No data-viewport-name
+    document.body.appendChild(viewport3);
+
+    refreshViewportLabels();
+
+    expect(refreshViewportLabelModule.refreshViewportLabel).toHaveBeenCalledTimes(2);
+    expect(refreshViewportLabelModule.refreshViewportLabel).toHaveBeenCalledWith(viewport1);
+    expect(refreshViewportLabelModule.refreshViewportLabel).toHaveBeenCalledWith(viewport2);
+
+    document.body.removeChild(viewport1);
+    document.body.removeChild(viewport2);
+    document.body.removeChild(viewport3);
+  });
+
+  it("should remove labels for viewports that no longer exist", () => {
+    const existingGroup1 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    existingGroup1.classList.add("viewport-label-group");
+    existingGroup1.setAttribute("data-viewport-name", "viewport-1");
+    overlay.appendChild(existingGroup1);
+
+    const existingGroup2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    existingGroup2.classList.add("viewport-label-group");
+    existingGroup2.setAttribute("data-viewport-name", "viewport-2");
+    overlay.appendChild(existingGroup2);
+
+    // Only viewport-1 exists in DOM
+    const viewport1 = document.createElement("div");
+    viewport1.classList.add("viewport");
+    viewport1.setAttribute("data-viewport-name", "viewport-1");
+    document.body.appendChild(viewport1);
+
+    refreshViewportLabels();
+
+    expect(overlay.querySelector(`[data-viewport-name="viewport-1"]`)).not.toBeNull();
+    expect(overlay.querySelector(`[data-viewport-name="viewport-2"]`)).toBeNull();
+
+    document.body.removeChild(viewport1);
+  });
+
+  it("should handle empty viewport list", () => {
+    refreshViewportLabels();
+
+    expect(refreshViewportLabelModule.refreshViewportLabel).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,69 +1,36 @@
-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>();
+import { getViewportDimensions } from "../../helpers/getViewportDimensions";
+import { getViewportLabelOverlay } from "./getViewportLabelOverlay";
+import { isViewportDragging } from "./isViewportDragging";
+import { refreshViewportLabel } from "./refreshViewportLabel";
 
 export const refreshViewportLabels = (): void => {
   // Skip refresh if a viewport label is being dragged
-  if (isViewportLabelDragging()) {
+  if (isViewportDragging()) {
     return;
   }
 
-  const overlay = getViewportLabelsOverlay();
+  const overlay = getViewportLabelOverlay();
 
-  // Update SVG dimensions to match current viewport
-  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  // 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
+  // Find all viewports with names and refresh each label
   const viewports = document.querySelectorAll(".viewport[data-viewport-name]");
-
-  // Clean up existing drag listeners
-  dragCleanupFunctions.forEach((cleanup) => {
-    cleanup();
+  viewports.forEach((viewport) => {
+    refreshViewportLabel(viewport as HTMLElement);
   });
-  dragCleanupFunctions.clear();
 
-  // Remove existing label groups
+  // Remove labels for viewports that no longer exist
   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);
+    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();
+      }
+    }
   });
 };