Event System

An important part of the Kivy Hub flow is how events are handled. Events are usually processed in three steps:

1. The user triggers a global pose or a touch either through the hand recognition system or by using the mouse and keyboard in the web environment.

2. Through an event propagation function, all elements at the point where the event was triggered are gathered and sorted by z-index. For an element to be taken into consideration, it must have a data-can-interact prop in HTML containing a 3-bit mask (eg. 011), each digit allowing for a type of touch. For example, if an element has the mask 101, then it can get triggered by primary and tertiary touches. After the elements are sorted, the first one is taken and, through the JS event system, an event is triggered for that element. These events have props and types (enter and exit).

3. The event is locally handled by the component.

Event types

Event body

The event contains a details prop with the following properties:

Global Event Registry

Apart from the default event handling inside Kivy, you may also manually register and remove functions from certain events that are globally managed separately from the rest.

Currently, the only event available in the event registry is ‘touch-move’, which is triggered whenever the cursor or mouse moves.

To get access to the event registry, check the using input page.

Mounting an Event

function myFunction(e) {
  console.log("event-name triggered: ", e);
}
 
eventRegistry.on("event-name", myFunction);

Dismounting an Event

eventRegistry.off("event-name", myFunction);

Best Practice

To ensure that all events are mounted and dismounted correctly, the best way to set up events in the event registry inside react components is by using an useEffect hook like so:

useEffect(() => {
  function myFunction(e) {
    console.log("event-name triggered: ", e);
  }
 
  eventRegistry.on("event-name", myFunction);
 
  return () => {
    eventRegistry.off("event-name", myFunction);
  };
}, []);

Use this snippet inside your react components.