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.
* @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 overscrollAllowanceY - The overscroll allowance value for the Y axis.
* @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.
*/
const calculateMinMaxScrollValues = (
shouldAdjustForCenteredView: boolean,
shouldAdjustForCenteredViewX: boolean,
shouldAdjustForCenteredViewY: boolean,
overscrollAllowance: number,
constrainedScrollCenterX: number,
constrainedScrollCenterY: number,
@ -8436,33 +8438,45 @@ class App extends React.Component<AppProps, AppState> {
let maxScrollY;
let minScrollY;
if (cursorButton === "down" && shouldAdjustForCenteredView) {
// Handling the X-axis
if (cursorButton === "down") {
if (shouldAdjustForCenteredViewX) {
maxScrollX = constrainedScrollCenterX + overscrollAllowance;
minScrollX = constrainedScrollCenterX - overscrollAllowance;
maxScrollY = constrainedScrollCenterY + overscrollAllowance;
minScrollY = constrainedScrollCenterY - overscrollAllowance;
} else if (cursorButton === "down" && !shouldAdjustForCenteredView) {
} else {
maxScrollX = scrollConstraints.x + overscrollAllowance;
minScrollX =
scrollConstraints.x -
scrollConstraints.width +
width / zoom -
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;
minScrollY =
scrollConstraints.y -
scrollConstraints.height +
height / zoom -
overscrollAllowance;
} else if (cursorButton !== "down" && shouldAdjustForCenteredView) {
maxScrollX = constrainedScrollCenterX;
minScrollX = constrainedScrollCenterX;
}
} else if (shouldAdjustForCenteredViewY) {
maxScrollY = constrainedScrollCenterY;
minScrollY = constrainedScrollCenterY;
} else {
maxScrollX = scrollConstraints.x;
minScrollX =
scrollConstraints.x - scrollConstraints.width + width / zoom;
maxScrollY = scrollConstraints.y;
minScrollY =
scrollConstraints.y - scrollConstraints.height + height / zoom;
@ -8482,11 +8496,12 @@ class App extends React.Component<AppProps, AppState> {
const { constrainedScrollCenterX, constrainedScrollCenterY } =
calculateConstrainedScrollCenter(constrainedZoom);
const overscrollAllowance = calculateOverscrollAllowance();
const shouldAdjustForCenteredView =
constrainedZoom <= zoomLevelX || constrainedZoom <= zoomLevelY;
const shouldAdjustForCenteredViewX = constrainedZoom <= zoomLevelX;
const shouldAdjustForCenteredViewY = constrainedZoom <= zoomLevelY;
const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
calculateMinMaxScrollValues(
shouldAdjustForCenteredView,
shouldAdjustForCenteredViewX,
shouldAdjustForCenteredViewY,
overscrollAllowance,
constrainedScrollCenterX,
constrainedScrollCenterY,