Fix resizing grid for extra cells

editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx

@@ -249,7 +249,7 @@ export var storyboard = (
         width: 600,
         height: 600,
         gridTemplateColumns: '2.4fr 1fr 1fr',
-        gridTemplateRows: '99px 129px 90px',
+        gridTemplateRows: '99px 129px 90px 0px',
         height: 'max-content',
       }}
     >

editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts

@@ -15,10 +15,12 @@ import {
 import type { InteractionSession } from '../interaction-state'
 import type { GridCSSNumber } from '../../../../components/inspector/common/css-utils'
 import { printArrayCSSNumber } from '../../../../components/inspector/common/css-utils'
-import { anyBy, modify, toFirst } from '../../../../core/shared/optics/optic-utilities'
+import { modify, toFirst } from '../../../../core/shared/optics/optic-utilities'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
-import { isRight } from '../../../../core/shared/either'
+import type { Either } from '../../../../core/shared/either'
+import { foldEither, isRight } from '../../../../core/shared/either'
 import { roundToNearestWhole } from '../../../../core/shared/math-utils'
+import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
 
 export const resizeGridStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -76,6 +78,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 
       const gridSpecialSizeMeasurements =
         canvasState.startingMetadata[EP.toString(gridPath)].specialSizeMeasurements
+
       const originalValues =
         control.axis === 'column'
           ? gridSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateColumns
@@ -93,31 +96,40 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       ) {
         return emptyStrategyApplicationResult
       }
+
+      const mergedValues: GridAutoOrTemplateBase = {
+        type: calculatedValues.type,
+        dimensions: calculatedValues.dimensions.map((dim, index) => {
+          if (index < originalValues.dimensions.length) {
+            return originalValues.dimensions[index]
+          }
+          return dim
+        }),
+      }
+
       const unitOptic = fromArrayIndex<GridCSSNumber>(control.columnOrRow)
         .compose(fromField('unit'))
         .compose(notNull())
       const valueOptic = fromArrayIndex<GridCSSNumber>(control.columnOrRow).compose(
         fromField('value'),
       )
-      const isFractional = anyBy(unitOptic, (unit) => unit === 'fr', originalValues.dimensions)
-      let newSetting: Array<GridCSSNumber>
-      const originalDimensions = originalValues.dimensions
-      if (isFractional) {
-        const possibleOriginalFractionalValue = toFirst(valueOptic, originalValues.dimensions)
-        const possibleCalculatedValue = toFirst(valueOptic, calculatedValues.dimensions)
-        if (isRight(possibleOriginalFractionalValue) && isRight(possibleCalculatedValue)) {
-          const originalFractionalValue = possibleOriginalFractionalValue.value
-          const calculatedValue = possibleCalculatedValue.value
-          const perPointOne =
-            originalFractionalValue == 0 ? 10 : (calculatedValue / originalFractionalValue) * 0.1
-          const newValue = roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
-          newSetting = modify(valueOptic, (current) => current + newValue, originalDimensions)
-        } else {
-          throw new Error(`Somehow we cannot identify the right dimensions.`)
-        }
-      } else {
-        newSetting = modify(valueOptic, (current) => current + dragAmount, originalDimensions)
-      }
+
+      const calculatedValue = toFirst(valueOptic, calculatedValues.dimensions)
+      const mergedValue = toFirst(valueOptic, mergedValues.dimensions)
+      const mergedUnit = toFirst(unitOptic, mergedValues.dimensions)
+
+      const newSetting = modify(
+        valueOptic,
+        (current) =>
+          current +
+          getNewDragValue(
+            dragAmount,
+            isRight(mergedUnit) && mergedUnit.value === 'fr',
+            calculatedValue,
+            mergedValue,
+          ),
+        mergedValues.dimensions,
+      )
       const propertyValueAsString = printArrayCSSNumber(newSetting)
 
       const commands = [
@@ -137,3 +149,29 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
     },
   }
 }
+
+function getNewDragValue(
+  dragAmount: number,
+  isFractional: boolean,
+  possibleCalculatedValue: Either<string, number>,
+  mergedValue: Either<string, number>,
+) {
+  if (!isFractional) {
+    return dragAmount
+  }
+
+  if (!isRight(possibleCalculatedValue)) {
+    return 0
+  }
+
+  const mergedFractionalValue = foldEither(
+    () => 0,
+    (r) => r,
+    mergedValue,
+  )
+  const calculatedValue = possibleCalculatedValue.value
+  const perPointOne =
+    mergedFractionalValue == 0 ? 10 : (calculatedValue / mergedFractionalValue) * 0.1
+  const newValue = roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
+  return newValue
+}