Changed event handlers to also expose MouseEvent

[chrisn]

See issue #414. This changes a number of event handlers to also expose the MouseEvent, so that applications can, for example, check the keyboard state. This is a breaking API change and so users will need to update their code, as shown below.

Waveform events

• overview.click, overview.dblclick,
• zoomview.click, zoomview.dblclick

// Before
peaks.on('zoomview.click', function(time) {
  console.log(time);
});

// After
peaks.on('zoomview.click', function(event) {
  console.log(event.time);
  console.log(event.evt.ctrlKey);
  console.log(event.evt.shiftKey);
});

Point events

• points.dragstart, points.dragmove, points.dragend
• points.mouseenter, points.mouseleave
• points.click, points.dblclick

// Before
peaks.on('point.click', function(time) {
  console.log(time);
});

// After
peaks.on('point.click', function(event) {
  console.log(event.point);
  console.log(event.evt.ctrlKey);
  console.log(event.evt.shiftKey);
});

Segment events

• segments.dragstart, segments.dragged, segments.dragend

// Before
peaks.on('segments.dragged', function(segment, startMarker) {
  console.log(segment);
  console.log(startMarker);
});

// After
peaks.on('segments.dragged', function(event) {
  console.log(event.segment);
  console.log(event.startMarker);
  console.log(event.evt.ctrlKey);
  console.log(event.evt.shiftKey);
});

• segments.mouseenter, segments.mouseleave
• segments.click, segments.dblclick

// Before
peaks.on('segments.click', function(time) {
  console.log(time);
});

// After
peaks.on('segments.click', function(event) {
  console.log(event.segment);
  console.log(event.evt.ctrlKey);
  console.log(event.evt.shiftKey);
});

[rowild]

Does this influence the structure of the data passed to 'points.update({ ... })'? https://github.com/bbc/peaks.js#pointupdate-time-labeltext-color-editable--

[rowild]

I am having troubles to get the points reacting to their events again. In my app, when a marker is set via a key stroke, the "addMarker" method creates an object and saves that one to the VueX store:

export default {
  methods: {
    addNewMarker(key) {
      const opts = {
        time: this.peaks.player.getCurrentTime(),
        id: `peaks.point.${this.getCues.length + 1}`,
        labelText: key,
        editable: true,
        color: this.pointColors[this.experimentStep][parseInt(key)],
        // new attrs
        markerDegree: parseInt(key),
        [...]
      }

      // Store to VueX
      this.$store.commit('experiment/addCue', pointOpts)

      // Store to peaks.points array
      this.peaks.points.add(pointOpts)
    }
  }
}

The screenshot shows a status of VueX with some cues.

Due to the nature of the project (there are 2 steps, in the 1st step the user cannot drag/click/... pointers) those pointers are recreated in a 2nd step (because the pointers are now drawn differently, with new visual features).

1. all points are removed via removeAll, then
2. the points are reassigned again by looping over the cues stored in Vues and assigning them to the this.peaks.points array

I suspect the second step is the one that does not go well with the new peaks functionalities:

[...]
else if (this.experimentStep === 2 ) {
  // Empty points array
  this.peaks.points.removeAll()

  // re-assign points from vuex – is this the problem? If so, how to solve it?
  this.getCues.forEach(item => {
    this.peaks.points.add(item)
  })
}

From then on the pointers won't react to any event (click, dblclick, dragstart...) anymore.

Do you happen to have an idea what I am doing wrong?