From b142af62f0db122b14b4ce34a2be775fa256de47 Mon Sep 17 00:00:00 2001 From: Liad Yosef Date: Wed, 11 Sep 2024 17:55:05 +0300 Subject: [PATCH] fix(grid): move controls when changing content placement (#6350) **Problem:** Today the grid controls placeholder don't move when changing `content` placement ![10-45-psczv-wnkpg](https://github.com/user-attachments/assets/ea5d2623-0705-4337-8aa2-6d0139addec8) **Fix:** Copy `justifyContent` and `alignContent` props to the grid placeholder as well. **Note:** We should discuss how we can avoid these kinds of issues in the future - where there might be a future grid style prop that will not be copied to the grid control **Manual Tests:** I hereby swear that: - [X] I opened a hydrogen project and it loaded - [X] I could navigate to various routes in Preview mode --- .../ui-jsx-canvas-bugs.spec.tsx.snap | 2 + .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 257 ++++++++++++++++++ .../canvas/controls/grid-controls.tsx | 6 + editor/src/components/canvas/dom-walker.ts | 2 + .../store-deep-equality-instances-3.spec.ts | 7 + .../store/store-deep-equality-instances.ts | 1 + editor/src/core/shared/element-template.ts | 4 + 7 files changed, 279 insertions(+) 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 ea9b9c982796..8e7cd5aa4f45 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 @@ -158,6 +158,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -304,6 +305,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, 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 301e9913f6e9..e57bf2a7375e 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 @@ -199,6 +199,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -368,6 +369,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -832,6 +834,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -1145,6 +1148,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -1313,6 +1317,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -1481,6 +1486,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -1649,6 +1655,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -1922,6 +1929,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -2091,6 +2099,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -2366,6 +2375,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -2638,6 +2648,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -2807,6 +2818,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -2956,6 +2968,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -3246,6 +3259,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -3415,6 +3429,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -3791,6 +3806,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -4133,6 +4149,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -4330,6 +4347,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -4493,6 +4511,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -4690,6 +4709,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -4853,6 +4873,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -5050,6 +5071,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -5213,6 +5235,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -5554,6 +5577,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -5723,6 +5747,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -6320,6 +6345,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -6883,6 +6909,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -7286,6 +7313,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -7655,6 +7683,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -7872,6 +7901,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -8055,6 +8085,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -8272,6 +8303,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -8455,6 +8487,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -8672,6 +8705,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -8855,6 +8889,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -9258,6 +9293,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -9627,6 +9663,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -9844,6 +9881,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -10027,6 +10065,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -10244,6 +10283,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -10427,6 +10467,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -10644,6 +10685,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -10827,6 +10869,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -11230,6 +11273,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -11599,6 +11643,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -11816,6 +11861,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -11999,6 +12045,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -12216,6 +12263,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -12399,6 +12447,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -12616,6 +12665,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -12799,6 +12849,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -13083,6 +13134,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -13252,6 +13304,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -13462,6 +13515,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -13612,6 +13666,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -13762,6 +13817,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -14034,6 +14090,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -14203,6 +14260,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -14465,6 +14523,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -14755,6 +14814,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -14924,6 +14984,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -15317,6 +15378,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -15675,6 +15737,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -15892,6 +15955,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -16109,6 +16173,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -16326,6 +16391,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -16616,6 +16682,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -16785,6 +16852,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -17178,6 +17246,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -17536,6 +17605,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -17753,6 +17823,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -17970,6 +18041,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -18187,6 +18259,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -18471,6 +18544,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -18640,6 +18714,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -18850,6 +18925,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -19000,6 +19076,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -19150,6 +19227,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -19434,6 +19512,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -19603,6 +19682,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -19918,6 +19998,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -20199,6 +20280,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -20350,6 +20432,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -20501,6 +20584,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -20801,6 +20885,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -20985,6 +21070,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -21448,6 +21534,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -21730,6 +21817,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -22029,6 +22117,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -22213,6 +22302,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -22676,6 +22766,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -22958,6 +23049,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -23258,6 +23350,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -23442,6 +23535,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -23956,6 +24050,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -24289,6 +24384,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -24589,6 +24685,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -24773,6 +24870,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -25287,6 +25385,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -25620,6 +25719,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -25891,6 +25991,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -26060,6 +26161,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -26209,6 +26311,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -26603,6 +26706,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -26772,6 +26876,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -28699,6 +28804,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -30172,6 +30278,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -31611,6 +31718,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -32232,6 +32340,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -32581,6 +32690,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -33202,6 +33312,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -33551,6 +33662,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -34172,6 +34284,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -34521,6 +34634,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -35180,6 +35294,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -35571,6 +35686,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -36230,6 +36346,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -36621,6 +36738,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -37280,6 +37398,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -37671,6 +37790,7 @@ export var storyboard = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -37965,6 +38085,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -38134,6 +38255,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -38378,6 +38500,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -38545,6 +38668,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -38712,6 +38836,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -38985,6 +39110,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -39154,6 +39280,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -39370,6 +39497,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -39642,6 +39770,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -39811,6 +39940,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -40131,6 +40261,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -40449,6 +40580,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -40618,6 +40750,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -40895,6 +41028,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -41121,6 +41255,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -41296,6 +41431,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -41596,6 +41732,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -41780,6 +41917,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -42134,6 +42272,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -42310,6 +42449,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -42763,6 +42903,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -42947,6 +43088,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -43303,6 +43445,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -43479,6 +43622,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -43863,6 +44007,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -44031,6 +44176,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -44824,6 +44970,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -44975,6 +45122,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -45126,6 +45274,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -45277,6 +45426,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -45430,6 +45580,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -45581,6 +45732,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -45732,6 +45884,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -45883,6 +46036,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -46102,6 +46256,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -46282,6 +46437,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -46435,6 +46591,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -46586,6 +46743,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -46737,6 +46895,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -46888,6 +47047,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -47039,6 +47199,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -47190,6 +47351,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -47341,6 +47503,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -47492,6 +47655,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -47643,6 +47807,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -47794,6 +47959,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -47945,6 +48111,7 @@ export var App = (props) => { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -48235,6 +48402,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -48404,6 +48572,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -48797,6 +48966,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -49155,6 +49325,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -49372,6 +49543,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -49589,6 +49761,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -49806,6 +49979,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -50096,6 +50270,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -50265,6 +50440,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -50657,6 +50833,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -51014,6 +51191,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -51231,6 +51409,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -51448,6 +51627,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -51665,6 +51845,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -51955,6 +52136,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -52124,6 +52306,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -52560,6 +52743,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -52961,6 +53145,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -53178,6 +53363,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -53395,6 +53581,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -53612,6 +53799,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -53908,6 +54096,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -54092,6 +54281,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -54355,6 +54545,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -54531,6 +54722,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -54805,6 +54997,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -54951,6 +55144,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -55145,6 +55339,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -55301,6 +55496,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -55457,6 +55653,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -55718,6 +55915,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -55864,6 +56062,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -56116,6 +56315,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -56310,6 +56510,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -56467,6 +56668,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -56716,6 +56918,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -56862,6 +57065,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -57124,6 +57328,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -57295,6 +57500,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -57544,6 +57750,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -57690,6 +57897,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -57839,6 +58047,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -58096,6 +58305,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -58242,6 +58452,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -58469,6 +58680,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -58645,6 +58857,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -58896,6 +59109,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -59042,6 +59256,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -59366,6 +59581,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -59556,6 +59772,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -59746,6 +59963,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -59996,6 +60214,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -60142,6 +60361,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -60308,6 +60528,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -60603,6 +60824,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -60772,6 +60994,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -61278,6 +61501,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -61434,6 +61658,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -61704,6 +61929,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -61972,6 +62198,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -62164,6 +62391,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -62354,6 +62582,7 @@ export var storyboard = ( "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -62631,6 +62860,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -62800,6 +63030,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -62998,6 +63229,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -63165,6 +63397,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -63440,6 +63673,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -63609,6 +63843,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -63758,6 +63993,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -64063,6 +64299,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -64232,6 +64469,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -64650,6 +64888,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -65033,6 +65272,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -65264,6 +65504,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -65465,6 +65706,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -65632,6 +65874,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -65863,6 +66106,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -66064,6 +66308,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -66231,6 +66476,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -66462,6 +66708,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -66663,6 +66910,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -66830,6 +67078,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -67104,6 +67353,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -67273,6 +67523,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -67422,6 +67673,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -67706,6 +67958,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -67875,6 +68128,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -68092,6 +68346,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -68279,6 +68534,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, @@ -68436,6 +68692,7 @@ Object { "label": null, "nonRoundedGlobalFrame": null, "specialSizeMeasurements": Object { + "alignContent": null, "alignItems": null, "borderRadius": null, "clientHeight": 0, diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index f3d47c9991f8..e9732e84bfff 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -378,6 +378,8 @@ export type GridData = { gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null gridTemplateRowsFromProps: GridAutoOrTemplateBase | null gap: number | null + justifyContent: string | null + alignContent: string | null rowGap: number | null columnGap: number | null padding: Sides @@ -435,6 +437,8 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] { gap: gap, rowGap: rowGap, columnGap: columnGap, + justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent, + alignContent: targetGridContainer.specialSizeMeasurements.alignContent, padding: padding, rows: rows, columns: columns, @@ -770,6 +774,8 @@ export const GridControls = controlForStrategyMemoized(({ tar border: `1px solid ${ activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent' }`, + justifyContent: grid.justifyContent ?? 'initial', + alignContent: grid.alignContent ?? 'initial', pointerEvents: 'none', padding: grid.padding == null diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts index 3ff63324bf26..9a0eae756546 100644 --- a/editor/src/components/canvas/dom-walker.ts +++ b/editor/src/components/canvas/dom-walker.ts @@ -681,6 +681,7 @@ function getSpecialMeasurements( const parentTextDirection = eitherToMaybe(parseDirection(parentElementStyle?.direction, null)) const justifyContent = getFlexJustifyContent(elementStyle.justifyContent) + const alignContent = getFlexAlignment(elementStyle.alignContent) const alignItems = getFlexAlignment(elementStyle.alignItems) const margin = applicative4Either( @@ -877,6 +878,7 @@ function getSpecialMeasurements( gap, flexDirection, justifyContent, + alignContent, alignItems, element.localName, childrenCount, 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 02cbcf84fcec..808524bc5a1d 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 @@ -265,6 +265,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { gap: 11, flexDirection: 'column', justifyContent: 'center', + alignContent: 'auto', alignItems: 'auto', htmlElementName: 'div', renderedChildrenCount: 10, @@ -383,6 +384,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { gap: 11, flexDirection: 'column', justifyContent: 'center', + alignContent: 'auto', alignItems: 'auto', htmlElementName: 'div', renderedChildrenCount: 10, @@ -556,6 +558,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { gap: 11, flexDirection: 'column', justifyContent: 'center', + alignContent: 'auto', alignItems: 'auto', htmlElementName: 'div', renderedChildrenCount: 10, @@ -706,6 +709,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { gap: 11, flexDirection: 'column', justifyContent: 'center', + alignContent: 'auto', alignItems: 'auto', htmlElementName: 'div', renderedChildrenCount: 10, @@ -881,6 +885,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { gap: 11, flexDirection: 'column', justifyContent: 'center', + alignContent: 'auto', alignItems: 'auto', htmlElementName: 'div', renderedChildrenCount: 10, @@ -1033,6 +1038,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { gap: 11, flexDirection: 'column', justifyContent: 'center', + alignContent: 'auto', alignItems: 'auto', htmlElementName: 'div', renderedChildrenCount: 10, @@ -1185,6 +1191,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { gap: 11, flexDirection: 'column', justifyContent: 'center', + alignContent: 'auto', alignItems: 'auto', htmlElementName: 'div', renderedChildrenCount: 10, 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 e19d4f36fab4..a360d4d1eeca 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -2276,6 +2276,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< newSize.gap, newSize.flexDirection, newSize.justifyContent, + newSize.alignContent, newSize.alignItems, newSize.htmlElementName, newSize.renderedChildrenCount, diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index 7db708de5331..e26e1e1496e1 100644 --- a/editor/src/core/shared/element-template.ts +++ b/editor/src/core/shared/element-template.ts @@ -2810,6 +2810,7 @@ export interface SpecialSizeMeasurements { gap: number | null flexDirection: FlexDirection | null justifyContent: FlexJustifyContent | null + alignContent: FlexAlignment | null alignItems: FlexAlignment | null htmlElementName: string renderedChildrenCount: number @@ -2859,6 +2860,7 @@ export function specialSizeMeasurements( gap: number | null, flexDirection: FlexDirection | null, justifyContent: FlexJustifyContent | null, + alignContent: FlexAlignment | null, alignItems: FlexAlignment | null, htmlElementName: string, renderedChildrenCount: number, @@ -2909,6 +2911,7 @@ export function specialSizeMeasurements( gap, flexDirection, justifyContent, + alignContent, alignItems, htmlElementName, renderedChildrenCount, @@ -2963,6 +2966,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements( null, null, null, + null, 'div', 0, null,