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

feat: animate to constrained area on setting constrains

Browse source
This commit is contained in:
Arnošt Pleskot 2023-09-13 16:41:10 +02:00
parent d1e3ea431b
commit 186ed43671
No known key found for this signature in database
1 changed files with 59 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/App.tsx
View file

@ -2624,10 +2624,6 @@ class App extends React.Component<AppProps, AppState> {
// when animating, we use RequestAnimationFrame to prevent the animation // when animating, we use RequestAnimationFrame to prevent the animation
// from slowing down other processes // from slowing down other processes
if (opts?.animate) { if (opts?.animate) {
const origScrollX = this.state.scrollX;
const origScrollY = this.state.scrollY;
const origZoom = this.state.zoom.value;
const fromValues = { const fromValues = {
scrollX: this.state.scrollX, scrollX: this.state.scrollX,
scrollY: this.state.scrollY, scrollY: this.state.scrollY,
@ -2702,11 +2698,22 @@ class App extends React.Component<AppProps, AppState> {
scrollY: animateTo.scrollY, scrollY: animateTo.scrollY,
zoom: animateTo.zoom.value, zoom: animateTo.zoom.value,
}; };
this.animateToConstrainedArea(fromValues, toValues);
}, 200);
}
});
};
private animateToConstrainedArea = (
fromValues: AnimateTranslateCanvasValues,
toValues: AnimateTranslateCanvasValues,
) => {
const cleanUp = () => { const cleanUp = () => {
this.setState((inAnimationState) => ({ this.setState((state) => ({
shouldCacheIgnoreZoom: false, shouldCacheIgnoreZoom: false,
scrollConstraints: { scrollConstraints: {
...inAnimationState.scrollConstraints!, ...state.scrollConstraints!,
isAnimating: false, isAnimating: false,
}, },
})); }));
@ -2717,10 +2724,10 @@ class App extends React.Component<AppProps, AppState> {
toValues, toValues,
duration: 200, duration: 200,
onStart: () => { onStart: () => {
this.setState((inAnimationState) => ({ this.setState((state) => ({
shouldCacheIgnoreZoom: true, shouldCacheIgnoreZoom: true,
scrollConstraints: { scrollConstraints: {
...inAnimationState.scrollConstraints!, ...state.scrollConstraints!,
isAnimating: true, isAnimating: true,
}, },
})); }));
@ -2728,12 +2735,9 @@ class App extends React.Component<AppProps, AppState> {
onEnd: cleanUp, onEnd: cleanUp,
onCancel: cleanUp, onCancel: cleanUp,
}); });
}, 200);
}
});
}; };
animateTranslateCanvas = ({ private animateTranslateCanvas = ({
fromValues, fromValues,
toValues, toValues,
duration, duration,
@ -8239,10 +8243,31 @@ class App extends React.Component<AppProps, AppState> {
scrollConstraints: ScrollConstraints | null, scrollConstraints: ScrollConstraints | null,
) => { ) => {
if (scrollConstraints) { if (scrollConstraints) {
this.setState({ this.setState(
{
scrollConstraints, scrollConstraints,
viewModeEnabled: true, viewModeEnabled: true,
},
() => {
const { animateTo } = constrainScrollState({
...this.state,
scrollConstraints,
}); });
this.animateToConstrainedArea(
{
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
zoom: this.state.zoom.value,
},
{
scrollX: animateTo!.scrollX,
scrollY: animateTo!.scrollY,
zoom: animateTo!.zoom.value,
},
);
},
);
} else { } else {
this.setState({ this.setState({
scrollConstraints: null, scrollConstraints: null,