Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename and restrict constraint mode

Browse Source
This commit is contained in:
Ryan Di 2025-05-09 18:46:54 +10:00
parent 62c800c21a
commit 3a566a292c
2 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2974,9 +2974,7 @@ class App extends React.Component<AppProps, AppState> {
}
if (this.state.scrollConstraints?.animateOnNextUpdate) {
const newState = constrainScrollState(this.state, {
allowOverscroll: false,
});
const newState = constrainScrollState(this.state, "rigid");
const fromValues = {
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
@ -5041,7 +5039,7 @@ class App extends React.Component<AppProps, AppState> {
state,
),
},
{ disableAnimation: true },
"loose",
),
);
}
@ -11353,7 +11351,7 @@ class App extends React.Component<AppProps, AppState> {
...this.state,
scrollConstraints,
},
{ allowOverscroll: false },
"rigid",
);
this.animateToConstrainedArea(

33
packages/excalidraw/scene/scrollConstraints.ts
View File

@ -417,18 +417,27 @@ export const decodeConstraints = (encoded: string): ScrollConstraints => {
}
};
type Options = { allowOverscroll?: boolean; disableAnimation?: boolean };
type Options = { allowOverscroll: boolean; disableAnimation: boolean };
const DEFAULT_OPTION: Options = {
allowOverscroll: true,
disableAnimation: false,
};
/**
* Constrains the AppState scroll values within the defined scroll constraints.
*
* constraintMode can be "elastic", "rigid", or "loose":
* - "elastic": snaps to constraints but allows overscroll
* - "rigid": snaps to constraints without overscroll
* - "loose": allows overscroll and disables animation/snapping to constraints
*
* @param state - The original AppState.
* @param options - Options for allowing overscroll and disabling animation.
* @returns A new AppState object with constrained scroll values.
*/
export const constrainScrollState = (
state: AppState,
options?: Options,
constraintMode: "elastic" | "rigid" | "loose" = "elastic",
): AppState => {
if (!state.scrollConstraints) {
return state;
@ -442,7 +451,25 @@ export const constrainScrollState = (
zoom,
} = state;
const { allowOverscroll = true, disableAnimation = false } = options || {};
let allowOverscroll: boolean;
let disableAnimation: boolean;
switch (constraintMode) {
case "elastic":
({ allowOverscroll, disableAnimation } = DEFAULT_OPTION);
break;
case "rigid":
allowOverscroll = false;
disableAnimation = false;
break;
case "loose":
allowOverscroll = true;
disableAnimation = true;
break;
default:
({ allowOverscroll, disableAnimation } = DEFAULT_OPTION);
break;
}
const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);