Adds scroll selection

This commit is contained in:
Steve Ruiz 2021-05-10 21:44:17 +01:00
parent a5659380c4
commit 9a01f5aac6
3 changed files with 13 additions and 8 deletions

View file

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

View file

@ -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

View file

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