feat: pinch zooming

This commit is contained in:
trafficlunar 2025-02-12 18:49:45 +00:00
parent 5bc42e5574
commit c04f62ac2c
4 changed files with 64 additions and 26 deletions

View file

@ -2,13 +2,18 @@ import { useContext } from "react";
import { CanvasContext } from "@/context/Canvas";
export function useZoomTool(zoom: (newScale: number) => void, holdingAlt: boolean) {
const { scale } = useContext(CanvasContext);
export function useZoomTool(mousePosition: Position, holdingAlt: boolean) {
const { coords, scale, setScale, setCoords } = useContext(CanvasContext);
const use = () => {
const scaleChange = holdingAlt ? -0.1 : 0.1;
const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.1), 32);
zoom(newScale);
const zoomFactor = holdingAlt ? -0.1 : 0.1;
const newScale = Math.min(Math.max(scale + zoomFactor * scale, 0.1), 32);
setScale(newScale);
setCoords({
x: mousePosition.x - ((mousePosition.x - coords.x) / scale) * newScale,
y: mousePosition.y - ((mousePosition.y - coords.y) / scale) * newScale,
});
};
return { use };