From feedd6c09f86bb0173db5a06d9a4df0b3cc308d5 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 2 Oct 2024 19:29:59 +0200
Subject: [PATCH] Fix exception in gap-utils (#6454)

**Problem:**
After https://github.com/concrete-utopia/utopia/pull/6410 , it is
possible that specialSizeMeasurements.gridCellGlobalFrames is outdated,
and if the number of rows/columns changed, it can even have the wrong
number of rows/columns compared to information in other parts of the
metadata.

**Fix:**
Change gridGapControlBoundsFromMetadata in a way that it is resilient to
these problems. The metadata will be eventually fixed when the grid
controls are on (and the gap controls are only visible in that case).

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/gap-utils.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index 07a945aae2b8..a8cbe955a64c 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -229,17 +229,17 @@ export function gridGapControlBoundsFromMetadata(
     x: gridCellBounds[0][0].x - parentGridBounds.x,
     y: gridCellBounds[0][0].y - parentGridBounds.y,
     width:
-      gridCellBounds[0][gridColumns - 1].x +
-      gridCellBounds[0][gridColumns - 1].width -
+      gridCellBounds[0][gridCellBounds[0].length - 1].x +
+      gridCellBounds[0][gridCellBounds[0].length - 1].width -
       gridCellBounds[0][0].x,
     height:
-      gridCellBounds[gridRows - 1][0].y +
-      gridCellBounds[gridRows - 1][0].height -
+      gridCellBounds[gridCellBounds.length - 1][0].y +
+      gridCellBounds[gridCellBounds.length - 1][0].height -
       gridCellBounds[0][0].y,
   })
 
   // row gaps array
-  const rowGaps = createArrayWithLength(gridRows - 1, (i) => {
+  const rowGaps = createArrayWithLength(gridCellBounds.length - 1, (i) => {
     // cell i represents the gap between child [i * gridColumns] and child [(i+1) * gridColumns]
     const firstChildBounds = gridCellBounds[i][0]
     const secondChildBounds = gridCellBounds[i + 1][0]
@@ -257,7 +257,7 @@ export function gridGapControlBoundsFromMetadata(
   })
 
   // column gaps array
-  const columnGaps = createArrayWithLength(gridColumns - 1, (i) => {
+  const columnGaps = createArrayWithLength(gridCellBounds[0].length - 1, (i) => {
     // cell i represents the gap between child [i] and child [i + 1]
     const firstChildBounds = gridCellBounds[0][i]
     const secondChildBounds = gridCellBounds[0][i + 1]