Genarrative/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx

import {
  Crop,
  Download,
  Grid2X2,
  ImageOff,
  Loader2,
  PersonStanding,
  Scissors,
  Sparkles,
  WandSparkles,
} from 'lucide-react';
import type { CSSProperties } from 'react';

import { PlatformIconButton } from '../common/PlatformIconButton';
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
import type { CanvasLayer } from './ImageCanvasEditorTypes';
import {
  canOpenRedrawPanel,
  isQuickEditUnsupportedAssetKind,
} from './ImageCanvasGenerationModel';

type ImageCanvasSelectedLayerToolbarViewProps = {
  selectedLayer: CanvasLayer | null;
  selectedToolbarStyle: CSSProperties | null;
  onOpenQuickEditPanel: (layer: CanvasLayer) => void;
  onOpenRedrawPanel: (layer: CanvasLayer) => void;
  onOpenCropExpandPanel: (layer: CanvasLayer) => void;
  onRemoveBackground: (layer: CanvasLayer) => void;
  onPerfectPixel: (layer: CanvasLayer) => void;
  isPerfectPixelProcessing: boolean;
  isPerfectPixelPendingConfirmation: boolean;
  isSplittingIconSpritesheet: boolean;
  isPersistingAssetKind: boolean;
  onSplitIconSpritesheet: (layer: CanvasLayer) => void;
  onExtractUiDesignAssets: (layer: CanvasLayer) => void;
  onOpenCharacterAnimationPanel: (layer: CanvasLayer) => void;
  onDownloadLayer: (layer: CanvasLayer) => void;
};

export function ImageCanvasSelectedLayerToolbarView({
  selectedLayer,
  selectedToolbarStyle,
  onOpenQuickEditPanel,
  onOpenRedrawPanel,
  onOpenCropExpandPanel,
  onRemoveBackground,
  onPerfectPixel,
  isPerfectPixelProcessing,
  isPerfectPixelPendingConfirmation,
  isSplittingIconSpritesheet,
  isPersistingAssetKind,
  onSplitIconSpritesheet,
  onExtractUiDesignAssets,
  onOpenCharacterAnimationPanel,
  onDownloadLayer,
}: ImageCanvasSelectedLayerToolbarViewProps) {
  if (!selectedLayer || !selectedToolbarStyle) {
    return null;
  }
  const canRedraw = canOpenRedrawPanel(selectedLayer);

  if (selectedLayer.mediaType === 'audio') {
    return (
      <div
        className="image-canvas-editor__floating-toolbar"
        style={selectedToolbarStyle}
        role="toolbar"
        aria-label="素材工具栏"
        onPointerDown={(event) => event.stopPropagation()}
      >
        {canRedraw ? (
          <PlatformIconButton
            className="image-canvas-editor__floating-toolbar-text-button"
            label="改造"
            title="改造"
            icon={<WandSparkles className="h-4 w-4" />}
            onClick={() => onOpenRedrawPanel(selectedLayer)}
          >
            <span>改造</span>
          </PlatformIconButton>
        ) : null}
        <EditorIconButton
          label="下载按钮"
          title="下载按钮"
          icon={Download}
          onClick={() => onDownloadLayer(selectedLayer)}
        />
      </div>
    );
  }

  const canRasterEdit =
    selectedLayer.mediaType !== 'video' &&
    selectedLayer.mediaType !== 'image-sequence' &&
    selectedLayer.assetKind !== 'character-animation';

  return (
    <div
      className="image-canvas-editor__floating-toolbar"
      style={selectedToolbarStyle}
      role="toolbar"
      aria-label="图片工具栏"
      onPointerDown={(event) => event.stopPropagation()}
    >
      {!isQuickEditUnsupportedAssetKind(selectedLayer) ? (
        <>
          <PlatformIconButton
            className="image-canvas-editor__floating-toolbar-text-button"
            label="快速编辑"
            title="快速编辑"
            icon={<Sparkles className="h-4 w-4" />}
            onClick={() => onOpenQuickEditPanel(selectedLayer)}
          >
            <span>快速编辑</span>
          </PlatformIconButton>
          <span
            aria-hidden="true"
            className="image-canvas-editor__floating-toolbar-divider"
          />
        </>
      ) : null}
      {canRasterEdit ? (
        <>
          <EditorIconButton
            label="裁扩按钮"
            title="裁扩按钮"
            icon={Crop}
            onClick={() => onOpenCropExpandPanel(selectedLayer)}
          />
          <EditorIconButton
            label="去除背景按钮"
            title="去除背景按钮"
            icon={ImageOff}
            onClick={() => onRemoveBackground(selectedLayer)}
          />
          <PlatformIconButton
            className="image-canvas-editor__floating-toolbar-text-button"
            // 中文注释：保存态名称不能直接用「素材类型保存中」——icon-spritesheet 图层上
            // 拆分图集按钮同时显示该文案，两个控件会撞同一个无障碍名称。
            label={
              isPersistingAssetKind
                ? '完美像素等待素材类型保存'
                : isPerfectPixelProcessing
                  ? '完美像素处理中'
                  : isPerfectPixelPendingConfirmation
                    ? '完美像素结果待确认'
                  : '完美像素'
            }
            title={
              isPersistingAssetKind
                ? '完美像素等待素材类型保存'
                : isPerfectPixelProcessing
                  ? '完美像素处理中'
                  : isPerfectPixelPendingConfirmation
                    ? '结果待确认，双击原占位继续核对或重试'
                  : '自动识别并规整像素网格'
            }
            icon={
              isPersistingAssetKind || isPerfectPixelProcessing ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Grid2X2 className="h-4 w-4" />
              )
            }
            // 中文注释：素材类型保存在途时必须一并禁用。请求同时带 assetKind 和
            // sourceResourceId，本地类型已改但资源尚未落库时两者不一致，后端
            // resolve_editor_pixel_art_snap_asset_kind 会直接 400，只留下失败占位。
            // 与相邻的拆分图集按钮保持同一套门禁。
            disabled={
              isPersistingAssetKind ||
              isPerfectPixelProcessing ||
              isPerfectPixelPendingConfirmation
            }
            aria-busy={isPersistingAssetKind || isPerfectPixelProcessing}
            onClick={() => onPerfectPixel(selectedLayer)}
          >
            <span>
              {isPersistingAssetKind
                ? '保存中'
                : isPerfectPixelProcessing
                  ? '处理中'
                  : isPerfectPixelPendingConfirmation
                    ? '待确认'
                  : '完美像素'}
            </span>
          </PlatformIconButton>
        </>
      ) : null}
      {selectedLayer.assetKind === 'icon-spritesheet' ? (
        <PlatformIconButton
          className="image-canvas-editor__floating-toolbar-text-button"
          label={
            isPersistingAssetKind
              ? '素材类型保存中'
              : isSplittingIconSpritesheet
                ? '拆图中'
                : '拆分图集'
          }
          title={
            isPersistingAssetKind
              ? '素材类型保存中'
              : isSplittingIconSpritesheet
                ? '拆图中'
                : '拆分图集'
          }
          icon={
            isPersistingAssetKind || isSplittingIconSpritesheet ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <Scissors className="h-4 w-4" />
            )
          }
          disabled={isPersistingAssetKind || isSplittingIconSpritesheet}
          aria-busy={isPersistingAssetKind || isSplittingIconSpritesheet}
          onClick={() => onSplitIconSpritesheet(selectedLayer)}
        >
          <span>
            {isPersistingAssetKind
              ? '保存中'
              : isSplittingIconSpritesheet
                ? '拆图中'
                : '拆分图集'}
          </span>
        </PlatformIconButton>
      ) : null}
      {selectedLayer.assetKind === 'ui-design' ? (
        <PlatformIconButton
          className="image-canvas-editor__floating-toolbar-text-button"
          label="提取素材"
          title="提取素材"
          icon={<Scissors className="h-4 w-4" />}
          onClick={() => onExtractUiDesignAssets(selectedLayer)}
        >
          <span>提取素材</span>
        </PlatformIconButton>
      ) : null}
      {selectedLayer.assetKind === 'character' ? (
        <PlatformIconButton
          className="image-canvas-editor__floating-toolbar-text-button"
          label="生成动画"
          title="生成动画"
          icon={<PersonStanding className="h-4 w-4" />}
          onClick={() => onOpenCharacterAnimationPanel(selectedLayer)}
        >
          <span>生成动画</span>
        </PlatformIconButton>
      ) : null}
      {canRedraw ? (
        <>
          <span
            aria-hidden="true"
            className="image-canvas-editor__floating-toolbar-divider"
          />
          <PlatformIconButton
            className="image-canvas-editor__floating-toolbar-text-button"
            label="改造"
            title="改造"
            icon={<WandSparkles className="h-4 w-4" />}
            onClick={() => onOpenRedrawPanel(selectedLayer)}
          >
            <span>改造</span>
          </PlatformIconButton>
        </>
      ) : null}
      <EditorIconButton
        label="下载按钮"
        title="下载按钮"
        icon={Download}
        onClick={() => onDownloadLayer(selectedLayer)}
      />
    </div>
  );
}