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

refactor: simplify zoom by removing zoom.translation (#4477)

Browse source
This commit is contained in:
David Luzar 2022-01-29 21:12:44 +01:00 • committed by GitHub
parent e4edda4555
commit 79d323fab1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 152 additions and 408 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/components/App.tsx
View file

@ -177,7 +177,7 @@ import {
} from "../scene";
import Scene from "../scene/Scene";
import { RenderConfig, ScrollBars } from "../scene/types";
import { getNewZoom } from "../scene/zoom";
import { getStateForZoom } from "../scene/zoom";
import { findShapeByKey } from "../shapes";
import {
AppClassProperties,
@ -1880,12 +1880,14 @@ class App extends React.Component<AppProps, AppState> {
const initialScale = gesture.initialScale;
if (initialScale) {
this.setState(({ zoom, offsetLeft, offsetTop }) => ({
zoom: getNewZoom(
getNormalizedZoom(initialScale * event.scale),
zoom,
{ left: offsetLeft, top: offsetTop },
{ x: cursorX, y: cursorY },
this.setState((state) => ({
...getStateForZoom(
{
viewportX: cursorX,
viewportY: cursorY,
nextZoom: getNormalizedZoom(initialScale * event.scale),
},
state,
),
}));
}
@ -2323,17 +2325,27 @@ class App extends React.Component<AppProps, AppState> {
const distance = getDistance(Array.from(gesture.pointers.values()));
const scaleFactor = distance / gesture.initialDistance;
this.setState(({ zoom, scrollX, scrollY, offsetLeft, offsetTop }) => ({
scrollX: scrollX + deltaX / zoom.value,
scrollY: scrollY + deltaY / zoom.value,
zoom: getNewZoom(
getNormalizedZoom(initialScale * scaleFactor),
zoom,
{ left: offsetLeft, top: offsetTop },
center,
),
shouldCacheIgnoreZoom: true,
}));
const nextZoom = scaleFactor
? getNormalizedZoom(initialScale * scaleFactor)
: this.state.zoom.value;
this.setState((state) => {
const zoomState = getStateForZoom(
{
viewportX: center.x,
viewportY: center.y,
nextZoom,
},
state,
);
return {
zoom: zoomState.zoom,
scrollX: zoomState.scrollX + deltaX / nextZoom,
scrollY: zoomState.scrollY + deltaY / nextZoom,
shouldCacheIgnoreZoom: true,
};
});
this.resetShouldCacheIgnoreZoomDebounced();
} else {
gesture.lastCenter =
@ -2824,6 +2836,7 @@ class App extends React.Component<AppProps, AppState> {
x: event.clientX,
y: event.clientY,
});
// console.log("PointerDown", event.pointerId, "size:", gesture.pointers.size);
if (gesture.pointers.size === 2) {
gesture.lastCenter = getCenter(gesture.pointers);
@ -2831,6 +2844,7 @@ class App extends React.Component<AppProps, AppState> {
gesture.initialDistance = getDistance(
Array.from(gesture.pointers.values()),
);
// console.log("gesture >>>>", gesture);
}
}
@ -5111,15 +5125,14 @@ class App extends React.Component<AppProps, AppState> {
// round to nearest step
newZoom = Math.round(newZoom * ZOOM_STEP * 100) / (ZOOM_STEP * 100);
this.setState(({ zoom, offsetLeft, offsetTop }) => ({
zoom: getNewZoom(
getNormalizedZoom(newZoom),
zoom,
{ left: offsetLeft, top: offsetTop },
this.setState((state) => ({
...getStateForZoom(
{
x: cursorX,
y: cursorY,
viewportX: cursorX,
viewportY: cursorY,
nextZoom: getNormalizedZoom(newZoom),
},
state,
),
selectedElementIds: {},
previousSelectedElementIds: