fix converting a group to flex (#4406)

concrete-utopia · Oct 20, 2023 · fe24de6 · fe24de6
1 parent 3dc830a
commit fe24de6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/editor/src/components/common/shared-strategies/convert-to-flex-strategy.spec.browser2.tsx b/editor/src/components/common/shared-strategies/convert-to-flex-strategy.spec.browser2.tsx
@@ -4,12 +4,10 @@ import * as EP from '../../../core/shared/element-path'
 import { shiftModifier } from '../../../utils/modifiers'
 import { expectSingleUndo2Saves, selectComponentsForTest } from '../../../utils/utils.test-utils'
 import { getRegularNavigatorTargets } from '../../canvas/canvas-strategies/strategies/fragment-like-helpers.test-utils'
-import { edgePosition } from '../../canvas/canvas-types'
 import { pressKey } from '../../canvas/event-helpers.test-utils'
 import type { EditorRenderResult } from '../../canvas/ui-jsx.test-utils'
 import {
   getPrintedUiJsCode,
-  getPrintedUiJsCodeWithoutUIDs,
   makeTestProjectCodeWithSnippet,
   renderTestEditorWithCode,
   TestAppUID,
@@ -420,6 +418,7 @@ describe('Smart Convert To Flex', () => {
   `),
     )
   })
+
   it('can convert zero-sized element with absolute children into a flex layout', async () => {
     const renderResult = await renderTestEditorWithCode(
       makeTestProjectCodeWithSnippet(`<div
@@ -543,6 +542,36 @@ describe('Smart Convert To Flex', () => {
 `),
     )
   })
+
+  it('converts groups correctly', async () => {
+    const editor = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet(
+        `
+			<div style={{ ...props.style }} data-uid='a'>
+				<Group data-uid='parent' style={{ position: 'absolute', left: 0, top: 0, width: 349, height: 239 }}>
+					<div data-uid='foo' style={{ backgroundColor: '#aaaaaa33', position: 'absolute', left: 0, top: 0, width: 159, height: 131 }} />
+					<div data-uid='bar' style={{ backgroundColor: '#aaaaaa33', position: 'absolute', left: 190, top: 108, width: 159, height: 131 }} />
+				</Group>
+			</div>
+	  `,
+      ),
+
+      'await-first-dom-report',
+    )
+
+    await convertParentToFlex(editor)
+
+    expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+      makeTestProjectCodeWithSnippet(`
+		<div style={{ ...props.style }} data-uid='a'>
+			<div data-uid='parent' style={{ position: 'absolute', top: 0, left: 0, width: 'max-content', height: 'max-content', display: 'flex', flexDirection: 'row', gap: 31 }}>
+				<div data-uid='foo' style={{ backgroundColor: '#aaaaaa33', width: 159, height: 131, contain: 'layout' }} />
+				<div data-uid='bar' style={{ backgroundColor: '#aaaaaa33', width: 159, height: 131, contain: 'layout' }} />
+			</div>
+		</div>
+	`),
+    )
+  })
 })
 
 describe('Smart Convert to Flex Reordering Children if Needed', () => {

diff --git a/editor/src/components/common/shared-strategies/convert-to-flex-strategy.ts b/editor/src/components/common/shared-strategies/convert-to-flex-strategy.ts
@@ -9,29 +9,31 @@ import type {
 } from '../../../core/shared/element-template'
 import { isJSXElementLike, jsxFragment } from '../../../core/shared/element-template'
 import {
-  type CanvasRectangle,
   boundingRectangleArray,
+  getRectCenter,
   nullIfInfinity,
   zeroCanvasRect,
-  getRectCenter,
+  type CanvasRectangle,
 } from '../../../core/shared/math-utils'
 import type { ElementPath } from '../../../core/shared/project-file-types'
 import * as PP from '../../../core/shared/property-path'
 import { assertNever, fastForEach } from '../../../core/shared/utils'
-import type { JSXFragmentConversion } from '../../canvas/canvas-strategies/strategies/group-conversion-helpers'
-import { actuallyConvertFramentToFrame } from '../../canvas/canvas-strategies/strategies/group-conversion-helpers'
 import {
   getElementFragmentLikeType,
   isElementNonDOMElement,
   replaceFragmentLikePathsWithTheirChildrenRecursive,
   replaceNonDOMElementPathsWithTheirChildrenRecursive,
 } from '../../canvas/canvas-strategies/strategies/fragment-like-helpers'
+import type { JSXFragmentConversion } from '../../canvas/canvas-strategies/strategies/group-conversion-helpers'
+import { actuallyConvertFramentToFrame } from '../../canvas/canvas-strategies/strategies/group-conversion-helpers'
+import { treatElementAsGroupLike } from '../../canvas/canvas-strategies/strategies/group-helpers'
 import type { CanvasFrameAndTarget } from '../../canvas/canvas-types'
 import type { CanvasCommand } from '../../canvas/commands/commands'
 import { rearrangeChildren } from '../../canvas/commands/rearrange-children-command'
 import { setProperty, setPropertyOmitNullProp } from '../../canvas/commands/set-property-command'
 import { showToastCommand } from '../../canvas/commands/show-toast-command'
 import type { AllElementProps } from '../../editor/store/editor-state'
+import type { FlexDirection } from '../../inspector/common/css-utils'
 import {
   childIs100PercentSizedInEitherDirection,
   convertWidthToFlexGrowOptionally,
@@ -40,7 +42,6 @@ import {
   sizeToVisualDimensions,
 } from '../../inspector/inspector-common'
 import { setHugContentForAxis } from '../../inspector/inspector-strategies/hug-contents-basic-strategy'
-import type { FlexDirection } from '../../inspector/common/css-utils'
 
 type FlexDirectionRowColumn = 'row' | 'column' // a limited subset as we won't never guess row-reverse or column-reverse
 type FlexAlignItems = 'center' | 'flex-end'
@@ -212,7 +213,7 @@ function ifElementIsFragmentLikeFirstConvertItToFrame(
     return []
   }
 
-  if (type == 'fragment' || type == 'sizeless-div') {
+  if (type == 'fragment' || type == 'sizeless-div' || treatElementAsGroupLike(metadata, target)) {
     const childInstances = mapDropNulls(
       (path) => MetadataUtils.findElementByElementPath(metadata, path),
       replaceFragmentLikePathsWithTheirChildrenRecursive(