Improves selection

components/canvas/bounds/bounds-bg.tsx

@@ -70,6 +70,7 @@ export default function BoundsBg() {
         rotate(${(bounds.rotation || 0) * (180 / Math.PI)}, 0, 0)`}
       onPointerDown={handlePointerDown}
       onPointerUp={handlePointerUp}
+      pointerEvents="all"
     />
   )
 }

hooks/useKeyboardEvents.ts

@@ -174,14 +174,14 @@ export default function useKeyboardEvents() {
           if (metaKey(e)) {
             state.send('COPIED', getKeyboardEventInfo(e))
           } else {
-            state.send('SELECTED_CIRCLE_TOOL', getKeyboardEventInfo(e))
+            state.send('SELECTED_ELLIPSE_TOOL', getKeyboardEventInfo(e))
           }
           break
         }
         case 'i': {
           if (metaKey(e)) {
           } else {
-            state.send('SELECTED_ELLIPSE_TOOL', getKeyboardEventInfo(e))
+            state.send('SELECTED_CIRCLE_TOOL', getKeyboardEventInfo(e))
           }
           break
         }

state/state.ts

@@ -9,7 +9,6 @@ import storage from './storage'
 import * as Sessions from './sessions'
 import commands from './commands'
 import {
-  clamp,
   getChildren,
   getCommonBounds,
   getCurrent,
@@ -46,8 +45,12 @@ import {
   DashStyle,
   SizeStyle,
   ColorStyle,
+  Bounds,
 } from 'types'
 import session from './session'
+import { pointInBounds } from 'utils/bounds'
+
+let currentBounds: Bounds
 
 const initialData: Data = {
   isReadOnly: false,
@@ -239,6 +242,7 @@ const state = createState({
                     to: 'brushSelecting',
                   },
                   'setPointedId',
+                  { if: 'pointInSelectionBounds', to: 'pointingBounds' },
                   {
                     unless: 'isPointedShapeSelected',
                     then: {
@@ -758,7 +762,13 @@ const state = createState({
     shapeIsHovered(data, payload: { target: string }) {
       return data.hoveredId === payload.target
     },
-    pointHitsShape(data, payload: { target: string; point: number[] }) {
+    pointInSelectionBounds(data, payload: PointerInfo) {
+      return (
+        currentBounds &&
+        pointInBounds(screenToWorld(payload.point, data), currentBounds)
+      )
+    },
+    pointHitsShape(data, payload: PointerInfo) {
       const shape = getShape(data, payload.target)
 
       return getShapeUtils(shape).hitTest(
@@ -1499,14 +1509,11 @@ const state = createState({
             const bounds = getShapeUtils(shape).getRotatedBounds(shape)
 
             return bounds
-
-            return translateBounds(
-              rotateBounds(bounds, getBoundsCenter(bounds), parentRotation),
-              vec.neg(parentOffset)
-            )
           })
       )
 
+      currentBounds = commonBounds
+
       return commonBounds
     },
     selectedStyle(data) {