拆分图片画布素材入画布桥接

新增 useImageCanvasAssetCanvasBridge 承载素材加入画布和画布 drop 桥接新增 hook 单测覆盖素材建层、pointer drop 和删除素材清理图层精简 ImageCanvasEditorView 中的素材到画布胶水更新图片画布拆分计划和 TRACKING 浏览器回归记录
2026-06-17 13:14:36 +08:00
parent d0ad8402de
commit 015716945e
5 changed files with 480 additions and 75 deletions
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -21,9 +21,7 @@ import {
 import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
 import { ImageCanvasStageView } from './ImageCanvasStageView';
 import {
-  createLayerFromAsset,
  isGeneratedLayer,
-  isLayerLinkedToAsset,
  resolveContextMenuPosition,
 } from './ImageCanvasEditorModel';
 import {
@@ -46,15 +44,16 @@ import type {
  CanvasLayer,
  CanvasTool,
  CanvasViewport,
-  EditorAsset,
  ImageContextMenuState,
 } from './ImageCanvasEditorTypes';
 import { useCanvasHistory } from './useCanvasHistory';
 import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
 import { useImageCanvasAssetLibrary } from './useImageCanvasAssetLibrary';
+import {
+  useImageCanvasAssetCanvasBridge,
+  useImageCanvasAssetLayerCleanup,
+} from './useImageCanvasAssetCanvasBridge';
 import { useImageCanvasAssetExportWorkflow } from './useImageCanvasAssetExportWorkflow';
-import { useImageCanvasAssetPointerDragBridge } from './useImageCanvasAssetPointerDragBridge';
-import { useImageCanvasCanvasDropWorkflow } from './useImageCanvasCanvasDropWorkflow';
 import { useImageCanvasEditorChrome } from './useImageCanvasEditorChrome';
 import { useImageCanvasGenerationWorkflow } from './useImageCanvasGenerationWorkflow';
 import { useImageCanvasKeyboardShortcuts } from './useImageCanvasKeyboardShortcuts';
@@ -178,41 +177,12 @@ export function ImageCanvasEditorView() {
    toggleBackgroundSettings,
    toggleMinimap,
  } = useImageCanvasEditorChrome({ openEditorLoginModal });
-  const removeCanvasLayersLinkedToAssets = useCallback(
-    (deletedAssets: EditorAsset[]) => {
-      if (!deletedAssets.length) {
-        return;
-      }
-      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;
-      });
-    },
-    [layers],
-  );
+  const removeCanvasLayersLinkedToAssets = useImageCanvasAssetLayerCleanup({
+    layers,
+    setLayers,
+    setSelectedLayerId,
+    setSelectedLayerIds,
+  });
  const {
    assetFolders,
    setAssetFolders,
@@ -664,53 +634,36 @@ export function ImageCanvasEditorView() {
    };
  }, []);

-  const addAssetLayer = (
-    asset: EditorAsset,
-    position?: { x: number; y: number },
-  ) => {
-    setActiveUploadFolderId(asset.folderId);
-    layerCounterRef.current += 1;
-    const nextLayer = createLayerFromAsset(
-      asset,
-      layerCounterRef.current,
-      viewport,
-      {
-        x: position?.x ?? canvasSize.width / 2,
-        y: position?.y ?? canvasSize.height / 2,
-      },
-    );
-    captureCanvasHistory();
-    appendCanvasLayersWithResources([nextLayer]);
-    selectSingleLayer(nextLayer.id);
-    setHoveredLayerId(null);
-  };
-
-  useImageCanvasAssetPointerDragBridge({
+  const {
+    addAssetLayer,
+    handleCanvasDragOver,
+    handleCanvasDragLeave,
+    handleCanvasDrop,
+  } = useImageCanvasAssetCanvasBridge({
    assetPointerDragRef,
    suppressAssetClickRef,
    assets,
+    assetFolders,
+    layerCounterRef,
+    viewport,
+    canvasSize,
    resolveAssetFolderId,
    resolveCanvasPoint,
+    getCanvasDropPoint,
    setAssetPointerDrag,
+    setActiveUploadFolderId,
    setUploadDropTarget,
+    setHoveredLayerId,
    updateAssetMoveDropFolder,
    moveAssetToFolder,
-    addAssetLayer,
+    captureCanvasHistory,
+    appendCanvasLayersWithResources,
+    selectSingleLayer,
+    addUploadedFiles,
  });

  deleteLayerByIdRef.current = deleteLayerById;

-  const { handleCanvasDragOver, handleCanvasDragLeave, handleCanvasDrop } =
-    useImageCanvasCanvasDropWorkflow({
-      assets,
-      assetFolders,
-      setUploadDropTarget,
-      updateAssetMoveDropFolder,
-      getCanvasDropPoint,
-      addAssetLayer,
-      addUploadedFiles,
-    });
-
  const handleCanvasContextMenu = (event: ReactMouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.stopPropagation();
--- a/src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx
@@ -0,0 +1,252 @@
+/* @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, { x: 450, y: 320 })}
+      >
+        添加到画布
+      </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 = [],
+}: {
+  deletedAssets?: EditorAsset[];
+}) {
+  const [layers, setLayers] = useState([
+    createLayer({ id: 'linked', sourceAssetId: 'asset-1' }),
+    createLayer({
+      id: 'kept',
+      resourceId: 'asset-object-2',
+      src: 'data:image/png;base64,asset-2',
+      sourceAssetId: 'asset-2',
+    }),
+  ]);
+  const [selectedLayerId, setSelectedLayerId] = useState<string | null>('linked');
+  const [selectedLayerIds, setSelectedLayerIds] = useState(['linked', 'kept']);
+  const cleanup = useImageCanvasAssetLayerCleanup({
+    layers,
+    setLayers,
+    setSelectedLayerId,
+    setSelectedLayerIds,
+  });
+
+  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' }),
+    ]);
+    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', () => {
+    render(<AssetCleanupHarness deletedAssets={[defaultAsset]} />);
+
+    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');
+  });
+});
--- a/src/components/image-editor/useImageCanvasAssetCanvasBridge.ts
+++ b/src/components/image-editor/useImageCanvasAssetCanvasBridge.ts
@@ -0,0 +1,191 @@
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type RefObject,
+  type SetStateAction,
+  useCallback,
+  useMemo,
+} from 'react';
+
+import {
+  createLayerFromAsset,
+  isLayerLinkedToAsset,
+} from './ImageCanvasEditorModel';
+import type {
+  AssetPointerDragState,
+  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[]>>;
+};
+
+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: () => void;
+  appendCanvasLayersWithResources: (nextLayers: CanvasLayer[]) => void;
+  selectSingleLayer: (layerId: string | null) => void;
+  addUploadedFiles: (
+    files: FileList | File[],
+    options: UploadFilesToCanvasOptions,
+  ) => void;
+};
+
+export function useImageCanvasAssetLayerCleanup({
+  layers,
+  setLayers,
+  setSelectedLayerId,
+  setSelectedLayerIds,
+}: UseImageCanvasAssetLayerCleanupOptions) {
+  return useCallback(
+    (deletedAssets: EditorAsset[]) => {
+      if (!deletedAssets.length) {
+        return;
+      }
+      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;
+      });
+    },
+    [layers, 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,
+}: UseImageCanvasAssetCanvasBridgeOptions) {
+  const addAssetLayer = useCallback(
+    (asset: EditorAsset, position?: CanvasPoint) => {
+      setActiveUploadFolderId(asset.folderId);
+      layerCounterRef.current += 1;
+      const nextLayer = createLayerFromAsset(
+        asset,
+        layerCounterRef.current,
+        viewport,
+        {
+          x: position?.x ?? canvasSize.width / 2,
+          y: position?.y ?? canvasSize.height / 2,
+        },
+      );
+      captureCanvasHistory();
+      appendCanvasLayersWithResources([nextLayer]);
+      selectSingleLayer(nextLayer.id);
+      setHoveredLayerId(null);
+    },
+    [
+      appendCanvasLayersWithResources,
+      canvasSize.height,
+      canvasSize.width,
+      captureCanvasHistory,
+      layerCounterRef,
+      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],
+  );
+}