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

fix: prevent jitter animation on pinch to zoom and on scroll event

Browse source
This commit is contained in:
Arnošt Pleskot 2023-09-14 12:07:30 +02:00
parent 186ed43671
commit 94e9b20951
No known key found for this signature in database
2 changed files with 43 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/components/App.tsx
View file

@ -2008,6 +2008,31 @@ class App extends React.Component<AppProps, AppState> {
this.files,
);
}
if (
this.state.scrollConstraints &&
this.state.scrollConstraints.isAnimating
) {
const { shouldAnimate, animateTo } = constrainScrollState(this.state);
scrollConstraintsAnimationTimeout = setTimeout(() => {
this.cancelInProgresAnimation?.();
if (shouldAnimate && animateTo) {
const fromValues = {
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
zoom: this.state.zoom.value,
};
const toValues = {
scrollX: animateTo.scrollX,
scrollY: animateTo.scrollY,
zoom: animateTo.zoom.value,
};
this.animateToConstrainedArea(fromValues, toValues);
}
}, 200);
}
}
private renderInteractiveSceneCallback = ({
@ -2683,25 +2708,14 @@ class App extends React.Component<AppProps, AppState> {
}),
};
const { state, shouldAnimate, animateTo } = constrainScrollState(newState);
const { state, shouldAnimate } = constrainScrollState(newState);
this.setState(state, () => {
if (shouldAnimate && animateTo) {
scrollConstraintsAnimationTimeout = setTimeout(() => {
const fromValues = {
scrollX: newState.scrollX,
scrollY: newState.scrollY,
zoom: newState.zoom.value,
};
const toValues = {
scrollX: animateTo.scrollX,
scrollY: animateTo.scrollY,
zoom: animateTo.zoom.value,
};
this.animateToConstrainedArea(fromValues, toValues);
}, 200);
}
this.setState({
...state,
scrollConstraints: {
...state.scrollConstraints!,
isAnimating: shouldAnimate,
},
});
};
@ -2724,13 +2738,16 @@ class App extends React.Component<AppProps, AppState> {
toValues,
duration: 200,
onStart: () => {
this.setState((state) => ({
shouldCacheIgnoreZoom: true,
scrollConstraints: {
...state.scrollConstraints!,
isAnimating: true,
},
}));
this.setState((state) => {
cancelRender();
return {
shouldCacheIgnoreZoom: true,
scrollConstraints: {
...state.scrollConstraints!,
isAnimating: false,
},
};
});
},
onEnd: cleanUp,
onCancel: cleanUp,

2
src/scene/scrollConstraints.ts
View file

@ -330,7 +330,7 @@ export const constrainScrollState = (
zoom: AppState["zoom"];
} | null;
} => {
if (!state.scrollConstraints || state.scrollConstraints.isAnimating) {
if (!state.scrollConstraints) {
return { state, shouldAnimate: false, animateTo: null };
}
const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;