diff --git a/src/actions/types.ts b/src/actions/types.ts index ab20a896b..0a6271a36 100644 --- a/src/actions/types.ts +++ b/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; diff --git a/src/appState.ts b/src/appState.ts index 64059c001..ad05fca4f 100644 --- a/src/appState.ts +++ b/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 = < diff --git a/src/components/App.tsx b/src/components/App.tsx index 686c638cf..d26b13175 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -366,6 +366,7 @@ const ExcalidrawAppStateContext = React.createContext({ height: 0, offsetLeft: 0, offsetTop: 0, + scrollConstraints: null, }); ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext"; @@ -466,7 +467,9 @@ class App extends React.Component { gridModeEnabled = false, theme = defaultAppState.theme, name = defaultAppState.name, + scrollConstraints, } = props; + this.state = { ...defaultAppState, theme, @@ -478,6 +481,7 @@ class App extends React.Component { name, width: window.innerWidth, height: window.innerHeight, + scrollConstraints: scrollConstraints ?? null, }; this.id = nanoid(); @@ -1209,6 +1213,7 @@ class App extends React.Component { height: this.state.height, offsetTop: this.state.offsetTop, offsetLeft: this.state.offsetLeft, + scrollConstraints: this.state.scrollConstraints, }, null, ), diff --git a/src/data/restore.ts b/src/data/restore.ts index 5f2adc004..4d8212ba5 100644 --- a/src/data/restore.ts +++ b/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< diff --git a/src/index-node.ts b/src/index-node.ts index e966b1d52..bd049802a 100644 --- a/src/index-node.ts +++ b/src/index-node.ts @@ -65,6 +65,7 @@ const canvas = exportToCanvas( offsetLeft: 0, width: 0, height: 0, + scrollConstraints: null, }, {}, // files { diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx index 8ee2956bb..02056bbb5 100644 --- a/src/packages/excalidraw/index.tsx +++ b/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} diff --git a/src/packages/utils.ts b/src/packages/utils.ts index d9365895e..629b2dee7 100644 --- a/src/packages/utils.ts +++ b/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) => { diff --git a/src/types.ts b/src/types.ts index 86cc9c412..25f42872b 100644 --- a/src/types.ts +++ b/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 = {