From c9590061440164707789452da51b1a08c76cc359 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 2 Jun 2022 17:14:27 +0100
Subject: [PATCH] Make eraser line scale to zoom (#710)

---
 packages/core/src/components/Canvas/Canvas.tsx             | 2 +-
 packages/core/src/components/EraseLine/EraseLine.tsx       | 7 +++++--
 .../tldraw/src/state/commands/alignShapes/alignShapes.ts   | 4 ++--
 .../tldraw/src/state/sessions/EraseSession/EraseSession.ts | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/Canvas/Canvas.tsx b/packages/core/src/components/Canvas/Canvas.tsx
index 1642a7100..a2984a634 100644
--- a/packages/core/src/components/Canvas/Canvas.tsx
+++ b/packages/core/src/components/Canvas/Canvas.tsx
@@ -137,7 +137,7 @@ export const Canvas = observer(function _Canvas<
           {users && <Users userId={userId} users={users} />}
         </div>
         <Overlay camera={pageState.camera}>
-          {eraseLine && <EraseLine points={eraseLine} />}
+          {eraseLine && <EraseLine points={eraseLine} zoom={pageState.camera.zoom} />}
           {snapLines && <SnapLines snapLines={snapLines} />}
         </Overlay>
       </div>
diff --git a/packages/core/src/components/EraseLine/EraseLine.tsx b/packages/core/src/components/EraseLine/EraseLine.tsx
index a5c2ddcb2..046241492 100644
--- a/packages/core/src/components/EraseLine/EraseLine.tsx
+++ b/packages/core/src/components/EraseLine/EraseLine.tsx
@@ -5,14 +5,17 @@ import Utils from '~utils'
 
 export interface UiEraseLintProps {
   points: number[][]
+  zoom: number
 }
 
 export type UiEraseLineComponent = (props: UiEraseLintProps) => any | null
 
-export const EraseLine = observer(function EraserLine({ points }: UiEraseLintProps) {
+export const EraseLine = observer(function EraserLine({ points, zoom }: UiEraseLintProps) {
   if (points.length === 0) return null
 
-  const d = Utils.getSvgPathFromStroke(getStroke(points, { size: 16, start: { taper: true } }))
+  const d = Utils.getSvgPathFromStroke(
+    getStroke(points, { size: 16 / zoom, start: { taper: true } })
+  )
 
   return <path d={d} className="tl-erase-line" />
 })
diff --git a/packages/tldraw/src/state/commands/alignShapes/alignShapes.ts b/packages/tldraw/src/state/commands/alignShapes/alignShapes.ts
index 9bb925ae7..50518b775 100644
--- a/packages/tldraw/src/state/commands/alignShapes/alignShapes.ts
+++ b/packages/tldraw/src/state/commands/alignShapes/alignShapes.ts
@@ -30,11 +30,11 @@ export function alignShapes(app: TldrawApp, ids: string[], type: AlignType): Tld
         {
           prev: point,
           next: {
-            [AlignType.CenterVertical]: [point[0], midY - bounds.height / 2],
-            [AlignType.CenterHorizontal]: [midX - bounds.width / 2, point[1]],
             [AlignType.Top]: [point[0], commonBounds.minY],
+            [AlignType.CenterVertical]: [point[0], midY - bounds.height / 2],
             [AlignType.Bottom]: [point[0], commonBounds.maxY - bounds.height],
             [AlignType.Left]: [commonBounds.minX, point[1]],
+            [AlignType.CenterHorizontal]: [midX - bounds.width / 2, point[1]],
             [AlignType.Right]: [commonBounds.maxX - bounds.width, point[1]],
           }[type],
         },
diff --git a/packages/tldraw/src/state/sessions/EraseSession/EraseSession.ts b/packages/tldraw/src/state/sessions/EraseSession/EraseSession.ts
index ba8fa24a6..d67a9b4be 100644
--- a/packages/tldraw/src/state/sessions/EraseSession/EraseSession.ts
+++ b/packages/tldraw/src/state/sessions/EraseSession/EraseSession.ts
@@ -77,10 +77,10 @@ export class EraseSession extends BaseSession {
   start = (): TldrawPatch | undefined => void null
 
   update = (): TldrawPatch | undefined => {
-    const { page, shiftKey, originPoint, currentPoint } = this.app
+    const { page, shiftKey, originPoint, currentPoint, zoom } = this.app
 
     if (shiftKey) {
-      if (!this.isLocked && Vec.dist(originPoint, currentPoint) > 4) {
+      if (!this.isLocked && Vec.dist(originPoint, currentPoint) > 4 / zoom) {
         // If we're locking before knowing what direction we're in, set it
         // early based on the bigger dimension.
         if (!this.lockedDirection) {