mirror of
https://github.com/trafficlunar/blockmatic.git
synced 2026-06-28 06:34:13 +00:00
feat: pinch zooming
This commit is contained in:
parent
5bc42e5574
commit
c04f62ac2c
4 changed files with 64 additions and 26 deletions
|
|
@ -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 };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue