Fixed point dragging

bbc · Jul 22, 2023 · b3fcd8b · b3fcd8b
1 parent 2d50f8a
commit b3fcd8b
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 5 deletions.
diff --git a/src/point-marker.js b/src/point-marker.js
@@ -37,9 +37,9 @@ import Konva from 'konva/lib/Core';
  */
 
 function PointMarker(options) {
-  this._point    = options.point;
-  this._marker   = options.marker;
-  this._editable = options.editable;
+  this._point     = options.point;
+  this._marker    = options.marker;
+  this._draggable = options.draggable;
 
   this._onDragStart   = options.onDragStart;
   this._onDragMove    = options.onDragMove;
@@ -51,7 +51,7 @@ function PointMarker(options) {
   this._group = new Konva.Group({
     name:          'point-marker',
     point:         this._point,
-    draggable:     this._editable,
+    draggable:     this._draggable,
     dragBoundFunc: options.dragBoundFunc
   });
 

diff --git a/src/points-layer.js b/src/points-layer.js
@@ -202,7 +202,7 @@ PointsLayer.prototype._onPointsDrag = function(event) {
  */
 
 PointsLayer.prototype._onPointMarkerDragMove = function(event, point) {
-  const pointMarker = this._pointMarkers[point.id];
+  const pointMarker = this._pointMarkers[point.pid];
 
   const markerX = pointMarker.getX();
 

diff --git a/test/waveform-zoomview-spec.js b/test/waveform-zoomview-spec.js
@@ -1,4 +1,5 @@
 import Peaks from '../src/main';
+import { Point } from '../src/point';
 import { Segment } from '../src/segment';
 
 import InputController from './helpers/input-controller';
@@ -34,6 +35,9 @@ describe('WaveformZoomView', function() {
       dataUri: {
         json: 'base/test_data/sample.json'
       },
+      points: [
+        { id: 'point1', time: 7.0, editable: true }
+      ],
       segments: [
         { id: 'segment1', startTime: 1.0,  endTime: 2.0, editable: true },
         { id: 'segment2', startTime: 3.0,  endTime: 4.0, editable: true },
@@ -1163,4 +1167,61 @@ describe('WaveformZoomView', function() {
       });
     });
   });
+
+  context('when dragging a point', function() {
+    it('should move the point', function() {
+      const view = p.views.getView('zoomview');
+      const x = view.timeToPixels(7.0);
+      const distance = 100;
+
+      inputController.mouseDown({ x: x, y: 50 });
+      inputController.mouseMove({ x: x + distance, y: 50 });
+      inputController.mouseUp({ x: x + distance, y: 50 });
+
+      const point = p.points.getPoint('point1');
+
+      expect(point.time).to.equal(view.pixelsToTime(x + distance));
+    });
+
+    it('should emit points.dragstart and points.dragmove events', function() {
+      const counters = {
+        dragStart: 0,
+        dragMove: 0,
+        dragEnd: 0
+      };
+
+      p.on('points.dragstart', function(event) {
+        counters.dragStart++;
+
+        expect(event.point).to.be.an.instanceOf(Point);
+        expect(event.point.id).to.equal('point1');
+      });
+
+      p.on('points.dragMove', function(event) {
+        counters.dragMove++;
+
+        expect(event.point).to.be.an.instanceOf(Point);
+        expect(event.point.id).to.equal('point1');
+      });
+
+      p.on('points.dragend', function(event) {
+        counters.dragEnd++;
+
+        expect(event.point).to.be.an.instanceOf(Point);
+        expect(event.point.id).to.equal('point1');
+      });
+
+      const view = p.views.getView('zoomview');
+      const x = view.timeToPixels(7.0);
+      const distance = 100;
+
+      inputController.mouseDown({ x: x, y: 50 });
+      inputController.mouseMove({ x: x + distance, y: 50 });
+      inputController.mouseUp({ x: x + distance, y: 50 });
+
+      expect(counters.dragStart).to.equal(1);
+      expect(counters.dragMove).to.equal(1);
+      expect(counters.dragEnd).to.equal(1);
+    });
+  });
 });