Mousepress
Updated on September 20, 2024Source codeTests
createMousepress is a factory that returns Recognizeable effects for recognizing mouse presses.
A mouse press starts with a mousedown event, and is denied by a mouseup or mouseout event.
While the mouse is still down, createMousepress continuously recognizes the gesture at a rate of 60fps. The gesture is recognized when the mouse has been down for a minimum duration and has moved a minimum distance, both of which are configurable.
Create mousepress
Call createMousepress with these parameters to create your mousedown, mouseout, and mouseup effects:
optionsmousedown, mouseout, and mouseup effects. See the Options section for more guidance.Options
minDuration0minDistance0onDownundefinedA function that is called when the mouse is pressed down.
onDown receives the mousepress hook API as its only parameter.
onMoveundefinedA function that is called when the mouse moves.
onMove receives the mousepress hook API as its only parameter.
onOutundefinedA function that is called when the mouse leaves the target.
onOut receives the mousepress hook API as its only parameter.
onUpundefinedA function that is called when the mouse is released.
onUp receives the mousepress hook API as its only parameter.
Hook API
The hook API is an object that is passed to the onDown, onMove, onOut, and onUp options as their only parameter. It contains the following properties:
statusrecognized, denied, or recognizing.sequenceMetadata
Your created mousepress effects store data in the Recognizeable instance's metadata property.
Mousepress metadata includes all pointer metadata.
Using with Listenable
The easiest way to use createMousepress with Listenable is to use the Mousepress class, which is a very minimal subclass of Listenable that handles configuration for you.
Here's an example of how to use Mousepress to nicely combine createMousepress with Listenable:
import { Mousepress } from '@baleada/logic'
const mousepress = new Mousepress([mousepressOptions])
mousepress.listen(() => {
console.log(mousepress.metadata.duration)
})
