From df09eca0711a9037f93554709d8645b85acfdeb9 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 2 Oct 2024 10:41:12 +0100
Subject: [PATCH] fix(grids) Scale Placeholder Borders (#6444)

- Change `gridPlaceholderBorder` to take a value for scale.
- Change `scaleRef` to be a regular `scale` value in `GridControls` as
it needs to be passed to `gridPlaceholderBorder` all the time.
---
 .../canvas/controls/grid-controls.tsx         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 556b3fab8f1c..c651f64879d4 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -641,7 +641,11 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
   const features = useRollYourOwnFeatures()
 
   const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
-  const scaleRef = useRefEditorState((store) => store.editor.canvas.scale)
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridControls scale',
+  )
   const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
 
   const activelyDraggingOrResizingCell = useEditorState(
@@ -811,7 +815,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
         setInitialShadowFrame(params.frame)
 
         const start = windowToCanvasCoordinates(
-          scaleRef.current,
+          scale,
           canvasOffsetRef.current,
           windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
         )
@@ -827,7 +831,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
           ),
         ])
       },
-    [canvasOffsetRef, dispatch, scaleRef],
+    [canvasOffsetRef, dispatch, scale],
   )
 
   // NOTE: this stuff is meant to be temporary, until we settle on the set of interaction pieces we like.
@@ -976,19 +980,19 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                     id={id}
                     data-testid={id}
                     style={{
-                      borderTop: gridPlaceholderBorder(borderColor),
-                      borderLeft: gridPlaceholderBorder(borderColor),
+                      borderTop: gridPlaceholderBorder(borderColor, scale),
+                      borderLeft: gridPlaceholderBorder(borderColor, scale),
                       borderBottom:
                         isActiveCell ||
                         countedRow >= grid.rows ||
                         (grid.rowGap != null && grid.rowGap > 0)
-                          ? gridPlaceholderBorder(borderColor)
+                          ? gridPlaceholderBorder(borderColor, scale)
                           : undefined,
                       borderRight:
                         isActiveCell ||
                         countedColumn >= grid.columns ||
                         (grid.columnGap != null && grid.columnGap > 0)
-                          ? gridPlaceholderBorder(borderColor)
+                          ? gridPlaceholderBorder(borderColor, scale)
                           : undefined,
                       position: 'relative',
                       pointerEvents: 'initial',
@@ -1797,7 +1801,7 @@ function gridKeyFromPath(path: ElementPath): string {
   return `grid-${EP.toString(path)}`
 }
 
-const gridPlaceholderBorder = (color: string) => `2px solid ${color}`
+const gridPlaceholderBorder = (color: string, scale: number) => `${2 / scale}px solid ${color}`
 
 export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithProps<any> {
   return {