diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index 5a28b47..1900596 100644 --- a/src/components/canvas/Canvas.tsx +++ b/src/components/canvas/Canvas.tsx @@ -182,37 +182,41 @@ function Canvas() { const movementX = newMouseCoords.x - oldMouseCoords.x; const movementY = newMouseCoords.y - oldMouseCoords.y; - const movedBlocks: Block[] = []; - - // Add movementX and movementY to each block in the selection box - // Also create air blocks to avoid other blocks inserting themself into the selection - for (let x = selectionBoxBounds.minX; x <= selectionBoxBounds.maxX - 1; x++) { - for (let y = selectionBoxBounds.minY; y <= selectionBoxBounds.maxY - 1; y++) { - const existingBlock = blocks.find((block) => block.x === x && block.y === y); - - movedBlocks.push({ - name: existingBlock ? existingBlock.name : "air", - x: x + movementX, - y: y + movementY, - }); - } - } - - // Avoid duplicates - const oldBlocks = blocks.filter((block) => { - return !movedBlocks.some((newBlock) => block.x === newBlock.x && block.y === newBlock.y); - }); - - // Remove air blocks - const nonAirBlocks = movedBlocks.filter((b) => b.name !== "air"); - setSelectionBoxBounds((prev) => ({ minX: prev.minX + movementX, minY: prev.minY + movementY, maxX: prev.maxX + movementX, maxY: prev.maxY + movementY, })); - setBlocks([...nonAirBlocks, ...oldBlocks]); + + setBlocks((prev) => { + const airBlocks: Block[] = []; + + for (let x = selectionBoxBounds.minX; x < selectionBoxBounds.maxX; x++) { + for (let y = selectionBoxBounds.minY; y < selectionBoxBounds.maxY; y++) { + const existingBlock = prev.find((block) => block.x === x && block.y === y); + if (existingBlock) continue; + + airBlocks.push({ name: "air", x, y }); + } + } + + return [...prev, ...airBlocks].map((block) => { + if ( + block.x >= selectionBoxBounds.minX && + block.x <= selectionBoxBounds.maxX - 1 && + block.y >= selectionBoxBounds.minY && + block.y <= selectionBoxBounds.maxY - 1 + ) { + return { + ...block, + x: block.x + movementX, + y: block.y + movementY, + }; + } + return block; + }); + }); break; } case "rectangle-select": @@ -227,7 +231,7 @@ function Canvas() { onToolUse(); } }, - [dragging, coords, scale, tool, onToolUse, setCoords, setSelectionBoxBounds, mouseCoords, blocks, selectionBoxBounds, setBlocks] + [dragging, coords, scale, tool, mouseCoords, selectionBoxBounds, onToolUse, setCoords, setSelectionBoxBounds, setBlocks] ); const onMouseDown = useCallback(() => {