Class MouseInteractionManager

Handle mouse interaction events for a Canvas object. There are three phases of events: hover, click, and drag

Hover Events: _handlePointerOver action: hoverIn _handlePointerOut action: hoverOut

Left Click and Double-Click _handlePointerDown action: clickLeft action: clickLeft2 action: unclickLeft

Right Click and Double-Click _handleRightDown action: clickRight action: clickRight2 action: unclickRight

Drag and Drop _handlePointerMove action: dragLeftStart action: dragRightStart action: dragLeftMove action: dragRightMove _handlePointerUp action: dragLeftDrop action: dragRightDrop _handleDragCancel action: dragLeftCancel action: dragRightCancel

Properties

options

options: {
target: DisplayObject;
dragResistance: number;
}

Interaction options which configure handling workflows

Type declaration

target: DisplayObject
dragResistance: number

state

state: number

The current interaction state

interactionData

interactionData: Record<string, any>

Bound interaction data object to populate with custom data.

dragTime

dragTime: number

The drag handling time

lcTime

lcTime: number

The time of the last left-click event

rcTime

rcTime: number

The time of the last right-click event

_dragRight

_dragRight: boolean

A flag for whether we are right-click dragging

controlIcon

controlIcon: ControlIcon

An optional ControlIcon instance for the object

viewId

viewId: string

The view id pertaining to the PIXI Application. If not provided, default to canvas.app.view.id

lastClick

lastClick: Point = ...

The client position of the last left/right-click.

`Private` #handlers

#handlers: Record<string, Function> = {}

Bound handlers which can be added and removed

`Static` INTERACTION_STATES

INTERACTION_STATES: {
    NONE: number;
    HOVER: number;
    CLICKED: number;
    GRABBED: number;
    DRAG: number;
    DROP: number;
} = ...

Enumerate the states of a mouse interaction workflow. 0: NONE - the object is inactive 1: HOVER - the mouse is hovered over the object 2: CLICKED - the object is clicked 3: GRABBED - the object is grabbed 4: DRAG - the object is being dragged 5: DROP - the object is being dropped

Type declaration

NONE: number
HOVER: number
CLICKED: number
GRABBED: number
DRAG: number
DROP: number

`Static` DOUBLE_CLICK_TIME_MS

DOUBLE_CLICK_TIME_MS: number = 250

The maximum number of milliseconds between two clicks to be considered a double-click.

`Static` DOUBLE_CLICK_DISTANCE_PX

DOUBLE_CLICK_DISTANCE_PX: number = 5

The maximum number of pixels between two clicks to be considered a double-click.

`Static` LONG_PRESS_DURATION_MS

LONG_PRESS_DURATION_MS: number = 500

The number of milliseconds of mouse click depression to consider it a long press.

`Static` longPressTimeout

longPressTimeout: number = null

Global timeout for the long-press event.

`Static` `Private` #HANDLER_OUTCOME

#HANDLER_OUTCOME: {
    SKIPPED: number;
    DISALLOWED: number;
    REFUSED: number;
    ACCEPTED: number;
} = ...

Enumerate the states of handle outcome. -2: SKIPPED - the handler has been skipped by previous logic -1: DISALLOWED - the handler has dissallowed further process 1: REFUSED - the handler callback has been processed and is refusing further process 2: ACCEPTED - the handler callback has been processed and is accepting further process

Type declaration

SKIPPED: number
DISALLOWED: number
REFUSED: number
ACCEPTED: number

Accessors

target

get target(): DisplayObject
Get the target.

Returns DisplayObject

isDragging

get isDragging(): boolean
Is this mouse manager in a dragging state?

Returns boolean

states

get states(): Record<string, number>
A reference to the possible interaction states which can be observed

Returns Record<string, number>

handlerOutcomes

get handlerOutcomes(): Record<string, number>
A reference to the possible interaction states which can be observed

Returns Record<string, number>

Methods

activate

activate(): MouseInteractionManager
Activate interactivity for the handled object

Returns MouseInteractionManager

can

can(action, event): boolean
Test whether the current user has permission to perform a step of the workflow
Parameters
- action: string
  The action being attempted
- event: any
  The event being handled
Returns boolean
Can the action be performed?

callback

callback(action, event, ...args): boolean
Execute a callback function associated with a certain action in the workflow
Parameters
- action: string
  The action being attempted
- event: any
  The event being handled
- Rest ...args: any[]
  Additional callback arguments.
Returns boolean
A boolean which may indicate that the event was handled by the callback. Events which do not specify a callback are assumed to have been handled as no-op.

handleEvent

handleEvent(event): boolean
A public method to handle directly an event into this manager, according to its type. Note: drag events are not handled.
Parameters
- event: FederatedEvent
Returns boolean
Has the event been processed?

cancel

cancel(event?): void
A public method to cancel a current interaction workflow from this manager.
Parameters
- Optional event: FederatedEvent
  The event that initiates the cancellation
Returns void

reset

reset(options?): void
Reset the mouse manager.
Parameters
- Optional options: {
  interactionData: boolean;
  state: boolean;
  } = {}
  - interactionData: boolean
    Reset the interaction data?
  - state: boolean
    Reset the state?
Returns void

`Private` #activateHoverEvents

#activateHoverEvents(): void
Activate a set of listeners which handle hover events on the target object

Returns void

`Private` #activateClickEvents

#activateClickEvents(): void
Activate a new set of listeners for click events on the target object.

Returns void

`Private` #deactivateClickEvents

#deactivateClickEvents(): void
Deactivate event listeners for click events on the target object.

Returns void

`Private` #activateDragEvents

#activateDragEvents(): void
Activate events required for handling a drag-and-drop workflow

Returns void

`Private` #deactivateDragEvents

#deactivateDragEvents(silent?): void
Deactivate events required for handling drag-and-drop workflow.
Parameters
- Optional silent: boolean
  Set to true to activate the silent mode.
Returns void

`Private` #handlePointerOver

#handlePointerOver(event): void
Handle mouse-over events which activate downstream listeners and do not stop propagation.
Parameters
- event: FederatedEvent
Returns void

`Private` #handlePointerOut

#handlePointerOut(event): void
Handle mouse-out events which terminate hover workflows and do not stop propagation.
Parameters
- event: FederatedEvent
Returns void

`Private` #handlePointerDown

#handlePointerDown(event): void
Handle mouse-down events which activate downstream listeners.
Parameters
- event: FederatedEvent
Returns void

`Private` #handleLeftDown

#handleLeftDown(event): void
Handle left-click mouse-down events. Stop further propagation only if the event is allowed by either single or double-click.
Parameters
- event: FederatedEvent
Returns void

`Private` #handleClickLeft

#handleClickLeft(event): void
Handle mouse-down which trigger a single left-click workflow.
Parameters
- event: FederatedEvent
Returns void

`Private` #handleClickLeft2

#handleClickLeft2(event): void
Handle mouse-down which trigger a single left-click workflow.
Parameters
- event: FederatedEvent
Returns void

`Private` #handleLongPress

#handleLongPress(event, origin): void
Handle a long mouse depression to trigger a long-press workflow.
Parameters
- event: FederatedEvent
  The mousedown event.
- origin: Point
  The original canvas coordinates of the mouse click
Returns void

`Private` #handleRightDown

#handleRightDown(event): void
Handle right-click mouse-down events. Stop further propagation only if the event is allowed by either single or double-click.
Parameters
- event: FederatedEvent
Returns void

`Private` #handleClickRight

#handleClickRight(event): void
Handle single right-click actions.
Parameters
- event: FederatedEvent
Returns void

`Private` #handleClickRight2

#handleClickRight2(event): void
Handle double right-click actions.
Parameters
- event: FederatedEvent
Returns void

`Private` #handlePointerMove

#handlePointerMove(event): void
Handle mouse movement during a drag workflow
Parameters
- event: FederatedEvent
Returns void

`Private` #handleDragStart

#handleDragStart(event): void
Handle the beginning of a new drag start workflow, moving all controlled objects on the layer
Parameters
- event: FederatedEvent
Returns void

`Private` #handleDragMove

#handleDragMove(event): void
Handle the continuation of a drag workflow, moving all controlled objects on the layer
Parameters
- event: FederatedEvent
Returns void

`Private` #handlePointerUp

#handlePointerUp(event): void
Handle mouse up events which may optionally conclude a drag workflow
Parameters
- event: FederatedEvent
Returns void

`Private` #handleDragDrop

#handleDragDrop(event): void
Handle the conclusion of a drag workflow, placing all dragged objects back on the layer
Parameters
- event: FederatedEvent
Returns void

`Private` #handleDragCancel

#handleDragCancel(event): void
Handle the cancellation of a drag workflow, resetting back to the original state
Parameters
- event: FederatedEvent
Returns void

`Private` #handleUnclick

#handleUnclick(event): void
Handle the unclick event
Parameters
- event: FederatedEvent
Returns void

`Private` #debug

#debug(action, event, outcome?): void
Display a debug message in the console (if mouse interaction debug is activated).
Parameters
- action: string
  Which action to display?
- event: any
  Which event to display?
- Optional outcome: number = ...
  The handler outcome.
Returns void

`Private` #assignInteractionData

#assignInteractionData(event): void
Assign the interaction data to the event.
Parameters
- event: FederatedEvent
Returns void

`Static` emulateMoveEvent

emulateMoveEvent(): void
Emulate a pointermove event. Needs to be called when an object with the static event mode or any of its parents is transformed or its visibility is changed.

Returns void

Class MouseInteractionManager

Index

Properties

Accessors

Methods

Properties

options

Type declaration

target: DisplayObject

dragResistance: number

state

interactionData

dragTime

lcTime

rcTime

_dragRight

controlIcon

viewId

lastClick

Private #handlers

Static INTERACTION_STATES

Type declaration

NONE: number

HOVER: number

CLICKED: number

GRABBED: number

DRAG: number

DROP: number

Static DOUBLE_CLICK_TIME_MS

Static DOUBLE_CLICK_DISTANCE_PX

Static LONG_PRESS_DURATION_MS

Static longPressTimeout

Static Private #HANDLER_OUTCOME

Type declaration

SKIPPED: number

DISALLOWED: number

REFUSED: number

ACCEPTED: number

Accessors

target

Returns DisplayObject

isDragging

Returns boolean

states

Returns Record<string, number>

handlerOutcomes

Returns Record<string, number>

Methods

activate

Returns MouseInteractionManager

can

Parameters

Returns boolean

callback

Parameters

Returns boolean

handleEvent

Parameters

Returns boolean

cancel

Parameters

Returns void

reset

Parameters

interactionData: boolean

state: boolean

Returns void

Private #activateHoverEvents

Returns void

Private #activateClickEvents

Returns void

Private #deactivateClickEvents

Returns void

Private #activateDragEvents

Returns void

Private #deactivateDragEvents

Parameters

Returns void

Private #handlePointerOver

Parameters

`Private` #handlers

`Static` INTERACTION_STATES

`Static` DOUBLE_CLICK_TIME_MS

`Static` DOUBLE_CLICK_DISTANCE_PX

`Static` LONG_PRESS_DURATION_MS

`Static` longPressTimeout

`Static` `Private` #HANDLER_OUTCOME

`Private` #activateHoverEvents

`Private` #activateClickEvents

`Private` #deactivateClickEvents

`Private` #activateDragEvents

`Private` #deactivateDragEvents

`Private` #handlePointerOver

`Private` #handlePointerOut

`Private` #handlePointerDown

`Private` #handleLeftDown

`Private` #handleClickLeft

`Private` #handleClickLeft2

`Private` #handleLongPress

`Private` #handleRightDown

`Private` #handleClickRight

`Private` #handleClickRight2

`Private` #handlePointerMove

`Private` #handleDragStart

`Private` #handleDragMove

`Private` #handlePointerUp

`Private` #handleDragDrop

`Private` #handleDragCancel

`Private` #handleUnclick

`Private` #debug

`Private` #assignInteractionData

`Static` emulateMoveEvent