mr-tap v0.1.2
mr-Taps
Taps provide source agnostic sync access to input. Either it comes from mouse and/or touch, it is the same API. It assumes multiple instances of taps making your code multi-touch by design.
Providing sync access instead of event based, for best usage in real-time applications.
:rocket: Install
module: https://cdn.jsdelivr.net/npm/mr-tap/dist/mr-tap.module.min.js
nomodule: https://cdn.jsdelivr.net/npm/mr-tap/dist/mr-tap.min.js
npm install mr-observer
<script type='module' src='mr-tap.module.min.js'></script>
<script nomodule src='mr-tap.min.js'></script>
Use built files from dist
directory for browser. It will load ES8+ version if it is supported (~94%). There are two versions: nomodule
(global scope) and module
(for import
).
// create taps interface
const taps = new Taps();
function update() {
requestAnimationFrame(update);
// update taps on each frame
taps.update();
// access all taps
for(const tap of taps) {
// iterate through all taps
}
}
requestAnimationFrame(update);
:scroll: API Documentation
Usage
Creating:
const taps = new Taps();
Updating:
function update() {
requestAnimationFrame(update);
// update taps on each frame
taps.update();
// application logic
}
requestAnimationFrame(update);
Accessing:
All taps:
// Taps - is an iterator
for(const tap of taps) {
// all taps
}
Specific state taps, e.g. clicks:
for(const tap of taps.click) {
// taps that are only clicks
}
Unique to mouse properties are also available:
for(const tap of taps) {
if (tap.mouse && tap.button === 0) {
// applies to only taps originated from mouse
// and only from left mouse button
}
}
Examples
Examples are multi-touch by design.
Clicking on objects:
for(const tap of taps.click) {
const object = pickObject(tap.x, tap.y);
if (! object) continue;
object.interact();
}
Rendering taps:
// drawCircle(x, y, radius)
for(const tap of taps) {
drawCircle(tap.x, tap.y, 32);
}
Selecting multiple objects using rect (RTS style):
// drawRect(left, top, right, bottom)
// draw selection rect
for(const tap of taps.drag) {
drawRect(tap.sx, tap.sy, tap.x, tap.y);
}
// select objects on dragend
for(const tap of taps.dragend) {
const objects = objectsInRect(tap.sx, tap.sy, tap.x, tap.y);
// selected some objects
}
Dragging objects:
// pick an object from tap start position
// and remember against tap object
for(const tap of taps.dragstart) {
const object = pickObject(tap.sx, tap.sy);
if (! object) continue;
tap.object = object;
// remember difference of position between tap and object center
tap.offsetX = object.x - tap.sx;
tap.offsetY = object.y - tap.sy;
}
// position objects
for(const tap of taps.drag) {
// tap might have no object associated
if (! tap.object) continue;
// position with offset to prevent object snapping
tap.object.setPosition(tap.x + tap.offsetX, tap.y + tap.offsetY);
}
Throwing objects:
// pick objects
// position objects
// throw an object
for(const tap of taps.dragend) {
// tap might have no object associated
if (! tap.object) continue;
// set linear velocity
// multiply speed by deltaTime
tap.object.setLinearVelocity(tap.dx * dt, tap.dy * dt);
}
Tap
Each tap is instantiated by the Taps interface, and provided through iterators. Tap is agnostic to the input source: mouse or touch. And behaves identical. Also, due to iterator pattern, it provides sync access instead of event driven, and is multi-touch by design.
Tap has states with two branching scenarios:
Click: start
> click + up
Drag: start
> dragstart + drag
> drag
> dragend + drag + up
States:
start
- every tap starts with a start state.
click
- some taps if not moved from initial position and have not been held for too long, on up
state, will be considered click
.dragstart
- some taps if moved from initial position or have been held for some time, will enter drag
state, and once be in dragstart
state.drag
- once tap is in dragstart
state, it will be in drag
state till the end of a tap.dragend
- if tap is in drag
state, on up
state instead of click
it will be in dragend
state.
up
- every tap ends with up
state.
Drag State
Tap enters drag
state if moved far from start position, or held for long enough. It is possible to change default settings of 20 pixels and 200 millisecsonds:
taps.dragDistance = 20; // pixels
taps.dragDelay = 200; // milliseconds
Building
Builds library into two versions (normal and module) using Rollup, Babel and Terser.
Source file: src/index.js
Built versions normal (dist/mr-tap.min.js
) and module (dist/mr-tap.module.min.js
):
npm install
npm run build