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

calculate coords based on container viewport position (#1955)

Browse source 
* feat: calculate coords based on parent left and top so it renders correctly in host App

* fix text

* move offsets to state & fix bugs

* fix text jumping

* account for zoom in textWysiwyg & undo incorrect offsetting

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2020-07-27 17:18:49 +05:30 • committed by GitHub
parent 63edbb9517
commit 7eff6893c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 361 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/utils.ts
View file

@ -1,4 +1,4 @@
import { FlooredNumber } from "./types";
import { AppState } from "./types";
import { getZoomOrigin } from "./scene";
import {
CURSOR_TYPE,
@ -185,45 +185,39 @@ export const getShortcutKey = (shortcut: string): string => {
};
export const viewportCoordsToSceneCoords = (
{ clientX, clientY }: { clientX: number; clientY: number },
{
scrollX,
scrollY,
zoom,
}: {
scrollX: FlooredNumber;
scrollY: FlooredNumber;
zoom: number;
},
appState: AppState,
canvas: HTMLCanvasElement | null,
scale: number,
) => {
const zoomOrigin = getZoomOrigin(canvas, scale);
const clientXWithZoom = zoomOrigin.x + (clientX - zoomOrigin.x) / zoom;
const clientYWithZoom = zoomOrigin.y + (clientY - zoomOrigin.y) / zoom;
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 - scrollX;
const y = clientYWithZoom - scrollY;
const x = clientXWithZoom - appState.scrollX;
const y = clientYWithZoom - appState.scrollY;
return { x, y };
};
export const sceneCoordsToViewportCoords = (
{ sceneX, sceneY }: { sceneX: number; sceneY: number },
{
scrollX,
scrollY,
zoom,
}: {
scrollX: FlooredNumber;
scrollY: FlooredNumber;
zoom: number;
},
appState: AppState,
canvas: HTMLCanvasElement | null,
scale: number,
) => {
const zoomOrigin = getZoomOrigin(canvas, scale);
const x = zoomOrigin.x - (zoomOrigin.x - sceneX - scrollX) * zoom;
const y = zoomOrigin.y - (zoomOrigin.y - sceneY - scrollY) * zoom;
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;
return { x, y };
};