From 7e03adcd52ba95d89f9a8d52b6acfe89c23a298c Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Tue, 15 Jun 2021 13:20:22 +0100
Subject: [PATCH] Fix page zoom bug

---
 components/canvas/selected.tsx |  4 +---
 lib/shape-utils/arrow.tsx      |  2 +-
 lib/shape-utils/rectangle.tsx  |  2 ++
 state/hacks.ts                 |  5 ++++-
 state/inputs.tsx               | 12 +++++++++++-
 state/state.ts                 |  5 +++++
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/components/canvas/selected.tsx b/components/canvas/selected.tsx
index 3625033fb..af2ca2126 100644
--- a/components/canvas/selected.tsx
+++ b/components/canvas/selected.tsx
@@ -64,13 +64,11 @@ export const ShapeOutline = memo(function ShapeOutline({ id }: { id: string }) {
 })
 
 const SelectIndicator = styled('path', {
-  zStrokeWidth: 1,
+  zStrokeWidth: 2,
   strokeLineCap: 'round',
   strokeLinejoin: 'round',
   stroke: '$selected',
-  fill: 'transparent',
   pointerEvents: 'none',
-  paintOrder: 'stroke fill markers',
 
   variants: {
     isLocked: {
diff --git a/lib/shape-utils/arrow.tsx b/lib/shape-utils/arrow.tsx
index 856d93c3a..874b30440 100644
--- a/lib/shape-utils/arrow.tsx
+++ b/lib/shape-utils/arrow.tsx
@@ -135,7 +135,7 @@ const arrow = registerShapeUtils<ArrowShape>({
           <path
             d={getArrowArcPath(start, end, circle, bend)}
             fill="none"
-            strokeWidth={+style.strokeWidth * 1.85}
+            strokeWidth={(+style.strokeWidth * 1.85).toString()}
             strokeLinecap="round"
           />
           <path d={path} strokeWidth={+style.strokeWidth * 1.5} />
diff --git a/lib/shape-utils/rectangle.tsx b/lib/shape-utils/rectangle.tsx
index 09b31a05f..73646a0fa 100644
--- a/lib/shape-utils/rectangle.tsx
+++ b/lib/shape-utils/rectangle.tsx
@@ -51,6 +51,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
     return (
       <g id={id}>
         <rect
+          className="hi"
           rx={radius}
           ry={radius}
           x={+styles.strokeWidth / 2}
@@ -58,6 +59,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
           width={Math.max(0, size[0] + -styles.strokeWidth)}
           height={Math.max(0, size[1] + -styles.strokeWidth)}
           strokeWidth={0}
+          fill={styles.fill}
         />
         <path d={path} fill={styles.stroke} />
       </g>
diff --git a/state/hacks.ts b/state/hacks.ts
index 2f72b9b02..c0343d506 100644
--- a/state/hacks.ts
+++ b/state/hacks.ts
@@ -81,7 +81,10 @@ export function fastPinchCamera(
   const p1 = screenToWorld(point, data)
   camera.point = vec.add(camera.point, vec.sub(p1, p0))
 
-  data.pageStates[data.currentPageId].camera = { ...camera }
+  const pageState = data.pageStates[data.currentPageId]
+  pageState.camera = { ...camera }
+
+  data.pageStates[data.currentPageId] = { ...pageState }
 
   state.forceData(Object.freeze(data))
 }
diff --git a/state/inputs.tsx b/state/inputs.tsx
index ff69e5ff9..6263411ff 100644
--- a/state/inputs.tsx
+++ b/state/inputs.tsx
@@ -9,6 +9,7 @@ class Inputs {
   activePointerId?: number
   lastPointerUpTime = 0
   points: Record<string, PointerInfo> = {}
+  lastPointer: PointerInfo
 
   touchStart(e: TouchEvent | React.TouchEvent, target: string) {
     const { shiftKey, ctrlKey, metaKey, altKey } = e
@@ -30,6 +31,7 @@ class Inputs {
     this.points[touch.identifier] = info
     this.activePointerId = touch.identifier
 
+    this.lastPointer = info
     return info
   }
 
@@ -55,6 +57,7 @@ class Inputs {
       this.points[touch.identifier] = info
     }
 
+    this.lastPointer = info
     return info
   }
 
@@ -76,6 +79,7 @@ class Inputs {
     this.points[e.pointerId] = info
     this.activePointerId = e.pointerId
 
+    this.lastPointer = info
     return info
   }
 
@@ -94,6 +98,7 @@ class Inputs {
       altKey,
     }
 
+    this.lastPointer = info
     return info
   }
 
@@ -117,6 +122,7 @@ class Inputs {
       this.points[e.pointerId] = info
     }
 
+    this.lastPointer = info
     return info
   }
 
@@ -143,6 +149,7 @@ class Inputs {
       this.lastPointerUpTime = Date.now()
     }
 
+    this.lastPointer = info
     return info
   }
 
@@ -158,7 +165,10 @@ class Inputs {
   }
 
   isDoubleClick() {
-    const { origin, point } = this.pointer
+    if (!this.lastPointer) return
+
+    const { origin, point } = this.lastPointer
+
     return (
       Date.now() - this.lastPointerUpTime < DOUBLE_CLICK_DURATION &&
       vec.dist(origin, point) < 8
diff --git a/state/state.ts b/state/state.ts
index 0872499c6..d8b25b548 100644
--- a/state/state.ts
+++ b/state/state.ts
@@ -319,7 +319,12 @@ const state = createState({
             },
             pointingBounds: {
               on: {
+                STOPPED_POINTING_BOUNDS: [],
                 STOPPED_POINTING: [
+                  {
+                    if: 'isPointingBounds',
+                    do: 'clearSelectedIds',
+                  },
                   {
                     if: 'isPressingShiftKey',
                     then: [