image-studio/commands/document.test.ts

import { describe, expect, test } from "bun:test";
import { createInitialAppState } from "@editor/initial-state";
import {
  documentAddArtboardCommand,
  documentAddAssetCommand,
  documentAddGroupLayerCommand,
  documentAddImageLayerCommand,
  documentAddRasterLayerCommand,
  documentGroupLayersCommand,
  documentMoveLayerCommand,
  documentRemoveArtboardCommand,
  documentRemoveLayerCommand,
  documentRenameArtboardCommand,
  documentRenameLayerCommand,
  documentSetArtboardBoundsCommand,
  documentSetArtboardLockedCommand,
  documentSetArtboardVisibleCommand,
  documentSetLayerClippingMaskCommand,
  documentSetLayerLockedCommand,
  documentSetLayerVisibleCommand,
  documentUpdateAssetSourceCommand,
  documentUngroupLayerCommand,
} from "./document";

describe("document commands", () => {
  test("adds transparent artboard", () => {
    const next = documentAddArtboardCommand.execute(
      { state: createInitialAppState("Test") },
      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
    );

    expect(next.document.artboards).toEqual([
      {
        id: "a1",
        name: "Artboard 1",
        bounds: { x: 0, y: 0, w: 320, h: 240 },
        backgroundColor: "transparent",
        visible: true,
        locked: false,
        layers: [],
      },
    ]);
  });

  test("adds assets", () => {
    const next = documentAddAssetCommand.execute(
      { state: createInitialAppState("Test") },
      { asset: { id: "asset-1", name: "Image", mimeType: "image/png", source: "blob:test", intrinsicSize: { w: 100, h: 50 } } },
    );

    expect(next.document.assets).toEqual([
      { id: "asset-1", name: "Image", mimeType: "image/png", source: "blob:test", intrinsicSize: { w: 100, h: 50 } },
    ]);
  });

  test("updates asset sources", () => {
    const state = documentAddAssetCommand.execute(
      { state: createInitialAppState("Test") },
      { asset: { id: "asset-1", name: "Image", mimeType: "image/png", source: "old", intrinsicSize: { w: 100, h: 50 } } },
    );

    const next = documentUpdateAssetSourceCommand.execute({ state }, { assetId: "asset-1", source: "new" });

    expect(next.document.assets[0]?.source).toBe("new");
  });

  test("adds image layers to artboards", () => {
    const state = documentAddArtboardCommand.execute(
      { state: createInitialAppState("Test") },
      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
    );

    const next = documentAddImageLayerCommand.execute(
      { state },
      {
        artboardId: "a1",
        layer: {
          id: "l1",
          type: "image",
          name: "Image",
          visible: true,
          locked: false,
          opacity: 1,
          assetId: "asset-1",
          transform: { position: { x: 10, y: 20 }, scale: { x: 1, y: 1 }, rotation: 0 },
        },
      },
    );

    expect(next.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["l1"]);
  });

  test("adds raster layers to artboards", () => {
    const state = documentAddArtboardCommand.execute(
      { state: createInitialAppState("Test") },
      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
    );

    const next = documentAddRasterLayerCommand.execute(
      { state },
      {
        artboardId: "a1",
        layer: {
          id: "r1",
          type: "raster",
          name: "Raster",
          visible: true,
          locked: false,
          opacity: 1,
          assetId: "asset-1",
          transform: { position: { x: 10, y: 20 }, scale: { x: 1, y: 1 }, rotation: 0 },
        },
      },
    );

    expect(next.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["r1"]);
  });

  test("adds group layers", () => {
    const state = documentAddArtboardCommand.execute(
      { state: createInitialAppState("Test") },
      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
    );

    const next = documentAddGroupLayerCommand.execute({ state }, { artboardId: "a1", group: group("g1", "Group") });

    expect(next.document.artboards[0]?.layers).toEqual([group("g1", "Group")]);
    expect(next.editor.selection.layerIds).toEqual(["g1"]);
  });

  test("moves layers", () => {
    const state = documentWithLayers([group("a", "A"), group("b", "B"), group("c", "C")]);

    const next = documentMoveLayerCommand.execute({ state }, { layerId: "a", toArtboardId: "a1", toIndex: 2 });

    expect(next.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["b", "c", "a"]);
  });

  test("groups and ungroups top-level layers", () => {
    const state = documentWithLayers([group("a", "A"), group("b", "B"), group("c", "C")]);
    const grouped = documentGroupLayersCommand.execute({ state }, { artboardId: "a1", layerIds: ["a", "b"], group: group("g", "Group") });

    expect(grouped.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["g", "c"]);
    expect((grouped.document.artboards[0]?.layers[0] as { children: { id: string }[] }).children.map((layer) => layer.id)).toEqual(["a", "b"]);
    expect(grouped.editor.selection.layerIds).toEqual(["g"]);

    const ungrouped = documentUngroupLayerCommand.execute({ state: grouped }, { groupId: "g" });

    expect(ungrouped.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["a", "b", "c"]);
    expect(ungrouped.editor.selection.layerIds).toEqual(["a", "b"]);
  });

  test("removes layers", () => {
    const state = documentWithLayers([group("a", "A"), group("b", "B")]);
    const selectedState = { ...state, editor: { ...state.editor, selection: { artboardId: "a1", layerIds: ["a"] } } };
    const next = documentRemoveLayerCommand.execute({ state: selectedState }, { layerId: "a" });

    expect(next.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["b"]);
    expect(next.editor.selection.layerIds).toEqual([]);
  });

  test("removes artboards and clears artboard selection", () => {
    const state = documentAddArtboardCommand.execute(
      { state: createInitialAppState("Test") },
      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
    );
    const selectedState = { ...state, editor: { ...state.editor, selection: { artboardId: "a1", layerIds: [] } } };

    const next = documentRemoveArtboardCommand.execute({ state: selectedState }, { id: "a1" });

    expect(next.document.artboards).toEqual([]);
    expect(next.editor.selection).toEqual({ layerIds: [] });
  });

  test("renames artboards and layers", () => {
    const state = documentWithLayers([group("a", "A")]);
    const renamedArtboard = documentRenameArtboardCommand.execute({ state }, { id: "a1", name: "New Artboard" });
    const renamedLayer = documentRenameLayerCommand.execute({ state: renamedArtboard }, { layerId: "a", name: "New Layer" });

    expect(renamedLayer.document.artboards[0]?.name).toBe("New Artboard");
    expect(renamedLayer.document.artboards[0]?.layers[0]?.name).toBe("New Layer");
  });

  test("sets and clears layer clipping masks", () => {
    const state = documentWithLayers([group("mask", "Mask"), group("target", "Target")]);
    const masked = documentSetLayerClippingMaskCommand.execute({ state }, { layerId: "target", maskLayerId: "mask" });

    expect(masked.document.artboards[0]?.layers[1]?.clippingMask).toEqual({ maskLayerId: "mask" });

    const cleared = documentSetLayerClippingMaskCommand.execute({ state: masked }, { layerId: "target" });

    expect(cleared.document.artboards[0]?.layers[1]?.clippingMask).toBeUndefined();
  });

  test("moves masked layers directly after their mask", () => {
    const state = documentWithLayers([group("target", "Target"), group("other", "Other"), group("mask", "Mask")]);

    const masked = documentSetLayerClippingMaskCommand.execute({ state }, { layerId: "target", maskLayerId: "mask" });

    expect(masked.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["other", "mask", "target"]);
    expect(masked.document.artboards[0]?.layers[2]?.clippingMask).toEqual({ maskLayerId: "mask" });
  });

  test("sets artboard visibility and lock state", () => {
    const state = documentAddArtboardCommand.execute(
      { state: createInitialAppState("Test") },
      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
    );

    const hidden = documentSetArtboardVisibleCommand.execute({ state }, { id: "a1", visible: false });
    const locked = documentSetArtboardLockedCommand.execute({ state: hidden }, { id: "a1", locked: true });

    expect(locked.document.artboards[0]?.visible).toBe(false);
    expect(locked.document.artboards[0]?.locked).toBe(true);
  });

  test("sets layer visibility and lock state", () => {
    const state = documentWithLayers([group("a", "A")]);

    const hidden = documentSetLayerVisibleCommand.execute({ state }, { layerId: "a", visible: false });
    const locked = documentSetLayerLockedCommand.execute({ state: hidden }, { layerId: "a", locked: true });

    expect(locked.document.artboards[0]?.layers[0]?.visible).toBe(false);
    expect(locked.document.artboards[0]?.layers[0]?.locked).toBe(true);
  });

  test("sets artboard bounds", () => {
    const state = documentAddArtboardCommand.execute(
      { state: createInitialAppState("Test") },
      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
    );

    const next = documentSetArtboardBoundsCommand.execute({ state }, { id: "a1", bounds: { x: 10, y: 20, w: 640, h: 480 } });

    expect(next.document.artboards[0]?.bounds).toEqual({ x: 10, y: 20, w: 640, h: 480 });
  });
});

function documentWithLayers(layers: ReturnType<typeof group>[]) {
  return {
    ...createInitialAppState("Test"),
    document: {
      ...createInitialAppState("Test").document,
      artboards: [{ id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 }, backgroundColor: "transparent", visible: true, locked: false, layers }],
    },
    editor: {
      ...createInitialAppState("Test").editor,
      selection: { artboardId: "a1", layerIds: [] },
    },
  };
}

function group(id: string, name: string) {
  return {
    id,
    type: "group" as const,
    name,
    visible: true,
    locked: false,
    opacity: 1,
    transform: { position: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, rotation: 0 },
    children: [],
  };
}