Adds scroll selection

hooks/useZoomEvents.ts

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from "react"
 import state from "state"
+import { getPointerEventInfo } from "utils/utils"
 import * as vec from "utils/vec"
 
 /**
@@ -23,14 +24,14 @@ export default function useZoomEvents(
       if (e.ctrlKey) {
         state.send("ZOOMED_CAMERA", {
           delta: e.deltaY,
-          point: [e.pageX, e.pageY],
+          ...getPointerEventInfo(e),
         })
         return
       }
 
       state.send("PANNED_CAMERA", {
         delta: [e.deltaX, e.deltaY],
-        point: [e.pageX, e.pageY],
+        ...getPointerEventInfo(e),
       })
     }
 

state/state.ts

@@ -38,6 +38,7 @@ const state = createState({
       onEnter: "startBrushSession",
       on: {
         MOVED_POINTER: "updateBrushSession",
+        PANNED_CAMERA: "updateBrushSession",
         STOPPED_POINTING: { do: "completeSession", to: "selecting" },
         CANCELLED: { do: "cancelSession", to: "selecting" },
       },
@@ -52,11 +53,14 @@ const state = createState({
       session.complete(data)
       session = undefined
     },
-    startBrushSession(data, { point }) {
-      session = new Sessions.BrushSession(data, point)
+    startBrushSession(data, payload: { point: number[] }) {
+      session = new Sessions.BrushSession(
+        data,
+        screenToWorld(payload.point, data)
+      )
     },
-    updateBrushSession(data, { point }) {
-      session.update(data, point)
+    updateBrushSession(data, payload: { point: number[] }) {
+      session.update(data, screenToWorld(payload.point, data))
     },
     zoomCamera(data, payload: { delta: number; point: number[] }) {
       const { camera } = data

utils/utils.ts

@@ -3,7 +3,7 @@ import * as svg from "./svg"
 import * as vec from "./vec"
 
 export function screenToWorld(point: number[], data: Data) {
-  return vec.add(vec.div(point, data.camera.zoom), data.camera.point)
+  return vec.sub(vec.div(point, data.camera.zoom), data.camera.point)
 }
 
 export function getBoundsFromPoints(a: number[], b: number[]) {
@@ -844,7 +844,7 @@ export async function postJsonToEndpoint(
   return await d.json()
 }
 
-export function getPointerEventInfo(e: React.PointerEvent) {
+export function getPointerEventInfo(e: React.PointerEvent | WheelEvent) {
   const { shiftKey, ctrlKey, metaKey, altKey } = e
   return { point: [e.clientX, e.clientY], shiftKey, ctrlKey, metaKey, altKey }
 }