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

chore: cleanup

Browse source
This commit is contained in:
Arnošt Pleskot 2023-09-14 23:15:57 +02:00
parent 94e9b20951
commit c33fb846ab
No known key found for this signature in database
3 changed files with 42 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/App.tsx
View file

@ -2009,28 +2009,23 @@ class App extends React.Component<AppProps, AppState> {
); );
} }
if ( if (this.state.scrollConstraints?.animateOnNextUpdate) {
this.state.scrollConstraints && const newState = constrainScrollState(this.state, false);
this.state.scrollConstraints.isAnimating
) {
const { shouldAnimate, animateTo } = constrainScrollState(this.state);
scrollConstraintsAnimationTimeout = setTimeout(() => { scrollConstraintsAnimationTimeout = setTimeout(() => {
this.cancelInProgresAnimation?.(); this.cancelInProgresAnimation?.();
if (shouldAnimate && animateTo) {
const fromValues = { const fromValues = {
scrollX: this.state.scrollX, scrollX: this.state.scrollX,
scrollY: this.state.scrollY, scrollY: this.state.scrollY,
zoom: this.state.zoom.value, zoom: this.state.zoom.value,
}; };
const toValues = { const toValues = {
scrollX: animateTo.scrollX, scrollX: newState.scrollX,
scrollY: animateTo.scrollY, scrollY: newState.scrollY,
zoom: animateTo.zoom.value, zoom: newState.zoom.value,
}; };
this.animateToConstrainedArea(fromValues, toValues); this.animateToConstrainedArea(fromValues, toValues);
}
}, 200); }, 200);
} }
} }
@ -2701,22 +2696,10 @@ class App extends React.Component<AppProps, AppState> {
...(this.state.scrollConstraints && { ...(this.state.scrollConstraints && {
// manually reset if setState in onCancel wasn't committed yet // manually reset if setState in onCancel wasn't committed yet
shouldCacheIgnoreZoom: false, shouldCacheIgnoreZoom: false,
scrollConstraints: {
...this.state.scrollConstraints,
isAnimating: false,
},
}), }),
}; };
const { state, shouldAnimate } = constrainScrollState(newState); this.setState(constrainScrollState(newState));
this.setState({
...state,
scrollConstraints: {
...state.scrollConstraints!,
isAnimating: shouldAnimate,
},
});
}; };
private animateToConstrainedArea = ( private animateToConstrainedArea = (
@ -2728,7 +2711,7 @@ class App extends React.Component<AppProps, AppState> {
shouldCacheIgnoreZoom: false, shouldCacheIgnoreZoom: false,
scrollConstraints: { scrollConstraints: {
...state.scrollConstraints!, ...state.scrollConstraints!,
isAnimating: false, animateOnNextUpdate: false,
}, },
})); }));
}; };
@ -2744,7 +2727,7 @@ class App extends React.Component<AppProps, AppState> {
shouldCacheIgnoreZoom: true, shouldCacheIgnoreZoom: true,
scrollConstraints: { scrollConstraints: {
...state.scrollConstraints!, ...state.scrollConstraints!,
isAnimating: false, animateOnNextUpdate: false,
}, },
}; };
}); });
@ -8266,10 +8249,13 @@ class App extends React.Component<AppProps, AppState> {
viewModeEnabled: true, viewModeEnabled: true,
}, },
() => { () => {
const { animateTo } = constrainScrollState({ const newState = constrainScrollState(
{
...this.state, ...this.state,
scrollConstraints, scrollConstraints,
}); },
false,
);
this.animateToConstrainedArea( this.animateToConstrainedArea(
{ {
@ -8278,9 +8264,9 @@ class App extends React.Component<AppProps, AppState> {
zoom: this.state.zoom.value, zoom: this.state.zoom.value,
}, },
{ {
scrollX: animateTo!.scrollX, scrollX: newState.scrollX,
scrollY: animateTo!.scrollY, scrollY: newState.scrollY,
zoom: animateTo!.zoom.value, zoom: newState.zoom.value,
}, },
); );
}, },

50
src/scene/scrollConstraints.ts
View file

@ -310,7 +310,7 @@ let memoizedValues: {
"zoom" | "width" | "height" | "scrollConstraints" "zoom" | "width" | "height" | "scrollConstraints"
>; >;
constraints: ReturnType<typeof calculateConstraints>; constraints: ReturnType<typeof calculateConstraints>;
constraintsWithoutOverscroll: ReturnType<typeof calculateConstraints>; allowOverscroll: boolean;
} | null = null; } | null = null;
/** /**
@ -321,30 +321,24 @@ let memoizedValues: {
*/ */
export const constrainScrollState = ( export const constrainScrollState = (
state: AppState, state: AppState,
): { allowOverscroll = true,
state: AppState; ): AppState => {
shouldAnimate: boolean;
animateTo: {
scrollX: AppState["scrollX"];
scrollY: AppState["scrollY"];
zoom: AppState["zoom"];
} | null;
} => {
if (!state.scrollConstraints) { if (!state.scrollConstraints) {
return { state, shouldAnimate: false, animateTo: null }; return state;
} }
const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state; const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
const canUseMemoizedValues = const canUseMemoizedValues =
memoizedValues?.previousState.scrollConstraints && // can't use memoized values if there were no scrollConstraints in memoizedValues
memoizedValues && // there are memoized values memoizedValues && // there are memoized values
isShallowEqual( memoizedValues.previousState.scrollConstraints && // can't use memoized values if there were no scrollConstraints in memoizedValues
memoizedValues.allowOverscroll === allowOverscroll && // allowOverscroll is the same as in memoizedValues
// current scrollConstraints are the same as in memoizedValues // current scrollConstraints are the same as in memoizedValues
isShallowEqual(
state.scrollConstraints, state.scrollConstraints,
memoizedValues.previousState.scrollConstraints!, memoizedValues.previousState.scrollConstraints!,
) && ) &&
isShallowEqual(
// current zoom and window dimensions are equal to those in memoizedValues // current zoom and window dimensions are equal to those in memoizedValues
isShallowEqual(
{ zoom: zoom.value, width, height }, { zoom: zoom.value, width, height },
{ {
zoom: memoizedValues.previousState.zoom.value, zoom: memoizedValues.previousState.zoom.value,
@ -360,17 +354,7 @@ export const constrainScrollState = (
width, width,
height, height,
zoom, zoom,
allowOverscroll: true, allowOverscroll,
});
const constraintsWithoutOverscroll = canUseMemoizedValues
? memoizedValues!.constraintsWithoutOverscroll
: calculateConstraints({
scrollConstraints,
width,
height,
zoom,
allowOverscroll: false,
}); });
const constrainedValues = constrainScrollValues({ const constrainedValues = constrainScrollValues({
@ -379,12 +363,6 @@ export const constrainScrollState = (
scrollY, scrollY,
}); });
const animateTo = constrainScrollValues({
...constraintsWithoutOverscroll,
scrollX,
scrollY,
});
if (!canUseMemoizedValues) { if (!canUseMemoizedValues) {
memoizedValues = { memoizedValues = {
previousState: { previousState: {
@ -394,16 +372,16 @@ export const constrainScrollState = (
scrollConstraints: state.scrollConstraints, scrollConstraints: state.scrollConstraints,
}, },
constraints, constraints,
constraintsWithoutOverscroll, allowOverscroll,
}; };
} }
return { return {
state: {
...state, ...state,
...constrainedValues, scrollConstraints: {
...state.scrollConstraints,
animateOnNextUpdate: isViewportOutsideOfConstrainedArea(state),
}, },
shouldAnimate: isViewportOutsideOfConstrainedArea(state), ...constrainedValues,
animateTo,
}; };
}; };

2
src/types.ts
View file

@ -661,7 +661,7 @@ export type ScrollConstraints = {
y: number; y: number;
width: number; width: number;
height: number; height: number;
isAnimating?: boolean; animateOnNextUpdate?: boolean;
viewportZoomFactor?: number; viewportZoomFactor?: number;
lockZoom?: boolean; lockZoom?: boolean;
}; };