From 07d1bbdce03d310511d70e1b10042b6128640fc7 Mon Sep 17 00:00:00 2001 From: Sean Parsons <217400+seanparsons@users.noreply.github.com> Date: Thu, 17 Oct 2024 17:57:39 +0100 Subject: [PATCH] fix(grids) Show Controls And Update Grids With Generated Content (#6553) - Simplified `isGridCell`. - Implemented `findOriginalGrid` utility function. - Added update to `layoutSystemForChildrenInherited` to `fillLayoutSystemForChildrenFromAncestors`. - `useGridData` now uses `findOriginalGrid` to look up the hierarchy to find the grid we're interested in. - `resizeGridStrategy` now uses `findOriginalGrid` to find the correct element to update. - DOM walker defaults `layoutSystemForChildrenInherited` to false. --- .../ui-jsx-canvas-bugs.spec.tsx.snap | 2 + .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 257 ++++++++++++++++++ .../strategies/grid-helpers.ts | 25 ++ .../resize-grid-strategy.spec.browser2.tsx | 96 +++++++ .../strategies/resize-grid-strategy.ts | 17 +- .../controls/grid-controls-for-strategies.tsx | 9 +- editor/src/components/canvas/dom-walker.ts | 1 + .../store-deep-equality-instances-3.spec.ts | 7 + .../store/store-deep-equality-instances.ts | 4 + .../src/core/model/element-metadata-utils.ts | 13 +- editor/src/core/shared/element-template.ts | 4 + 11 files changed, 419 insertions(+), 16 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 e945250df896..d01c0243995a 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 @@ -223,6 +223,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -373,6 +374,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": 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 1bfd4ad728a5..1300f2829a97 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 @@ -264,6 +264,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -437,6 +438,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -905,6 +907,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1222,6 +1225,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1394,6 +1398,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1566,6 +1571,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1738,6 +1744,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2015,6 +2022,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2188,6 +2196,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2467,6 +2476,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2743,6 +2753,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2916,6 +2927,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3069,6 +3081,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3363,6 +3376,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3536,6 +3550,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3916,6 +3931,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4262,6 +4278,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4463,6 +4480,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4630,6 +4648,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4831,6 +4850,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4998,6 +5018,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -5199,6 +5220,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -5366,6 +5388,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -5711,6 +5734,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -5884,6 +5908,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -6485,6 +6510,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7052,6 +7078,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7459,6 +7486,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7832,6 +7860,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8053,6 +8082,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8240,6 +8270,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8461,6 +8492,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8648,6 +8680,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8869,6 +8902,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9056,6 +9090,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9463,6 +9498,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9836,6 +9872,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10057,6 +10094,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10244,6 +10282,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10465,6 +10504,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10652,6 +10692,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10873,6 +10914,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11060,6 +11102,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11467,6 +11510,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11840,6 +11884,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12061,6 +12106,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12248,6 +12294,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12469,6 +12516,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12656,6 +12704,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12877,6 +12926,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13064,6 +13114,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13352,6 +13403,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13525,6 +13577,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13739,6 +13792,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13893,6 +13947,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14047,6 +14102,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14323,6 +14379,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14496,6 +14553,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14762,6 +14820,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15056,6 +15115,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15229,6 +15289,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15626,6 +15687,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15988,6 +16050,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16209,6 +16272,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16430,6 +16494,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16651,6 +16716,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16945,6 +17011,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -17118,6 +17185,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -17515,6 +17583,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -17877,6 +17946,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18098,6 +18168,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18319,6 +18390,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18540,6 +18612,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18828,6 +18901,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19001,6 +19075,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19215,6 +19290,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19369,6 +19445,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19523,6 +19600,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19811,6 +19889,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19984,6 +20063,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20303,6 +20383,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20588,6 +20669,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20743,6 +20825,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20898,6 +20981,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -21202,6 +21286,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -21390,6 +21475,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -21857,6 +21943,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -22143,6 +22230,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -22446,6 +22534,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -22634,6 +22723,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -23101,6 +23191,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -23387,6 +23478,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -23691,6 +23783,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -23879,6 +23972,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -24397,6 +24491,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -24734,6 +24829,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -25038,6 +25134,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -25226,6 +25323,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -25744,6 +25842,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -26081,6 +26180,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -26356,6 +26456,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -26529,6 +26630,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -26682,6 +26784,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -27080,6 +27183,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -27253,6 +27357,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -29184,6 +29289,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -30661,6 +30767,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -32104,6 +32211,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -32729,6 +32837,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -33082,6 +33191,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -33707,6 +33817,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34060,6 +34171,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34685,6 +34797,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35038,6 +35151,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35701,6 +35815,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36096,6 +36211,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36759,6 +36875,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -37154,6 +37271,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -37817,6 +37935,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38212,6 +38331,7 @@ export var storyboard = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38510,6 +38630,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38683,6 +38804,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38931,6 +39053,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39102,6 +39225,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39273,6 +39397,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39550,6 +39675,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39723,6 +39849,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39943,6 +40070,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40219,6 +40347,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40392,6 +40521,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40716,6 +40846,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41038,6 +41169,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41211,6 +41343,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41492,6 +41625,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41722,6 +41856,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41901,6 +42036,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42205,6 +42341,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42393,6 +42530,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42751,6 +42889,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42931,6 +43070,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43388,6 +43528,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43576,6 +43717,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43936,6 +44078,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44116,6 +44259,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44504,6 +44648,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44676,6 +44821,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45473,6 +45619,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45628,6 +45775,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45783,6 +45931,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45938,6 +46087,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46095,6 +46245,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46250,6 +46401,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46405,6 +46557,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46560,6 +46713,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46783,6 +46937,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46967,6 +47122,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47124,6 +47280,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47279,6 +47436,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47434,6 +47592,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47589,6 +47748,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47744,6 +47904,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47899,6 +48060,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48054,6 +48216,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48209,6 +48372,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48364,6 +48528,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48519,6 +48684,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48674,6 +48840,7 @@ export var App = (props) => { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48968,6 +49135,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49141,6 +49309,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49538,6 +49707,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49900,6 +50070,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50121,6 +50292,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50342,6 +50514,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50563,6 +50736,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50857,6 +51031,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51030,6 +51205,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51426,6 +51602,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51787,6 +51964,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52008,6 +52186,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52229,6 +52408,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52450,6 +52630,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52744,6 +52925,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52917,6 +53099,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -53357,6 +53540,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -53762,6 +53946,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -53983,6 +54168,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -54204,6 +54390,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -54425,6 +54612,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -54725,6 +54913,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -54913,6 +55102,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -55180,6 +55370,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -55360,6 +55551,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -55638,6 +55830,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -55788,6 +55981,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -55986,6 +56180,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -56146,6 +56341,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -56306,6 +56502,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -56571,6 +56768,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -56721,6 +56919,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -56977,6 +57176,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -57175,6 +57375,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -57336,6 +57537,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -57589,6 +57791,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -57739,6 +57942,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -58005,6 +58209,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -58180,6 +58385,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -58433,6 +58639,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -58583,6 +58790,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -58736,6 +58944,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -58997,6 +59206,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -59147,6 +59357,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -59378,6 +59589,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -59558,6 +59770,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -59813,6 +60026,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -59963,6 +60177,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -60291,6 +60506,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -60485,6 +60701,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -60679,6 +60896,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -60933,6 +61151,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -61083,6 +61302,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -61253,6 +61473,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -61552,6 +61773,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -61725,6 +61947,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -62235,6 +62458,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -62395,6 +62619,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -62669,6 +62894,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -62941,6 +63167,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -63137,6 +63364,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -63331,6 +63559,7 @@ export var storyboard = ( "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -63612,6 +63841,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -63785,6 +64015,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -63987,6 +64218,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -64158,6 +64390,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -64437,6 +64670,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -64610,6 +64844,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -64763,6 +64998,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -65072,6 +65308,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -65245,6 +65482,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -65667,6 +65905,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -66054,6 +66293,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -66289,6 +66529,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -66494,6 +66735,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -66665,6 +66907,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -66900,6 +67143,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -67105,6 +67349,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -67276,6 +67521,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -67511,6 +67757,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -67716,6 +67963,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -67887,6 +68135,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -68165,6 +68414,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -68338,6 +68588,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -68491,6 +68742,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -68779,6 +69031,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -68952,6 +69205,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -69173,6 +69427,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -69364,6 +69619,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -69525,6 +69781,7 @@ Object { "justifyContent": null, "justifySelf": null, "layoutSystemForChildren": null, + "layoutSystemForChildrenInherited": false, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts index 8091b2456250..401fe101782e 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -763,3 +763,28 @@ function getOriginalElementGridConfiguration( mouseCellPosInOriginalElement, } } + +export function findOriginalGrid( + metadata: ElementInstanceMetadataMap, + path: ElementPath, +): ElementPath | null { + const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path) + if (elementMetadata == null) { + return null + } + + if (!MetadataUtils.isGridLayoutedContainer(elementMetadata)) { + return null + } + + if (!elementMetadata.specialSizeMeasurements.layoutSystemForChildrenInherited) { + return path + } + + const parentPath = EP.parentPath(path) + if (parentPath == null) { + return null + } + + return findOriginalGrid(metadata, parentPath) +} diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx index 35a0c8c4dfa6..f086926e2bc6 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx @@ -95,6 +95,40 @@ export var storyboard = ( ) ` +const makeTestProjectForAGeneratedGrid = (columns: string, rows: string) => ` +import * as React from 'react' +import { Storyboard } from 'utopia-api' + +export var storyboard = ( + +
+ {[1,2,3].map(n => { + return
+ })} +
+ +) +` + describe('resize a grid', () => { it('update a fractionally sized column', async () => { const renderResult = await renderTestEditorWithCode( @@ -212,6 +246,68 @@ export var storyboard = ( `) }) + it('update a fractionally sized column with generated content', async () => { + const renderResult = await renderTestEditorWithCode( + makeTestProjectForAGeneratedGrid('2.4fr 1fr 1fr', '99px 109px 90px'), + 'await-first-dom-report', + ) + const target = EP.fromString(`sb/grid`) + await renderResult.dispatch(selectComponents([target], false), true) + await renderResult.getDispatchFollowUpActionsFinished() + const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) + const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`) + const resizeControlRect = resizeControl.getBoundingClientRect() + const startPoint = canvasPoint({ + x: resizeControlRect.x + resizeControlRect.width / 2, + y: resizeControlRect.y + resizeControlRect.height / 2, + }) + const endPoint = canvasPoint({ + x: startPoint.x + 100, + y: startPoint.y, + }) + await mouseMoveToPoint(resizeControl, startPoint) + await mouseDownAtPoint(resizeControl, startPoint) + await mouseMoveToPoint(canvasControlsLayer, endPoint) + await mouseUpAtPoint(canvasControlsLayer, endPoint) + await renderResult.getDispatchFollowUpActionsFinished() + + expect(getPrintedUiJsCode(renderResult.getEditorState())) + .toEqual(`import * as React from 'react' +import { Storyboard } from 'utopia-api' + +export var storyboard = ( + +
+ {[1, 2, 3].map((n) => { + return ( +
+ ) + })} +
+ +) +`) + }) + it('update a pixel sized row', async () => { const renderResult = await renderTestEditorWithCode( makeTestProject('2.4fr 1fr 1fr', '99px 109px 90px'), diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts index a47f7878f069..bf89f6246649 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts @@ -34,7 +34,11 @@ import type { Either } from '../../../../core/shared/either' import { foldEither, isLeft, isRight } from '../../../../core/shared/either' import { roundTo, roundToNearestWhole } from '../../../../core/shared/math-utils' import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template' -import { expandGridDimensions, replaceGridTemplateDimensionAtIndex } from './grid-helpers' +import { + expandGridDimensions, + findOriginalGrid, + replaceGridTemplateDimensionAtIndex, +} from './grid-helpers' import { setCursorCommand } from '../../commands/set-cursor-command' import { CSSCursor } from '../../canvas-types' @@ -60,6 +64,11 @@ export const resizeGridStrategy: CanvasStrategyFactory = ( } const gridPath = isGrid ? selectedElement : EP.parentPath(selectedElement) + const metadata = interactionSession?.latestMetadata ?? canvasState.startingMetadata + const originalGridPath = findOriginalGrid(metadata, gridPath) + if (originalGridPath == null) { + return null + } return { id: 'resize-grid-strategy', @@ -96,7 +105,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = ( const dragAmount = control.axis === 'column' ? drag.x : drag.y const gridSpecialSizeMeasurements = - canvasState.startingMetadata[EP.toString(gridPath)].specialSizeMeasurements + canvasState.startingMetadata[EP.toString(originalGridPath)].specialSizeMeasurements const originalValues = control.axis === 'column' @@ -180,7 +189,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = ( const commands = [ setProperty( 'always', - gridPath, + originalGridPath, PP.create( 'style', control.axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows', @@ -190,7 +199,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = ( setCursorCommand(control.axis === 'column' ? CSSCursor.ColResize : CSSCursor.RowResize), ] - return strategyApplicationResult(commands, [gridPath]) + return strategyApplicationResult(commands, [originalGridPath]) }, } } diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx index e492acf30673..a5534b5f4684 100644 --- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx +++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx @@ -32,6 +32,7 @@ import { GridRowColumnResizingControlsComponent, } from './grid-controls' import { isEdgePositionOnSide } from '../canvas-utils' +import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers' export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}` @@ -136,7 +137,11 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] { Substores.metadata, (store) => { return mapDropNulls((view) => { - const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, view) + const originalGridPath = findOriginalGrid(store.editor.jsxMetadata, view) + const element = MetadataUtils.findElementByElementPath( + store.editor.jsxMetadata, + originalGridPath, + ) const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null @@ -172,7 +177,7 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] { ) return { - elementPath: targetGridContainer.elementPath, + elementPath: view, metadata: targetGridContainer, frame: targetGridContainer.globalFrame, gridTemplateColumns: gridTemplateColumns, diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts index bd2560483fcf..60f3d3c5f1ab 100644 --- a/editor/src/components/canvas/dom-walker.ts +++ b/editor/src/components/canvas/dom-walker.ts @@ -956,6 +956,7 @@ function getSpecialMeasurements( isParentNonStatic, parentLayoutSystem, layoutSystemForChildren, + false, // layoutSystemForChildrenInherited providesBoundsForAbsoluteChildren, elementStyle.display, position, 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 7d92822b622e..3efbf85ed95b 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 @@ -233,6 +233,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { usesParentBounds: false, parentLayoutSystem: 'flex', layoutSystemForChildren: 'flex', + layoutSystemForChildrenInherited: false, providesBoundsForAbsoluteChildren: true, display: 'flex', position: 'absolute', @@ -355,6 +356,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => { usesParentBounds: false, parentLayoutSystem: 'flex', layoutSystemForChildren: 'flex', + layoutSystemForChildrenInherited: false, providesBoundsForAbsoluteChildren: true, display: 'flex', position: 'absolute', @@ -532,6 +534,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { usesParentBounds: false, parentLayoutSystem: 'flex', layoutSystemForChildren: 'flex', + layoutSystemForChildrenInherited: false, providesBoundsForAbsoluteChildren: true, display: 'flex', position: 'absolute', @@ -686,6 +689,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => { usesParentBounds: false, parentLayoutSystem: 'flex', layoutSystemForChildren: 'flex', + layoutSystemForChildrenInherited: false, providesBoundsForAbsoluteChildren: true, display: 'flex', position: 'absolute', @@ -865,6 +869,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { usesParentBounds: false, parentLayoutSystem: 'flex', layoutSystemForChildren: 'flex', + layoutSystemForChildrenInherited: false, providesBoundsForAbsoluteChildren: true, display: 'flex', position: 'absolute', @@ -1022,6 +1027,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { parentLayoutSystem: 'flex', parentFlexGap: 0, layoutSystemForChildren: 'flex', + layoutSystemForChildrenInherited: false, providesBoundsForAbsoluteChildren: true, display: 'flex', position: 'absolute', @@ -1177,6 +1183,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => { usesParentBounds: false, parentLayoutSystem: 'flex', layoutSystemForChildren: 'flex', + layoutSystemForChildrenInherited: false, providesBoundsForAbsoluteChildren: true, display: 'flex', position: 'absolute', 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 62195fe69d70..cdf9eabda3f7 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -2191,6 +2191,8 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< oldSize.layoutSystemForChildren, newSize.layoutSystemForChildren, ).areEqual + const layoutSystemForChildrenInheritedResult = + oldSize.layoutSystemForChildrenInherited === newSize.layoutSystemForChildrenInherited const providesBoundsForAbsoluteChildrenResult = oldSize.providesBoundsForAbsoluteChildren === newSize.providesBoundsForAbsoluteChildren const positionResult = oldSize.position === newSize.position @@ -2278,6 +2280,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< usesParentBoundsResult && parentLayoutSystemResult && layoutSystemForChildrenResult && + layoutSystemForChildrenInheritedResult && providesBoundsForAbsoluteChildrenResult && positionResult && marginResult.areEqual && @@ -2331,6 +2334,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< newSize.usesParentBounds, newSize.parentLayoutSystem, newSize.layoutSystemForChildren, + newSize.layoutSystemForChildrenInherited, newSize.providesBoundsForAbsoluteChildren, newSize.display, newSize.position, diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts index ac005c2026ac..f5f4fc0aca1f 100644 --- a/editor/src/core/model/element-metadata-utils.ts +++ b/editor/src/core/model/element-metadata-utils.ts @@ -381,16 +381,8 @@ export const MetadataUtils = { return instance?.specialSizeMeasurements.layoutSystemForChildren === 'grid' }, isGridCell(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean { - const parent = MetadataUtils.findElementByElementPath(metadata, EP.parentPath(path)) - return ( - parent != null && - isRight(parent.element) && - isJSXElement(parent.element.value) && - parent.element.value.children.length > 0 && - parent.specialSizeMeasurements.containerGridProperties.gridTemplateColumns != null && - parent.specialSizeMeasurements.containerGridProperties.gridTemplateRows != null && - MetadataUtils.isGridLayoutedContainer(parent) - ) + const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path) + return elementMetadata?.specialSizeMeasurements.parentLayoutSystem === 'grid' }, isGridCellWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean { const element = MetadataUtils.findElementByElementPath(metadata, path) @@ -2660,6 +2652,7 @@ function fillLayoutSystemForChildrenFromAncestors( specialSizeMeasurements: { ...elem.specialSizeMeasurements, layoutSystemForChildren: layoutSystemForChildren, + layoutSystemForChildrenInherited: true, }, } }) diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index b1480315c7fb..6e054876f9cf 100644 --- a/editor/src/core/shared/element-template.ts +++ b/editor/src/core/shared/element-template.ts @@ -2798,6 +2798,7 @@ export interface SpecialSizeMeasurements { usesParentBounds: boolean parentLayoutSystem: DetectedLayoutSystem // TODO make a specific boolean prop that tells us the parent is flex or not layoutSystemForChildren: DetectedLayoutSystem | null + layoutSystemForChildrenInherited: boolean providesBoundsForAbsoluteChildren: boolean display: string position: CSSPosition | null @@ -2851,6 +2852,7 @@ export function specialSizeMeasurements( usesParentBounds: boolean, parentLayoutSystem: DetectedLayoutSystem, layoutSystemForChildren: DetectedLayoutSystem | null, + layoutSystemForChildrenInherited: boolean, providesBoundsForAbsoluteChildren: boolean, display: string, position: CSSPosition | null, @@ -2905,6 +2907,7 @@ export function specialSizeMeasurements( usesParentBounds, parentLayoutSystem, layoutSystemForChildren, + layoutSystemForChildrenInherited, providesBoundsForAbsoluteChildren, display, position, @@ -2963,6 +2966,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements( 'flow', null, false, + false, 'initial', null, sides(undefined, undefined, undefined, undefined),