Middleware-based event-handling system

EventProcessor provides a modular & extensible solution for UI event handling.

The default configuration enables you to easily process drag & drop mouse input and multi-touch gestures.

Install

using yarn

yarn add eventprocessor

or npm

npm install --save eventprocessor

Usage

Example

importEventProcessor,{EventLike}from"eventprocessor";import{adapters,RichEventData,PointerState,classify,preventDefault,mapPointers,forAction,Pointer,}from"eventprocessor/middleware";// Create event processorconstprocessor=newEventProcessor<RichEventData,PointerState>();constbuildPointerAction=(type: string,pointer: Pointer)=>({
type,id: pointer.id,device: pointer.context.device,clientX: pointer.detail.clientX,clientY: pointer.detail.clientY,});// Register middlewareprocessor.use(classify(),adapters(),preventDefault(true),mapPointers((pointer)=>buildPointerAction("GRAB",pointer),"start"),mapPointers((pointer)=>buildPointerAction("MOVE",pointer),"move"),mapPointers((pointer)=>buildPointerAction("DROP",pointer),"end"),mapKeys({keys: ["Control","+"],mapper: ()=>({type: "ZOOM_IN"})})forAction((action)=>{console.log(`${action.device}${action.type}s ${action.id}`);},["GRAB","MOVE","DROP"]),forAction((action)=>{console.log("Enhance!");},"ZOOM_IN"),);// Add global event listenersdocument.addEventListener("keydown",processor.dispatch);document.addEventListener("keyup",processor.dispatch);document.addEventListener("mousemove",processor.dispatch);document.addEventListener("mouseup",processor.dispatch);document.addEventListener("touchmove",processor.dispatch);document.addEventListener("touchend",processor.dispatch);// Add element event listenersconstlistener=(event: EventLike)=>processor.dispatch(event,"id");document.getElementById("elementId")?.addEventListener("mousedown",listener);document.getElementById("elementId")?.addEventListener("touchstart",listener);// Dragging `#elementId` around now results in:// mouse GRABs id// mouse MOVEs id// ...// mouse DROPs id// Pressing Ctrl + +:// Enhance!

Development

In the project directory, you can run:

yarn format

Runs automated code formatting on all applicable file types.

yarn lint

Lints all applicable files and prints the output.

yarn compile

Dry-runs the TypeScript compiler. This is especially useful to check whether any types or references broke after a big refactoring.

yarn test

Launches the test runner.

Coverage can be collected using yarn coverage.

yarn build

Builds the library for production to the dist folder.