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

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

import {
  CANVAS_WORLD_ORIGIN,
  canvasDisplayScaleToViewportScale,
  canvasDisplayViewportToViewport,
  createLayerFromAsset,
  DEFAULT_CANVAS_BACKGROUND_COLOR,
  formatCanvasDisplayScalePercent,
  hydrateCanvasGenerationDialog,
  hydrateLayer,
  normalizeAssetLibrary,
  normalizeCanvasBackgroundHex,
  resolveSnappedLayerPosition,
  serializeCanvasLayout,
  serializeLayer,
  splitCanvasLayoutItems,
  viewportScaleToCanvasDisplayScale,
  viewportToCanvasDisplayViewport,
} from './ImageCanvasEditorModel';
import type {
  CanvasGenerationDialogState,
  CanvasLayer,
  EditorAsset,
} from './ImageCanvasEditorTypes';

describe('ImageCanvasEditorModel', () => {
  it('maps viewport scale to the user-facing canvas zoom scale', () => {
    expect(canvasDisplayScaleToViewportScale(0.5)).toBe(0.25);
    expect(canvasDisplayScaleToViewportScale(1)).toBe(0.5);
    expect(canvasDisplayScaleToViewportScale(2)).toBe(1);
    expect(canvasDisplayScaleToViewportScale(0.05)).toBe(0.025);
    expect(viewportScaleToCanvasDisplayScale(0.25)).toBe(0.5);
    expect(viewportScaleToCanvasDisplayScale(0.5)).toBe(1);
    expect(viewportScaleToCanvasDisplayScale(1)).toBe(2);
    expect(formatCanvasDisplayScalePercent(0.025)).toBe('5%');
    expect(formatCanvasDisplayScalePercent(0.5)).toBe('100%');
    expect(formatCanvasDisplayScalePercent(Number.NaN)).toBe('100%');
    expect(
      viewportToCanvasDisplayViewport({ x: 10, y: 20, scale: 0.25 }),
    ).toEqual({ x: 10, y: 20, scale: 0.5 });
    expect(
      canvasDisplayViewportToViewport({ x: 10, y: 20, scale: 2 }),
    ).toEqual({ x: 10, y: 20, scale: 1 });
  });

  it('normalizes valid canvas background hex values and rejects invalid input', () => {
    expect(normalizeCanvasBackgroundHex(' #ABC ')).toBe('#aabbcc');
    expect(normalizeCanvasBackgroundHex('#f8fafc')).toBe('#f8fafc');
    expect(normalizeCanvasBackgroundHex('white')).toBeNull();
    expect(normalizeCanvasBackgroundHex('#not-a-color')).toBeNull();
  });

  it('serializes canvas background settings without treating them as layers', () => {
    const layout = serializeCanvasLayout({
      layers: [],
      canvasGenerationDialogs: [],
      canvasBackgroundColor: ' #ABC ',
    });

    expect(layout).toEqual([
      expect.objectContaining({
        itemType: 'canvas-settings',
        layerId: 'canvas-settings:default',
        resourceId: 'canvas-settings:default',
        canvasBackgroundColor: '#aabbcc',
      }),
    ]);

    const { layerItems, generationDialogs, canvasBackgroundColor } =
      splitCanvasLayoutItems(layout);

    expect(layerItems).toEqual([]);
    expect(generationDialogs).toEqual([]);
    expect(canvasBackgroundColor).toBe('#aabbcc');
  });

  it('drops invalid canvas background settings from serialized layouts', () => {
    const layout = serializeCanvasLayout({
      layers: [],
      canvasGenerationDialogs: [],
      canvasBackgroundColor: '#not-a-color',
    });

    expect(layout).toEqual([]);
    expect(splitCanvasLayoutItems(layout).canvasBackgroundColor).toBeUndefined();
    expect(DEFAULT_CANVAS_BACKGROUND_COLOR).toBe('#f8fafc');
  });

  it('keeps only one default asset folder when normalizing the persisted library', () => {
    const library = normalizeAssetLibrary({
      folders: [
        {
          folderId: 'project',
          label: '项目素材',
          sortOrder: 0,
          collapsed: false,
          systemDefault: true,
        },
        {
          folderId: 'project-duplicate',
          label: '旧项目素材',
          sortOrder: 1,
          collapsed: false,
          systemDefault: true,
        },
      ],
      assets: [],
    });

    expect(library.folders).toHaveLength(1);
    expect(library.folders[0]?.id).toBe('project');
  });

  it('infers MP3 and MP4 asset media types from persisted paths', () => {
    const library = normalizeAssetLibrary({
      folders: [
        {
          folderId: 'project',
          label: '项目素材',
          sortOrder: 0,
          collapsed: false,
          systemDefault: true,
        },
      ],
      assets: [
        {
          assetId: 'asset-audio',
          folderId: 'project',
          label: '胜利音效.mp3',
          imageSrc: '/generated-character-drafts/editor/asset-library/audio/胜利音效.mp3',
          width: 420,
          height: 120,
          sourceType: 'uploaded',
          objectKey:
            'generated-character-drafts/editor/asset-library/audio/胜利音效.mp3',
        },
        {
          assetId: 'asset-video',
          folderId: 'project',
          label: '开场动画.mp4',
          imageSrc: '/generated-character-drafts/editor/asset-library/video/开场动画.mp4',
          thumbnailSrc:
            '/generated-character-drafts/editor/asset-library/video/开场动画-cover.png',
          width: 560,
          height: 315,
          sourceType: 'uploaded',
          objectKey:
            'generated-character-drafts/editor/asset-library/video/开场动画.mp4',
        },
      ],
    });

    expect(library.assets[0]).toMatchObject({ mediaType: 'audio' });
    expect(library.assets[1]).toMatchObject({
      mediaType: 'video',
      thumbnailSrc:
        '/generated-character-drafts/editor/asset-library/video/开场动画-cover.png',
    });
    expect(
      createLayerFromAsset(
        library.assets[0]!,
        1,
        { x: 0, y: 0, scale: 1 },
        { x: 300, y: 200 },
      ),
    ).toMatchObject({
      mediaType: 'audio',
      assetKind: 'sound-effect',
    });
  });

  it('creates a cascaded layer from an account asset near the requested screen point', () => {
    const asset: EditorAsset = {
      id: 'asset-1',
      label: '角色草图',
      src: 'data:image/png;base64,one',
      width: 640,
      height: 480,
      folderId: 'project',
      sourceKind: 'uploaded',
      sourceType: 'uploaded',
      persisted: true,
      objectKey: 'oss/asset-1.png',
      assetObjectId: 'object-1',
      thumbnailSrc: '/generated-character-drafts/editor/asset-1-cover.png',
      sourceResourceId: 'resource-source-1',
    };

    const layer = createLayerFromAsset(
      asset,
      3,
      { x: 20, y: 40, scale: 2 },
      { x: 420, y: 340 },
    );

    expect(layer).toMatchObject({
      id: 'layer-asset-1-3',
      title: '角色草图',
      width: 640,
      height: 480,
      originalWidth: 640,
      originalHeight: 480,
      objectKey: 'oss/asset-1.png',
      assetObjectId: 'object-1',
      thumbnailSrc: '/generated-character-drafts/editor/asset-1-cover.png',
      sourceAssetId: 'asset-1',
      sourceResourceId: 'resource-source-1',
    });
    expect(layer.x).toBe(-18);
    expect(layer.y).toBe(12);
  });

  it('centers a dropped asset exactly at the requested screen point', () => {
    const asset: EditorAsset = {
      id: 'asset-drop',
      label: '投放素材',
      src: 'data:image/png;base64,drop',
      width: 640,
      height: 480,
      folderId: 'project',
      sourceKind: 'uploaded',
      sourceType: 'uploaded',
      persisted: true,
    };

    const layer = createLayerFromAsset(
      asset,
      3,
      { x: 20, y: 40, scale: 2 },
      { x: 420, y: 340 },
      { applyCascadeOffset: false },
    );

    expect(layer.x + layer.width / 2).toBe(200);
    expect(layer.y + layer.height / 2).toBe(150);
  });

  it('preserves source resource ids from the persisted asset library', () => {
    const library = normalizeAssetLibrary({
      folders: [
        {
          folderId: 'project',
          label: '项目素材',
          sortOrder: 0,
          collapsed: false,
          systemDefault: true,
        },
      ],
      assets: [
        {
          assetId: 'asset-generated',
          folderId: 'project',
          label: '生成素材',
          imageSrc: '/generated-character-drafts/editor/asset-library/generated.png',
          width: 640,
          height: 640,
          sourceType: 'generated',
          sourceResourceId: 'resource-generated',
        },
      ],
    });

    expect(library.assets[0]).toMatchObject({
      id: 'asset-generated',
      sourceResourceId: 'resource-generated',
    });
  });

  it('serializes and hydrates canvas layer metadata without embedding image payloads', () => {
    const layer: CanvasLayer = {
      id: 'layer-generated',
      resourceId: 'resource-generated',
      title: '生成图',
      src: 'data:image/png;base64,heavy',
      x: 10,
      y: 20,
      width: 1024,
      height: 768,
      originalWidth: 1024,
      originalHeight: 768,
      zIndex: 9,
      sourceType: 'generated',
      objectKey: 'generated/object.png',
      model: 'birefnet',
      sourceResourceId: 'resource-provider-source',
      assetKind: 'character',
      generationInputs: {
        fields: [{ title: '角色设定', value: '骑士' }],
        references: [],
      },
      locked: true,
    };

    const snapshot = serializeLayer(layer);
    expect(snapshot).not.toHaveProperty('src');
    expect(snapshot).not.toHaveProperty('assetKind');
    expect(snapshot).not.toHaveProperty('generationInputs');

    const hydrated = hydrateLayer(
      snapshot,
      new Map([
        [
          'resource-generated',
          {
            imageSrc: '/read/generated.png',
            assetKind: 'character',
            generationInputs: {
              fields: [{ title: '角色设定', value: '骑士' }],
              references: [],
            },
            model: 'birefnet',
            sourceResourceId: 'resource-provider-source',
          },
        ],
        [
          'resource-provider-source',
          {
            imageSrc: '/read/provider-source.png',
            model: 'gpt-image-2',
          },
        ],
      ]),
    );

    expect(hydrated).toMatchObject({
      id: 'layer-generated',
      src: '/read/generated.png',
      sourceType: 'generated',
      assetKind: 'character',
      objectKey: 'generated/object.png',
      model: 'gpt-image-2',
      locked: true,
    });
    expect(hydrated?.generationInputs?.fields[0]?.value).toBe('骑士');
  });

  it('recovers the normal source model after the owner payload removes an internal model', () => {
    const hydrated = hydrateLayer(
      {
        layerId: 'layer-derived',
        resourceId: 'resource-derived',
        title: '去背景结果',
        x: 10,
        y: 20,
        width: 1024,
        height: 768,
        originalWidth: 1024,
        originalHeight: 768,
        zIndex: 9,
        sourceType: 'generated',
        sourceResourceId: 'resource-source',
      },
      new Map([
        [
          'resource-derived',
          {
            imageSrc: '/read/derived.png',
            sourceResourceId: 'resource-source',
          },
        ],
        [
          'resource-source',
          {
            imageSrc: '/read/source.png',
            model: 'gpt-image-2',
          },
        ],
      ]),
    );

    expect(hydrated?.model).toBe('gpt-image-2');
  });

  it('hydrates object metadata from project resources when the saved layer is lean', () => {
    const hydrated = hydrateLayer(
      {
        layerId: 'layer-uploaded',
        resourceId: 'resource-uploaded',
        title: '上传图',
        x: 10,
        y: 20,
        width: 640,
        height: 360,
        originalWidth: 640,
        originalHeight: 360,
        zIndex: 2,
        sourceType: 'uploaded',
      },
      new Map([
        [
          'resource-uploaded',
          {
            imageSrc: '/generated-character-drafts/editor/asset-library/image.png',
            objectKey: 'generated-character-drafts/editor/asset-library/image.png',
            assetObjectId: 'asset-object-uploaded',
            sourceResourceId: 'resource-source',
          },
        ],
      ]),
    );

    expect(hydrated).toMatchObject({
      id: 'layer-uploaded',
      src: '/generated-character-drafts/editor/asset-library/image.png',
      objectKey: 'generated-character-drafts/editor/asset-library/image.png',
      assetObjectId: 'asset-object-uploaded',
      sourceResourceId: 'resource-source',
    });
  });

  it('hydrates manually selected publication material tags from saved layout', () => {
    const hydrated = hydrateLayer(
      {
        layerId: 'layer-publication',
        resourceId: 'resource-publication',
        title: '宣发图',
        x: 10,
        y: 20,
        width: 1024,
        height: 1024,
        originalWidth: 1024,
        originalHeight: 1024,
        zIndex: 5,
        sourceType: 'generated',
        assetKind: 'publication-material',
      },
      new Map([['resource-publication', { imageSrc: '/read/publication.png' }]]),
    );

    expect(hydrated).toMatchObject({
      id: 'layer-publication',
      assetKind: 'publication-material',
    });
  });

  it('hydrates audio media type and sound effect asset kind from saved layout', () => {
    const hydrated = hydrateLayer(
      {
        layerId: 'layer-audio',
        resourceId: 'resource-audio',
        title: '游戏音效',
        x: 10,
        y: 20,
        width: 420,
        height: 120,
        originalWidth: 420,
        originalHeight: 120,
        zIndex: 5,
        sourceType: 'generated',
        mediaType: 'audio',
        assetKind: 'sound-effect',
        durationSeconds: 2.4,
      },
      new Map([
        [
          'resource-audio',
          {
            imageSrc: '/generated-character-drafts/editor-audios/sfx.mp3',
            durationSeconds: 2.4,
          },
        ],
      ]),
    );

    expect(hydrated).toMatchObject({
      id: 'layer-audio',
      src: '/generated-character-drafts/editor-audios/sfx.mp3',
      mediaType: 'audio',
      assetKind: 'sound-effect',
      durationSeconds: 2.4,
    });
  });

  it('serializes and hydrates image sequence frames for character animation layers', () => {
    const layer: CanvasLayer = {
      id: 'layer-action',
      resourceId: 'resource-action',
      title: '角色动作',
      src: '/generated-character-drafts/editor/frame01.png',
      mediaType: 'image-sequence',
      thumbnailSrc: '/generated-character-drafts/editor/frame01.png',
      imageSequenceFrames: [
        {
          frameIndex: 1,
          imageSrc: '/generated-character-drafts/editor/frame01.png',
          objectKey: 'generated-character-drafts/editor/frame01.png',
          assetObjectId: 'assetobj-frame-01',
          width: 1024,
          height: 1024,
        },
        {
          frameIndex: 2,
          imageSrc: '/generated-character-drafts/editor/frame02.png',
          objectKey: 'generated-character-drafts/editor/frame02.png',
          assetObjectId: 'assetobj-frame-02',
          width: 1024,
          height: 1024,
        },
      ],
      previewVideoPath: '/generated-character-drafts/editor/preview.mp4',
      x: 10,
      y: 20,
      width: 420,
      height: 420,
      originalWidth: 1024,
      originalHeight: 1024,
      zIndex: 6,
      sourceType: 'generated',
      assetKind: 'character-animation',
      durationSeconds: 4,
    };

    const snapshot = serializeLayer(layer);
    expect(snapshot.thumbnailSrc).toBe(
      '/generated-character-drafts/editor/frame01.png',
    );
    expect(snapshot.mediaType).toBe('image-sequence');
    expect(snapshot.imageSequenceFrames).toHaveLength(2);

    const hydrated = hydrateLayer(
      snapshot,
      new Map([
        [
          'resource-action',
          {
            imageSrc: layer.src,
            assetKind: 'character-animation',
          },
        ],
      ]),
    );

    expect(hydrated).toMatchObject({
      mediaType: 'image-sequence',
      thumbnailSrc: '/generated-character-drafts/editor/frame01.png',
      imageSequenceFrames: layer.imageSequenceFrames,
      previewVideoPath: '/generated-character-drafts/editor/preview.mp4',
      assetKind: 'character-animation',
      durationSeconds: 4,
    });
  });

  it('restores audio generation dialogs from saved layout', () => {
    const dialog: CanvasGenerationDialogState = {
      id: 'generation-dialog-audio',
      mode: 'audio-sound-effect',
      prompt: '金币掉落叮当声',
      status: 'idle',
      composerOpen: true,
      soundDurationSeconds: 8,
      generatedLayerId: 'layer-audio',
      placeholder: {
        x: 100,
        y: 120,
        width: 420,
        height: 120,
        originalWidth: 420,
        originalHeight: 120,
      },
    };

    const { generationDialogs } = splitCanvasLayoutItems(
      serializeCanvasLayout({
        layers: [],
        canvasGenerationDialogs: [dialog],
      }),
    );

    expect(generationDialogs).toHaveLength(1);
    expect(generationDialogs[0]).toMatchObject({
      id: 'generation-dialog-audio',
      mode: 'audio-sound-effect',
      prompt: '金币掉落叮当声',
      soundDurationSeconds: 8,
      generatedLayerId: 'layer-audio',
    });
  });

  it('restores publication material generator inputs from saved layout', () => {
    const dialog: CanvasGenerationDialogState = {
      id: 'generation-dialog-publication',
      mode: 'publication',
      prompt: '马戏团午夜惊魂｜非对称对抗｜找到钥匙逃离',
      status: 'idle',
      composerOpen: true,
      publicationWorkflowId: 'publication-promo-poster',
      publicationGameInfo: {
        gameName: '马戏团午夜惊魂',
        gameCategories: '非对称对抗',
        gameDescription: '找到钥匙，开门逃离马戏团',
      },
      publicationReferences: [
        {
          id: 'publication-reference-1',
          label: '首图参考',
          src: 'data:image/png;base64,publication-ref',
          resourceId: 'resource-publication-reference',
        },
      ],
      imageModel: 'gpt-image-2',
      aspectRatio: '16:9',
      imageSize: '2K',
      generatedLayerId: 'layer-publication',
      placeholder: {
        x: 100,
        y: 120,
        width: 1280,
        height: 720,
        originalWidth: 1280,
        originalHeight: 720,
      },
    };

    const layout = serializeCanvasLayout({
      layers: [],
      canvasGenerationDialogs: [dialog],
    });
    expect(JSON.stringify(layout)).not.toContain('data:image');
    expect(JSON.stringify(layout)).toContain(
      'ref:project-resource:resource-publication-reference',
    );

    const { generationDialogs } = splitCanvasLayoutItems(
      layout,
      new Map([
        [
          'resource-publication-reference',
          {
            imageSrc: '/read/publication-reference.png',
            objectKey: 'generated-character-drafts/editor/reference.png',
            assetObjectId: 'asset-object-publication-reference',
          },
        ],
      ]),
    );

    expect(generationDialogs).toHaveLength(1);
    expect(generationDialogs[0]).toMatchObject({
      id: 'generation-dialog-publication',
      mode: 'publication',
      publicationWorkflowId: 'publication-promo-poster',
      publicationGameInfo: {
        gameName: '马戏团午夜惊魂',
        gameCategories: '非对称对抗',
        gameDescription: '找到钥匙，开门逃离马戏团',
      },
      imageModel: 'gpt-image-2',
      generatedLayerId: 'layer-publication',
    });
    expect(generationDialogs[0]?.publicationReferences?.[0]).toMatchObject({
      id: 'publication-reference-1',
      label: '首图参考',
      src: '/read/publication-reference.png',
      objectKey: 'generated-character-drafts/editor/reference.png',
      assetObjectId: 'asset-object-publication-reference',
      resourceId: 'resource-publication-reference',
    });
  });

  it('serializes generation dialogs beside layers and splits them on load', () => {
    const layer: CanvasLayer = {
      id: 'layer-generated',
      resourceId: 'resource-generated',
      title: '生成图',
      src: 'data:image/png;base64,heavy',
      x: 10,
      y: 20,
      width: 1024,
      height: 768,
      originalWidth: 1024,
      originalHeight: 768,
      zIndex: 9,
      sourceType: 'generated',
    };
    const dialog: CanvasGenerationDialogState = {
      id: 'generation-dialog-9',
      mode: 'generate',
      prompt: '刷新后要继续保留',
      status: 'generating',
      composerOpen: false,
      generatedLayerId: 'layer-generated',
      imageModel: 'gpt-image-2',
      style: 'pixelArt',
      generationStartedAt: 1_771_400_000_000,
      generationFinishedAt: 1_771_400_004_000,
      placeholder: {
        x: 100,
        y: 120,
        width: 420,
        height: 420,
        originalWidth: 2048,
        originalHeight: 2048,
      },
      generationReferences: [
        {
          id: 'reference-1',
          label: '参考图',
          src: 'data:image/png;base64,ref',
          resourceId: 'resource-reference-1',
        },
      ],
    };

    const layout = serializeCanvasLayout({
      layers: [layer],
      canvasGenerationDialogs: [dialog],
    });
    expect(
      JSON.stringify(
        layout.find((item) => item.resourceId === 'generation-dialog:generation-dialog-9'),
      ),
    ).not.toContain('data:image');
    expect(
      JSON.stringify(
        layout.find((item) => item.resourceId === 'generation-dialog:generation-dialog-9'),
      ),
    ).toContain('ref:project-resource:resource-reference-1');

    const { layerItems, generationDialogs } = splitCanvasLayoutItems(
      layout,
      new Map([
        [
          'resource-reference-1',
          {
            imageSrc: '/read/reference-1.png',
            objectKey: 'generated/reference-1.png',
          },
        ],
      ]),
    );

    expect(layerItems).toHaveLength(1);
    expect(generationDialogs).toHaveLength(1);
    expect(generationDialogs[0]).toMatchObject({
      id: 'generation-dialog-9',
      mode: 'generate',
      prompt: '刷新后要继续保留',
      status: 'generating',
      generatedLayerId: 'layer-generated',
      imageModel: 'gpt-image-2',
      style: 'pixelArt',
      generationStartedAt: 1_771_400_000_000,
      generationFinishedAt: 1_771_400_004_000,
      placeholder: {
        x: 100,
        y: 120,
        width: 420,
      },
    });
    expect(generationDialogs[0]?.generationReferences?.[0]).toMatchObject({
      label: '参考图',
      src: '/read/reference-1.png',
      resourceId: 'resource-reference-1',
      objectKey: 'generated/reference-1.png',
    });
  });

  it('defaults restored supported image styles to none and drops them from other modes', () => {
    expect(
      hydrateCanvasGenerationDialog({
        id: 'generation-dialog-legacy',
        mode: 'generate',
        prompt: '旧任务',
        status: 'idle',
      })?.style,
    ).toBe('none');
    expect(
      hydrateCanvasGenerationDialog({
        id: 'generation-dialog-unknown-style',
        mode: 'character',
        prompt: '未知风格',
        status: 'idle',
        style: 'futureStyle',
      })?.style,
    ).toBe('none');
    expect(
      hydrateCanvasGenerationDialog({
        id: 'generation-dialog-spec',
        mode: 'spec',
        prompt: '规范任务',
        status: 'idle',
        style: 'pixelArt',
      })?.style,
    ).toBeUndefined();
  });

  it('drops restored generator references owned by another user', () => {
    const dialog: CanvasGenerationDialogState = {
      id: 'generation-dialog-owner',
      mode: 'generate',
      prompt: '不应复用别人素材',
      status: 'idle',
      composerOpen: true,
      generationReferences: [
        {
          id: 'foreign-reference',
          label: '别人账号的素材',
          src: 'data:image/png;base64,foreign',
          resourceId: 'resource-foreign',
        },
      ],
    };

    const { generationDialogs } = splitCanvasLayoutItems(
      serializeCanvasLayout({
        layers: [],
        canvasGenerationDialogs: [dialog],
      }),
      new Map([
        [
          'resource-foreign',
          {
            imageSrc: '/read/foreign.png',
            objectKey: 'generated/foreign.png',
            ownerUserId: 'user-b',
          },
        ],
      ]),
      'user-a',
    );

    expect(generationDialogs).toHaveLength(1);
    expect(generationDialogs[0]?.generationReferences).toEqual([]);
  });

  it('snaps moving layers to nearby canvas and layer guides', () => {
    const movingLayer: CanvasLayer = {
      id: 'moving',
      resourceId: 'resource-moving',
      title: '移动图',
      src: 'data:image/png;base64,moving',
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      originalWidth: 100,
      originalHeight: 100,
      zIndex: 1,
      sourceType: 'uploaded',
    };
    const anchorLayer: CanvasLayer = {
      ...movingLayer,
      id: 'anchor',
      resourceId: 'resource-anchor',
      x: 300,
      y: 240,
      zIndex: 2,
    };

    const snapped = resolveSnappedLayerPosition(
      movingLayer,
      CANVAS_WORLD_ORIGIN - 47,
      238,
      [movingLayer, anchorLayer],
      1,
    );

    expect(snapped.x).toBe(CANVAS_WORLD_ORIGIN - movingLayer.width / 2);
    expect(snapped.y).toBe(anchorLayer.y);
    expect(snapped.guide).toEqual({
      vertical: CANVAS_WORLD_ORIGIN,
      horizontal: anchorLayer.y,
    });
  });

  it('snaps moving layers to equal horizontal and vertical spacing', () => {
    const movingLayer: CanvasLayer = {
      id: 'moving',
      resourceId: 'resource-moving',
      title: '移动图',
      src: 'data:image/png;base64,moving',
      x: 0,
      y: 0,
      width: 80,
      height: 80,
      originalWidth: 80,
      originalHeight: 80,
      zIndex: 1,
      sourceType: 'uploaded',
    };
    const firstLayer: CanvasLayer = {
      ...movingLayer,
      id: 'first',
      resourceId: 'resource-first',
      x: 100,
      y: 160,
      zIndex: 2,
    };
    const secondLayer: CanvasLayer = {
      ...movingLayer,
      id: 'second',
      resourceId: 'resource-second',
      x: 260,
      y: 160,
      zIndex: 3,
    };
    const topLayer: CanvasLayer = {
      ...movingLayer,
      id: 'top',
      resourceId: 'resource-top',
      x: 520,
      y: 120,
      zIndex: 4,
    };
    const bottomLayer: CanvasLayer = {
      ...movingLayer,
      id: 'bottom',
      resourceId: 'resource-bottom',
      x: 520,
      y: 300,
      zIndex: 5,
    };

    const horizontalSnap = resolveSnappedLayerPosition(
      movingLayer,
      417,
      160,
      [movingLayer, firstLayer, secondLayer],
      1,
    );
    expect(horizontalSnap.x).toBe(420);
    expect(horizontalSnap.guide).toEqual({
      vertical: 460,
      horizontal: 160,
    });

    const verticalSnap = resolveSnappedLayerPosition(
      movingLayer,
      520,
      207,
      [movingLayer, topLayer, bottomLayer],
      1,
    );
    expect(verticalSnap.y).toBe(210);
    expect(verticalSnap.guide).toEqual({
      vertical: 520,
      horizontal: 250,
    });
  });

  it('keeps equal-spacing snap focused on nearby overlapping layers', () => {
    const movingLayer: CanvasLayer = {
      id: 'moving',
      resourceId: 'resource-moving',
      title: '移动图',
      src: 'data:image/png;base64,moving',
      x: 0,
      y: 0,
      width: 80,
      height: 80,
      originalWidth: 80,
      originalHeight: 80,
      zIndex: 1,
      sourceType: 'uploaded',
    };
    const firstLayer: CanvasLayer = {
      ...movingLayer,
      id: 'first',
      resourceId: 'resource-first',
      x: 100,
      y: 160,
      zIndex: 2,
    };
    const secondLayer: CanvasLayer = {
      ...movingLayer,
      id: 'second',
      resourceId: 'resource-second',
      x: 260,
      y: 160,
      zIndex: 3,
    };
    const offscreenLayers = Array.from({ length: 80 }, (_, index) => ({
      ...movingLayer,
      id: `offscreen-${index}`,
      resourceId: `resource-offscreen-${index}`,
      x: 2400 + index * 96,
      y: 1600,
      zIndex: 10 + index,
    }));

    const snapped = resolveSnappedLayerPosition(
      movingLayer,
      417,
      160,
      [movingLayer, ...offscreenLayers, firstLayer, secondLayer],
      1,
    );

    expect(snapped.x).toBe(420);
    expect(snapped.guide).toEqual({
      vertical: 460,
      horizontal: 160,
    });
  });
});