image-studio/editor/transform-targets.test.ts

import { describe, expect, test } from "bun:test";
import type { ImageDocument } from "@core/document";
import { resolveTransformTargetBounds, selectedTransformTarget } from "./transform-targets";
import { applyTransformTargetBounds } from "@commands/transform-document";

const document: ImageDocument = {
  inpaintRegions: [],
  id: "d1",
  name: "Test",
  version: 1,
  assets: [{ id: "asset-1", name: "Image", mimeType: "image/png", source: "asset://image", intrinsicSize: { w: 200, h: 100 } }],
  artboards: [
    {
      id: "a1",
      name: "Artboard",
      bounds: { x: 0, y: 0, w: 100, h: 80 },
      backgroundColor: "transparent",
      visible: true,
      locked: false,
      layers: [
        {
          id: "l1",
          type: "image",
          name: "Image Layer",
          visible: true,
          locked: false,
          opacity: 1,
          assetId: "asset-1",
          transform: { position: { x: 10, y: 20 }, scale: { x: 0.5, y: 2 }, rotation: 0 },
        },
      ],
    },
  ],
};

describe("transform targets", () => {
  test("selects layer target before artboard target", () => {
    expect(selectedTransformTarget(document, { artboardId: "a1", layerIds: ["l1"] })).toEqual({ type: "layer", id: "l1" });
  });

  test("resolves artboard bounds", () => {
    expect(resolveTransformTargetBounds(document, { type: "artboard", id: "a1" })).toEqual({ x: 0, y: 0, w: 100, h: 80 });
  });

  test("resolves image layer bounds from intrinsic asset dimensions", () => {
    expect(resolveTransformTargetBounds(document, { type: "layer", id: "l1" })).toEqual({ x: 10, y: 20, w: 100, h: 200 });
  });

  test("resolves group bounds from descendant layers", () => {
    expect(resolveTransformTargetBounds(groupDocument(), { type: "layer", id: "g1" })).toEqual({ x: 10, y: 20, w: 300, h: 200 });
  });

  test("applies image layer bounds to transform", () => {
    const next = applyTransformTargetBounds(document, { type: "layer", id: "l1" }, { x: 30, y: 40, w: 400, h: 50 });
    const layer = next.artboards[0]?.layers[0];

    expect(layer?.transform).toEqual({ position: { x: 30, y: 40 }, scale: { x: 2, y: 0.5 }, rotation: 0 });
  });

  test("applies visible bounds to a cropped layer while retaining its source crop", () => {
    const cropped = { ...document, artboards: [{ ...document.artboards[0]!, layers: [{ ...document.artboards[0]!.layers[0]!, sourceRect: { x: 10, y: 5, w: 40, h: 20 } }] }] };
    const next = applyTransformTargetBounds(cropped, { type: "layer", id: "l1" }, { x: 100, y: 80, w: 200, h: 60 });
    expect(next.artboards[0]?.layers[0]).toMatchObject({ sourceRect: { x: 10, y: 5, w: 40, h: 20 }, transform: { position: { x: 50, y: 65 }, scale: { x: 5, y: 3 } } });
    expect(resolveTransformTargetBounds(next, { type: "layer", id: "l1" })).toEqual({ x: 100, y: 80, w: 200, h: 60 });
  });

  test("keeps attached mask bounds in sync with transformed layers", () => {
    const maskedDocument: ImageDocument = {
      ...document,
      assets: [...document.assets, { id: "mask-asset", name: "Mask", mimeType: "image/png", source: "asset://mask", intrinsicSize: { w: 200, h: 100 } }],
      artboards: [
        {
          ...document.artboards[0]!,
          layers: [
            {
              id: "mask",
              type: "raster",
              name: "Mask",
              visible: true,
              locked: false,
              opacity: 1,
              assetId: "mask-asset",
              transform: { position: { x: 10, y: 20 }, scale: { x: 0.5, y: 2 }, rotation: 0 },
            },
            { ...document.artboards[0]!.layers[0]!, clippingMask: { maskLayerId: "mask" } },
          ],
        },
      ],
    };

    const next = applyTransformTargetBounds(maskedDocument, { type: "layer", id: "l1" }, { x: 30, y: 40, w: 400, h: 50 });

    expect(next.artboards[0]?.layers[0]?.transform).toEqual({ position: { x: 30, y: 40 }, scale: { x: 2, y: 0.5 }, rotation: 0 });
    expect(next.artboards[0]?.layers[1]?.transform).toEqual({ position: { x: 30, y: 40 }, scale: { x: 2, y: 0.5 }, rotation: 0 });
  });

  test("applies group bounds to descendant layer transforms", () => {
    const next = applyTransformTargetBounds(groupDocument(), { type: "layer", id: "g1" }, { x: 20, y: 40, w: 600, h: 100 });
    const group = next.artboards[0]?.layers[0];
    const first = group?.type === "group" ? group.children[0] : undefined;
    const second = group?.type === "group" ? group.children[1] : undefined;

    expect(first?.transform).toEqual({ position: { x: 20, y: 40 }, scale: { x: 1, y: 1 }, rotation: 0 });
    expect(second?.transform).toEqual({ position: { x: 420, y: 90 }, scale: { x: 1, y: 0.5 }, rotation: 0 });
  });

  test("applies artboard bounds", () => {
    const next = applyTransformTargetBounds(document, { type: "artboard", id: "a1" }, { x: 10, y: 20, w: 200, h: 160 });
    expect(next.artboards[0]?.bounds).toEqual({ x: 10, y: 20, w: 200, h: 160 });
  });
});

function groupDocument(): ImageDocument {
  return {
    ...document,
    artboards: [
      {
        ...document.artboards[0]!,
        layers: [
          {
            id: "g1",
            type: "group",
            name: "Group",
            visible: true,
            locked: false,
            opacity: 1,
            transform: { position: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, rotation: 0 },
            children: [
              document.artboards[0]!.layers[0]!,
              {
                ...document.artboards[0]!.layers[0]!,
                id: "l2",
                name: "Second Layer",
                transform: { position: { x: 210, y: 120 }, scale: { x: 0.5, y: 1 }, rotation: 0 },
              },
            ],
          },
        ],
      },
    ],
  };
}