From 70acabd599bb1d671744a97ce4a65347b623ffad Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 12 Jul 2024 15:48:17 +0200
Subject: [PATCH] refactor

---
 .../strategies/resize-grid-strategy.ts        | 68 +++++++++++++------
 1 file changed, 46 insertions(+), 22 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
index ca600f0b77c9..8529ce0ad21d 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
@@ -17,6 +17,7 @@ import type { GridCSSNumber } from '../../../../components/inspector/common/css-
 import { printArrayCSSNumber } from '../../../../components/inspector/common/css-utils'
 import { modify, toFirst } from '../../../../core/shared/optics/optic-utilities'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+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'
@@ -106,32 +107,29 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         }),
       }
 
+      const unitOptic = fromArrayIndex<GridCSSNumber>(control.columnOrRow).compose(
+        fromField('unit'),
+      )
       const valueOptic = fromArrayIndex<GridCSSNumber>(control.columnOrRow).compose(
         fromField('value'),
       )
 
-      const isFractional = mergedValues.dimensions.at(control.columnOrRow)?.unit === 'fr'
-
-      let newSetting: Array<GridCSSNumber>
-      if (isFractional) {
-        const possibleCalculatedValue = toFirst(valueOptic, calculatedValues.dimensions)
-        if (isRight(possibleCalculatedValue)) {
-          const mergedFractionalValue = foldEither(
-            () => 0,
-            (r) => r,
-            toFirst(valueOptic, mergedValues.dimensions),
-          )
-          const calculatedValue = possibleCalculatedValue.value
-          const perPointOne =
-            mergedFractionalValue == 0 ? 10 : (calculatedValue / mergedFractionalValue) * 0.1
-          const newValue = roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
-          newSetting = modify(valueOptic, (current) => current + newValue, mergedValues.dimensions)
-        } else {
-          throw new Error(`Somehow we cannot identify the right dimensions.`)
-        }
-      } else {
-        newSetting = modify(valueOptic, (current) => current + dragAmount, mergedValues.dimensions)
-      }
+      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 = [
@@ -151,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
+}