import { InertialWheel } from "@hscmap/inertial-wheel"
window.addEventListener('load', e => {
const trackpad = document.querySelector('.trackpad') as HTMLDivElement
const inertialWheelEventHistory = new HistoryCanvas(document.querySelector('#inertial-event-history') as HTMLCanvasElement)
new InertialWheel(trackpad, {
wheel: e => inertialWheelEventHistory.push(e.v),
wheelstart: e => inertialWheelEventHistory.canvas.classList.add('active'),
wheelend: e => inertialWheelEventHistory.canvas.classList.remove('active'),
})
const nativeEventHistory = new HistoryCanvas(document.querySelector('#native-event-history') as HTMLCanvasElement)
trackpad.addEventListener('wheel', e => {
e.preventDefault()
nativeEventHistory.push(e.deltaY)
})
})
class HistoryCanvas {
private ctx: CanvasRenderingContext2D
private ys: number[] = []
constructor(readonly canvas: HTMLCanvasElement) {
this.initCanvas()
this.refresh()
}
private initCanvas() {
this.canvas.width = 500
this.canvas.height = 200
this.ctx = this.canvas.getContext('2d')!
}
push(y: number) {
this.ys.unshift(y)
this.ys.splice(this.canvas.width)
this.refresh()
}
private refresh() {
const ctx = this.ctx
const canvas = this.canvas
const y0 = this.canvas.height / 2
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.strokeStyle = '#777'
ctx.beginPath()
ctx.lineTo(0, y0)
ctx.lineTo(this.canvas.width, y0)
ctx.stroke()
ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)'
ctx.beginPath()
for (let i = 0; i < this.ys.length; ++i)
ctx.lineTo(i, this.ys[i] + y0)
ctx.stroke()
}
}