@node-edit-utils/core 2.3.2 → 2.3.4

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

@@ -0,0 +1,88 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerOrBodyModule from "../../canvas/helpers/getCanvasContainerOrBody";
+import { clearHighlightFrame } from "./clearHighlightFrame";
+
+vi.mock("../../canvas/helpers/getCanvasContainerOrBody");
+
+describe("clearHighlightFrame", () => {
+  let container: HTMLElement;
+  let highlightFrame: SVGSVGElement;
+  let toolsWrapper: HTMLElement;
+
+  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");
+    container.appendChild(highlightFrame);
+
+    toolsWrapper = document.createElement("div");
+    toolsWrapper.classList.add("highlight-frame-tools-wrapper");
+    container.appendChild(toolsWrapper);
+
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should remove highlight frame overlay", () => {
+    clearHighlightFrame();
+
+    expect(container.querySelector(".highlight-frame-overlay")).toBeNull();
+  });
+
+  it("should remove tools wrapper", () => {
+    clearHighlightFrame();
+
+    expect(container.querySelector(".highlight-frame-tools-wrapper")).toBeNull();
+  });
+
+  it("should remove both frame and tools wrapper", () => {
+    clearHighlightFrame();
+
+    expect(container.querySelector(".highlight-frame-overlay")).toBeNull();
+    expect(container.querySelector(".highlight-frame-tools-wrapper")).toBeNull();
+  });
+
+  it("should not throw when frame does not exist", () => {
+    container.removeChild(highlightFrame);
+
+    expect(() => {
+      clearHighlightFrame();
+    }).not.toThrow();
+  });
+
+  it("should not throw when tools wrapper does not exist", () => {
+    container.removeChild(toolsWrapper);
+
+    expect(() => {
+      clearHighlightFrame();
+    }).not.toThrow();
+  });
+
+  it("should not throw when neither exists", () => {
+    container.removeChild(highlightFrame);
+    container.removeChild(toolsWrapper);
+
+    expect(() => {
+      clearHighlightFrame();
+    }).not.toThrow();
+  });
+
+  it("should only remove highlight frame overlay elements", () => {
+    const otherElement = document.createElement("div");
+    otherElement.classList.add("other-element");
+    container.appendChild(otherElement);
+
+    clearHighlightFrame();
+
+    expect(container.querySelector(".other-element")).toBe(otherElement);
+    expect(container.querySelector(".highlight-frame-overlay")).toBeNull();
+  });
+});

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

@@ -1,8 +1,7 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
 
 export const clearHighlightFrame = (): void => {
-  const canvasContainer = getCanvasContainer();
-  const container = canvasContainer || document.body;
+  const container = getCanvasContainerOrBody();
   
   const frame = container.querySelector(".highlight-frame-overlay");
   if (frame) {

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

@@ -0,0 +1,150 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createCornerHandles } from "./createCornerHandles";
+
+describe("createCornerHandles", () => {
+  let group: SVGGElement;
+
+  beforeEach(() => {
+    group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should create four corner handles", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handles = group.querySelectorAll(".highlight-frame-handle");
+    expect(handles.length).toBe(4);
+  });
+
+  it("should create top-left handle", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handle = group.querySelector(".handle-top-left");
+    expect(handle).not.toBeNull();
+    expect(handle?.getAttribute("x")).toBe("-3");
+    expect(handle?.getAttribute("y")).toBe("-3");
+  });
+
+  it("should create top-right handle", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handle = group.querySelector(".handle-top-right");
+    expect(handle).not.toBeNull();
+    expect(handle?.getAttribute("x")).toBe("197");
+    expect(handle?.getAttribute("y")).toBe("-3");
+  });
+
+  it("should create bottom-right handle", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handle = group.querySelector(".handle-bottom-right");
+    expect(handle).not.toBeNull();
+    expect(handle?.getAttribute("x")).toBe("197");
+    expect(handle?.getAttribute("y")).toBe("147");
+  });
+
+  it("should create bottom-left handle", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handle = group.querySelector(".handle-bottom-left");
+    expect(handle).not.toBeNull();
+    expect(handle?.getAttribute("x")).toBe("-3");
+    expect(handle?.getAttribute("y")).toBe("147");
+  });
+
+  it("should set handle size to 6", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handles = group.querySelectorAll(".highlight-frame-handle");
+    handles.forEach((handle) => {
+      expect(handle.getAttribute("width")).toBe("6");
+      expect(handle.getAttribute("height")).toBe("6");
+    });
+  });
+
+  it("should set vector-effect attribute", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handles = group.querySelectorAll(".highlight-frame-handle");
+    handles.forEach((handle) => {
+      expect(handle.getAttribute("vector-effect")).toBe("non-scaling-stroke");
+    });
+  });
+
+  it("should apply instance color when isInstance is true", () => {
+    // Mock getComputedStyle
+    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);
+
+    createCornerHandles(group, 200, 150, true, false);
+
+    const handles = group.querySelectorAll(".highlight-frame-handle");
+    handles.forEach((handle) => {
+      expect(handle.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);
+
+    createCornerHandles(group, 200, 150, false, true);
+
+    const handles = group.querySelectorAll(".highlight-frame-handle");
+    handles.forEach((handle) => {
+      expect(handle.getAttribute("stroke")).toBe("rgb(0, 255, 0)");
+    });
+
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  it("should not set stroke when neither flag is true", () => {
+    createCornerHandles(group, 200, 150, false, false);
+
+    const handles = group.querySelectorAll(".highlight-frame-handle");
+    handles.forEach((handle) => {
+      expect(handle.getAttribute("stroke")).toBeNull();
+    });
+  });
+
+  it("should handle zero dimensions", () => {
+    createCornerHandles(group, 0, 0);
+
+    const topLeft = group.querySelector(".handle-top-left");
+    expect(topLeft?.getAttribute("x")).toBe("-3");
+    expect(topLeft?.getAttribute("y")).toBe("-3");
+  });
+
+  it("should handle very small dimensions", () => {
+    createCornerHandles(group, 1, 1);
+
+    const topRight = group.querySelector(".handle-top-right");
+    expect(topRight?.getAttribute("x")).toBe("-2");
+    expect(topRight?.getAttribute("y")).toBe("-3");
+  });
+
+  it("should append handles to group", () => {
+    createCornerHandles(group, 200, 150);
+
+    const handles = group.querySelectorAll(".highlight-frame-handle");
+    handles.forEach((handle) => {
+      expect(handle.parentNode).toBe(group);
+    });
+  });
+});
+

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

@@ -0,0 +1,237 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerOrBodyModule from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import * as getViewportDimensionsModule from "@/lib/helpers/getViewportDimensions";
+import * as getScreenBoundsModule from "./helpers/getScreenBounds";
+import * as createCornerHandlesModule from "./createCornerHandles";
+import { createHighlightFrame } from "./createHighlightFrame";
+
+vi.mock("@/lib/canvas/helpers/getCanvasContainerOrBody");
+vi.mock("@/lib/helpers/getViewportDimensions");
+vi.mock("./helpers/getScreenBounds");
+vi.mock("./createCornerHandles");
+
+describe("createHighlightFrame", () => {
+  let node: HTMLElement;
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node");
+    document.body.appendChild(node);
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+
+    vi.mocked(getCanvasContainerOrBodyModule.getCanvasContainerOrBody).mockReturnValue(container);
+    vi.mocked(getViewportDimensionsModule.getViewportDimensions).mockReturnValue({
+      width: 1920,
+      height: 1080,
+    });
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 100,
+      left: 200,
+      width: 300,
+      height: 400,
+    });
+    vi.mocked(createCornerHandlesModule.createCornerHandles).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    if (document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should create SVG overlay element", () => {
+    const result = createHighlightFrame(node);
+
+    expect(result).toBeInstanceOf(SVGSVGElement);
+    expect(result.classList.contains("highlight-frame-overlay")).toBe(true);
+  });
+
+  it("should set SVG attributes", () => {
+    const result = createHighlightFrame(node);
+
+    expect(result.getAttribute("width")).toBe("1920");
+    expect(result.getAttribute("height")).toBe("1080");
+  });
+
+  it("should set SVG styles", () => {
+    const result = createHighlightFrame(node);
+
+    expect(result.style.position).toBe("absolute");
+    expect(result.style.top).toBe("0px");
+    expect(result.style.left).toBe("0px");
+    expect(result.style.width).toBe("100vw");
+    expect(result.style.height).toBe("100vh");
+    expect(result.style.pointerEvents).toBe("none");
+    expect(result.style.zIndex).toBe("500");
+  });
+
+  it("should add is-instance class when isInstance is true", () => {
+    const result = createHighlightFrame(node, true, false);
+
+    expect(result.classList.contains("is-instance")).toBe(true);
+  });
+
+  it("should add is-text-edit class when isTextEdit is true", () => {
+    const result = createHighlightFrame(node, false, true);
+
+    expect(result.classList.contains("is-text-edit")).toBe(true);
+  });
+
+  it("should set data-node-id attribute", () => {
+    const result = createHighlightFrame(node);
+
+    expect(result.getAttribute("data-node-id")).toBe("test-node");
+  });
+
+  it("should handle missing data-node-id", () => {
+    node.removeAttribute("data-node-id");
+    const result = createHighlightFrame(node);
+
+    expect(result.getAttribute("data-node-id")).toBe("");
+  });
+
+  it("should create group element", () => {
+    const result = createHighlightFrame(node);
+
+    const group = result.querySelector(".highlight-frame-group");
+    expect(group).not.toBeNull();
+    expect(group?.tagName).toBe("g");
+  });
+
+  it("should set group transform", () => {
+    const result = createHighlightFrame(node);
+
+    const group = result.querySelector(".highlight-frame-group") as SVGGElement;
+    expect(group.getAttribute("transform")).toBe("translate(200, 100)");
+  });
+
+  it("should create rect element", () => {
+    const result = createHighlightFrame(node);
+
+    const rect = result.querySelector("rect");
+    expect(rect).not.toBeNull();
+    expect(rect?.classList.contains("highlight-frame-rect")).toBe(true);
+  });
+
+  it("should set rect dimensions", () => {
+    const result = createHighlightFrame(node);
+
+    const rect = result.querySelector("rect");
+    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,
+    });
+
+    const result = createHighlightFrame(node);
+
+    const rect = result.querySelector("rect");
+    expect(rect?.getAttribute("width")).toBe("3");
+  });
+
+  it("should set rect vector-effect", () => {
+    const result = createHighlightFrame(node);
+
+    const rect = result.querySelector("rect");
+    expect(rect?.getAttribute("vector-effect")).toBe("non-scaling-stroke");
+  });
+
+  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);
+
+    const result = createHighlightFrame(node, true, false);
+
+    const rect = result.querySelector("rect");
+    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);
+
+    const result = createHighlightFrame(node, false, true);
+
+    const rect = result.querySelector("rect");
+    expect(rect?.getAttribute("stroke")).toBe("rgb(0, 255, 0)");
+
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  it("should not set stroke when neither flag is true", () => {
+    const result = createHighlightFrame(node, false, false);
+
+    const rect = result.querySelector("rect");
+    expect(rect?.getAttribute("stroke")).toBeNull();
+  });
+
+  it("should create corner handles", () => {
+    createHighlightFrame(node);
+
+    expect(createCornerHandlesModule.createCornerHandles).toHaveBeenCalledWith(
+      expect.objectContaining({ tagName: "g" }),
+      300,
+      400,
+      false,
+      false
+    );
+  });
+
+  it("should append SVG to container", () => {
+    const result = createHighlightFrame(node);
+
+    expect(result.parentNode).toBe(container);
+  });
+
+  it("should use viewport dimensions", () => {
+    vi.mocked(getViewportDimensionsModule.getViewportDimensions).mockReturnValue({
+      width: 800,
+      height: 600,
+    });
+
+    const result = createHighlightFrame(node);
+
+    expect(result.getAttribute("width")).toBe("800");
+    expect(result.getAttribute("height")).toBe("600");
+  });
+
+  it("should handle zero width with minimum", () => {
+    vi.mocked(getScreenBoundsModule.getScreenBounds).mockReturnValue({
+      top: 100,
+      left: 200,
+      width: 0,
+      height: 400,
+    });
+
+    const result = createHighlightFrame(node);
+
+    const rect = result.querySelector("rect");
+    expect(rect?.getAttribute("width")).toBe("3");
+  });
+});
+

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

@@ -1,4 +1,5 @@
-import { getCanvasContainer } from "@/lib/canvas/helpers/getCanvasContainer";
+import { getCanvasContainerOrBody } from "@/lib/canvas/helpers/getCanvasContainerOrBody";
+import { getViewportDimensions } from "@/lib/helpers/getViewportDimensions";
 import { createCornerHandles } from "./createCornerHandles";
 import { getScreenBounds } from "./helpers/getScreenBounds";
 
@@ -36,8 +37,7 @@ export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = fa
   svg.style.pointerEvents = "none";
   svg.style.zIndex = "500";
 
-  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  const { width: viewportWidth, height: viewportHeight } = getViewportDimensions();
   svg.setAttribute("width", viewportWidth.toString());
   svg.setAttribute("height", viewportHeight.toString());
 
@@ -65,12 +65,8 @@ export const createHighlightFrame = (node: HTMLElement, isInstance: boolean = fa
   createCornerHandles(group, minWidth, height, isInstance, isTextEdit);
 
   svg.appendChild(group);
-  const canvasContainer = getCanvasContainer();
-  if (canvasContainer) {
-    canvasContainer.appendChild(svg);
-  } else {
-    document.body.appendChild(svg);
-  }
+  const container = getCanvasContainerOrBody();
+  container.appendChild(svg);
 
   return svg as SVGSVGElement;
 };

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

@@ -0,0 +1,135 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createTagLabel } from "./createTagLabel";
+
+describe("createTagLabel", () => {
+  let node: HTMLElement;
+  let nodeTools: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    nodeTools = document.createElement("div");
+    nodeTools.className = "node-tools";
+    document.body.appendChild(nodeTools);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeTools)) {
+      document.body.removeChild(nodeTools);
+    }
+  });
+
+  it("should create tag label with div tag name", () => {
+    createTagLabel(node, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel).not.toBeNull();
+    expect(tagLabel?.textContent).toBe("Container");
+  });
+
+  it("should use instance name when available", () => {
+    node.setAttribute("data-instance-name", "CustomComponent");
+
+    createTagLabel(node, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("CustomComponent");
+  });
+
+  it("should capitalize instance name", () => {
+    node.setAttribute("data-instance-name", "customComponent");
+
+    createTagLabel(node, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("CustomComponent");
+  });
+
+  it("should map h1 to Heading 1", () => {
+    const h1 = document.createElement("h1");
+    createTagLabel(h1, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Heading 1");
+  });
+
+  it("should map h2 to Heading 2", () => {
+    const h2 = document.createElement("h2");
+    createTagLabel(h2, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Heading 2");
+  });
+
+  it("should map p to Text", () => {
+    const p = document.createElement("p");
+    createTagLabel(p, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Text");
+  });
+
+  it("should map img to Image", () => {
+    const img = document.createElement("img");
+    createTagLabel(img, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Image");
+  });
+
+  it("should map a to Link", () => {
+    const a = document.createElement("a");
+    createTagLabel(a, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Link");
+  });
+
+  it("should use tag name for unmapped elements", () => {
+    const span = document.createElement("span");
+    createTagLabel(span, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Span");
+  });
+
+  it("should capitalize unmapped tag names", () => {
+    const custom = document.createElement("custom-element");
+    createTagLabel(custom, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Custom-element");
+  });
+
+  it("should append label to nodeTools", () => {
+    createTagLabel(node, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.parentNode).toBe(nodeTools);
+  });
+
+  it("should create label with correct class", () => {
+    createTagLabel(node, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.className).toBe("tag-label");
+  });
+
+  it("should prioritize instance name over tag name", () => {
+    node.setAttribute("data-instance-name", "MyComponent");
+
+    createTagLabel(node, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("MyComponent");
+  });
+
+  it("should handle empty instance name", () => {
+    node.setAttribute("data-instance-name", "");
+
+    createTagLabel(node, nodeTools);
+
+    const tagLabel = nodeTools.querySelector(".tag-label");
+    expect(tagLabel?.textContent).toBe("Container");
+  });
+});
+