@node-edit-utils/core 2.3.3 → 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/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/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/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");
+  });
+});
+

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