@node-edit-utils/core 2.3.2 → 2.3.4

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/createDragHandler.ts

@@ -0,0 +1,171 @@
+/**
+ * State tracked during a drag operation
+ */
+export interface DragState {
+  isDragging: boolean;
+  hasDragged: boolean;
+  startX: number;
+  startY: number;
+}
+
+/**
+ * Callbacks for drag operations
+ */
+export interface DragCallbacks {
+  /**
+   * Called when drag starts
+   * @param event - Mouse event that started the drag
+   * @param state - Current drag state
+   */
+  onStart?: (event: MouseEvent, state: DragState) => void;
+  /**
+   * Called during drag movement
+   * @param event - Mouse move event
+   * @param state - Current drag state with updated deltas
+   */
+  onDrag: (event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void;
+  /**
+   * Called when drag stops
+   * @param event - Mouse event that stopped the drag
+   * @param state - Final drag state
+   */
+  onStop?: (event: MouseEvent, state: DragState) => void;
+  /**
+   * Called when drag is cancelled (e.g., window blur)
+   * @param state - Current drag state
+   */
+  onCancel?: (state: DragState) => void;
+  /**
+   * Called on click events to prevent default behavior
+   * @param event - Click event
+   * @param state - Current drag state
+   */
+  onPreventClick?: (event: MouseEvent, state: DragState) => void;
+}
+
+/**
+ * Options for configuring the drag handler
+ */
+export interface DragHandlerOptions {
+  /**
+   * Whether to prevent default behavior on start/stop events
+   * @default true
+   */
+  preventDefault?: boolean;
+  /**
+   * Whether to stop event propagation on start/stop events
+   * @default true
+   */
+  stopPropagation?: boolean;
+}
+
+/**
+ * Creates a reusable drag handler for mouse drag operations
+ * @param element - Element that triggers the drag (mousedown listener attached here)
+ * @param callbacks - Callbacks for drag lifecycle events
+ * @param options - Configuration options
+ * @returns Cleanup function to remove all event listeners
+ */
+export function createDragHandler(
+  element: HTMLElement | SVGElement,
+  callbacks: DragCallbacks,
+  options: DragHandlerOptions = {}
+): () => void {
+  const { preventDefault = true, stopPropagation = true } = options;
+
+  const state: DragState = {
+    isDragging: false,
+    hasDragged: false,
+    startX: 0,
+    startY: 0,
+  };
+
+  const startDrag = (event: MouseEvent): void => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    state.isDragging = true;
+    state.hasDragged = false;
+    state.startX = event.clientX;
+    state.startY = event.clientY;
+
+    callbacks.onStart?.(event, state);
+  };
+
+  const handleDrag = (event: MouseEvent): void => {
+    if (!state.isDragging) return;
+
+    const deltaX = event.clientX - state.startX;
+    const deltaY = event.clientY - state.startY;
+
+    state.hasDragged = true;
+
+    callbacks.onDrag(event, {
+      ...state,
+      deltaX,
+      deltaY,
+    });
+  };
+
+  const stopDrag = (event: MouseEvent): void => {
+    if (!state.isDragging) return;
+
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    state.isDragging = false;
+
+    callbacks.onStop?.(event, state);
+  };
+
+  const cancelDrag = (): void => {
+    if (!state.isDragging) return;
+
+    state.isDragging = false;
+    callbacks.onCancel?.(state);
+  };
+
+  const preventClick = (event: MouseEvent): void => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    callbacks.onPreventClick?.(event, state);
+
+    // Reset hasDragged flag after handling the click
+    if (state.hasDragged) {
+      state.hasDragged = false;
+    }
+  };
+
+  // Attach event listeners
+  element.addEventListener("mousedown", startDrag as EventListener);
+  if (callbacks.onPreventClick) {
+    element.addEventListener("click", preventClick as EventListener);
+  }
+  document.addEventListener("mousemove", handleDrag as EventListener);
+  document.addEventListener("mouseup", stopDrag as EventListener);
+  window.addEventListener("blur", cancelDrag);
+
+  // Return cleanup function
+  return () => {
+    element.removeEventListener("mousedown", startDrag as EventListener);
+    if (callbacks.onPreventClick) {
+      element.removeEventListener("click", preventClick as EventListener);
+    }
+    document.removeEventListener("mousemove", handleDrag as EventListener);
+    document.removeEventListener("mouseup", stopDrag as EventListener);
+    window.removeEventListener("blur", cancelDrag);
+  };
+}

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

package/src/lib/helpers/getNodeProvider.ts

@@ -0,0 +1,4 @@
+export const getNodeProvider = (): HTMLElement | null => {
+  return document.querySelector('[data-role="node-provider"]') as HTMLElement | null;
+};
+

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

@@ -0,0 +1,50 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { getNodeTools } from "./getNodeTools";
+
+describe("getNodeTools", () => {
+  beforeEach(() => {
+    delete (window as Window & { nodeTools?: unknown }).nodeTools;
+  });
+
+  afterEach(() => {
+    delete (window as Window & { nodeTools?: unknown }).nodeTools;
+  });
+
+  it("should return nodeTools when it exists on window", () => {
+    const mockNodeTools = { test: "value" };
+    (window as Window & { nodeTools?: unknown }).nodeTools = mockNodeTools;
+
+    const result = getNodeTools();
+
+    expect(result).toBe(mockNodeTools);
+  });
+
+  it("should return undefined when nodeTools does not exist", () => {
+    const result = getNodeTools();
+
+    expect(result).toBeUndefined();
+  });
+
+  it("should return updated value when nodeTools changes", () => {
+    const mockNodeTools1 = { test: "value1" };
+    (window as Window & { nodeTools?: unknown }).nodeTools = mockNodeTools1;
+    const result1 = getNodeTools();
+    expect(result1).toBe(mockNodeTools1);
+
+    const mockNodeTools2 = { test: "value2" };
+    (window as Window & { nodeTools?: unknown }).nodeTools = mockNodeTools2;
+    const result2 = getNodeTools();
+    expect(result2).toBe(mockNodeTools2);
+  });
+
+  it("should return undefined after nodeTools is deleted", () => {
+    const mockNodeTools = { test: "value" };
+    (window as Window & { nodeTools?: unknown }).nodeTools = mockNodeTools;
+    const result1 = getNodeTools();
+    expect(result1).toBe(mockNodeTools);
+
+    delete (window as Window & { nodeTools?: unknown }).nodeTools;
+    const result2 = getNodeTools();
+    expect(result2).toBeUndefined();
+  });
+});

package/src/lib/helpers/getNodeTools.ts

@@ -0,0 +1,6 @@
+import type { NodeTools } from "../node-tools/types";
+
+export const getNodeTools = (): NodeTools | undefined => {
+  return (window as Window & { nodeTools?: NodeTools }).nodeTools;
+};
+