@node-edit-utils/core 2.3.3 → 2.3.4

package/src/lib/canvas/helpers/getCanvasContainer.test.ts

@@ -0,0 +1,62 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { getCanvasContainer } from "./getCanvasContainer";
+
+describe("getCanvasContainer", () => {
+  let canvasContainer: HTMLElement;
+
+  beforeEach(() => {
+    canvasContainer = document.createElement("div");
+    canvasContainer.classList.add("canvas-container");
+  });
+
+  afterEach(() => {
+    if (document.body.contains(canvasContainer)) {
+      document.body.removeChild(canvasContainer);
+    }
+    // Remove any other canvas containers that might exist
+    const existingContainers = document.querySelectorAll(".canvas-container");
+    existingContainers.forEach((container) => {
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+    });
+  });
+
+  it("should return canvas container element when it exists", () => {
+    document.body.appendChild(canvasContainer);
+
+    const result = getCanvasContainer();
+
+    expect(result).toBe(canvasContainer);
+  });
+
+  it("should return null when canvas container does not exist", () => {
+    const result = getCanvasContainer();
+
+    expect(result).toBeNull();
+  });
+
+  it("should return first canvas container when multiple exist", () => {
+    const firstContainer = document.createElement("div");
+    firstContainer.classList.add("canvas-container");
+    const secondContainer = document.createElement("div");
+    secondContainer.classList.add("canvas-container");
+
+    document.body.appendChild(firstContainer);
+    document.body.appendChild(secondContainer);
+
+    const result = getCanvasContainer();
+
+    expect(result).toBe(firstContainer);
+  });
+
+  it("should return null after container is removed", () => {
+    document.body.appendChild(canvasContainer);
+    const result1 = getCanvasContainer();
+    expect(result1).toBe(canvasContainer);
+
+    document.body.removeChild(canvasContainer);
+    const result2 = getCanvasContainer();
+    expect(result2).toBeNull();
+  });
+});

package/src/lib/canvas/helpers/getCanvasContainerOrBody.test.ts

@@ -0,0 +1,51 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getCanvasContainerModule from "./getCanvasContainer";
+import { getCanvasContainerOrBody } from "./getCanvasContainerOrBody";
+
+vi.mock("./getCanvasContainer");
+
+describe("getCanvasContainerOrBody", () => {
+  let canvasContainer: HTMLElement;
+
+  beforeEach(() => {
+    canvasContainer = document.createElement("div");
+    canvasContainer.classList.add("canvas-container");
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should return canvas container when it exists", () => {
+    vi.mocked(getCanvasContainerModule.getCanvasContainer).mockReturnValue(canvasContainer);
+
+    const result = getCanvasContainerOrBody();
+
+    expect(result).toBe(canvasContainer);
+  });
+
+  it("should return document.body when canvas container does not exist", () => {
+    vi.mocked(getCanvasContainerModule.getCanvasContainer).mockReturnValue(null);
+
+    const result = getCanvasContainerOrBody();
+
+    expect(result).toBe(document.body);
+  });
+
+  it("should always return an HTMLElement", () => {
+    vi.mocked(getCanvasContainerModule.getCanvasContainer).mockReturnValue(canvasContainer);
+
+    const result = getCanvasContainerOrBody();
+
+    expect(result).toBeInstanceOf(HTMLElement);
+  });
+
+  it("should return document.body when canvas container is null", () => {
+    vi.mocked(getCanvasContainerModule.getCanvasContainer).mockReturnValue(null);
+
+    const result = getCanvasContainerOrBody();
+
+    expect(result).toBe(document.body);
+    expect(result).toBeInstanceOf(HTMLElement);
+  });
+});

package/src/lib/canvas/helpers/getCanvasWindowValue.test.ts

@@ -0,0 +1,116 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getCanvasWindowValue } from "./getCanvasWindowValue";
+
+describe("getCanvasWindowValue", () => {
+  beforeEach(() => {
+    // Clear any existing canvas properties
+    delete (window as unknown as Record<string, unknown>).canvas;
+    delete (window as unknown as Record<string, unknown>).customCanvas;
+  });
+
+  afterEach(() => {
+    // Clean up
+    delete (window as unknown as Record<string, unknown>).canvas;
+    delete (window as unknown as Record<string, unknown>).customCanvas;
+  });
+
+  it("should return value from nested path", () => {
+    const mockValue = { keyboard: { enable: vi.fn() } };
+    (window as unknown as Record<string, unknown>).canvas = mockValue;
+
+    const result = getCanvasWindowValue(["keyboard", "enable"], "canvas");
+
+    expect(result).toBe(mockValue.keyboard.enable);
+  });
+
+  it("should return undefined when canvas does not exist", () => {
+    const result = getCanvasWindowValue(["keyboard", "enable"], "nonExistentCanvas");
+
+    expect(result).toBeUndefined();
+  });
+
+  it("should return undefined when path does not exist", () => {
+    (window as unknown as Record<string, unknown>).canvas = {};
+
+    const result = getCanvasWindowValue(["nonExistent", "path"], "canvas");
+
+    expect(result).toBeUndefined();
+  });
+
+  it("should return undefined when intermediate path is null", () => {
+    (window as unknown as Record<string, unknown>).canvas = { keyboard: null };
+
+    const result = getCanvasWindowValue(["keyboard", "enable"], "canvas");
+
+    expect(result).toBeUndefined();
+  });
+
+  it("should return undefined when intermediate path is undefined", () => {
+    (window as unknown as Record<string, unknown>).canvas = { keyboard: undefined };
+
+    const result = getCanvasWindowValue(["keyboard", "enable"], "canvas");
+
+    expect(result).toBeUndefined();
+  });
+
+  it("should use default canvas name when not provided", () => {
+    const mockValue = { keyboard: { enable: vi.fn() } };
+    (window as unknown as Record<string, unknown>).canvas = mockValue;
+
+    const result = getCanvasWindowValue(["keyboard", "enable"]);
+
+    expect(result).toBe(mockValue.keyboard.enable);
+  });
+
+  it("should handle custom canvas name", () => {
+    const mockValue = { keyboard: { enable: vi.fn() } };
+    (window as unknown as Record<string, unknown>).customCanvas = mockValue;
+
+    const result = getCanvasWindowValue(["keyboard", "enable"], "customCanvas");
+
+    expect(result).toBe(mockValue.keyboard.enable);
+  });
+
+  it("should handle single level path", () => {
+    const mockValue = { property: "value" };
+    (window as unknown as Record<string, unknown>).canvas = mockValue;
+
+    const result = getCanvasWindowValue(["property"], "canvas");
+
+    expect(result).toBe("value");
+  });
+
+  it("should handle deep nested path", () => {
+    const mockValue = {
+      level1: {
+        level2: {
+          level3: {
+            level4: "deep-value",
+          },
+        },
+      },
+    };
+    (window as unknown as Record<string, unknown>).canvas = mockValue;
+
+    const result = getCanvasWindowValue(["level1", "level2", "level3", "level4"], "canvas");
+
+    expect(result).toBe("deep-value");
+  });
+
+  it("should handle empty path array", () => {
+    const mockValue = { property: "value" };
+    (window as unknown as Record<string, unknown>).canvas = mockValue;
+
+    const result = getCanvasWindowValue([], "canvas");
+
+    expect(result).toBe(mockValue);
+  });
+
+  it("should handle when canvas is not an object", () => {
+    (window as unknown as Record<string, unknown>).canvas = "not-an-object";
+
+    const result = getCanvasWindowValue(["keyboard", "enable"], "canvas");
+
+    expect(result).toBeUndefined();
+  });
+});

package/src/lib/helpers/adjustForZoom.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { adjustForZoom } from "./adjustForZoom";
+
+describe("adjustForZoom", () => {
+  it("should divide value by zoom", () => {
+    const result = adjustForZoom(100, 2);
+
+    expect(result).toBe(50);
+  });
+
+  it("should handle zoom of 1", () => {
+    const result = adjustForZoom(100, 1);
+
+    expect(result).toBe(100);
+  });
+
+  it("should handle fractional zoom", () => {
+    const result = adjustForZoom(100, 0.5);
+
+    expect(result).toBe(200);
+  });
+
+  it("should handle decimal values", () => {
+    const result = adjustForZoom(123.456, 2.5);
+
+    expect(result).toBe(49.3824);
+  });
+
+  it("should use default precision of 5", () => {
+    const result = adjustForZoom(100, 3);
+
+    expect(result).toBe(33.33333);
+  });
+
+  it("should use custom precision", () => {
+    const result = adjustForZoom(100, 3, 2);
+
+    expect(result).toBe(33.33);
+  });
+
+  it("should handle zero value", () => {
+    const result = adjustForZoom(0, 2);
+
+    expect(result).toBe(0);
+  });
+
+  it("should handle negative values", () => {
+    const result = adjustForZoom(-100, 2);
+
+    expect(result).toBe(-50);
+  });
+
+  it("should handle precision of 0", () => {
+    const result = adjustForZoom(100, 3, 0);
+
+    expect(result).toBe(33);
+  });
+
+  it("should handle very small zoom values", () => {
+    const result = adjustForZoom(100, 0.1);
+
+    expect(result).toBe(1000);
+  });
+});
+

package/src/lib/helpers/createDragHandler.test.ts

@@ -0,0 +1,325 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DragCallbacks } from "./createDragHandler";
+import { createDragHandler } from "./createDragHandler";
+
+describe("createDragHandler", () => {
+  let element: HTMLElement;
+  let callbacks: DragCallbacks;
+  let cleanup: () => void;
+
+  beforeEach(() => {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+
+    callbacks = {
+      onStart: vi.fn(),
+      onDrag: vi.fn(),
+      onStop: vi.fn(),
+      onCancel: vi.fn(),
+      onPreventClick: vi.fn(),
+    };
+  });
+
+  afterEach(() => {
+    if (cleanup) {
+      cleanup();
+    }
+    if (document.body.contains(element)) {
+      document.body.removeChild(element);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return cleanup function", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    expect(typeof cleanup).toBe("function");
+  });
+
+  it("should call onStart on mousedown", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    const event = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(event);
+
+    expect(callbacks.onStart).toHaveBeenCalledTimes(1);
+    expect(callbacks.onStart).toHaveBeenCalledWith(
+      expect.any(MouseEvent),
+      expect.objectContaining({
+        isDragging: true,
+        hasDragged: false,
+        startX: 100,
+        startY: 200,
+      })
+    );
+  });
+
+  it("should call onDrag on mousemove after drag starts", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    // Start drag
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    // Move mouse
+    const moveEvent = new MouseEvent("mousemove", { clientX: 150, clientY: 250, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    expect(callbacks.onDrag).toHaveBeenCalledTimes(1);
+    expect(callbacks.onDrag).toHaveBeenCalledWith(
+      expect.any(MouseEvent),
+      expect.objectContaining({
+        isDragging: true,
+        hasDragged: true,
+        startX: 100,
+        startY: 200,
+        deltaX: 50,
+        deltaY: 50,
+      })
+    );
+  });
+
+  it("should not call onDrag before drag starts", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    const moveEvent = new MouseEvent("mousemove", { clientX: 150, clientY: 250, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    expect(callbacks.onDrag).not.toHaveBeenCalled();
+  });
+
+  it("should call onStop on mouseup after drag starts", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    // Start drag
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    // Stop drag
+    const stopEvent = new MouseEvent("mouseup", { bubbles: true });
+    document.dispatchEvent(stopEvent);
+
+    expect(callbacks.onStop).toHaveBeenCalledTimes(1);
+    expect(callbacks.onStop).toHaveBeenCalledWith(
+      expect.any(MouseEvent),
+      expect.objectContaining({
+        isDragging: false,
+        hasDragged: false,
+        startX: 100,
+        startY: 200,
+      })
+    );
+  });
+
+  it("should not call onStop if drag hasn't started", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    const stopEvent = new MouseEvent("mouseup", { bubbles: true });
+    document.dispatchEvent(stopEvent);
+
+    expect(callbacks.onStop).not.toHaveBeenCalled();
+  });
+
+  it("should call onCancel on window blur during drag", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    // Start drag
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    // Blur window
+    window.dispatchEvent(new Event("blur"));
+
+    expect(callbacks.onCancel).toHaveBeenCalledTimes(1);
+    expect(callbacks.onCancel).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isDragging: false,
+        hasDragged: false,
+        startX: 100,
+        startY: 200,
+      })
+    );
+  });
+
+  it("should not call onCancel if drag hasn't started", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    window.dispatchEvent(new Event("blur"));
+
+    expect(callbacks.onCancel).not.toHaveBeenCalled();
+  });
+
+  it("should call onPreventClick on click after drag", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    // Start drag
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    // Move mouse to set hasDragged
+    const moveEvent = new MouseEvent("mousemove", { clientX: 150, clientY: 250, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    // Stop drag
+    const stopEvent = new MouseEvent("mouseup", { bubbles: true });
+    document.dispatchEvent(stopEvent);
+
+    // Click
+    const clickEvent = new MouseEvent("click", { bubbles: true });
+    element.dispatchEvent(clickEvent);
+
+    expect(callbacks.onPreventClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should calculate correct deltaX and deltaY", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    // Start at (100, 200)
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    // Move to (250, 350)
+    const moveEvent = new MouseEvent("mousemove", { clientX: 250, clientY: 350, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    expect(callbacks.onDrag).toHaveBeenCalledWith(
+      expect.any(MouseEvent),
+      expect.objectContaining({
+        deltaX: 150,
+        deltaY: 150,
+      })
+    );
+  });
+
+  it("should handle negative deltas", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    // Start at (200, 200)
+    const startEvent = new MouseEvent("mousedown", { clientX: 200, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    // Move to (100, 100)
+    const moveEvent = new MouseEvent("mousemove", { clientX: 100, clientY: 100, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    expect(callbacks.onDrag).toHaveBeenCalledWith(
+      expect.any(MouseEvent),
+      expect.objectContaining({
+        deltaX: -100,
+        deltaY: -100,
+      })
+    );
+  });
+
+  it("should prevent default and stop propagation by default", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true, cancelable: true });
+    const preventDefaultSpy = vi.spyOn(startEvent, "preventDefault");
+    const stopPropagationSpy = vi.spyOn(startEvent, "stopPropagation");
+
+    element.dispatchEvent(startEvent);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+    expect(stopPropagationSpy).toHaveBeenCalled();
+  });
+
+  it("should not prevent default when preventDefault option is false", () => {
+    cleanup = createDragHandler(element, callbacks, { preventDefault: false });
+
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true, cancelable: true });
+    const preventDefaultSpy = vi.spyOn(startEvent, "preventDefault");
+
+    element.dispatchEvent(startEvent);
+
+    expect(preventDefaultSpy).not.toHaveBeenCalled();
+  });
+
+  it("should not stop propagation when stopPropagation option is false", () => {
+    cleanup = createDragHandler(element, callbacks, { stopPropagation: false });
+
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true, cancelable: true });
+    const stopPropagationSpy = vi.spyOn(startEvent, "stopPropagation");
+
+    element.dispatchEvent(startEvent);
+
+    expect(stopPropagationSpy).not.toHaveBeenCalled();
+  });
+
+  it("should remove all event listeners on cleanup", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    cleanup();
+
+    // Clear mocks
+    vi.clearAllMocks();
+
+    // Try to trigger events - they should not be called
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    const moveEvent = new MouseEvent("mousemove", { clientX: 150, clientY: 250, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    window.dispatchEvent(new Event("blur"));
+
+    expect(callbacks.onStart).not.toHaveBeenCalled();
+    expect(callbacks.onDrag).not.toHaveBeenCalled();
+    expect(callbacks.onCancel).not.toHaveBeenCalled();
+  });
+
+  it("should work without optional callbacks", () => {
+    const minimalCallbacks: DragCallbacks = {
+      onDrag: vi.fn(),
+    };
+    cleanup = createDragHandler(element, minimalCallbacks);
+
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    const moveEvent = new MouseEvent("mousemove", { clientX: 150, clientY: 250, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    expect(minimalCallbacks.onDrag).toHaveBeenCalled();
+  });
+
+  it("should reset hasDragged flag after preventClick", () => {
+    cleanup = createDragHandler(element, callbacks);
+
+    // Start drag
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    element.dispatchEvent(startEvent);
+
+    // Move mouse
+    const moveEvent = new MouseEvent("mousemove", { clientX: 150, clientY: 250, bubbles: true });
+    document.dispatchEvent(moveEvent);
+
+    // Stop drag
+    const stopEvent = new MouseEvent("mouseup", { bubbles: true });
+    document.dispatchEvent(stopEvent);
+
+    // Click - should reset hasDragged
+    const clickEvent = new MouseEvent("click", { bubbles: true });
+    element.dispatchEvent(clickEvent);
+
+    // The hasDragged flag should be reset after preventClick
+    // This is tested implicitly by the fact that preventClick is called
+    expect(callbacks.onPreventClick).toHaveBeenCalled();
+  });
+
+  it("should work with SVGElement", () => {
+    const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    document.body.appendChild(svgElement);
+
+    cleanup = createDragHandler(svgElement, callbacks);
+
+    const startEvent = new MouseEvent("mousedown", { clientX: 100, clientY: 200, bubbles: true });
+    svgElement.dispatchEvent(startEvent);
+
+    expect(callbacks.onStart).toHaveBeenCalled();
+
+    cleanup();
+    document.body.removeChild(svgElement);
+  });
+});
+

package/src/lib/helpers/getNodeProvider.test.ts

@@ -0,0 +1,71 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { getNodeProvider } from "./getNodeProvider";
+
+describe("getNodeProvider", () => {
+  let nodeProvider: HTMLElement;
+
+  beforeEach(() => {
+    nodeProvider = document.createElement("div");
+    nodeProvider.setAttribute("data-role", "node-provider");
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    // Remove any other node providers
+    const existingProviders = document.querySelectorAll('[data-role="node-provider"]');
+    existingProviders.forEach((provider) => {
+      if (document.body.contains(provider)) {
+        document.body.removeChild(provider);
+      }
+    });
+  });
+
+  it("should return node provider element when it exists", () => {
+    document.body.appendChild(nodeProvider);
+
+    const result = getNodeProvider();
+
+    expect(result).toBe(nodeProvider);
+  });
+
+  it("should return null when node provider does not exist", () => {
+    const result = getNodeProvider();
+
+    expect(result).toBeNull();
+  });
+
+  it("should return first node provider when multiple exist", () => {
+    const firstProvider = document.createElement("div");
+    firstProvider.setAttribute("data-role", "node-provider");
+    const secondProvider = document.createElement("div");
+    secondProvider.setAttribute("data-role", "node-provider");
+
+    document.body.appendChild(firstProvider);
+    document.body.appendChild(secondProvider);
+
+    const result = getNodeProvider();
+
+    expect(result).toBe(firstProvider);
+  });
+
+  it("should return null after provider is removed", () => {
+    document.body.appendChild(nodeProvider);
+    const result1 = getNodeProvider();
+    expect(result1).toBe(nodeProvider);
+
+    document.body.removeChild(nodeProvider);
+    const result2 = getNodeProvider();
+    expect(result2).toBeNull();
+  });
+
+  it("should return element with correct data-role attribute", () => {
+    document.body.appendChild(nodeProvider);
+
+    const result = getNodeProvider();
+
+    expect(result?.getAttribute("data-role")).toBe("node-provider");
+  });
+});
+