From e7595c28e44c005cabc2b5dc7f8d247dae776afb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= Date: Wed, 18 Oct 2023 13:42:44 +0200 Subject: [PATCH] Set text element to fixed size without wrapping (#4390) * non-rounded frame * update snapshots * fix tests * update the name of nonRoundingFrame to nonRoundedGlobalFrame * remove duplication from global frame rounding * test * refactor chained ternary to switch * rename useComputedSizeRef to useNonRoundedComputedSizeRef --- .../ui-jsx-canvas-bugs.spec.tsx.snap | 2 + .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 256 ++++++++++++++++++ editor/src/components/canvas/dom-walker.ts | 73 ++++- .../ui-jsx-canvas-spy-wrapper.tsx | 2 + .../editor/actions/actions.spec.tsx | 2 + .../store-deep-equality-instances-3.spec.ts | 30 ++ .../store/store-deep-equality-instances.ts | 5 +- .../common/property-controls-hooks.spec.tsx | 3 + .../inspector/fill-hug-fixed-control.tsx | 4 +- .../inspector/inpector-selectors.tsx | 10 +- .../fixed-fill-hug.spec.browser2.tsx | 50 ++++ .../text-auto-sizing-control.tsx | 22 +- .../components/text-editor/text-handling.ts | 1 + .../model/element-metadata-utils.spec.tsx | 15 + .../src/core/model/element-metadata-utils.ts | 1 + editor/src/core/shared/dom-utils.ts | 24 +- editor/src/core/shared/element-template.ts | 3 + editor/src/utils/utils.test-utils.tsx | 3 + 18 files changed, 474 insertions(+), 32 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 24100591289f..705885536b66 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 @@ -155,6 +155,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -267,6 +268,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, 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 8318a0382859..c87d4ba0421c 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 @@ -196,6 +196,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -331,6 +332,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -636,6 +638,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -827,6 +830,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -961,6 +965,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -1095,6 +1100,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -1229,6 +1235,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -1468,6 +1475,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -1603,6 +1611,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -1811,6 +1820,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -2049,6 +2059,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -2184,6 +2195,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -2299,6 +2311,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -2555,6 +2568,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -2690,6 +2704,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -2956,6 +2971,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -3188,6 +3204,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -3360,6 +3377,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -3498,6 +3516,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -3670,6 +3689,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -3808,6 +3828,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -3980,6 +4001,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -4118,6 +4140,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -4425,6 +4448,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -4560,6 +4584,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -4950,6 +4975,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -5306,6 +5332,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -5587,6 +5614,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -5834,6 +5862,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -6014,6 +6043,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -6160,6 +6190,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -6340,6 +6371,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -6486,6 +6518,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -6666,6 +6699,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -6812,6 +6846,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -7093,6 +7128,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -7340,6 +7376,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -7520,6 +7557,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -7666,6 +7704,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -7846,6 +7885,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -7992,6 +8032,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -8172,6 +8213,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -8318,6 +8360,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -8599,6 +8642,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -8846,6 +8890,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -9026,6 +9071,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -9172,6 +9218,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -9352,6 +9399,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -9498,6 +9546,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -9678,6 +9727,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -9824,6 +9874,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -10074,6 +10125,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -10209,6 +10261,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -10385,6 +10438,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -10501,6 +10555,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -10617,6 +10672,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -10855,6 +10911,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -10990,6 +11047,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -11183,6 +11241,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -11439,6 +11498,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -11574,6 +11634,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -11851,6 +11912,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -12093,6 +12155,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -12275,6 +12338,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -12457,6 +12521,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -12639,6 +12704,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -12895,6 +12961,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -13030,6 +13097,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -13307,6 +13375,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -13549,6 +13618,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -13731,6 +13801,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -13913,6 +13984,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -14095,6 +14167,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -14345,6 +14418,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -14480,6 +14554,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -14656,6 +14731,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -14772,6 +14848,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -14888,6 +14965,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -15138,6 +15216,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -15273,6 +15352,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -15485,6 +15565,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -15663,6 +15744,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -15780,6 +15862,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -15897,6 +15980,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -16163,6 +16247,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -16313,6 +16398,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -16656,6 +16742,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -16861,6 +16948,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -17126,6 +17214,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -17276,6 +17365,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -17619,6 +17709,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -17824,6 +17915,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -18090,6 +18182,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -18240,6 +18333,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -18634,6 +18728,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -18890,6 +18985,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -19156,6 +19252,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -19306,6 +19403,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -19700,6 +19798,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -19956,6 +20055,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -20193,6 +20293,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -20328,6 +20429,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -20443,6 +20545,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -20803,6 +20906,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -20938,6 +21042,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -22169,6 +22274,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -23052,6 +23158,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -23901,6 +24008,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -24276,6 +24384,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -24485,6 +24594,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -24860,6 +24970,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -25069,6 +25180,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -25444,6 +25556,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -25653,6 +25766,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -26066,6 +26180,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -26317,6 +26432,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -26730,6 +26846,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -26981,6 +27098,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -27394,6 +27512,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -27645,6 +27764,7 @@ export var storyboard = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -27905,6 +28025,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -28040,6 +28161,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -28250,6 +28372,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -28383,6 +28506,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -28516,6 +28640,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -28755,6 +28880,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -28890,6 +29016,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -29074,6 +29201,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -29312,6 +29440,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -29447,6 +29576,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -29702,6 +29832,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -29986,6 +30117,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -30121,6 +30253,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -30364,6 +30497,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -30556,6 +30690,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -30697,6 +30832,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -30963,6 +31099,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -31113,6 +31250,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -31391,6 +31529,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -31533,6 +31672,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -31952,6 +32092,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -32102,6 +32243,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -32381,6 +32523,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -32523,6 +32666,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -32873,6 +33017,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -33007,6 +33152,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -33775,6 +33921,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -33892,6 +34039,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34009,6 +34157,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34126,6 +34275,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34243,6 +34393,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34360,6 +34511,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34477,6 +34629,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34671,6 +34824,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34826,6 +34980,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -34943,6 +35098,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35060,6 +35216,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35177,6 +35334,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35294,6 +35452,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35411,6 +35570,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35530,6 +35690,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35647,6 +35808,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35764,6 +35926,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35881,6 +36044,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -35998,6 +36162,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -36115,6 +36280,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -36234,6 +36400,7 @@ export var App = (props) => { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -36490,6 +36657,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -36625,6 +36793,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -36902,6 +37071,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -37144,6 +37314,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -37326,6 +37497,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -37508,6 +37680,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -37690,6 +37863,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -37946,6 +38120,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -38081,6 +38256,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -38359,6 +38535,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -38602,6 +38779,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -38785,6 +38963,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -38968,6 +39147,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -39151,6 +39331,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -39407,6 +39588,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -39542,6 +39724,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -39826,6 +40009,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -40075,6 +40259,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -40257,6 +40442,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -40439,6 +40625,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -40621,6 +40808,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -40883,6 +41071,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -41033,6 +41222,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -41271,6 +41461,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -41413,6 +41604,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -41653,6 +41845,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -41765,6 +41958,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -41925,6 +42119,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -42047,6 +42242,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -42169,6 +42365,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -42399,6 +42596,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -42511,6 +42709,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -42795,6 +42994,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -43021,6 +43221,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -43236,6 +43437,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -43348,6 +43550,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -43586,6 +43789,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -43723,6 +43927,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -43938,6 +44143,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -44050,6 +44256,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -44165,6 +44372,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -44388,6 +44596,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -44500,6 +44709,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -44693,6 +44903,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -44835,6 +45046,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -45052,6 +45264,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -45164,6 +45377,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -45448,6 +45662,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -45601,6 +45816,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -45754,6 +45970,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -45970,6 +46187,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -46082,6 +46300,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -46214,6 +46433,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -46475,6 +46695,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -46610,6 +46831,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -47042,6 +47264,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -47164,6 +47387,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -47400,6 +47624,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -47634,6 +47859,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -47792,6 +48018,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -47948,6 +48175,7 @@ export var storyboard = ( "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -48191,6 +48419,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -48326,6 +48555,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -48490,6 +48720,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -48623,6 +48854,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -48864,6 +49096,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -48999,6 +49232,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -49114,6 +49348,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -49385,6 +49620,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -49520,6 +49756,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -49826,6 +50063,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -50097,6 +50335,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -50303,6 +50542,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -50479,6 +50719,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -50621,6 +50862,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -50827,6 +51069,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -51003,6 +51246,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -51145,6 +51389,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -51351,6 +51596,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -51527,6 +51773,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -51669,6 +51916,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -51909,6 +52157,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -52044,6 +52293,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -52159,6 +52409,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -52409,6 +52660,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -52544,6 +52796,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -52727,6 +52980,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -52880,6 +53134,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, @@ -53003,6 +53258,7 @@ Object { "isEmotionOrStyledComponent": false, "label": null, "localFrame": null, + "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { "alignItems": null, "borderRadius": null, diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts index 5de2c9ced9aa..4b29d5a48bfb 100644 --- a/editor/src/components/canvas/dom-walker.ts +++ b/editor/src/components/canvas/dom-walker.ts @@ -466,7 +466,12 @@ export function runDomWalker({ // getCanvasRectangleFromElement is costly, so I made it lazy. we only need the value inside globalFrameForElement const containerRect = lazyValue(() => { - return getCanvasRectangleFromElement(canvasRootContainer, scale, 'without-content') + return getCanvasRectangleFromElement( + canvasRootContainer, + scale, + 'without-content', + 'nearest-half', + ) }) const validPaths: Array | null = optionalMap( @@ -643,12 +648,26 @@ function collectMetadataForElement( tagName: string globalFrame: CanvasRectangle localFrame: LocalRectangle + nonRoundedGlobalFrame: CanvasRectangle specialSizeMeasurementsObject: SpecialSizeMeasurements textContentsMaybe: string | null } { const tagName: string = element.tagName.toLowerCase() - const globalFrame = globalFrameForElement(element, scale, containerRectLazy, 'without-content') + const globalFrame = globalFrameForElement( + element, + scale, + containerRectLazy, + 'without-content', + 'nearest-half', + ) const localFrame = localRectangle(Utils.offsetRect(globalFrame, Utils.negate(parentPoint))) + const nonRoundedGlobalFrame = globalFrameForElement( + element, + scale, + containerRectLazy, + 'without-content', + 'no-rounding', + ) const textContentsMaybe = element.textContent @@ -663,6 +682,7 @@ function collectMetadataForElement( tagName: tagName, globalFrame: globalFrame, localFrame: localFrame, + nonRoundedGlobalFrame: nonRoundedGlobalFrame, specialSizeMeasurementsObject: specialSizeMeasurementsObject, textContentsMaybe: textContentsMaybe, } @@ -747,14 +767,20 @@ function collectAndCreateMetadataForElement( pathsForElement: ElementPath[], globalProps: DomWalkerInternalGlobalProps, ) { - const { tagName, globalFrame, localFrame, specialSizeMeasurementsObject, textContentsMaybe } = - collectMetadataForElement( - element, - parentPoint, - closestOffsetParentPath, - globalProps.scale, - globalProps.containerRectLazy, - ) + const { + tagName, + globalFrame, + localFrame, + nonRoundedGlobalFrame, + specialSizeMeasurementsObject, + textContentsMaybe, + } = collectMetadataForElement( + element, + parentPoint, + closestOffsetParentPath, + globalProps.scale, + globalProps.containerRectLazy, + ) const { computedStyle, attributeMetadata } = getComputedStyle( element, @@ -773,6 +799,7 @@ function collectAndCreateMetadataForElement( left(tagName), globalFrame, localFrame, + nonRoundedGlobalFrame, false, false, specialSizeMeasurementsObject, @@ -855,12 +882,24 @@ function getSpecialMeasurements( const coordinateSystemBounds = element.offsetParent instanceof HTMLElement - ? globalFrameForElement(element.offsetParent, scale, containerRectLazy, 'without-content') + ? globalFrameForElement( + element.offsetParent, + scale, + containerRectLazy, + 'without-content', + 'nearest-half', + ) : null const immediateParentBounds = element.parentElement instanceof HTMLElement - ? globalFrameForElement(element.parentElement, scale, containerRectLazy, 'without-content') + ? globalFrameForElement( + element.parentElement, + scale, + containerRectLazy, + 'without-content', + 'nearest-half', + ) : null const parentElementStyle = @@ -944,6 +983,7 @@ function getSpecialMeasurements( scale, containerRectLazy, 'without-content', + 'nearest-half', ) const globalFrameWithTextContent = globalFrameForElement( @@ -951,6 +991,7 @@ function getSpecialMeasurements( scale, containerRectLazy, 'with-content', + 'nearest-half', ) const globalContentBoxForChildren = canvasRectangle({ @@ -996,7 +1037,7 @@ function getSpecialMeasurements( const textDecorationLine = elementStyle.textDecorationLine const textBounds = elementContainsOnlyText(element) - ? stretchRect(getCanvasRectangleFromElement(element, scale, 'only-content'), { + ? stretchRect(getCanvasRectangleFromElement(element, scale, 'only-content', 'nearest-half'), { w: maybeValueFromComputedStyle(elementStyle.paddingLeft) + maybeValueFromComputedStyle(elementStyle.paddingRight) + @@ -1081,8 +1122,9 @@ function globalFrameForElement( scale: number, containerRectLazy: () => CanvasRectangle, withContent: 'without-content' | 'with-content', + rounding: 'nearest-half' | 'no-rounding', ) { - const elementRect = getCanvasRectangleFromElement(element, scale, withContent) + const elementRect = getCanvasRectangleFromElement(element, scale, withContent, rounding) return Utils.offsetRect(elementRect, Utils.negate(containerRectLazy())) } @@ -1127,6 +1169,7 @@ function walkCanvasRootFragment( left('Storyboard'), infinityCanvasRectangle, infinityLocalRectangle, + infinityCanvasRectangle, false, false, emptySpecialSizeMeasurements, @@ -1212,6 +1255,7 @@ function walkSceneInner( globalProps.scale, globalProps.containerRectLazy, 'without-content', + 'nearest-half', ) let childPaths: Array = [] @@ -1290,6 +1334,7 @@ function walkElements( globalProps.scale, globalProps.containerRectLazy, 'without-content', + 'nearest-half', ) // Check this is a path we're interested in, otherwise skip straight to the children diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.tsx index 704a4d528bec..3cff0a04b49a 100644 --- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.tsx +++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-spy-wrapper.tsx @@ -71,6 +71,7 @@ export function addFakeSpyEntry( elementPath: elementPath, globalFrame: null, localFrame: null, + nonRoundedGlobalFrame: null, componentInstance: false, isEmotionOrStyledComponent: false, specialSizeMeasurements: emptySpecialSizeMeasurements, @@ -128,6 +129,7 @@ export function buildSpyWrappedElement( elementPath: elementPath, globalFrame: null, localFrame: null, + nonRoundedGlobalFrame: null, componentInstance: false, isEmotionOrStyledComponent: isEmotionComponent || isStyledComponent, specialSizeMeasurements: emptySpecialSizeMeasurements, // This is not the nicest, but the results from the DOM walker will override this anyways diff --git a/editor/src/components/editor/actions/actions.spec.tsx b/editor/src/components/editor/actions/actions.spec.tsx index 957033b30a5a..ccfd3a34cfad 100644 --- a/editor/src/components/editor/actions/actions.spec.tsx +++ b/editor/src/components/editor/actions/actions.spec.tsx @@ -879,6 +879,7 @@ describe('SET_FOCUSED_ELEMENT', () => { right(underlyingElement), zeroRectangle as CanvasRectangle, zeroRectangle as LocalRectangle, + zeroRectangle as CanvasRectangle, false, false, emptySpecialSizeMeasurements, @@ -915,6 +916,7 @@ describe('SET_FOCUSED_ELEMENT', () => { right(underlyingElement), zeroRectangle as CanvasRectangle, zeroRectangle as LocalRectangle, + zeroRectangle as CanvasRectangle, false, false, emptySpecialSizeMeasurements, 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 40df95731f04..0eb18fd3bf7c 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 @@ -430,6 +430,12 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { width: 100, height: 200, }), + nonRoundedGlobalFrame: canvasRectangle({ + x: 10, + y: 20, + width: 100, + height: 200, + }), componentInstance: true, isEmotionOrStyledComponent: false, specialSizeMeasurements: { @@ -546,6 +552,12 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { width: 100, height: 200, }), + nonRoundedGlobalFrame: canvasRectangle({ + x: 10, + y: 20, + width: 100, + height: 200, + }), componentInstance: true, isEmotionOrStyledComponent: false, specialSizeMeasurements: { @@ -688,6 +700,12 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { width: 100, height: 200, }), + nonRoundedGlobalFrame: canvasRectangle({ + x: 10, + y: 20, + width: 100, + height: 200, + }), componentInstance: true, isEmotionOrStyledComponent: false, specialSizeMeasurements: { @@ -806,6 +824,12 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { width: 100, height: 200, }), + nonRoundedGlobalFrame: canvasRectangle({ + x: 10, + y: 20, + width: 100, + height: 200, + }), componentInstance: true, isEmotionOrStyledComponent: false, specialSizeMeasurements: { @@ -924,6 +948,12 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { width: 100, height: 200, }), + nonRoundedGlobalFrame: canvasRectangle({ + x: 10, + y: 20, + width: 100, + height: 200, + }), componentInstance: true, isEmotionOrStyledComponent: false, specialSizeMeasurements: { 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 ad17a3136d90..d70cc09e934f 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -230,6 +230,7 @@ import { combine9EqualityCalls, unionDeepEquality, combine13EqualityCalls, + combine14EqualityCalls, } from '../../../utils/deep-equality' import { ElementPathArrayKeepDeepEquality, @@ -1743,7 +1744,7 @@ const ConditionValueKeepDeepEquality: KeepDeepEqualityCall = uni ) export const ElementInstanceMetadataKeepDeepEquality: KeepDeepEqualityCall = - combine13EqualityCalls( + combine14EqualityCalls( (metadata) => metadata.elementPath, ElementPathKeepDeepEquality, (metadata) => metadata.element, @@ -1752,6 +1753,8 @@ export const ElementInstanceMetadataKeepDeepEquality: KeepDeepEqualityCall metadata.localFrame, nullableDeepEquality(MaybeInfinityLocalRectangleKeepDeepEquality), + (metadata) => metadata.nonRoundedGlobalFrame, + nullableDeepEquality(MaybeInfinityCanvasRectangleKeepDeepEquality), (metadata) => metadata.componentInstance, createCallWithTripleEquals(), (metadata) => metadata.isEmotionOrStyledComponent, diff --git a/editor/src/components/inspector/common/property-controls-hooks.spec.tsx b/editor/src/components/inspector/common/property-controls-hooks.spec.tsx index 2d4c377a181f..0d3e5021305d 100644 --- a/editor/src/components/inspector/common/property-controls-hooks.spec.tsx +++ b/editor/src/components/inspector/common/property-controls-hooks.spec.tsx @@ -110,6 +110,7 @@ function callPropertyControlsHook( null as any, null, null, + null, true, false, null as any, @@ -131,6 +132,7 @@ function callPropertyControlsHook( null as any, null, null, + null, true, false, null as any, @@ -151,6 +153,7 @@ function callPropertyControlsHook( null as any, null, null, + null, true, false, null as any, diff --git a/editor/src/components/inspector/fill-hug-fixed-control.tsx b/editor/src/components/inspector/fill-hug-fixed-control.tsx index 51cbfc90d758..905606912bd1 100644 --- a/editor/src/components/inspector/fill-hug-fixed-control.tsx +++ b/editor/src/components/inspector/fill-hug-fixed-control.tsx @@ -29,7 +29,7 @@ import { metadataSelector, pathTreesSelector, selectedViewsSelector, - useComputedSizeRef, + useNonRoundedComputedSizeRef, } from './inpector-selectors' import type { Axis, FixedHugFill, FixedHugFillMode } from './inspector-common' import { @@ -439,7 +439,7 @@ function useOnSubmitFixedFillHugType(dimension: 'width' | 'height') { const elementPathTreeRef = useRefEditorState((store) => store.editor.elementPathTree) const allElementPropsRef = useRefEditorState((store) => store.editor.allElementProps) - const currentValueRef = useComputedSizeRef(dimension) + const currentValueRef = useNonRoundedComputedSizeRef(dimension) const fillsOtherAxisRef = useRefEditorState( (store) => diff --git a/editor/src/components/inspector/inpector-selectors.tsx b/editor/src/components/inspector/inpector-selectors.tsx index e6e9b6af95fa..2799fd45ce73 100644 --- a/editor/src/components/inspector/inpector-selectors.tsx +++ b/editor/src/components/inspector/inpector-selectors.tsx @@ -16,6 +16,7 @@ import { detectPackedSpacedSetting, numberOfFlexContainers, } from './inspector-common' +import { nullIfInfinity, zeroRectangle } from '../../core/shared/math-utils' export const metadataSelector = (store: MetadataSubstate): ElementInstanceMetadataMap => store.editor.jsxMetadata @@ -56,7 +57,9 @@ export const numberOfFlexContainersSelector = createSelector( numberOfFlexContainers, ) -export function useComputedSizeRef(prop: 'width' | 'height'): { readonly current: number | null } { +export function useNonRoundedComputedSizeRef(prop: 'width' | 'height'): { + readonly current: number | null +} { return useRefEditorState((store) => { const metadata = metadataSelector(store) const elementPath = selectedViewsSelector(store)[0] @@ -64,7 +67,10 @@ export function useComputedSizeRef(prop: 'width' | 'height'): { readonly current return null } - const localFrame = MetadataUtils.getFrameOrZeroRect(elementPath, metadata) + const localFrame = + nullIfInfinity( + MetadataUtils.findElementByElementPath(metadata, elementPath)?.nonRoundedGlobalFrame, + ) ?? zeroRectangle return localFrame[prop] }) } diff --git a/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx b/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx index ccde9c2b04b5..0b98fc238391 100644 --- a/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx +++ b/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx @@ -763,6 +763,56 @@ describe('Fixed / Fill / Hug control', () => { `), ) }) + it('rounds up on text elements', async () => { + const editor = await renderTestEditorWithCode( + `import * as React from 'react' + import { Storyboard } from 'utopia-api' + import { App } from '/src/app.js' + + export var storyboard = ( + +
+ span +
+ + )`, + 'await-first-dom-report', + ) + const span = await select(editor, 'child') + + const control = (await editor.renderedDOM.findAllByText(HugContentsLabel))[0] + + await mouseClickAtPoint(control, { x: 5, y: 5 }) + + const button = (await editor.renderedDOM.findAllByText(FixedLabel))[0] + await expectSingleUndo2Saves(editor, async () => { + await mouseClickAtPoint(button, { x: 5, y: 5 }) + }) + + expect(span.style.width).toEqual('30px') + expect(span.style.height).toEqual(MaxContent) + }) }) describe('groups', () => { diff --git a/editor/src/components/inspector/sections/style-section/text-subsection/text-auto-sizing-control.tsx b/editor/src/components/inspector/sections/style-section/text-subsection/text-auto-sizing-control.tsx index 5542f0f40b70..9a3efed9a057 100644 --- a/editor/src/components/inspector/sections/style-section/text-subsection/text-auto-sizing-control.tsx +++ b/editor/src/components/inspector/sections/style-section/text-subsection/text-auto-sizing-control.tsx @@ -13,7 +13,7 @@ import { OptionChainControl } from '../../../controls/option-chain-control' import { metadataSelector, selectedViewsSelector, - useComputedSizeRef, + useNonRoundedComputedSizeRef, } from '../../../inpector-selectors' import type { FixedHugFill } from '../../../inspector-common' import { detectFillHugFixedStateMultiselect, isFixedHugFillEqual } from '../../../inspector-common' @@ -22,6 +22,7 @@ import { setPropHugStrategies, } from '../../../inspector-strategies/inspector-strategies' import { commandsForFirstApplicableStrategy } from '../../../inspector-strategies/inspector-strategy' +import { fixedSizeDimensionHandlingText } from '../../../../text-editor/text-handling' export const TextAutoSizingTestId = 'textAutoSizing' @@ -108,23 +109,28 @@ export const TextAutoSizingControl = React.memo(() => { [controlStatusAndValueType], ) - const widthComputedValue = useComputedSizeRef('width') - const heightComputedValue = useComputedSizeRef('height') + const widthComputedValue = useNonRoundedComputedSizeRef('width') + const heightComputedValue = useNonRoundedComputedSizeRef('height') const onSubmitValue = React.useCallback( (newValue: any) => { + if (selectedViewsRef.current.length === 0) { + return + } if (newValue === 'fixed') { + const width = fixedSizeDimensionHandlingText( + metadataRef.current, + elementPathTreeRef.current, + selectedViewsRef.current[0], + widthComputedValue.current ?? 0, + ) const widthCommands = commandsForFirstApplicableStrategy( metadataRef.current, selectedViewsRef.current, elementPathTreeRef.current, allElementPropsRef.current, - setPropFixedSizeStrategies( - 'always', - 'horizontal', - cssNumber(widthComputedValue.current ?? 0, null), - ), + setPropFixedSizeStrategies('always', 'horizontal', cssNumber(width, null)), ) ?? [] const heightCommands = commandsForFirstApplicableStrategy( diff --git a/editor/src/components/text-editor/text-handling.ts b/editor/src/components/text-editor/text-handling.ts index 6fd5201fa15a..96a056edd7e0 100644 --- a/editor/src/components/text-editor/text-handling.ts +++ b/editor/src/components/text-editor/text-handling.ts @@ -25,6 +25,7 @@ import fastDeepEquals from 'fast-deep-equal' import { getUtopiaID } from '../../core/shared/uid-utils' import type { ElementPathTrees } from '../../core/shared/element-path-tree' import { MetadataUtils } from '../../core/model/element-metadata-utils' +import { nullIfInfinity, zeroCanvasRect } from '../../core/shared/math-utils' // Validate this by making the type `Set`. export const stylePropertiesEligibleForMerge: Set = new Set([ diff --git a/editor/src/core/model/element-metadata-utils.spec.tsx b/editor/src/core/model/element-metadata-utils.spec.tsx index 4fa40c9a7b76..62a95a9d5386 100644 --- a/editor/src/core/model/element-metadata-utils.spec.tsx +++ b/editor/src/core/model/element-metadata-utils.spec.tsx @@ -57,6 +57,7 @@ const TestScenePath = 'scene-aaa' const testComponentMetadataChild1: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([ [BakedInStoryboardUID, TestScenePath], ['View', 'View0'], @@ -75,6 +76,7 @@ const testComponentMetadataChild1: ElementInstanceMetadata = { const testComponentMetadataChild2: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([ [BakedInStoryboardUID, TestScenePath], ['View', 'View1'], @@ -94,6 +96,7 @@ const testComponentMetadataChild2: ElementInstanceMetadata = { const testComponentMetadataGrandchild: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([ [BakedInStoryboardUID, TestScenePath], ['View', 'View2', 'View0'], @@ -117,6 +120,7 @@ const testComponentPropsGrandchild: ElementProps = { const testComponentMetadataChild3: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([ [BakedInStoryboardUID, TestScenePath], ['View', 'View2'], @@ -136,6 +140,7 @@ const testComponentMetadataChild3: ElementInstanceMetadata = { const testComponentRoot1: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([[BakedInStoryboardUID, TestScenePath], ['View']]), element: right(jsxTestElement('View', [], [])), componentInstance: false, @@ -152,6 +157,7 @@ const testComponentRoot1: ElementInstanceMetadata = { const testComponentSceneChildElementRootChild: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([ [BakedInStoryboardUID, TestScenePath, 'Scene-Child'], ['Scene-Child-Root', 'Child'], @@ -171,6 +177,7 @@ const testComponentSceneChildElementRootChild: ElementInstanceMetadata = { const testComponentSceneChildElementRoot: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([ [BakedInStoryboardUID, TestScenePath, 'Scene-Child'], ['Scene-Child-Root'], @@ -190,6 +197,7 @@ const testComponentSceneChildElementRoot: ElementInstanceMetadata = { const testComponentSceneChildElement: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([[BakedInStoryboardUID, TestScenePath, 'Scene-Child']]), element: right(jsxTestElement('View', [], [])), componentInstance: false, @@ -206,6 +214,7 @@ const testComponentSceneChildElement: ElementInstanceMetadata = { const testComponentSceneElement: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([[BakedInStoryboardUID, TestScenePath]]), element: right(jsxTestElement('Scene', [], [])), componentInstance: false, @@ -229,6 +238,7 @@ const testComponentSceneElementProps: ElementProps = { const testStoryboardGrandChildElement: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([[BakedInStoryboardUID, 'Child', 'GrandChild']]), element: right(jsxTestElement('View', [], [])), componentInstance: false, @@ -245,6 +255,7 @@ const testStoryboardGrandChildElement: ElementInstanceMetadata = { const testStoryboardChildElement: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([[BakedInStoryboardUID, 'Child']]), element: right(jsxTestElement('View', [], [])), componentInstance: false, @@ -261,6 +272,7 @@ const testStoryboardChildElement: ElementInstanceMetadata = { const testStoryboardElement: ElementInstanceMetadata = { globalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), localFrame: localRectangle({ x: 0, y: 0, width: 0, height: 0 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: EP.elementPath([[BakedInStoryboardUID]]), element: right(jsxTestElement('Storyboard', [], [])), componentInstance: true, @@ -351,6 +363,7 @@ function dummyInstanceDataForElementType( return { globalFrame: canvasRectangle({ x: 0, y: 0, width: 100, height: 100 }), localFrame: localRectangle({ x: 0, y: 0, width: 100, height: 100 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: elementPath, element: right(jsxTestElement(elementName, [], children)), componentInstance: false, @@ -878,6 +891,7 @@ describe('getElementLabel', () => { right(spanElement), zeroRectangle as CanvasRectangle, zeroRectangle as LocalRectangle, + zeroRectangle as CanvasRectangle, false, false, emptySpecialSizeMeasurements, @@ -902,6 +916,7 @@ describe('getElementLabel', () => { right(divElement), zeroRectangle as CanvasRectangle, zeroRectangle as LocalRectangle, + zeroRectangle as CanvasRectangle, false, false, emptySpecialSizeMeasurements, diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts index 356d56686478..7defd41dd31c 100644 --- a/editor/src/core/model/element-metadata-utils.ts +++ b/editor/src/core/model/element-metadata-utils.ts @@ -2721,6 +2721,7 @@ export function createFakeMetadataForElement( right(element), frame, localFrame, + frame, false, false, specialSizeMeasurements, diff --git a/editor/src/core/shared/dom-utils.ts b/editor/src/core/shared/dom-utils.ts index 216f24653fb8..5079fb665dea 100644 --- a/editor/src/core/shared/dom-utils.ts +++ b/editor/src/core/shared/dom-utils.ts @@ -3,7 +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' +import { assertNever, identity } from './utils' export const intrinsicHTMLElementNames: Array = [ 'a', @@ -225,21 +225,35 @@ export function setDOMAttribute(element: Element, attributeName: string, value: element.attributes.setNamedItemNS(attr) } +function getRoundingFn(rounding: 'nearest-half' | 'no-rounding') { + switch (rounding) { + case 'nearest-half': + return roundToNearestHalf + case 'no-rounding': + return identity + default: + assertNever(rounding) + } +} + export function getCanvasRectangleFromElement( element: HTMLElement, canvasScale: number, withContent: 'without-content' | 'with-content' | 'only-content', + rounding: 'nearest-half' | 'no-rounding', ): CanvasRectangle { const scale = canvasScale < 1 ? 1 / canvasScale : 1 + const roundingFn = getRoundingFn(rounding) + const domRectToScaledCanvasRectangle = (rect: DOMRect) => { // canvas container uses scale for <1 zoom level, it should not affect the frame of the element. return scaleRect( canvasRectangle({ - x: roundToNearestHalf(rect.left), - y: roundToNearestHalf(rect.top), - width: roundToNearestHalf(rect.width), - height: roundToNearestHalf(rect.height), + x: roundingFn(rect.left), + y: roundingFn(rect.top), + width: roundingFn(rect.width), + height: roundingFn(rect.height), }), scale, ) diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index 0547ddebe277..8146bc246bfe 100644 --- a/editor/src/core/shared/element-template.ts +++ b/editor/src/core/shared/element-template.ts @@ -1969,6 +1969,7 @@ export interface ElementInstanceMetadata { element: Either globalFrame: MaybeInfinityCanvasRectangle | null localFrame: MaybeInfinityLocalRectangle | null + nonRoundedGlobalFrame: MaybeInfinityCanvasRectangle | null componentInstance: boolean isEmotionOrStyledComponent: boolean specialSizeMeasurements: SpecialSizeMeasurements @@ -1985,6 +1986,7 @@ export function elementInstanceMetadata( element: Either, globalFrame: MaybeInfinityCanvasRectangle | null, localFrame: MaybeInfinityLocalRectangle | null, + nonRoundedGlobalFrame: MaybeInfinityCanvasRectangle | null, componentInstance: boolean, isEmotionOrStyledComponent: boolean, sizeMeasurements: SpecialSizeMeasurements, @@ -2000,6 +2002,7 @@ export function elementInstanceMetadata( element: element, globalFrame: globalFrame, localFrame: localFrame, + nonRoundedGlobalFrame: nonRoundedGlobalFrame, componentInstance: componentInstance, isEmotionOrStyledComponent: isEmotionOrStyledComponent, specialSizeMeasurements: sizeMeasurements, diff --git a/editor/src/utils/utils.test-utils.tsx b/editor/src/utils/utils.test-utils.tsx index f53652096c26..6b247e5face2 100644 --- a/editor/src/utils/utils.test-utils.tsx +++ b/editor/src/utils/utils.test-utils.tsx @@ -347,6 +347,7 @@ function createFakeMetadataForJSXElement( element: right(element), globalFrame: canvasRectangle(frame), localFrame: localRectangle(frame), + nonRoundedGlobalFrame: canvasRectangle(frame), componentInstance: false, isEmotionOrStyledComponent: false, specialSizeMeasurements: emptySpecialSizeMeasurements, @@ -381,6 +382,7 @@ function createFakeMetadataForStoryboard(elementPath: ElementPath): ElementInsta return { globalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), localFrame: localRectangle({ x: 0, y: 0, width: 0, height: 0 }), + nonRoundedGlobalFrame: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }), elementPath: elementPath, element: right(jsxTestElement('Storyboard', [], [])), componentInstance: true, @@ -567,6 +569,7 @@ export function boundingClientRectToCanvasRectangle( canvasRootContainer, canvasScale, 'without-content', + 'nearest-half', ) const canvasBounds = offsetRect(canvasRectangle(elementBounds), negate(canvasRootRectangle))