Base class for Mouse-interactable ui-objects.

Hierarchy

Implements

Constructors

Accessors

  • get draggable(): boolean
  • Returns boolean

  • set draggable(state: boolean): void
  • Parameters

    • state: boolean

    Returns void

Methods

  • Add callback function to be triggered when specified event is fired.

     // Example syntax
    object.addEventListener('click', (event) => {
    console.log(event)
    })

    Some classes also report extra information about the interacted object with the second parameter:

     // Most series share information about interacted data point
    series.addEventListener('click', (event, info) => {
    console.log(info)
    })

    Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:

     // Example this listener will only fire once
    object.addEventListener('click', (event) => {})

    Each class has its own list of supported events. Some events are from HTML standard (click, pointerdown, etc.), while others are own events from LightningChart JS (dispose, resize, etc.)

    To find what events are available, you can try following:

    • If your development environment has TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.
    • Otherwise, open the class section in API documentation and check out which interface K type parameter extends.

    Type Parameters

    Parameters

    Returns void

  • Returns

    Mouse interactions state

    Returns boolean

  • Get element visibility.

    Returns

    true when element is set to be visible and false otherwise.

    Returns boolean

  • Remove event listener added using addEventListener. The expected argument should be the exact same callback function that was supplied using addEventListener:

     // Basic example syntax
    const listener = () => {}
    obj.addEventListener('click', listener)
    obj.removeEventListener('click', listener)
     // Basic boilerplate of custom interaction when user drags on an object
    obj.addEventListener('pointerdown', (eventDown) => {
    let prevCoord = eventDown
    const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
    const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
    prevCoord = eventMove
    console.log(delta, eventMove.clientX, eventMove.clientY)
    }
    const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
    window.removeEventListener('pointermove', handlePointerMove)
    window.removeEventListener('pointerup', handlePointerUp)
    }
    window.addEventListener('pointermove', handlePointerMove)
    window.addEventListener('pointerup', handlePointerUp)
    })

    Type Parameters

    Parameters

    Returns void

  • Set mouse interactions enabled. Implementations should update the mouse-interactions of any Shapes they may contain here.

    Parameters

    • state: boolean

    Returns UIObject

  • Set element visibility.

    Returns

    Object itself.

    Parameters

    • state: boolean

      true when element should be visible and false when element should be hidden.

    Returns UIObject