@node-edit-utils/core 2.3.2 → 2.3.4

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

@@ -1,4 +1,4 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
 import { getHighlightFrameElement } from "./helpers/getHighlightFrameElement";
 
 export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
@@ -12,8 +12,7 @@ export const updateHighlightFrameVisibility = (node: HTMLElement): void => {
   // Batch DOM writes
   frame.style.display = displayValue;
 
-  const canvasContainer = getCanvasContainer();
-  const container = canvasContainer || document.body;
+  const container = getCanvasContainerOrBody();
   const toolsWrapper = container.querySelector(".highlight-frame-tools-wrapper") as HTMLElement | null;
   if (toolsWrapper) {
     toolsWrapper.style.display = displayValue;

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

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

@@ -0,0 +1,82 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { isInsideViewport } from "./isInsideViewport";
+
+describe("isInsideViewport", () => {
+  let nodeProvider: HTMLElement;
+  let viewport: HTMLElement;
+  let element: HTMLElement;
+
+  beforeEach(() => {
+    nodeProvider = document.createElement("div");
+    nodeProvider.setAttribute("data-role", "node-provider");
+    document.body.appendChild(nodeProvider);
+
+    viewport = document.createElement("div");
+    viewport.classList.add("viewport");
+    nodeProvider.appendChild(viewport);
+
+    element = document.createElement("div");
+    viewport.appendChild(element);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+  });
+
+  it("should return true when element is inside viewport", () => {
+    const result = isInsideViewport(element);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return true when element is nested inside viewport", () => {
+    const nested = document.createElement("div");
+    element.appendChild(nested);
+
+    const result = isInsideViewport(nested);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when element is not inside viewport", () => {
+    const outsideElement = document.createElement("div");
+    document.body.appendChild(outsideElement);
+
+    const result = isInsideViewport(outsideElement);
+
+    expect(result).toBe(false);
+    document.body.removeChild(outsideElement);
+  });
+
+  it("should stop at node-provider", () => {
+    const elementOutsideViewport = document.createElement("div");
+    nodeProvider.appendChild(elementOutsideViewport);
+
+    const result = isInsideViewport(elementOutsideViewport);
+
+    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 = isInsideViewport(directChild);
+
+    expect(result).toBe(false);
+  });
+
+  it("should handle multiple viewports", () => {
+    const viewport2 = document.createElement("div");
+    viewport2.classList.add("viewport");
+    nodeProvider.appendChild(viewport2);
+    const element2 = document.createElement("div");
+    viewport2.appendChild(element2);
+
+    expect(isInsideViewport(element)).toBe(true);
+    expect(isInsideViewport(element2)).toBe(true);
+  });
+});
+

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

@@ -0,0 +1,81 @@
+import { describe, expect, it } from "vitest";
+import { targetSameCandidates } from "./targetSameCandidates";
+
+describe("targetSameCandidates", () => {
+  const element1 = document.createElement("div");
+  const element2 = document.createElement("div");
+  const element3 = document.createElement("div");
+
+  it("should return true when arrays are identical", () => {
+    const cache = [element1, element2, element3];
+    const current = [element1, element2, element3];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when arrays have different lengths", () => {
+    const cache = [element1, element2];
+    const current = [element1, element2, element3];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when arrays have same length but different elements", () => {
+    const cache = [element1, element2];
+    const current = [element2, element3];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when arrays have same elements in different order", () => {
+    const cache = [element1, element2];
+    const current = [element2, element1];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return true for empty arrays", () => {
+    const cache: Element[] = [];
+    const current: Element[] = [];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when one array is empty", () => {
+    const cache: Element[] = [];
+    const current = [element1];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return true for single element arrays with same element", () => {
+    const cache = [element1];
+    const current = [element1];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false for single element arrays with different elements", () => {
+    const cache = [element1];
+    const current = [element2];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+});
+