fix: remove trail on move tool

todo: fix overlapping blocks

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(() => {