Classdesc

A simple mouse handler for demos. Use to avoid load massive libraries like jQuery.

Requires

XYCoords

Constructors

  • The constructor.

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

    Usage

    Parameters

    • element: HTMLElement | SVGElement
    • Optional name: string

    Returns MouseHandler

    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

Properties

element: HTMLElement | SVGElement
handlers: Record<string, XMouseCallback> = {}
installed: Record<string, boolean> = {}
listeners: Record<string, XMouseCallback> = {}
mouseButton: number = -1
mouseDownPos: {
    x: number;
    y: number;
} = undefined

Type declaration

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

Type declaration

  • x: number
  • y: number
name: string

Methods

  • Private

    Call this when your work is done.

    The function will un-install all event listeners.

    Returns void

    Name

    destroy

    Memberof

    MouseHandler

    Instance

  • Private

    Install a new listener. Please note that this mouse handler can only handle one listener per event type.

    Parameters

    • eventName: string

      The name of the firing event to listen for.

    Returns void

    Name

    listenFor

    Memberof

    MouseHandler

    Instance

  • Private

    Get relative position from the given MouseEvent.

    Parameters

    • e: MouseEvent

      The mouse event to get the relative position for.

    Returns XYCoords

    The relative mouse coordinates.

    Name

    relPos

    Memberof

    MouseHandler

    Instance

  • Private

    An internal function to throw events.

    Parameters

    • name: string

      The name of the event.

    Returns void

    Name

    throwAlreadyInstalled

    Memberof

    MouseHandler

    Instance

  • Private

    Un-install a new listener.

    Parameters

    • eventName: string

      The name of the firing event to unlisten for.

    Returns void

    Name

    listenFor

    Memberof

    MouseHandler

    Instance