@node-edit-utils/core 2.3.2 → 2.3.4

package/src/lib/node-tools/highlight/highlightNode.test.ts

@@ -0,0 +1,213 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerOrBodyModule from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import * as toggleClassModule from "@/lib/helpers/toggleClass";
+import * as isComponentInstanceModule from "../select/helpers/isComponentInstance";
+import * as createHighlightFrameModule from "./createHighlightFrame";
+import * as createToolsContainerModule from "./createToolsContainer";
+import * as getHighlightFrameElementModule from "./helpers/getHighlightFrameElement";
+import * as getScreenBoundsModule from "./helpers/getScreenBounds";
+import { highlightNode } from "./highlightNode";
+
+vi.mock("@/lib/canvas/helpers/getCanvasContainerOrBody");
+vi.mock("@/lib/helpers/toggleClass");
+vi.mock("../select/helpers/isComponentInstance");
+vi.mock("./createHighlightFrame");
+vi.mock("./createToolsContainer");
+vi.mock("./helpers/getHighlightFrameElement");
+vi.mock("./helpers/getScreenBounds");
+
+describe("highlightNode", () => {
+  let node: HTMLElement;
+  let container: HTMLElement;
+  let existingFrame: SVGSVGElement;
+  let existingToolsWrapper: HTMLElement;
+  let newFrame: SVGSVGElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node");
+    document.body.appendChild(node);
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+
+    existingFrame = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    existingFrame.classList.add("highlight-frame-overlay");
+    container.appendChild(existingFrame);
+
+    existingToolsWrapper = document.createElement("div");
+    existingToolsWrapper.classList.add("highlight-frame-tools-wrapper");
+    container.appendChild(existingToolsWrapper);
+
+    newFrame = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    newFrame.classList.add("highlight-frame-overlay");
+
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+    vi.mocked(getHighlightFrameElementModule.getHighlightFrameElement).mockReturnValue(existingFrame);
+    vi.mocked(isComponentInstanceModule.isComponentInstance).mockReturnValue(false);
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 100,
+      left: 200,
+      width: 300,
+      height: 400,
+    });
+    vi.mocked(createHighlightFrameModule.createHighlightFrame).mockReturnValue(newFrame);
+    vi.mocked(toggleClassModule.toggleClass).mockImplementation(() => {});
+    vi.mocked(createToolsContainerModule.createToolsContainer).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    if (document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should do nothing when node is null", () => {
+    highlightNode(null);
+
+    expect(createHighlightFrameModule.createHighlightFrame).not.toHaveBeenCalled();
+  });
+
+  it("should remove existing highlight frame", () => {
+    highlightNode(node);
+
+    expect(existingFrame.parentNode).toBeNull();
+  });
+
+  it("should remove existing tools wrapper", () => {
+    highlightNode(node);
+
+    expect(existingToolsWrapper.parentNode).toBeNull();
+  });
+
+  it("should create new highlight frame", () => {
+    highlightNode(node);
+
+    expect(createHighlightFrameModule.createHighlightFrame).toHaveBeenCalledWith(node, false, false);
+  });
+
+  it("should create highlight frame with instance flag", () => {
+    vi.mocked(isComponentInstanceModule.isComponentInstance).mockReturnValue(true);
+
+    highlightNode(node);
+
+    expect(createHighlightFrameModule.createHighlightFrame).toHaveBeenCalledWith(node, true, false);
+  });
+
+  it("should create highlight frame with text edit flag", () => {
+    node.contentEditable = "true";
+
+    highlightNode(node);
+
+    expect(createHighlightFrameModule.createHighlightFrame).toHaveBeenCalledWith(node, false, true);
+  });
+
+  it("should add is-editable class when node is contentEditable", () => {
+    node.contentEditable = "true";
+
+    highlightNode(node);
+
+    expect(newFrame.classList.contains("is-editable")).toBe(true);
+  });
+
+  it("should create tools wrapper with correct styles", () => {
+    highlightNode(node);
+
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
+    expect(toolsWrapper).not.toBeNull();
+    expect((toolsWrapper as HTMLElement).style.position).toBe("absolute");
+    expect((toolsWrapper as HTMLElement).style.transform).toBe("translate(200px, 500px)");
+    expect((toolsWrapper as HTMLElement).style.transformOrigin).toBe("left center");
+    expect((toolsWrapper as HTMLElement).style.pointerEvents).toBe("none");
+    expect((toolsWrapper as HTMLElement).style.zIndex).toBe("500");
+  });
+
+  it("should toggle classes on tools wrapper", () => {
+    highlightNode(node);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalled();
+  });
+
+  it("should create tools container", () => {
+    highlightNode(node);
+
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
+    expect(createToolsContainerModule.createToolsContainer).toHaveBeenCalledWith(
+      node,
+      toolsWrapper as HTMLElement,
+      false,
+      false
+    );
+  });
+
+  it("should append tools wrapper to container", () => {
+    highlightNode(node);
+
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
+    expect(toolsWrapper?.parentNode).toBe(container);
+  });
+
+  it("should handle instance node", () => {
+    vi.mocked(isComponentInstanceModule.isComponentInstance).mockReturnValue(true);
+
+    highlightNode(node);
+
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
+    expect(createToolsContainerModule.createToolsContainer).toHaveBeenCalledWith(
+      node,
+      toolsWrapper as HTMLElement,
+      true,
+      false
+    );
+  });
+
+  it("should handle text edit node", () => {
+    node.contentEditable = "true";
+
+    highlightNode(node);
+
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
+    expect(createToolsContainerModule.createToolsContainer).toHaveBeenCalledWith(
+      node,
+      toolsWrapper as HTMLElement,
+      false,
+      true
+    );
+  });
+
+  it("should calculate bottomY correctly", () => {
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 50,
+      left: 100,
+      width: 200,
+      height: 150,
+    });
+
+    highlightNode(node);
+
+    const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
+    expect((toolsWrapper as HTMLElement).style.transform).toBe("translate(100px, 200px)");
+  });
+
+  it("should work when no existing frame exists", () => {
+    vi.mocked(getHighlightFrameElementModule.getHighlightFrameElement).mockReturnValue(null);
+    container.removeChild(existingFrame);
+
+    expect(() => {
+      highlightNode(node);
+    }).not.toThrow();
+  });
+
+  it("should work when no existing tools wrapper exists", () => {
+    container.removeChild(existingToolsWrapper);
+
+    expect(() => {
+      highlightNode(node);
+    }).not.toThrow();
+  });
+});
+

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

@@ -1,4 +1,5 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import { toggleClass } from "@/lib/helpers/toggleClass";
 import { isComponentInstance } from "../select/helpers/isComponentInstance";
 import { createHighlightFrame } from "./createHighlightFrame";
 import { createToolsContainer } from "./createToolsContainer";
@@ -9,9 +10,8 @@ export const highlightNode = (node: HTMLElement | null): void => {
   if (!node) return;
 
   const existingHighlightFrame = getHighlightFrameElement();
-  const canvasContainer = getCanvasContainer();
-  const existingToolsWrapper =
-    canvasContainer?.querySelector(".highlight-frame-tools-wrapper") || document.body.querySelector(".highlight-frame-tools-wrapper");
+  const container = getCanvasContainerOrBody();
+  const existingToolsWrapper = container.querySelector(".highlight-frame-tools-wrapper");
 
   if (existingHighlightFrame) {
     existingHighlightFrame.remove();
@@ -35,12 +35,8 @@ export const highlightNode = (node: HTMLElement | null): void => {
   // Create tools wrapper using CSS transform (GPU-accelerated)
   const toolsWrapper = document.createElement("div");
   toolsWrapper.classList.add("highlight-frame-tools-wrapper");
-  if (isInstance) {
-    toolsWrapper.classList.add("is-instance");
-  }
-  if (isTextEdit) {
-    toolsWrapper.classList.add("is-text-edit");
-  }
+  toggleClass(toolsWrapper, "is-instance", isInstance);
+  toggleClass(toolsWrapper, "is-text-edit", isTextEdit);
   toolsWrapper.style.position = "absolute";
   toolsWrapper.style.transform = `translate(${left}px, ${bottomY}px)`;
   toolsWrapper.style.transformOrigin = "left center";
@@ -48,9 +44,5 @@ export const highlightNode = (node: HTMLElement | null): void => {
   toolsWrapper.style.zIndex = "500";
 
   createToolsContainer(node, toolsWrapper, isInstance, isTextEdit);
-  if (canvasContainer) {
-    canvasContainer.appendChild(toolsWrapper);
-  } else {
-    document.body.appendChild(toolsWrapper);
-  }
+  container.appendChild(toolsWrapper);
 };

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

@@ -0,0 +1,323 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerOrBodyModule from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import * as getCanvasWindowValueModule from "@/lib/canvas/helpers/getCanvasWindowValue";
+import * as getViewportDimensionsModule from "@/lib/helpers/getViewportDimensions";
+import * as toggleClassModule from "@/lib/helpers/toggleClass";
+import * as isComponentInstanceModule from "../select/helpers/isComponentInstance";
+import * as getHighlightFrameElementModule from "./helpers/getHighlightFrameElement";
+import * as getScreenBoundsModule from "./helpers/getScreenBounds";
+import { refreshHighlightFrame } from "./refreshHighlightFrame";
+
+vi.mock("@/lib/canvas/helpers/getCanvasContainerOrBody");
+vi.mock("@/lib/canvas/helpers/getCanvasWindowValue");
+vi.mock("@/lib/helpers/getViewportDimensions");
+vi.mock("@/lib/helpers/toggleClass");
+vi.mock("../select/helpers/isComponentInstance");
+vi.mock("./helpers/getHighlightFrameElement");
+vi.mock("./helpers/getScreenBounds");
+
+describe("refreshHighlightFrame", () => {
+  let node: HTMLElement;
+  let nodeProvider: HTMLElement;
+  let container: HTMLElement;
+  let frame: SVGSVGElement;
+  let group: SVGGElement;
+  let rect: SVGRectElement;
+  let toolsWrapper: HTMLElement;
+  let nodeTools: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node");
+    document.body.appendChild(node);
+
+    nodeProvider = document.createElement("div");
+    document.body.appendChild(nodeProvider);
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+
+    frame = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    frame.classList.add("highlight-frame-overlay");
+    container.appendChild(frame);
+
+    group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("highlight-frame-group");
+    frame.appendChild(group);
+
+    rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    group.appendChild(rect);
+
+    toolsWrapper = document.createElement("div");
+    toolsWrapper.classList.add("highlight-frame-tools-wrapper");
+    container.appendChild(toolsWrapper);
+
+    nodeTools = document.createElement("div");
+    nodeTools.classList.add("node-tools");
+    toolsWrapper.appendChild(nodeTools);
+
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+    vi.mocked(getHighlightFrameElementModule.getHighlightFrameElement).mockReturnValue(frame);
+    vi.mocked(getViewportDimensionsModule.getViewportDimensions).mockReturnValue({
+      width: 1920,
+      height: 1080,
+    });
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 100,
+      left: 200,
+      width: 300,
+      height: 400,
+    });
+    vi.mocked(getCanvasWindowValueModule.getCanvasWindowValue).mockReturnValue(1);
+    vi.mocked(isComponentInstanceModule.isComponentInstance).mockReturnValue(false);
+    vi.mocked(toggleClassModule.toggleClass).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    if (document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should do nothing when frame does not exist", () => {
+    vi.mocked(getHighlightFrameElementModule.getHighlightFrameElement).mockReturnValue(null);
+
+    expect(() => {
+      refreshHighlightFrame(node, nodeProvider);
+    }).not.toThrow();
+  });
+
+  it("should update SVG dimensions", () => {
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(frame.getAttribute("width")).toBe("1920");
+    expect(frame.getAttribute("height")).toBe("1080");
+  });
+
+  it("should toggle is-instance class", () => {
+    vi.mocked(isComponentInstanceModule.isComponentInstance).mockReturnValue(true);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(frame, "is-instance", true);
+  });
+
+  it("should toggle is-text-edit class", () => {
+    node.contentEditable = "true";
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(frame, "is-text-edit", true);
+  });
+
+  it("should update group transform", () => {
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(group.getAttribute("transform")).toBe("translate(200, 100)");
+  });
+
+  it("should update rect dimensions", () => {
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(rect.getAttribute("width")).toBe("300");
+    expect(rect.getAttribute("height")).toBe("400");
+  });
+
+  it("should ensure minimum width of 3", () => {
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 100,
+      left: 200,
+      width: 1,
+      height: 400,
+    });
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(rect.getAttribute("width")).toBe("3");
+  });
+
+  it("should apply instance color when isInstance is true", () => {
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = vi.fn().mockReturnValue({
+      getPropertyValue: vi.fn((prop: string) => {
+        if (prop === "--component-color") return "rgb(255, 0, 0)";
+        return "";
+      }),
+    } as unknown as CSSStyleDeclaration);
+
+    vi.mocked(isComponentInstanceModule.isComponentInstance).mockReturnValue(true);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(rect.getAttribute("stroke")).toBe("rgb(255, 0, 0)");
+
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  it("should apply text edit color when isTextEdit is true", () => {
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = vi.fn().mockReturnValue({
+      getPropertyValue: vi.fn((prop: string) => {
+        if (prop === "--text-edit-color") return "rgb(0, 255, 0)";
+        return "";
+      }),
+    } as unknown as CSSStyleDeclaration);
+
+    node.contentEditable = "true";
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(rect.getAttribute("stroke")).toBe("rgb(0, 255, 0)");
+
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  it("should remove stroke when neither flag is true", () => {
+    rect.setAttribute("stroke", "rgb(255, 0, 0)");
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(rect.getAttribute("stroke")).toBeNull();
+  });
+
+  it("should update tools wrapper transform", () => {
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(toolsWrapper.style.transform).toBe("translate(200px, 500px)");
+  });
+
+  it("should toggle classes on tools wrapper", () => {
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(toolsWrapper, "is-instance", false);
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(toolsWrapper, "is-text-edit", false);
+  });
+
+  it("should toggle classes on node tools", () => {
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(nodeTools, "is-instance", false);
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(nodeTools, "is-text-edit", false);
+  });
+
+  it("should update tool opacity when zoom <= 10", () => {
+    vi.mocked(getCanvasWindowValueModule.getCanvasWindowValue).mockReturnValue(5);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(nodeProvider.style.getPropertyValue("--tool-opacity")).toBe("1");
+  });
+
+  it("should set tool opacity to 0 when zoom > 10", () => {
+    vi.mocked(getCanvasWindowValueModule.getCanvasWindowValue).mockReturnValue(15);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(nodeProvider.style.getPropertyValue("--tool-opacity")).toBe("0");
+  });
+
+  it("should use default zoom of 1 when zoom is undefined", () => {
+    vi.mocked(getCanvasWindowValueModule.getCanvasWindowValue).mockReturnValue(undefined);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(nodeProvider.style.getPropertyValue("--tool-opacity")).toBe("1");
+  });
+
+  it("should use custom canvas name", () => {
+    refreshHighlightFrame(node, nodeProvider, "custom-canvas");
+
+    expect(getCanvasWindowValueModule.getCanvasWindowValue).toHaveBeenCalledWith(["zoom", "current"], "custom-canvas");
+  });
+
+  it("should update corner handle positions", () => {
+    const topLeft = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    topLeft.classList.add("handle-top-left");
+    group.appendChild(topLeft);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(topLeft.getAttribute("x")).toBe("-3");
+    expect(topLeft.getAttribute("y")).toBe("-3");
+  });
+
+  it("should update all corner handles", () => {
+    const topLeft = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    topLeft.classList.add("handle-top-left");
+    const topRight = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    topRight.classList.add("handle-top-right");
+    const bottomRight = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    bottomRight.classList.add("handle-bottom-right");
+    const bottomLeft = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    bottomLeft.classList.add("handle-bottom-left");
+    group.appendChild(topLeft);
+    group.appendChild(topRight);
+    group.appendChild(bottomRight);
+    group.appendChild(bottomLeft);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(topLeft.getAttribute("x")).toBe("-3");
+    expect(topLeft.getAttribute("y")).toBe("-3");
+    expect(topRight.getAttribute("x")).toBe("297");
+    expect(topRight.getAttribute("y")).toBe("-3");
+    expect(bottomRight.getAttribute("x")).toBe("297");
+    expect(bottomRight.getAttribute("y")).toBe("397");
+    expect(bottomLeft.getAttribute("x")).toBe("-3");
+    expect(bottomLeft.getAttribute("y")).toBe("397");
+  });
+
+  it("should update handle colors for instance", () => {
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = vi.fn().mockReturnValue({
+      getPropertyValue: vi.fn((prop: string) => {
+        if (prop === "--component-color") return "rgb(255, 0, 0)";
+        return "";
+      }),
+    } as unknown as CSSStyleDeclaration);
+
+    const handle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    handle.classList.add("handle-top-left");
+    group.appendChild(handle);
+
+    vi.mocked(isComponentInstanceModule.isComponentInstance).mockReturnValue(true);
+
+    refreshHighlightFrame(node, nodeProvider);
+
+    expect(handle.getAttribute("stroke")).toBe("rgb(255, 0, 0)");
+
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  it("should not update when group does not exist", () => {
+    group.remove();
+
+    expect(() => {
+      refreshHighlightFrame(node, nodeProvider);
+    }).not.toThrow();
+  });
+
+  it("should not update when rect does not exist", () => {
+    rect.remove();
+
+    expect(() => {
+      refreshHighlightFrame(node, nodeProvider);
+    }).not.toThrow();
+  });
+
+  it("should not update tools wrapper when it does not exist", () => {
+    container.removeChild(toolsWrapper);
+
+    expect(() => {
+      refreshHighlightFrame(node, nodeProvider);
+    }).not.toThrow();
+  });
+});
+

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