530 lines
15 KiB
TypeScript
530 lines
15 KiB
TypeScript
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useGesture } from "@use-gesture/react";
|
|
|
|
import * as PIXI from "pixi.js";
|
|
import { Container, Stage } from "@pixi/react";
|
|
|
|
import { CanvasContext } from "@/context/Canvas";
|
|
import { HistoryContext } from "@/context/History";
|
|
import { SelectionContext } from "@/context/Selection";
|
|
import { SettingsContext } from "@/context/Settings";
|
|
import { TexturesContext } from "@/context/Textures";
|
|
import { ThemeContext } from "@/context/Theme";
|
|
import { ToolContext } from "@/context/Tool";
|
|
|
|
import { useTextures } from "@/hooks/useTextures";
|
|
import { useBlockData } from "@/hooks/useBlockData";
|
|
import { useClipboard } from "@/hooks/useClipboard";
|
|
|
|
import { useMoveTool } from "@/hooks/tools/move";
|
|
import { useRectangleSelectTool } from "@/hooks/tools/rectangle-select";
|
|
import { useLassoTool } from "@/hooks/tools/lasso";
|
|
import { useMagicWandTool } from "@/hooks/tools/magic-wand";
|
|
import { usePencilTool } from "@/hooks/tools/pencil";
|
|
import { useEraserTool } from "@/hooks/tools/eraser";
|
|
import { usePaintBucketTool } from "@/hooks/tools/paint-bucket";
|
|
import { useShapeTool } from "@/hooks/tools/shape";
|
|
import { useEyedropperTool } from "@/hooks/tools/eyedropper";
|
|
import { useZoomTool } from "@/hooks/tools/zoom";
|
|
|
|
import Blocks from "./Blocks";
|
|
import Cursor from "./Cursor";
|
|
import Selection from "./Selection";
|
|
import Grid from "./Grid";
|
|
import CanvasBorder from "./CanvasBorder";
|
|
|
|
import CursorInformation from "./information/Cursor";
|
|
import CanvasInformation from "./information/Canvas";
|
|
import SelectionBar from "./SelectionBar";
|
|
|
|
// Set scale mode to NEAREST
|
|
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
|
|
|
|
function Canvas() {
|
|
const { stageSize, canvasSize, blocks, coords, scale, version, setStageSize, setBlocks, setCoords, setScale } = useContext(CanvasContext);
|
|
const { addHistory, undo, redo } = useContext(HistoryContext);
|
|
const { selectionCoords, selectionLayerBlocks, setSelectionCoords, setSelectionLayerBlocks } = useContext(SelectionContext);
|
|
const { settings } = useContext(SettingsContext);
|
|
const { missingTexture } = useContext(TexturesContext);
|
|
const { isDark } = useContext(ThemeContext);
|
|
const { tool, radius, selectedBlock, setTool } = useContext(ToolContext);
|
|
|
|
const textures = useTextures(version);
|
|
const blockData = useBlockData(version);
|
|
const stageContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const mousePosition = useRef<Position>({ x: 0, y: 0 });
|
|
const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 });
|
|
const mouseMovementRef = useRef<Position>({ x: 0, y: 0 });
|
|
const dragging = useRef(false);
|
|
const dragStartCoordsRef = useRef<Position>({ x: 0, y: 0 });
|
|
|
|
const holdingShiftRef = useRef(false);
|
|
const holdingAltRef = useRef(false);
|
|
const oldToolRef = useRef<Tool>();
|
|
const [cssCursor, setCssCursor] = useState("crosshair");
|
|
|
|
const startBlocksRef = useRef<Block[]>([]);
|
|
const startSelectionCoordsRef = useRef<CoordinateArray>([]);
|
|
|
|
const clipboard = useClipboard();
|
|
|
|
const moveTool = useMoveTool(mouseMovementRef.current);
|
|
const rectangleSelectTool = useRectangleSelectTool(mouseCoords, dragStartCoordsRef.current, holdingShiftRef.current);
|
|
const lassoTool = useLassoTool(mouseCoords, holdingAltRef.current);
|
|
const magicWandTool = useMagicWandTool(mouseCoords, holdingShiftRef.current, holdingAltRef.current);
|
|
const pencilTool = usePencilTool(mouseCoords);
|
|
const eraserTool = useEraserTool(mouseCoords);
|
|
const paintBucketTool = usePaintBucketTool(mouseCoords);
|
|
const shapeTool = useShapeTool(mouseCoords, dragStartCoordsRef.current, holdingShiftRef.current);
|
|
const eyedropperTool = useEyedropperTool(mouseCoords);
|
|
const zoomTool = useZoomTool(mousePosition.current, holdingAltRef.current);
|
|
|
|
const visibleArea = useMemo(() => {
|
|
const blockSize = 16 * scale;
|
|
|
|
const visibleWidthBlocks = Math.ceil(stageSize.width / blockSize);
|
|
const visibleHeightBlocks = Math.ceil(stageSize.height / blockSize);
|
|
|
|
const startX = Math.floor(-coords.x / blockSize);
|
|
const startY = Math.floor(-coords.y / blockSize);
|
|
|
|
return {
|
|
startX,
|
|
startY,
|
|
endX: startX + visibleWidthBlocks + 1,
|
|
endY: startY + visibleHeightBlocks + 1,
|
|
};
|
|
}, [coords, scale, stageSize]);
|
|
|
|
const visibleBlocks = useMemo(() => {
|
|
return blocks.filter(
|
|
(block) => block.x >= visibleArea.startX && block.x < visibleArea.endX && block.y >= visibleArea.startY && block.y < visibleArea.endY
|
|
);
|
|
}, [blocks, visibleArea]);
|
|
|
|
const updateCssCursor = useCallback(() => {
|
|
const cursorMapping: Partial<Record<Tool, string>> = {
|
|
hand: dragging.current ? "grabbing" : "grab",
|
|
move: "move",
|
|
zoom: holdingAltRef.current ? "zoom-out" : "zoom-in",
|
|
};
|
|
|
|
setCssCursor(cursorMapping[tool] || "crosshair");
|
|
}, [dragging, holdingAltRef, tool, setCssCursor]);
|
|
|
|
const onToolUse = useCallback(() => {
|
|
const tools: Partial<Record<Tool, { use: () => void }>> = {
|
|
move: moveTool,
|
|
"rectangle-select": rectangleSelectTool,
|
|
lasso: lassoTool,
|
|
pencil: pencilTool,
|
|
eraser: eraserTool,
|
|
shape: shapeTool,
|
|
};
|
|
|
|
// Switch to eraser tool if selected block is air when using pencil
|
|
if (tool === "pencil" && selectedBlock === "air") {
|
|
eraserTool.use();
|
|
return;
|
|
}
|
|
|
|
tools[tool]?.use();
|
|
}, [tool, selectedBlock, moveTool, rectangleSelectTool, lassoTool, pencilTool, eraserTool, shapeTool]);
|
|
|
|
const onPointerMove = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
if (!stageContainerRef.current) return;
|
|
const oldMouseCoords = mouseCoords;
|
|
|
|
const rect = stageContainerRef.current.getBoundingClientRect();
|
|
const mouseX = e.clientX - rect.left;
|
|
const mouseY = e.clientY - rect.top;
|
|
|
|
const newMouseCoords = {
|
|
x: Math.floor((mouseX - coords.x) / (16 * scale)),
|
|
y: Math.floor((mouseY - coords.y) / (16 * scale)),
|
|
};
|
|
|
|
mousePosition.current = {
|
|
x: mouseX,
|
|
y: mouseY,
|
|
};
|
|
if (newMouseCoords.x !== mouseCoords.x || newMouseCoords.y !== mouseCoords.y) {
|
|
setMouseCoords(newMouseCoords);
|
|
}
|
|
|
|
mouseMovementRef.current = {
|
|
x: newMouseCoords.x - oldMouseCoords.x,
|
|
y: newMouseCoords.y - oldMouseCoords.y,
|
|
};
|
|
|
|
if (dragging.current) {
|
|
if (tool === "hand") {
|
|
setCoords((prevCoords) => ({
|
|
x: prevCoords.x + e.movementX,
|
|
y: prevCoords.y + e.movementY,
|
|
}));
|
|
}
|
|
|
|
onToolUse();
|
|
}
|
|
},
|
|
[dragging, coords, scale, tool, mouseCoords, onToolUse, setCoords]
|
|
);
|
|
|
|
const onPointerDown = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
dragging.current = true;
|
|
|
|
onToolUse();
|
|
onPointerMove(e);
|
|
updateCssCursor();
|
|
|
|
dragStartCoordsRef.current = mouseCoords;
|
|
startBlocksRef.current = [...blocks];
|
|
startSelectionCoordsRef.current = [...selectionCoords];
|
|
|
|
// Clear selection on click
|
|
if (tool === "rectangle-select") setSelectionCoords([]);
|
|
},
|
|
[onToolUse, updateCssCursor, mouseCoords, blocks, selectionCoords, tool, setSelectionCoords]
|
|
);
|
|
|
|
const onPointerUp = useCallback(() => {
|
|
dragging.current = false;
|
|
|
|
updateCssCursor();
|
|
|
|
pencilTool.stop();
|
|
eraserTool.stop();
|
|
|
|
// History entries for pencil and eraser
|
|
if (tool === "pencil" || tool === "eraser") {
|
|
// startBlocksRef will mutate if we pass it directly
|
|
const prevBlocks = [...startBlocksRef.current];
|
|
|
|
addHistory(
|
|
tool === "pencil" ? "Pencil" : "Eraser",
|
|
() => setBlocks([...blocks]),
|
|
() => setBlocks([...prevBlocks])
|
|
);
|
|
}
|
|
|
|
if (["rectangle-select", "magic-wand", "lasso"].includes(tool)) {
|
|
// startSelectionCoordsRef will mutate if we pass it directly
|
|
const prevSelection = [...startSelectionCoordsRef.current];
|
|
|
|
addHistory(
|
|
tool === "rectangle-select" ? "Rectangle Select" : tool == "lasso" ? "Lasso" : "Magic Wand",
|
|
() => setSelectionCoords([...selectionCoords]),
|
|
() => setSelectionCoords([...prevSelection])
|
|
);
|
|
}
|
|
}, [updateCssCursor, pencilTool, eraserTool, blocks, tool, addHistory, setBlocks, selectionCoords, setSelectionCoords]);
|
|
|
|
const onWheel = useCallback(
|
|
(e: React.WheelEvent) => {
|
|
e.preventDefault();
|
|
const zoomFactor = e.deltaY > 0 ? -0.1 : 0.1;
|
|
const newScale = Math.min(Math.max(scale + zoomFactor * scale, 0.1), 32);
|
|
|
|
setScale(newScale);
|
|
setCoords({
|
|
x: mousePosition.current.x - ((mousePosition.current.x - coords.x) / scale) * newScale,
|
|
y: mousePosition.current.y - ((mousePosition.current.y - coords.y) / scale) * newScale,
|
|
});
|
|
},
|
|
[scale, setScale, setCoords, mousePosition, coords]
|
|
);
|
|
|
|
const onClick = useCallback(() => {
|
|
const tools: Partial<Record<Tool, { use: () => void }>> = {
|
|
"magic-wand": magicWandTool,
|
|
"paint-bucket": paintBucketTool,
|
|
eyedropper: eyedropperTool,
|
|
zoom: zoomTool,
|
|
};
|
|
|
|
tools[tool]?.use();
|
|
}, [tool, magicWandTool, paintBucketTool, eyedropperTool, zoomTool]);
|
|
|
|
const onKeyDown = useCallback(
|
|
async (e: React.KeyboardEvent) => {
|
|
switch (e.key) {
|
|
case "Escape":
|
|
setBlocks(startBlocksRef.current);
|
|
setSelectionLayerBlocks([]);
|
|
break;
|
|
case "Enter": {
|
|
if (selectionLayerBlocks.length == 0) return;
|
|
|
|
const combinedBlocks = [...blocks, ...selectionLayerBlocks];
|
|
const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values());
|
|
|
|
setBlocks(uniqueBlocks.filter((b) => b.name !== "air"));
|
|
setSelectionLayerBlocks([]);
|
|
|
|
addHistory(
|
|
"Move Selection",
|
|
() => setBlocks(uniqueBlocks),
|
|
() => setBlocks(startBlocksRef.current)
|
|
);
|
|
break;
|
|
}
|
|
case " ": // Space
|
|
dragging.current = true;
|
|
oldToolRef.current = tool;
|
|
setTool("hand");
|
|
setCssCursor("grabbing");
|
|
break;
|
|
case "Shift":
|
|
holdingShiftRef.current = true;
|
|
break;
|
|
case "Alt":
|
|
holdingAltRef.current = true;
|
|
if (tool === "zoom") setCssCursor("zoom-out");
|
|
break;
|
|
case "Delete":
|
|
setBlocks((prev) => {
|
|
const deletedBlocks = prev.filter((b) => !selectionCoords.some(([x2, y2]) => x2 === b.x && y2 === b.y));
|
|
addHistory(
|
|
"Delete",
|
|
() => setBlocks(deletedBlocks),
|
|
() => setBlocks(prev)
|
|
);
|
|
|
|
return deletedBlocks;
|
|
});
|
|
break;
|
|
case "a": {
|
|
if (!e.ctrlKey) return;
|
|
e.preventDefault();
|
|
|
|
const newSelection: CoordinateArray = [];
|
|
|
|
for (let x = canvasSize.minX; x < canvasSize.maxX; x++) {
|
|
for (let y = canvasSize.minY; y < canvasSize.maxY; y++) {
|
|
newSelection.push([x, y]);
|
|
}
|
|
}
|
|
|
|
setSelectionCoords((prev) => {
|
|
const prevSelection = [...prev];
|
|
addHistory(
|
|
"Select All",
|
|
() => setSelectionCoords(newSelection),
|
|
() => setSelectionCoords(prevSelection)
|
|
);
|
|
|
|
return newSelection;
|
|
});
|
|
break;
|
|
}
|
|
case "z":
|
|
if (e.ctrlKey) undo();
|
|
else setTool("zoom");
|
|
break;
|
|
case "y":
|
|
if (!e.ctrlKey) return;
|
|
redo();
|
|
break;
|
|
case "c":
|
|
if (!e.ctrlKey) return;
|
|
clipboard.copy();
|
|
break;
|
|
case "v":
|
|
if (e.ctrlKey) clipboard.paste();
|
|
else setTool("move");
|
|
break;
|
|
case "h":
|
|
setTool("hand");
|
|
break;
|
|
case "m":
|
|
setTool("rectangle-select");
|
|
break;
|
|
case "l":
|
|
setTool("lasso");
|
|
break;
|
|
case "w":
|
|
setTool("magic-wand");
|
|
break;
|
|
case "b":
|
|
setTool("pencil");
|
|
break;
|
|
case "e":
|
|
setTool("eraser");
|
|
break;
|
|
case "g":
|
|
setTool("paint-bucket");
|
|
break;
|
|
case "i":
|
|
setTool("eyedropper");
|
|
break;
|
|
case "ArrowRight": {
|
|
// Debug key combination
|
|
if (!e.altKey && !e.shiftKey) return;
|
|
|
|
const newBlocks: Block[] = [];
|
|
|
|
Object.keys(blockData).forEach((name, index) => {
|
|
const x = index % 16;
|
|
const y = Math.floor(index / 16);
|
|
newBlocks.push({ name, x, y });
|
|
});
|
|
|
|
setBlocks(newBlocks);
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
[
|
|
tool,
|
|
selectionCoords,
|
|
canvasSize,
|
|
blockData,
|
|
blocks,
|
|
selectionLayerBlocks,
|
|
clipboard,
|
|
setBlocks,
|
|
setSelectionCoords,
|
|
setSelectionLayerBlocks,
|
|
setTool,
|
|
addHistory,
|
|
redo,
|
|
undo,
|
|
]
|
|
);
|
|
|
|
const onKeyUp = useCallback(
|
|
(e: React.KeyboardEvent) => {
|
|
switch (e.key) {
|
|
case " ": // Space
|
|
dragging.current = false;
|
|
setCssCursor("grab");
|
|
|
|
if (!oldToolRef.current) return;
|
|
setTool(oldToolRef.current);
|
|
break;
|
|
case "Shift":
|
|
holdingShiftRef.current = false;
|
|
break;
|
|
case "Alt":
|
|
holdingAltRef.current = false;
|
|
if (tool === "zoom") setCssCursor("zoom-in");
|
|
break;
|
|
}
|
|
},
|
|
[setCssCursor, setTool, tool]
|
|
);
|
|
|
|
// Tool cursor handler
|
|
useEffect(() => {
|
|
const cursorMapping: Partial<Record<Tool, string>> = {
|
|
hand: "grab",
|
|
move: "move",
|
|
zoom: "zoom-in",
|
|
};
|
|
|
|
setCssCursor(cursorMapping[tool] || "crosshair");
|
|
}, [tool]);
|
|
|
|
// Resize canvas handler
|
|
useEffect(() => {
|
|
const container = stageContainerRef.current;
|
|
if (!container) return;
|
|
|
|
const resizeCanvas = () => {
|
|
setStageSize({
|
|
width: container.offsetWidth,
|
|
height: container.offsetHeight,
|
|
});
|
|
};
|
|
|
|
const resizeObserver = new ResizeObserver(resizeCanvas);
|
|
resizeObserver.observe(container);
|
|
|
|
resizeCanvas();
|
|
return () => resizeObserver.disconnect();
|
|
}, [stageContainerRef, setStageSize]);
|
|
|
|
// Window events handler
|
|
useEffect(() => {
|
|
const onBeforeUnload = (e: BeforeUnloadEvent) => {
|
|
e.preventDefault();
|
|
};
|
|
|
|
window.addEventListener("beforeunload", onBeforeUnload);
|
|
return () => {
|
|
window.removeEventListener("beforeunload", onBeforeUnload);
|
|
};
|
|
}, [onKeyDown, onKeyUp]);
|
|
|
|
useGesture(
|
|
{
|
|
onPinch: ({ offset: [d] }) => {
|
|
setScale(d);
|
|
setCoords({
|
|
x: mousePosition.current.x - ((mousePosition.current.x - coords.x) / scale) * d,
|
|
y: mousePosition.current.y - ((mousePosition.current.y - coords.y) / scale) * d,
|
|
});
|
|
},
|
|
},
|
|
{
|
|
target: stageContainerRef,
|
|
pinch: { threshold: 0.1, scaleBounds: { min: 0.1, max: 32 }, pinchOnWheel: false },
|
|
eventOptions: { passive: false },
|
|
}
|
|
);
|
|
|
|
return (
|
|
<div ref={stageContainerRef} className="relative">
|
|
<Stage
|
|
width={stageSize.width}
|
|
height={stageSize.height}
|
|
tabIndex={0}
|
|
onClick={onClick}
|
|
onKeyDown={onKeyDown}
|
|
onKeyUp={onKeyUp}
|
|
onPointerDown={onPointerDown}
|
|
onPointerMove={onPointerMove}
|
|
onPointerUp={onPointerUp}
|
|
onWheel={onWheel}
|
|
options={{ backgroundAlpha: 0 }}
|
|
style={{ cursor: cssCursor }}
|
|
className="w-full h-full bg-zinc-100 dark:bg-black touch-none select-none"
|
|
>
|
|
<Blocks blocks={visibleBlocks} missingTexture={missingTexture} textures={textures} coords={coords} scale={scale} version={version} />
|
|
{/* Selection layer */}
|
|
<Blocks
|
|
isSelectionLayer
|
|
blocks={selectionLayerBlocks}
|
|
missingTexture={missingTexture}
|
|
textures={textures}
|
|
coords={coords}
|
|
scale={scale}
|
|
version={version}
|
|
/>
|
|
|
|
<Container x={coords.x} y={coords.y} scale={scale}>
|
|
{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />}
|
|
<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} />
|
|
<Selection selection={selectionCoords} coords={coords} scale={scale} isDark={isDark} />
|
|
</Container>
|
|
|
|
{settings.grid && (
|
|
<Container filters={[new PIXI.AlphaFilter(0.1)]}>
|
|
<Grid stageSize={stageSize} coords={coords} scale={scale} isDark={isDark} />
|
|
</Container>
|
|
)}
|
|
</Stage>
|
|
|
|
<CursorInformation mouseCoords={mouseCoords} />
|
|
<CanvasInformation />
|
|
|
|
<SelectionBar startBlocks={startBlocksRef.current} startSelectionCoords={startSelectionCoordsRef.current} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Canvas;
|