拆分图片画布图层命令工作流

新增图层命令 hook 和独立单测

主视图改为通过 hook 处理复制、剪切、粘贴、层级、分组、显隐、锁定、翻转、删除和导出委托

更新图片画布前端拆分文档和 TRACKING 回归记录

src/components/image-editor/ImageCanvasEditorView.tsx

@@ -46,20 +46,8 @@ import {
   zoomViewportFromWheel,
 } from './ImageCanvasInteractionModel';
 import {
-  createCanvasLayerClipboard,
-  duplicateCanvasLayers,
-  flipCanvasLayers,
   getCanvasLayersByIds,
-  groupCanvasLayers,
-  moveCanvasLayers,
-  removeCanvasLayers,
   resolveContextTargetLayerIds,
-  toggleCanvasLayersLock,
-  toggleCanvasLayersVisibility,
-  ungroupCanvasLayers,
-  updateCanvasLayersByIds,
-  type CanvasLayerFlipAxis,
-  type CanvasLayerMoveMode,
 } from './ImageCanvasLayerCommandModel';
 import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
 import { ImageCanvasStageView } from './ImageCanvasStageView';
@@ -122,7 +110,6 @@ import {
 } from './ImageCanvasGenerationModel';
 import type {
   AssetPointerDragState,
-  CanvasClipboard,
   CanvasContextMenuState,
   CanvasGenerationDialogState,
   CanvasGenerationInputs,
@@ -145,6 +132,7 @@ import { useCanvasHistory } from './useCanvasHistory';
 import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
 import { useImageCanvasAssetLibrary } from './useImageCanvasAssetLibrary';
 import { useImageCanvasAssetExportWorkflow } from './useImageCanvasAssetExportWorkflow';
+import { useImageCanvasLayerCommands } from './useImageCanvasLayerCommands';
 import { useImageCanvasProjectPersistence } from './useImageCanvasProjectPersistence';
 import { useImageCanvasUploadWorkflow } from './useImageCanvasUploadWorkflow';
 
@@ -288,8 +276,6 @@ export function ImageCanvasEditorView() {
   const [contextMenu, setContextMenu] = useState<CanvasContextMenuState | null>(
     null,
   );
-  const [canvasClipboard, setCanvasClipboard] =
-    useState<CanvasClipboard | null>(null);
   const [quickEditPanel, setQuickEditPanel] =
     useState<QuickEditPanelState | null>(null);
   const [characterAnimationPanel, setCharacterAnimationPanel] =
@@ -681,6 +667,58 @@ export function ImageCanvasEditorView() {
     projectId,
     projectTitle,
   });
+  const handleDeletedLayerSideEffects = useCallback(
+    (targetLayerId: string) => {
+      setQuickEditPanel((currentPanel) =>
+        currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
+      );
+      setCharacterAnimationPanel((currentPanel) =>
+        currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
+      );
+      setGenerateDialog((currentDialog) =>
+        currentDialog?.mode === 'edit' &&
+        currentDialog.sourceLayerId === targetLayerId
+          ? null
+          : currentDialog,
+      );
+      removeCanvasGenerationDialogsByLayerId(targetLayerId);
+    },
+    [removeCanvasGenerationDialogsByLayerId, setGenerateDialog],
+  );
+  const {
+    canvasClipboard,
+    pasteCanvasClipboard,
+    copyContextLayers,
+    duplicateContextLayers,
+    moveContextLayers,
+    groupContextLayers,
+    ungroupContextLayers,
+    toggleContextLayerVisibility,
+    toggleContextLayerLock,
+    flipContextLayers,
+    deleteContextLayers,
+    exportContextLayer,
+    deleteLayerById,
+    deleteSelectedLayer,
+    groupSelectedLayers,
+  } = useImageCanvasLayerCommands({
+    layers,
+    contextMenu,
+    selectedLayerId,
+    selectedLayerIds,
+    setLayers,
+    setSelectedLayerId,
+    setSelectedLayerIds,
+    setHoveredLayerId,
+    setMetadataLayer,
+    setContextMenu,
+    setImageContextMenu,
+    setActiveTool,
+    captureCanvasHistory,
+    selectSingleLayer,
+    onDeleteLayerSideEffects: handleDeletedLayerSideEffects,
+    exportLayerImage,
+  });
   const {
     uploadInputRef,
     setUploadTarget,
@@ -1024,187 +1062,6 @@ export function ImageCanvasEditorView() {
     });
   };
 
-  const duplicateLayersToPoint = (
-    sourceLayers: CanvasLayer[],
-    canvasPoint?: { x: number; y: number },
-    options: { renameCopies?: boolean } = {},
-  ) =>
-    duplicateCanvasLayers({
-      sourceLayers,
-      allLayers: layersRef.current,
-      canvasPoint,
-      renameCopies: options.renameCopies !== false,
-    });
-
-  const pasteCanvasClipboard = (canvasPoint?: { x: number; y: number }) => {
-    if (!canvasClipboard?.layers.length) {
-      return;
-    }
-    const nextLayers = duplicateLayersToPoint(
-      canvasClipboard.layers,
-      canvasPoint,
-      {
-        renameCopies: canvasClipboard.mode !== 'cut',
-      },
-    );
-    if (!nextLayers.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
-    setSelectedLayerIds(nextLayers.map((layer) => layer.id));
-    setSelectedLayerId(nextLayers[0]?.id ?? null);
-    setActiveTool('select');
-    setContextMenu(null);
-  };
-
-  const copyContextLayers = (options: { cut?: boolean } = {}) => {
-    const targetIds = getContextTargetLayerIds();
-    const clipboard = createCanvasLayerClipboard(
-      layers,
-      targetIds,
-      options.cut ? 'cut' : 'copy',
-    );
-    if (!clipboard) {
-      return;
-    }
-    setCanvasClipboard(clipboard);
-    if (options.cut) {
-      captureCanvasHistory();
-      setLayers((currentLayers) =>
-        removeCanvasLayers(currentLayers, targetIds),
-      );
-      selectSingleLayer(null);
-      setMetadataLayer((currentLayer) =>
-        currentLayer && targetIds.includes(currentLayer.id)
-          ? null
-          : currentLayer,
-      );
-    }
-    setContextMenu(null);
-  };
-
-  const duplicateContextLayers = () => {
-    const targetIds = getContextTargetLayerIds();
-    const targetLayers = getCanvasLayersByIds(layers, targetIds);
-    const nextLayers = duplicateLayersToPoint(targetLayers);
-    if (!nextLayers.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
-    setSelectedLayerIds(nextLayers.map((layer) => layer.id));
-    setSelectedLayerId(nextLayers[0]?.id ?? null);
-    setContextMenu(null);
-  };
-
-  const updateContextLayers = (
-    updater: (layer: CanvasLayer, targetIds: string[]) => CanvasLayer,
-  ) => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) =>
-      updateCanvasLayersByIds(currentLayers, targetIds, updater),
-    );
-    setContextMenu(null);
-  };
-
-  const moveContextLayers = (mode: CanvasLayerMoveMode) => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) =>
-      moveCanvasLayers(currentLayers, targetIds, mode),
-    );
-    setContextMenu(null);
-  };
-
-  const groupContextLayers = () => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    const groupId = `layer-group-${Date.now()}`;
-    captureCanvasHistory();
-    setLayers((currentLayers) =>
-      groupCanvasLayers(currentLayers, targetIds, groupId),
-    );
-    setContextMenu(null);
-  };
-
-  const ungroupContextLayers = () => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) => ungroupCanvasLayers(currentLayers, targetIds));
-    setContextMenu(null);
-  };
-
-  const toggleContextLayerVisibility = () => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) =>
-      toggleCanvasLayersVisibility(currentLayers, targetIds),
-    );
-    setContextMenu(null);
-  };
-
-  const toggleContextLayerLock = () => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) =>
-      toggleCanvasLayersLock(currentLayers, targetIds),
-    );
-    setContextMenu(null);
-  };
-
-  const flipContextLayers = (axis: CanvasLayerFlipAxis) => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) =>
-      flipCanvasLayers(currentLayers, targetIds, axis),
-    );
-    setContextMenu(null);
-  };
-
-  const deleteContextLayers = () => {
-    const targetIds = getContextTargetLayerIds();
-    if (!targetIds.length) {
-      return;
-    }
-    captureCanvasHistory();
-    setLayers((currentLayers) => removeCanvasLayers(currentLayers, targetIds));
-    selectSingleLayer(null);
-    setHoveredLayerId(null);
-    setMetadataLayer((currentLayer) =>
-      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
-    );
-    setContextMenu(null);
-  };
-
-  const exportContextLayer = () => {
-    const targetIds = getContextTargetLayerIds();
-    const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
-    exportLayerImage(targetLayer ?? null);
-    setContextMenu(null);
-  };
-
   const addAssetLayer = (
     asset: EditorAsset,
     position?: { x: number; y: number },
@@ -1318,84 +1175,8 @@ export function ImageCanvasEditorView() {
     setImageContextMenu(null);
   };
 
-  const deleteLayerById = (targetLayerId: string | null) => {
-    if (!targetLayerId) {
-      return;
-    }
-    setImageContextMenu(null);
-    setContextMenu(null);
-    captureCanvasHistory();
-    setLayers((currentLayers) => {
-      const nextLayers = currentLayers.filter(
-        (layer) => layer.id !== targetLayerId,
-      );
-      const nextSelectedLayer = nextLayers
-        .slice()
-        .sort((left, right) => right.zIndex - left.zIndex)[0];
-      selectSingleLayer(nextSelectedLayer?.id ?? null);
-      return nextLayers;
-    });
-    setHoveredLayerId(null);
-    setMetadataLayer((currentLayer) =>
-      currentLayer?.id === targetLayerId ? null : currentLayer,
-    );
-    setQuickEditPanel((currentPanel) =>
-      currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
-    );
-    setCharacterAnimationPanel((currentPanel) =>
-      currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
-    );
-    setGenerateDialog((currentDialog) =>
-      currentDialog?.mode === 'edit' &&
-      currentDialog.sourceLayerId === targetLayerId
-        ? null
-        : currentDialog,
-    );
-    removeCanvasGenerationDialogsByLayerId(targetLayerId);
-  };
-
   deleteLayerByIdRef.current = deleteLayerById;
 
-  const deleteSelectedLayer = () => {
-    const targetIds = selectedLayerIds.length
-      ? selectedLayerIds
-      : selectedLayerId
-        ? [selectedLayerId]
-        : [];
-    if (targetIds.length <= 1) {
-      deleteLayerById(targetIds[0] ?? null);
-      return;
-    }
-    captureCanvasHistory();
-    setImageContextMenu(null);
-    setContextMenu(null);
-    setLayers((currentLayers) => {
-      const nextLayers = currentLayers.filter(
-        (layer) => !targetIds.includes(layer.id),
-      );
-      const nextSelectedLayer = nextLayers
-        .slice()
-        .sort((left, right) => right.zIndex - left.zIndex)[0];
-      selectSingleLayer(nextSelectedLayer?.id ?? null);
-      return nextLayers;
-    });
-    setHoveredLayerId(null);
-    setMetadataLayer((currentLayer) =>
-      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
-    );
-    setQuickEditPanel((currentPanel) =>
-      currentPanel && targetIds.includes(currentPanel.sourceLayerId)
-        ? null
-        : currentPanel,
-    );
-    setCharacterAnimationPanel((currentPanel) =>
-      currentPanel && targetIds.includes(currentPanel.sourceLayerId)
-        ? null
-        : currentPanel,
-    );
-    targetIds.forEach(removeCanvasGenerationDialogsByLayerId);
-  };
-
   const openGenerateDialog = () => {
     const placeholderWidth = 420;
     const placeholderHeight = 420;
@@ -2460,29 +2241,6 @@ export function ImageCanvasEditorView() {
     );
   };
 
-  const groupSelectedLayers = () => {
-    const targetIds = selectedLayerIds.length
-      ? selectedLayerIds
-      : selectedLayerId
-        ? [selectedLayerId]
-        : [];
-    if (!targetIds.length) {
-      return;
-    }
-    const groupId = `layer-group-${Date.now()}`;
-    captureCanvasHistory();
-    setLayers((currentLayers) =>
-      currentLayers.map((layer) =>
-        targetIds.includes(layer.id)
-          ? {
-              ...layer,
-              groupId,
-            }
-          : layer,
-      ),
-    );
-  };
-
   const updateSpecFormValue = (key: keyof SpecFormValues, value: string) => {
     setGenerateDialog((currentDialog) => {
       if (currentDialog?.mode !== 'spec') {

src/components/image-editor/useImageCanvasLayerCommands.test.tsx

@@ -0,0 +1,279 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type {
+  CanvasContextMenuState,
+  CanvasLayer,
+} from './ImageCanvasEditorTypes';
+import { useImageCanvasLayerCommands } from './useImageCanvasLayerCommands';
+
+function createLayer(id: string, x: number, zIndex: number): CanvasLayer {
+  return {
+    id,
+    resourceId: `resource-${id}`,
+    title: id,
+    src: `data:image/png;base64,${id}`,
+    x,
+    y: 20,
+    width: 100,
+    height: 80,
+    originalWidth: 100,
+    originalHeight: 80,
+    zIndex,
+    sourceType: 'uploaded',
+  };
+}
+
+function LayerCommandsHarness({
+  exportLayerImage = vi.fn(),
+  onDeleteLayerSideEffects = vi.fn(),
+}: {
+  exportLayerImage?: (layer: CanvasLayer | null) => void;
+  onDeleteLayerSideEffects?: (layerId: string) => void;
+}) {
+  const [layers, setLayers] = useState<CanvasLayer[]>([
+    createLayer('first', 10, 1),
+    createLayer('second', 160, 2),
+    createLayer('third', 310, 3),
+  ]);
+  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(
+    'first',
+  );
+  const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([
+    'first',
+    'second',
+  ]);
+  const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(
+    layers[0] ?? null,
+  );
+  const [hoveredLayerId, setHoveredLayerId] = useState<string | null>('first');
+  const [contextMenu, setContextMenu] = useState<CanvasContextMenuState | null>(
+    {
+      kind: 'layer',
+      layerId: 'first',
+      x: 0,
+      y: 0,
+      canvasPoint: { x: 0, y: 0 },
+    },
+  );
+  const [historyCount, setHistoryCount] = useState(0);
+  const [imageContextClosedCount, setImageContextClosedCount] = useState(0);
+  const [activeTool, setActiveTool] = useState('shape');
+
+  const selectSingleLayer = (layerId: string | null) => {
+    setSelectedLayerId(layerId);
+    setSelectedLayerIds(layerId ? [layerId] : []);
+  };
+
+  const commands = useImageCanvasLayerCommands({
+    layers,
+    contextMenu,
+    selectedLayerId,
+    selectedLayerIds,
+    setLayers,
+    setSelectedLayerId,
+    setSelectedLayerIds,
+    setHoveredLayerId,
+    setMetadataLayer,
+    setContextMenu,
+    setImageContextMenu: () =>
+      setImageContextClosedCount((currentCount) => currentCount + 1),
+    setActiveTool,
+    captureCanvasHistory: () =>
+      setHistoryCount((currentCount) => currentCount + 1),
+    selectSingleLayer,
+    onDeleteLayerSideEffects,
+    exportLayerImage,
+  });
+
+  return (
+    <div>
+      <span data-testid="layers">
+        {layers
+          .map(
+            (layer) =>
+              `${layer.id}:${layer.title}:${layer.x}:${layer.zIndex}:${layer.groupId ?? '-'}:${layer.hidden ? 'hidden' : 'shown'}:${layer.locked ? 'locked' : 'open'}:${layer.flipX ? 'flipX' : '-'}:${layer.flipY ? 'flipY' : '-'}`,
+          )
+          .join('|')}
+      </span>
+      <span data-testid="selection">
+        {selectedLayerId ?? '-'}:{selectedLayerIds.join(',')}
+      </span>
+      <span data-testid="metadata">{metadataLayer?.id ?? '-'}</span>
+      <span data-testid="hovered">{hoveredLayerId ?? '-'}</span>
+      <span data-testid="context">{contextMenu ? 'open' : 'closed'}</span>
+      <span data-testid="history">{historyCount}</span>
+      <span data-testid="image-context-closed">
+        {imageContextClosedCount}
+      </span>
+      <span data-testid="tool">{activeTool}</span>
+      <span data-testid="clipboard">
+        {commands.canvasClipboard
+          ? `${commands.canvasClipboard.mode}:${commands.canvasClipboard.layers.length}`
+          : '-'}
+      </span>
+      <button type="button" onClick={() => commands.copyContextLayers()}>
+        复制
+      </button>
+      <button
+        type="button"
+        onClick={() => commands.copyContextLayers({ cut: true })}
+      >
+        剪切
+      </button>
+      <button
+        type="button"
+        onClick={() => commands.pasteCanvasClipboard({ x: 500, y: 600 })}
+      >
+        粘贴
+      </button>
+      <button type="button" onClick={() => commands.duplicateContextLayers()}>
+        创建副本
+      </button>
+      <button type="button" onClick={() => commands.moveContextLayers('top')}>
+        置顶
+      </button>
+      <button type="button" onClick={() => commands.groupContextLayers()}>
+        创建组
+      </button>
+      <button type="button" onClick={() => commands.ungroupContextLayers()}>
+        解除组
+      </button>
+      <button
+        type="button"
+        onClick={() => commands.toggleContextLayerVisibility()}
+      >
+        显隐
+      </button>
+      <button type="button" onClick={() => commands.toggleContextLayerLock()}>
+        锁定
+      </button>
+      <button type="button" onClick={() => commands.flipContextLayers('x')}>
+        翻转
+      </button>
+      <button type="button" onClick={() => commands.deleteContextLayers()}>
+        删除右键目标
+      </button>
+      <button type="button" onClick={() => commands.deleteSelectedLayer()}>
+        删除选中
+      </button>
+      <button type="button" onClick={() => commands.deleteLayerById('first')}>
+        删除单图
+      </button>
+      <button type="button" onClick={() => commands.groupSelectedLayers()}>
+        选中打组
+      </button>
+      <button type="button" onClick={() => commands.exportContextLayer()}>
+        导出
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          setContextMenu({
+            kind: 'layer',
+            layerId: 'third',
+            x: 0,
+            y: 0,
+            canvasPoint: { x: 0, y: 0 },
+          })
+        }
+      >
+        右键第三层
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setSelectedLayerId('third');
+          setSelectedLayerIds(['third']);
+        }}
+      >
+        只选第三层
+      </button>
+    </div>
+  );
+}
+
+describe('useImageCanvasLayerCommands', () => {
+  it('copies, cuts, and pastes context layers with history and selection updates', () => {
+    render(<LayerCommandsHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '复制' }));
+    expect(screen.getByTestId('clipboard').textContent).toBe('copy:2');
+    expect(screen.getByTestId('context').textContent).toBe('closed');
+
+    fireEvent.click(screen.getByRole('button', { name: '粘贴' }));
+    expect(screen.getByTestId('layers').textContent).toContain(
+      'first 副本:500:4',
+    );
+    expect(screen.getByTestId('layers').textContent).toContain(
+      'second 副本:650:5',
+    );
+    expect(screen.getByTestId('selection').textContent).toContain(
+      'layer-copy-',
+    );
+    expect(screen.getByTestId('tool').textContent).toBe('select');
+
+    fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
+    fireEvent.click(screen.getByRole('button', { name: '只选第三层' }));
+    fireEvent.click(screen.getByRole('button', { name: '剪切' }));
+
+    expect(screen.getByTestId('clipboard').textContent).toBe('cut:1');
+    expect(screen.getByTestId('layers').textContent).not.toContain('third');
+    expect(screen.getByTestId('selection').textContent).toBe('-:');
+    expect(Number(screen.getByTestId('history').textContent)).toBeGreaterThan(
+      1,
+    );
+  });
+
+  it('applies layer commands and clears menus without owning menu positioning', () => {
+    const exportLayerImage = vi.fn();
+    render(<LayerCommandsHarness exportLayerImage={exportLayerImage} />);
+
+    fireEvent.click(screen.getByRole('button', { name: '创建组' }));
+    expect(screen.getByTestId('layers').textContent).toContain('layer-group-');
+
+    fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
+    fireEvent.click(screen.getByRole('button', { name: '显隐' }));
+    expect(screen.getByTestId('layers').textContent).toContain(':hidden:');
+
+    fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
+    fireEvent.click(screen.getByRole('button', { name: '锁定' }));
+    expect(screen.getByTestId('layers').textContent).toContain(':locked:');
+
+    fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
+    fireEvent.click(screen.getByRole('button', { name: '翻转' }));
+    expect(screen.getByTestId('layers').textContent).toContain(':flipX:');
+
+    fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
+    fireEvent.click(screen.getByRole('button', { name: '导出' }));
+    expect(exportLayerImage).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'third' }),
+    );
+    expect(screen.getByTestId('context').textContent).toBe('closed');
+  });
+
+  it('deletes selected and direct layers while running delete side effects', () => {
+    const onDeleteLayerSideEffects = vi.fn();
+    render(
+      <LayerCommandsHarness
+        onDeleteLayerSideEffects={onDeleteLayerSideEffects}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '删除选中' }));
+
+    expect(screen.getByTestId('layers').textContent).not.toContain('first');
+    expect(screen.getByTestId('layers').textContent).not.toContain('second');
+    expect(screen.getByTestId('selection').textContent).toBe('third:third');
+    expect(screen.getByTestId('metadata').textContent).toBe('-');
+    expect(screen.getByTestId('image-context-closed').textContent).toBe('1');
+    expect(onDeleteLayerSideEffects).toHaveBeenCalledWith('first');
+    expect(onDeleteLayerSideEffects).toHaveBeenCalledWith('second');
+
+    fireEvent.click(screen.getByRole('button', { name: '删除单图' }));
+    expect(screen.getByTestId('image-context-closed').textContent).toBe('2');
+  });
+});

src/components/image-editor/useImageCanvasLayerCommands.ts

@@ -0,0 +1,422 @@
+import {
+  useCallback,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+
+import type {
+  CanvasClipboard,
+  CanvasContextMenuState,
+  CanvasLayer,
+} from './ImageCanvasEditorTypes';
+import {
+  createCanvasLayerClipboard,
+  duplicateCanvasLayers,
+  flipCanvasLayers,
+  getCanvasLayersByIds,
+  groupCanvasLayers,
+  moveCanvasLayers,
+  removeCanvasLayers,
+  resolveContextTargetLayerIds,
+  toggleCanvasLayersLock,
+  toggleCanvasLayersVisibility,
+  ungroupCanvasLayers,
+  updateCanvasLayersByIds,
+  type CanvasLayerFlipAxis,
+  type CanvasLayerMoveMode,
+} from './ImageCanvasLayerCommandModel';
+
+type LayerCommandsOptions = {
+  layers: CanvasLayer[];
+  contextMenu: CanvasContextMenuState | null;
+  selectedLayerId: string | null;
+  selectedLayerIds: string[];
+  setLayers: Dispatch<SetStateAction<CanvasLayer[]>>;
+  setSelectedLayerId: Dispatch<SetStateAction<string | null>>;
+  setSelectedLayerIds: Dispatch<SetStateAction<string[]>>;
+  setHoveredLayerId: Dispatch<SetStateAction<string | null>>;
+  setMetadataLayer: Dispatch<SetStateAction<CanvasLayer | null>>;
+  setContextMenu: Dispatch<SetStateAction<CanvasContextMenuState | null>>;
+  setImageContextMenu: (menu: null) => void;
+  setActiveTool: (tool: 'select') => void;
+  captureCanvasHistory: () => void;
+  selectSingleLayer: (layerId: string | null) => void;
+  onDeleteLayerSideEffects: (targetLayerId: string) => void;
+  exportLayerImage: (layer: CanvasLayer | null) => void;
+};
+
+function createGroupId() {
+  return `layer-group-${Date.now()}`;
+}
+
+export function useImageCanvasLayerCommands({
+  layers,
+  contextMenu,
+  selectedLayerId,
+  selectedLayerIds,
+  setLayers,
+  setSelectedLayerId,
+  setSelectedLayerIds,
+  setHoveredLayerId,
+  setMetadataLayer,
+  setContextMenu,
+  setImageContextMenu,
+  setActiveTool,
+  captureCanvasHistory,
+  selectSingleLayer,
+  onDeleteLayerSideEffects,
+  exportLayerImage,
+}: LayerCommandsOptions) {
+  const [canvasClipboard, setCanvasClipboard] =
+    useState<CanvasClipboard | null>(null);
+
+  const getContextTargetLayerIds = useCallback(
+    (menu: CanvasContextMenuState | null = contextMenu) =>
+      resolveContextTargetLayerIds(menu, selectedLayerIds),
+    [contextMenu, selectedLayerIds],
+  );
+
+  const duplicateLayersToPoint = useCallback(
+    (
+      sourceLayers: CanvasLayer[],
+      canvasPoint?: { x: number; y: number },
+      options: { renameCopies?: boolean } = {},
+    ) =>
+      duplicateCanvasLayers({
+        sourceLayers,
+        allLayers: layers,
+        canvasPoint,
+        renameCopies: options.renameCopies !== false,
+      }),
+    [layers],
+  );
+
+  const pasteCanvasClipboard = useCallback(
+    (canvasPoint?: { x: number; y: number }) => {
+      if (!canvasClipboard?.layers.length) {
+        return;
+      }
+      const nextLayers = duplicateLayersToPoint(
+        canvasClipboard.layers,
+        canvasPoint,
+        {
+          renameCopies: canvasClipboard.mode !== 'cut',
+        },
+      );
+      if (!nextLayers.length) {
+        return;
+      }
+      captureCanvasHistory();
+      setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
+      setSelectedLayerIds(nextLayers.map((layer) => layer.id));
+      setSelectedLayerId(nextLayers[0]?.id ?? null);
+      setActiveTool('select');
+      setContextMenu(null);
+    },
+    [
+      canvasClipboard,
+      captureCanvasHistory,
+      duplicateLayersToPoint,
+      setActiveTool,
+      setContextMenu,
+      setLayers,
+      setSelectedLayerId,
+      setSelectedLayerIds,
+    ],
+  );
+
+  const copyContextLayers = useCallback(
+    (options: { cut?: boolean } = {}) => {
+      const targetIds = getContextTargetLayerIds();
+      const clipboard = createCanvasLayerClipboard(
+        layers,
+        targetIds,
+        options.cut ? 'cut' : 'copy',
+      );
+      if (!clipboard) {
+        return;
+      }
+      setCanvasClipboard(clipboard);
+      if (options.cut) {
+        captureCanvasHistory();
+        setLayers((currentLayers) =>
+          removeCanvasLayers(currentLayers, targetIds),
+        );
+        selectSingleLayer(null);
+        setMetadataLayer((currentLayer) =>
+          currentLayer && targetIds.includes(currentLayer.id)
+            ? null
+            : currentLayer,
+        );
+      }
+      setContextMenu(null);
+    },
+    [
+      captureCanvasHistory,
+      getContextTargetLayerIds,
+      layers,
+      selectSingleLayer,
+      setContextMenu,
+      setLayers,
+      setMetadataLayer,
+    ],
+  );
+
+  const duplicateContextLayers = useCallback(() => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayers = getCanvasLayersByIds(layers, targetIds);
+    const nextLayers = duplicateLayersToPoint(targetLayers);
+    if (!nextLayers.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
+    setSelectedLayerIds(nextLayers.map((layer) => layer.id));
+    setSelectedLayerId(nextLayers[0]?.id ?? null);
+    setContextMenu(null);
+  }, [
+    captureCanvasHistory,
+    duplicateLayersToPoint,
+    getContextTargetLayerIds,
+    layers,
+    setContextMenu,
+    setLayers,
+    setSelectedLayerId,
+    setSelectedLayerIds,
+  ]);
+
+  const updateContextLayers = useCallback(
+    (updater: (layer: CanvasLayer, targetIds: string[]) => CanvasLayer) => {
+      const targetIds = getContextTargetLayerIds();
+      if (!targetIds.length) {
+        return;
+      }
+      captureCanvasHistory();
+      setLayers((currentLayers) =>
+        updateCanvasLayersByIds(currentLayers, targetIds, updater),
+      );
+      setContextMenu(null);
+    },
+    [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers],
+  );
+
+  const moveContextLayers = useCallback(
+    (mode: CanvasLayerMoveMode) => {
+      const targetIds = getContextTargetLayerIds();
+      if (!targetIds.length) {
+        return;
+      }
+      captureCanvasHistory();
+      setLayers((currentLayers) =>
+        moveCanvasLayers(currentLayers, targetIds, mode),
+      );
+      setContextMenu(null);
+    },
+    [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers],
+  );
+
+  const groupContextLayers = useCallback(() => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      groupCanvasLayers(currentLayers, targetIds, createGroupId()),
+    );
+    setContextMenu(null);
+  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+
+  const ungroupContextLayers = useCallback(() => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) => ungroupCanvasLayers(currentLayers, targetIds));
+    setContextMenu(null);
+  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+
+  const toggleContextLayerVisibility = useCallback(() => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      toggleCanvasLayersVisibility(currentLayers, targetIds),
+    );
+    setContextMenu(null);
+  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+
+  const toggleContextLayerLock = useCallback(() => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      toggleCanvasLayersLock(currentLayers, targetIds),
+    );
+    setContextMenu(null);
+  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+
+  const flipContextLayers = useCallback(
+    (axis: CanvasLayerFlipAxis) => {
+      const targetIds = getContextTargetLayerIds();
+      if (!targetIds.length) {
+        return;
+      }
+      captureCanvasHistory();
+      setLayers((currentLayers) =>
+        flipCanvasLayers(currentLayers, targetIds, axis),
+      );
+      setContextMenu(null);
+    },
+    [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers],
+  );
+
+  const deleteContextLayers = useCallback(() => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) => removeCanvasLayers(currentLayers, targetIds));
+    selectSingleLayer(null);
+    setHoveredLayerId(null);
+    setMetadataLayer((currentLayer) =>
+      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
+    );
+    setContextMenu(null);
+  }, [
+    captureCanvasHistory,
+    getContextTargetLayerIds,
+    selectSingleLayer,
+    setContextMenu,
+    setHoveredLayerId,
+    setLayers,
+    setMetadataLayer,
+  ]);
+
+  const exportContextLayer = useCallback(() => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
+    exportLayerImage(targetLayer ?? null);
+    setContextMenu(null);
+  }, [exportLayerImage, getContextTargetLayerIds, layers, setContextMenu]);
+
+  const deleteLayerById = useCallback(
+    (targetLayerId: string | null) => {
+      if (!targetLayerId) {
+        return;
+      }
+      setImageContextMenu(null);
+      setContextMenu(null);
+      captureCanvasHistory();
+      setLayers((currentLayers) => {
+        const nextLayers = currentLayers.filter(
+          (layer) => layer.id !== targetLayerId,
+        );
+        const nextSelectedLayer = nextLayers
+          .slice()
+          .sort((left, right) => right.zIndex - left.zIndex)[0];
+        selectSingleLayer(nextSelectedLayer?.id ?? null);
+        return nextLayers;
+      });
+      setHoveredLayerId(null);
+      setMetadataLayer((currentLayer) =>
+        currentLayer?.id === targetLayerId ? null : currentLayer,
+      );
+      onDeleteLayerSideEffects(targetLayerId);
+    },
+    [
+      captureCanvasHistory,
+      onDeleteLayerSideEffects,
+      selectSingleLayer,
+      setContextMenu,
+      setHoveredLayerId,
+      setImageContextMenu,
+      setLayers,
+      setMetadataLayer,
+    ],
+  );
+
+  const deleteSelectedLayer = useCallback(() => {
+    const targetIds = selectedLayerIds.length
+      ? selectedLayerIds
+      : selectedLayerId
+        ? [selectedLayerId]
+        : [];
+    if (targetIds.length <= 1) {
+      deleteLayerById(targetIds[0] ?? null);
+      return;
+    }
+    captureCanvasHistory();
+    setImageContextMenu(null);
+    setContextMenu(null);
+    setLayers((currentLayers) => {
+      const nextLayers = currentLayers.filter(
+        (layer) => !targetIds.includes(layer.id),
+      );
+      const nextSelectedLayer = nextLayers
+        .slice()
+        .sort((left, right) => right.zIndex - left.zIndex)[0];
+      selectSingleLayer(nextSelectedLayer?.id ?? null);
+      return nextLayers;
+    });
+    setHoveredLayerId(null);
+    setMetadataLayer((currentLayer) =>
+      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
+    );
+    targetIds.forEach((targetId) => onDeleteLayerSideEffects(targetId));
+  }, [
+    captureCanvasHistory,
+    deleteLayerById,
+    onDeleteLayerSideEffects,
+    selectSingleLayer,
+    selectedLayerId,
+    selectedLayerIds,
+    setContextMenu,
+    setHoveredLayerId,
+    setImageContextMenu,
+    setLayers,
+    setMetadataLayer,
+  ]);
+
+  const groupSelectedLayers = useCallback(() => {
+    const targetIds = selectedLayerIds.length
+      ? selectedLayerIds
+      : selectedLayerId
+        ? [selectedLayerId]
+        : [];
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      groupCanvasLayers(currentLayers, targetIds, createGroupId()),
+    );
+  }, [captureCanvasHistory, selectedLayerId, selectedLayerIds, setLayers]);
+
+  return {
+    canvasClipboard,
+    getContextTargetLayerIds,
+    pasteCanvasClipboard,
+    copyContextLayers,
+    duplicateContextLayers,
+    updateContextLayers,
+    moveContextLayers,
+    groupContextLayers,
+    ungroupContextLayers,
+    toggleContextLayerVisibility,
+    toggleContextLayerLock,
+    flipContextLayers,
+    deleteContextLayers,
+    exportContextLayer,
+    deleteLayerById,
+    deleteSelectedLayer,
+    groupSelectedLayers,
+  };
+}