130 lines
3.2 KiB
TypeScript
130 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/primitives/button";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/primitives/tooltip";
|
|
import { Hammer, MousePointer2, Pencil, Trash2 } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import useEditor, { Mode, Phase } from "@/store/use-editor";
|
|
|
|
type ModeConfig = {
|
|
id: Mode;
|
|
icon: typeof MousePointer2;
|
|
label: string;
|
|
shortcut: string;
|
|
color: string;
|
|
activeColor: string;
|
|
};
|
|
|
|
// All available control modes
|
|
const allModes: ModeConfig[] = [
|
|
{
|
|
id: "select",
|
|
icon: MousePointer2,
|
|
label: "Select",
|
|
shortcut: "V",
|
|
color: "hover:bg-blue-500/20 hover:text-blue-400",
|
|
activeColor: "bg-blue-500/20 text-blue-400",
|
|
},
|
|
{
|
|
id: "edit",
|
|
icon: Pencil,
|
|
label: "Edit",
|
|
shortcut: "E",
|
|
color: "hover:bg-orange-500/20 hover:text-orange-400",
|
|
activeColor: "bg-orange-500/20 text-orange-400",
|
|
},
|
|
{
|
|
id: "build",
|
|
icon: Hammer,
|
|
label: "Build",
|
|
shortcut: "B",
|
|
color: "hover:bg-green-500/20 hover:text-green-400",
|
|
activeColor: "bg-green-500/20 text-green-400",
|
|
},
|
|
{
|
|
id: "delete",
|
|
icon: Trash2,
|
|
label: "Delete",
|
|
shortcut: "D",
|
|
color: "hover:bg-red-500/20 hover:text-red-400",
|
|
activeColor: "bg-red-500/20 text-red-400",
|
|
},
|
|
// {
|
|
// id: 'painting',
|
|
// icon: Paintbrush,
|
|
// label: 'Painting',
|
|
// shortcut: 'P',
|
|
// color: 'hover:bg-cyan-500/20 hover:text-cyan-400',
|
|
// activeColor: 'bg-cyan-500/20 text-cyan-400',
|
|
// },
|
|
// {
|
|
// id: 'guide',
|
|
// icon: Image,
|
|
// label: 'Guide',
|
|
// shortcut: 'G',
|
|
// color: 'hover:bg-purple-500/20 hover:text-purple-400',
|
|
// activeColor: 'bg-purple-500/20 text-purple-400',
|
|
// },
|
|
];
|
|
|
|
// Define which modes are available in each editor mode
|
|
const modesByPhase: Record<Phase, Mode[]> = {
|
|
site: ["select", "edit"],
|
|
structure: ["select", "delete", "build"],
|
|
furnish: ["select", "delete", "build"],
|
|
};
|
|
|
|
export function ControlModes() {
|
|
const mode = useEditor((state) => state.mode);
|
|
const phase = useEditor((state) => state.phase);
|
|
const setMode = useEditor((state) => state.setMode);
|
|
|
|
const availableModeIds = modesByPhase[phase];
|
|
const availableModes = allModes.filter((m) =>
|
|
availableModeIds.includes(m.id)
|
|
);
|
|
|
|
const handleModeClick = (mode: Mode) => {
|
|
setMode(mode);
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
{availableModes.map((m) => {
|
|
const Icon = m.icon;
|
|
const isActive = mode === m.id;
|
|
|
|
return (
|
|
<Tooltip key={m.id}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
className={cn(
|
|
"h-8 w-8 transition-all",
|
|
"text-zinc-400",
|
|
!isActive && m.color,
|
|
isActive && m.activeColor
|
|
)}
|
|
onClick={() => handleModeClick(m.id)}
|
|
size="icon"
|
|
variant="ghost"
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>
|
|
{m.label} ({m.shortcut})
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|