Adds context menu, "move to page"

components/canvas/bounds/bounding-box.tsx

@@ -51,7 +51,7 @@ export default function Bounds() {
 
   if (isSingleHandles) return null
 
-  const size = (isMobile().any ? 10 : 8) / zoom // Touch target size
+  const size = (isMobile() ? 10 : 8) / zoom // Touch target size
   const center = getBoundsCenter(bounds)
 
   return (

components/canvas/bounds/bounds-bg.tsx

@@ -5,15 +5,18 @@ import styled from 'styles'
 import { deepCompareArrays, getPage } from 'utils/utils'
 
 function handlePointerDown(e: React.PointerEvent<SVGRectElement>) {
-  if (e.buttons !== 1) return
   if (!inputs.canAccept(e.pointerId)) return
   e.stopPropagation()
   e.currentTarget.setPointerCapture(e.pointerId)
-  state.send('POINTED_BOUNDS', inputs.pointerDown(e, 'bounds'))
+
+  if (e.button === 0) {
+    state.send('POINTED_BOUNDS', inputs.pointerDown(e, 'bounds'))
+  } else if (e.button === 2) {
+    state.send('RIGHT_POINTED', inputs.pointerDown(e, 'bounds'))
+  }
 }
 
 function handlePointerUp(e: React.PointerEvent<SVGRectElement>) {
-  if (e.buttons !== 1) return
   if (!inputs.canAccept(e.pointerId)) return
   e.stopPropagation()
   e.currentTarget.releasePointerCapture(e.pointerId)
@@ -36,7 +39,7 @@ export default function BoundsBg() {
     if (selectedIds.length === 1) {
       const { shapes } = getPage(s.data)
       const selected = Array.from(s.values.selectedIds.values())[0]
-      return shapes[selected].rotation
+      return shapes[selected]?.rotation
     } else {
       return 0
     }

components/canvas/bounds/handles.tsx

@@ -21,10 +21,12 @@ export default function Handles() {
     s.isInAny('notPointing', 'pinching', 'translatingHandles')
   )
 
-  if (!shape.handles || !isSelecting) return null
+  if (!shape || !shape.handles || !isSelecting) return null
 
   const center = getShapeUtils(shape).getCenter(shape)
 
+  console.log(shape)
+
   return (
     <g transform={`rotate(${shape.rotation * (180 / Math.PI)},${center})`}>
       {Object.values(shape.handles).map((handle) => (