smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Zoom on cursor | Issue #940 (#2319)

Browse source
This commit is contained in:
João Forja 2020-11-04 17:49:15 +00:00 • committed by GitHub
parent facde7ace0
commit 566e6a5ede
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 912 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/utils.ts
View file

@ -1,5 +1,4 @@
import { AppState } from "./types";
import { getZoomOrigin } from "./scene";
import { Zoom } from "./types";
import {
CURSOR_TYPE,
FONT_FAMILY,
@ -183,42 +182,47 @@ export const getShortcutKey = (shortcut: string): string => {
}
return `${shortcut.replace(/\bCtrlOrCmd\b/i, "Ctrl")}`;
};
export const viewportCoordsToSceneCoords = (
{ clientX, clientY }: { clientX: number; clientY: number },
appState: AppState,
canvas: HTMLCanvasElement | null,
scale: number,
{
zoom,
offsetLeft,
offsetTop,
scrollX,
scrollY,
}: {
zoom: Zoom;
offsetLeft: number;
offsetTop: number;
scrollX: number;
scrollY: number;
},
) => {
const zoomOrigin = getZoomOrigin(canvas, scale);
const clientXWithZoom =
zoomOrigin.x +
(clientX - zoomOrigin.x - appState.offsetLeft) / appState.zoom;
const clientYWithZoom =
zoomOrigin.y +
(clientY - zoomOrigin.y - appState.offsetTop) / appState.zoom;
const x = clientXWithZoom - appState.scrollX;
const y = clientYWithZoom - appState.scrollY;
const invScale = 1 / zoom.value;
const x = (clientX - zoom.translation.x - offsetLeft) * invScale - scrollX;
const y = (clientY - zoom.translation.y - offsetTop) * invScale - scrollY;
return { x, y };
};
export const sceneCoordsToViewportCoords = (
{ sceneX, sceneY }: { sceneX: number; sceneY: number },
appState: AppState,
canvas: HTMLCanvasElement | null,
scale: number,
{
zoom,
offsetLeft,
offsetTop,
scrollX,
scrollY,
}: {
zoom: Zoom;
offsetLeft: number;
offsetTop: number;
scrollX: number;
scrollY: number;
},
) => {
const zoomOrigin = getZoomOrigin(canvas, scale);
const x =
zoomOrigin.x -
(zoomOrigin.x - sceneX - appState.scrollX - appState.offsetLeft) *
appState.zoom;
const y =
zoomOrigin.y -
(zoomOrigin.y - sceneY - appState.scrollY - appState.offsetTop) *
appState.zoom;
const x = (sceneX + scrollX + offsetLeft) * zoom.value + zoom.translation.x;
const y = (sceneY + scrollY + offsetTop) * zoom.value + zoom.translation.y;
return { x, y };
};