/* ============================================================
工具列圖示與工具列元件 — 全繁體中文介面
============================================================ */
const Icon = {
Pencil: ``,
Eraser: ``,
Fill: ``,
Eyedropper: ``,
Line: ``,
Rect: ``,
Circle: ``,
Select: ``,
Move: ``,
Mirror: ``,
Rotate: ``,
Grid: ``,
ZoomIn: ``,
ZoomOut: ``,
Undo: ``,
Redo: ``,
Layers: ``,
Plus: ``,
Minus: ``,
Trash: ``,
Copy: ``,
Eye: ``,
EyeOff: ``,
Lock: ``,
Unlock: ``,
Home: ``,
Image: ``,
Cube: ``,
Robot: ``,
Folder: ``,
File: ``,
Save: ``,
Download: ``,
Upload: ``,
X: ``,
ChevronDown: ``,
ChevronRight: ``,
Play: ``,
Pause: ``,
Reset: ``,
Sun: ``,
Sparkles: ``,
Link: ``,
Unlink: ``,
Settings: ``,
Brush: ``,
Hand: ``,
Tablet: ``,
};
function SvgIcon({ name, size = 18, style }) {
const html = Icon[name] || Icon.File;
return React.createElement('span', {
style: { display: 'inline-flex', width: size, height: size, alignItems: 'center', justifyContent: 'center', ...style },
dangerouslySetInnerHTML: { __html: html },
});
}
window.SvgIcon = SvgIcon;
window.Icon = Icon;
/* ============================================================
工具列 — 左側邊欄工具選擇器
============================================================ */
function Toolbar({ tool, onToolChange, viewMode, onHome }) {
const tools2D = [
{ id: 'pencil', icon: 'Pencil', label: '鉛筆', shortcut: 'B' },
{ id: 'eraser', icon: 'Eraser', label: '橡皮擦', shortcut: 'E' },
{ id: 'fill', icon: 'Fill', label: '油漆桶', shortcut: 'G' },
{ id: 'eyedropper', icon: 'Eyedropper', label: '吸管', shortcut: 'I' },
{ id: 'separator1', separator: true },
{ id: 'line', icon: 'Line', label: '直線', shortcut: 'L' },
{ id: 'rect', icon: 'Rect', label: '矩形', shortcut: 'R' },
{ id: 'circle', icon: 'Circle', label: '圓形', shortcut: 'C' },
{ id: 'separator2', separator: true },
{ id: 'select', icon: 'Select', label: '選取', shortcut: 'M' },
{ id: 'move', icon: 'Move', label: '移動', shortcut: 'V' },
];
const tools3D = [
{ id: 'rotate', icon: 'Rotate', label: '旋轉相機', shortcut: 'R' },
{ id: 'pan', icon: 'Hand', label: '平移相機', shortcut: 'P' },
{ id: 'zoom', icon: 'ZoomIn', label: '縮放工具', shortcut: 'Z' },
];
const tools = (viewMode === 'creature' || viewMode === 'block') ? tools3D : tools2D;
return React.createElement('div', { className: 'tool-bar' },
React.createElement('button', {
className: 'tool-btn',
onClick: onHome,
title: '回到首頁'
},
React.createElement(SvgIcon, { name: 'Home' }),
React.createElement('span', { className: 'tool-tooltip' }, '首頁'),
),
React.createElement('div', { className: 'tool-separator' }),
...tools.map(t => {
if (t.separator) {
return React.createElement('div', { key: t.id, className: 'tool-separator' });
}
return React.createElement('button', {
key: t.id,
className: 'tool-btn' + (tool === t.id ? ' active' : ''),
onClick: () => onToolChange(t.id),
},
React.createElement(SvgIcon, { name: t.icon }),
React.createElement('span', { className: 'tool-tooltip' }, `${t.label} (${t.shortcut})`),
);
}),
);
}
window.Toolbar = Toolbar;