diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx index 5661edd4e884..96dd7c860627 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx @@ -646,6 +646,39 @@ describe('Absolute Resize Strategy', () => { const absoluteResizeControl = editor.renderedDOM.queryAllByTestId(SizeLabelTestId) expect(absoluteResizeControl).toEqual([]) }) + it('sizeless element shows (Children) in size label', async () => { + const editor = await renderTestEditorWithCode( + makeTestProjectCodeWithSnippet(` +
+
+
+
+
+ `), + 'await-first-dom-report', + ) + await selectComponentsForTest(editor, [ + EP.appendNewElementPath(TestScenePath, ['root', 'sizeless']), + ]) + const sizeLabel = await editor.renderedDOM.findByTestId(SizeLabelTestId) + expect(sizeLabel.textContent).toEqual('(Children) 188 x 161') + }) it('resizes component instances that honour the size properties', async () => { const renderResult = await renderTestEditorWithCode( projectDoesHonourSizeProperties(300, 300), diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx index bb3c629fc264..b0ee4eb21688 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx @@ -100,7 +100,7 @@ export function absoluteResizeBoundingBoxStrategy( controlsToRender: [ controlWithProps({ control: AbsoluteResizeControl, - props: { targets: originalTargets }, + props: { targets: originalTargets, pathsWereReplaced: pathsWereReplaced }, key: 'absolute-resize-control', show: 'visible-except-when-other-strategy-is-active', }), 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 e2ae77e122ef..10bede651574 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 @@ -103,7 +103,7 @@ export function basicResizeStrategy( controlsToRender: [ controlWithProps({ control: AbsoluteResizeControl, - props: { targets: selectedElements }, + props: { targets: selectedElements, pathsWereReplaced: false }, key: 'absolute-resize-control', show: 'always-visible', }), diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx index edef6ea8c388..901f60ad2fc0 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx @@ -102,7 +102,7 @@ export function flexResizeBasicStrategy( controlsToRender: [ controlWithProps({ control: AbsoluteResizeControl, - props: { targets: selectedElements }, + props: { targets: selectedElements, pathsWereReplaced: false }, key: 'absolute-resize-control', show: 'always-visible', }), diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx index dbbd6816f4be..8a5e552fdb43 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx @@ -120,7 +120,7 @@ export function flexResizeStrategy( controlsToRender: [ controlWithProps({ control: AbsoluteResizeControl, - props: { targets: selectedElements }, + props: { targets: selectedElements, pathsWereReplaced: false }, key: 'absolute-resize-control', show: 'always-visible', }), diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx index df70bd9f477c..536ab0cb0f9e 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx @@ -146,7 +146,7 @@ export function keyboardAbsoluteResizeStrategy( controlsToRender: [ controlWithProps({ control: AbsoluteResizeControl, - props: { targets: selectedElements }, + props: { targets: selectedElements, pathsWereReplaced: pathsWereReplaced }, key: 'absolute-resize-control', show: 'visible-except-when-other-strategy-is-active', }), 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 7d5a9b0e3e53..f2c9388cb449 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 @@ -18,7 +18,7 @@ import { useColorTheme } from '../../../../uuiui' import type { EditorDispatch } from '../../../editor/action-types' import { applyCommandsAction } from '../../../editor/actions/action-creators' import { useDispatch } from '../../../editor/store/dispatch-context' -import { getMetadata } from '../../../editor/store/editor-state' +import { AllElementProps, getMetadata } from '../../../editor/store/editor-state' import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook' import type { FixedHugFill } from '../../../inspector/inspector-common' import { @@ -40,12 +40,15 @@ import { isZeroSizedElement } from '../outline-utils' import { useMaybeHighlightElement } from './select-mode-hooks' import { isEdgePositionEqualTo } from '../../canvas-utils' import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers' +import { treatElementAsFragmentLike } from '../../canvas-strategies/strategies/fragment-like-helpers' +import { ElementPathTrees } from '../../../../core/shared/element-path-tree' export const AbsoluteResizeControlTestId = (targets: Array): string => `${targets.map(EP.toString).sort()}-absolute-resize-control` interface AbsoluteResizeControlProps { targets: Array + pathsWereReplaced: boolean } export const SizeLabelID = 'SizeLabel' @@ -56,7 +59,7 @@ function shouldUseSmallElementResizeControl(size: number, scale: number): boolea } export const AbsoluteResizeControl = controlForStrategyMemoized( - ({ targets }: AbsoluteResizeControlProps) => { + ({ targets, pathsWereReplaced }: AbsoluteResizeControlProps) => { const scale = useEditorState( Substores.canvasOffset, (store) => store.editor.canvas.scale, @@ -186,7 +189,7 @@ export const AbsoluteResizeControl = controlForStrategyMemoized( position={{ x: 1, y: 1 }} cursor={CSSCursor.ResizeNWSE} /> - +
) @@ -426,12 +429,27 @@ function sizeLabelGroup(): SizeLabelGroup { } } -export type SizeLabelContents = SizeLabelSize | SizeLabelGroup +export type SizeLabelChildren = { + type: 'SIZE_LABEL_CHILDREN' + h: string + v: string +} + +function sizeLabelChildren(h: string, v: string): SizeLabelChildren { + return { + type: 'SIZE_LABEL_CHILDREN', + h: h, + v: v, + } +} + +export type SizeLabelContents = SizeLabelSize | SizeLabelGroup | SizeLabelChildren function sizeLabelContents( metadata: ElementInstanceMetadataMap, selectedElements: Array, boundingBox: CanvasRectangle | null, + pathsWereReplaced: boolean, ): SizeLabelContents | null { if (selectedElements.length === 0) { return null @@ -456,6 +474,14 @@ function sizeLabelContents( const vertical = detectFillHugFixedState('vertical', metadata, selectedElements[0]).fixedHugFill?.type ?? 'fixed' + + if (pathsWereReplaced) { + return sizeLabelChildren( + sizeLabel(horizontal, globalFrame.width), + sizeLabel(vertical, globalFrame.height), + ) + } + return sizeLabelWithDimensions( sizeLabel(horizontal, globalFrame.width), sizeLabel(vertical, globalFrame.height), @@ -471,6 +497,7 @@ function sizeLabelContents( interface SizeLabelProps { targets: Array + pathsWereReplaced: boolean } const FontSize = 11 @@ -489,13 +516,15 @@ function getLabelText(label: SizeLabelContents | null): string | null { return 'Group' case 'SIZE_LABEL_WITH_DIMENSIONS': return `${label.h} x ${label.v}` + case 'SIZE_LABEL_CHILDREN': + return `(Children) ${label.h} x ${label.v}` default: assertNever(label) } } const SizeLabel = React.memo( - React.forwardRef(({ targets }, ref) => { + React.forwardRef(({ targets, pathsWereReplaced }, ref) => { const scale = useEditorState( Substores.canvas, (store) => store.editor.canvas.scale, @@ -512,7 +541,7 @@ const SizeLabel = React.memo( targets.map((t) => nullIfInfinity(MetadataUtils.getFrameInCanvasCoords(t, metadata))), ) - const label = sizeLabelContents(metadata, targets, boundingBox) + const label = sizeLabelContents(metadata, targets, boundingBox, pathsWereReplaced) const labelText = getLabelText(label) const [dimmed, setDimmed] = React.useState(false)