feat: pass scrollConstraints via props

src/actions/types.ts

@@ -16,7 +16,7 @@ export type ActionResult =
       elements?: readonly ExcalidrawElement[] | null;
       appState?: MarkOptional<
         AppState,
-        "offsetTop" | "offsetLeft" | "width" | "height"
+        "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
       > | null;
       files?: BinaryFiles | null;
       commitToHistory: boolean;

src/appState.ts

@@ -17,7 +17,7 @@ const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
 
 export const getDefaultAppState = (): Omit<
   AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height"
+  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
 > => {
   return {
     showWelcomeScreen: false,
@@ -98,7 +98,6 @@ export const getDefaultAppState = (): Omit<
     pendingImageElementId: null,
     showHyperlinkPopup: false,
     selectedLinearElement: null,
-    scrollConstraints: null,
   };
 };
 
@@ -205,7 +204,7 @@ const APP_STATE_STORAGE_CONF = (<
   pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
   selectedLinearElement: { browser: true, export: false, server: false },
-  scrollConstraints: { browser: true, export: false, server: false },
+  scrollConstraints: { browser: false, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

src/components/App.tsx

@@ -366,6 +366,7 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
   height: 0,
   offsetLeft: 0,
   offsetTop: 0,
+  scrollConstraints: null,
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
@@ -466,7 +467,9 @@ class App extends React.Component<AppProps, AppState> {
       gridModeEnabled = false,
       theme = defaultAppState.theme,
       name = defaultAppState.name,
+      scrollConstraints,
     } = props;
+
     this.state = {
       ...defaultAppState,
       theme,
@@ -478,6 +481,7 @@ class App extends React.Component<AppProps, AppState> {
       name,
       width: window.innerWidth,
       height: window.innerHeight,
+      scrollConstraints: scrollConstraints ?? null,
     };
 
     this.id = nanoid();
@@ -1209,6 +1213,7 @@ class App extends React.Component<AppProps, AppState> {
             height: this.state.height,
             offsetTop: this.state.offsetTop,
             offsetLeft: this.state.offsetLeft,
+            scrollConstraints: this.state.scrollConstraints,
           },
           null,
         ),

src/data/restore.ts

@@ -45,7 +45,7 @@ import { normalizeLink } from "./url";
 
 type RestoredAppState = Omit<
   AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height"
+  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
 >;
 
 export const AllowedExcalidrawActiveTools: Record<

src/index-node.ts

@@ -65,6 +65,7 @@ const canvas = exportToCanvas(
     offsetLeft: 0,
     width: 0,
     height: 0,
+    scrollConstraints: null,
   },
   {}, // files
   {

src/packages/excalidraw/index.tsx

@@ -42,6 +42,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     onPointerDown,
     onScrollChange,
     children,
+    scrollConstraints,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -115,6 +116,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onLinkOpen={onLinkOpen}
           onPointerDown={onPointerDown}
           onScrollChange={onScrollChange}
+          scrollConstraints={scrollConstraints}
         >
           {children}
         </App>

src/packages/utils.ts

@@ -64,7 +64,14 @@ export const exportToCanvas = ({
   const { exportBackground, viewBackgroundColor } = restoredAppState;
   return _exportToCanvas(
     passElementsSafely(restoredElements),
-    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
+    {
+      ...restoredAppState,
+      offsetTop: 0,
+      offsetLeft: 0,
+      width: 0,
+      height: 0,
+      scrollConstraints: null,
+    },
     files || {},
     { exportBackground, exportPadding, viewBackgroundColor },
     (width: number, height: number) => {

src/types.ts

@@ -367,6 +367,7 @@ export interface ExcalidrawProps {
   ) => void;
   onScrollChange?: (scrollX: number, scrollY: number) => void;
   children?: React.ReactNode;
+  scrollConstraints?: AppState["scrollConstraints"];
 }
 
 export type SceneData = {