From 46a961eb3b8a9ebb0f0a985ea4269953786eb0b5 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Mon, 30 Sep 2024 15:53:34 +0200 Subject: [PATCH] Use stretch instead of fill for grid children (#6424) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Problem:** The inspector should show `Stretch` instead of `Fill` for grid children, and set `alignSelf`/`justifySelf` in those cases. **Fix:** 1. Set `alignSelf`/`justifySelf` to `stretch` if `Stretch` is selected in the inspector dropdown for grid children 2. Show `Stretch` instead of `Fill` for label for grid children (note: I opted for just changing the label here instead of having a different strategy altogether, since in my mind it's still fulfilling the goal of "filling" the parent – but lmk if this is the wrong take) Fixes #6423 --- .../strategies/basic-resize-strategy.tsx | 44 +++++++---- .../select-mode/absolute-resize-control.tsx | 2 + .../src/components/editor/actions/actions.tsx | 79 +++++++++++++++---- .../inspector/fill-hug-fixed-control.tsx | 7 ++ .../components/inspector/inspector-common.ts | 50 +++++++++++- .../fill-container-basic-strategy.ts | 78 +++++++++++++++++- .../fixed-size-basic-strategy.ts | 7 +- .../inspector-strategies.ts | 2 + .../inspector/resize-to-fit-control.tsx | 1 + 9 files changed, 232 insertions(+), 38 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx index 2da9612b7ae7..53f768b6e61d 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx @@ -11,6 +11,7 @@ import { isInfinityRectangle, offsetPoint, } from '../../../../core/shared/math-utils' +import * as PP from '../../../../core/shared/property-path' import { styleStringInArray } from '../../../../utils/common-constants' import { trueUpGroupElementChanged } from '../../../editor/store/editor-state' import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks' @@ -20,6 +21,7 @@ import { oppositeEdgePosition } from '../../canvas-types' import { isEdgePositionACorner, isEdgePositionAHorizontalEdge, + isEdgePositionAVerticalEdge, pickPointOnRect, } from '../../canvas-utils' import type { LengthPropertyToAdjust } from '../../commands/adjust-css-length-command' @@ -27,6 +29,8 @@ import { adjustCssLengthProperties, lengthPropertyToAdjust, } from '../../commands/adjust-css-length-command' +import type { CanvasCommand } from '../../commands/commands' +import { deleteProperties } from '../../commands/delete-properties-command' import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command' import { queueTrueUpElement } from '../../commands/queue-true-up-command' import { setCursorCommand } from '../../commands/set-cursor-command' @@ -219,21 +223,31 @@ export function basicResizeStrategy( const elementsToRerender = [...selectedElements, ...gridsToRerender] - return strategyApplicationResult( - [ - adjustCssLengthProperties('always', selectedElement, null, resizeProperties), - updateHighlightedViews('mid-interaction', []), - setCursorCommand(pickCursorFromEdgePosition(edgePosition)), - pushIntendedBoundsAndUpdateGroups( - [{ target: selectedElement, frame: resizedBounds }], - 'starting-metadata', - ), - ...groupChildren.map((c) => - queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]), - ), - ], - elementsToRerender, - ) + let commands: CanvasCommand[] = [ + adjustCssLengthProperties('always', selectedElement, null, resizeProperties), + updateHighlightedViews('mid-interaction', []), + setCursorCommand(pickCursorFromEdgePosition(edgePosition)), + pushIntendedBoundsAndUpdateGroups( + [{ target: selectedElement, frame: resizedBounds }], + 'starting-metadata', + ), + ...groupChildren.map((c) => + queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]), + ), + ] + + if (isEdgePositionAHorizontalEdge(edgePosition)) { + commands.push( + deleteProperties('always', selectedElement, [PP.create('style', 'justifySelf')]), + ) + } + if (isEdgePositionAVerticalEdge(edgePosition)) { + commands.push( + deleteProperties('always', selectedElement, [PP.create('style', 'alignSelf')]), + ) + } + + return strategyApplicationResult(commands, elementsToRerender) } else { return strategyApplicationResult( [ diff --git a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx index 38f456abf349..c8db573bd4af 100644 --- a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx +++ b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx @@ -398,6 +398,8 @@ const sizeLabel = (state: FixedHugFill['type'], actualSize: number): string => { case 'detected': case 'computed': return `${actualSize}` + case 'stretch': + return 'Stretch' default: assertNever(state) } diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx index 14cc63ab0cfa..4b02829f691a 100644 --- a/editor/src/components/editor/actions/actions.tsx +++ b/editor/src/components/editor/actions/actions.tsx @@ -4,8 +4,7 @@ import localforage from 'localforage' import { imagePathURL } from '../../../common/server' import { roundAttributeLayoutValues } from '../../../core/layout/layout-utils' import { - findElementAtPath, - findJSXElementAtPath, + getSimpleAttributeAtPath, getZIndexOrderedViewsWithoutDirectChildren, MetadataUtils, } from '../../../core/model/element-metadata-utils' @@ -102,6 +101,7 @@ import type { LocalRectangle, Size, CanvasVector, + MaybeInfinityCanvasRectangle, } from '../../../core/shared/math-utils' import { canvasRectangle, @@ -157,7 +157,7 @@ import { assertNever, fastForEach, getProjectLockedKey, identity } from '../../. import { emptyImports, mergeImports } from '../../../core/workers/common/project-file-utils' import type { UtopiaTsWorkers } from '../../../core/workers/common/worker-types' import type { IndexPosition } from '../../../utils/utils' -import Utils, { absolute } from '../../../utils/utils' +import Utils from '../../../utils/utils' import type { ProjectContentTreeRoot } from '../../assets' import { isProjectContentFile, @@ -430,7 +430,7 @@ import { import { loadStoredState } from '../stored-state' import { applyMigrations } from './migrations/migrations' -import { boundsInFile, defaultConfig } from 'utopia-vscode-common' +import { defaultConfig } from 'utopia-vscode-common' import { reorderElement } from '../../../components/canvas/commands/reorder-element-command' import type { BuiltInDependencies } from '../../../core/es-modules/package-manager/built-in-dependencies-list' import { fetchNodeModules } from '../../../core/es-modules/package-manager/fetch-packages' @@ -495,7 +495,6 @@ import { clearImageFileBlob, enableInsertModeForJSXElement, finishCheckpointTimer, - insertAsChildTarget, insertJSXElement, openCodeEditorFile, replaceMappedElement, @@ -524,7 +523,6 @@ import { styleStringInArray } from '../../../utils/common-constants' import { collapseTextElements } from '../../../components/text-editor/text-handling' import { LayoutPropertyList, StyleProperties } from '../../inspector/common/css-utils' import { - getFromPropOrFlagComment, isUtopiaPropOrCommentFlag, makeUtopiaFlagComment, removePropOrFlagComment, @@ -543,7 +541,10 @@ import { replaceWithElementsWrappedInFragmentBehaviour, } from '../store/insertion-path' import { getConditionalCaseCorrespondingToBranchPath } from '../../../core/model/conditionals' -import { deleteProperties } from '../../canvas/commands/delete-properties-command' +import { + deleteProperties, + deleteValuesAtPath, +} from '../../canvas/commands/delete-properties-command' import { treatElementAsFragmentLike } from '../../canvas/canvas-strategies/strategies/fragment-like-helpers' import { fixParentContainingBlockSettings, @@ -619,11 +620,12 @@ import { import type { FixUIDsState } from '../../../core/workers/parser-printer/uid-fix' import { fixTopLevelElementsUIDs } from '../../../core/workers/parser-printer/uid-fix' import { nextSelectedTab } from '../../navigator/left-pane/left-pane-utils' -import { getDefaultedRemixRootDir, getRemixRootDir } from '../store/remix-derived-data' +import { getDefaultedRemixRootDir } from '../store/remix-derived-data' import { isReplaceKeepChildrenAndStyleTarget } from '../../navigator/navigator-item/component-picker-context-menu' import { canCondenseJSXElementChild } from '../../../utils/can-condense' import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils' import { applyValuesAtPath } from '../../canvas/commands/adjust-number-command' +import { styleP } from '../../inspector/inspector-common' export const MIN_CODE_PANE_REOPEN_WIDTH = 100 @@ -6589,10 +6591,54 @@ function removeErrorMessagesForFile(editor: EditorState, filename: string): Edit function alignFlexOrGridChildren(editor: EditorState, views: ElementPath[], alignment: Alignment) { let workingEditorState = { ...editor } for (const view of views) { - function apply(prop: 'alignSelf' | 'justifySelf', value: string) { - return applyValuesAtPath(workingEditorState, view, [ + // When updating alongside the given alignment, also update the opposite one so that it makes sense: + // For example, if alignment is 'alignSelf', delete the 'justifySelf' if currently set to stretch and, if so, + // set the explicit height of the element (and vice versa for 'justifySelf'). + function updateOpposite( + editorState: EditorState, + frame: MaybeInfinityCanvasRectangle | null, + target: 'alignSelf' | 'justifySelf', + dimension: 'width' | 'height', + ) { + let working = { ...editorState } + + working = deleteValuesAtPath(working, view, [styleP(target)]).editorStateWithChanges + + working = applyValuesAtPath(working, view, [ + { + path: styleP(dimension), + value: jsExpressionValue(zeroRectIfNullOrInfinity(frame)[dimension], emptyComments), + }, + ]).editorStateWithChanges + + return working + } + + function apply(editorState: EditorState, prop: 'alignSelf' | 'justifySelf', value: string) { + const element = MetadataUtils.findElementByElementPath(editor.jsxMetadata, view) + if (element == null || isLeft(element.element) || !isJSXElement(element.element.value)) { + return workingEditorState + } + + let working = editorState + + working = applyValuesAtPath(working, view, [ { path: PP.create('style', prop), value: jsExpressionValue(value, emptyComments) }, ]).editorStateWithChanges + + const alignSelfStretch = + getSimpleAttributeAtPath(right(element.element.value.props), styleP('alignSelf')).value === + 'stretch' + const justifySelfStretch = + getSimpleAttributeAtPath(right(element.element.value.props), styleP('justifySelf')) + .value === 'stretch' + + if (prop === 'alignSelf' && justifySelfStretch) { + working = updateOpposite(working, element.globalFrame, 'justifySelf', 'height') + } else if (prop === 'justifySelf' && alignSelfStretch) { + working = updateOpposite(working, element.globalFrame, 'alignSelf', 'width') + } + return working } const { align, justify } = MetadataUtils.getRelativeAlignJustify( @@ -6602,27 +6648,28 @@ function alignFlexOrGridChildren(editor: EditorState, views: ElementPath[], alig switch (alignment) { case 'bottom': - workingEditorState = apply(align, 'end') + workingEditorState = apply(workingEditorState, align, 'end') break case 'top': - workingEditorState = apply(align, 'start') + workingEditorState = apply(workingEditorState, align, 'start') break case 'vcenter': - workingEditorState = apply(align, 'center') + workingEditorState = apply(workingEditorState, align, 'center') break case 'hcenter': - workingEditorState = apply(justify, 'center') + workingEditorState = apply(workingEditorState, justify, 'center') break case 'left': - workingEditorState = apply(justify, 'start') + workingEditorState = apply(workingEditorState, justify, 'start') break case 'right': - workingEditorState = apply(justify, 'end') + workingEditorState = apply(workingEditorState, justify, 'end') break default: assertNever(alignment) } } + return workingEditorState } diff --git a/editor/src/components/inspector/fill-hug-fixed-control.tsx b/editor/src/components/inspector/fill-hug-fixed-control.tsx index e97e7e2e5e5b..08dd8f40050e 100644 --- a/editor/src/components/inspector/fill-hug-fixed-control.tsx +++ b/editor/src/components/inspector/fill-hug-fixed-control.tsx @@ -80,6 +80,7 @@ export const CollapsedLabel = 'Collapsed' as const export const HugGroupContentsLabel = 'Hug' as const export const ComputedLabel = 'Computed' as const export const DetectedLabel = 'Detected' as const +export const StretchLabel = 'Stretch' as const export function selectOptionLabel(mode: FixedHugFillMode): string { switch (mode) { @@ -101,6 +102,8 @@ export function selectOptionLabel(mode: FixedHugFillMode): string { return ComputedLabel case 'detected': return DetectedLabel + case 'stretch': + return StretchLabel default: assertNever(mode) } @@ -126,6 +129,8 @@ export function selectOptionIconType( return `fixed-${dimension}` case 'detected': return `fixed-${dimension}` + case 'stretch': + return `fill-${dimension}` default: assertNever(mode) } @@ -396,6 +401,7 @@ function strategyForChangingFillFixedHugType( ): Array { switch (mode) { case 'fill': + case 'stretch': return setPropFillStrategies(metadata, selectedElements, axis, 'default', otherAxisSetToFill) case 'hug': case 'squeeze': @@ -427,6 +433,7 @@ function pickFixedValue(value: FixedHugFill): CSSNumber | undefined { case 'fill': case 'hug-group': return value.value + case 'stretch': case 'hug': case 'squeeze': case 'collapsed': diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts index e51e2fecd4fd..7f0b03ef28a1 100644 --- a/editor/src/components/inspector/inspector-common.ts +++ b/editor/src/components/inspector/inspector-common.ts @@ -647,6 +647,7 @@ export type FixedHugFill = | { type: 'computed'; value: CSSNumber } | { type: 'detected'; value: CSSNumber } | { type: 'scaled'; value: CSSNumber } + | { type: 'stretch' } export type FixedHugFillMode = FixedHugFill['type'] @@ -666,6 +667,30 @@ export function detectFillHugFixedState( return { fixedHugFill: null, controlStatus: 'off' } } + const width = foldEither( + () => null, + (value) => defaultEither(null, parseCSSNumber(value, 'Unitless')), + getSimpleAttributeAtPath(right(element.element.value.props), PP.create('style', 'width')), + ) + const height = foldEither( + () => null, + (value) => defaultEither(null, parseCSSNumber(value, 'Unitless')), + getSimpleAttributeAtPath(right(element.element.value.props), PP.create('style', 'height')), + ) + + if (MetadataUtils.isGridCell(metadata, elementPath)) { + if ( + (element.specialSizeMeasurements.alignSelf === 'stretch' && + axis === 'horizontal' && + width == null) || + (element.specialSizeMeasurements.justifySelf === 'stretch' && + axis === 'vertical' && + height == null) + ) { + return { fixedHugFill: { type: 'stretch' }, controlStatus: 'detected' } + } + } + const flexGrowLonghand = foldEither( () => null, (value) => defaultEither(null, parseCSSNumber(value, 'Unitless')), @@ -1071,7 +1096,11 @@ export function getFixedFillHugOptionsForElement( (!isGroup && basicHugContentsApplicableForContainer(metadata, pathTrees, selectedView)) ? 'hug' : null, - fillContainerApplicable(metadata, selectedView) ? 'fill' : null, + fillContainerApplicable(metadata, selectedView) + ? MetadataUtils.isGridCell(metadata, selectedView) + ? 'stretch' + : 'fill' + : null, ]), ) } @@ -1198,6 +1227,20 @@ export function removeExtraPinsWhenSettingSize( ) } +export function removeAlignJustifySelf( + axis: Axis, + elementMetadata: ElementInstanceMetadata | null, +): Array { + if (elementMetadata == null) { + return [] + } + return [ + deleteProperties('always', elementMetadata.elementPath, [ + styleP(axis === 'horizontal' ? 'alignSelf' : 'justifySelf'), + ]), + ] +} + export function isFixedHugFillEqual( a: { fixedHugFill: FixedHugFill | null; controlStatus: ControlStatus }, b: { fixedHugFill: FixedHugFill | null; controlStatus: ControlStatus }, @@ -1230,9 +1273,10 @@ export function isFixedHugFillEqual( a.fixedHugFill.value.value === b.fixedHugFill.value.value && a.fixedHugFill.value.unit === b.fixedHugFill.value.unit ) + case 'stretch': + return a.fixedHugFill.type === b.fixedHugFill.type default: - const _exhaustiveCheck: never = a.fixedHugFill - throw new Error(`Unknown type in FixedHugFill ${JSON.stringify(a.fixedHugFill)}`) + assertNever(a.fixedHugFill) } } diff --git a/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts b/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts index 230669cf7a09..20ca8f6a8b7b 100644 --- a/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts +++ b/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts @@ -1,7 +1,12 @@ import * as PP from '../../../core/shared/property-path' -import { MetadataUtils } from '../../../core/model/element-metadata-utils' +import { getSimpleAttributeAtPath, MetadataUtils } from '../../../core/model/element-metadata-utils' import { clamp } from '../../../core/shared/math-utils' -import { setProperty } from '../../canvas/commands/set-property-command' +import { + propertyToDelete, + propertyToSet, + setProperty, + updateBulkProperties, +} from '../../canvas/commands/set-property-command' import type { FlexDirection } from '../common/css-utils' import { cssNumber, printCSSNumber } from '../common/css-utils' import type { Axis } from '../inspector-common' @@ -14,6 +19,8 @@ import { nukeSizingPropsForAxisCommand, nullOrNonEmpty, setParentToFixedIfHugCommands, + removeAlignJustifySelf, + styleP, } from '../inspector-common' import type { InspectorStrategy } from './inspector-strategy' import { @@ -24,8 +31,13 @@ import { groupErrorToastCommand, maybeInvalidGroupState, } from '../../canvas/canvas-strategies/strategies/group-helpers' -import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template' +import { + isJSXElement, + type ElementInstanceMetadataMap, +} from '../../../core/shared/element-template' import type { ElementPath } from '../../../core/shared/project-file-types' +import { foldEither, defaultEither, right, isLeft } from '../../../core/shared/either' +import { parseString } from '../../../utils/value-parser-utils' export const fillContainerStrategyFlow = ( metadata: ElementInstanceMetadataMap, @@ -102,6 +114,8 @@ export const fillContainerStrategyFlexParent = ( } const commands = elements.flatMap((path) => { + const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path) + const flexDirection = overrides.forceFlexDirectionForParent ?? detectParentFlexDirection(metadata, path) ?? 'row' @@ -113,6 +127,7 @@ export const fillContainerStrategyFlexParent = ( value === 'default' ? cssNumber(100, '%') : cssNumber(clamp(0, 100, value), '%') return [ ...setParentToFixedIfHugCommands(axis, metadata, path), + ...removeAlignJustifySelf(axis, elementMetadata), setCssLengthProperty( 'always', path, @@ -128,6 +143,7 @@ export const fillContainerStrategyFlexParent = ( return [ ...nukeAllAbsolutePositioningPropsCommands(path), + ...removeAlignJustifySelf(axis, elementMetadata), ...setParentToFixedIfHugCommands(axis, metadata, path), nukeSizingPropsForAxisCommand(axis, path), setProperty( @@ -142,3 +158,59 @@ export const fillContainerStrategyFlexParent = ( return nullOrNonEmpty(commands) }, }) + +export const fillContainerStrategyGridParent = ( + metadata: ElementInstanceMetadataMap, + elementPaths: ElementPath[], + axis: Axis, +): InspectorStrategy => ({ + name: 'Set to Fill Container, in grid layout', + strategy: () => { + const elements = elementPaths.filter( + (path) => fillContainerApplicable(metadata, path) && MetadataUtils.isGridCell(metadata, path), + ) + + if (elements.length === 0) { + return null + } + + const commands = elements.flatMap((path) => { + const element = MetadataUtils.findElementByElementPath(metadata, path) + if (element == null || isLeft(element.element) || !isJSXElement(element.element.value)) { + return [] + } + + const alignSelf = foldEither( + () => null, + (value) => defaultEither(null, parseString(value)), + getSimpleAttributeAtPath(right(element.element.value.props), styleP('alignSelf')), + ) + + const justifySelf = foldEither( + () => null, + (value) => defaultEither(null, parseString(value)), + getSimpleAttributeAtPath(right(element.element.value.props), styleP('justifySelf')), + ) + + let updates = [ + propertyToSet(styleP(axis === 'horizontal' ? 'alignSelf' : 'justifySelf'), 'stretch'), + ] + + // delete the opposite side value (justify <> align) if not set to stretch + if (axis === 'vertical' && alignSelf !== 'stretch') { + updates.push(propertyToDelete(styleP('alignSelf'))) + } else if (axis === 'horizontal' && justifySelf !== 'stretch') { + updates.push(propertyToDelete(styleP('justifySelf'))) + } + + return [ + ...nukeAllAbsolutePositioningPropsCommands(path), + ...setParentToFixedIfHugCommands(axis, metadata, path), + nukeSizingPropsForAxisCommand(axis, path), + updateBulkProperties('always', path, updates), + ] + }) + + return nullOrNonEmpty(commands) + }, +}) diff --git a/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts b/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts index 1c62f3d07fcf..504650a00db9 100644 --- a/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts +++ b/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts @@ -7,7 +7,11 @@ import { } from '../../canvas/commands/set-css-length-command' import type { CSSNumber } from '../common/css-utils' import type { Axis } from '../inspector-common' -import { removeExtraPinsWhenSettingSize, widthHeightFromAxis } from '../inspector-common' +import { + removeAlignJustifySelf, + removeExtraPinsWhenSettingSize, + widthHeightFromAxis, +} from '../inspector-common' import type { InspectorStrategy } from './inspector-strategy' import { queueTrueUpElement } from '../../canvas/commands/queue-true-up-command' import { @@ -48,6 +52,7 @@ export const fixedSizeBasicStrategy = ( return [ ...removeExtraPinsWhenSettingSize(axis, elementMetadata), + ...removeAlignJustifySelf(axis, elementMetadata), setCssLengthProperty( whenToRun, path, diff --git a/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts b/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts index 3e87820adcfb..a066a3494321 100644 --- a/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts +++ b/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts @@ -26,6 +26,7 @@ import { import { fillContainerStrategyFlexParent, fillContainerStrategyFlow, + fillContainerStrategyGridParent, } from './fill-container-basic-strategy' import { setSpacingModePacked, setSpacingModeSpaceBetween } from './spacing-mode-strategies' import { convertLayoutToFlexCommands } from '../../common/shared-strategies/convert-to-flex-strategy' @@ -226,6 +227,7 @@ export const setPropFillStrategies = ( value: 'default' | number, otherAxisSetToFill: boolean, ): Array => [ + fillContainerStrategyGridParent(metadata, elementPaths, axis), fillContainerStrategyFlexParent(metadata, elementPaths, axis, value), fillContainerStrategyFlow(metadata, elementPaths, axis, value, otherAxisSetToFill), ] diff --git a/editor/src/components/inspector/resize-to-fit-control.tsx b/editor/src/components/inspector/resize-to-fit-control.tsx index 7e5598f4aa9a..84f8d46a3e0c 100644 --- a/editor/src/components/inspector/resize-to-fit-control.tsx +++ b/editor/src/components/inspector/resize-to-fit-control.tsx @@ -40,6 +40,7 @@ function checkGroupSuitability( // Do not let a group be the target of a resize to fit operation. return !treatElementAsGroupLike(metadata, target) case 'fill': + case 'stretch': // Neither a group or the child of a group should be eligible for a resize to fill operation. return !( treatElementAsGroupLike(metadata, target) || treatElementAsGroupLike(metadata, parentPath)