From aebb64fa9b6ae321c8218f37cf822bf777fca683 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:55:46 +0200
Subject: [PATCH] Slower .1 resize for grid rows/cols with fractional units
 (#6523)

**Problem:**

Resizing a grid's col/row with fractional unit is very fast (too fast).

**Fix:**

Adjust the calculation of the new drag value so it slows down to
effectively more discernible .1 steps.

| Before | After |
|-------|----------|
| ![Kapture 2024-10-11 at 13 48
38](https://github.com/user-attachments/assets/171befd9-03aa-4070-b88d-08b42e9e6d63)
| ![Kapture 2024-10-11 at 13 48
09](https://github.com/user-attachments/assets/5683c313-c830-4a69-8497-95a442c6557d)
|

Fixes #6522
---
 .../resize-grid-strategy.spec.browser2.tsx    |  8 ++---
 .../strategies/resize-grid-strategy.ts        | 29 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
index c829dc823ae4..35a0c8c4dfa6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
@@ -112,7 +112,7 @@ describe('resize a grid', () => {
       y: resizeControlRect.y + resizeControlRect.height / 2,
     })
     const endPoint = canvasPoint({
-      x: startPoint.x + 20,
+      x: startPoint.x + 100,
       y: startPoint.y,
     })
     await mouseMoveToPoint(resizeControl, startPoint)
@@ -138,7 +138,7 @@ export var storyboard = (
         gap: 10,
         width: 600,
         height: 600,
-        gridTemplateColumns: '2.4fr 2.5fr 1fr',
+        gridTemplateColumns: '2.4fr 1.8fr 1fr',
         gridTemplateRows: '99px 109px 90px',
         height: 'max-content',
       }}
@@ -344,7 +344,7 @@ export var storyboard = (
       y: resizeControlRect.y + resizeControlRect.height / 2,
     })
     const endPoint = canvasPoint({
-      x: startPoint.x + 20,
+      x: startPoint.x + 100,
       y: startPoint.y,
     })
     await mouseMoveToPoint(resizeControl, startPoint)
@@ -370,7 +370,7 @@ export var storyboard = (
         gap: 10,
         width: 600,
         height: 600,
-        gridTemplateColumns: 'repeat(3, 2fr)',
+        gridTemplateColumns: 'repeat(3, 1.5fr)',
         gridTemplateRows: '99px 109px 90px',
         height: 'max-content',
       }}
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
index 03c9d34d3976..c3ba580f450c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -32,7 +32,7 @@ import {
 import { toFirst } from '../../../../core/shared/optics/optic-utilities'
 import type { Either } from '../../../../core/shared/either'
 import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
-import { roundToNearestWhole } from '../../../../core/shared/math-utils'
+import { roundTo, roundToNearestWhole } from '../../../../core/shared/math-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
 import { expandGridDimensions, replaceGridTemplateDimensionAtIndex } from './grid-helpers'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -143,6 +143,9 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         .compose(fromField('value'))
 
       const calculatedValue = toFirst(valueOptic, calculatedValues.dimensions)
+      if (isLeft(calculatedValue)) {
+        return emptyStrategyApplicationResult
+      }
       const mergedValue = toFirst(valueOptic, mergedValues.dimensions)
       if (isLeft(mergedValue)) {
         return emptyStrategyApplicationResult
@@ -160,7 +163,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         0,
         newResizedValue(
           mergedValue.value,
-          getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
+          getNewDragValue(dragAmount, isFractional, calculatedValue.value, mergedValue.value),
           precision,
           isFractional,
         ),
@@ -195,26 +198,24 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 function getNewDragValue(
   dragAmount: number,
   isFractional: boolean,
-  possibleCalculatedValue: Either<string, number>,
-  mergedValue: Either<string, number>,
+  calculatedValue: number,
+  mergedValue: number,
 ): number {
   if (!isFractional) {
     return dragAmount
   }
 
-  if (!isRight(possibleCalculatedValue)) {
+  if (calculatedValue === 0) {
     return 0
   }
 
-  const mergedFractionalValue = foldEither(
-    () => 0,
-    (r) => r,
-    mergedValue,
-  )
-  const calculatedValue = possibleCalculatedValue.value
-  const perPointOne =
-    mergedFractionalValue == 0 ? 10 : (calculatedValue / mergedFractionalValue) * 0.1
-  return roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
+  // for fr units, adjust the value to proportionally to .1
+  let proportionalResize = calculatedValue * 0.1
+  if (mergedValue !== 0) {
+    proportionalResize /= mergedValue
+  }
+
+  return roundToNearestWhole(dragAmount / proportionalResize) * 0.1
 }
 
 function newResizedValue(