diff --git a/src/components/App.tsx b/src/components/App.tsx index 99a9ba5edf..6b5d9e0418 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1458,26 +1458,30 @@ class App extends React.Component { } }; - public updateScene = withBatchedUpdates((sceneData: SceneData) => { - if (sceneData.commitToHistory) { - this.history.resumeRecording(); - } + public updateScene = withBatchedUpdates( + (sceneData: { + elements?: SceneData["elements"]; + appState?: Pick | null; + collaborators?: SceneData["collaborators"]; + commitToHistory?: SceneData["commitToHistory"]; + }) => { + if (sceneData.commitToHistory) { + this.history.resumeRecording(); + } - // currently we only support syncing background color - if (sceneData.appState?.viewBackgroundColor) { - this.setState({ - viewBackgroundColor: sceneData.appState.viewBackgroundColor, - }); - } + if (sceneData.appState) { + this.setState(sceneData.appState); + } - if (sceneData.elements) { - this.scene.replaceAllElements(sceneData.elements); - } + if (sceneData.elements) { + this.scene.replaceAllElements(sceneData.elements); + } - if (sceneData.collaborators) { - this.setState({ collaborators: sceneData.collaborators }); - } - }); + if (sceneData.collaborators) { + this.setState({ collaborators: sceneData.collaborators }); + } + }, + ); private onSceneUpdated = () => { this.setState({}); diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index e303dba119..73866761c7 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -51,7 +51,7 @@ import { saveToLocalStorage, } from "./data/localStorage"; import CustomStats from "./CustomStats"; -import { RestoredDataState } from "../data/restore"; +import { restoreAppState, RestoredDataState } from "../data/restore"; const languageDetector = new LanguageDetector(); languageDetector.init({ @@ -239,7 +239,10 @@ const ExcalidrawWrapper = () => { } else { initializeScene({ collabAPI }).then((scene) => { if (scene) { - excalidrawAPI.updateScene(scene); + excalidrawAPI.updateScene({ + ...scene, + appState: restoreAppState(scene.appState, null), + }); } }); } diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index fda3913f92..f0acc8a281 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -17,6 +17,7 @@ Please add the latest change on the top under the correct section. ### Features +- Support updating any `appState` properties in [`updateScene`](https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx#L282) API. Earlier only `appState.viewBackgroundColor` was supported, now any attribute can be updated with this API. - Expose [`serializeAsJSON`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#serializeAsJSON) helper that we use when saving Excalidraw scene to a file [#3538](https://github.com/excalidraw/excalidraw/pull/3538). - Add support to render custom UI in the top right corner via [`renderTopRightUI`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderTopRightUI) prop [#3539](https://github.com/excalidraw/excalidraw/pull/3539), [#3572](https://github.com/excalidraw/excalidraw/pull/3572) . diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index 6dddfe5d46..31ffae8049 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -437,7 +437,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the | --- | --- | --- | | ready | `boolean` | This is set to true once Excalidraw is rendered | | readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) | -| updateScene |
(sceneData)) => void 
| updates the scene with the sceneData | +| updateScene |
(sceneData)) => void 
| updates the scene with the sceneData | | resetScene | `({ resetLoadingState: boolean }) => void` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. | | getSceneElementsIncludingDeleted |
 () => ExcalidrawElement[]
| Returns all the elements including the deleted in the scene | | getSceneElements |
 () => ExcalidrawElement[]
| Returns all the elements excluding the deleted in the scene | diff --git a/src/packages/excalidraw/README_NEXT.md b/src/packages/excalidraw/README_NEXT.md index 828af5e737..4899ceca16 100644 --- a/src/packages/excalidraw/README_NEXT.md +++ b/src/packages/excalidraw/README_NEXT.md @@ -438,7 +438,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the | --- | --- | --- | | ready | `boolean` | This is set to true once Excalidraw is rendered | | readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) | -| updateScene |
(sceneData)) => void 
| updates the scene with the sceneData | +| updateScene |
(sceneData)) => void 
| updates the scene with the sceneData | | resetScene | `({ resetLoadingState: boolean }) => void` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. | | getSceneElementsIncludingDeleted |
 () => ExcalidrawElement[]
| Returns all the elements including the deleted in the scene | | getSceneElements |
 () => ExcalidrawElement[]
| Returns all the elements excluding the deleted in the scene |