diff --git a/src/components/App.tsx b/src/components/App.tsx index 97905d313..384bd7baf 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -123,7 +123,11 @@ import { } from "../element/binding"; import { LinearElementEditor } from "../element/linearElementEditor"; import { mutateElement, newElementWith } from "../element/mutateElement"; -import { deepCopyElement, newFreeDrawElement } from "../element/newElement"; +import { + deepCopyElement, + newFreeDrawElement, + refreshTextDimensions, +} from "../element/newElement"; import { hasBoundTextElement, isBindingElement, @@ -726,11 +730,17 @@ class App extends React.Component { }; private onFontLoaded = () => { - this.scene.getElementsIncludingDeleted().forEach((element) => { - if (isTextElement(element)) { - invalidateShapeForElement(element); - } - }); + this.scene.replaceAllElements([ + ...this.scene.getElementsIncludingDeleted().map((element) => { + if (isTextElement(element)) { + invalidateShapeForElement(element); + return newElementWith(element, { + ...refreshTextDimensions(element), + }); + } + return element; + }), + ]); this.onSceneUpdated(); }; diff --git a/src/data/restore.ts b/src/data/restore.ts index 6c01d6bdd..490f011c8 100644 --- a/src/data/restore.ts +++ b/src/data/restore.ts @@ -139,7 +139,7 @@ const restoreElementWithProperties = < const restoreElement = ( element: Exclude, - refreshDimensions = true, + refreshDimensions = false, ): typeof element | null => { switch (element.type) { case "text": @@ -239,7 +239,7 @@ export const restoreElements = ( elements: ImportedDataState["elements"], /** NOTE doesn't serve for reconciliation */ localElements: readonly ExcalidrawElement[] | null | undefined, - refreshDimensions = true, + refreshDimensions = false, ): ExcalidrawElement[] => { const localElementsMap = localElements ? arrayToMap(localElements) : null; return (elements || []).reduce((elements, element) => { @@ -387,7 +387,7 @@ export const restore = ( localElements: readonly ExcalidrawElement[] | null | undefined, ): RestoredDataState => { return { - elements: restoreElements(data?.elements, localElements, true), + elements: restoreElements(data?.elements, localElements), appState: restoreAppState(data?.appState, localAppState || null), files: data?.files || {}, }; diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index d31c27cf8..b9345b18d 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -932,7 +932,7 @@ This function will make sure all properties of element is correctly set and if a When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. Use this when you import elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the updates. -Parameter `refreshDimensions` indicates whether we should also recalculate text element dimensions. Defaults to `true`, but since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. +Parameter `refreshDimensions` indicates whether we should also recalculate text element dimensions. Defaults to `false`. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. #### `restore` diff --git a/src/tests/data/__snapshots__/restore.test.ts.snap b/src/tests/data/__snapshots__/restore.test.ts.snap index fd9f735c6..34da06732 100644 --- a/src/tests/data/__snapshots__/restore.test.ts.snap +++ b/src/tests/data/__snapshots__/restore.test.ts.snap @@ -275,7 +275,7 @@ Object { "fontFamily": 1, "fontSize": 14, "groupIds": Array [], - "height": 0, + "height": 100, "id": "id-text01", "isDeleted": false, "link": null, @@ -295,7 +295,7 @@ Object { "version": 1, "versionNonce": 0, "verticalAlign": "middle", - "width": 1, + "width": 100, "x": -0.5, "y": 0, } @@ -312,7 +312,7 @@ Object { "fontFamily": 1, "fontSize": 10, "groupIds": Array [], - "height": 0, + "height": 100, "id": "id-text01", "isDeleted": false, "link": null, @@ -332,7 +332,7 @@ Object { "version": 1, "versionNonce": 0, "verticalAlign": "top", - "width": 1, + "width": 100, "x": 0, "y": 0, }