diff --git a/src/components/App.tsx b/src/components/App.tsx index 21530478..6f662024 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -271,7 +271,7 @@ export type ExcalidrawImperativeAPI = { history: { clear: InstanceType["resetHistory"]; }; - setScrollToCenter: InstanceType["setScrollToCenter"]; + setScrollToContent: InstanceType["setScrollToContent"]; getSceneElements: InstanceType["getSceneElements"]; getAppState: () => InstanceType["state"]; readyPromise: ResolvablePromise; @@ -330,7 +330,7 @@ class App extends React.Component { history: { clear: this.resetHistory, }, - setScrollToCenter: this.setScrollToCenter, + setScrollToContent: this.setScrollToContent, getSceneElements: this.getSceneElements, getAppState: () => this.state, } as const; @@ -685,7 +685,7 @@ class App extends React.Component { ...scene.appState, isLoading: false, }; - if (initialData?.scrollToCenter) { + if (initialData?.scrollToContent) { scene.appState = { ...scene.appState, ...calculateScrollCenter( @@ -1281,7 +1281,7 @@ class App extends React.Component { this.actionManager.executeAction(actionToggleStats); }; - setScrollToCenter = (remoteElements: readonly ExcalidrawElement[]) => { + setScrollToContent = (remoteElements: readonly ExcalidrawElement[]) => { this.setState({ ...calculateScrollCenter( getNonDeletedElements(remoteElements), diff --git a/src/data/types.ts b/src/data/types.ts index dd3354c2..cac2ef64 100644 --- a/src/data/types.ts +++ b/src/data/types.ts @@ -15,7 +15,7 @@ export interface ImportedDataState { source?: string; elements?: DataState["elements"] | null; appState?: Partial | null; - scrollToCenter?: boolean; + scrollToContent?: boolean; } export interface LibraryData { diff --git a/src/excalidraw-app/collab/CollabWrapper.tsx b/src/excalidraw-app/collab/CollabWrapper.tsx index 09bb9bbe..0d7a90b8 100644 --- a/src/excalidraw-app/collab/CollabWrapper.tsx +++ b/src/excalidraw-app/collab/CollabWrapper.tsx @@ -259,7 +259,7 @@ class CollabWrapper extends PureComponent { if (elements) { scenePromise.resolve({ elements, - scrollToCenter: true, + scrollToContent: true, }); } } catch (error) { @@ -313,7 +313,7 @@ class CollabWrapper extends PureComponent { // noop if already resolved via init from firebase scenePromise.resolve({ elements: reconciledElements, - scrollToCenter: true, + scrollToContent: true, }); } break; @@ -454,7 +454,7 @@ class CollabWrapper extends PureComponent { }: { init?: boolean; initFromSnapshot?: boolean } = {}, ) => { if (init || initFromSnapshot) { - this.excalidrawAPI.setScrollToCenter(elements); + this.excalidrawAPI.setScrollToContent(elements); } this.excalidrawAPI.updateScene({ diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index ec4c6724..be79990d 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -77,7 +77,7 @@ const initializeScene = async (opts: { const initialData = importFromLocalStorage(); - let scene: DataState & { scrollToCenter?: boolean } = await loadScene( + let scene: DataState & { scrollToContent?: boolean } = await loadScene( null, null, initialData, @@ -104,7 +104,7 @@ const initializeScene = async (opts: { initialData, ); } - scene.scrollToCenter = true; + scene.scrollToContent = true; if (!roomLinkData) { window.history.replaceState({}, APP_NAME, window.location.origin); } diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index a949b1d6..edb15751 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -24,6 +24,8 @@ Please add the latest change on the top under the correct section. ### Refactor +- #### BREAKING CHANGE + - Rename prop `initialData.scrollToCenter` and `setScrollToCenter` API exposed via ref to `initialData.scrollToContent` and `setScrollToContent` respectively[#3261](https://github.com/excalidraw/excalidraw/pull/3261). - Rename appearance to theme [#3237](https://github.com/excalidraw/excalidraw/pull/3237). #### BREAKING CHANGE - Since `appState.appearance` is renamed to `appState.theme` so wherever `appState.appearance` including `initialData.appState.appearance` should be renamed to `appState.theme` and `initialData.appState.theme` respectively. If the `appearance` was persisted earlier, now it needs to passed as `theme`. diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index 26474b52..84abe27e 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -417,7 +417,7 @@ This helps to load Excalidraw with `initialData`. It must be an object or a [pro | --- | --- | --- | | `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. | | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) | The App state with which Excalidraw should be mounted. | -| `scrollToCenter` | boolean | This attribute implies whether to scroll to the nearest element to center once Excalidraw is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToCenter` is false so that scroll positions are retained | +| `scrollToContent` | boolean | This attribute implies whether to scroll to the nearest element to center once Excalidraw is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToContent` is false so that scroll positions are retained | ```json { @@ -464,7 +464,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the | getSceneElements | 
 () => ExcalidrawElement[]
| Returns all the elements excluding the deleted in the scene | | getAppState | 
 () => AppState
| Returns current appState | | history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history | -| setScrollToCenter | 
 (ExcalidrawElement[]) => void
| sets the elements to center | +| setScrollToContent | 
 (ExcalidrawElement[]) => void
| Scroll to the nearest element to center | #### `readyPromise` diff --git a/src/tests/scroll.test.tsx b/src/tests/scroll.test.tsx index 2984e3c6..a4fe8627 100644 --- a/src/tests/scroll.test.tsx +++ b/src/tests/scroll.test.tsx @@ -6,7 +6,7 @@ import { API } from "./helpers/api"; const { h } = window; describe("appState", () => { - it("scroll-to-center on init works with non-zero offsets", async () => { + it("scroll-to-content on init works with non-zero offsets", async () => { const WIDTH = 600; const HEIGHT = 700; const OFFSET_LEFT = 200; @@ -30,7 +30,7 @@ describe("appState", () => { height: ELEM_HEIGHT, }), ], - scrollToCenter: true, + scrollToContent: true, }} />, );