@node-edit-utils/core 2.3.3 → 2.3.4

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/updateHighlightFrameVisibility.test.ts

@@ -0,0 +1,110 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerOrBodyModule from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import * as getHighlightFrameElementModule from "./helpers/getHighlightFrameElement";
+import { updateHighlightFrameVisibility } from "./updateHighlightFrameVisibility";
+
+vi.mock("@/lib/canvas/helpers/getCanvasContainerOrBody");
+vi.mock("./helpers/getHighlightFrameElement");
+
+describe("updateHighlightFrameVisibility", () => {
+  let container: HTMLElement;
+  let frame: SVGSVGElement;
+  let toolsWrapper: HTMLElement;
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    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);
+
+    toolsWrapper = document.createElement("div");
+    toolsWrapper.classList.add("highlight-frame-tools-wrapper");
+    container.appendChild(toolsWrapper);
+
+    node = document.createElement("div");
+    document.body.appendChild(node);
+
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+    vi.mocked(getHighlightFrameElementModule.getHighlightFrameElement).mockReturnValue(frame);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should set display to empty string when node is visible", () => {
+    updateHighlightFrameVisibility(node);
+
+    expect(frame.style.display).toBe("");
+    expect(toolsWrapper.style.display).toBe("");
+  });
+
+  it("should set display to none when node has hidden class", () => {
+    node.classList.add("hidden");
+
+    updateHighlightFrameVisibility(node);
+
+    expect(frame.style.display).toBe("none");
+    expect(toolsWrapper.style.display).toBe("none");
+  });
+
+  it("should set display to none when node has select-none class", () => {
+    node.classList.add("select-none");
+
+    updateHighlightFrameVisibility(node);
+
+    expect(frame.style.display).toBe("none");
+    expect(toolsWrapper.style.display).toBe("none");
+  });
+
+  it("should set display to none when node has both hidden and select-none classes", () => {
+    node.classList.add("hidden");
+    node.classList.add("select-none");
+
+    updateHighlightFrameVisibility(node);
+
+    expect(frame.style.display).toBe("none");
+    expect(toolsWrapper.style.display).toBe("none");
+  });
+
+  it("should not update when frame does not exist", () => {
+    vi.mocked(getHighlightFrameElementModule.getHighlightFrameElement).mockReturnValue(null);
+
+    expect(() => {
+      updateHighlightFrameVisibility(node);
+    }).not.toThrow();
+
+    expect(toolsWrapper.style.display).toBe("");
+  });
+
+  it("should not update tools wrapper when it does not exist", () => {
+    container.removeChild(toolsWrapper);
+
+    updateHighlightFrameVisibility(node);
+
+    expect(frame.style.display).toBe("");
+  });
+
+  it("should toggle visibility when classes change", () => {
+    updateHighlightFrameVisibility(node);
+    expect(frame.style.display).toBe("");
+
+    node.classList.add("hidden");
+    updateHighlightFrameVisibility(node);
+    expect(frame.style.display).toBe("none");
+
+    node.classList.remove("hidden");
+    updateHighlightFrameVisibility(node);
+    expect(frame.style.display).toBe("");
+  });
+});
+

package/src/lib/node-tools/select/helpers/getElementsFromPoint.test.ts

@@ -0,0 +1,109 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getElementsFromPoint } from "./getElementsFromPoint";
+
+describe("getElementsFromPoint", () => {
+  let nodeProvider: HTMLElement;
+  let element1: HTMLElement;
+  let element2: HTMLElement;
+
+  beforeEach(() => {
+    nodeProvider = document.createElement("div");
+    nodeProvider.setAttribute("data-role", "node-provider");
+    document.body.appendChild(nodeProvider);
+
+    element1 = document.createElement("div");
+    element1.setAttribute("data-node-id", "node-1");
+    nodeProvider.appendChild(element1);
+
+    element2 = document.createElement("div");
+    element2.setAttribute("data-node-id", "node-2");
+    element1.appendChild(element2);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return elements up to node-provider", () => {
+    const mockElements = [element2, element1, nodeProvider];
+    Object.defineProperty(document, "elementsFromPoint", {
+      value: vi.fn().mockReturnValue(mockElements),
+      writable: true,
+      configurable: true,
+    });
+
+    const result = getElementsFromPoint(100, 200);
+
+    expect(result).toEqual([element2, element1]);
+  });
+
+  it("should return empty array when node-provider is first element", () => {
+    const mockElements = [nodeProvider, element1, element2];
+    Object.defineProperty(document, "elementsFromPoint", {
+      value: vi.fn().mockReturnValue(mockElements),
+      writable: true,
+      configurable: true,
+    });
+
+    const result = getElementsFromPoint(100, 200);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return all elements before node-provider", () => {
+    const element3 = document.createElement("div");
+    const mockElements = [element3, element2, element1, nodeProvider];
+    Object.defineProperty(document, "elementsFromPoint", {
+      value: vi.fn().mockReturnValue(mockElements),
+      writable: true,
+      configurable: true,
+    });
+
+    const result = getElementsFromPoint(100, 200);
+
+    expect(result).toEqual([element3, element2, element1]);
+  });
+
+  it("should return empty array when no elements", () => {
+    Object.defineProperty(document, "elementsFromPoint", {
+      value: vi.fn().mockReturnValue([]),
+      writable: true,
+      configurable: true,
+    });
+
+    const result = getElementsFromPoint(100, 200);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return all elements when node-provider is not present", () => {
+    const mockElements = [element2, element1];
+    Object.defineProperty(document, "elementsFromPoint", {
+      value: vi.fn().mockReturnValue(mockElements),
+      writable: true,
+      configurable: true,
+    });
+
+    const result = getElementsFromPoint(100, 200);
+
+    expect(result).toEqual([element2, element1]);
+  });
+
+  it("should handle node-provider in middle of elements", () => {
+    const element3 = document.createElement("div");
+    const mockElements = [element3, nodeProvider, element2, element1];
+    Object.defineProperty(document, "elementsFromPoint", {
+      value: vi.fn().mockReturnValue(mockElements),
+      writable: true,
+      configurable: true,
+    });
+
+    const result = getElementsFromPoint(100, 200);
+
+    expect(result).toEqual([element3]);
+  });
+});
+

package/src/lib/node-tools/select/helpers/isInsideComponent.test.ts

@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { isInsideComponent } from "./isInsideComponent";
+
+describe("isInsideComponent", () => {
+  let nodeProvider: HTMLElement;
+  let component: HTMLElement;
+  let element: HTMLElement;
+
+  beforeEach(() => {
+    nodeProvider = document.createElement("div");
+    nodeProvider.setAttribute("data-role", "node-provider");
+    document.body.appendChild(nodeProvider);
+
+    component = document.createElement("div");
+    component.setAttribute("data-instance", "true");
+    nodeProvider.appendChild(component);
+
+    element = document.createElement("div");
+    component.appendChild(element);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+  });
+
+  it("should return true when element is inside component", () => {
+    const result = isInsideComponent(element);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return true when element is nested inside component", () => {
+    const nested = document.createElement("div");
+    element.appendChild(nested);
+
+    const result = isInsideComponent(nested);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when element is not inside component", () => {
+    const outsideElement = document.createElement("div");
+    nodeProvider.appendChild(outsideElement);
+
+    const result = isInsideComponent(outsideElement);
+
+    expect(result).toBe(false);
+  });
+
+  it("should stop at node-provider", () => {
+    const elementOutsideComponent = document.createElement("div");
+    nodeProvider.appendChild(elementOutsideComponent);
+
+    const result = isInsideComponent(elementOutsideComponent);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when element is direct child of node-provider", () => {
+    const directChild = document.createElement("div");
+    nodeProvider.appendChild(directChild);
+
+    const result = isInsideComponent(directChild);
+
+    expect(result).toBe(false);
+  });
+
+  it("should handle component without data-instance attribute", () => {
+    const nonComponent = document.createElement("div");
+    nodeProvider.appendChild(nonComponent);
+    const child = document.createElement("div");
+    nonComponent.appendChild(child);
+
+    const result = isInsideComponent(child);
+
+    expect(result).toBe(false);
+  });
+});
+