refactor: Rename prop scrollToCenter and setScrollToCenter to scrollToContent and setScrollToContent respectively (#3261)

* refactor: Rename prop scrollToCenter and setScrollToCenter to scrollToContent and setScrollToContent respectively

* fix

* update changelog/readme

* fix

src/components/App.tsx

@@ -271,7 +271,7 @@ export type ExcalidrawImperativeAPI = {
   history: {
     clear: InstanceType<typeof App>["resetHistory"];
   };
-  setScrollToCenter: InstanceType<typeof App>["setScrollToCenter"];
+  setScrollToContent: InstanceType<typeof App>["setScrollToContent"];
   getSceneElements: InstanceType<typeof App>["getSceneElements"];
   getAppState: () => InstanceType<typeof App>["state"];
   readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
@@ -330,7 +330,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         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<ExcalidrawProps, AppState> {
       ...scene.appState,
       isLoading: false,
     };
-    if (initialData?.scrollToCenter) {
+    if (initialData?.scrollToContent) {
       scene.appState = {
         ...scene.appState,
         ...calculateScrollCenter(
@@ -1281,7 +1281,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.actionManager.executeAction(actionToggleStats);
   };
 
-  setScrollToCenter = (remoteElements: readonly ExcalidrawElement[]) => {
+  setScrollToContent = (remoteElements: readonly ExcalidrawElement[]) => {
     this.setState({
       ...calculateScrollCenter(
         getNonDeletedElements(remoteElements),

src/data/types.ts

@@ -15,7 +15,7 @@ export interface ImportedDataState {
   source?: string;
   elements?: DataState["elements"] | null;
   appState?: Partial<DataState["appState"]> | null;
-  scrollToCenter?: boolean;
+  scrollToContent?: boolean;
 }
 
 export interface LibraryData {

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -259,7 +259,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         if (elements) {
           scenePromise.resolve({
             elements,
-            scrollToCenter: true,
+            scrollToContent: true,
           });
         }
       } catch (error) {
@@ -313,7 +313,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
               // 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<Props, CollabState> {
     }: { init?: boolean; initFromSnapshot?: boolean } = {},
   ) => {
     if (init || initFromSnapshot) {
-      this.excalidrawAPI.setScrollToCenter(elements);
+      this.excalidrawAPI.setScrollToContent(elements);
     }
 
     this.excalidrawAPI.updateScene({

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);
       }

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`.

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 | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a></pre> | Returns all the elements excluding the deleted in the scene |
 | getAppState | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState</a></pre> | Returns current appState |
 | history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history |
-| setScrollToCenter | <pre> (<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>) => void </pre> | sets the elements to center |
+| setScrollToContent | <pre> (<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>) => void </pre> | Scroll to the nearest element to center |
 
 #### `readyPromise`
 

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,
         }}
       />,
     );