diff --git a/examples/with-nextjs/src/excalidrawWrapper.tsx b/examples/with-nextjs/src/excalidrawWrapper.tsx index fefff9d8f6..56861b513f 100644 --- a/examples/with-nextjs/src/excalidrawWrapper.tsx +++ b/examples/with-nextjs/src/excalidrawWrapper.tsx @@ -4,9 +4,10 @@ import { Excalidraw } from "@excalidraw/excalidraw"; import "@excalidraw/excalidraw/index.css"; -import App from "../../with-script-in-browser/components/ExampleApp"; import type { ScrollConstraints } from "@excalidraw/excalidraw/types"; +import App from "../../with-script-in-browser/components/ExampleApp"; + const scrollConstraints: ScrollConstraints = { x: 0, y: 0, @@ -25,9 +26,7 @@ const ExcalidrawWrapper: React.FC = () => { useCustom={(api: any, args?: any[]) => {}} excalidrawLib={excalidrawLib} > - + ); diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index d8ce21b30f..6392098640 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -4531,18 +4531,16 @@ class App extends React.Component { this.setState({ shouldCacheIgnoreZoom: false }); }, }); + } else if (scrollConstraints) { + this.setState({ + scrollX, + scrollY, + zoom, + scrollConstraints, + viewModeEnabled: true, + }); } else { - if (scrollConstraints) { - this.setState({ - scrollX, - scrollY, - zoom, - scrollConstraints, - viewModeEnabled: true, - }); - } else { - this.setState({ scrollX, scrollY, zoom }); - } + this.setState({ scrollX, scrollY, zoom }); } }; diff --git a/packages/excalidraw/scene/zoom.ts b/packages/excalidraw/scene/zoom.ts index 3d8d4ece4e..79cf76438b 100644 --- a/packages/excalidraw/scene/zoom.ts +++ b/packages/excalidraw/scene/zoom.ts @@ -1,6 +1,7 @@ -import type { AppState, NormalizedZoomValue } from "../types"; import { constrainScrollState } from "./scrollConstraints"; +import type { AppState, NormalizedZoomValue } from "../types"; + /** * When zooming out with scroll constraints active, the cursor-anchored zoom may * produce a scroll position outside the valid bounds, causing a snap-back. @@ -30,11 +31,19 @@ export const getConstrainedZoomAnchor = ( const newScrollY = state.scrollY + appLayerY * factor; const constrained = constrainScrollState( - { ...state, scrollX: newScrollX, scrollY: newScrollY, zoom: { value: nextZoom } }, + { + ...state, + scrollX: newScrollX, + scrollY: newScrollY, + zoom: { value: nextZoom }, + }, "rigid", ); - if (constrained.scrollX === newScrollX && constrained.scrollY === newScrollY) { + if ( + constrained.scrollX === newScrollX && + constrained.scrollY === newScrollY + ) { return { viewportX, viewportY }; }