@node-edit-utils/core 2.3.2 → 2.3.4

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

@@ -0,0 +1,97 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as toggleClassModule from "@/lib/helpers/toggleClass";
+import * as createTagLabelModule from "./createTagLabel";
+import { createToolsContainer } from "./createToolsContainer";
+
+vi.mock("@/lib/helpers/toggleClass");
+vi.mock("./createTagLabel");
+
+describe("createToolsContainer", () => {
+  let node: HTMLElement;
+  let highlightFrame: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node");
+    highlightFrame = document.createElement("div");
+
+    vi.mocked(toggleClassModule.toggleClass).mockImplementation(() => {});
+    vi.mocked(createTagLabelModule.createTagLabel).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should create node-tools element", () => {
+    createToolsContainer(node, highlightFrame);
+
+    const nodeTools = highlightFrame.querySelector(".node-tools");
+    expect(nodeTools).not.toBeNull();
+    expect(nodeTools?.className).toBe("node-tools");
+  });
+
+  it("should append node-tools to highlight frame", () => {
+    createToolsContainer(node, highlightFrame);
+
+    const nodeTools = highlightFrame.querySelector(".node-tools");
+    expect(nodeTools?.parentNode).toBe(highlightFrame);
+  });
+
+  it("should toggle is-instance class when isInstance is true", () => {
+    createToolsContainer(node, highlightFrame, true, false);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      "is-instance",
+      true
+    );
+  });
+
+  it("should toggle is-text-edit class when isTextEdit is true", () => {
+    createToolsContainer(node, highlightFrame, false, true);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      "is-text-edit",
+      true
+    );
+  });
+
+  it("should toggle both classes when both flags are true", () => {
+    createToolsContainer(node, highlightFrame, true, true);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not toggle classes when both flags are false", () => {
+    createToolsContainer(node, highlightFrame, false, false);
+
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledTimes(2);
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      "is-instance",
+      false
+    );
+    expect(toggleClassModule.toggleClass).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      "is-text-edit",
+      false
+    );
+  });
+
+  it("should create tag label", () => {
+    createToolsContainer(node, highlightFrame);
+
+    const nodeTools = highlightFrame.querySelector(".node-tools");
+    expect(createTagLabelModule.createTagLabel).toHaveBeenCalledWith(node, nodeTools as HTMLElement);
+  });
+
+  it("should pass correct nodeTools element to createTagLabel", () => {
+    createToolsContainer(node, highlightFrame);
+
+    const nodeTools = highlightFrame.querySelector(".node-tools");
+    expect(createTagLabelModule.createTagLabel).toHaveBeenCalledWith(node, nodeTools as HTMLElement);
+  });
+});
+

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

@@ -1,15 +1,12 @@
+import { toggleClass } from "@/lib/helpers/toggleClass";
 import { createTagLabel } from "./createTagLabel";
 
 export const createToolsContainer = (node: HTMLElement, highlightFrame: HTMLElement, isInstance: boolean = false, isTextEdit: boolean = false): void => {
   const nodeTools = document.createElement("div");
 
   nodeTools.className = "node-tools";
-  if (isInstance) {
-    nodeTools.classList.add("is-instance");
-  }
-  if (isTextEdit) {
-    nodeTools.classList.add("is-text-edit");
-  }
+  toggleClass(nodeTools, "is-instance", isInstance);
+  toggleClass(nodeTools, "is-text-edit", isTextEdit);
   highlightFrame.appendChild(nodeTools);
 
   createTagLabel(node, nodeTools);

package/src/lib/node-tools/highlight/helpers/getElementBounds.test.ts

@@ -0,0 +1,158 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as adjustForZoomModule from "@/lib/helpers/adjustForZoom";
+import * as getCanvasWindowValueModule from "@/lib/canvas/helpers/getCanvasWindowValue";
+import { getElementBounds } from "./getElementBounds";
+
+vi.mock("@/lib/helpers/adjustForZoom");
+vi.mock("@/lib/canvas/helpers/getCanvasWindowValue");
+
+describe("getElementBounds", () => {
+  let element: HTMLElement;
+  let nodeProvider: HTMLElement;
+
+  beforeEach(() => {
+    nodeProvider = document.createElement("div");
+    nodeProvider.style.position = "relative";
+    nodeProvider.style.left = "100px";
+    nodeProvider.style.top = "200px";
+    document.body.appendChild(nodeProvider);
+
+    element = document.createElement("div");
+    element.style.position = "absolute";
+    element.style.left = "50px";
+    element.style.top = "75px";
+    element.style.width = "200px";
+    element.style.height = "150px";
+    nodeProvider.appendChild(element);
+
+    vi.mocked(getCanvasWindowValueModule.getCanvasWindowValue).mockReturnValue(1);
+    vi.mocked(adjustForZoomModule.adjustForZoom).mockImplementation((value) => value);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should calculate relative bounds", () => {
+    const result = getElementBounds(element, nodeProvider);
+
+    expect(result).toHaveProperty("top");
+    expect(result).toHaveProperty("left");
+    expect(result).toHaveProperty("width");
+    expect(result).toHaveProperty("height");
+    expect(typeof result.top).toBe("number");
+    expect(typeof result.left).toBe("number");
+    expect(typeof result.width).toBe("number");
+    expect(typeof result.height).toBe("number");
+  });
+
+  it("should adjust bounds for zoom", () => {
+    vi.mocked(getCanvasWindowValueModule.getCanvasWindowValue).mockReturnValue(2);
+    vi.mocked(adjustForZoomModule.adjustForZoom).mockImplementation((value) => value / 2);
+
+    const result = getElementBounds(element, nodeProvider);
+
+    expect(adjustForZoomModule.adjustForZoom).toHaveBeenCalled();
+  });
+
+  it("should use default zoom of 1 when zoom is undefined", () => {
+    vi.mocked(getCanvasWindowValueModule.getCanvasWindowValue).mockReturnValue(undefined);
+
+    getElementBounds(element, nodeProvider);
+
+    expect(adjustForZoomModule.adjustForZoom).toHaveBeenCalled();
+  });
+
+  it("should ensure minimum width of 4", () => {
+    element.style.width = "2px";
+    vi.mocked(adjustForZoomModule.adjustForZoom).mockImplementation((value) => {
+      // Return very small width
+      if (value < 10) return 2;
+      return value;
+    });
+
+    const result = getElementBounds(element, nodeProvider);
+
+    expect(result.width).toBeGreaterThanOrEqual(4);
+  });
+
+  it("should use custom canvas name", () => {
+    getElementBounds(element, nodeProvider, "custom-canvas");
+
+    expect(getCanvasWindowValueModule.getCanvasWindowValue).toHaveBeenCalledWith(["zoom", "current"], "custom-canvas");
+  });
+
+  it("should calculate relative position correctly", () => {
+    const elementRect = {
+      top: 275,
+      left: 150,
+      width: 200,
+      height: 150,
+      bottom: 425,
+      right: 350,
+      x: 150,
+      y: 275,
+      toJSON: vi.fn(),
+    };
+    const providerRect = {
+      top: 200,
+      left: 100,
+      width: 500,
+      height: 400,
+      bottom: 600,
+      right: 600,
+      x: 100,
+      y: 200,
+      toJSON: vi.fn(),
+    };
+
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(elementRect as DOMRect);
+    vi.spyOn(nodeProvider, "getBoundingClientRect").mockReturnValue(providerRect as DOMRect);
+
+    const result = getElementBounds(element, nodeProvider);
+
+    // Relative top = 275 - 200 = 75
+    // Relative left = 150 - 100 = 50
+    expect(adjustForZoomModule.adjustForZoom).toHaveBeenCalledWith(75, expect.any(Number));
+    expect(adjustForZoomModule.adjustForZoom).toHaveBeenCalledWith(50, expect.any(Number));
+  });
+
+  it("should handle negative relative positions", () => {
+    const elementRect = {
+      top: 150,
+      left: 50,
+      width: 200,
+      height: 150,
+      bottom: 300,
+      right: 250,
+      x: 50,
+      y: 150,
+      toJSON: vi.fn(),
+    };
+    const providerRect = {
+      top: 200,
+      left: 100,
+      width: 500,
+      height: 400,
+      bottom: 600,
+      right: 600,
+      x: 100,
+      y: 200,
+      toJSON: vi.fn(),
+    };
+
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(elementRect as DOMRect);
+    vi.spyOn(nodeProvider, "getBoundingClientRect").mockReturnValue(providerRect as DOMRect);
+
+    const result = getElementBounds(element, nodeProvider);
+
+    // Relative top = 150 - 200 = -50
+    // Relative left = 50 - 100 = -50
+    expect(adjustForZoomModule.adjustForZoom).toHaveBeenCalledWith(-50, expect.any(Number));
+    expect(adjustForZoomModule.adjustForZoom).toHaveBeenCalledWith(-50, expect.any(Number));
+  });
+});
+

package/src/lib/node-tools/highlight/helpers/getElementBounds.ts

@@ -1,4 +1,5 @@
 import { getCanvasWindowValue } from "@/lib/canvas/helpers/getCanvasWindowValue";
+import { adjustForZoom } from "@/lib/helpers/adjustForZoom";
 
 export function getElementBounds(
   element: Element,
@@ -16,12 +17,12 @@ export function getElementBounds(
   const relativeTop = elementRect.top - componentRootRect.top;
   const relativeLeft = elementRect.left - componentRootRect.left;
 
-  const zoom = getCanvasWindowValue(["zoom", "current"], canvasName) ?? 1;
+  const zoom = (getCanvasWindowValue(["zoom", "current"], canvasName) as number | undefined) ?? 1;
 
-  const top = parseFloat((relativeTop / zoom).toFixed(5));
-  const left = parseFloat((relativeLeft / zoom).toFixed(5));
-  const width = Math.max(4, parseFloat((elementRect.width / zoom).toFixed(5)));
-  const height = parseFloat((elementRect.height / zoom).toFixed(5));
+  const top = adjustForZoom(relativeTop, zoom);
+  const left = adjustForZoom(relativeLeft, zoom);
+  const width = Math.max(4, adjustForZoom(elementRect.width, zoom));
+  const height = adjustForZoom(elementRect.height, zoom);
 
   return {
     top,

package/src/lib/node-tools/highlight/helpers/getHighlightFrameElement.test.ts

@@ -0,0 +1,78 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerOrBodyModule from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import { getHighlightFrameElement } from "./getHighlightFrameElement";
+
+vi.mock("@/lib/canvas/helpers/getCanvasContainerOrBody");
+
+describe("getHighlightFrameElement", () => {
+  let container: HTMLElement;
+  let highlightFrame: SVGSVGElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+
+    highlightFrame = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    highlightFrame.classList.add("highlight-frame-overlay");
+  });
+
+  afterEach(() => {
+    if (document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return highlight frame element when it exists", () => {
+    container.appendChild(highlightFrame);
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+
+    const result = getHighlightFrameElement();
+
+    expect(result).toBe(highlightFrame);
+  });
+
+  it("should return null when highlight frame does not exist", () => {
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+
+    const result = getHighlightFrameElement();
+
+    expect(result).toBeNull();
+  });
+
+  it("should return first highlight frame when multiple exist", () => {
+    const frame1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    frame1.classList.add("highlight-frame-overlay");
+    const frame2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    frame2.classList.add("highlight-frame-overlay");
+    container.appendChild(frame1);
+    container.appendChild(frame2);
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+
+    const result = getHighlightFrameElement();
+
+    expect(result).toBe(frame1);
+  });
+
+  it("should return null after frame is removed", () => {
+    container.appendChild(highlightFrame);
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+
+    const result1 = getHighlightFrameElement();
+    expect(result1).toBe(highlightFrame);
+
+    container.removeChild(highlightFrame);
+    const result2 = getHighlightFrameElement();
+    expect(result2).toBeNull();
+  });
+
+  it("should return SVG element", () => {
+    container.appendChild(highlightFrame);
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+
+    const result = getHighlightFrameElement();
+
+    expect(result).toBeInstanceOf(SVGSVGElement);
+  });
+});
+

package/src/lib/node-tools/highlight/helpers/getHighlightFrameElement.ts

@@ -1,7 +1,6 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
 
 export function getHighlightFrameElement(): SVGSVGElement | null {
-  const canvasContainer = getCanvasContainer();
-  const container = canvasContainer || document.body;
+  const container = getCanvasContainerOrBody();
   return container.querySelector(".highlight-frame-overlay") as SVGSVGElement | null;
 }

package/src/lib/node-tools/highlight/helpers/getScreenBounds.test.ts

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getScreenBounds } from "./getScreenBounds";
+
+describe("getScreenBounds", () => {
+  let element: HTMLElement;
+
+  beforeEach(() => {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(element)) {
+      document.body.removeChild(element);
+    }
+  });
+
+  it("should return bounds from getBoundingClientRect", () => {
+    // Mock getBoundingClientRect
+    const mockRect = {
+      top: 100,
+      left: 200,
+      width: 300,
+      height: 400,
+      bottom: 500,
+      right: 500,
+      x: 200,
+      y: 100,
+      toJSON: vi.fn(),
+    };
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(mockRect as DOMRect);
+
+    const result = getScreenBounds(element);
+
+    expect(result.top).toBe(100);
+    expect(result.left).toBe(200);
+    expect(result.width).toBe(300);
+    expect(result.height).toBe(400);
+  });
+
+  it("should handle zero dimensions", () => {
+    const mockRect = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      bottom: 0,
+      right: 0,
+      x: 0,
+      y: 0,
+      toJSON: vi.fn(),
+    };
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(mockRect as DOMRect);
+
+    const result = getScreenBounds(element);
+
+    expect(result.top).toBe(0);
+    expect(result.left).toBe(0);
+    expect(result.width).toBe(0);
+    expect(result.height).toBe(0);
+  });
+
+  it("should handle negative positions", () => {
+    const mockRect = {
+      top: -50,
+      left: -100,
+      width: 200,
+      height: 150,
+      bottom: 100,
+      right: 100,
+      x: -100,
+      y: -50,
+      toJSON: vi.fn(),
+    };
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(mockRect as DOMRect);
+
+    const result = getScreenBounds(element);
+
+    expect(result.top).toBe(-50);
+    expect(result.left).toBe(-100);
+    expect(result.width).toBe(200);
+    expect(result.height).toBe(150);
+  });
+
+  it("should handle decimal values", () => {
+    const mockRect = {
+      top: 123.45,
+      left: 678.90,
+      width: 234.56,
+      height: 789.01,
+      bottom: 912.46,
+      right: 913.46,
+      x: 678.90,
+      y: 123.45,
+      toJSON: vi.fn(),
+    };
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(mockRect as DOMRect);
+
+    const result = getScreenBounds(element);
+
+    expect(result.top).toBe(123.45);
+    expect(result.left).toBe(678.9);
+    expect(result.width).toBe(234.56);
+    expect(result.height).toBe(789.01);
+  });
+
+  it("should return object with all required properties", () => {
+    const mockRect = {
+      top: 100,
+      left: 200,
+      width: 300,
+      height: 400,
+      bottom: 500,
+      right: 500,
+      x: 200,
+      y: 100,
+      toJSON: vi.fn(),
+    };
+    vi.spyOn(element, "getBoundingClientRect").mockReturnValue(mockRect as DOMRect);
+
+    const result = getScreenBounds(element);
+
+    expect(result).toHaveProperty("top");
+    expect(result).toHaveProperty("left");
+    expect(result).toHaveProperty("width");
+    expect(result).toHaveProperty("height");
+    expect(typeof result.top).toBe("number");
+    expect(typeof result.left).toBe("number");
+    expect(typeof result.width).toBe("number");
+    expect(typeof result.height).toBe("number");
+  });
+});
+