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 ( <> @@ -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} /> { updateFrame={updateFrame} currentValues={originalLTWHValues.top} invalid={invalidPins.top || invalidPins.bottom} // currently showing red for BOTH directions + disabled={disableXYControls} /> @@ -363,6 +371,7 @@ interface LayoutPinPropertyControlProps { currentValues: Array updateFrame: (frameUpdate: FrameUpdate, transient: boolean) => void invalid?: boolean + disabled?: boolean } function getSingleCommonValue(currentValues: Array): 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 }} /> ) 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() }) })