gesture-customizer

Note

Help you customize and manage gesture action in web. It can work well with JS, React or Vue

add issues if you need more features :)

Installation

npm install gesture-customizer

OR

yarn add gesture-customizer

Usage

import {
    Gesture
} from 'gesture-customizer';
 
const callbackFn = () => {
    // ...do something
}
 
// registry a gesture listener.
Gesture.registry(
    // listen left-right mousedown with pressing ctrl key
    {
        mouseType: 'LR', 
        ctrlKey: true
    },
 
    // trigger callback when the mouse moves toward bottom more than 300px
    // and then move towards right less than 500px in 2 seconds
    // and move top more than 300px at the end
    [
        {
            direction: 'B',
            minDistance: 300
        },
        {
            direction: 'R',
            maxDistance: 500,
            maxSpendTime: 2000,
        },
        {
            direction: 'T',
            minDistance: 300
        }
    ],
 
    callbackFn
);
 
// remove a gesture listener.
Gesture.remove({
    mouseType: 'LR'
}, callbackFn);
 
// pause all gesture listener
Gesture.pause();
 
// resueme all gesture listener
Gesture.resume();

API docs

interface KeyType

Define the gesture trigger buttons. It can combine with ctrl and shift key.

Arguments	description	Accepted Values	Default
mouseType	which mouse buttons can trigger callback, L = Left, R = Right, M = Middle(wheel)	L / R / LR / M
ctrlKey?	only trigger event when ctrl key was pressed	boolean	false
shiftKey?	only trigger event when shift key was pressed	boolean	false

interface GestureAction

Define the mouse move path, only trigger callback when user did action which is satisfied all limitation.

Arguments	description	Accepted Values	Default
direction	the mouse move direction	Direction
minDistance?	Not trigger callback if moving distance is less than minDistance	number	100
maxDistance?	Not trigger callback if moving distance is large than maxDistance	number	infinity
maxSpendTime?	The maxium spends time on user done this action	number	infinity

/** T = Top
 *  R = Right
 *  B = Bottom
 *  L = Left
*/ 
type Direction = 'T' | 'TR' | 'R' | 'RB' | 'B' | 'BL' | 'L' | 'LT';

Gesture. registry(keyType, gestureAction[], callback)

registry a gesture listener.

Gesture. remove(keyType, callback)

remove a gesture listener.

Gesture. pause()

pause all gesture listener

Gesture. resume()

resueme all gesture listener

License

MIT