@node-edit-utils/core 2.3.3 → 2.3.4

package/src/lib/viewport/createViewport.test.ts

@@ -0,0 +1,267 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerModule from "../canvas/helpers/getCanvasContainer";
+import type { DragState } from "../helpers/createDragHandler";
+import * as createDragHandlerModule from "../helpers/createDragHandler";
+import * as getNodeProviderModule from "../helpers/getNodeProvider";
+import * as getNodeToolsModule from "../helpers/getNodeTools";
+import * as refreshHighlightFrameModule from "../node-tools/highlight/refreshHighlightFrame";
+import { DEFAULT_WIDTH } from "./constants";
+import { createViewport } from "./createViewport";
+import * as refreshViewportLabelModule from "./label/refreshViewportLabel";
+import * as removeViewportLabelModule from "./label/removeViewportLabel";
+import * as createResizeHandleModule from "./resize/createResizeHandle";
+import * as createResizePresetsModule from "./resize/createResizePresets";
+import * as calcWidthModule from "./width/calcWidth";
+import * as updateWidthModule from "./width/updateWidth";
+
+vi.mock("../canvas/helpers/getCanvasContainer");
+vi.mock("../helpers/createDragHandler");
+vi.mock("../helpers/getNodeProvider");
+vi.mock("../helpers/getNodeTools");
+vi.mock("../node-tools/highlight/refreshHighlightFrame");
+vi.mock("./label/refreshViewportLabel");
+vi.mock("./label/removeViewportLabel");
+vi.mock("./resize/createResizeHandle");
+vi.mock("./resize/createResizePresets");
+vi.mock("./width/calcWidth");
+vi.mock("./width/updateWidth");
+
+describe("createViewport", () => {
+  let container: HTMLElement;
+  let canvas: HTMLElement;
+  let resizeHandle: HTMLElement;
+  let mockDragCleanup: ReturnType<typeof vi.fn>;
+  let mockNodeTools: {
+    getSelectedNode: ReturnType<typeof vi.fn>;
+  };
+  let mockNodeProvider: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    container.classList.add("viewport");
+    document.body.appendChild(container);
+
+    canvas = document.createElement("div");
+    canvas.id = "canvas";
+    document.body.appendChild(canvas);
+
+    resizeHandle = document.createElement("div");
+    resizeHandle.classList.add("resize-handle");
+
+    mockDragCleanup = vi.fn();
+    mockNodeTools = {
+      getSelectedNode: vi.fn().mockReturnValue(null),
+    };
+    mockNodeProvider = document.createElement("div");
+
+    vi.mocked(getCanvasContainerModule.getCanvasContainer).mockReturnValue(canvas);
+    vi.mocked(createDragHandlerModule.createDragHandler).mockReturnValue(mockDragCleanup);
+    vi.mocked(getNodeProviderModule.getNodeProvider).mockReturnValue(mockNodeProvider);
+    vi.mocked(getNodeToolsModule.getNodeTools).mockReturnValue(
+      mockNodeTools as unknown as ReturnType<typeof getNodeToolsModule.getNodeTools>
+    );
+    vi.mocked(refreshHighlightFrameModule.refreshHighlightFrame).mockImplementation(() => {});
+    vi.mocked(refreshViewportLabelModule.refreshViewportLabel).mockImplementation(() => {});
+    vi.mocked(removeViewportLabelModule.removeViewportLabel).mockImplementation(() => {});
+    vi.mocked(createResizeHandleModule.createResizeHandle).mockReturnValue(resizeHandle);
+    vi.mocked(createResizePresetsModule.createResizePresets).mockReturnValue(document.createElement("div"));
+    vi.mocked(calcWidthModule.calcWidth).mockReturnValue(500);
+    vi.mocked(updateWidthModule.updateWidth).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(canvas);
+    vi.clearAllMocks();
+  });
+
+  it("should create viewport with default width", () => {
+    const viewport = createViewport(container);
+
+    expect(container.style.getPropertyValue("--container-width")).toBe(`${DEFAULT_WIDTH}px`);
+    expect(viewport).toHaveProperty("setWidth");
+    expect(viewport).toHaveProperty("cleanup");
+  });
+
+  it("should create viewport with initial width", () => {
+    const initialWidth = 600;
+    createViewport(container, initialWidth);
+
+    expect(container.style.getPropertyValue("--container-width")).toBe(`${initialWidth}px`);
+  });
+
+  it("should remove existing resize handle before creating new one", () => {
+    const existingHandle = document.createElement("div");
+    existingHandle.classList.add("resize-handle");
+    container.appendChild(existingHandle);
+
+    createViewport(container);
+
+    expect(container.querySelector(".resize-handle")).not.toBe(existingHandle);
+  });
+
+  it("should create resize handle", () => {
+    createViewport(container);
+
+    expect(createResizeHandleModule.createResizeHandle).toHaveBeenCalledWith(container);
+  });
+
+  it("should create resize presets", () => {
+    createViewport(container);
+
+    expect(createResizePresetsModule.createResizePresets).toHaveBeenCalledWith(resizeHandle, container, updateWidthModule.updateWidth);
+  });
+
+  it("should refresh viewport label on creation", () => {
+    createViewport(container);
+
+    expect(refreshViewportLabelModule.refreshViewportLabel).toHaveBeenCalledWith(container);
+  });
+
+  it("should set cursor to ew-resize during drag", () => {
+    let onDragCallback: ((event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onDragCallback = callbacks.onDrag;
+      return mockDragCleanup;
+    });
+
+    createViewport(container);
+
+    const mockEvent = new MouseEvent("mousemove");
+    const mockState: DragState & { deltaX: number; deltaY: number } = {
+      isDragging: true,
+      hasDragged: true,
+      startX: 0,
+      startY: 0,
+      deltaX: 0,
+      deltaY: 0,
+    };
+    onDragCallback?.(mockEvent, mockState);
+
+    expect(canvas.style.cursor).toBe("ew-resize");
+  });
+
+  it("should calculate and update width during drag", () => {
+    let onDragCallback: ((event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onDragCallback = callbacks.onDrag;
+      return mockDragCleanup;
+    });
+
+    createViewport(container);
+
+    const mockEvent = new MouseEvent("mousemove");
+    const mockState: DragState & { deltaX: number; deltaY: number } = {
+      isDragging: true,
+      hasDragged: true,
+      startX: 0,
+      startY: 0,
+      deltaX: 0,
+      deltaY: 0,
+    };
+    onDragCallback?.(mockEvent, mockState);
+
+    expect(calcWidthModule.calcWidth).toHaveBeenCalled();
+    expect(updateWidthModule.updateWidth).toHaveBeenCalled();
+  });
+
+  it("should reset cursor to default on drag stop", () => {
+    let onStopCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStopCallback = callbacks.onStop;
+      return mockDragCleanup;
+    });
+
+    createViewport(container);
+    canvas.style.cursor = "ew-resize";
+
+    const mockEvent = new MouseEvent("mouseup");
+    const mockState: DragState = { isDragging: false, hasDragged: false, startX: 0, startY: 0 };
+    onStopCallback?.(mockEvent, mockState);
+
+    expect(canvas.style.cursor).toBe("default");
+  });
+
+  it("should reset cursor to default on drag cancel", () => {
+    let onCancelCallback: ((state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onCancelCallback = callbacks.onCancel;
+      return mockDragCleanup;
+    });
+
+    createViewport(container);
+    canvas.style.cursor = "ew-resize";
+
+    const mockState: DragState = { isDragging: false, hasDragged: false, startX: 0, startY: 0 };
+    onCancelCallback?.(mockState);
+
+    expect(canvas.style.cursor).toBe("default");
+  });
+
+  it("should handle mouseleave when leaving window", () => {
+    createViewport(container);
+    canvas.style.cursor = "ew-resize";
+
+    const event = new MouseEvent("mouseleave", {
+      bubbles: true,
+      relatedTarget: null,
+    });
+    Object.defineProperty(event, "target", { value: document, writable: false });
+    document.dispatchEvent(event);
+
+    expect(canvas.style.cursor).toBe("default");
+  });
+
+  it("should cleanup all listeners and remove handle on cleanup", () => {
+    const viewport = createViewport(container);
+
+    viewport.cleanup();
+
+    expect(mockDragCleanup).toHaveBeenCalled();
+    expect(removeViewportLabelModule.removeViewportLabel).toHaveBeenCalledWith(container);
+    expect(container.querySelector(".resize-handle")).toBeNull();
+  });
+
+  it("should update width via setWidth", () => {
+    const viewport = createViewport(container);
+    const newWidth = 800;
+
+    viewport.setWidth(newWidth);
+
+    expect(updateWidthModule.updateWidth).toHaveBeenCalledWith(container, newWidth);
+    expect(refreshViewportLabelModule.refreshViewportLabel).toHaveBeenCalledWith(container);
+  });
+
+  it("should refresh highlight frame when node is selected and setWidth is called", () => {
+    const selectedNode = document.createElement("div");
+    mockNodeTools.getSelectedNode.mockReturnValue(selectedNode);
+
+    const viewport = createViewport(container);
+    viewport.setWidth(800);
+
+    expect(refreshHighlightFrameModule.refreshHighlightFrame).toHaveBeenCalledWith(selectedNode, mockNodeProvider);
+  });
+
+  it("should not refresh highlight frame when no node is selected", () => {
+    mockNodeTools.getSelectedNode.mockReturnValue(null);
+
+    const viewport = createViewport(container);
+    viewport.setWidth(800);
+
+    expect(refreshHighlightFrameModule.refreshHighlightFrame).not.toHaveBeenCalled();
+  });
+
+  it("should handle cleanup when canvas is null", () => {
+    vi.mocked(getCanvasContainerModule.getCanvasContainer).mockReturnValue(null);
+
+    const viewport = createViewport(container);
+
+    expect(() => {
+      viewport.cleanup();
+    }).not.toThrow();
+  });
+});

package/src/lib/viewport/createViewport.ts

@@ -4,7 +4,8 @@ import { getNodeProvider } from "../helpers/getNodeProvider";
 import { getNodeTools } from "../helpers/getNodeTools";
 import { refreshHighlightFrame } from "../node-tools/highlight/refreshHighlightFrame";
 import { DEFAULT_WIDTH } from "./constants";
-import { refreshViewportLabels } from "./label/refreshViewportLabels";
+import { refreshViewportLabel } from "./label/refreshViewportLabel";
+import { removeViewportLabel } from "./label/removeViewportLabel";
 import { createResizeHandle } from "./resize/createResizeHandle";
 import { createResizePresets } from "./resize/createResizePresets";
 import type { Viewport } from "./types";
@@ -69,20 +70,22 @@ export const createViewport = (container: HTMLElement, initialWidth?: number): V
 
   document.addEventListener("mouseleave", handleMouseLeave);
 
-  refreshViewportLabels();
+  // Create/refresh the label for this viewport
+  refreshViewportLabel(container);
 
   const cleanup = (): void => {
     removeDragListeners();
     document.removeEventListener("mouseleave", handleMouseLeave);
     resizeHandle.remove();
 
-    refreshViewportLabels();
+    // Remove the label for this viewport
+    removeViewportLabel(container);
   };
 
   return {
     setWidth: (width: number): void => {
       updateWidth(container, width);
-      refreshViewportLabels();
+      refreshViewportLabel(container);
 
       const nodeTools = getNodeTools();
       const selectedNode = nodeTools?.getSelectedNode?.();

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

@@ -0,0 +1,103 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { setupEventListener } from "./setupEventListener";
+
+describe("setupEventListener", () => {
+  let resizeHandle: HTMLElement;
+  let startResize: ReturnType<typeof vi.fn>;
+  let handleResize: ReturnType<typeof vi.fn>;
+  let stopResize: ReturnType<typeof vi.fn>;
+  let blurResize: ReturnType<typeof vi.fn>;
+  let cleanup: () => void;
+
+  beforeEach(() => {
+    resizeHandle = document.createElement("div");
+    document.body.appendChild(resizeHandle);
+
+    startResize = vi.fn();
+    handleResize = vi.fn();
+    stopResize = vi.fn();
+    blurResize = vi.fn();
+
+    cleanup = setupEventListener(resizeHandle, startResize, handleResize, stopResize, blurResize);
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.removeChild(resizeHandle);
+    vi.clearAllMocks();
+  });
+
+  it("should call startResize on mousedown", () => {
+    const event = new MouseEvent("mousedown", { bubbles: true });
+    resizeHandle.dispatchEvent(event);
+
+    expect(startResize).toHaveBeenCalledTimes(1);
+    expect(startResize).toHaveBeenCalledWith(expect.any(MouseEvent));
+  });
+
+  it("should call handleResize on mousemove", () => {
+    const event = new MouseEvent("mousemove", { bubbles: true });
+    document.dispatchEvent(event);
+
+    expect(handleResize).toHaveBeenCalledTimes(1);
+    expect(handleResize).toHaveBeenCalledWith(expect.any(MouseEvent));
+  });
+
+  it("should call stopResize on mouseup", () => {
+    const event = new MouseEvent("mouseup", { bubbles: true });
+    document.dispatchEvent(event);
+
+    expect(stopResize).toHaveBeenCalledTimes(1);
+    expect(stopResize).toHaveBeenCalledWith(expect.any(MouseEvent));
+  });
+
+  it("should call blurResize on window blur", () => {
+    const event = new Event("blur");
+    window.dispatchEvent(event);
+
+    expect(blurResize).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call blurResize on mouseleave when leaving window", () => {
+    const event = new MouseEvent("mouseleave", {
+      bubbles: true,
+      relatedTarget: null,
+    });
+    Object.defineProperty(event, "target", { value: document, writable: false });
+    document.dispatchEvent(event);
+
+    expect(blurResize).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call blurResize on mouseleave when relatedTarget exists", () => {
+    const relatedTarget = document.createElement("div");
+    const event = new MouseEvent("mouseleave", {
+      bubbles: true,
+      relatedTarget,
+    });
+    Object.defineProperty(event, "target", { value: document, writable: false });
+    document.dispatchEvent(event);
+
+    expect(blurResize).not.toHaveBeenCalled();
+  });
+
+  it("should remove all event listeners when cleanup is called", () => {
+    cleanup();
+
+    const mousedownEvent = new MouseEvent("mousedown", { bubbles: true });
+    resizeHandle.dispatchEvent(mousedownEvent);
+    expect(startResize).not.toHaveBeenCalled();
+
+    const mousemoveEvent = new MouseEvent("mousemove", { bubbles: true });
+    document.dispatchEvent(mousemoveEvent);
+    expect(handleResize).not.toHaveBeenCalled();
+
+    const mouseupEvent = new MouseEvent("mouseup", { bubbles: true });
+    document.dispatchEvent(mouseupEvent);
+    expect(stopResize).not.toHaveBeenCalled();
+
+    const blurEvent = new Event("blur");
+    window.dispatchEvent(blurEvent);
+    expect(blurResize).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,77 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerOrBodyModule from "../../canvas/helpers/getCanvasContainerOrBody";
+import * as getViewportDimensionsModule from "../../helpers/getViewportDimensions";
+import { getViewportLabelOverlay } from "./getViewportLabelOverlay";
+
+vi.mock("../../canvas/helpers/getCanvasContainerOrBody");
+vi.mock("../../helpers/getViewportDimensions");
+
+describe("getViewportLabelOverlay", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+    vi.mocked(getViewportDimensionsModule.getViewportDimensions).mockReturnValue({
+      width: 1920,
+      height: 1080,
+    });
+  });
+
+  afterEach(() => {
+    // Clean up any overlays
+    const overlays = container.querySelectorAll(".viewport-labels-overlay");
+    overlays.forEach((overlay) => {
+      overlay.remove();
+    });
+    document.body.removeChild(container);
+    vi.clearAllMocks();
+  });
+
+  it("should create a new SVG overlay if it doesn't exist", () => {
+    const overlay = getViewportLabelOverlay();
+
+    expect(overlay).toBeInstanceOf(SVGSVGElement);
+    expect(overlay.classList.contains("viewport-labels-overlay")).toBe(true);
+    expect(container.contains(overlay)).toBe(true);
+  });
+
+  it("should return existing overlay if it already exists", () => {
+    const overlay1 = getViewportLabelOverlay();
+    const overlay2 = getViewportLabelOverlay();
+
+    expect(overlay1).toBe(overlay2);
+  });
+
+  it("should set correct SVG attributes", () => {
+    const overlay = getViewportLabelOverlay();
+
+    expect(overlay.getAttribute("width")).toBe("1920");
+    expect(overlay.getAttribute("height")).toBe("1080");
+  });
+
+  it("should set correct CSS styles", () => {
+    const overlay = getViewportLabelOverlay();
+
+    expect(overlay.style.position).toBe("absolute");
+    expect(overlay.style.top).toBe("0px");
+    expect(overlay.style.left).toBe("0px");
+    expect(overlay.style.width).toBe("100vw");
+    expect(overlay.style.height).toBe("100vh");
+    expect(overlay.style.pointerEvents).toBe("none");
+    expect(overlay.style.zIndex).toBe("500");
+  });
+
+  it("should use viewport dimensions from getViewportDimensions", () => {
+    vi.mocked(getViewportDimensionsModule.getViewportDimensions).mockReturnValue({
+      width: 2560,
+      height: 1440,
+    });
+
+    const overlay = getViewportLabelOverlay();
+
+    expect(overlay.getAttribute("width")).toBe("2560");
+    expect(overlay.getAttribute("height")).toBe("1440");
+  });
+});

package/src/lib/viewport/label/{getViewportLabelsOverlay.ts → getViewportLabelOverlay.ts}

@@ -1,7 +1,7 @@
 import { getCanvasContainerOrBody } from "../../canvas/helpers/getCanvasContainerOrBody";
 import { getViewportDimensions } from "../../helpers/getViewportDimensions";
 
-export const getViewportLabelsOverlay = (): SVGSVGElement => {
+export const getViewportLabelOverlay = (): SVGSVGElement => {
   const container = getCanvasContainerOrBody();
 
   // Check if overlay already exists
@@ -30,3 +30,4 @@ export const getViewportLabelsOverlay = (): SVGSVGElement => {
 
   return overlay;
 };
+

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

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { getLabelPosition } from "./getLabelPosition";
+
+describe("getLabelPosition", () => {
+  it("should parse translate transform with positive values", () => {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("transform", "translate(100, 200)");
+
+    const result = getLabelPosition(group as unknown as SVGGElement);
+    expect(result).toEqual({ x: 100, y: 200 });
+  });
+
+  it("should parse translate transform with negative values", () => {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("transform", "translate(-50, -100)");
+
+    const result = getLabelPosition(group as unknown as SVGGElement);
+    expect(result).toEqual({ x: -50, y: -100 });
+  });
+
+  it("should parse translate transform with decimal values", () => {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("transform", "translate(123.45, 678.90)");
+
+    const result = getLabelPosition(group as unknown as SVGGElement);
+    expect(result).toEqual({ x: 123.45, y: 678.9 });
+  });
+
+  it("should return { x: 0, y: 0 } when transform is null", () => {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+
+    const result = getLabelPosition(group as unknown as SVGGElement);
+    expect(result).toEqual({ x: 0, y: 0 });
+  });
+
+  it("should return { x: 0, y: 0 } when transform doesn't match pattern", () => {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("transform", "rotate(45)");
+
+    const result = getLabelPosition(group as unknown as SVGGElement);
+    expect(result).toEqual({ x: 0, y: 0 });
+  });
+
+  it("should handle transform with spaces", () => {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("transform", "translate(100, 200)");
+
+    const result = getLabelPosition(group as unknown as SVGGElement);
+    expect(result).toEqual({ x: 100, y: 200 });
+  });
+});

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/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);
+  });
+});