From 41537c1552ba378395670a3d8d0c61f395ffa425 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:36:38 +0200
Subject: [PATCH] Don't show active alignment for flow elements, grey out XY
 controls for grid/flex children (#6433)

**Problem:**

1. Alignment controls should not look active for flow elements
2. XY controls should be greyed out for flex/grid children

**Fix:**

Do that.

Fixes #6431 #6432
---
 .../inspector/alignment-buttons.tsx           |  8 +++++
 .../frame-updating-layout-section.tsx         | 10 ++++++
 ...performance-regression-tests.spec.tsx.snap | 32 -------------------
 .../performance-regression-tests.spec.tsx     |  8 ++---
 4 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx
index b99efdfd7de9..b3c9c51d4d73 100644
--- a/editor/src/components/inspector/alignment-buttons.tsx
+++ b/editor/src/components/inspector/alignment-buttons.tsx
@@ -252,6 +252,14 @@ function useActiveAlignments(): ActiveAlignments {
       if (selectedViews.current.length === 0) {
         return false
       }
+
+      // Only flex/grid children can have active alignments, because they would mean nothing for flow elements.
+      if (
+        !selectedViews.current.every((view) => MetadataUtils.isFlexOrGridChild(jsxMetadata, view))
+      ) {
+        return false
+      }
+
       return selectedViews.current.every((view) => {
         const isFlexOrGridChild = MetadataUtils.isFlexOrGridChild(jsxMetadata, view)
         const { align, justify } = MetadataUtils.getRelativeAlignJustify(jsxMetadata, view)
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
index 794b24cbe1d9..92d1aaa6f306 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
@@ -285,6 +285,12 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
     [dispatch, metadataRef, originalGlobalFrame, projectContentsRef, selectedViewsRef],
   )
 
+  const disableXYControls = React.useMemo(() => {
+    return selectedViewsRef.current.some((view) =>
+      MetadataUtils.isFlexOrGridChild(metadataRef.current, view),
+    )
+  }, [selectedViewsRef, metadataRef])
+
   return (
     <>
       <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
@@ -294,6 +300,7 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
           updateFrame={updateFrame}
           currentValues={originalLTWHValues.left}
           invalid={invalidPins.left || invalidPins.right} // currently showing red for BOTH directions
+          disabled={disableXYControls}
         />
         <FrameUpdatingLayoutControl
           property='top'
@@ -301,6 +308,7 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
           updateFrame={updateFrame}
           currentValues={originalLTWHValues.top}
           invalid={invalidPins.top || invalidPins.bottom} // currently showing red for BOTH directions
+          disabled={disableXYControls}
         />
       </UIGridRow>
       <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
@@ -363,6 +371,7 @@ interface LayoutPinPropertyControlProps {
   currentValues: Array<number>
   updateFrame: (frameUpdate: FrameUpdate, transient: boolean) => void
   invalid?: boolean
+  disabled?: boolean
 }
 
 function getSingleCommonValue(currentValues: Array<number>): number | null {
@@ -449,6 +458,7 @@ const FrameUpdatingLayoutControl = React.memo((props: LayoutPinPropertyControlPr
         defaultUnitToHide={'px'}
         stepSize={1}
         innerLabel={props.label}
+        style={{ opacity: props.disabled ? 0.5 : 1 }}
       />
     </InspectorContextMenuWrapper>
   )
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 8f9197517fbc..3ad187ea0f3f 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -385,14 +385,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
@@ -1111,14 +1103,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
@@ -2001,14 +1985,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
@@ -3050,14 +3026,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index b5f21e06e6c8..0398f133d305 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`864`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`856`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1116`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1108`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`657`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`649`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`782`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`774`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })