trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 14:44:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: toggle tool settings

Browse source
This commit is contained in:
trafficlunar 2024-12-26 22:14:57 +00:00
parent ab88691838
commit 99bfd58c49
4 changed files with 48 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/menubar/ViewMenu.tsx
View file

@ -24,6 +24,17 @@ function ViewMenu() {
<MenubarCheckboxItem checked={settings.canvasBorder} onCheckedChange={onCheckedChange("canvasBorder")}>
Canvas Border
</MenubarCheckboxItem>
<MenubarSeparator />
<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
Color Picker
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}>
Radius Changer
</MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blockSelector} onCheckedChange={onCheckedChange("blockSelector")}>
Block Selector
</MenubarCheckboxItem>
</MenubarContent>
</MenubarMenu>
);

42
src/components/tool-settings/index.tsx
View file

@ -1,4 +1,6 @@
import { useEffect, useRef, useState } from "react";
import { useContext, useEffect, useRef, useState } from "react";
import { SettingsContext } from "@/context/Settings";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
@ -8,6 +10,8 @@ import Radius from "./Radius";
import SelectorBlocks from "./SelectorBlocks";
function ToolSettings() {
const { settings } = useContext(SettingsContext);
const divRef = useRef<HTMLDivElement>(null);
const [stageWidth, setStageWidth] = useState(0);
const [searchInput, setSearchInput] = useState("");
@ -19,18 +23,34 @@ function ToolSettings() {
}, []);
return (
<div className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2">
<ColorPicker />
<Separator />
<>
{(settings.colorPicker || settings.radiusChanger || settings.blockSelector) && (
<div className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2">
{settings.colorPicker && (
<>
<ColorPicker />
<Separator />
</>
)}
<Radius />
<Separator />
{settings.radiusChanger && (
<>
<Radius />
<Separator />
</>
)}
<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
<div ref={divRef} className="w-full flex-1 overflow-y-auto pb-2">
<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} />
</div>
</div>
{settings.blockSelector && (
<>
<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
<div ref={divRef} className="w-full flex-1 overflow-y-auto pb-2">
<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} />
</div>
</>
)}
</div>
)}
</>
);
}