Genarrative/src/components/image-editor/useImageCanvasAssetCanvasBridge.ts

import {
  type Dispatch,
  type MutableRefObject,
  type RefObject,
  type SetStateAction,
  useCallback,
  useMemo,
} from 'react';

import {
  createLayerFromAsset,
  isLayerLinkedToAsset,
} from './ImageCanvasEditorModel';
import type {
  AssetPointerDragState,
  CanvasHistoryAction,
  CanvasLayer,
  CanvasViewport,
  EditorAsset,
  EditorAssetFolder,
} from './ImageCanvasEditorTypes';
import { useImageCanvasAssetPointerDragBridge } from './useImageCanvasAssetPointerDragBridge';
import { useImageCanvasCanvasDropWorkflow } from './useImageCanvasCanvasDropWorkflow';

type CanvasPoint = { x: number; y: number };

type UploadFilesToCanvasOptions = {
  folderId?: string;
  canvasPoint: CanvasPoint;
  addToCanvas: true;
};

type UseImageCanvasAssetLayerCleanupOptions = {
  layers: CanvasLayer[];
  setLayers: Dispatch<SetStateAction<CanvasLayer[]>>;
  setSelectedLayerId: Dispatch<SetStateAction<string | null>>;
  setSelectedLayerIds: Dispatch<SetStateAction<string[]>>;
  onDeleteLayerSideEffects?: (layerId: string) => void;
  canDeleteLayers?: (targetLayerIds: string[]) => boolean;
  discardHistoryEntriesContainingLayer?: (
    matchesLayer: (layer: CanvasLayer) => boolean,
  ) => void;
};

type UseImageCanvasAssetCanvasBridgeOptions = {
  assetPointerDragRef: RefObject<AssetPointerDragState | null>;
  suppressAssetClickRef: RefObject<boolean>;
  assets: EditorAsset[];
  assetFolders: EditorAssetFolder[];
  layerCounterRef: MutableRefObject<number>;
  viewport: CanvasViewport;
  canvasSize: { width: number; height: number };
  resolveAssetFolderId: (clientX: number, clientY: number) => string | null;
  resolveCanvasPoint: (clientX: number, clientY: number) => CanvasPoint | null;
  getCanvasDropPoint: (clientX: number, clientY: number) => CanvasPoint;
  setAssetPointerDrag: Dispatch<SetStateAction<AssetPointerDragState | null>>;
  setActiveUploadFolderId: Dispatch<SetStateAction<string>>;
  setUploadDropTarget: Dispatch<SetStateAction<'canvas' | 'assets' | null>>;
  setHoveredLayerId: Dispatch<SetStateAction<string | null>>;
  updateAssetMoveDropFolder: (folderId: string | null) => void;
  moveAssetToFolder: (assetId: string, folderId: string) => void;
  captureCanvasHistory: (action: CanvasHistoryAction) => void;
  appendCanvasLayersWithResources: (nextLayers: CanvasLayer[]) => void;
  selectSingleLayer: (layerId: string | null) => void;
  addUploadedFiles: (
    files: FileList | File[],
    options: UploadFilesToCanvasOptions,
  ) => void;
  onAssetError?: (message: string) => void;
};

export function useImageCanvasAssetLayerCleanup({
  layers,
  setLayers,
  setSelectedLayerId,
  setSelectedLayerIds,
  onDeleteLayerSideEffects,
  canDeleteLayers,
  discardHistoryEntriesContainingLayer,
}: UseImageCanvasAssetLayerCleanupOptions) {
  return useCallback(
    (deletedAssets: EditorAsset[]) => {
      if (!deletedAssets.length) {
        return true;
      }
      const deletedLayerIds = layers
        .filter((layer) =>
          deletedAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
        )
        .map((layer) => layer.id);
      if (
        deletedLayerIds.length > 0 &&
        canDeleteLayers?.(deletedLayerIds) === false
      ) {
        return false;
      }
      discardHistoryEntriesContainingLayer?.((layer) =>
        deletedAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
      );
      setLayers((currentLayers) =>
        currentLayers.filter(
          (layer) =>
            !deletedAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
        ),
      );
      setSelectedLayerIds((currentIds) =>
        currentIds.filter((layerId) =>
          layers.every(
            (layer) =>
              layer.id !== layerId ||
              !deletedAssets.some((asset) =>
                isLayerLinkedToAsset(layer, asset),
              ),
          ),
        ),
      );
      setSelectedLayerId((currentId) => {
        if (!currentId) {
          return currentId;
        }
        const currentLayer = layers.find((layer) => layer.id === currentId);
        return currentLayer &&
          deletedAssets.some((asset) =>
            isLayerLinkedToAsset(currentLayer, asset),
          )
          ? null
          : currentId;
      });
      deletedLayerIds.forEach((layerId) => onDeleteLayerSideEffects?.(layerId));
      return true;
    },
    [
      discardHistoryEntriesContainingLayer,
      canDeleteLayers,
      layers,
      onDeleteLayerSideEffects,
      setLayers,
      setSelectedLayerId,
      setSelectedLayerIds,
    ],
  );
}

export function useImageCanvasAssetCanvasBridge({
  assetPointerDragRef,
  suppressAssetClickRef,
  assets,
  assetFolders,
  layerCounterRef,
  viewport,
  canvasSize,
  resolveAssetFolderId,
  resolveCanvasPoint,
  getCanvasDropPoint,
  setAssetPointerDrag,
  setActiveUploadFolderId,
  setUploadDropTarget,
  setHoveredLayerId,
  updateAssetMoveDropFolder,
  moveAssetToFolder,
  captureCanvasHistory,
  appendCanvasLayersWithResources,
  selectSingleLayer,
  addUploadedFiles,
  onAssetError,
}: UseImageCanvasAssetCanvasBridgeOptions) {
  const addAssetLayer = useCallback(
    (asset: EditorAsset, position?: CanvasPoint) => {
      const nextLayerIndex = layerCounterRef.current + 1;
      let nextLayer: CanvasLayer;
      try {
        nextLayer = createLayerFromAsset(
          asset,
          nextLayerIndex,
          viewport,
          {
            x: position?.x ?? canvasSize.width / 2,
            y: position?.y ?? canvasSize.height / 2,
          },
          { applyCascadeOffset: position === undefined },
        );
      } catch (error) {
        onAssetError?.(
          error instanceof Error ? error.message : '角色动作素材不完整。',
        );
        return;
      }
      setActiveUploadFolderId(asset.folderId);
      layerCounterRef.current = nextLayerIndex;
      captureCanvasHistory({ type: 'add-image', count: 1 });
      appendCanvasLayersWithResources([nextLayer]);
      selectSingleLayer(nextLayer.id);
      setHoveredLayerId(null);
    },
    [
      appendCanvasLayersWithResources,
      canvasSize.height,
      canvasSize.width,
      captureCanvasHistory,
      layerCounterRef,
      onAssetError,
      selectSingleLayer,
      setActiveUploadFolderId,
      setHoveredLayerId,
      viewport,
    ],
  );

  useImageCanvasAssetPointerDragBridge({
    assetPointerDragRef,
    suppressAssetClickRef,
    assets,
    resolveAssetFolderId,
    resolveCanvasPoint,
    setAssetPointerDrag,
    setUploadDropTarget,
    updateAssetMoveDropFolder,
    moveAssetToFolder,
    addAssetLayer,
  });

  const canvasDropWorkflow = useImageCanvasCanvasDropWorkflow({
    assets,
    assetFolders,
    setUploadDropTarget,
    updateAssetMoveDropFolder,
    getCanvasDropPoint,
    addAssetLayer,
    addUploadedFiles,
  });

  return useMemo(
    () => ({
      addAssetLayer,
      ...canvasDropWorkflow,
    }),
    [addAssetLayer, canvasDropWorkflow],
  );
}