@node-edit-utils/core 2.3.2 → 2.3.4

package/src/lib/viewport/label/removeViewportLabel.test.ts

@@ -0,0 +1,67 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as getViewportLabelOverlayModule from "./getViewportLabelOverlay";
+import { removeViewportLabel } from "./removeViewportLabel";
+
+vi.mock("./getViewportLabelOverlay");
+
+describe("removeViewportLabel", () => {
+  let overlay: SVGSVGElement;
+  let viewportElement: HTMLElement;
+
+  beforeEach(() => {
+    overlay = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    overlay.classList.add("viewport-labels-overlay");
+    document.body.appendChild(overlay);
+
+    viewportElement = document.createElement("div");
+    viewportElement.setAttribute("data-viewport-name", "test-viewport");
+    document.body.appendChild(viewportElement);
+
+    vi.mocked(getViewportLabelOverlayModule.getViewportLabelOverlay).mockReturnValue(overlay);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(overlay);
+    document.body.removeChild(viewportElement);
+    vi.clearAllMocks();
+  });
+
+  it("should remove label group when viewport name exists", () => {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("data-viewport-name", "test-viewport");
+    overlay.appendChild(group);
+
+    removeViewportLabel(viewportElement);
+
+    expect(overlay.querySelector(`[data-viewport-name="test-viewport"]`)).toBeNull();
+  });
+
+  it("should do nothing when viewport name doesn't exist", () => {
+    viewportElement.removeAttribute("data-viewport-name");
+
+    expect(() => {
+      removeViewportLabel(viewportElement);
+    }).not.toThrow();
+  });
+
+  it("should do nothing when label group doesn't exist", () => {
+    removeViewportLabel(viewportElement);
+
+    expect(overlay.querySelector(`[data-viewport-name="test-viewport"]`)).toBeNull();
+  });
+
+  it("should only remove the matching label group", () => {
+    const group1 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group1.setAttribute("data-viewport-name", "test-viewport");
+    overlay.appendChild(group1);
+
+    const group2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group2.setAttribute("data-viewport-name", "other-viewport");
+    overlay.appendChild(group2);
+
+    removeViewportLabel(viewportElement);
+
+    expect(overlay.querySelector(`[data-viewport-name="test-viewport"]`)).toBeNull();
+    expect(overlay.querySelector(`[data-viewport-name="other-viewport"]`)).toBe(group2);
+  });
+});

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

@@ -0,0 +1,20 @@
+import { getViewportLabelOverlay } from "./getViewportLabelOverlay";
+
+/**
+ * Removes a viewport label for a single viewport element.
+ * @param viewportElement - The viewport element to remove the label for
+ */
+export const removeViewportLabel = (viewportElement: HTMLElement): void => {
+  const viewportName = viewportElement.getAttribute("data-viewport-name");
+
+  if (!viewportName) {
+    return;
+  }
+
+  const overlay = getViewportLabelOverlay();
+  const labelGroup = overlay.querySelector(`[data-viewport-name="${viewportName}"]`);
+
+  if (labelGroup) {
+    labelGroup.remove();
+  }
+};

package/src/lib/viewport/label/setupViewportDrag.test.ts

@@ -0,0 +1,249 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DragState } from "../../helpers/createDragHandler";
+import * as createDragHandlerModule from "../../helpers/createDragHandler";
+import * as getNodeToolsModule from "../../helpers/getNodeTools";
+import * as sendPostMessageModule from "../../post-message/sendPostMessage";
+import * as getLabelPositionModule from "./helpers/getLabelPosition";
+import * as getTransformValuesModule from "./helpers/getTransformValues";
+import * as getZoomValueModule from "./helpers/getZoomValue";
+import * as selectFirstViewportNodeModule from "./helpers/selectFirstViewportNode";
+import * as setViewportDraggingModule from "./isViewportDragging";
+import { setupViewportDrag } from "./setupViewportDrag";
+
+vi.mock("../../helpers/createDragHandler");
+vi.mock("../../helpers/getNodeTools");
+vi.mock("../../post-message/sendPostMessage");
+vi.mock("./helpers/getLabelPosition");
+vi.mock("./helpers/getTransformValues");
+vi.mock("./helpers/getZoomValue");
+vi.mock("./helpers/selectFirstViewportNode");
+vi.mock("./isViewportDragging");
+
+describe("setupViewportDrag", () => {
+  let labelElement: SVGTextElement;
+  let labelGroup: SVGGElement;
+  let viewportElement: HTMLElement;
+  let mockCleanup: ReturnType<typeof vi.fn>;
+  let mockNodeTools: {
+    refreshHighlightFrame: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    labelGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    labelElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    labelGroup.appendChild(labelElement);
+
+    viewportElement = document.createElement("div");
+    viewportElement.style.transform = "translate3d(100px, 200px, 0px)";
+    document.body.appendChild(viewportElement);
+
+    mockCleanup = vi.fn();
+    mockNodeTools = {
+      refreshHighlightFrame: vi.fn(),
+    };
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockReturnValue(mockCleanup);
+    vi.mocked(getNodeToolsModule.getNodeTools).mockReturnValue(
+      mockNodeTools as unknown as ReturnType<typeof getNodeToolsModule.getNodeTools>
+    );
+    vi.mocked(sendPostMessageModule.sendPostMessage).mockImplementation(() => {});
+    vi.mocked(getLabelPositionModule.getLabelPosition).mockReturnValue({ x: 50, y: 100 });
+    vi.mocked(getTransformValuesModule.getTransformValues).mockReturnValue({ x: 100, y: 200 });
+    vi.mocked(getZoomValueModule.getZoomValue).mockReturnValue(1);
+    vi.mocked(selectFirstViewportNodeModule.selectFirstViewportNode).mockImplementation(() => {});
+    vi.mocked(setViewportDraggingModule.setViewportDragging).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    document.body.removeChild(viewportElement);
+    vi.clearAllMocks();
+  });
+
+  it("should return cleanup function from createDragHandler", () => {
+    const cleanup = setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    expect(cleanup).toBe(mockCleanup);
+  });
+
+  it("should set dragging to true on drag start", () => {
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mousedown");
+    const mockState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(mockEvent, mockState);
+
+    expect(setViewportDraggingModule.setViewportDragging).toHaveBeenCalledWith(true);
+  });
+
+  it("should select first viewport node on drag start", () => {
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mousedown");
+    const mockState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(mockEvent, mockState);
+
+    expect(selectFirstViewportNodeModule.selectFirstViewportNode).toHaveBeenCalledWith(viewportElement);
+  });
+
+  it("should update viewport and label positions during drag", () => {
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+    let onDragCallback: ((event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      onDragCallback = callbacks.onDrag;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    // Call onStart first to capture initial positions
+    const startEvent = new MouseEvent("mousedown");
+    const startState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(startEvent, startState);
+
+    const mockEvent = new MouseEvent("mousemove");
+    const mockState: DragState & { deltaX: number; deltaY: number } = {
+      isDragging: true,
+      hasDragged: true,
+      startX: 0,
+      startY: 0,
+      deltaX: 50,
+      deltaY: 100,
+    };
+    onDragCallback?.(mockEvent, mockState);
+
+    // Label position should use raw delta (screen space)
+    expect(labelGroup.getAttribute("transform")).toBe("translate(100, 200)");
+    // Viewport position should use zoom-adjusted delta (canvas space)
+    expect(viewportElement.style.transform).toBe("translate3d(150px, 300px, 0)");
+  });
+
+  it("should account for zoom level during drag", () => {
+    vi.mocked(getZoomValueModule.getZoomValue).mockReturnValue(2);
+
+    let onStartCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+    let onDragCallback: ((event: MouseEvent, state: DragState & { deltaX: number; deltaY: number }) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStartCallback = callbacks.onStart;
+      onDragCallback = callbacks.onDrag;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    // Call onStart first to capture initial positions
+    const startEvent = new MouseEvent("mousedown");
+    const startState: DragState = { isDragging: true, hasDragged: false, startX: 0, startY: 0 };
+    onStartCallback?.(startEvent, startState);
+
+    const mockEvent = new MouseEvent("mousemove");
+    const mockState: DragState & { deltaX: number; deltaY: number } = {
+      isDragging: true,
+      hasDragged: true,
+      startX: 0,
+      startY: 0,
+      deltaX: 100,
+      deltaY: 200,
+    };
+    onDragCallback?.(mockEvent, mockState);
+
+    // Delta should be divided by zoom (100/2 = 50, 200/2 = 100)
+    expect(viewportElement.style.transform).toBe("translate3d(150px, 300px, 0)");
+  });
+
+  it("should set dragging to false and refresh highlight on drag stop with hasDragged", () => {
+    let onStopCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStopCallback = callbacks.onStop;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mouseup");
+    const mockState: DragState = { isDragging: false, hasDragged: true, startX: 0, startY: 0 };
+    onStopCallback?.(mockEvent, mockState);
+
+    expect(setViewportDraggingModule.setViewportDragging).toHaveBeenCalledWith(false);
+    expect(mockNodeTools.refreshHighlightFrame).toHaveBeenCalled();
+  });
+
+  it("should send postMessage with final position on drag stop when hasDragged is true", () => {
+    vi.mocked(getTransformValuesModule.getTransformValues).mockReturnValue({ x: 150, y: 250 });
+
+    let onStopCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStopCallback = callbacks.onStop;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mouseup");
+    const mockState: DragState = { isDragging: false, hasDragged: true, startX: 0, startY: 0 };
+    onStopCallback?.(mockEvent, mockState);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("viewport-position-changed", {
+      viewportName: "test-viewport",
+      x: 150,
+      y: 250,
+    });
+  });
+
+  it("should send postMessage with final position on drag stop even when hasDragged is false", () => {
+    vi.mocked(getTransformValuesModule.getTransformValues).mockReturnValue({ x: 100, y: 200 });
+
+    let onStopCallback: ((event: MouseEvent, state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onStopCallback = callbacks.onStop;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockEvent = new MouseEvent("mouseup");
+    const mockState: DragState = { isDragging: false, hasDragged: false, startX: 0, startY: 0 };
+    onStopCallback?.(mockEvent, mockState);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("viewport-position-changed", {
+      viewportName: "test-viewport",
+      x: 100,
+      y: 200,
+    });
+  });
+
+  it("should set dragging to false on cancel", () => {
+    let onCancelCallback: ((state: DragState) => void) | undefined;
+
+    vi.mocked(createDragHandlerModule.createDragHandler).mockImplementation((_element, callbacks) => {
+      onCancelCallback = callbacks.onCancel;
+      return mockCleanup;
+    });
+
+    setupViewportDrag(labelElement, viewportElement, "test-viewport");
+
+    const mockState: DragState = { isDragging: false, hasDragged: false, startX: 0, startY: 0 };
+    onCancelCallback?.(mockState);
+
+    expect(setViewportDraggingModule.setViewportDragging).toHaveBeenCalledWith(false);
+  });
+});

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

@@ -0,0 +1,70 @@
+import { createDragHandler } from "../../helpers/createDragHandler";
+import { getNodeTools } from "../../helpers/getNodeTools";
+import { sendPostMessage } from "../../post-message/sendPostMessage";
+import { getLabelPosition } from "./helpers/getLabelPosition";
+import { getTransformValues } from "./helpers/getTransformValues";
+import { getZoomValue } from "./helpers/getZoomValue";
+import { selectFirstViewportNode } from "./helpers/selectFirstViewportNode";
+import { setViewportDragging } from "./isViewportDragging";
+
+export const setupViewportDrag = (labelElement: SVGTextElement, viewportElement: HTMLElement, viewportName: string): (() => void) => {
+  // Get the parent group element that contains the label
+  const labelGroup = labelElement.parentElement as unknown as SVGGElement;
+
+  // Track initial positions for calculations
+  let initialTransform = { x: 0, y: 0 };
+  let initialLabelPosition = { x: 0, y: 0 };
+
+  return createDragHandler(labelElement, {
+    onStart: () => {
+      setViewportDragging(true);
+      initialTransform = getTransformValues(viewportElement);
+      initialLabelPosition = getLabelPosition(labelGroup);
+      selectFirstViewportNode(viewportElement);
+    },
+    onDrag: (_event, { deltaX, deltaY }) => {
+      const zoom = getZoomValue();
+
+      // Adjust delta for zoom level (viewport is in canvas space)
+      const deltaXZoomed = deltaX / zoom;
+      const deltaYZoomed = deltaY / zoom;
+
+      // Calculate new positions
+      const newX = initialTransform.x + deltaXZoomed;
+      const newY = initialTransform.y + deltaYZoomed;
+
+      // Update label position with raw delta (labels are in screen space)
+      const newLabelX = initialLabelPosition.x + deltaX;
+      const newLabelY = initialLabelPosition.y + deltaY;
+      labelGroup.setAttribute("transform", `translate(${newLabelX}, ${newLabelY})`);
+
+      // Update viewport position with zoom-adjusted delta
+      viewportElement.style.transform = `translate3d(${newX}px, ${newY}px, 0)`;
+    },
+    onStop: (_event, { hasDragged }) => {
+      setViewportDragging(false);
+
+      const finalTransform = getTransformValues(viewportElement);
+
+      // If it was a drag, handle drag completion
+      if (hasDragged) {
+        // Trigger refresh after drag completes to update highlight frame and labels
+        const nodeTools = getNodeTools();
+        if (nodeTools?.refreshHighlightFrame) {
+          nodeTools.refreshHighlightFrame();
+        }
+      }
+
+      // Always notify parent about the new position on drag stop
+      sendPostMessage("viewport-position-changed", {
+        viewportName,
+        x: finalTransform.x,
+        y: finalTransform.y,
+      });
+    },
+    onCancel: () => {
+      setViewportDragging(false);
+    },
+    onPreventClick: () => {},
+  });
+};

package/src/lib/viewport/resize/createResizeHandle.test.ts

@@ -0,0 +1,37 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createResizeHandle } from "./createResizeHandle";
+
+describe("createResizeHandle", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should create a resize handle element", () => {
+    const handle = createResizeHandle(container);
+    expect(handle).toBeInstanceOf(HTMLElement);
+  });
+
+  it("should have the resize-handle class", () => {
+    const handle = createResizeHandle(container);
+    expect(handle.classList.contains("resize-handle")).toBe(true);
+  });
+
+  it("should append handle to container", () => {
+    const handle = createResizeHandle(container);
+    expect(container.contains(handle)).toBe(true);
+    expect(container.children).toContain(handle);
+  });
+
+  it("should return the created handle element", () => {
+    const handle = createResizeHandle(container);
+    const foundHandle = container.querySelector(".resize-handle");
+    expect(handle).toBe(foundHandle);
+  });
+});

package/src/lib/viewport/resize/createResizePresets.test.ts

@@ -0,0 +1,75 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { RESIZE_PRESETS } from "../constants";
+import { createResizePresets } from "./createResizePresets";
+
+describe("createResizePresets", () => {
+  let container: HTMLElement;
+  let resizeHandle: HTMLElement;
+  const mockUpdateWidth = vi.fn();
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    resizeHandle = document.createElement("div");
+    container.appendChild(resizeHandle);
+    document.body.appendChild(container);
+    mockUpdateWidth.mockClear();
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should create presets container", () => {
+    const presets = createResizePresets(resizeHandle, container, mockUpdateWidth);
+    expect(presets).toBeInstanceOf(HTMLElement);
+    expect(presets.classList.contains("resize-presets")).toBe(true);
+  });
+
+  it("should append presets to resize handle", () => {
+    const presets = createResizePresets(resizeHandle, container, mockUpdateWidth);
+    expect(resizeHandle.contains(presets)).toBe(true);
+  });
+
+  it("should create buttons for all presets", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll(".resize-preset-button");
+    expect(buttons).toHaveLength(RESIZE_PRESETS.length);
+  });
+
+  it("should set correct text content for each button", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    RESIZE_PRESETS.forEach((preset, index) => {
+      expect(buttons[index].textContent).toBe(preset.name);
+    });
+  });
+
+  it("should call updateWidth with correct rawValue when button is clicked", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+
+    const firstPreset = RESIZE_PRESETS[0];
+    buttons[0].click();
+
+    expect(mockUpdateWidth).toHaveBeenCalledTimes(1);
+    expect(mockUpdateWidth).toHaveBeenCalledWith(container, firstPreset.rawValue);
+  });
+
+  it("should handle clicks on all preset buttons", () => {
+    createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const buttons = resizeHandle.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+
+    buttons.forEach((button, index) => {
+      button.click();
+      expect(mockUpdateWidth).toHaveBeenCalledWith(container, RESIZE_PRESETS[index].rawValue);
+    });
+
+    expect(mockUpdateWidth).toHaveBeenCalledTimes(RESIZE_PRESETS.length);
+  });
+
+  it("should return the presets element", () => {
+    const presets = createResizePresets(resizeHandle, container, mockUpdateWidth);
+    const foundPresets = resizeHandle.querySelector(".resize-presets");
+    expect(presets).toBe(foundPresets);
+  });
+});

package/src/lib/viewport/resize/updateActivePreset.test.ts

@@ -0,0 +1,92 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { RESIZE_PRESETS } from "../constants";
+import { updateActivePreset } from "./updateActivePreset";
+
+describe("updateActivePreset", () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should add is-active class to matching preset button", () => {
+    const presets = document.createElement("div");
+    RESIZE_PRESETS.forEach(() => {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    });
+    container.appendChild(presets);
+
+    const mobilePreset = RESIZE_PRESETS[0];
+    updateActivePreset(container, mobilePreset.rawValue);
+
+    const buttons = container.querySelectorAll<HTMLButtonElement>(".resize-preset-button");
+    expect(buttons[0].classList.contains("is-active")).toBe(true);
+  });
+
+  it("should remove is-active class from non-matching buttons", () => {
+    const presets = document.createElement("div");
+    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");
+    buttons[1].classList.add("is-active");
+
+    const tabletPreset = RESIZE_PRESETS[1];
+    updateActivePreset(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");
+    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");
+
+    updateActivePreset(container, 999);
+
+    buttons.forEach((button) => {
+      expect(button.classList.contains("is-active")).toBe(false);
+    });
+  });
+
+  it("should handle empty container", () => {
+    expect(() => {
+      updateActivePreset(container, 100);
+    }).not.toThrow();
+  });
+
+  it("should handle container with fewer buttons than presets", () => {
+    const presets = document.createElement("div");
+    // Create only 2 buttons when there are 5 presets
+    for (let i = 0; i < 2; i++) {
+      const button = document.createElement("button");
+      button.className = "resize-preset-button";
+      presets.appendChild(button);
+    }
+    container.appendChild(presets);
+
+    expect(() => {
+      updateActivePreset(container, RESIZE_PRESETS[0].rawValue);
+    }).not.toThrow();
+  });
+});

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

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import { RESIZE_CONFIG } from "../constants";
+import { calcConstrainedWidth } from "./calcConstrainedWidth";
+
+describe("calcConstrainedWidth", () => {
+  it("should return startWidth + deltaX when within bounds", () => {
+    const startWidth = 100;
+    const deltaX = 50;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(150);
+  });
+
+  it("should return minWidth when result is below minimum", () => {
+    const startWidth = 10;
+    const deltaX = -10;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(RESIZE_CONFIG.minWidth);
+  });
+
+  it("should return maxWidth when result is above maximum", () => {
+    const startWidth = 2500;
+    const deltaX = 100;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(RESIZE_CONFIG.maxWidth);
+  });
+
+  it("should round the result", () => {
+    const startWidth = 100;
+    const deltaX = 50.7;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(151);
+  });
+
+  it("should handle negative deltaX correctly", () => {
+    const startWidth = 200;
+    const deltaX = -50;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(150);
+  });
+
+  it("should handle zero deltaX", () => {
+    const startWidth = 100;
+    const deltaX = 0;
+    const result = calcConstrainedWidth(startWidth, deltaX);
+    expect(result).toBe(100);
+  });
+});