From a031db323d1c2bec2f59918c476a2ccc9e6bce00 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Thu, 21 Sep 2023 15:41:43 +0200 Subject: [PATCH] Don't resize text group children past intrinsic bounds (#4202) --- .../ui-jsx-canvas-bugs.spec.tsx.snap | 2 + .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 256 ++++++++++++++++++ ...ze-bounding-box-strategy.spec.browser2.tsx | 190 +++++++++++++ ...tended-bounds-and-update-groups-command.ts | 33 ++- editor/src/components/canvas/dom-walker.ts | 50 +++- .../store-deep-equality-instances-3.spec.ts | 7 + .../store/store-deep-equality-instances.ts | 8 +- editor/src/core/shared/dom-utils.ts | 24 +- editor/src/core/shared/element-template.ts | 4 + editor/src/core/shared/utils.ts | 2 +- 10 files changed, 555 insertions(+), 21 deletions(-) diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap index fa86dbf941dd..e82c1b649993 100644 --- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap +++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap @@ -203,6 +203,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -314,6 +315,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap index 00b51fe974ad..b6137da2713f 100644 --- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap +++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap @@ -244,6 +244,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -378,6 +379,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -682,6 +684,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -872,6 +875,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -1005,6 +1009,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -1138,6 +1143,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -1271,6 +1277,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -1508,6 +1515,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -1642,6 +1650,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -1849,6 +1858,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -2085,6 +2095,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -2219,6 +2230,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -2333,6 +2345,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -2587,6 +2600,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -2721,6 +2735,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -2986,6 +3001,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -3217,6 +3233,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -3388,6 +3405,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -3525,6 +3543,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -3696,6 +3715,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -3833,6 +3853,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -4004,6 +4025,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -4141,6 +4163,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -4446,6 +4469,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -4580,6 +4604,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -4969,6 +4994,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -5324,6 +5350,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -5604,6 +5631,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -5850,6 +5878,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -6029,6 +6058,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -6174,6 +6204,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -6353,6 +6384,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -6498,6 +6530,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -6677,6 +6710,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -6822,6 +6856,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -7102,6 +7137,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -7348,6 +7384,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -7527,6 +7564,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -7672,6 +7710,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -7851,6 +7890,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -7996,6 +8036,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -8175,6 +8216,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -8320,6 +8362,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -8600,6 +8643,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -8846,6 +8890,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -9025,6 +9070,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -9170,6 +9216,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -9349,6 +9396,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -9494,6 +9542,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -9673,6 +9722,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -9818,6 +9868,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -10066,6 +10117,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -10200,6 +10252,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -10375,6 +10428,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -10490,6 +10544,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -10605,6 +10660,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -10841,6 +10897,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -10975,6 +11032,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -11167,6 +11225,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -11421,6 +11480,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -11555,6 +11615,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -11831,6 +11892,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -12072,6 +12134,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -12253,6 +12316,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -12434,6 +12498,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -12615,6 +12680,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -12869,6 +12935,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -13003,6 +13070,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -13279,6 +13347,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -13520,6 +13589,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -13701,6 +13771,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -13882,6 +13953,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -14063,6 +14135,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -14311,6 +14384,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -14445,6 +14519,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -14620,6 +14695,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -14735,6 +14811,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -14850,6 +14927,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -15098,6 +15176,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -15232,6 +15311,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -15443,6 +15523,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -15620,6 +15701,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -15736,6 +15818,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -15852,6 +15935,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -16116,6 +16200,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -16265,6 +16350,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -16607,6 +16693,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -16811,6 +16898,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -17074,6 +17162,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -17223,6 +17312,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -17565,6 +17655,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -17769,6 +17860,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -18033,6 +18125,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -18182,6 +18275,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -18575,6 +18669,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -18830,6 +18925,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -19094,6 +19190,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -19243,6 +19340,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -19636,6 +19734,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -19891,6 +19990,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -20126,6 +20226,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -20260,6 +20361,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -20374,6 +20476,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -20732,6 +20835,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -20866,6 +20970,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -22096,6 +22201,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -22978,6 +23084,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -23826,6 +23933,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -24200,6 +24308,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -24408,6 +24517,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -24782,6 +24892,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -24990,6 +25101,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -25364,6 +25476,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -25572,6 +25685,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -25984,6 +26098,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -26234,6 +26349,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -26646,6 +26762,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -26896,6 +27013,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -27308,6 +27426,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -27558,6 +27677,7 @@ export var storyboard = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -27816,6 +27936,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -27950,6 +28071,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -28159,6 +28281,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -28291,6 +28414,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -28423,6 +28547,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -28660,6 +28785,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -28794,6 +28920,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -28977,6 +29104,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -29213,6 +29341,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -29347,6 +29476,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -29601,6 +29731,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -29883,6 +30014,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -30017,6 +30149,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -30259,6 +30392,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -30450,6 +30584,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -30590,6 +30725,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -30854,6 +30990,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -31003,6 +31140,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -31280,6 +31418,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -31421,6 +31560,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -31838,6 +31978,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -31987,6 +32128,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -32265,6 +32407,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -32406,6 +32549,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -32754,6 +32898,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -32887,6 +33032,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -33654,6 +33800,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -33770,6 +33917,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -33886,6 +34034,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34002,6 +34151,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34118,6 +34268,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34234,6 +34385,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34350,6 +34502,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34543,6 +34696,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34697,6 +34851,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34813,6 +34968,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -34929,6 +35085,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35045,6 +35202,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35161,6 +35319,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35277,6 +35436,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35395,6 +35555,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35511,6 +35672,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35627,6 +35789,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35743,6 +35906,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35859,6 +36023,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -35975,6 +36140,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -36093,6 +36259,7 @@ export var App = (props) => { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -36347,6 +36514,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -36481,6 +36649,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -36757,6 +36926,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -36998,6 +37168,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -37179,6 +37350,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -37360,6 +37532,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -37541,6 +37714,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -37795,6 +37969,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -37929,6 +38104,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -38206,6 +38382,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -38448,6 +38625,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -38630,6 +38808,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -38812,6 +38991,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -38994,6 +39174,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -39248,6 +39429,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -39382,6 +39564,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -39665,6 +39848,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -39913,6 +40097,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -40094,6 +40279,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -40275,6 +40461,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -40456,6 +40643,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -40716,6 +40904,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -40865,6 +41054,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -41102,6 +41292,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -41243,6 +41434,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -41481,6 +41673,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -41592,6 +41785,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -41751,6 +41945,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -41872,6 +42067,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -41993,6 +42189,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -42221,6 +42418,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -42332,6 +42530,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -42615,6 +42814,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -42840,6 +43040,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -43053,6 +43254,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -43164,6 +43366,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -43401,6 +43604,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -43537,6 +43741,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -43750,6 +43955,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -43861,6 +44067,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -43975,6 +44182,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -44196,6 +44404,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -44307,6 +44516,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -44499,6 +44709,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -44640,6 +44851,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -44855,6 +45067,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -44966,6 +45179,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -45249,6 +45463,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -45401,6 +45616,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -45553,6 +45769,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -45767,6 +45984,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -45878,6 +46096,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -46009,6 +46228,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -46268,6 +46488,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -46402,6 +46623,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -46833,6 +47055,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -46954,6 +47177,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -47189,6 +47413,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -47422,6 +47647,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -47579,6 +47805,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -47734,6 +47961,7 @@ export var storyboard = ( "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -47975,6 +48203,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -48109,6 +48338,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -48272,6 +48502,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -48404,6 +48635,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -48643,6 +48875,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -48777,6 +49010,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -48891,6 +49125,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -49160,6 +49395,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -49294,6 +49530,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -49599,6 +49836,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -49869,6 +50107,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -50074,6 +50313,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -50249,6 +50489,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -50390,6 +50631,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -50595,6 +50837,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -50770,6 +51013,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -50911,6 +51155,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -51116,6 +51361,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -51291,6 +51537,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -51432,6 +51679,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -51670,6 +51918,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -51804,6 +52053,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -51918,6 +52168,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -52166,6 +52417,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -52300,6 +52552,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -52482,6 +52735,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -52634,6 +52888,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, @@ -52756,6 +53011,7 @@ Object { "position": "static", "providesBoundsForAbsoluteChildren": false, "renderedChildrenCount": 0, + "textBounds": null, "textDecorationLine": null, "usesParentBounds": false, }, diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx index 3d813b4b3d0e..7d800534b2f2 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx @@ -1804,6 +1804,196 @@ export var storyboard = ( ) }) }) + describe('text children', () => { + function isBetween(n: number, min: number, max: number) { + return min <= n && n <= max + } + + it('does not resize text elements past their intrinsic size', async () => { + const renderResult = await renderTestEditorWithCode( + formatTestProjectCode(` + import * as React from 'react' + import { Storyboard, Group } from 'utopia-api' + + export var storyboard = ( + + +
+ + hello there + + + + ) + `), + 'await-first-dom-report', + ) + + const target = EP.fromString('storyboard/group') + + await renderResult.dispatch([selectComponents([target], false)], true) + + await resizeElement( + renderResult, + { x: -200, y: -200 }, + EdgePositionBottomRight, + emptyModifiers, + ) + + const span = await renderResult.renderedDOM.findByTestId('span') + expect(span.clientWidth).toEqual(68) + expect(isBetween(span.clientHeight, 18, 19)).toBe(true) + }) + it('does not resize text elements past their intrinsic size with padding', async () => { + const renderResult = await renderTestEditorWithCode( + formatTestProjectCode(` + import * as React from 'react' + import { Storyboard, Group } from 'utopia-api' + + export var storyboard = ( + + +
+ + hello there + + + + ) + `), + 'await-first-dom-report', + ) + + const target = EP.fromString('storyboard/group') + + await renderResult.dispatch([selectComponents([target], false)], true) + + await resizeElement( + renderResult, + { x: -200, y: -200 }, + EdgePositionBottomRight, + emptyModifiers, + ) + + const span = await renderResult.renderedDOM.findByTestId('span') + expect(span.clientWidth).toEqual(88) + expect(isBetween(span.clientHeight, 37, 39)).toBe(true) + }) + it('does not resize text elements past their intrinsic size when zoomed in', async () => { + const renderResult = await renderTestEditorWithCode( + formatTestProjectCode(` + import * as React from 'react' + import { Storyboard, Group } from 'utopia-api' + + export var storyboard = ( + + +
+ + hello there + + + + ) + `), + 'await-first-dom-report', + ) + + const target = EP.fromString('storyboard/group') + + await renderResult.dispatch( + [selectComponents([target], false), CanvasActions.zoom(2)], + true, + ) + + await resizeElement( + renderResult, + { x: -400, y: -400 }, + EdgePositionBottomRight, + emptyModifiers, + ) + + const span = await renderResult.renderedDOM.findByTestId('span') + expect(span.clientWidth).toEqual(88) + expect(isBetween(span.clientHeight, 37, 39)).toBe(true) + }) + it('does not resize text elements past their intrinsic size when zoomed out', async () => { + const renderResult = await renderTestEditorWithCode( + formatTestProjectCode(` + import * as React from 'react' + import { Storyboard, Group } from 'utopia-api' + + export var storyboard = ( + + +
+ + hello there + + + + ) + `), + 'await-first-dom-report', + ) + + const target = EP.fromString('storyboard/group') + + await renderResult.dispatch( + [selectComponents([target], false), CanvasActions.zoom(0.5)], + true, + ) + + await resizeElement( + renderResult, + { x: -100, y: -100 }, + EdgePositionBottomRight, + emptyModifiers, + ) + + const span = await renderResult.renderedDOM.findByTestId('span') + expect(span.clientWidth).toEqual(88) + expect(isBetween(span.clientHeight, 37, 39)).toBe(true) + }) + it('does not resize text elements past their intrinsic size for nested groups', async () => { + const renderResult = await renderTestEditorWithCode( + formatTestProjectCode(` + import * as React from 'react' + import { Storyboard, Group } from 'utopia-api' + + export var storyboard = ( + + + +
+ + hello there + + +
+ + + ) + `), + 'await-first-dom-report', + ) + + const target = EP.fromString('storyboard/group') + + await renderResult.dispatch([selectComponents([target], false)], true) + + await resizeElement( + renderResult, + { x: -200, y: -200 }, + EdgePositionBottomRight, + emptyModifiers, + ) + + const span = await renderResult.renderedDOM.findByTestId('span') + expect(span.clientWidth).toEqual(80) + expect(span.clientHeight).toEqual(28) + }) + }) }) }) diff --git a/editor/src/components/canvas/commands/push-intended-bounds-and-update-groups-command.ts b/editor/src/components/canvas/commands/push-intended-bounds-and-update-groups-command.ts index c017705f5a33..b62f1602d26b 100644 --- a/editor/src/components/canvas/commands/push-intended-bounds-and-update-groups-command.ts +++ b/editor/src/components/canvas/commands/push-intended-bounds-and-update-groups-command.ts @@ -6,14 +6,13 @@ import type { ElementInstanceMetadataMap, JSXAttributes, } from '../../../core/shared/element-template' -import type { CanvasRectangle, LocalRectangle, Size } from '../../../core/shared/math-utils' +import type { CanvasRectangle, Size } from '../../../core/shared/math-utils' import { boundingRectangleArray, nullIfInfinity, rectangleDifference, - sizeFromRectangle, } from '../../../core/shared/math-utils' -import { forceNotNull, isNotNull, optionalMap } from '../../../core/shared/optional-utils' +import { forceNotNull, isNotNull } from '../../../core/shared/optional-utils' import type { ElementPath } from '../../../core/shared/project-file-types' import * as PP from '../../../core/shared/property-path' import type { @@ -226,6 +225,8 @@ function getUpdateResizedGroupChildrenCommands( let constraints: Array = editor.allElementProps[EP.toString(child)]?.['data-constraints'] ?? [] + const elementMetadata = MetadataUtils.findElementByElementPath(editor.jsxMetadata, child) + const jsxElement = MetadataUtils.getJSXElementFromMetadata(editor.jsxMetadata, child) if (jsxElement != null) { if (isHugFromStyleAttribute(jsxElement.props, 'width')) { @@ -245,14 +246,36 @@ function getUpdateResizedGroupChildrenCommands( constraints, ), ) + + function getAdjustedResizedLocalFramePoints(): FrameWithAllPoints { + if (elementMetadata != null && MetadataUtils.isTextFromMetadata(elementMetadata)) { + if (elementMetadata.specialSizeMeasurements.textBounds != null) { + return { + ...resizedLocalFramePoints, + width: Math.max( + resizedLocalFramePoints.width, + elementMetadata.specialSizeMeasurements.textBounds.width, + ), + height: Math.max( + resizedLocalFramePoints.height, + elementMetadata.specialSizeMeasurements.textBounds.height, + ), + } + } + } + return resizedLocalFramePoints + } + + const adjustedResizedLocalFramePoints = getAdjustedResizedLocalFramePoints() + updatedLocalFrames[EP.toString(child)] = { - allSixFramePoints: resizedLocalFramePoints, + allSixFramePoints: adjustedResizedLocalFramePoints, parentSize: updatedGroupBounds, target: child, } targets.push({ target: child, - frame: sixFramePointsToCanvasRectangle(resizedLocalFramePoints), + frame: sixFramePointsToCanvasRectangle(adjustedResizedLocalFramePoints), }) } } diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts index a6e44666d76d..5de2c9ced9aa 100644 --- a/editor/src/components/canvas/dom-walker.ts +++ b/editor/src/components/canvas/dom-walker.ts @@ -20,11 +20,7 @@ import { emptyAttributeMetadata, } from '../../core/shared/element-template' import type { ElementPath } from '../../core/shared/project-file-types' -import { - VoidElementsToFilter, - getCanvasRectangleFromElement, - getDOMAttribute, -} from '../../core/shared/dom-utils' +import { getCanvasRectangleFromElement, getDOMAttribute } from '../../core/shared/dom-utils' import { applicative4Either, defaultEither, @@ -42,17 +38,12 @@ import type { } from '../../core/shared/math-utils' import { canvasPoint, - boundingRectangle, localRectangle, roundToNearestHalf, - zeroCanvasRect, - zeroLocalRect, canvasRectangle, infinityCanvasRectangle, infinityLocalRectangle, - zeroRectIfNullOrInfinity, - scaleRect, - MaybeInfinityCanvasRectangle, + stretchRect, } from '../../core/shared/math-utils' import type { CSSNumber, CSSPosition } from '../inspector/common/css-utils' import { @@ -61,6 +52,7 @@ import { computedStyleKeys, parseDirection, parseFlexDirection, + parseCSSPx, } from '../inspector/common/css-utils' import { camelCaseToDashed } from '../../core/shared/string-utils' import type { UtopiaStoreAPI } from '../editor/store/store-hook' @@ -1003,6 +995,21 @@ function getSpecialMeasurements( const fontStyle = elementStyle.fontStyle const textDecorationLine = elementStyle.textDecorationLine + const textBounds = elementContainsOnlyText(element) + ? stretchRect(getCanvasRectangleFromElement(element, scale, 'only-content'), { + w: + maybeValueFromComputedStyle(elementStyle.paddingLeft) + + maybeValueFromComputedStyle(elementStyle.paddingRight) + + maybeValueFromComputedStyle(elementStyle.marginLeft) + + maybeValueFromComputedStyle(elementStyle.marginRight), + h: + maybeValueFromComputedStyle(elementStyle.paddingTop) + + maybeValueFromComputedStyle(elementStyle.paddingBottom) + + maybeValueFromComputedStyle(elementStyle.marginTop) + + maybeValueFromComputedStyle(elementStyle.marginBottom), + }) + : null + return specialSizeMeasurements( offset, coordinateSystemBounds, @@ -1045,9 +1052,30 @@ function getSpecialMeasurements( fontWeight, fontStyle, textDecorationLine, + textBounds, ) } +function elementContainsOnlyText(element: HTMLElement): boolean { + if (element.childNodes.length === 0) { + return false + } + for (const node of element.childNodes) { + const isForText = + node.nodeType === Node.TEXT_NODE || + (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'BR') + if (!isForText) { + return false + } + } + return true +} + +function maybeValueFromComputedStyle(property: string): number { + const parsed = parseCSSPx(property) + return isRight(parsed) ? parsed.value.value : 0 +} + function globalFrameForElement( element: HTMLElement, scale: number, diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts index ea4f87181489..40df95731f04 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts @@ -288,6 +288,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { fontWeight: '400', fontStyle: 'normal', textDecorationLine: 'none', + textBounds: null, } const newDifferentValue: SpecialSizeMeasurements = { @@ -373,6 +374,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { fontWeight: '400', fontStyle: 'normal', textDecorationLine: 'none', + textBounds: null, } it('same reference returns the same reference', () => { @@ -513,6 +515,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { fontWeight: '400', fontStyle: 'normal', textDecorationLine: 'none', + textBounds: null, }, computedStyle: { a: 'a', @@ -628,6 +631,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { fontWeight: '400', fontStyle: 'normal', textDecorationLine: 'none', + textBounds: null, }, computedStyle: { a: 'a', @@ -769,6 +773,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { fontWeight: '400', fontStyle: 'normal', textDecorationLine: 'none', + textBounds: null, }, computedStyle: { a: 'a', @@ -886,6 +891,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { fontWeight: '400', fontStyle: 'normal', textDecorationLine: 'none', + textBounds: null, }, computedStyle: { a: 'a', @@ -1003,6 +1009,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { fontWeight: '400', fontStyle: 'normal', textDecorationLine: 'none', + textBounds: null, }, computedStyle: { a: 'a', diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts index 44c44ab18e03..041b91d676b9 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -1584,6 +1584,10 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< const fontWeightEquals = oldSize.fontWeight === newSize.fontWeight const fontStyleEquals = oldSize.fontStyle === newSize.fontStyle const textDecorationLineEquals = oldSize.textDecorationLine === newSize.textDecorationLine + const textBoundsEqual = nullableDeepEquality(CanvasRectangleKeepDeepEquality)( + oldSize.textBounds, + newSize.textBounds, + ).areEqual const areEqual = offsetResult.areEqual && @@ -1624,7 +1628,8 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< fontSizeEquals && fontWeightEquals && fontStyleEquals && - textDecorationLineEquals + textDecorationLineEquals && + textBoundsEqual if (areEqual) { return keepDeepEqualityResult(oldSize, true) } else { @@ -1668,6 +1673,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< newSize.fontWeight, newSize.fontStyle, newSize.textDecorationLine, + newSize.textBounds, ) return keepDeepEqualityResult(sizeMeasurements, false) } diff --git a/editor/src/core/shared/dom-utils.ts b/editor/src/core/shared/dom-utils.ts index 77f1f4dad726..216f24653fb8 100644 --- a/editor/src/core/shared/dom-utils.ts +++ b/editor/src/core/shared/dom-utils.ts @@ -3,6 +3,7 @@ import type { CanvasRectangle } from './math-utils' import { boundingRectangle, canvasRectangle, roundToNearestHalf, scaleRect } from './math-utils' import { URL_HASH } from '../../common/env-vars' import { blockLevelHtmlElements, inlineHtmlElements } from '../../utils/html-elements' +import { assertNever } from './utils' export const intrinsicHTMLElementNames: Array = [ 'a', @@ -227,7 +228,7 @@ export function setDOMAttribute(element: Element, attributeName: string, value: export function getCanvasRectangleFromElement( element: HTMLElement, canvasScale: number, - withContent: 'without-content' | 'with-content', + withContent: 'without-content' | 'with-content' | 'only-content', ): CanvasRectangle { const scale = canvasScale < 1 ? 1 / canvasScale : 1 @@ -251,12 +252,29 @@ export function getCanvasRectangleFromElement( } const range = document.createRange() - range.selectNode(element) + switch (withContent) { + case 'only-content': + range.selectNodeContents(element) + break + case 'with-content': + range.selectNode(element) + break + default: + assertNever(withContent) + } const rangeBounding = // this is needed because jsdom can throw an error on the range.getBoundingClientRect() call, see https://github.com/jsdom/jsdom/issues/3002 typeof range.getBoundingClientRect === 'function' ? range.getBoundingClientRect() : boundingRect + const contentRect = domRectToScaledCanvasRectangle(rangeBounding) - return boundingRectangle(elementRect, domRectToScaledCanvasRectangle(rangeBounding)) + switch (withContent) { + case 'only-content': + return contentRect + case 'with-content': + return boundingRectangle(elementRect, contentRect) + default: + assertNever(withContent) + } } export function addStyleSheetToPage(url: string, shouldAppendHash: boolean = true): void { diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index 979380e0d570..74df8af1726d 100644 --- a/editor/src/core/shared/element-template.ts +++ b/editor/src/core/shared/element-template.ts @@ -2021,6 +2021,7 @@ export interface SpecialSizeMeasurements { coordinateSystemBounds: CanvasRectangle | null immediateParentBounds: CanvasRectangle | null globalFrameWithTextContent: MaybeInfinityCanvasRectangle | null + textBounds: CanvasRectangle | null immediateParentProvidesLayout: boolean closestOffsetParentPath: ElementPath usesParentBounds: boolean @@ -2098,6 +2099,7 @@ export function specialSizeMeasurements( fontWeight: string | null, fontStyle: string | null, textDecorationLine: string | null, + textBounds: CanvasRectangle | null, ): SpecialSizeMeasurements { return { offset, @@ -2105,6 +2107,7 @@ export function specialSizeMeasurements( immediateParentBounds, immediateParentProvidesLayout, globalFrameWithTextContent: globalFrameWithTextContent, + textBounds: textBounds, closestOffsetParentPath, usesParentBounds, parentLayoutSystem, @@ -2185,6 +2188,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements( null, null, null, + null, ) export const emptyComputedStyle: ComputedStyle = {} diff --git a/editor/src/core/shared/utils.ts b/editor/src/core/shared/utils.ts index 4cc417fdf85c..ccc824d7108a 100644 --- a/editor/src/core/shared/utils.ts +++ b/editor/src/core/shared/utils.ts @@ -13,7 +13,7 @@ export const CanvasContextMenuPortalTargetID = 'canvas-contextmenu-portal-target export const RETURN_TO_PREPEND = 'return ' // eslint-disable-next-line @typescript-eslint/no-empty-function -export const NO_OP = () => {} +export function NO_OP() {} export type ValueOf = T[keyof T]