@hscmap/inertial-wheel

InertialWheel

• InertialWheel wraps native WheelEvent and emit pseudo wheel events with inertial motion.
• Working Demo

Install

npm instasll --save @hscmap/inertial-wheel

Example (source code of the working demo)

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()
    }
}