image-studio/input/transform-controls.test.ts

import { describe, expect, test } from "bun:test";
import { commandIds } from "@commands/ids";
import { createInitialAppState } from "@editor/initial-state";
import type { PointerInputEvent } from "./pointer";
import { createTransformControlsInputController, hitTestArtboardTransformHandle } from "./transform-controls";

const ignoredState = undefined as never;

describe("transform controls input", () => {
  test("hit tests artboard handles and body", () => {
    const viewport = { center: { x: 0, y: 0 }, zoom: 1, rotation: 0, size: { w: 200, h: 200 } };
    const bounds = { x: -50, y: -50, w: 100, h: 100 };

    expect(hitTestArtboardTransformHandle({ x: 50, y: 50 }, bounds, viewport)).toBe("nw");
    expect(hitTestArtboardTransformHandle({ x: 100, y: 100 }, bounds, viewport)).toBe("body");
    expect(hitTestArtboardTransformHandle({ x: 10, y: 10 }, bounds, viewport)).toBeUndefined();
  });

  test("does not transform while temporary pan is active", () => {
    const state = {
      ...createInitialAppState("Test"),
      document: {
        ...createInitialAppState("Test").document,
        artboards: [{ id: "a1", name: "Artboard", bounds: { x: -50, y: -50, w: 100, h: 100 }, backgroundColor: "transparent", visible: true, locked: false, layers: [] }],
      },
      editor: {
        ...createInitialAppState("Test").editor,
        viewport: { center: { x: 0, y: 0 }, zoom: 1, rotation: 0, size: { w: 200, h: 200 } },
        selection: { artboardId: "a1", layerIds: [] },
        tools: { activeTool: "select" as const, interactionMode: { type: "temporary-pan" as const, previousTool: "select" as const } },
      },
    };
    const dispatched: unknown[] = [];
    const controller = createTransformControlsInputController({
      getDocument: () => state.document,
      getEditor: () => state.editor,
      dispatch: (commandId, payload) => {
        dispatched.push({ commandId, payload });
        return ignoredState;
      },
    });

    expect(controller.pointerDown(pointerEvent({ position: { x: 100, y: 100 }, buttons: 1 }))).toBe(false);
    expect(dispatched).toEqual([]);
  });

  test("crop tool resizes from handles but does not move body", () => {
    const state = {
      ...createInitialAppState("Test"),
      document: {
        ...createInitialAppState("Test").document,
        artboards: [{ id: "a1", name: "Artboard", bounds: { x: -50, y: -50, w: 100, h: 100 }, backgroundColor: "transparent", visible: true, locked: false, layers: [] }],
      },
      editor: {
        ...createInitialAppState("Test").editor,
        viewport: { center: { x: 0, y: 0 }, zoom: 1, rotation: 0, size: { w: 200, h: 200 } },
        selection: { artboardId: "a1", layerIds: [] },
        tools: { activeTool: "crop" as const, interactionMode: { type: "tool" as const, tool: "crop" as const } },
      },
    };
    const dispatched: unknown[] = [];
    const controller = createTransformControlsInputController({
      getDocument: () => state.document,
      getEditor: () => state.editor,
      dispatch: (commandId, payload) => {
        dispatched.push({ commandId, payload });
        return ignoredState;
      },
    });

    expect(controller.pointerDown(pointerEvent({ position: { x: 100, y: 100 }, buttons: 1 }))).toBe(false);
    expect(controller.pointerDown(pointerEvent({ position: { x: 150, y: 150 }, buttons: 1 }))).toBe(true);
  });

  test("dispatches transform lifecycle for selected artboard", () => {
    let state = {
      ...createInitialAppState("Test"),
      document: {
        ...createInitialAppState("Test").document,
        artboards: [{ id: "a1", name: "Artboard", bounds: { x: -50, y: -50, w: 100, h: 100 }, backgroundColor: "transparent", visible: true, locked: false, layers: [] }],
      },
      editor: {
        ...createInitialAppState("Test").editor,
        viewport: { center: { x: 0, y: 0 }, zoom: 1, rotation: 0, size: { w: 200, h: 200 } },
        selection: { artboardId: "a1", layerIds: [] },
      },
    };
    const dispatched: unknown[] = [];
    const controller = createTransformControlsInputController({
      getDocument: () => state.document,
      getEditor: () => state.editor,
      dispatch: (commandId, payload) => {
        dispatched.push({ commandId, payload });
        if (commandId === commandIds.transformBegin) state = { ...state, editor: { ...state.editor, transformSession: payload as never } };
        return ignoredState;
      },
    });

    expect(controller.pointerDown(pointerEvent({ position: { x: 100, y: 100 }, buttons: 1 }))).toBe(true);
    expect(controller.pointerMove(pointerEvent({ position: { x: 110, y: 120 }, buttons: 1, shiftKey: true }))).toBe(true);
    expect(controller.pointerUp(pointerEvent({ position: { x: 110, y: 120 }, buttons: 0 }))).toBe(true);
    expect(dispatched.map((event) => (event as { commandId: string }).commandId)).toEqual([
      commandIds.transformBegin,
      commandIds.transformUpdate,
      commandIds.transformEnd,
    ]);
    expect((dispatched[1] as { payload: { shiftKey: boolean } }).payload.shiftKey).toBe(true);
  });
});

function pointerEvent(overrides: Partial<PointerInputEvent>): PointerInputEvent {
  return {
    pointerId: 1,
    pointerType: "mouse",
    position: { x: 0, y: 0 },
    buttons: 0,
    altKey: false,
    ctrlKey: false,
    metaKey: false,
    shiftKey: false,
    ...overrides,
  };
}