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: disable animations during zooms out of translate canvas

Browse source
This commit is contained in:
Arnošt Pleskot 2024-02-09 20:57:18 +01:00
parent 78d2a6ecc0
commit d6710ded04
No known key found for this signature in database
3 changed files with 43 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

54
packages/excalidraw/actions/actionCanvas.tsx
View file

@ -100,18 +100,21 @@ export const actionZoomIn = register({
trackEvent: { category: "canvas" },
perform: (_elements, appState, _, app) => {
return {
appState: {
...appState,
...getStateForZoom(
{
viewportX: appState.width / 2 + appState.offsetLeft,
viewportY: appState.height / 2 + appState.offsetTop,
nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
},
appState,
),
userToFollow: null,
},
appState: constrainScrollState(
{
...appState,
...getStateForZoom(
{
viewportX: appState.width / 2 + appState.offsetLeft,
viewportY: appState.height / 2 + appState.offsetTop,
nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
},
appState,
),
userToFollow: null,
},
{ disableAnimation: true },
),
commitToHistory: false,
};
},
@ -138,18 +141,21 @@ export const actionZoomOut = register({
trackEvent: { category: "canvas" },
perform: (_elements, appState, _, app) => {
return {
appState: constrainScrollState({
...appState,
...getStateForZoom(
{
viewportX: appState.width / 2 + appState.offsetLeft,
viewportY: appState.height / 2 + appState.offsetTop,
nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
},
appState,
),
userToFollow: null,
}),
appState: constrainScrollState(
{
...appState,
...getStateForZoom(
{
viewportX: appState.width / 2 + appState.offsetLeft,
viewportY: appState.height / 2 + appState.offsetTop,
nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
},
appState,
),
userToFollow: null,
},
{ disableAnimation: true },
),
commitToHistory: false,
};
},

8
packages/excalidraw/components/App.tsx
View file

@ -2797,7 +2797,9 @@ class App extends React.Component<AppProps, AppState> {
}
if (this.state.scrollConstraints?.animateOnNextUpdate) {
const newState = constrainScrollState(this.state, false);
const newState = constrainScrollState(this.state, {
allowOverscroll: false,
});
scrollConstraintsAnimationTimeout = setTimeout(() => {
this.cancelInProgressAnimation?.();
@ -4282,7 +4284,7 @@ class App extends React.Component<AppProps, AppState> {
state,
),
},
false,
{ disableAnimation: true },
),
);
}
@ -9646,7 +9648,7 @@ class App extends React.Component<AppProps, AppState> {
...this.state,
scrollConstraints,
},
false,
{ allowOverscroll: false },
);
this.animateToConstrainedArea(

10
packages/excalidraw/scene/scrollConstraints.ts
View file

@ -348,15 +348,17 @@ let memoizedValues: {
allowOverscroll: boolean;
} | null = null;
type Options = { allowOverscroll?: boolean; disableAnimation?: boolean };
/**
* Constrains the AppState scroll values within the defined scroll constraints.
*
* @param state - The original AppState with the current scroll position, dimensions, and constraints.
* @param options - An object containing options for the method: allowOverscroll and disableAnimation.
* @returns A new AppState object with scroll values constrained as per the defined constraints.
*/
export const constrainScrollState = (
state: AppState,
allowOverscroll = true,
options?: Options,
): AppState => {
if (!state.scrollConstraints) {
return state;
@ -370,6 +372,8 @@ export const constrainScrollState = (
zoom,
} = state;
const { allowOverscroll = true, disableAnimation = false } = options || {};
const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
const canUseMemoizedValues =
@ -430,7 +434,9 @@ export const constrainScrollState = (
...state,
scrollConstraints: {
...state.scrollConstraints,
animateOnNextUpdate: isViewportOutsideOfConstrainedArea(state),
animateOnNextUpdate: disableAnimation
? false
: isViewportOutsideOfConstrainedArea(state),
},
...constrainedValues,
};