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

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

@ -100,7 +100,8 @@ export const actionZoomIn = register({
trackEvent: { category: "canvas" }, trackEvent: { category: "canvas" },
perform: (_elements, appState, _, app) => { perform: (_elements, appState, _, app) => {
return { return {
appState: { appState: constrainScrollState(
{
...appState, ...appState,
...getStateForZoom( ...getStateForZoom(
{ {
@ -112,6 +113,8 @@ export const actionZoomIn = register({
), ),
userToFollow: null, userToFollow: null,
}, },
{ disableAnimation: true },
),
commitToHistory: false, commitToHistory: false,
}; };
}, },
@ -138,7 +141,8 @@ export const actionZoomOut = register({
trackEvent: { category: "canvas" }, trackEvent: { category: "canvas" },
perform: (_elements, appState, _, app) => { perform: (_elements, appState, _, app) => {
return { return {
appState: constrainScrollState({ appState: constrainScrollState(
{
...appState, ...appState,
...getStateForZoom( ...getStateForZoom(
{ {
@ -149,7 +153,9 @@ export const actionZoomOut = register({
appState, appState,
), ),
userToFollow: null, userToFollow: null,
}), },
{ disableAnimation: true },
),
commitToHistory: false, 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) { if (this.state.scrollConstraints?.animateOnNextUpdate) {
const newState = constrainScrollState(this.state, false); const newState = constrainScrollState(this.state, {
allowOverscroll: false,
});
scrollConstraintsAnimationTimeout = setTimeout(() => { scrollConstraintsAnimationTimeout = setTimeout(() => {
this.cancelInProgressAnimation?.(); this.cancelInProgressAnimation?.();
@ -4282,7 +4284,7 @@ class App extends React.Component<AppProps, AppState> {
state, state,
), ),
}, },
false, { disableAnimation: true },
), ),
); );
} }
@ -9646,7 +9648,7 @@ class App extends React.Component<AppProps, AppState> {
...this.state, ...this.state,
scrollConstraints, scrollConstraints,
}, },
false, { allowOverscroll: false },
); );
this.animateToConstrainedArea( this.animateToConstrainedArea(

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

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