Detect stretch when resizing grid cell (#6436)

**Problem:** The grid cell resize handles should be shown when the child is stretching as well as filling the cell. **Fix:** Do that. Fixes #6435
concrete-utopia · Oct 1, 2024 · ddcec3d · ddcec3d
1 parent 9ac163c
commit ddcec3d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/...onents/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/...onents/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -340,6 +340,26 @@ export var storyboard = (
       }
     })
   })
+
+  it('also works for stretching cells', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await runCellResizeTest(
+      editor,
+      'column-end',
+      gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10),
+      EP.fromString('sb/scene/grid/eee'),
+    )
+
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+      editor.renderedDOM.getByTestId('grid-child-stretch').style
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '11',
+      gridColumnStart: '4',
+      gridRowStart: '4',
+      gridRowEnd: 'auto',
+    })
+  })
 })
 
 const ProjectCode = `import * as React from 'react'
@@ -425,6 +445,17 @@ export var storyboard = (
           data-uid='ddd'
           data-testid='grid-child'
         />
+        <div
+          style={{
+            backgroundColor: '#9f0',
+            alignSelf: 'stretch',
+            justifySelf: 'stretch',
+            gridColumn: 4,
+            gridRow: 4,
+          }}
+          data-uid='eee'
+          data-testid='grid-child-stretch'
+        />
       </div>
     </Scene>
   </Storyboard>

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -38,12 +38,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const isFillContainer = isFixedHugFillModeApplied(
-    canvasState.startingMetadata,
-    selectedElement,
-    'fill',
-  )
-  if (!isFillContainer) {
+  const isFillOrStretchContainer =
+    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill') ||
+    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'stretch')
+  if (!isFillOrStretchContainer) {
     return null
   }
 

diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
@@ -679,14 +679,23 @@ export function detectFillHugFixedState(
   )
 
   if (MetadataUtils.isGridCell(metadata, elementPath)) {
-    if (
+    const isStretchingExplicitly =
       (element.specialSizeMeasurements.alignSelf === 'stretch' &&
         axis === 'horizontal' &&
         width == null) ||
       (element.specialSizeMeasurements.justifySelf === 'stretch' &&
         axis === 'vertical' &&
         height == null)
-    ) {
+
+    const isStretchingImplicitly =
+      width == null &&
+      height == null &&
+      (element.specialSizeMeasurements.alignSelf == null ||
+        element.specialSizeMeasurements.alignSelf === 'auto') &&
+      (element.specialSizeMeasurements.justifySelf == null ||
+        element.specialSizeMeasurements.justifySelf === 'auto')
+
+    if (isStretchingExplicitly || isStretchingImplicitly) {
       return { fixedHugFill: { type: 'stretch' }, controlStatus: 'detected' }
     }
   }