From d273acb7e49a1681e24b9c5b0b373dfcccee8ff6 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Tue, 15 Nov 2022 00:15:02 +0100
Subject: [PATCH] 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                        | 22 ++++++++++++++-----
 src/data/restore.ts                           |  6 ++---
 src/packages/excalidraw/README.md             |  2 +-
 .../data/__snapshots__/restore.test.ts.snap   |  8 +++----
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 97905d31..384bd7ba 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<AppProps, AppState> {
   };
 
   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 6c01d6bd..490f011c 100644
--- a/src/data/restore.ts
+++ b/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 || {},
   };
diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md
index d31c27cf..b9345b18 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 fd9f735c..34da0673 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,
 }