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

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

import {
  CANVAS_WORLD_ORIGIN,
  createLayerFromAsset,
  hydrateLayer,
  normalizeAssetLibrary,
  normalizeCanvasBackgroundHex,
  resolveSnappedLayerPosition,
  serializeCanvasLayout,
  serializeLayer,
  splitCanvasLayoutItems,
} from './ImageCanvasEditorModel';
import type {
  CanvasGenerationDialogState,
  CanvasLayer,
  EditorAsset,
} from './ImageCanvasEditorTypes';

describe('ImageCanvasEditorModel', () => {
  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('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',
          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' });
    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 layer from an account asset at 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',
    };

    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',
      sourceAssetId: 'asset-1',
    });
    expect(layer.x).toBe(-18);
    expect(layer.y).toBe(12);
  });

  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',
      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: [],
            },
          },
        ],
      ]),
    );

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

  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('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',
      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',
      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('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,
    });
  });
});