Resize grid with precision modifier (#6104)

**Problem:**

It should be possible to use the `cmd` modifier key to apply a coarse
precision when resizing grid cols/rows similarly to other resizing
strategies.

**Fix:**

When `cmd` is pressed, adjust col/rows size in steps of `10` for pixel
values and `.5` for fractional values.



https://github.com/user-attachments/assets/cfb61a5d-8712-4082-a084-c233968d8d4d



Fixes #6103

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

@@ -70,6 +70,8 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
+      const modifiers = interactionSession.interactionData.modifiers
+
       const control = interactionSession.activeControl
       const drag = interactionSession.interactionData.drag
       const dragAmount = control.axis === 'column' ? drag.x : drag.y
@@ -117,16 +119,17 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const calculatedValue = toFirst(valueOptic, calculatedValues.dimensions)
       const mergedValue = toFirst(valueOptic, mergedValues.dimensions)
       const mergedUnit = toFirst(unitOptic, mergedValues.dimensions)
+      const isFractional = isRight(mergedUnit) && mergedUnit.value === 'fr'
+      const precision = modifiers.cmd ? 'coarse' : 'precise'
 
       const newSetting = modify(
         valueOptic,
         (current) =>
-          current +
-          getNewDragValue(
-            dragAmount,
-            isRight(mergedUnit) && mergedUnit.value === 'fr',
-            calculatedValue,
-            mergedValue,
+          newResizedValue(
+            current,
+            getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
+            precision,
+            isFractional,
           ),
         mergedValues.dimensions,
       )
@@ -175,3 +178,21 @@ function getNewDragValue(
   const newValue = roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
   return newValue
 }
+
+function newResizedValue(
+  current: number,
+  increment: number,
+  precision: 'coarse' | 'precise',
+  isFractional: boolean,
+): number {
+  const newValue = current + increment
+  if (precision === 'precise') {
+    return newValue
+  } else if (isFractional) {
+    // .5x steps
+    return Math.round(newValue * 2) / 2
+  } else {
+    // 10x steps
+    return Math.round(newValue / 10) * 10
+  }
+}