diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx index 130820f8c003..450654e57fd0 100644 --- a/editor/src/components/inspector/alignment-buttons.tsx +++ b/editor/src/components/inspector/alignment-buttons.tsx @@ -37,7 +37,7 @@ export const AlignmentButtons = React.memo(() => { const disableDistribute = selectedViews.current.length < 3 - const activeAlignments = useActiveAlignments() + const { activeAlignments, allSelectedViewsAreFlexOrGridChildren } = useActiveAlignments() const hasActiveAlignments = React.useMemo(() => { return ( activeAlignments.bottom || @@ -174,6 +174,9 @@ export const AlignmentButtons = React.memo(() => { const disableJustify = useDisableAlignment(selectedViews.current, 'horizontal') const disableAlign = useDisableAlignment(selectedViews.current, 'vertical') + const justifyIconPrefix = allSelectedViewsAreFlexOrGridChildren ? 'justifySelf' : 'justify' + const alignIconPrefix = allSelectedViewsAreFlexOrGridChildren ? 'alignSelf' : 'align' + return ( { options={[ { value: 'left', - icon: { category: 'inspector', type: 'justify-start' }, + icon: { category: 'inspector', type: `${justifyIconPrefix}-start` }, forceCallOnSubmitValue: true, disabled: disableJustify, }, { value: 'hcenter', - icon: { category: 'inspector', type: 'justify-center' }, + icon: { category: 'inspector', type: `${justifyIconPrefix}-center` }, forceCallOnSubmitValue: true, disabled: disableJustify, }, { value: 'right', - icon: { category: 'inspector', type: 'justify-end' }, + icon: { category: 'inspector', type: `${justifyIconPrefix}-end` }, forceCallOnSubmitValue: true, disabled: disableJustify, }, @@ -216,19 +219,19 @@ export const AlignmentButtons = React.memo(() => { options={[ { value: 'top', - icon: { category: 'inspector', type: 'align-start' }, + icon: { category: 'inspector', type: `${alignIconPrefix}-start` }, forceCallOnSubmitValue: true, disabled: disableAlign, }, { value: 'vcenter', - icon: { category: 'inspector', type: 'align-center' }, + icon: { category: 'inspector', type: `${alignIconPrefix}-center` }, forceCallOnSubmitValue: true, disabled: disableAlign, }, { value: 'bottom', - icon: { category: 'inspector', type: 'align-end' }, + icon: { category: 'inspector', type: `${alignIconPrefix}-end` }, forceCallOnSubmitValue: true, disabled: disableAlign, }, @@ -241,7 +244,10 @@ export const AlignmentButtons = React.memo(() => { }) AlignmentButtons.displayName = 'AlignmentButtons' -function useActiveAlignments(): ActiveAlignments { +function useActiveAlignments(): { + activeAlignments: ActiveAlignments + allSelectedViewsAreFlexOrGridChildren: boolean +} { const selectedViews = useRefEditorState((store) => store.editor.selectedViews) const jsxMetadata = useEditorState( @@ -250,6 +256,11 @@ function useActiveAlignments(): ActiveAlignments { 'useActiveAlignments jsxMetadata', ) + const allSelectedViewsAreFlexOrGridChildren = React.useMemo( + () => selectedViews.current.every((path) => MetadataUtils.isFlexOrGridChild(jsxMetadata, path)), + [selectedViews, jsxMetadata], + ) + const isActive = React.useCallback( (alignment: Alignment) => { if (selectedViews.current.length === 0) { @@ -257,9 +268,7 @@ function useActiveAlignments(): ActiveAlignments { } // 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)) - ) { + if (!allSelectedViewsAreFlexOrGridChildren) { return false } @@ -321,10 +330,10 @@ function useActiveAlignments(): ActiveAlignments { } }) }, - [jsxMetadata, selectedViews], + [jsxMetadata, selectedViews, allSelectedViewsAreFlexOrGridChildren], ) - return React.useMemo(() => { + const activeAlignments = React.useMemo(() => { return { left: isActive('left'), hcenter: isActive('hcenter'), @@ -334,6 +343,11 @@ function useActiveAlignments(): ActiveAlignments { bottom: isActive('bottom'), } }, [isActive]) + + return { + activeAlignments: activeAlignments, + allSelectedViewsAreFlexOrGridChildren: allSelectedViewsAreFlexOrGridChildren, + } } type UnsetAlignment = { diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx index 2b6686ec0e4a..9ac261b7a0d9 100644 --- a/editor/src/components/inspector/inspector.tsx +++ b/editor/src/components/inspector/inspector.tsx @@ -87,7 +87,6 @@ import { replaceFirstChildAndDeleteSiblings, } from '../editor/element-children' import { InspectorSectionHeader } from './section-header' -import { GridPlacementSubsection } from './sections/style-section/container-subsection/grid-cell-subsection' import { ContainerSubsection } from './sections/style-section/container-subsection/container-subsection' import { isTailwindEnabled } from '../../core/tailwind/tailwind-compilation' @@ -296,14 +295,6 @@ export const Inspector = React.memo((props: InspectorProps) => { const shouldShowSimplifiedLayoutSection = inspectorPreferences.includes('layout') - const shouldShowGridCellSection = useEditorState( - Substores.metadata, - (store) => - store.editor.selectedViews.length === 1 && - MetadataUtils.isGridCell(store.editor.jsxMetadata, store.editor.selectedViews[0]), - 'Inspector shouldShowGridCellSection', - ) - const shouldShowContainerSection = selectedViews.length > 0 && inspectorPreferences.includes('layout') @@ -373,7 +364,6 @@ export const Inspector = React.memo((props: InspectorProps) => { , )} - {when(shouldShowGridCellSection, )} {when(shouldShowFlexSection, )} {when( multiselectedContract === 'frame' || multiselectedContract === 'wrapper-div', diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx index b532bfa8e977..7254d5b25790 100644 --- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx +++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx @@ -17,6 +17,7 @@ import { FrameUpdatingLayoutSection } from './frame-updating-layout-section' import { MetadataUtils } from '../../../../../core/model/element-metadata-utils' import { getInspectorPreferencesForTargets } from '../../../../../core/property-controls/property-controls-utils' import { AlignmentButtons } from '../../../alignment-buttons' +import { GridPlacementSubsection } from '../../style-section/container-subsection/grid-cell-subsection' export const SimplifiedLayoutSubsection = React.memo(() => { const selectedElementContract = useEditorState( @@ -56,6 +57,14 @@ export const SimplifiedLayoutSubsection = React.memo(() => { const shouldShowAlignmentButtons = !isCodeElement && inspectorPreferences.includes('layout') + const shouldShowGridCellSection = useEditorState( + Substores.metadata, + (store) => + store.editor.selectedViews.length === 1 && + MetadataUtils.isGridCell(store.editor.jsxMetadata, store.editor.selectedViews[0]), + 'Inspector shouldShowGridCellSection', + ) + return ( { , )} + {when(shouldShowGridCellSection, )} ) }) 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 8fb0117f29a4..4635c7a78aab 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 @@ -120,7 +120,6 @@ Array [ "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(ConstraintsSection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(GridPlacementSubsection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(StyleSection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", @@ -901,7 +900,6 @@ Array [ "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(ConstraintsSection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))", - "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(GridPlacementSubsection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(StyleSection)", "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()", diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx index 23838a562b02..7f53a8cd0879 100644 --- a/editor/src/core/performance/performance-regression-tests.spec.tsx +++ b/editor/src/core/performance/performance-regression-tests.spec.tsx @@ -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(`651`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`650`) 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(`776`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`775`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) })