From 052b73d95b5826b6d7b3444df6d858d8eb311fd2 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 16 Mar 2021 23:02:17 +0530 Subject: [PATCH] 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 | 8 ++++---- src/data/types.ts | 2 +- src/excalidraw-app/collab/CollabWrapper.tsx | 6 +++--- src/excalidraw-app/index.tsx | 4 ++-- src/packages/excalidraw/CHANGELOG.md | 2 ++ src/packages/excalidraw/README.md | 4 ++-- src/tests/scroll.test.tsx | 4 ++-- 7 files changed, 16 insertions(+), 14 deletions(-) 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, }} />, );