Genarrative/src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx

/* @vitest-environment jsdom */

import { act, render, screen } from '@testing-library/react';
import { useRef, useState } from 'react';
import { describe, expect, it, vi } from 'vitest';

import type {
  AssetPointerDragState,
  CanvasLayer,
  EditorAsset,
  EditorAssetFolder,
} from './ImageCanvasEditorTypes';
import {
  useImageCanvasAssetCanvasBridge,
  useImageCanvasAssetLayerCleanup,
} from './useImageCanvasAssetCanvasBridge';

const defaultAsset: EditorAsset = {
  id: 'asset-1',
  label: '素材一',
  src: 'data:image/png;base64,asset-1',
  width: 320,
  height: 240,
  folderId: 'project',
  sourceKind: 'uploaded',
  sourceType: 'uploaded',
  persisted: true,
  assetObjectId: 'asset-object-1',
};

const defaultFolder: EditorAssetFolder = {
  id: 'project',
  label: '项目素材',
  collapsed: false,
  systemDefault: true,
  persisted: true,
};

function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
  return {
    id: 'layer-asset-1',
    resourceId: 'asset-object-1',
    title: '素材一',
    src: 'data:image/png;base64,asset-1',
    x: 10,
    y: 20,
    width: 320,
    height: 240,
    originalWidth: 320,
    originalHeight: 240,
    zIndex: 1,
    sourceType: 'uploaded',
    sourceAssetId: 'asset-1',
    ...overrides,
  };
}

function dispatchPointerEvent(
  type: string,
  init: MouseEventInit & { pointerId: number },
) {
  const event = new MouseEvent(type, {
    bubbles: true,
    cancelable: true,
    ...init,
  });
  Object.defineProperty(event, 'pointerId', { value: init.pointerId });
  window.dispatchEvent(event);
}

function AssetCanvasBridgeHarness({
  asset = defaultAsset,
  resolveCanvasPoint = vi.fn(() => null),
  appendCanvasLayersWithResources = vi.fn(),
  captureCanvasHistory = vi.fn(),
  selectSingleLayer = vi.fn(),
}: {
  asset?: EditorAsset;
  resolveCanvasPoint?: (clientX: number, clientY: number) => {
    x: number;
    y: number;
  } | null;
  appendCanvasLayersWithResources?: (nextLayers: CanvasLayer[]) => void;
  captureCanvasHistory?: () => void;
  selectSingleLayer?: (layerId: string | null) => void;
}) {
  const assetPointerDragRef = useRef<AssetPointerDragState | null>({
    assetId: asset.id,
    pointerId: 7,
    startClientX: 10,
    startClientY: 10,
    currentClientX: 40,
    currentClientY: 40,
    active: true,
    dropFolderId: null,
  });
  const suppressAssetClickRef = useRef(false);
  const layerCounterRef = useRef(0);
  const [activeUploadFolderId, setActiveUploadFolderId] = useState('project');
  const [hoveredLayerId, setHoveredLayerId] = useState<string | null>('hovered');
  const [assetPointerDrag, setAssetPointerDrag] =
    useState<AssetPointerDragState | null>(assetPointerDragRef.current);
  const [uploadDropTarget, setUploadDropTarget] = useState<
    'canvas' | 'assets' | null
  >(null);

  const bridge = useImageCanvasAssetCanvasBridge({
    assetPointerDragRef,
    suppressAssetClickRef,
    assets: [asset],
    assetFolders: [defaultFolder],
    layerCounterRef,
    viewport: { x: 10, y: 20, scale: 2 },
    canvasSize: { width: 900, height: 640 },
    resolveAssetFolderId: () => null,
    resolveCanvasPoint,
    getCanvasDropPoint: (clientX, clientY) => ({
      x: clientX - 10,
      y: clientY - 20,
    }),
    setAssetPointerDrag,
    setActiveUploadFolderId,
    setUploadDropTarget,
    setHoveredLayerId,
    updateAssetMoveDropFolder: vi.fn(),
    moveAssetToFolder: vi.fn(),
    captureCanvasHistory,
    appendCanvasLayersWithResources,
    selectSingleLayer,
    addUploadedFiles: vi.fn(),
  });

  return (
    <div>
      <button
        type="button"
        onClick={() => bridge.addAssetLayer(asset)}
      >
        添加到画布
      </button>
      <span data-testid="folder">{activeUploadFolderId}</span>
      <span data-testid="hover">{hoveredLayerId ?? '-'}</span>
      <span data-testid="drag">{assetPointerDrag ? 'dragging' : 'none'}</span>
      <span data-testid="drop-target">{uploadDropTarget ?? '-'}</span>
    </div>
  );
}

function AssetCleanupHarness({
  deletedAssets = [],
  initialLayers = [
    createLayer({ id: 'linked', sourceAssetId: 'asset-1' }),
    createLayer({
      id: 'kept',
      resourceId: 'asset-object-2',
      src: 'data:image/png;base64,asset-2',
      sourceAssetId: 'asset-2',
    }),
  ],
  onDeleteLayerSideEffects = vi.fn(),
}: {
  deletedAssets?: EditorAsset[];
  initialLayers?: CanvasLayer[];
  onDeleteLayerSideEffects?: (layerId: string) => void;
}) {
  const [layers, setLayers] = useState(initialLayers);
  const [selectedLayerId, setSelectedLayerId] = useState<string | null>('linked');
  const [selectedLayerIds, setSelectedLayerIds] = useState(['linked', 'kept']);
  const cleanup = useImageCanvasAssetLayerCleanup({
    layers,
    setLayers,
    setSelectedLayerId,
    setSelectedLayerIds,
    onDeleteLayerSideEffects,
  });

  return (
    <div>
      <button type="button" onClick={() => cleanup(deletedAssets)}>
        清理素材
      </button>
      <span data-testid="layers">{layers.map((layer) => layer.id).join(',')}</span>
      <span data-testid="selected">{selectedLayerId ?? '-'}</span>
      <span data-testid="selected-many">{selectedLayerIds.join(',')}</span>
    </div>
  );
}

describe('useImageCanvasAssetCanvasBridge', () => {
  it('creates a canvas layer from an asset and clears hover state', () => {
    const appendCanvasLayersWithResources = vi.fn();
    const captureCanvasHistory = vi.fn();
    const selectSingleLayer = vi.fn();
    render(
      <AssetCanvasBridgeHarness
        appendCanvasLayersWithResources={appendCanvasLayersWithResources}
        captureCanvasHistory={captureCanvasHistory}
        selectSingleLayer={selectSingleLayer}
      />,
    );

    act(() => {
      screen.getByRole('button', { name: '添加到画布' }).click();
    });

    expect(captureCanvasHistory).toHaveBeenCalledTimes(1);
    expect(appendCanvasLayersWithResources).toHaveBeenCalledWith([
      expect.objectContaining({
        id: 'layer-asset-1-1',
        sourceAssetId: 'asset-1',
        x: 94,
        y: 64,
        width: 320,
        height: 240,
      }),
    ]);
    expect(selectSingleLayer).toHaveBeenCalledWith('layer-asset-1-1');
    expect(screen.getByTestId('folder').textContent).toBe('project');
    expect(screen.getByTestId('hover').textContent).toBe('-');
  });

  it('delegates active pointer drops over the canvas into the layer path', () => {
    const appendCanvasLayersWithResources = vi.fn();
    render(
      <AssetCanvasBridgeHarness
        resolveCanvasPoint={() => ({ x: 480, y: 640 })}
        appendCanvasLayersWithResources={appendCanvasLayersWithResources}
      />,
    );

    act(() => {
      dispatchPointerEvent('pointerup', {
        pointerId: 7,
        clientX: 48,
        clientY: 64,
      });
    });

    expect(appendCanvasLayersWithResources).toHaveBeenCalledWith([
      expect.objectContaining({
        sourceAssetId: 'asset-1',
        x: 75,
        y: 190,
      }),
    ]);
    expect(screen.getByTestId('drag').textContent).toBe('none');
    expect(screen.getByTestId('drop-target').textContent).toBe('-');
  });

  it('removes canvas layers linked to deleted assets and keeps unrelated selection', () => {
    const onDeleteLayerSideEffects = vi.fn();
    render(
      <AssetCleanupHarness
        deletedAssets={[defaultAsset]}
        onDeleteLayerSideEffects={onDeleteLayerSideEffects}
      />,
    );

    act(() => {
      screen.getByRole('button', { name: '清理素材' }).click();
    });

    expect(screen.getByTestId('layers').textContent).toBe('kept');
    expect(screen.getByTestId('selected').textContent).toBe('-');
    expect(screen.getByTestId('selected-many').textContent).toBe('kept');
    expect(onDeleteLayerSideEffects).toHaveBeenCalledWith('linked');
  });

  it('removes canvas layers linked by the asset source resource id', () => {
    render(
      <AssetCleanupHarness
        deletedAssets={[
          {
            ...defaultAsset,
            id: 'asset-generated',
            src: '/generated-character-drafts/editor/asset-library/copied.png',
            assetObjectId: undefined,
            sourceResourceId: 'resource-generated',
          },
        ]}
        initialLayers={[
          createLayer({
            id: 'linked-by-resource',
            resourceId: 'resource-generated',
            src: '/generated-character-drafts/editor/project/generated.png',
            assetObjectId: undefined,
            sourceAssetId: null,
          }),
          createLayer({
            id: 'kept',
            resourceId: 'resource-kept',
            src: '/generated-character-drafts/editor/project/kept.png',
            assetObjectId: undefined,
            sourceAssetId: null,
          }),
        ]}
      />,
    );

    act(() => {
      screen.getByRole('button', { name: '清理素材' }).click();
    });

    expect(screen.getByTestId('layers').textContent).toBe('kept');
  });
});