From 6e179e291d942a2e45ff4aa3ddb0ab70e83eabd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= Date: Tue, 17 Oct 2023 11:23:33 +0200 Subject: [PATCH] Fill out `layoutSystemForChildren` in `fixSpyOnlyMetadata` (#4374) * fill layoutSystemForChildren * tests * update snapshots * fix reparent into conditional test * extra expect --- .../ui-jsx-canvas-bugs.spec.tsx.snap | 4 +- .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 512 +++++++++--------- ...eparent-to-flex-strategy.spec.browser2.tsx | 3 - .../editor/actions/actions.spec.browser2.tsx | 85 +++ .../store/store-deep-equality-instances.ts | 6 +- .../src/core/model/element-metadata-utils.ts | 40 +- .../model/element-metadata.spec.browser2.tsx | 73 +++ editor/src/core/shared/element-template.ts | 6 +- 8 files changed, 458 insertions(+), 271 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 47314c6b6785..24100591289f 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 @@ -185,7 +185,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -297,7 +297,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "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 5bd157f332d1..8318a0382859 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 @@ -226,7 +226,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -361,7 +361,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -666,7 +666,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -857,7 +857,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -991,7 +991,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1125,7 +1125,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1259,7 +1259,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1498,7 +1498,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1633,7 +1633,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -1841,7 +1841,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2079,7 +2079,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2214,7 +2214,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2329,7 +2329,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2585,7 +2585,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2720,7 +2720,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -2986,7 +2986,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3218,7 +3218,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3390,7 +3390,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3528,7 +3528,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3700,7 +3700,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -3838,7 +3838,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4010,7 +4010,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4148,7 +4148,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4455,7 +4455,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4590,7 +4590,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -4980,7 +4980,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -5336,7 +5336,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -5617,7 +5617,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -5864,7 +5864,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -6044,7 +6044,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -6190,7 +6190,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -6370,7 +6370,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -6516,7 +6516,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -6696,7 +6696,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -6842,7 +6842,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7123,7 +7123,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7370,7 +7370,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7550,7 +7550,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7696,7 +7696,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -7876,7 +7876,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8022,7 +8022,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8202,7 +8202,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8348,7 +8348,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8629,7 +8629,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -8876,7 +8876,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9056,7 +9056,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9202,7 +9202,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9382,7 +9382,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9528,7 +9528,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9708,7 +9708,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -9854,7 +9854,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10104,7 +10104,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10239,7 +10239,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10415,7 +10415,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10531,7 +10531,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10647,7 +10647,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -10885,7 +10885,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11020,7 +11020,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11213,7 +11213,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11469,7 +11469,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11604,7 +11604,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -11881,7 +11881,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12123,7 +12123,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12305,7 +12305,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12487,7 +12487,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12669,7 +12669,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -12925,7 +12925,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13060,7 +13060,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13337,7 +13337,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13579,7 +13579,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13761,7 +13761,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -13943,7 +13943,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14125,7 +14125,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14375,7 +14375,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14510,7 +14510,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14686,7 +14686,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14802,7 +14802,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -14918,7 +14918,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15168,7 +15168,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15303,7 +15303,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15515,7 +15515,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15693,7 +15693,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15810,7 +15810,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -15927,7 +15927,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16193,7 +16193,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16343,7 +16343,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16686,7 +16686,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -16891,7 +16891,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -17156,7 +17156,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -17306,7 +17306,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -17649,7 +17649,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -17854,7 +17854,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18120,7 +18120,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18270,7 +18270,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18664,7 +18664,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -18920,7 +18920,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19186,7 +19186,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19336,7 +19336,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19730,7 +19730,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -19986,7 +19986,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20223,7 +20223,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20358,7 +20358,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20473,7 +20473,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20833,7 +20833,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -20968,7 +20968,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -22199,7 +22199,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -23082,7 +23082,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -23931,7 +23931,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -24306,7 +24306,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -24515,7 +24515,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -24890,7 +24890,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -25099,7 +25099,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -25474,7 +25474,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -25683,7 +25683,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -26096,7 +26096,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -26347,7 +26347,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -26760,7 +26760,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -27011,7 +27011,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -27424,7 +27424,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -27675,7 +27675,7 @@ export var storyboard = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -27935,7 +27935,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -28070,7 +28070,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -28280,7 +28280,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -28413,7 +28413,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -28546,7 +28546,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -28785,7 +28785,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -28920,7 +28920,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -29104,7 +29104,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -29342,7 +29342,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -29477,7 +29477,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -29732,7 +29732,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -30016,7 +30016,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -30151,7 +30151,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -30394,7 +30394,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -30586,7 +30586,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -30727,7 +30727,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -30993,7 +30993,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -31143,7 +31143,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -31421,7 +31421,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -31563,7 +31563,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -31982,7 +31982,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -32132,7 +32132,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -32411,7 +32411,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -32553,7 +32553,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -32903,7 +32903,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -33037,7 +33037,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -33805,7 +33805,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -33922,7 +33922,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34039,7 +34039,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34156,7 +34156,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34273,7 +34273,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34390,7 +34390,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34507,7 +34507,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34701,7 +34701,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34856,7 +34856,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -34973,7 +34973,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35090,7 +35090,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35207,7 +35207,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35324,7 +35324,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35441,7 +35441,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35560,7 +35560,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35677,7 +35677,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35794,7 +35794,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -35911,7 +35911,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36028,7 +36028,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36145,7 +36145,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36264,7 +36264,7 @@ export var App = (props) => { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36520,7 +36520,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36655,7 +36655,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -36932,7 +36932,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -37174,7 +37174,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -37356,7 +37356,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -37538,7 +37538,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -37720,7 +37720,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -37976,7 +37976,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38111,7 +38111,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38389,7 +38389,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38632,7 +38632,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38815,7 +38815,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -38998,7 +38998,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39181,7 +39181,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39437,7 +39437,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39572,7 +39572,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -39856,7 +39856,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40105,7 +40105,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40287,7 +40287,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40469,7 +40469,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40651,7 +40651,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -40913,7 +40913,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41063,7 +41063,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41301,7 +41301,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41443,7 +41443,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41683,7 +41683,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41795,7 +41795,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -41955,7 +41955,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42077,7 +42077,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42199,7 +42199,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42429,7 +42429,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42541,7 +42541,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -42825,7 +42825,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43051,7 +43051,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43266,7 +43266,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43378,7 +43378,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43616,7 +43616,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43753,7 +43753,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -43968,7 +43968,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44080,7 +44080,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44195,7 +44195,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44418,7 +44418,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44530,7 +44530,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44723,7 +44723,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -44865,7 +44865,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45082,7 +45082,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45194,7 +45194,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45478,7 +45478,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45631,7 +45631,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -45784,7 +45784,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46000,7 +46000,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46112,7 +46112,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46244,7 +46244,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46505,7 +46505,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -46640,7 +46640,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47072,7 +47072,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47194,7 +47194,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47430,7 +47430,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47664,7 +47664,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47822,7 +47822,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -47978,7 +47978,7 @@ export var storyboard = ( }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48221,7 +48221,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48356,7 +48356,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48520,7 +48520,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48653,7 +48653,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -48894,7 +48894,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49029,7 +49029,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49144,7 +49144,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49415,7 +49415,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49550,7 +49550,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -49856,7 +49856,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50127,7 +50127,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50333,7 +50333,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50509,7 +50509,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50651,7 +50651,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -50857,7 +50857,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51033,7 +51033,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51175,7 +51175,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51381,7 +51381,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51557,7 +51557,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51699,7 +51699,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -51939,7 +51939,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52074,7 +52074,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52189,7 +52189,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52439,7 +52439,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52574,7 +52574,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52757,7 +52757,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -52910,7 +52910,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, @@ -53033,7 +53033,7 @@ Object { }, "immediateParentProvidesLayout": true, "justifyContent": null, - "layoutSystemForChildren": "flow", + "layoutSystemForChildren": null, "margin": Object {}, "naturalHeight": null, "naturalWidth": null, diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-flex-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-flex-strategy.spec.browser2.tsx index 7d0eb0e1715c..d0ca163123c5 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-flex-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-flex-strategy.spec.browser2.tsx @@ -653,9 +653,6 @@ describe('Flex Reparent To Flex Strategy', () => { width: 100, height: 100, backgroundColor: 'teal', - position: 'absolute', - left: 190, - top: 200, }} data-uid='flexchild3' data-testid='flexchild3' diff --git a/editor/src/components/editor/actions/actions.spec.browser2.tsx b/editor/src/components/editor/actions/actions.spec.browser2.tsx index 8f7396d531e8..760373c3c972 100644 --- a/editor/src/components/editor/actions/actions.spec.browser2.tsx +++ b/editor/src/components/editor/actions/actions.spec.browser2.tsx @@ -3015,6 +3015,91 @@ export var storyboard = (props) => { `), ) }) + + it('applies flex props if the conditional is in a flex container', async () => { + const renderResult = await renderTestEditorWithCode( + makeTestProjectCodeWithSnippet(`
+ { + // @utopia/uid=conditional + true ? null : null + } + +
`), + 'await-first-dom-report', + ) + await selectComponentsForTest(renderResult, [makeTargetPath('root/bbb')]) + await pressKey('x', { modifiers: cmdModifier }) + + await selectComponentsForTest(renderResult, [makeTargetPath('root/conditional/a25')]) + + const canvasRoot = renderResult.renderedDOM.getByTestId('canvas-root') + + firePasteEvent(canvasRoot) + + // Wait for the next frame + await clipboardMock.pasteDone + await renderResult.getDispatchFollowUpActionsFinished() + + await pressKey('Esc') + await renderResult.getDispatchFollowUpActionsFinished() + + expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( + makeTestProjectCodeWithSnippet(` +
+ { + // @utopia/uid=conditional + true ? ( + + ) : null + } +
+ `), + ) + + const img = renderResult.renderedDOM.getByTestId('bbb') + const { top, left, position } = img.style + expect({ top, left, position }).toEqual({ left: '', top: '', position: '' }) + }) }) describe('pasting an element creates new layout properties for the new parent layout', () => { const copyPasteLayoutTestCases: Array<{ 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 f978723e254c..ad17a3136d90 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -1565,8 +1565,10 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall< ).areEqual const usesParentBoundsResult = oldSize.usesParentBounds === newSize.usesParentBounds const parentLayoutSystemResult = oldSize.parentLayoutSystem === newSize.parentLayoutSystem - const layoutSystemForChildrenResult = - oldSize.layoutSystemForChildren === newSize.layoutSystemForChildren + const layoutSystemForChildrenResult = NullableStringKeepDeepEquality( + oldSize.layoutSystemForChildren, + newSize.layoutSystemForChildren, + ).areEqual const providesBoundsForAbsoluteChildrenResult = oldSize.providesBoundsForAbsoluteChildren === newSize.providesBoundsForAbsoluteChildren const positionResult = oldSize.position === newSize.position diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts index 8ef9c7905659..3da79ce1d22b 100644 --- a/editor/src/core/model/element-metadata-utils.ts +++ b/editor/src/core/model/element-metadata-utils.ts @@ -2446,11 +2446,11 @@ function fillSpyOnlyMetadata( } function fillMissingDataFromAncestors(mergedMetadata: ElementInstanceMetadataMap) { - const metadataWithGlobalContentBox = fillGlobalContentBoxFromAncestors(mergedMetadata) - const metadataWithConditionaGlobalFrames = fillConditionalGlobalFrameFromAncestors( - metadataWithGlobalContentBox, - ) - return metadataWithConditionaGlobalFrames + return [ + fillGlobalContentBoxFromAncestors, + fillConditionalGlobalFrameFromAncestors, + fillLayoutSystemForChildrenFromAncestors, + ].reduce((metadata, fill) => fill(metadata), mergedMetadata) } function fillGlobalContentBoxFromAncestors( @@ -2484,6 +2484,36 @@ function fillGlobalContentBoxFromAncestors( return workingElements } +function fillLayoutSystemForChildrenFromAncestors( + metadata: ElementInstanceMetadataMap, +): ElementInstanceMetadataMap { + const workingElements = { ...metadata } + + const elementsWithoutLayoutSystemForChildren = Object.keys(workingElements).filter((p) => { + return workingElements[p]?.specialSizeMeasurements.layoutSystemForChildren == null + }) + // sorted, so that parents are fixed first + elementsWithoutLayoutSystemForChildren.sort() + + fastForEach(elementsWithoutLayoutSystemForChildren, (pathStr) => { + const elem = workingElements[pathStr] + + const parentPathStr = EP.toString(EP.parentPath(EP.fromString(pathStr))) + + const layoutSystemForChildren = + workingElements[parentPathStr]?.specialSizeMeasurements.layoutSystemForChildren ?? null + + workingElements[pathStr] = { + ...elem, + specialSizeMeasurements: { + ...elem.specialSizeMeasurements, + layoutSystemForChildren: layoutSystemForChildren, + }, + } + }) + return workingElements +} + // There is a case when conditionals should inherit their globalFrame from their parent: // - when a conditional has no siblings // - when the active branch is a js expression diff --git a/editor/src/core/model/element-metadata.spec.browser2.tsx b/editor/src/core/model/element-metadata.spec.browser2.tsx index 9e85e3c0b5dc..5f20a91bdb36 100644 --- a/editor/src/core/model/element-metadata.spec.browser2.tsx +++ b/editor/src/core/model/element-metadata.spec.browser2.tsx @@ -14,6 +14,7 @@ import { makeTestProjectCodeWithSnippet, renderTestEditorWithCode, TestAppUID, + TestScenePath, TestSceneUID, } from '../../components/canvas/ui-jsx.test-utils' import { selectComponentsForTest } from '../../utils/utils.test-utils' @@ -858,6 +859,78 @@ describe('isAutofocusable/isManuallyFocusableComponent', () => { }) }) +describe('fillSpyOnlyMetadata', () => { + it('layoutSystemForChildren is filled out correctly for conditionals', async () => { + const renderResult = await renderTestEditorWithCode( + makeTestProjectCodeWithSnippet(`
+
+
+
+
+ { + // @utopia/uid=conditional + true ? null : ( +
+ False branch +
+ )} +
+
`), + 'await-first-dom-report', + ) + + const targetPath = EP.appendNewElementPath(TestScenePath, ['root', 'container', 'conditional']) + const metadata = MetadataUtils.findElementByElementPath( + renderResult.getEditorState().editor.jsxMetadata, + targetPath, + ) + expect(metadata).not.toBeNull() + + expect(metadata!.specialSizeMeasurements.layoutSystemForChildren).toEqual('flex') + }) +}) + const TestProjectWithSeveralComponents = ` import * as React from 'react' import { Scene, Storyboard } from 'utopia-api' diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index 74df8af1726d..0547ddebe277 100644 --- a/editor/src/core/shared/element-template.ts +++ b/editor/src/core/shared/element-template.ts @@ -2026,7 +2026,7 @@ export interface SpecialSizeMeasurements { closestOffsetParentPath: ElementPath usesParentBounds: boolean parentLayoutSystem: DetectedLayoutSystem // TODO make a specific boolean prop that tells us the parent is flex or not - layoutSystemForChildren: DetectedLayoutSystem + layoutSystemForChildren: DetectedLayoutSystem | null providesBoundsForAbsoluteChildren: boolean display: string position: CSSPosition | null @@ -2068,7 +2068,7 @@ export function specialSizeMeasurements( closestOffsetParentPath: ElementPath, usesParentBounds: boolean, parentLayoutSystem: DetectedLayoutSystem, - layoutSystemForChildren: DetectedLayoutSystem, + layoutSystemForChildren: DetectedLayoutSystem | null, providesBoundsForAbsoluteChildren: boolean, display: string, position: CSSPosition | null, @@ -2157,7 +2157,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements( EP.emptyElementPath, false, 'flow', - 'flow', + null, false, 'initial', 'static',