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

refactor: move "move" tool code to onToolUse()

Browse source
This commit is contained in:
trafficlunar 2025-01-17 11:46:57 +00:00
parent 3c40a51d42
commit fdcd73c748
1 changed files with 49 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/components/canvas/Canvas.tsx
View file

@ -39,6 +39,8 @@ function Canvas() {
const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 }); const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 });
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
const mouseMovement = useRef<Position>();
const [holdingAlt, setHoldingAlt] = useState(false); const [holdingAlt, setHoldingAlt] = useState(false);
const [oldTool, setOldTool] = useState<Tool>("hand"); const [oldTool, setOldTool] = useState<Tool>("hand");
const [selectionBoxBounds, setSelectionBoxBounds] = useState<BoundingBox>({ minX: 0, minY: 0, maxX: 0, maxY: 0 }); const [selectionBoxBounds, setSelectionBoxBounds] = useState<BoundingBox>({ minX: 0, minY: 0, maxX: 0, maxY: 0 });
@ -115,6 +117,47 @@ function Canvas() {
}; };
switch (tool) { switch (tool) {
case "move": {
if (!mouseMovement.current) return;
const { x: movementX, y: movementY } = mouseMovement.current;
setSelectionBoxBounds((prev) => ({
minX: prev.minX + movementX,
minY: prev.minY + movementY,
maxX: prev.maxX + movementX,
maxY: prev.maxY + movementY,
}));
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 "pencil": { case "pencil": {
if (selectedBlock == "air") { if (selectedBlock == "air") {
eraseTool(); eraseTool();
@ -175,6 +218,11 @@ function Canvas() {
}); });
setMouseCoords(newMouseCoords); setMouseCoords(newMouseCoords);
mouseMovement.current = {
x: newMouseCoords.x - oldMouseCoords.x,
y: newMouseCoords.y - oldMouseCoords.y,
};
if (dragging) { if (dragging) {
switch (tool) { switch (tool) {
case "hand": case "hand":
@ -183,47 +231,6 @@ function Canvas() {
y: prevCoords.y + e.movementY, y: prevCoords.y + e.movementY,
})); }));
break; break;
case "move": {
const movementX = newMouseCoords.x - oldMouseCoords.x;
const movementY = newMouseCoords.y - oldMouseCoords.y;
setSelectionBoxBounds((prev) => ({
minX: prev.minX + movementX,
minY: prev.minY + movementY,
maxX: prev.maxX + movementX,
maxY: prev.maxY + movementY,
}));
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": case "rectangle-select":
setSelectionBoxBounds((prev) => ({ setSelectionBoxBounds((prev) => ({
...prev, ...prev,
@ -236,7 +243,7 @@ function Canvas() {
onToolUse(); onToolUse();
} }
}, },
[dragging, coords, scale, tool, mouseCoords, selectionBoxBounds, onToolUse, setCoords, setSelectionBoxBounds, setBlocks] [dragging, coords, scale, tool, mouseCoords, onToolUse, setCoords, setSelectionBoxBounds]
); );
const onMouseDown = useCallback(() => { const onMouseDown = useCallback(() => {