Input Controller

A fast, event-based input management library for the browser.

Demo · Documentation

Installation

npm install input-controller

Features

• Emits action events for bound inputs.
• Emits normalized events for different pointer types and gestures.
• Supports input bindings with user-defined actions.
• Supports input combinations with modifiers.
  • Input matching uses fast bitwise operations.
  • Matches are reevaluated immediately when any input changes.
• Supports different pointer lock behaviors per pointer button: none, lock and lock-hold.
• Disables the context menu when any action is bound to the secondary button.
  • This does not apply if the action also requires a modifier.

Usage

import { InputManager } from "input-controller";

const inputManager = new InputManager(settings.input, domElement);
inputManager.addEventListener("activate", event => console.log(event));
inputManager.addEventListener("deactivate", event => console.log(event));
inputManager.addEventListener("move", event => console.log(event));

Settings

Configuration

import { KeyCode, Input, PointerButton } from "input-controller";

const settings = inputManager.settings;
settings.pointer.setBehavior(PointerButton.MAIN, "lock");

const keyBindings = settings.keyBindings;
keyBindings.set("Space", "jump");
keyBindings.set(new Input("KeyS", { modifiers: ["Ctrl"] }), "save");

const pointerBindings = settings.pointerBindings;
pointerBindings.set(PointerButton.MAIN, "drag");
pointerBindings.set(Gesture.PINCH, "zoom");
pointerBindings.set(Gesture.ROTATE, "rotate");

See the docs for more information.

Saving and Loading

// JSON round-trip.
const json = JSON.stringify(settings);
settings.fromJSON(json);

// Via local storage.
localStorage.setItem("input-controller", JSON.stringify(settings));
settings.fromJSON(localStorage.getItem("input-controller"));

// Save as JSON file.
const settingsURL = URL.createObjectURL(settings.toBlob());
const a = document.createElement("a");
a.setAttribute("href", settingsURL);
a.setAttribute("download", "input-controller.json");
a.click();
URL.revokeObjectURL(settingsURL);

// Load from JSON file.
fetch("./input-controller.json")
	.then(response => response.text())
	.then(data => settings.fromJSON(data))
	.catch(e => console.error(e));

Contributing

Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.