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

@@ -1,8 +1,11 @@
 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 { refreshViewportLabel } from "./label/refreshViewportLabel";
+import { removeViewportLabel } from "./label/removeViewportLabel";
 import { createResizeHandle } from "./resize/createResizeHandle";
 import { createResizePresets } from "./resize/createResizePresets";
 import type { Viewport } from "./types";
@@ -14,6 +17,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,72 +28,68 @@ 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();
+  // Create/refresh the label for this viewport
+  refreshViewportLabel(container);
 
   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();
+
+    // Remove the label for this viewport
+    removeViewportLabel(container);
   };
 
   return {
     setWidth: (width: number): void => {
       updateWidth(container, width);
-      refreshViewportLabels();
+      refreshViewportLabel(container);
 
-      // 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/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,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;
+export const getViewportLabelOverlay = (): SVGSVGElement => {
+  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());
 
@@ -31,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/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);
 };