Gesto

Gesto

You can set up drag, pinch events in any browser.

Constructor

new Gesto(targets, optionsopt)

Source:
Name Type Default Description
targets Array<Element | Window> | Element | Window
options? GestoOptions {}

Extends

Methods

emit(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName string | ... Event name
param? TargetParam<any> | ... {} Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

getCurrentEvent(inputEventopt)

Source:
Get the current event state while dragging.
Name Type Default Description
inputEvent? any this._prevInputEvent

getEventData()

Source:
Get & Set the event data while dragging.

getEventDatas()

Source:
Get & Set the event data while dragging. Use getEventData method

getMovement(clientsopt)

Source:
The total moved distance
Name Type Description
clients? Client[]

isDoubleFlag()

Source:
Whether to start double click

isDragging() → {boolean}

Source:
Whether to drag
Returns:
Type
boolean

isFlag() → {boolean}

Source:
Whether to start drag
Returns:
Type
boolean

isIdle() → {boolean}

Source:
Whether the operation of gesto is finished and is in idle state
Returns:
Type
boolean

isPinchFlag()

Source:
Whether to start pinch

isPinching()

Source:
Whether to pinch

move(inputEvent) → {TargetParam<OnDrag>}

Source:
Create a virtual drag event.
Name Type Description
number[]
inputEvent any
Returns:
Type
TargetParam<OnDrag>

off(eventNameopt, listeneropt) → {this}

Source:
Overrides:
Remove listeners registered in the event target.
Name Type Description
eventName? string | object | ... Name of the event to be removed
listener? EventListener<Events[any], this> | ... listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName? Name
listener? EventListener<Param, this>

off(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
Returns:
Type
this

on(eventName, listeneropt) → {this}

Source:
Overrides:
Add a listener to the registered event.
Name Type Description
eventName string | object | ... Name of the event to be added
listener? EventListener<Events[any], this> | ... listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName Name
listener EventListener<Param, this>

on(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});
Returns:
Type
this

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Overrides:
Add a disposable listener and Use promise to the registered event.
Name Type Description
eventName Name Name of the event to be added
listener? EventListener<Param, this> disposable listener function of the event to be added
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
Returns:
Type
Promise<OnEvent<Param, this>>

scrollBy(deltaX, deltaY, e, isCallDragopt)

Source:
If a scroll event occurs, it is corrected by the scroll distance.
Name Type Default Description
deltaX number
deltaY number
e any
isCallDrag? boolean true

setEventData(data)

Source:
Set the event data while dragging.
Name Type Description
data IObject<any>

setEventDatas(data)

Source:
Deprecated:
  • Yes
Set the event data while dragging. Use `setEventData`
Name Type Description
data IObject<any>

stop()

Source:
Stop Gesto's drag events.

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName Name | ... Event name
param? TargetParam<any> | ... {} Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends TargetParam<Param> ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
     
Returns:
If false, stop the event.
Type
boolean

triggerDragStart(e)

Source:
The dragStart event is triggered by an external event.
Name Type Description
e any

unset()

Source:
Unset Gesto

Type Definitions

Client

Source:
Properties:
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
Type:
  • TSInterface

Delta

Source:
Properties:
deltaX: number
deltaY: number
Type:
  • TSInterface

Dist

Source:
Properties:
distX: number
distY: number
Type:
  • TSInterface

GestoEvents

Source:
Type:

GestoOptions

Source:
Properties:
container optional
container?: Window | Node | Element
events optional
Default Value: ["mouse", "touch"]
events?: Array<"drag" | "mouse" | "touch">
Default Value: true
preventRightClick?: boolean
Whether to prevent dragging of the right mouse button
Default Value: true
preventWheelClick?: boolean
preventDefault optional
preventDefault?: boolean
pinchThreshold optional
Default Value: 0
pinchThreshold?: number
Prevents pinching when the drag is moved more than a certain distance. That distance allowance is pinchThreshold.
keepDragging optional
Default Value: false
keepDragging?: boolean
Whether to keep dragging even when pinch ends
Default Value: false
preventClickEventOnDrag?: boolean
Prevent click event on drag. (mousemove, touchmove)
Default Value: false
preventClickEventOnDragStart?: boolean
Prevent click event on dragStart. (mousedown, touchstart)
Default Value: null
preventClickEventByCondition?: ((e: MouseEvent) => boolean) | null
Prevent click event according to specific conditions. Returning true allows the click event, returning false prevents it.
pinchOutside optional
pinchOutside?: boolean
checkInput optional
Default Value: false
checkInput?: boolean
Prevent dragging of `input`, `textarea`, and contenteditable.
dragFocusedInput optional
Default Value: false
dragFocusedInput?: boolean
Whether to drag the focused input If `checkInput` is true, this option is not applied.
checkWindowBlur optional
checkWindowBlur?: boolean
Type:
  • TSInterface

OnDrag<T = Gesto>

Source:
Properties:
type: string
currentTarget: Target
stop: () => void
deltaX: number
deltaY: number
distX: number
distY: number
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
isDrag: boolean
isMouseEvent: boolean
isSecondaryButton: boolean
isPinch: boolean
movement: number
datas: IObject<any>
data: IObject<any>
isScroll: boolean
isFirstDrag: boolean
inputEvent: any
isTrusted: boolean
Type:
  • TSInterface

OnDragEnd<T = Gesto>

Source:
Properties:
type: string
currentTarget: Target
stop: () => void
deltaX: number
deltaY: number
distX: number
distY: number
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
isDrag: boolean
isClick: boolean
isMouseEvent: boolean
isSecondaryButton: boolean
isDouble: boolean
datas: IObject<any>
data: IObject<any>
inputEvent: any
isTrusted: boolean
Type:
  • TSInterface

OnDragStart<T = Gesto>

Source:
Properties:
type: string
currentTarget: Target
stop: () => void
deltaX: number
deltaY: number
distX: number
distY: number
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
datas: IObject<any>
data: IObject<any>
inputEvent: any
isTrusted: boolean
isMouseEvent: boolean
isSecondaryButton: boolean
isDouble: boolean
preventDefault: () => void
preventDrag: () => void
Type:
  • TSInterface

OnPinch<T = Gesto>

Source:
Properties:
type: string
currentTarget: Target
stop: () => void
deltaX: number
deltaY: number
distX: number
distY: number
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
datas: IObject<any>
data: IObject<any>
touches: Position[]
rotation: number
angle: number
scale: number
distance: number
movement: number
inputEvent: any
isTrusted: boolean
Type:
  • TSInterface

OnPinchEnd<T = Gesto>

Source:
Properties:
type: string
currentTarget: Target
stop: () => void
deltaX: number
deltaY: number
distX: number
distY: number
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
isPinch: boolean
datas: IObject<any>
data: IObject<any>
touches: Position[]
inputEvent: any
Type:
  • TSInterface

OnPinchStart<T = Gesto>

Source:
Properties:
type: string
currentTarget: Target
stop: () => void
deltaX: number
deltaY: number
distX: number
distY: number
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
datas: IObject<any>
data: IObject<any>
touches: Position[]
angle: number
inputEvent: any
isTrusted: boolean
preventDefault: () => void
preventDrag: () => void
Type:
  • TSInterface

Position

Source:
Properties:
deltaX: number
deltaY: number
distX: number
distY: number
clientX: number
clientY: number
originalClientX optional
originalClientX?: number
originalClientY optional
originalClientY?: number
Type:
  • TSInterface