@node-edit-utils/core 2.3.2 → 2.3.4

package/src/lib/viewport/width/calcWidth.test.ts

@@ -0,0 +1,68 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { calcWidth } from "./calcWidth";
+
+describe("calcWidth", () => {
+  beforeEach(() => {
+    // Reset zoom data attribute
+    document.body.dataset.zoom = "1";
+  });
+
+  it("should calculate width based on mouse event and start position", () => {
+    const startX = 100;
+    const startWidth = 200;
+    const event = {
+      clientX: 150,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    expect(result).toBe(250);
+  });
+
+  it("should account for zoom level", () => {
+    document.body.dataset.zoom = "2";
+    const startX = 100;
+    const startWidth = 200;
+    const event = {
+      clientX: 150,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    // deltaX = (150 - 100) / 2 = 25
+    expect(result).toBe(225);
+  });
+
+  it("should handle negative deltaX", () => {
+    const startX = 150;
+    const startWidth = 200;
+    const event = {
+      clientX: 100,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    expect(result).toBe(150);
+  });
+
+  it("should default to zoom 1 if dataset.zoom is not set", () => {
+    delete document.body.dataset.zoom;
+    const startX = 100;
+    const startWidth = 200;
+    const event = {
+      clientX: 150,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    expect(result).toBe(250);
+  });
+
+  it("should respect min and max width constraints", () => {
+    const startX = 100;
+    const startWidth = 10;
+    const event = {
+      clientX: 50,
+    } as MouseEvent;
+
+    const result = calcWidth(event, startX, startWidth);
+    // Should be clamped to minWidth (4)
+    expect(result).toBe(4);
+  });
+});

package/src/lib/viewport/width/updateWidth.test.ts

@@ -0,0 +1,78 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { RESIZE_PRESETS } from "../constants";
+import { updateWidth } from "./updateWidth";
+
+describe("updateWidth", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should set --container-width CSS variable", () => {
+    updateWidth(container, 500);
+    expect(container.style.getPropertyValue("--container-width")).toBe("500px");
+  });
+
+  it("should update active preset when width matches a preset", () => {
+    // Create preset buttons
+    const presets = document.createElement("div");
+    presets.className = "resize-presets";
+    RESIZE_PRESETS.forEach(() => {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    });
+    container.appendChild(presets);
+
+    const mobilePreset = RESIZE_PRESETS[0];
+    updateWidth(container, mobilePreset.rawValue);
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    expect(buttons[0].classList.contains("is-active")).toBe(true);
+    expect(buttons[1].classList.contains("is-active")).toBe(false);
+  });
+
+  it("should remove active class from other presets when setting new width", () => {
+    const presets = document.createElement("div");
+    presets.className = "resize-presets";
+    RESIZE_PRESETS.forEach(() => {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    });
+    container.appendChild(presets);
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    buttons[0].classList.add("is-active");
+
+    const tabletPreset = RESIZE_PRESETS[1];
+    updateWidth(container, tabletPreset.rawValue);
+
+    expect(buttons[0].classList.contains("is-active")).toBe(false);
+    expect(buttons[1].classList.contains("is-active")).toBe(true);
+  });
+
+  it("should handle width that doesn't match any preset", () => {
+    const presets = document.createElement("div");
+    presets.className = "resize-presets";
+    RESIZE_PRESETS.forEach(() => {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    });
+    container.appendChild(presets);
+
+    updateWidth(container, 999);
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    buttons.forEach((button) => {
+      expect(button.classList.contains("is-active")).toBe(false);
+    });
+  });
+});

package/src/lib/window/bindToWindow.test.ts

@@ -0,0 +1,166 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { bindToWindow } from "./bindToWindow";
+
+describe("bindToWindow", () => {
+  let originalWindow: typeof window;
+
+  beforeEach(() => {
+    originalWindow = global.window;
+  });
+
+  afterEach(() => {
+    // Restore original window
+    global.window = originalWindow;
+    // Clean up any properties we added
+    if (typeof window !== "undefined") {
+      delete (window as unknown as Record<string, unknown>).testKey;
+      delete (window as unknown as Record<string, unknown>).nodeTools;
+      delete (window as unknown as Record<string, unknown>).customProperty;
+    }
+  });
+
+  it("should bind value to window object", () => {
+    const testValue = { test: "value" };
+    bindToWindow("testKey", testValue);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe(testValue);
+  });
+
+  it("should bind string value", () => {
+    bindToWindow("testKey", "test string");
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe("test string");
+  });
+
+  it("should bind number value", () => {
+    bindToWindow("testKey", 42);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe(42);
+  });
+
+  it("should bind boolean value", () => {
+    bindToWindow("testKey", true);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe(true);
+  });
+
+  it("should bind object value", () => {
+    const obj = { prop1: "value1", prop2: 123 };
+    bindToWindow("testKey", obj);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe(obj);
+  });
+
+  it("should bind array value", () => {
+    const arr = [1, 2, 3];
+    bindToWindow("testKey", arr);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe(arr);
+  });
+
+  it("should bind null value", () => {
+    bindToWindow("testKey", null);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBeNull();
+  });
+
+  it("should bind undefined value", () => {
+    bindToWindow("testKey", undefined);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBeUndefined();
+  });
+
+  it("should overwrite existing property", () => {
+    (window as unknown as Record<string, unknown>).testKey = "old value";
+    bindToWindow("testKey", "new value");
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe("new value");
+  });
+
+  it("should bind function value", () => {
+    const fn = vi.fn();
+    bindToWindow("testKey", fn);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe(fn);
+  });
+
+  it("should work with custom property names", () => {
+    const value = { custom: "data" };
+    bindToWindow("customProperty", value);
+
+    expect((window as unknown as Record<string, unknown>).customProperty).toBe(value);
+  });
+
+  it("should work with nodeTools property name", () => {
+    const nodeTools = { selectNode: vi.fn() };
+    bindToWindow("nodeTools", nodeTools);
+
+    expect((window as unknown as Record<string, unknown>).nodeTools).toBe(nodeTools);
+  });
+
+  it("should handle multiple bindings", () => {
+    bindToWindow("key1", "value1");
+    bindToWindow("key2", "value2");
+    bindToWindow("key3", "value3");
+
+    expect((window as unknown as Record<string, unknown>).key1).toBe("value1");
+    expect((window as unknown as Record<string, unknown>).key2).toBe("value2");
+    expect((window as unknown as Record<string, unknown>).key3).toBe("value3");
+  });
+
+  it("should not throw when window is undefined (SSR safety)", () => {
+    // Temporarily remove window
+    const windowBackup = global.window;
+    // @ts-ignore
+    delete global.window;
+
+    expect(() => {
+      bindToWindow("testKey", "value");
+    }).not.toThrow();
+
+    // Restore window
+    global.window = windowBackup;
+  });
+
+  it("should not bind when window is undefined (SSR safety)", () => {
+    // Temporarily remove window
+    const windowBackup = global.window;
+    // @ts-ignore
+    delete global.window;
+
+    bindToWindow("testKey", "value");
+
+    // Restore window and verify it wasn't set
+    global.window = windowBackup;
+    expect((window as unknown as Record<string, unknown>).testKey).toBeUndefined();
+  });
+
+  it("should handle complex nested objects", () => {
+    const complexObject = {
+      level1: {
+        level2: {
+          level3: {
+            value: "deep",
+          },
+        },
+      },
+      array: [1, { nested: "object" }],
+    };
+    bindToWindow("testKey", complexObject);
+
+    expect((window as unknown as Record<string, unknown>).testKey).toBe(complexObject);
+  });
+
+  it("should handle empty string key", () => {
+    bindToWindow("", "empty key value");
+
+    expect((window as unknown as Record<string, unknown>)[""]).toBe("empty key value");
+  });
+
+  it("should handle special characters in key", () => {
+    bindToWindow("test-key_123", "special chars");
+
+    expect((window as unknown as Record<string, unknown>)["test-key_123"]).toBe("special chars");
+  });
+});
+

package/src/lib/window/bindToWindow.ts

@@ -1,6 +1,5 @@
 export const bindToWindow = <T>(key: string, value: T): void => {
   if (typeof window !== "undefined") {
-    // biome-ignore lint/suspicious/noExplicitAny: global window extension requires flexibility
-    (window as any)[key] = value;
+    (window as unknown as Record<string, unknown>)[key] = value;
   }
 };

package/dist/lib/viewport/label/getViewportLabelsOverlay.d.ts

@@ -1 +0,0 @@
-export declare const getViewportLabelsOverlay: () => SVGSVGElement;

package/dist/lib/viewport/label/isViewportLabelDragging.d.ts

@@ -1,2 +0,0 @@
-export declare const isViewportLabelDragging: () => boolean;
-export declare const setViewportLabelDragging: (isDragging: boolean) => void;

package/dist/lib/viewport/label/setupViewportLabelDrag.d.ts

@@ -1 +0,0 @@
-export declare const setupViewportLabelDrag: (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string) => (() => void);

package/src/lib/viewport/label/isViewportLabelDragging.ts

@@ -1,9 +0,0 @@
-// Global flag to prevent refreshViewportLabels during drag
-let globalIsDragging = false;
-
-export const isViewportLabelDragging = (): boolean => globalIsDragging;
-
-export const setViewportLabelDragging = (isDragging: boolean): void => {
-  globalIsDragging = isDragging;
-};
-

package/src/lib/viewport/label/setupViewportLabelDrag.ts

@@ -1,98 +0,0 @@
-import { sendPostMessage } from "../../post-message/sendPostMessage";
-import { getLabelPosition } from "./helpers/getLabelPosition";
-import { getTransformValues } from "./helpers/getTransformValues";
-import { getZoomValue } from "./helpers/getZoomValue";
-import { setViewportLabelDragging } from "./isViewportLabelDragging";
-
-export const setupViewportLabelDrag = (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string): (() => void) => {
-  let isDragging = false;
-  let startX = 0;
-  let startY = 0;
-  let initialTransform = { x: 0, y: 0 };
-  let initialLabelPosition = { x: 0, y: 0 };
-
-  // Get the parent group element that contains the label
-  const labelGroup = labelElement.parentElement as unknown as SVGGElement;
-
-  const startDrag = (event: MouseEvent): void => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    isDragging = true;
-    setViewportLabelDragging(true);
-    startX = event.clientX;
-    startY = event.clientY;
-    initialTransform = getTransformValues(viewportElement);
-    initialLabelPosition = getLabelPosition(labelGroup);
-  };
-
-  const handleDrag = (event: MouseEvent): void => {
-    if (!isDragging) return;
-
-    const zoom = getZoomValue();
-
-    // Calculate mouse delta
-    const rawDeltaX = event.clientX - startX;
-    const rawDeltaY = event.clientY - startY;
-
-    // Adjust delta for zoom level
-    const deltaX = rawDeltaX / zoom;
-    const deltaY = rawDeltaY / zoom;
-
-    const newX = initialTransform.x + deltaX;
-    const newY = initialTransform.y + deltaY;
-
-    // Update label position with raw delta (labels are in screen space)
-    const newLabelX = initialLabelPosition.x + rawDeltaX;
-    const newLabelY = initialLabelPosition.y + rawDeltaY;
-    labelGroup.setAttribute("transform", `translate(${newLabelX}, ${newLabelY})`);
-
-    // Update viewport position with zoom-adjusted delta
-    viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
-  };
-
-  const stopDrag = (event: MouseEvent): void => {
-    if (!isDragging) return;
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    isDragging = false;
-    setViewportLabelDragging(false);
-
-    const finalTransform = getTransformValues(viewportElement);
-
-    // Trigger refresh after drag completes to update highlight frame and labels
-    // biome-ignore lint/suspicious/noExplicitAny: global window extension
-    const nodeTools = (window as any).nodeTools;
-    if (nodeTools?.refreshHighlightFrame) {
-      nodeTools.refreshHighlightFrame();
-    }
-
-    // Notify parent about the new position
-    sendPostMessage("viewport-position-changed", {
-      viewportName,
-      x: finalTransform.x,
-      y: finalTransform.y,
-    });
-  };
-
-  const cancelDrag = (): void => {
-    isDragging = false;
-    setViewportLabelDragging(false);
-  };
-
-  // Attach event listeners
-  labelElement.addEventListener("mousedown", startDrag);
-  document.addEventListener("mousemove", handleDrag);
-  document.addEventListener("mouseup", stopDrag);
-  window.addEventListener("blur", cancelDrag);
-
-  // Return cleanup function
-  return () => {
-    labelElement.removeEventListener("mousedown", startDrag);
-    document.removeEventListener("mousemove", handleDrag);
-    document.removeEventListener("mouseup", stopDrag);
-    window.removeEventListener("blur", cancelDrag);
-  };
-};