Class: EventMonitor

EventMonitor

EventMonitor sets up mouse click and movement event handlers on the CGView canvas.

CGView event contents (based on mouse position):

Property Description
bp Base pair
centerOffset Distance from center of the map. For a circular map, this is the radius, while for a linear map, it's the distance from the backbone.
elementType One of: 'legendItem', 'caption', 'feature', 'plot', 'backbone', 'contig', 'label', or undefined
element The element (e.g, a feature), if there is one.
slot Slot (if there is one). Track can be accessed from the slot (slot.track).
score Score for element (e.g. feature, plot), if available.
canvasX Position on the canvas X axis, where the origin is the top-left. See scales for details.
canvasY Position on the canvas Y axis, where the origin is the top-left. See scales for details.
mapX Position on the map domain X axis, where the origin is the center of the map. See scales for details.
mapY Position on the map domain Y axis, where the origin is the center of the map. See scales for details.
d3 The d3 event object.

Examples

// Log the feature name when clicked
cgv.on('click', (event) => {
  if (event.elementType === 'feature') {
    console.log(`Feature '${event.element.name}' was clicked`);
  }
});

// Log the base pair position of the mouse as it moves
cgv.on('mousemove', (event) => {
  console.log(`BP: ${event.bp}`);
});