Fix page zoom bug

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: {

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} />

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>

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))
 }

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

state/state.ts

@@ -319,7 +319,12 @@ const state = createState({
             },
             pointingBounds: {
               on: {
+                STOPPED_POINTING_BOUNDS: [],
                 STOPPED_POINTING: [
+                  {
+                    if: 'isPointingBounds',
+                    do: 'clearSelectedIds',
+                  },
                   {
                     if: 'isPressingShiftKey',
                     then: [