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

fix: reimplement zooming to mouse position

Browse source
This commit is contained in:
trafficlunar 2024-12-13 17:10:50 +00:00
parent c0df9e0816
commit adae559d01
1 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Canvas.tsx
View file

@ -23,6 +23,7 @@ function Canvas() {
const [coords, setCoords] = useState<Position>({ x: 0, y: 0 });
const [scale, setScale] = useState(1);
const [mousePosition, setMousePosition] = useState<Position>({ x: 0, y: 0 });
const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 });
const [dragging, setDragging] = useState(false);
@ -69,6 +70,10 @@ function Canvas() {
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
setMousePosition({
x: mouseX,
y: mouseY,
});
setMouseCoords({
x: Math.floor((mouseX - coords.x) / (16 * scale)),
y: Math.floor((mouseY - coords.y) / (16 * scale)),
@ -90,22 +95,16 @@ function Canvas() {
(e: React.WheelEvent) => {
e.preventDefault();
// if (!stageContainerRef.current) return;
// const rect = stageContainerRef.current.getBoundingClientRect();
// const mouseX = e.clientX - rect.left;
// const mouseY = e.clientY - rect.top;
const scaleChange = e.deltaY > 0 ? -0.1 : 0.1;
const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.25), 32);
setScale(newScale);
// setCoords({
// x: -(mouseX * scale) + e.clientX,
// y: -(mouseY * scale) + e.clientY,
// });
setCoords({
x: mousePosition.x - mouseCoords.x * 16 * newScale,
y: mousePosition.y - mouseCoords.y * 16 * newScale,
});
},
[scale]
[scale, mouseCoords, mousePosition]
);
useEffect(() => {