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)