Genarrative/src/components/image-editor/ImageCanvasRasterEditModel.test.ts

import { describe, expect, it } from 'vitest';

import {
  buildCropExpandInsetsFromFrame,
  buildCropExpandGeometry,
  buildCropExpandLayerPatch,
  parseCropExpandInsetValue,
} from './ImageCanvasRasterEditModel';

describe('ImageCanvasRasterEditModel', () => {
  it('builds transparent expansion geometry around the source image', () => {
    expect(
      buildCropExpandGeometry({
        width: 100,
        height: 80,
        insets: { left: 10, top: 6, right: 12, bottom: 8 },
      }),
    ).toEqual({
      outputWidth: 122,
      outputHeight: 94,
      sourceX: 0,
      sourceY: 0,
      sourceWidth: 100,
      sourceHeight: 80,
      targetX: 10,
      targetY: 6,
    });
  });

  it('builds crop geometry and moves the layer origin to the cropped bounds', () => {
    const insets = { left: -10, top: -6, right: -12, bottom: -8 };
    expect(
      buildCropExpandGeometry({
        width: 100,
        height: 80,
        insets,
      }),
    ).toMatchObject({
      outputWidth: 78,
      outputHeight: 66,
      sourceX: 10,
      sourceY: 6,
      sourceWidth: 78,
      sourceHeight: 66,
      targetX: 0,
      targetY: 0,
    });
    expect(
      buildCropExpandLayerPatch({
        layerX: 50,
        layerY: 40,
        insets,
        outputWidth: 78,
        outputHeight: 66,
      }),
    ).toEqual({
      x: 60,
      y: 46,
      width: 78,
      height: 66,
      originalWidth: 78,
      originalHeight: 66,
    });
  });

  it('parses integer crop-expand values and rejects invalid input', () => {
    expect(parseCropExpandInsetValue(' 12 ')).toBe(12);
    expect(parseCropExpandInsetValue('')).toBe(0);
    expect(() => parseCropExpandInsetValue('左')).toThrow('裁扩数值必须是整数');
  });

  it('converts a dragged canvas frame into transparent crop-expand insets', () => {
    expect(
      buildCropExpandInsetsFromFrame({
        layer: {
          x: 100,
          y: 80,
          width: 200,
          height: 120,
          originalWidth: 400,
          originalHeight: 240,
        },
        frame: {
          x: 90,
          y: 90,
          width: 240,
          height: 90,
        },
      }),
    ).toEqual({
      left: 20,
      top: -20,
      right: 60,
      bottom: -40,
    });
  });
});