From a80119c0117a9e0b647c03da87ef3748be1edb70 Mon Sep 17 00:00:00 2001 From: trafficlunar Date: Sat, 8 Feb 2025 13:17:37 +0000 Subject: [PATCH] refactor: move selection util script into selection context --- src/components/canvas/Canvas.tsx | 6 ++---- src/components/canvas/SelectionBar.tsx | 8 ++------ src/components/menubar/SelectMenu.tsx | 6 ++---- src/components/tool-settings/Replace.tsx | 5 ++--- src/context/Selection.tsx | 15 ++++++++++++++- src/utils/selection.ts | 20 -------------------- 6 files changed, 22 insertions(+), 38 deletions(-) delete mode 100644 src/utils/selection.ts diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index f67c739..5ee5878 100644 --- a/src/components/canvas/Canvas.tsx +++ b/src/components/canvas/Canvas.tsx @@ -25,8 +25,6 @@ import { usePaintBucketTool } from "@/hooks/tools/paint-bucket"; import { useEyedropperTool } from "@/hooks/tools/eyedropper"; import { useZoomTool } from "@/hooks/tools/zoom"; -import * as selection from "@/utils/selection"; - import Blocks from "./Blocks"; import Cursor from "./Cursor"; import Selection from "./Selection"; @@ -43,7 +41,7 @@ PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; function Canvas() { const { stageSize, canvasSize, blocks, coords, scale, version, setStageSize, setBlocks, setCoords, setScale } = useContext(CanvasContext); const { addHistory, undo, redo } = useContext(HistoryContext); - const { selectionCoords, selectionLayerBlocks, setSelectionCoords, setSelectionLayerBlocks } = useContext(SelectionContext); + const { selectionCoords, selectionLayerBlocks, setSelectionCoords, setSelectionLayerBlocks, confirmSelection } = useContext(SelectionContext); const { settings } = useContext(SettingsContext); const { missingTexture } = useContext(TexturesContext); const { isDark } = useContext(ThemeContext); @@ -250,7 +248,7 @@ function Canvas() { setSelectionLayerBlocks([]); break; case "Enter": - selection.confirm(blocks, selectionLayerBlocks, setBlocks, setSelectionLayerBlocks); + confirmSelection(); break; case " ": // Space setDragging(true); diff --git a/src/components/canvas/SelectionBar.tsx b/src/components/canvas/SelectionBar.tsx index 79ea1a8..6fcfa78 100644 --- a/src/components/canvas/SelectionBar.tsx +++ b/src/components/canvas/SelectionBar.tsx @@ -1,16 +1,12 @@ import { useContext, useEffect, useState } from "react"; import { CheckIcon, XIcon } from "lucide-react"; -import { CanvasContext } from "@/context/Canvas"; import { SelectionContext } from "@/context/Selection"; -import * as selection from "@/utils/selection"; - import { Button } from "@/components/ui/button"; function SelectionBar() { - const { blocks, setBlocks } = useContext(CanvasContext); - const { selectionLayerBlocks, setSelectionLayerBlocks } = useContext(SelectionContext); + const { selectionLayerBlocks, setSelectionLayerBlocks, confirmSelection } = useContext(SelectionContext); const [isVisible, setIsVisible] = useState(false); @@ -29,7 +25,7 @@ function SelectionBar() { Confirm selection? - diff --git a/src/components/menubar/SelectMenu.tsx b/src/components/menubar/SelectMenu.tsx index 2aa2ade..1261678 100644 --- a/src/components/menubar/SelectMenu.tsx +++ b/src/components/menubar/SelectMenu.tsx @@ -5,11 +5,9 @@ import { SelectionContext } from "@/context/Selection"; import { MenubarContent, MenubarItem, MenubarMenu, MenubarShortcut, MenubarTrigger } from "@/components/ui/menubar"; import { CanvasContext } from "@/context/Canvas"; -import * as selection from "@/utils/selection"; - function SelectMenu() { const { canvasSize } = useContext(CanvasContext); - const { selectionCoords, setSelectionCoords } = useContext(SelectionContext); + const { setSelectionCoords, isInSelection } = useContext(SelectionContext); // Add every block within the canvas size to the temporary array const selectAll = () => { @@ -30,7 +28,7 @@ function SelectMenu() { for (let x = canvasSize.minX; x < canvasSize.maxX; x++) { for (let y = canvasSize.minY; y < canvasSize.maxY; y++) { - if (!selection.isIn(selectionCoords, x, y)) newSelection.push([x, y]); + if (!isInSelection(x, y)) newSelection.push([x, y]); } } diff --git a/src/components/tool-settings/Replace.tsx b/src/components/tool-settings/Replace.tsx index 54835fa..99e2bc1 100644 --- a/src/components/tool-settings/Replace.tsx +++ b/src/components/tool-settings/Replace.tsx @@ -10,11 +10,10 @@ import { Label } from "@/components/ui/label"; import { Button } from "@/components/ui/button"; import { useTextures } from "@/hooks/useTextures"; -import * as selection from "@/utils/selection"; function Replace() { const { version, setBlocks } = useContext(CanvasContext); - const { selectionCoords } = useContext(SelectionContext); + const { isInSelection } = useContext(SelectionContext); const { selectedBlock, tool, setTool } = useContext(ToolContext); const { missingTexture } = useContext(TexturesContext); @@ -36,7 +35,7 @@ function Replace() { setBlocks((prev) => prev .map((block) => { - if (selection.isIn(selectionCoords, block.x, block.y)) { + if (isInSelection(block.x, block.y)) { if (block.name === block1) { // If block2 is air, return null // If not, change the block name diff --git a/src/context/Selection.tsx b/src/context/Selection.tsx index 8f088f3..ab6a955 100644 --- a/src/context/Selection.tsx +++ b/src/context/Selection.tsx @@ -1,4 +1,5 @@ -import { createContext, ReactNode, useState } from "react"; +import { createContext, ReactNode, useContext, useState } from "react"; +import { CanvasContext } from "./Canvas"; interface Context { selectionCoords: CoordinateArray; @@ -6,6 +7,7 @@ interface Context { setSelectionCoords: React.Dispatch>; setSelectionLayerBlocks: React.Dispatch>; isInSelection: (x: number, y: number) => boolean; + confirmSelection: () => void; } interface Props { @@ -15,6 +17,8 @@ interface Props { export const SelectionContext = createContext({} as Context); export const SelectionProvider = ({ children }: Props) => { + const { blocks, setBlocks } = useContext(CanvasContext); + const [selectionCoords, setSelectionCoords] = useState([]); const [selectionLayerBlocks, setSelectionLayerBlocks] = useState([]); @@ -25,6 +29,14 @@ export const SelectionProvider = ({ children }: Props) => { return true; }; + const confirmSelection = () => { + const combinedBlocks = [...blocks, ...selectionLayerBlocks]; + const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values()); + + setBlocks(uniqueBlocks); + setSelectionLayerBlocks([]); + }; + return ( { setSelectionCoords, setSelectionLayerBlocks, isInSelection, + confirmSelection, }} > {children} diff --git a/src/utils/selection.ts b/src/utils/selection.ts deleted file mode 100644 index 38029a6..0000000 --- a/src/utils/selection.ts +++ /dev/null @@ -1,20 +0,0 @@ -// Check if a block is within the selection -export function isIn(selection: CoordinateArray, x: number, y: number): boolean { - if (selection.length !== 0) { - return selection.some(([x2, y2]) => x2 === x && y2 === y); - } - return true; -} - -export function confirm( - blocks: Block[], - layerBlocks: Block[], - setBlocks: React.Dispatch>, - setLayerBlocks: React.Dispatch> -) { - const combinedBlocks = [...blocks, ...layerBlocks]; - const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values()); - - setBlocks(uniqueBlocks); - setLayerBlocks([]); -}