# eventprocessor

> A middleware-based event-handling system

Latest version **1.4.2** (published 2020-04-30) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install eventprocessor
pnpm add eventprocessor
yarn add eventprocessor
bun add eventprocessor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2020-04-30 |
| First published | 2017-08-12 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 84.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Paul Brachmann |
| Maintainers | mlpxbrachmann |

## Links

- npm: https://www.npmjs.com/package/eventprocessor
- Repository: https://github.com/PaulBrachmann/eventprocessor
- Homepage: https://github.com/PaulBrachmann/eventprocessor#readme
- Issues: https://github.com/PaulBrachmann/eventprocessor/issues
- npm.io page: https://npm.io/package/eventprocessor

## Recent versions

- 1.4.2 (latest) — 2020-04-30
- 1.4.1 — 2020-04-27
- 1.4.0 — 2020-04-16
- 1.3.1 — 2020-04-16
- 1.3.0 — 2020-04-16
- 1.2.0 — 2020-03-19
- 1.1.0 — 2020-03-17
- 1.0.1 — 2020-03-14
- 1.0.0 — 2020-03-14
- 0.3.0 — 2020-02-28
- 0.2.6 — 2017-09-01
- 0.2.5 — 2017-09-01
- 0.2.4 — 2017-09-01
- 0.2.3 — 2017-08-29
- 0.2.2 — 2017-08-22
- … 4 more at https://npm.io/package/eventprocessor/versions

## README

# Middleware-based event-handling system

[![wercker status](https://app.wercker.com/status/dde652a7dfb59a9f59316dfdfb72a225/s/master "wercker status")](https://app.wercker.com/project/byKey/dde652a7dfb59a9f59316dfdfb72a225)

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](https://yarnpkg.com/en/)

```shell
yarn add eventprocessor
```

or npm

```shell
npm install --save eventprocessor
```

## Usage

### Example

```ts
import EventProcessor, { EventLike } from "eventprocessor";
import {
  adapters,
  RichEventData,
  PointerState,
  classify,
  preventDefault,
  mapPointers,
  forAction,
  Pointer,
} from "eventprocessor/middleware";

// Create event processor
const processor = new EventProcessor<RichEventData, PointerState>();

const buildPointerAction = (type: string, pointer: Pointer) => ({
  type,
  id: pointer.id,
  device: pointer.context.device,
  clientX: pointer.detail.clientX,
  clientY: pointer.detail.clientY,
});

// Register middleware
processor.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 listeners
document.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 listeners
const listener = (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.

---
_Source: https://npm.io/package/eventprocessor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._