拆分图片画布舞台控制层

新增 ImageCanvasStageControllerModel 承载舞台派生状态和右键菜单模型新增 useImageCanvasStageController 收口清空焦点和右键菜单处理精简 ImageCanvasEditorView 的舞台控制胶水更新图片画布拆分计划和 TRACKING 验证记录
2026-06-17 13:39:48 +08:00
parent 015716945e
commit 1c92db19c1
7 changed files with 638 additions and 124 deletions
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1,12 +1,5 @@
 import { Check, ChevronLeft, Download, Pencil, X } from 'lucide-react';
-import {
-  type MouseEvent as ReactMouseEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
@@ -14,29 +7,14 @@ import { useAuthUi } from '../auth/AuthUiContext';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
 import { ImageCanvasMetadataModalView } from './ImageCanvasMetadataModalView';
-import {
-  getCanvasLayersByIds,
-  resolveContextTargetLayerIds,
-} from './ImageCanvasLayerCommandModel';
 import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
 import { ImageCanvasStageView } from './ImageCanvasStageView';
-import {
-  isGeneratedLayer,
-  resolveContextMenuPosition,
-} from './ImageCanvasEditorModel';
-import {
-  getGenerationFrameAriaLabel,
-  getGenerationFrameLabel,
-  getLayerKindLabel,
-} from './ImageCanvasGenerationModel';
+import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
 import {
  isCanvasGenerationComposerVisible,
  resolveCharacterAnimationPanelStyle,
-  resolveGenerationAnchor,
-  resolveGenerationComposerStyle,
  resolveIconComposerStyle,
  resolveQuickEditPanelStyle,
-  resolveSelectedToolbarStyle,
 } from './ImageCanvasOverlayModel';
 import type {
  AssetPointerDragState,
@@ -59,6 +37,7 @@ import { useImageCanvasGenerationWorkflow } from './useImageCanvasGenerationWork
 import { useImageCanvasKeyboardShortcuts } from './useImageCanvasKeyboardShortcuts';
 import { useImageCanvasLayerCommands } from './useImageCanvasLayerCommands';
 import { useImageCanvasProjectPersistence } from './useImageCanvasProjectPersistence';
+import { useImageCanvasStageController } from './useImageCanvasStageController';
 import { useImageCanvasStageInteractions } from './useImageCanvasStageInteractions';
 import { useImageCanvasUploadWorkflow } from './useImageCanvasUploadWorkflow';
 import {
@@ -257,54 +236,6 @@ export function ImageCanvasEditorView() {
  } = useCanvasGenerationDialogs({
    onActivate: handleActivateCanvasGenerationDialog,
  });
-  const selectedLayer = useMemo(
-    () => layers.find((layer) => layer.id === selectedLayerId) ?? null,
-    [layers, selectedLayerId],
-  );
-  const selectedLayerCount = selectedLayerIds.length;
-  const hasMultipleSelectedLayers = selectedLayerCount > 1;
-  const activeGenerationLayer = useMemo(
-    () =>
-      activeCanvasGenerationDialog?.generatedLayerId
-        ? (layers.find(
-            (layer) =>
-              layer.id === activeCanvasGenerationDialog.generatedLayerId,
-          ) ?? null)
-        : null,
-    [activeCanvasGenerationDialog, layers],
-  );
-  const generationAnchor = activeCanvasGenerationDialog
-    ? resolveGenerationAnchor({
-        dialog: activeCanvasGenerationDialog,
-        generatedLayer: activeGenerationLayer,
-      })
-    : null;
-  const generationComposerStyle = resolveGenerationComposerStyle({
-    dialog: activeCanvasGenerationDialog,
-    anchor: generationAnchor,
-    viewport,
-  });
-  const selectedToolbarStyle = resolveSelectedToolbarStyle({
-    selectedLayer,
-    viewport,
-    canvasSize,
-  });
-  const imageContextMenuLayer = imageContextMenu
-    ? (layers.find((layer) => layer.id === imageContextMenu.layerId) ?? null)
-    : null;
-  const getContextTargetLayerIds = useCallback(
-    (menu: CanvasContextMenuState | null = contextMenu) =>
-      resolveContextTargetLayerIds(menu, selectedLayerIdsRef.current),
-    [contextMenu],
-  );
-  const contextTargetIds = getContextTargetLayerIds(contextMenu);
-  const contextTargetLayers = getCanvasLayersByIds(layers, contextTargetIds);
-  const contextShouldShowLayer = contextTargetLayers.some(
-    (layer) => layer.hidden,
-  );
-  const contextShouldUnlockLayer = contextTargetLayers.some(
-    (layer) => layer.locked,
-  );
  const canvasHistoryRefs = useMemo(
    () => ({
      layersRef,
@@ -463,6 +394,31 @@ export function ImageCanvasEditorView() {
    closeGenerateComposer,
    clearDeletedLayerGenerationState,
  } = generationWorkflow;
+  const {
+    selectedLayer,
+    generationComposerStyle,
+    selectedToolbarStyle,
+    imageContextMenuLayer,
+    contextShouldShowLayer,
+    contextShouldUnlockLayer,
+    clearCanvasFocus,
+    handleCanvasContextMenu,
+    handleLayerContextMenu,
+  } = useImageCanvasStageController({
+    layers,
+    selectedLayerId,
+    selectedLayerIds,
+    activeCanvasGenerationDialog,
+    imageContextMenu,
+    setImageContextMenu,
+    contextMenu,
+    setContextMenu,
+    viewport,
+    canvasSize,
+    selectSingleLayer,
+    hideGeneratedLayerPanelAfterBlur,
+    getCanvasPointFromClient,
+  });
  const iconComposerStyle = resolveIconComposerStyle({
    dialog: activeCanvasGenerationDialog,
    composerStyle: generationComposerStyle,
@@ -540,13 +496,6 @@ export function ImageCanvasEditorView() {
    appendCanvasLayersWithResources,
    selectSingleLayer,
  });
-
-  const clearCanvasFocus = useCallback(() => {
-    selectSingleLayer(null);
-    hideGeneratedLayerPanelAfterBlur();
-    setImageContextMenu(null);
-    setContextMenu(null);
-  }, [hideGeneratedLayerPanelAfterBlur, selectSingleLayer]);
  const {
    canvasMarquee,
    isPanning,
@@ -664,48 +613,6 @@ export function ImageCanvasEditorView() {

  deleteLayerByIdRef.current = deleteLayerById;

-  const handleCanvasContextMenu = (event: ReactMouseEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const position = resolveContextMenuPosition(
-      event.clientX,
-      event.clientY,
-      'blank',
-    );
-    setImageContextMenu(null);
-    setContextMenu({
-      kind: 'blank',
-      ...position,
-      canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
-    });
-  };
-
-  const handleLayerContextMenu = (
-    event: ReactMouseEvent<HTMLButtonElement>,
-    layer: CanvasLayer,
-  ) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!selectedLayerIds.includes(layer.id)) {
-      selectSingleLayer(layer.id);
-    }
-    const position = resolveContextMenuPosition(
-      event.clientX,
-      event.clientY,
-      'layer',
-    );
-    setContextMenu({
-      kind: 'layer',
-      layerId: layer.id,
-      ...position,
-      canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
-    });
-    setImageContextMenu({
-      layerId: layer.id,
-      ...position,
-    });
-  };
-
  const switchTool = (tool: CanvasTool) => {
    clearActiveInteraction();
    if (tool === 'upload') {
--- a/src/components/image-editor/ImageCanvasStageControllerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasStageControllerModel.test.ts
@@ -0,0 +1,155 @@
+/* @vitest-environment jsdom */
+
+import { describe, expect, it } from 'vitest';
+
+import type {
+  CanvasContextMenuState,
+  CanvasGenerationDialogState,
+  CanvasLayer,
+} from './ImageCanvasEditorTypes';
+import {
+  createBlankCanvasContextMenu,
+  createLayerCanvasContextMenus,
+  resolveImageCanvasStageControllerModel,
+} from './ImageCanvasStageControllerModel';
+
+function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
+  const id = overrides.id ?? 'layer-a';
+  return {
+    id,
+    resourceId: `resource-${id}`,
+    title: id,
+    src: `data:image/png;base64,${id}`,
+    x: 100,
+    y: 80,
+    width: 240,
+    height: 120,
+    originalWidth: 240,
+    originalHeight: 120,
+    zIndex: 1,
+    sourceType: 'uploaded',
+    ...overrides,
+  };
+}
+
+function createDialog(
+  overrides: Partial<CanvasGenerationDialogState> = {},
+): CanvasGenerationDialogState {
+  return {
+    id: 'dialog-a',
+    mode: 'generate',
+    prompt: '',
+    status: 'idle',
+    placeholder: {
+      x: 300,
+      y: 200,
+      width: 360,
+      height: 260,
+      originalWidth: 1024,
+      originalHeight: 1024,
+    },
+    ...overrides,
+  };
+}
+
+describe('ImageCanvasStageControllerModel', () => {
+  it('derives selected layer, generation anchor, and overlay positions', () => {
+    const selectedLayer = createLayer({ id: 'selected', x: 40, y: 60 });
+    const generatedLayer = createLayer({
+      id: 'generated',
+      x: 200,
+      y: 160,
+      width: 320,
+      height: 180,
+    });
+    const dialog = createDialog({ generatedLayerId: generatedLayer.id });
+
+    const model = resolveImageCanvasStageControllerModel({
+      layers: [selectedLayer, generatedLayer],
+      selectedLayerId: selectedLayer.id,
+      selectedLayerIds: [selectedLayer.id, generatedLayer.id],
+      activeCanvasGenerationDialog: dialog,
+      imageContextMenu: { layerId: generatedLayer.id, x: 0, y: 0 },
+      contextMenu: null,
+      viewport: { x: 10, y: 20, scale: 2 },
+      canvasSize: { width: 900, height: 640 },
+    });
+
+    expect(model.selectedLayer).toBe(selectedLayer);
+    expect(model.selectedLayerCount).toBe(2);
+    expect(model.hasMultipleSelectedLayers).toBe(true);
+    expect(model.activeGenerationLayer).toBe(generatedLayer);
+    expect(model.generationAnchor).toBe(generatedLayer);
+    expect(model.generationComposerStyle).toEqual({ left: 730, top: 710 });
+    expect(model.selectedToolbarStyle).toEqual({ left: 330, top: 128 });
+    expect(model.imageContextMenuLayer).toBe(generatedLayer);
+  });
+
+  it('derives context target state from a layer menu and current selection', () => {
+    const visibleLayer = createLayer({ id: 'visible', locked: true });
+    const hiddenLayer = createLayer({ id: 'hidden', hidden: true });
+    const contextMenu: CanvasContextMenuState = {
+      kind: 'layer',
+      layerId: hiddenLayer.id,
+      x: 20,
+      y: 30,
+      canvasPoint: { x: 40, y: 50 },
+    };
+
+    const model = resolveImageCanvasStageControllerModel({
+      layers: [visibleLayer, hiddenLayer],
+      selectedLayerId: visibleLayer.id,
+      selectedLayerIds: [visibleLayer.id, hiddenLayer.id],
+      activeCanvasGenerationDialog: null,
+      imageContextMenu: null,
+      contextMenu,
+      viewport: { x: 0, y: 0, scale: 1 },
+      canvasSize: { width: 900, height: 640 },
+    });
+
+    expect(model.contextTargetIds).toEqual([visibleLayer.id, hiddenLayer.id]);
+    expect(model.contextTargetLayers).toEqual([visibleLayer, hiddenLayer]);
+    expect(model.contextShouldShowLayer).toBe(true);
+    expect(model.contextShouldUnlockLayer).toBe(true);
+  });
+
+  it('creates clamped blank and layer context menus with canvas points', () => {
+    window.innerWidth = 320;
+    window.innerHeight = 240;
+
+    expect(
+      createBlankCanvasContextMenu({
+        clientX: 1000,
+        clientY: 1000,
+        canvasPoint: { x: 12, y: 16 },
+      }),
+    ).toEqual({
+      kind: 'blank',
+      x: 124,
+      y: 56,
+      canvasPoint: { x: 12, y: 16 },
+    });
+
+    expect(
+      createLayerCanvasContextMenus({
+        clientX: 1000,
+        clientY: 1000,
+        layerId: 'layer-a',
+        canvasPoint: { x: 20, y: 30 },
+      }),
+    ).toEqual({
+      contextMenu: {
+        kind: 'layer',
+        layerId: 'layer-a',
+        x: 124,
+        y: 8,
+        canvasPoint: { x: 20, y: 30 },
+      },
+      imageContextMenu: {
+        layerId: 'layer-a',
+        x: 124,
+        y: 8,
+      },
+    });
+  });
+});
--- a/src/components/image-editor/ImageCanvasStageControllerModel.ts
+++ b/src/components/image-editor/ImageCanvasStageControllerModel.ts
@@ -0,0 +1,148 @@
+import {
+  getCanvasLayersByIds,
+  resolveContextTargetLayerIds,
+} from './ImageCanvasLayerCommandModel';
+import {
+  resolveContextMenuPosition,
+} from './ImageCanvasEditorModel';
+import type {
+  CanvasContextMenuState,
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasViewport,
+  ImageContextMenuState,
+} from './ImageCanvasEditorTypes';
+import {
+  resolveGenerationAnchor,
+  resolveGenerationComposerStyle,
+  resolveSelectedToolbarStyle,
+} from './ImageCanvasOverlayModel';
+
+export type ImageCanvasStageControllerModel = {
+  selectedLayer: CanvasLayer | null;
+  selectedLayerCount: number;
+  hasMultipleSelectedLayers: boolean;
+  activeGenerationLayer: CanvasLayer | null;
+  generationAnchor: CanvasLayer | CanvasGenerationDialogState['placeholder'] | null;
+  generationComposerStyle: ReturnType<typeof resolveGenerationComposerStyle>;
+  selectedToolbarStyle: ReturnType<typeof resolveSelectedToolbarStyle>;
+  imageContextMenuLayer: CanvasLayer | null;
+  contextTargetIds: string[];
+  contextTargetLayers: CanvasLayer[];
+  contextShouldShowLayer: boolean;
+  contextShouldUnlockLayer: boolean;
+};
+
+type ResolveImageCanvasStageControllerModelOptions = {
+  layers: CanvasLayer[];
+  selectedLayerId: string | null;
+  selectedLayerIds: string[];
+  activeCanvasGenerationDialog: CanvasGenerationDialogState | null;
+  imageContextMenu: ImageContextMenuState | null;
+  contextMenu: CanvasContextMenuState | null;
+  viewport: CanvasViewport;
+  canvasSize: { width: number; height: number };
+};
+
+export function resolveImageCanvasStageControllerModel({
+  layers,
+  selectedLayerId,
+  selectedLayerIds,
+  activeCanvasGenerationDialog,
+  imageContextMenu,
+  contextMenu,
+  viewport,
+  canvasSize,
+}: ResolveImageCanvasStageControllerModelOptions): ImageCanvasStageControllerModel {
+  const selectedLayer =
+    layers.find((layer) => layer.id === selectedLayerId) ?? null;
+  const selectedLayerCount = selectedLayerIds.length;
+  const activeGenerationLayer =
+    activeCanvasGenerationDialog?.generatedLayerId
+      ? (layers.find(
+          (layer) => layer.id === activeCanvasGenerationDialog.generatedLayerId,
+        ) ?? null)
+      : null;
+  const generationAnchor = activeCanvasGenerationDialog
+    ? resolveGenerationAnchor({
+        dialog: activeCanvasGenerationDialog,
+        generatedLayer: activeGenerationLayer,
+      })
+    : null;
+  const imageContextMenuLayer = imageContextMenu
+    ? (layers.find((layer) => layer.id === imageContextMenu.layerId) ?? null)
+    : null;
+  const contextTargetIds = resolveContextTargetLayerIds(
+    contextMenu,
+    selectedLayerIds,
+  );
+  const contextTargetLayers = getCanvasLayersByIds(layers, contextTargetIds);
+
+  return {
+    selectedLayer,
+    selectedLayerCount,
+    hasMultipleSelectedLayers: selectedLayerCount > 1,
+    activeGenerationLayer,
+    generationAnchor,
+    generationComposerStyle: resolveGenerationComposerStyle({
+      dialog: activeCanvasGenerationDialog,
+      anchor: generationAnchor,
+      viewport,
+    }),
+    selectedToolbarStyle: resolveSelectedToolbarStyle({
+      selectedLayer,
+      viewport,
+      canvasSize,
+    }),
+    imageContextMenuLayer,
+    contextTargetIds,
+    contextTargetLayers,
+    contextShouldShowLayer: contextTargetLayers.some((layer) => layer.hidden),
+    contextShouldUnlockLayer: contextTargetLayers.some((layer) => layer.locked),
+  };
+}
+
+export function createBlankCanvasContextMenu({
+  clientX,
+  clientY,
+  canvasPoint,
+}: {
+  clientX: number;
+  clientY: number;
+  canvasPoint: { x: number; y: number };
+}): CanvasContextMenuState {
+  return {
+    kind: 'blank',
+    ...resolveContextMenuPosition(clientX, clientY, 'blank'),
+    canvasPoint,
+  };
+}
+
+export function createLayerCanvasContextMenus({
+  clientX,
+  clientY,
+  layerId,
+  canvasPoint,
+}: {
+  clientX: number;
+  clientY: number;
+  layerId: string;
+  canvasPoint: { x: number; y: number };
+}): {
+  contextMenu: CanvasContextMenuState;
+  imageContextMenu: ImageContextMenuState;
+} {
+  const position = resolveContextMenuPosition(clientX, clientY, 'layer');
+  return {
+    contextMenu: {
+      kind: 'layer',
+      layerId,
+      ...position,
+      canvasPoint,
+    },
+    imageContextMenu: {
+      layerId,
+      ...position,
+    },
+  };
+}
--- a/src/components/image-editor/useImageCanvasStageController.test.tsx
+++ b/src/components/image-editor/useImageCanvasStageController.test.tsx
@@ -0,0 +1,152 @@
+/* @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,
+  ImageContextMenuState,
+} from './ImageCanvasEditorTypes';
+import { useImageCanvasStageController } from './useImageCanvasStageController';
+
+function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
+  const id = overrides.id ?? 'layer-a';
+  return {
+    id,
+    resourceId: `resource-${id}`,
+    title: id,
+    src: `data:image/png;base64,${id}`,
+    x: 100,
+    y: 80,
+    width: 240,
+    height: 120,
+    originalWidth: 240,
+    originalHeight: 120,
+    zIndex: 1,
+    sourceType: 'uploaded',
+    ...overrides,
+  };
+}
+
+function StageControllerHarness({
+  hideGeneratedLayerPanelAfterBlur = vi.fn(),
+}: {
+  hideGeneratedLayerPanelAfterBlur?: () => void;
+}) {
+  const layers = [
+    createLayer({ id: 'first', hidden: true }),
+    createLayer({ id: 'second', locked: true }),
+  ];
+  const [selectedLayerId, setSelectedLayerId] = useState<string | null>('first');
+  const [selectedLayerIds, setSelectedLayerIds] = useState(['first', 'second']);
+  const [contextMenu, setContextMenu] =
+    useState<CanvasContextMenuState | null>(null);
+  const [imageContextMenu, setImageContextMenu] =
+    useState<ImageContextMenuState | null>({ layerId: 'first', x: 1, y: 2 });
+  const selectSingleLayer = (layerId: string | null) => {
+    setSelectedLayerId(layerId);
+    setSelectedLayerIds(layerId ? [layerId] : []);
+  };
+  const controller = useImageCanvasStageController({
+    layers,
+    selectedLayerId,
+    selectedLayerIds,
+    activeCanvasGenerationDialog: null,
+    imageContextMenu,
+    setImageContextMenu,
+    contextMenu,
+    setContextMenu,
+    viewport: { x: 0, y: 0, scale: 1 },
+    canvasSize: { width: 900, height: 640 },
+    selectSingleLayer,
+    hideGeneratedLayerPanelAfterBlur,
+    getCanvasPointFromClient: (clientX, clientY) => ({
+      x: clientX + 1,
+      y: clientY + 2,
+    }),
+  });
+
+  return (
+    <div>
+      <span data-testid="selected">
+        {selectedLayerId ?? '-'}:{selectedLayerIds.join(',')}
+      </span>
+      <span data-testid="context">
+        {contextMenu
+          ? `${contextMenu.kind}:${contextMenu.x}:${contextMenu.y}:${contextMenu.canvasPoint.x}:${contextMenu.canvasPoint.y}`
+          : '-'}
+      </span>
+      <span data-testid="image-context">
+        {imageContextMenu
+          ? `${imageContextMenu.layerId}:${imageContextMenu.x}:${imageContextMenu.y}`
+          : '-'}
+      </span>
+      <span data-testid="show-layer">
+        {String(controller.contextShouldShowLayer)}
+      </span>
+      <span data-testid="unlock-layer">
+        {String(controller.contextShouldUnlockLayer)}
+      </span>
+      <button type="button" onClick={controller.clearCanvasFocus}>
+        清空焦点
+      </button>
+      <div
+        role="presentation"
+        data-testid="canvas"
+        onContextMenu={controller.handleCanvasContextMenu}
+      />
+      <button
+        type="button"
+        onContextMenu={(event) =>
+          controller.handleLayerContextMenu(event, layers[1]!)
+        }
+      >
+        图层右键目标
+      </button>
+    </div>
+  );
+}
+
+describe('useImageCanvasStageController', () => {
+  it('clears canvas focus and closes generated layer panels', () => {
+    const hideGeneratedLayerPanelAfterBlur = vi.fn();
+    render(
+      <StageControllerHarness
+        hideGeneratedLayerPanelAfterBlur={hideGeneratedLayerPanelAfterBlur}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '清空焦点' }));
+
+    expect(screen.getByTestId('selected').textContent).toBe('-:');
+    expect(screen.getByTestId('image-context').textContent).toBe('-');
+    expect(screen.getByTestId('context').textContent).toBe('-');
+    expect(hideGeneratedLayerPanelAfterBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('creates blank and layer context menus and preserves multi-target state', () => {
+    render(<StageControllerHarness />);
+
+    fireEvent.contextMenu(screen.getByTestId('canvas'), {
+      clientX: 20,
+      clientY: 30,
+    });
+    expect(screen.getByTestId('context').textContent).toBe('blank:20:30:21:32');
+    expect(screen.getByTestId('image-context').textContent).toBe('-');
+
+    fireEvent.contextMenu(
+      screen.getByRole('button', { name: '图层右键目标' }),
+      {
+        clientX: 40,
+        clientY: 50,
+      },
+    );
+    expect(screen.getByTestId('context').textContent).toBe('layer:40:50:41:52');
+    expect(screen.getByTestId('image-context').textContent).toBe('second:40:50');
+    expect(screen.getByTestId('show-layer').textContent).toBe('true');
+    expect(screen.getByTestId('unlock-layer').textContent).toBe('true');
+  });
+
+});
--- a/src/components/image-editor/useImageCanvasStageController.ts
+++ b/src/components/image-editor/useImageCanvasStageController.ts
@@ -0,0 +1,139 @@
+import {
+  type Dispatch,
+  type MouseEvent as ReactMouseEvent,
+  type SetStateAction,
+  useCallback,
+  useMemo,
+} from 'react';
+
+import type {
+  CanvasContextMenuState,
+  CanvasGenerationDialogState,
+  CanvasLayer,
+  CanvasViewport,
+  ImageContextMenuState,
+} from './ImageCanvasEditorTypes';
+import {
+  createBlankCanvasContextMenu,
+  createLayerCanvasContextMenus,
+  resolveImageCanvasStageControllerModel,
+} from './ImageCanvasStageControllerModel';
+
+type UseImageCanvasStageControllerOptions = {
+  layers: CanvasLayer[];
+  selectedLayerId: string | null;
+  selectedLayerIds: string[];
+  activeCanvasGenerationDialog: CanvasGenerationDialogState | null;
+  imageContextMenu: ImageContextMenuState | null;
+  setImageContextMenu: Dispatch<SetStateAction<ImageContextMenuState | null>>;
+  contextMenu: CanvasContextMenuState | null;
+  setContextMenu: Dispatch<SetStateAction<CanvasContextMenuState | null>>;
+  viewport: CanvasViewport;
+  canvasSize: { width: number; height: number };
+  selectSingleLayer: (layerId: string | null) => void;
+  hideGeneratedLayerPanelAfterBlur: () => void;
+  getCanvasPointFromClient: (
+    clientX: number,
+    clientY: number,
+  ) => { x: number; y: number };
+};
+
+export function useImageCanvasStageController({
+  layers,
+  selectedLayerId,
+  selectedLayerIds,
+  activeCanvasGenerationDialog,
+  imageContextMenu,
+  setImageContextMenu,
+  contextMenu,
+  setContextMenu,
+  viewport,
+  canvasSize,
+  selectSingleLayer,
+  hideGeneratedLayerPanelAfterBlur,
+  getCanvasPointFromClient,
+}: UseImageCanvasStageControllerOptions) {
+  const model = useMemo(
+    () =>
+      resolveImageCanvasStageControllerModel({
+        layers,
+        selectedLayerId,
+        selectedLayerIds,
+        activeCanvasGenerationDialog,
+        imageContextMenu,
+        contextMenu,
+        viewport,
+        canvasSize,
+      }),
+    [
+      activeCanvasGenerationDialog,
+      canvasSize,
+      contextMenu,
+      imageContextMenu,
+      layers,
+      selectedLayerId,
+      selectedLayerIds,
+      viewport,
+    ],
+  );
+
+  const clearCanvasFocus = useCallback(() => {
+    selectSingleLayer(null);
+    hideGeneratedLayerPanelAfterBlur();
+    setImageContextMenu(null);
+    setContextMenu(null);
+  }, [
+    hideGeneratedLayerPanelAfterBlur,
+    selectSingleLayer,
+    setContextMenu,
+    setImageContextMenu,
+  ]);
+
+  const handleCanvasContextMenu = useCallback(
+    (event: ReactMouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setImageContextMenu(null);
+      setContextMenu(
+        createBlankCanvasContextMenu({
+          clientX: event.clientX,
+          clientY: event.clientY,
+          canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
+        }),
+      );
+    },
+    [getCanvasPointFromClient, setContextMenu, setImageContextMenu],
+  );
+
+  const handleLayerContextMenu = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>, layer: CanvasLayer) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!selectedLayerIds.includes(layer.id)) {
+        selectSingleLayer(layer.id);
+      }
+      const nextMenus = createLayerCanvasContextMenus({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        layerId: layer.id,
+        canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
+      });
+      setContextMenu(nextMenus.contextMenu);
+      setImageContextMenu(nextMenus.imageContextMenu);
+    },
+    [
+      getCanvasPointFromClient,
+      selectSingleLayer,
+      selectedLayerIds,
+      setContextMenu,
+      setImageContextMenu,
+    ],
+  );
+
+  return {
+    ...model,
+    clearCanvasFocus,
+    handleCanvasContextMenu,
+    handleLayerContextMenu,
+  };
+}