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

fix: allow to scroll on one axis when other is fully in view

Browse source
This commit is contained in:
Arnošt Pleskot 2023-09-05 17:32:51 +02:00
parent ebbd72e792
commit 10900f39ee
No known key found for this signature in database
1 changed files with 41 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/App.tsx
View file

@ -8417,7 +8417,8 @@ class App extends React.Component<AppProps, AppState> {
/** /**
* Calculates the minimum and maximum scroll values based on the current state. * Calculates the minimum and maximum scroll values based on the current state.
* @param shouldAdjustForCenteredView - Whether the view should be adjusted for centered view - when constrained area fits the viewport. * @param shouldAdjustForCenteredViewX - Whether the view should be adjusted for centered view on X axis - when constrained area width fits the viewport.
* @param shouldAdjustForCenteredViewY - Whether the view should be adjusted for centered view on Y axis - when constrained area height fits the viewport.
* @param overscrollAllowanceX - The overscroll allowance value for the X axis. * @param overscrollAllowanceX - The overscroll allowance value for the X axis.
* @param overscrollAllowanceY - The overscroll allowance value for the Y axis. * @param overscrollAllowanceY - The overscroll allowance value for the Y axis.
* @param constrainedScrollCenterX - The X coordinate of the constrained scroll area center. * @param constrainedScrollCenterX - The X coordinate of the constrained scroll area center.
@ -8425,7 +8426,8 @@ class App extends React.Component<AppProps, AppState> {
* @returns The minimum and maximum scroll values for the X and Y axes. * @returns The minimum and maximum scroll values for the X and Y axes.
*/ */
const calculateMinMaxScrollValues = ( const calculateMinMaxScrollValues = (
shouldAdjustForCenteredView: boolean, shouldAdjustForCenteredViewX: boolean,
shouldAdjustForCenteredViewY: boolean,
overscrollAllowance: number, overscrollAllowance: number,
constrainedScrollCenterX: number, constrainedScrollCenterX: number,
constrainedScrollCenterY: number, constrainedScrollCenterY: number,
@ -8436,33 +8438,45 @@ class App extends React.Component<AppProps, AppState> {
let maxScrollY; let maxScrollY;
let minScrollY; let minScrollY;
if (cursorButton === "down" && shouldAdjustForCenteredView) { // Handling the X-axis
if (cursorButton === "down") {
if (shouldAdjustForCenteredViewX) {
maxScrollX = constrainedScrollCenterX + overscrollAllowance; maxScrollX = constrainedScrollCenterX + overscrollAllowance;
minScrollX = constrainedScrollCenterX - overscrollAllowance; minScrollX = constrainedScrollCenterX - overscrollAllowance;
maxScrollY = constrainedScrollCenterY + overscrollAllowance; } else {
minScrollY = constrainedScrollCenterY - overscrollAllowance;
} else if (cursorButton === "down" && !shouldAdjustForCenteredView) {
maxScrollX = scrollConstraints.x + overscrollAllowance; maxScrollX = scrollConstraints.x + overscrollAllowance;
minScrollX = minScrollX =
scrollConstraints.x - scrollConstraints.x -
scrollConstraints.width + scrollConstraints.width +
width / zoom - width / zoom -
overscrollAllowance; overscrollAllowance;
}
} else if (shouldAdjustForCenteredViewX) {
maxScrollX = constrainedScrollCenterX;
minScrollX = constrainedScrollCenterX;
} else {
maxScrollX = scrollConstraints.x;
minScrollX =
scrollConstraints.x - scrollConstraints.width + width / zoom;
}
// Handling the Y-axis
if (cursorButton === "down") {
if (shouldAdjustForCenteredViewY) {
maxScrollY = constrainedScrollCenterY + overscrollAllowance;
minScrollY = constrainedScrollCenterY - overscrollAllowance;
} else {
maxScrollY = scrollConstraints.y + overscrollAllowance; maxScrollY = scrollConstraints.y + overscrollAllowance;
minScrollY = minScrollY =
scrollConstraints.y - scrollConstraints.y -
scrollConstraints.height + scrollConstraints.height +
height / zoom - height / zoom -
overscrollAllowance; overscrollAllowance;
} else if (cursorButton !== "down" && shouldAdjustForCenteredView) { }
maxScrollX = constrainedScrollCenterX; } else if (shouldAdjustForCenteredViewY) {
minScrollX = constrainedScrollCenterX;
maxScrollY = constrainedScrollCenterY; maxScrollY = constrainedScrollCenterY;
minScrollY = constrainedScrollCenterY; minScrollY = constrainedScrollCenterY;
} else { } else {
maxScrollX = scrollConstraints.x;
minScrollX =
scrollConstraints.x - scrollConstraints.width + width / zoom;
maxScrollY = scrollConstraints.y; maxScrollY = scrollConstraints.y;
minScrollY = minScrollY =
scrollConstraints.y - scrollConstraints.height + height / zoom; scrollConstraints.y - scrollConstraints.height + height / zoom;
@ -8482,11 +8496,12 @@ class App extends React.Component<AppProps, AppState> {
const { constrainedScrollCenterX, constrainedScrollCenterY } = const { constrainedScrollCenterX, constrainedScrollCenterY } =
calculateConstrainedScrollCenter(constrainedZoom); calculateConstrainedScrollCenter(constrainedZoom);
const overscrollAllowance = calculateOverscrollAllowance(); const overscrollAllowance = calculateOverscrollAllowance();
const shouldAdjustForCenteredView = const shouldAdjustForCenteredViewX = constrainedZoom <= zoomLevelX;
constrainedZoom <= zoomLevelX || constrainedZoom <= zoomLevelY; const shouldAdjustForCenteredViewY = constrainedZoom <= zoomLevelY;
const { maxScrollX, minScrollX, maxScrollY, minScrollY } = const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
calculateMinMaxScrollValues( calculateMinMaxScrollValues(
shouldAdjustForCenteredView, shouldAdjustForCenteredViewX,
shouldAdjustForCenteredViewY,
overscrollAllowance, overscrollAllowance,
constrainedScrollCenterX, constrainedScrollCenterX,
constrainedScrollCenterY, constrainedScrollCenterY,