chore: cleanup

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

View file

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

View file

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

View file

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