From 5e01bb431871f939b7c16426101c36c4310c894f Mon Sep 17 00:00:00 2001 From: trafficlunar Date: Fri, 24 Jan 2025 14:54:28 +0000 Subject: [PATCH] fix: make replace blocks feature acknowledge selection --- src/components/canvas/Canvas.tsx | 15 ++++----------- src/components/tool-settings/Replace.tsx | 19 ++++++++++++++++--- src/utils/selection.ts | 7 +++++++ 3 files changed, 27 insertions(+), 14 deletions(-) create mode 100644 src/utils/selection.ts diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index 7cc7462..804afcd 100644 --- a/src/components/canvas/Canvas.tsx +++ b/src/components/canvas/Canvas.tsx @@ -21,6 +21,7 @@ import CanvasBorder from "./CanvasBorder"; import CursorInformation from "./information/Cursor"; import CanvasInformation from "./information/Canvas"; import SelectionToolbar from "./SelectionToolbar"; +import { isInSelection } from "@/utils/selection"; // Set scale mode to NEAREST PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; @@ -106,14 +107,6 @@ function Canvas() { return { x, y }; }; - // Check if a block is within the selection - const isInSelection = (x: number, y: number): boolean => { - if (selectionCoords.length !== 0) { - return selectionCoords.some(([x2, y2]) => x2 === x && y2 === y); - } - return true; - }; - const eraseTool = () => { // Fixes Infinity and NaN errors when no blocks are present if (blocks.length == 1) return; @@ -122,7 +115,7 @@ function Canvas() { const updated = blocks.filter((block) => { const withinRadius = block.x >= radiusPosition.x && block.x < radiusPosition.x + radius && block.y >= radiusPosition.y && block.y < radiusPosition.y + radius; - return !withinRadius || !isInSelection(block.x, block.y); + return !withinRadius || !isInSelection(selectionCoords, block.x, block.y); }); setBlocks(updated); @@ -139,7 +132,7 @@ function Canvas() { setBlocks((prev) => prev.filter((b) => { - const isSelected = selectionCoords.some(([x, y]) => b.x === x && b.y === y); + const isSelected = isInSelection(selectionCoords, b.x, b.y); // Add blocks in the selection coords to the selection layer if (isSelected) result.push(b); @@ -194,7 +187,7 @@ function Canvas() { const tileY = radiusPosition.y + y; // Only add blocks within the selection - if (isInSelection(tileX, tileY)) { + if (isInSelection(selectionCoords, tileX, tileY)) { radiusBlocks.push({ name: selectedBlock, x: tileX, diff --git a/src/components/tool-settings/Replace.tsx b/src/components/tool-settings/Replace.tsx index 9bb7a63..1b25001 100644 --- a/src/components/tool-settings/Replace.tsx +++ b/src/components/tool-settings/Replace.tsx @@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react"; import { Container, Sprite, Stage } from "@pixi/react"; import { CanvasContext } from "@/context/Canvas"; +import { SelectionContext } from "@/context/Selection"; import { ToolContext } from "@/context/Tool"; import { TexturesContext } from "@/context/Textures"; @@ -9,9 +10,11 @@ import { Label } from "@/components/ui/label"; import { Button } from "@/components/ui/button"; import { useTextures } from "@/hooks/useTextures"; +import { isInSelection } from "@/utils/selection"; function Replace() { const { version, setBlocks } = useContext(CanvasContext); + const { coords: selectionCoords } = useContext(SelectionContext); const { selectedBlock, tool, setTool } = useContext(ToolContext); const { missingTexture } = useContext(TexturesContext); @@ -30,9 +33,19 @@ function Replace() { const onClickReplace = () => { // If block2 name is air, delete the block instead. - setBlocks((prevBlocks) => - prevBlocks - .map((block) => (block.name === block1 ? (block2 === "air" ? null : { ...block, name: block2 }) : block)) + setBlocks((prev) => + prev + .map((block) => { + if (isInSelection(selectionCoords, block.x, block.y)) { + if (block.name === block1) { + // If block2 is air, return null + // If not, change the block name + return block2 === "air" ? null : { ...block, name: block2 }; + } + } + return block; + }) + // Remove all blocks that are null .filter((block) => block !== null) ); }; diff --git a/src/utils/selection.ts b/src/utils/selection.ts new file mode 100644 index 0000000..838c32c --- /dev/null +++ b/src/utils/selection.ts @@ -0,0 +1,7 @@ +// Check if a block is within the selection +export const isInSelection = (selection: CoordinateArray, x: number, y: number): boolean => { + if (selection.length !== 0) { + return selection.some(([x2, y2]) => x2 === x && y2 === y); + } + return true; +};