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()
})
})