fix: refresh text dimensions only after font load done (#5878)

* fix: refresh text dimensions only after font load done

* fix snaps

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<AppProps, AppState> {
   };
 
   private onFontLoaded = () => {
-    this.scene.getElementsIncludingDeleted().forEach((element) => {
+    this.scene.replaceAllElements([
+      ...this.scene.getElementsIncludingDeleted().map((element) => {
         if (isTextElement(element)) {
           invalidateShapeForElement(element);
-      }
+          return newElementWith(element, {
+            ...refreshTextDimensions(element),
           });
+        }
+        return element;
+      }),
+    ]);
     this.onSceneUpdated();
   };
 

src/data/restore.ts

@@ -139,7 +139,7 @@ const restoreElementWithProperties = <
 
 const restoreElement = (
   element: Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-  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 || {},
   };

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`
 

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,
 }