New kind of resize control size label (#4398)

* New kind of size label when children is shown instead of sizeless parent

* New FixedHugFill type: Scaled

* Fix scaled cases

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(`
+        <div style={{ width: '100%', height: '100%' }} data-uid='root'>
+          <div
+            style={{
+              backgroundColor: '#aaaaaa33',
+              position: 'absolute',
+            }}
+            data-uid='sizeless'
+          >
+            <div
+              style={{
+                backgroundColor: '#aaaaaa33',
+                position: 'absolute',
+                left: 179,
+                top: 114,
+                width: 188,
+                height: 161,
+              }}
+              data-uid='child'
+            />
+          </div>
+        </div>
+      `),
+      '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),

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',
       }),

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',
       }),

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',
       }),

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',
       }),

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',
       }),

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<ElementPath>): string =>
   `${targets.map(EP.toString).sort()}-absolute-resize-control`
 
 interface AbsoluteResizeControlProps {
   targets: Array<ElementPath>
+  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}
           />
-          <SizeLabel ref={resizeRef} targets={targets} />
+          <SizeLabel ref={resizeRef} targets={targets} pathsWereReplaced={pathsWereReplaced} />
         </div>
       </CanvasOffsetWrapper>
     )
@@ -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<ElementPath>,
   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<ElementPath>
+  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<HTMLDivElement, SizeLabelProps>(({ targets }, ref) => {
+  React.forwardRef<HTMLDivElement, SizeLabelProps>(({ 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)