From 9c831a1ce48087f31a6ae5575374ffedbed1ab29 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 16 Oct 2024 09:52:38 +0200
Subject: [PATCH] Fallback striped area size when resizing grid cols/rows
 (#6543)

**Problem:**

When resizing a grid col/row if the counterpart has no size, the striped
area collapses to `0` pixels.

**Fix:**

Fallback to the frame size if the counterpart axis has no size. Also,
disable the mouse event if the dimension is not set.

| Before | After |
|------|--------|
| ![Kapture 2024-10-15 at 21 19
53](https://github.com/user-attachments/assets/e9bdcceb-07a5-4b70-9f31-7e6d8dc3b6fe)
| ![Kapture 2024-10-15 at 21 19
37](https://github.com/user-attachments/assets/dfa0b547-e7f7-48a5-a2ae-b3c173640ba8)
|


Fixes #6542
---
 .../canvas/controls/grid-controls.tsx         | 48 +++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 685a0cf2d6fd..00c211396b2a 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -74,14 +74,9 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import type {
-  GridControlsProps,
-  GridData,
-  GridMeasurementHelperData,
-} from './grid-controls-for-strategies'
+import type { GridControlsProps, GridData } from './grid-controls-for-strategies'
 import {
   edgePositionToGridResizeEdge,
-  getNullableAutoOrTemplateBaseString,
   GridCellTestId,
   GridControlKey,
   gridEdgeToEdgePosition,
@@ -148,8 +143,22 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
 
+  const canResize = React.useMemo(() => {
+    return (
+      props.fromPropsAxisValues?.type === 'DIMENSIONS' &&
+      props.fromPropsAxisValues.dimensions.length > 0
+    )
+  }, [props.fromPropsAxisValues])
+
   const mouseDownHandler = React.useCallback(
     (event: React.MouseEvent): void => {
+      event.stopPropagation()
+      event.preventDefault()
+
+      if (!canResize) {
+        return
+      }
+
       function mouseUpHandler() {
         setResizingIndex(null)
         window.removeEventListener('mouseup', mouseUpHandler)
@@ -173,10 +182,8 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
           ),
         ),
       ])
-      event.stopPropagation()
-      event.preventDefault()
     },
-    [canvasOffset, dispatch, props.axis, props.dimensionIndex, scale, setResizingIndex],
+    [canvasOffset, dispatch, props.axis, props.dimensionIndex, scale, setResizingIndex, canResize],
   )
 
   const { maybeClearHighlightsOnHoverEnd } = useMaybeHighlightElement()
@@ -229,7 +236,9 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          cursor: gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start'),
+          cursor: canResize
+            ? gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start')
+            : 'default',
           pointerEvents: 'initial',
         }}
         onMouseDown={mouseDownHandler}
@@ -452,16 +461,23 @@ export const GridRowColumnResizingControlsComponent = ({
 }: GridRowColumnResizingControlsProps) => {
   const grids = useGridData([target])
 
-  function getStripedAreaLength(template: GridAutoOrTemplateBase | null, gap: number) {
+  function getStripedAreaLength(
+    template: GridAutoOrTemplateBase | null,
+    gap: number,
+  ): number | null {
     if (template?.type !== 'DIMENSIONS') {
       return null
     }
-    return template.dimensions.reduce((acc, curr, index) => {
+    const fromDimensions = template.dimensions.reduce((acc, curr, index) => {
       if (curr.type === 'NUMBER') {
         return acc + curr.value.value + (index > 0 ? gap : 0)
       }
       return acc
     }, 0)
+    if (fromDimensions <= 0) {
+      return null
+    }
+    return fromDimensions
   }
 
   const scale = useEditorState(
@@ -514,7 +530,9 @@ export const GridRowColumnResizingControlsComponent = ({
             axis={'column'}
             gap={grid.columnGap ?? grid.gap}
             padding={grid.padding}
-            stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
+            stripedAreaLength={
+              getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0) ?? grid.frame.height
+            }
             alignContent={grid.justifyContent}
             justifyContent={grid.alignContent}
           />
@@ -530,7 +548,9 @@ export const GridRowColumnResizingControlsComponent = ({
             axis={'row'}
             gap={grid.rowGap ?? grid.gap}
             padding={grid.padding}
-            stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
+            stripedAreaLength={
+              getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0) ?? grid.frame.width
+            }
             alignContent={grid.alignContent}
             justifyContent={grid.justifyContent}
           />