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

feat: hold alt with magic wand tool to remove selection

Browse source
This commit is contained in:
trafficlunar 2025-01-19 13:32:36 +00:00
parent 0cb18092ee
commit 2f8772769d
1 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,7 +42,7 @@ function Canvas() {
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
const dragStartCoordsRef = useRef<Position>(); const dragStartCoordsRef = useRef<Position>();
const [holdingAlt, setHoldingAlt] = useState(false); const holdingAltRef = useRef(false);
const oldToolRef = useRef<Tool>(); const oldToolRef = useRef<Tool>();
const selectionCoordsRef = useRef<CoordinateArray>(selectionCoords); const selectionCoordsRef = useRef<CoordinateArray>(selectionCoords);
@ -83,11 +83,11 @@ function Canvas() {
const updateCssCursor = useCallback(() => { const updateCssCursor = useCallback(() => {
const cursorMapping: Partial<Record<Tool, string>> = { const cursorMapping: Partial<Record<Tool, string>> = {
hand: dragging ? "grab" : "grabbing", hand: dragging ? "grab" : "grabbing",
zoom: holdingAlt ? "zoom-out" : "zoom-in", zoom: holdingAltRef.current ? "zoom-out" : "zoom-in",
}; };
setCssCursor(cursorMapping[tool] || "crosshair"); setCssCursor(cursorMapping[tool] || "crosshair");
}, [dragging, holdingAlt, tool, setCssCursor]); }, [dragging, holdingAltRef, tool, setCssCursor]);
const onToolUse = useCallback(() => { const onToolUse = useCallback(() => {
// If number is odd, cursor is in the center // If number is odd, cursor is in the center
@ -156,11 +156,11 @@ function Canvas() {
const tileY = radiusPosition.y + y; const tileY = radiusPosition.y + y;
const exists = prev.some(([x2, y2]) => x2 === tileX && y2 === tileY); const exists = prev.some(([x2, y2]) => x2 === tileX && y2 === tileY);
if ((holdingAlt && exists) || !exists) radiusCoords.push([tileX, tileY]); if ((holdingAltRef.current && exists) || !exists) radiusCoords.push([tileX, tileY]);
} }
} }
if (holdingAlt) { if (holdingAltRef.current) {
return prev.filter(([x, y]) => !radiusCoords.some(([x2, y2]) => x2 === x && y2 === y)); return prev.filter(([x, y]) => !radiusCoords.some(([x2, y2]) => x2 === x && y2 === y));
} else { } else {
return [...prev, ...radiusCoords]; return [...prev, ...radiusCoords];
@ -335,7 +335,15 @@ function Canvas() {
} }
depthFirstSearch({ name: startBlock.name, x: mouseCoords.x, y: mouseCoords.y }); depthFirstSearch({ name: startBlock.name, x: mouseCoords.x, y: mouseCoords.y });
setSelectionCoords(result); setSelectionCoords((prev) => {
if (holdingAltRef.current) {
// If holding alt, remove new magic wand selection
return prev.filter(([x, y]) => !result.some(([x2, y2]) => x2 === x && y2 === y));
}
// If not holding alt or shift, replace the existing selection with the magic wand selection
return result;
});
break; break;
} }
case "eyedropper": { case "eyedropper": {
@ -344,7 +352,7 @@ function Canvas() {
break; break;
} }
case "zoom": { case "zoom": {
const scaleChange = holdingAlt ? -0.1 : 0.1; const scaleChange = holdingAltRef.current ? -0.1 : 0.1;
const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.1), 32); const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.1), 32);
zoom(newScale); zoom(newScale);
break; break;
@ -353,7 +361,7 @@ function Canvas() {
default: default:
break; break;
} }
}, [tool, holdingAlt, scale, mouseCoords, blocks, setSelectedBlock, zoom]); }, [tool, holdingAltRef, scale, mouseCoords, blocks, setSelectionCoords, setSelectedBlock, zoom]);
const onKeyDown = (e: KeyboardEvent) => { const onKeyDown = (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {
@ -364,7 +372,7 @@ function Canvas() {
setCssCursor("grabbing"); setCssCursor("grabbing");
break; break;
case "Alt": case "Alt":
setHoldingAlt(true); holdingAltRef.current = true;
if (tool === "zoom") setCssCursor("zoom-out"); if (tool === "zoom") setCssCursor("zoom-out");
break; break;
case "Delete": { case "Delete": {
@ -410,7 +418,7 @@ function Canvas() {
setTool(oldToolRef.current); setTool(oldToolRef.current);
break; break;
case "Alt": case "Alt":
setHoldingAlt(false); holdingAltRef.current = false;
setCssCursor("zoom-in"); setCssCursor("zoom-in");
break; break;
} }