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: set initial zoom to viewportZoomFactor when lockZoom is false

Browse source
This commit is contained in:
Arnošt Pleskot 2023-09-03 23:47:48 +02:00
parent 806b1e9705
commit f8ba862774
No known key found for this signature in database
2 changed files with 22 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/App.tsx
View file

@ -2050,14 +2050,16 @@ class App extends React.Component<AppProps, AppState> {
scrollConstraints, scrollConstraints,
}); });
const shouldAnimate =
isViewportOutsideOfConstrainedArea &&
this.state.cursorButton !== "down" &&
prevState.cursorButton === "down" &&
prevState.zoom.value === this.state.zoom.value &&
!this.state.isLoading; // Do not animate when app is initialized but scene is empty - it would cause flickering
constraintedScrollState = this.handleConstrainedScrollStateChange({ constraintedScrollState = this.handleConstrainedScrollStateChange({
...constrainedScrollValues, ...constrainedScrollValues,
shouldAnimate: shouldAnimate,
isViewportOutsideOfConstrainedArea &&
this.state.cursorButton !== "down" &&
prevState.cursorButton === "down" &&
prevState.zoom.value === this.state.zoom.value &&
elementsIncludingDeleted.length > 0, // Do not animate when app is initialized but scene is empty - this would cause flickering
}); });
} }
@ -8313,16 +8315,13 @@ class App extends React.Component<AppProps, AppState> {
return { scrollX, scrollY, zoom }; return { scrollX, scrollY, zoom };
} }
const { zoomLevelX, zoomLevelY, maxZoomLevel } = this.calculateZoomLevel( const { zoomLevelX, zoomLevelY, initialZoomLevel } =
scrollConstraints, this.calculateZoomLevel(scrollConstraints, width, height);
width,
height,
);
// The zoom level to contain the whole constrained area in view // The zoom level to contain the whole constrained area in view
const _zoom = { const _zoom = {
value: getNormalizedZoom( value: getNormalizedZoom(
maxZoomLevel ?? Math.min(zoomLevelX, zoomLevelY), initialZoomLevel ?? Math.min(zoomLevelX, zoomLevelY),
), ),
}; };
@ -8361,7 +8360,6 @@ class App extends React.Component<AppProps, AppState> {
) => { ) => {
const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.7; const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.7;
const lockZoom = scrollConstraints.lockZoom ?? false;
const viewportZoomFactor = scrollConstraints.viewportZoomFactor const viewportZoomFactor = scrollConstraints.viewportZoomFactor
? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1)) ? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1))
: DEFAULT_VIEWPORT_ZOOM_FACTOR; : DEFAULT_VIEWPORT_ZOOM_FACTOR;
@ -8370,10 +8368,10 @@ class App extends React.Component<AppProps, AppState> {
const scrollableHeight = scrollConstraints.height; const scrollableHeight = scrollConstraints.height;
const zoomLevelX = width / scrollableWidth; const zoomLevelX = width / scrollableWidth;
const zoomLevelY = height / scrollableHeight; const zoomLevelY = height / scrollableHeight;
const maxZoomLevel = lockZoom const initialZoomLevel = getNormalizedZoom(
? getNormalizedZoom(Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor) Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor,
: null; );
return { zoomLevelX, zoomLevelY, maxZoomLevel }; return { zoomLevelX, zoomLevelY, initialZoomLevel };
}; };
private calculateConstraints = ({ private calculateConstraints = ({
@ -8473,14 +8471,13 @@ class App extends React.Component<AppProps, AppState> {
return { maxScrollX, minScrollX, maxScrollY, minScrollY }; return { maxScrollX, minScrollX, maxScrollY, minScrollY };
}; };
const { zoomLevelX, zoomLevelY, maxZoomLevel } = this.calculateZoomLevel( const { zoomLevelX, zoomLevelY, initialZoomLevel } =
scrollConstraints, this.calculateZoomLevel(scrollConstraints, width, height);
width,
height,
);
const constrainedZoom = getNormalizedZoom( const constrainedZoom = getNormalizedZoom(
maxZoomLevel ? Math.max(maxZoomLevel, zoom.value) : zoom.value, scrollConstraints.lockZoom
? Math.max(initialZoomLevel, zoom.value)
: zoom.value,
); );
const { constrainedScrollCenterX, constrainedScrollCenterY } = const { constrainedScrollCenterX, constrainedScrollCenterY } =
calculateConstrainedScrollCenter(constrainedZoom); calculateConstrainedScrollCenter(constrainedZoom);
@ -8506,6 +8503,7 @@ class App extends React.Component<AppProps, AppState> {
constrainedZoom: { constrainedZoom: {
value: constrainedZoom, value: constrainedZoom,
}, },
initialZoomLevel,
}; };
}; };

2
src/excalidraw-app/index.tsx
View file

@ -736,7 +736,7 @@ const ExcalidrawWrapper = () => {
y: 0, y: 0,
width: 2560, width: 2560,
height: 1300, height: 1300,
lockZoom: true, lockZoom: false,
}} }}
> >
<AppMainMenu <AppMainMenu