From 764f2588df8cb0c57e3d9ebb12cd5d10535a20c9 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:51:40 +0000
Subject: [PATCH] fix(canvas) Correct Pin Outline Positioning (#6595)

- Shift pin outlines up and to the left by 0.5, scaled to the scale.
---
 .../components/canvas/controls/position-outline.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/controls/position-outline.tsx b/editor/src/components/canvas/controls/position-outline.tsx
index 8de8bb92a96c..a9601dc2f32b 100644
--- a/editor/src/components/canvas/controls/position-outline.tsx
+++ b/editor/src/components/canvas/controls/position-outline.tsx
@@ -191,22 +191,27 @@ interface PinOutlineProps {
   scale: number
 }
 
+const PinOutlineUnscaledSize = 1
+
 const PinOutline = React.memo((props: PinOutlineProps): JSX.Element => {
   const colorTheme = useColorTheme()
   const width = props.isHorizontalLine ? props.size : 0
   const height = props.isHorizontalLine ? 0 : props.size
   const borderTop = props.isHorizontalLine
-    ? `${1 / props.scale}px dashed ${colorTheme.primary.value}`
+    ? `${PinOutlineUnscaledSize / props.scale}px dashed ${colorTheme.primary.value}`
     : 'none'
   const borderLeft = props.isHorizontalLine
     ? 'none'
-    : `${1 / props.scale}px dashed ${colorTheme.primary.value}`
+    : `${PinOutlineUnscaledSize / props.scale}px dashed ${colorTheme.primary.value}`
+  const lineLeft = props.startX - PinOutlineUnscaledSize / 2 / props.scale
+  const lineTop = props.startY - PinOutlineUnscaledSize / 2 / props.scale
+
   return (
     <div
       style={{
         position: 'absolute',
-        left: props.startX,
-        top: props.startY,
+        left: lineLeft,
+        top: lineTop,
         width: width,
         height: height,
         borderTop: borderTop,