82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import {
|
|
ClipboardList,
|
|
Download,
|
|
Hand,
|
|
ImageIcon,
|
|
ImagePlus,
|
|
MousePointer2,
|
|
Shapes,
|
|
Sparkles,
|
|
Type,
|
|
WandSparkles,
|
|
} from 'lucide-react';
|
|
import type { RefObject } from 'react';
|
|
|
|
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
|
|
import type { CanvasTool } from './ImageCanvasEditorTypes';
|
|
|
|
type ImageCanvasBottomToolbarViewProps = {
|
|
specToolWrapRef: RefObject<HTMLSpanElement | null>;
|
|
effectiveTool: CanvasTool;
|
|
onSwitchTool: (tool: CanvasTool) => void;
|
|
};
|
|
|
|
const canvasTools: Array<{
|
|
id: CanvasTool;
|
|
label: string;
|
|
icon: typeof MousePointer2;
|
|
}> = [
|
|
{ id: 'select', label: '选择工具', icon: MousePointer2 },
|
|
{ id: 'hand', label: '抓手工具', icon: Hand },
|
|
{ id: 'upload', label: '上传工具', icon: ImagePlus },
|
|
{ id: 'generate', label: '生成工具', icon: WandSparkles },
|
|
{ id: 'spec', label: '生成规范', icon: ClipboardList },
|
|
{ id: 'character', label: '生成角色形象', icon: Sparkles },
|
|
{ id: 'icon', label: '生成图标素材', icon: ImageIcon },
|
|
{ id: 'text', label: '文字工具', icon: Type },
|
|
{ id: 'shape', label: '形状标注工具', icon: Shapes },
|
|
{ id: 'export', label: '导出工具', icon: Download },
|
|
];
|
|
|
|
export function ImageCanvasBottomToolbarView({
|
|
specToolWrapRef,
|
|
effectiveTool,
|
|
onSwitchTool,
|
|
}: ImageCanvasBottomToolbarViewProps) {
|
|
return (
|
|
<div
|
|
className="image-canvas-editor__bottom-toolbar"
|
|
role="toolbar"
|
|
aria-label="AI画布工具栏"
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
>
|
|
{canvasTools.map(({ id, label, icon: Icon }) =>
|
|
id === 'spec' ? (
|
|
<span
|
|
key={id}
|
|
ref={specToolWrapRef}
|
|
className="image-canvas-editor__spec-tool-wrap"
|
|
>
|
|
<EditorIconButton
|
|
label={label}
|
|
title={label}
|
|
icon={Icon}
|
|
pressed={effectiveTool === id}
|
|
onClick={() => onSwitchTool(id)}
|
|
/>
|
|
</span>
|
|
) : (
|
|
<EditorIconButton
|
|
key={id}
|
|
label={label}
|
|
title={label}
|
|
icon={Icon}
|
|
pressed={effectiveTool === id}
|
|
onClick={() => onSwitchTool(id)}
|
|
/>
|
|
),
|
|
)}
|
|
</div>
|
|
);
|
|
}
|