52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { MousePointer2, GitCommitHorizontal, Radio, Disc, Eraser, Save, Upload, Minus, Spline } from 'lucide-react';
|
|
import { ToolType } from '../types';
|
|
|
|
interface EditorToolbarProps {
|
|
activeTool: ToolType;
|
|
setTool: (t: ToolType) => void;
|
|
onSave: () => void;
|
|
onLoad: () => void;
|
|
}
|
|
|
|
const EditorToolbar: React.FC<EditorToolbarProps> = ({ activeTool, setTool, onSave, onLoad }) => {
|
|
const tools = [
|
|
{ id: ToolType.SELECT, icon: <MousePointer2 size={20} />, label: 'Select/Move' },
|
|
{ id: ToolType.DRAW_LINE, icon: <GitCommitHorizontal size={20} />, label: 'Logical Connection (Graph)' },
|
|
{ id: ToolType.DRAW_MAGNET_STRAIGHT, icon: <Minus size={20} />, label: 'Magnet Line (Straight)' },
|
|
{ id: ToolType.DRAW_MAGNET_CURVE, icon: <Spline size={20} />, label: 'Magnet Line (Curve)' },
|
|
{ id: ToolType.ADD_RFID, icon: <Radio size={20} />, label: 'Place RFID' },
|
|
{ id: ToolType.ADD_MARK, icon: <Disc size={20} />, label: 'Place Mark' },
|
|
{ id: ToolType.ERASER, icon: <Eraser size={20} />, label: 'Delete' },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 bg-gray-800 p-2 rounded-lg border border-gray-700 h-full">
|
|
<div className="text-xs font-bold text-gray-400 mb-2 uppercase text-center">Map Editor</div>
|
|
{tools.map((tool) => (
|
|
<button
|
|
key={tool.id}
|
|
onClick={() => setTool(tool.id)}
|
|
title={tool.label}
|
|
className={`p-3 rounded-md transition-colors flex justify-center items-center ${
|
|
activeTool === tool.id
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
|
}`}
|
|
>
|
|
{tool.icon}
|
|
</button>
|
|
))}
|
|
<div className="h-px bg-gray-600 my-2" />
|
|
<button onClick={onSave} className="p-3 bg-green-700 hover:bg-green-600 text-white rounded-md flex justify-center" title="Save Map">
|
|
<Save size={20} />
|
|
</button>
|
|
<button onClick={onLoad} className="p-3 bg-yellow-700 hover:bg-yellow-600 text-white rounded-md flex justify-center" title="Load Map">
|
|
<Upload size={20} />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorToolbar;
|