Events

Events component is a foundation of this library. Events provide a highly performant communication mechanism for all components, scripts and external modules. Unlike the standard Svelte or Vue events, they are adding no delay. This is important when we want to build very responsive charting software.

let chart = new NightVision()
console.log(chart.events)

Usage

There are just a few methods that you need to know to connect new components/modules.

events.on(compAndType, handler)

• Type: function
• Arguments
  • compAndType: string V-component + event type <component-id>:<event-name>
  • handler: function Event handler

We assume that you can split your application into virtual components, meaning you can give a name to every significant piece of the code. For example, it can be a NavyJS script, external module or just some object in your app. The only requirement - it should be unique. Now that you have a v-component, you can listen to some events:

// Your new component
chart.events.on('my-comp:update', event => { /* ... */ })

// Inside NavyJS script
chart.events.on('script-1:trigger-smth', event => { /* ... */ })

// New library
chart.events.on('math-lib:solve-task', event => { /* ... */ })

Each component can have only one listener of a particular event:

chart.events.on('my-comp:update', handler1)

// This will replace handler1 with handler2
chart.events.on('my-comp:update', handler2)

If for example you have a class that needs to listen to a specific event, you must provide a unique id for each object of this class:

class A {
    constructor(id) {
        chart.events.on(`A-${id}:update`, handler)
    }
    // ...
}

Two different components can listen to an event with the same name:

// Both handlers will be triggered when 'update' event is emitted
events.on('compo-1:update', handler1)
events.on('compo-2:update', handler2)

And finally, if you are planning to add new modules or want to access another NightVision chart, you can get a singleton instance with a simple call:

import { Events } from 'night-vision'

// Event of another NVJS instance
const events = Events.instance('<nvjs-id>')

// Create a new module
const events = Events.instance('<new-module-id>')

events.emit(eventType, object)

• Type: function
• Arguments
  • eventType: string Event type(name) to be emitted
  • object: * Object to be emitted

Emits an event with the type eventType to all component that listen to this event.

// Both handlers will be triggered when 'update' event is emitted
events.on('compo-1:update', handler1)
events.on('compo-2:update', handler2)
// ...
events.emit('update', {a: 1})

object can have any type, default is undefined.

events.emitSpec(comp, eventType, object)

• Type: function
• Arguments
  • comp: string Component that should receive the event
  • eventType: string Event type(name) to be emitted
  • object: * Object to be emitted

Emits an event to a specific component.

INFO

This method is much more performant than emit.

events.on('compo-1:update', handler1) // Will trigger
events.on('compo-2:update', handler2) // Will not trigger
// ...
events.emitSpec('compo-1', 'update', {a: 1})

events.off(comp, eventType)

• Type: function
• Arguments
  • comp: string Component name
  • ?eventType: string Event type(name) to be removed (optional)

Removes one event of the type eventType from component comp, or all events, if not defined. You should call off() method every time your virtual component is destroyed:

class A {
    constructor(id) {
        chart.events.on(`A-${id}:update`, handler)
        this.id = id
    }
    // ...
    onDestroy() {
        chart.events.off(`A-${this.id}`)
    }
}