From 9bb65361cec5284e5b278735be32f99760fe3361 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:49:34 +0200
Subject: [PATCH] Hide grid resize handles on both sides when too crowded
 (#6449)

**Problem:**

If even one side of a grid is too crowded for resize controls, hide the
controls on the other side as well.

**Fix:**

1. Move the check for crowdedness to cover both axii
2. Ensure that the crowdedness check works fine with very narrow
cols/rows (shorter than the resize handle) but there is still room
enough to display the handles



https://github.com/user-attachments/assets/52e81327-b159-413a-b74c-34fd554a6e29



Fixes #6447
---
 .../canvas/controls/grid-controls.tsx         | 54 ++++++++++++++-----
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index c651f64879d4..6c9958557dd7 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -405,12 +405,6 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     })
   }, [props.fromPropsAxisValues, resizingIndex])
 
-  const scale = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'GridResizing scale',
-  )
-
   if (props.axisValues == null) {
     return null
   }
@@ -419,11 +413,6 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
       const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale
       const dimensions = props.axisValues.dimensions
 
-      const hideControls = dimensions.some((dim) => {
-        const scaledSize = (dim.type === 'NUMBER' ? dim.value.value : 0) * scale
-        return scaledSize < GRID_RESIZE_HANDLE_SIZE
-      })
-
       return (
         <div
           style={{
@@ -448,7 +437,6 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 : undefined,
             paddingTop:
               props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
-            visibility: hideControls ? 'hidden' : 'visible',
           }}
         >
           {dimensions.flatMap((dimension, dimensionIndex) => {
@@ -594,9 +582,47 @@ export const GridRowColumnResizingControls =
       }, 0)
     }
 
+    const scale = useEditorState(
+      Substores.canvas,
+      (store) => store.editor.canvas.scale,
+      'GridRowColumnResizingControls scale',
+    )
+
+    const gridsWithVisibleResizeControls = React.useMemo(() => {
+      return grids.filter((grid) => {
+        if (
+          grid.gridTemplateColumns?.type !== 'DIMENSIONS' ||
+          grid.gridTemplateRows?.type !== 'DIMENSIONS'
+        ) {
+          return false
+        }
+
+        // returns whether the rendered dimensions are too crowded, as in there are two cols/rows that are closer than the handle sizes
+        function tooCrowded(dimensions: GridDimension[]): boolean {
+          const visualSizes = dimensions.map(
+            (dim) => (dim.type === 'NUMBER' ? dim.value.value : 0) * scale,
+          )
+          return visualSizes.some((dim, index) => {
+            if (index < visualSizes.length - 1) {
+              const next = visualSizes[index + 1]
+              if (dim + next < GRID_RESIZE_HANDLE_SIZE * 2) {
+                return true
+              }
+            }
+            return false
+          })
+        }
+
+        return (
+          !tooCrowded(grid.gridTemplateColumns.dimensions) &&
+          !tooCrowded(grid.gridTemplateRows.dimensions)
+        )
+      })
+    }, [scale, grids])
+
     return (
       <CanvasOffsetWrapper>
-        {grids.flatMap((grid) => {
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
           return (
             <GridResizing
               key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
@@ -610,7 +636,7 @@ export const GridRowColumnResizingControls =
             />
           )
         })}
-        {grids.flatMap((grid) => {
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
           return (
             <GridResizing
               key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}