trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: bunch of tool settings changes

Browse source
This commit is contained in:
trafficlunar 2024-12-28 17:35:07 +00:00
parent 5804853395
commit c1ef155867
5 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,8 +29,8 @@ function ViewMenu() {
<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}> <MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
Color Picker Color Picker
</MenubarCheckboxItem> </MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.blocksReplacer} onCheckedChange={onCheckedChange("blocksReplacer")}> <MenubarCheckboxItem checked={settings.blockReplacer} onCheckedChange={onCheckedChange("blockReplacer")}>
Blocks Replacer Block Replacer
</MenubarCheckboxItem> </MenubarCheckboxItem>
<MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}> <MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}>
Radius Changer Radius Changer

5
src/components/tool-settings/SelectorBlocks.tsx → src/components/tool-settings/BlockSelector.tsx
View file

@ -14,7 +14,7 @@ interface Props {
searchInput: string; searchInput: string;
} }
function SelectorBlocks({ stageWidth, searchInput }: Props) { function BlockSelector({ stageWidth, searchInput }: Props) {
const { version } = useContext(CanvasContext); const { version } = useContext(CanvasContext);
const { missingTexture, textures } = useContext(TexturesContext); const { missingTexture, textures } = useContext(TexturesContext);
const { isDark } = useContext(ThemeContext); const { isDark } = useContext(ThemeContext);
@ -67,6 +67,7 @@ function SelectorBlocks({ stageWidth, searchInput }: Props) {
return ( return (
<Sprite <Sprite
key={block}
texture={texture} texture={texture}
x={x} x={x}
y={y} y={y}
@ -110,4 +111,4 @@ function SelectorBlocks({ stageWidth, searchInput }: Props) {
); );
} }
export default SelectorBlocks; export default BlockSelector;

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

@ -8,7 +8,8 @@ import { Separator } from "@/components/ui/separator";
import ColorPicker from "./ColorPicker"; import ColorPicker from "./ColorPicker";
import Replace from "./Replace"; import Replace from "./Replace";
import Radius from "./Radius"; import Radius from "./Radius";
import SelectorBlocks from "./SelectorBlocks"; import BlockSelector from "./BlockSelector";
import { ScrollArea } from "../ui/scroll-area";
function ToolSettings() { function ToolSettings() {
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
@ -18,14 +19,13 @@ function ToolSettings() {
const [searchInput, setSearchInput] = useState(""); const [searchInput, setSearchInput] = useState("");
useEffect(() => { useEffect(() => {
if (divRef.current) { if (!divRef.current) return;
setStageWidth(divRef.current.clientWidth); setStageWidth(divRef.current.clientWidth);
}
}, []); }, []);
return ( return (
<> <>
{(settings.colorPicker || settings.blocksReplacer || settings.radiusChanger || settings.blockSelector) && ( {(settings.colorPicker || settings.blockReplacer || 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"> <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 && ( {settings.colorPicker && (
<> <>
@ -34,7 +34,7 @@ function ToolSettings() {
</> </>
)} )}
{settings.blocksReplacer && ( {settings.blockReplacer && (
<> <>
<Replace /> <Replace />
<Separator /> <Separator />
@ -51,9 +51,9 @@ function ToolSettings() {
{settings.blockSelector && ( {settings.blockSelector && (
<> <>
<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} /> <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"> <ScrollArea ref={divRef} className="w-full flex-1 pb-2">
<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} /> <BlockSelector stageWidth={stageWidth} searchInput={searchInput} />
</div> </ScrollArea>
</> </>
)} )}
</div> </div>

2
src/context/Settings.tsx
View file

@ -13,7 +13,7 @@ const defaultSettings: Settings = {
grid: true, grid: true,
canvasBorder: false, canvasBorder: false,
colorPicker: false, colorPicker: false,
blocksReplacer: true, blockReplacer: true,
radiusChanger: true, radiusChanger: true,
blockSelector: true, blockSelector: true,
}; };

2
src/types.d.ts vendored
View file

@ -27,7 +27,7 @@ interface Settings {
grid: boolean; grid: boolean;
canvasBorder: boolean; canvasBorder: boolean;
colorPicker: boolean; colorPicker: boolean;
blocksReplacer: boolean; blockReplacer: boolean;
radiusChanger: boolean; radiusChanger: boolean;
blockSelector: boolean; blockSelector: boolean;
} }