MouseHandler | plotboilerplate

classdesc: A simple mouse handler for demos. Use to avoid load massive libraries like jQuery.
requires: XYCoords

Hierarchy

MouseHandler

Index

Constructors

constructor

Properties

Methods

Constructors

constructor

new MouseHandler(element: HTMLElement | SVGElement, name?: string): MouseHandler

- Defined in src/ts/MouseHandler.ts:71
The constructor.

Pass the DOM element you want to receive mouse events from.

Usage

example

// Javascript new MouseHandler( document.getElementById('mycanvas') ) .drag( function(e) { console.log( 'Mouse dragged: ' + JSON.stringify(e) ); if( e.params.leftMouse ) ; else if( e.params.rightMouse ) ; } ) .move( function(e) { console.log( 'Mouse moved: ' + JSON.stringify(e.params) ); } ) .up( function(e) { console.log( 'Mouse up. Was dragged?', e.params.wasDragged ); } ) .down( function(e) { console.log( 'Mouse down.' ); } ) .click( function(e) { console.log( 'Click.' ); } ) .wheel( function(e) { console.log( 'Wheel. delta='+e.deltaY ); } )

example

// Typescript new MouseHandler( document.getElementById('mycanvas') ) .drag( (e:XMouseEvent) => { console.log( 'Mouse dragged: ' + JSON.stringify(e) ); if( e.params.leftMouse ) ; else if( e.params.rightMouse ) ; } ) .move( (e:XMouseEvent) => { console.log( 'Mouse moved: ' + JSON.stringify(e.params) ); } ) .up( (e:XMouseEvent) => { console.log( 'Mouse up. Was dragged?', e.params.wasDragged ); } ) .down( (e:XMouseEvent) => { console.log( 'Mouse down.' ); } ) .click( (e:XMouseEvent) => { console.log( 'Click.' ); } ) .wheel( (e:XWheelEvent) => { console.log( 'Wheel. delta='+e.deltaY ); } )

instance

memberof

MouseHandler

Parameters
- element: HTMLElement | SVGElement
- Optional name: string
Returns MouseHandler

Properties

Private element

element: HTMLElement | SVGElement

Private handlers

handlers: Record<string, XMouseCallback>

Private installed

installed: Record<string, boolean>

Private listeners

listeners: Record<string, XMouseCallback>

Private mouseButton

mouseButton: number = -1

Private mouseDownPos

mouseDownPos: { x: number; y: number } | undefined = undefined

Private mouseDragPos

mouseDragPos: { x: number; y: number } | undefined = undefined

Private name

name: string | undefined

Methods

click

click(callback: (e: XMouseEvent) => void): MouseHandler

- Defined in src/ts/MouseHandler.ts:353
Installer function to listen for a specific event: mouse-click. Pass your callbacks here.

Note: this support chaining.

name

click

memberof

MouseHandler

instance

Parameters
- callback: (e: XMouseEvent) => void
  
  The click-callback to listen for.
  - - (e: XMouseEvent): void
    - Parameters
      - e: XMouseEvent
      Returns void
Returns MouseHandler

this

Private destroy

destroy(): void

- Defined in src/ts/MouseHandler.ts:404
Call this when your work is done.

The function will un-install all event listeners.

name

destroy

memberof

MouseHandler

instance

Returns void

down

down(callback: (e: XMouseEvent) => void): MouseHandler

- Defined in src/ts/MouseHandler.ts:334
Installer function to listen for a specific event: mouse-down. Pass your callbacks here.

Note: this support chaining.

name

down

memberof

MouseHandler

instance

Parameters
- callback: (e: XMouseEvent) => void
  
  The down-callback to listen for.
  - - (e: XMouseEvent): void
    - Parameters
      - e: XMouseEvent
      Returns void
Returns MouseHandler

this

drag

drag(callback: XMouseCallback): MouseHandler

- Defined in src/ts/MouseHandler.ts:275
Installer function to listen for a specific event: mouse-drag. Pass your callbacks here.

Note: this support chaining.

name

drag

memberof

MouseHandler

instance

Parameters
- callback: XMouseCallback
  
  The drag-callback to listen for.
Returns MouseHandler

this

Private listenFor

listenFor(eventName: string): void

- Defined in src/ts/MouseHandler.ts:241
Install a new listener. Please note that this mouse handler can only handle one listener per event type.

name

listenFor

memberof

MouseHandler

instance

Parameters
- eventName: string
  
  The name of the firing event to listen for.
Returns void

Private mkParams

mkParams(event: MouseEvent, eventName: string): XMouseEvent

- Defined in src/ts/MouseHandler.ts:210
Build the extended event params.

name

mkParams

memberof

MouseHandler

instance

Parameters
- event: MouseEvent
  
  The mouse event to get the relative position for.
- eventName: string
  
  The name of the firing event.
Returns XMouseEvent

move

move(callback: (e: XMouseEvent) => void): MouseHandler

- Defined in src/ts/MouseHandler.ts:296
Installer function to listen for a specific event: mouse-move. Pass your callbacks here.

Note: this support chaining.

name

move

memberof

MouseHandler

instance

Parameters
- callback: (e: XMouseEvent) => void
  
  The move-callback to listen for.
  - - (e: XMouseEvent): void
    - Parameters
      - e: XMouseEvent
      Returns void
Returns MouseHandler

this

Private relPos

relPos(e: MouseEvent): XYCoords

- Defined in src/ts/MouseHandler.ts:195
Get relative position from the given MouseEvent.

name

relPos

memberof

MouseHandler

instance

Parameters
- e: MouseEvent
  
  The mouse event to get the relative position for.
Returns XYCoords

The relative mouse coordinates.

Private throwAlreadyInstalled

throwAlreadyInstalled(name: string): void

- Defined in src/ts/MouseHandler.ts:389
An internal function to throw events.

name

throwAlreadyInstalled

memberof

MouseHandler

instance

Parameters
- name: string
  
  The name of the event.
Returns void

Private unlistenFor

unlistenFor(eventName: string): void

- Defined in src/ts/MouseHandler.ts:257
Un-install a new listener.

name

listenFor

memberof

MouseHandler

instance

Parameters
- eventName: string
  
  The name of the firing event to unlisten for.
Returns void

up

up(callback: (e: XMouseEvent) => void): MouseHandler

- Defined in src/ts/MouseHandler.ts:315
Installer function to listen for a specific event: mouse-up. Pass your callbacks here.

Note: this support chaining.

name

up

memberof

MouseHandler

instance

Parameters
- callback: (e: XMouseEvent) => void
  
  The up-callback to listen for.
  - - (e: XMouseEvent): void
    - Parameters
      - e: XMouseEvent
      Returns void
Returns MouseHandler

this

wheel

wheel(callback: (e: XWheelEvent) => void): MouseHandler

- Defined in src/ts/MouseHandler.ts:372
Installer function to listen for a specific event: mouse-wheel. Pass your callbacks here.

Note: this support chaining.

name

wheel

memberof

MouseHandler

instance

Parameters
- callback: (e: XWheelEvent) => void
  
  The wheel-callback to listen for.
  - - (e: XWheelEvent): void
    - Parameters
      - e: XWheelEvent
      Returns void
Returns MouseHandler

this

Generated using TypeDoc

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Usage

Parameters

element: HTMLElement | SVGElement

Optional name: string

Returns MouseHandler

Properties

Private element

Private handlers

Private installed

Private listeners

Private mouseButton

Private mouseDownPos

Private mouseDragPos

Private name

Methods

click

Parameters

callback: (e: XMouseEvent) => void

Parameters

e: XMouseEvent

Returns void

Returns MouseHandler

Private destroy

Returns void

down

Parameters

callback: (e: XMouseEvent) => void

Parameters

e: XMouseEvent

Returns void

Returns MouseHandler

drag

Parameters

callback: XMouseCallback

Returns MouseHandler

Private listenFor

Parameters

eventName: string

Returns void

Private mkParams

Parameters

event: MouseEvent

eventName: string

Returns XMouseEvent

move

Parameters

callback: (e: XMouseEvent) => void

Parameters

e: XMouseEvent

Returns void

Returns MouseHandler

Private relPos

Parameters

e: MouseEvent

Returns XYCoords

Private throwAlreadyInstalled

Parameters

name: string

Returns void

Private unlistenFor

Parameters

eventName: string

Returns void

up

Parameters

callback: (e: XMouseEvent) => void

Parameters

e: XMouseEvent

Returns void

Returns MouseHandler

wheel

Parameters

callback: (e: XWheelEvent) => void