blockmatic/src/components/menubar/ViewMenu.tsx

69 lines
2.3 KiB
TypeScript

import { useContext } from "react";
import {
MenubarCheckboxItem,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar";
import { CanvasContext } from "@/context/Canvas";
import { DialogContext } from "@/context/Dialog";
import { SettingsContext } from "@/context/Settings";
function ViewMenu() {
const { centerCanvas } = useContext(CanvasContext);
const openDialog = useContext(DialogContext);
const { settings, setSetting } = useContext(SettingsContext);
const onCheckedChange = (key: keyof Settings) => (value: boolean) => {
setSetting(key, value);
};
return (
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarItem onClick={() => openDialog("SetCoords")}>Set Coordinates</MenubarItem>
<MenubarItem onClick={() => openDialog("SetScale")}>Set Scale</MenubarItem>
<MenubarItem onClick={centerCanvas}>Center Canvas</MenubarItem>
<MenubarSeparator />
<MenubarCheckboxItem checked={settings.grid} onCheckedChange={onCheckedChange("grid")}>
Grid
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.canvasBorder} onCheckedChange={onCheckedChange("canvasBorder")}>
Canvas Border
</MenubarCheckboxItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Tabs</MenubarSubTrigger>
<MenubarSubContent>
<MenubarCheckboxItem checked={settings.historyPanel} onCheckedChange={onCheckedChange("historyPanel")}>
History
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
Color Picker
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blockReplacer} onCheckedChange={onCheckedChange("blockReplacer")}>
Block Replacer
</MenubarCheckboxItem>
</MenubarSubContent>
</MenubarSub>
<MenubarCheckboxItem checked={settings.toolSettings} onCheckedChange={onCheckedChange("toolSettings")}>
Tool Settings
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blockSelector} onCheckedChange={onCheckedChange("blockSelector")}>
Block Selector
</MenubarCheckboxItem>
</MenubarContent>
</MenubarMenu>
);
}
export default ViewMenu;