Don't allow negative values when resizing grids (#6407)

**Problem:** Resizing a grid col/row can lead to setting negative values. **Fix:** Clamp post-drag values to be ≥ 0. Fixes #6406
concrete-utopia · Sep 24, 2024 · c949425 · c949425
1 parent 342d61c
commit c949425
Showing 1 changed file with 10 additions and 14 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -157,24 +157,21 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const precision = modifiers.cmd ? 'coarse' : 'precise'
       const areaName = mergedValues.dimensions[control.columnOrRow]?.areaName ?? null
 
-      const newValue = gridCSSNumber(
-        cssNumber(
-          newResizedValue(
-            mergedValue.value,
-            getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
-            precision,
-            isFractional,
-          ),
-          mergedUnit.value,
+      const newValue = Math.max(
+        0,
+        newResizedValue(
+          mergedValue.value,
+          getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
+          precision,
+          isFractional,
         ),
-        areaName,
       )
 
       const newDimensions = replaceGridTemplateDimensionAtIndex(
         originalValues.dimensions,
         expandedOriginalValues,
         control.columnOrRow,
-        newValue,
+        gridCSSNumber(cssNumber(newValue, mergedUnit.value), areaName),
       )
 
       const propertyValueAsString = printArrayGridDimensions(newDimensions)
@@ -202,7 +199,7 @@ function getNewDragValue(
   isFractional: boolean,
   possibleCalculatedValue: Either<string, number>,
   mergedValue: Either<string, number>,
-) {
+): number {
   if (!isFractional) {
     return dragAmount
   }
@@ -219,8 +216,7 @@ function getNewDragValue(
   const calculatedValue = possibleCalculatedValue.value
   const perPointOne =
     mergedFractionalValue == 0 ? 10 : (calculatedValue / mergedFractionalValue) * 0.1
-  const newValue = roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
-  return newValue
+  return roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
 }
 
 function newResizedValue(