Events

In the previous chapter we learned how modify nodes and node properties. Now we see how to listen and react to such changes.

The webvis API has an event system, which responds to all kind of changes, e.g. modifications to the instanceGraph or user interactions. Most actions, such as adding a node to the InstanceGraph or clicking the visible geometry of a node, will generate events. Events are handled by event listener, which are callbacks registered for a to be specified set of events, which will be triggered when the event is generated.

Webvis generates more than 70 different events.

The following example registers a single listener for multiple different events and prints a short message in a panel. The HTML part adds a button and two panel inside a container, which are styled with the CSS. The JavaScript code adds the functionality. First we register one eventListener for four different eventTypes, the listener will call a function everytime an event occurred. We check the event.type to differ, which eventType happend and change the content of our panel accordingly. Furthermore we declare a function, which adds a cube with inital color and translates it incremental. This function is called, everytime our button is clicked.

Try to add nodes using the button and delete them using the UI menu.