Don't show active alignment for flow elements, grey out XY controls f…

…or 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
concrete-utopia · Oct 1, 2024 · 41537c1 · 41537c1
1 parent 76631a6
commit 41537c1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 36 deletions.
diff --git 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/...nspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/...nspector/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,13 +300,15 @@ 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'
           label='Y'
           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
@@ -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
@@ -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()
   })
 })