@checksub_team/peaks_timeline 2.0.0-alpha.14 → 2.0.0-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.15",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -15325,6 +15325,7 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this._peaks.on('main.allowInteractions', this.allowInteractions.bind(this));
         this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
         this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
+        this._peaks.on('lineIndicator.drag', this._onIndicatorDrag.bind(this));
     }
     LineGroups.prototype.fitToView = function () {
         this._lineIndicator.fitToView();
@@ -15692,6 +15693,30 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this.refreshLineYs();
         return line.id;
     };
+    LineGroups.prototype._onIndicatorDrag = function (lineId, y) {
+        const lineGroup = this._lineGroupsById[lineId];
+        if (!lineGroup) {
+            return;
+        }
+        const positions = this.getLinesUnderY(y);
+        if (positions[0] !== positions[1] || positions[0] === lineGroup.getPosition()) {
+            return;
+        }
+        const targetPos = positions[0];
+        const targetLineGroup = this._lineGroupsByPosition[targetPos];
+        const targetCenterY = targetLineGroup.y() + targetLineGroup.lineHeight() / 2;
+        const movingDown = targetPos > lineGroup.getPosition();
+        if (movingDown && y < targetCenterY || !movingDown && y > targetCenterY) {
+            return;
+        }
+        if (targetPos === lineGroup.getPosition() + 1) {
+            this._setLinePosition(targetLineGroup.getId(), lineGroup.getPosition());
+        } else {
+            this._setLinePosition(lineId, targetPos);
+        }
+        this.refreshLineYs();
+        this._peaks.emit('line.moved', lineGroup.getLine());
+    };
     LineGroups.prototype.updateSegments = function (frameStartTime, frameEndTime) {
         for (var lineId in this._segmentsGroups) {
             if (Utils.objectHasProperty(this._segmentsGroups, lineId)) {
@@ -15776,6 +15801,11 @@ module.exports = function (Konva, SVGs, Utils) {
         });
         this._layer.add(this._separatingLine);
         this._layer.draw();
+        this._isDragging = false;
+        this._dragLineId = null;
+        this._dragContainerRect = null;
+        this._onWindowMove = this._onWindowMove.bind(this);
+        this._onWindowUp = this._onWindowUp.bind(this);
     }
     LineIndicator.prototype.fitToView = function () {
         this._height = this._view.getHeight();
@@ -15863,11 +15893,22 @@ module.exports = function (Konva, SVGs, Utils) {
                 child.fill(child.getAttr('defaultColor'));
             });
             self.draw();
-            self._stage.container().style.cursor = 'default';
+            if (!self._isDragging) {
+                self._stage.container().style.cursor = 'default';
+            }
         });
         indicator.on('click', function (e) {
             self._peaks.emit('lineIndicator.click', self._indicators[lineGroup.getId()], e.evt);
         });
+        indicator.on('mousedown touchstart', function () {
+            self._dragLineId = lineGroup.getId();
+            self._dragContainerRect = self._stage.getContainer().getBoundingClientRect();
+            window.addEventListener('mousemove', self._onWindowMove, false);
+            window.addEventListener('touchmove', self._onWindowMove, false);
+            window.addEventListener('mouseup', self._onWindowUp, false);
+            window.addEventListener('touchend', self._onWindowUp, false);
+            window.addEventListener('blur', self._onWindowUp, false);
+        });
         return indicator;
     };
     LineIndicator.prototype.addIndicator = function (lineGroup) {
@@ -15953,6 +15994,33 @@ module.exports = function (Konva, SVGs, Utils) {
     LineIndicator.prototype.draw = function () {
         this._layer.draw();
     };
+    LineIndicator.prototype._onWindowMove = function (event) {
+        if (!this._dragContainerRect) {
+            return;
+        }
+        if (!this._isDragging) {
+            this._stage.container().style.cursor = 'grabbing';
+        }
+        var clientY;
+        if (event.type === 'touchmove') {
+            clientY = Math.floor(event.changedTouches[0].clientY);
+        } else {
+            clientY = event.clientY;
+        }
+        const relY = clientY - this._dragContainerRect.top;
+        this._peaks.emit('lineIndicator.drag', this._dragLineId, relY);
+    };
+    LineIndicator.prototype._onWindowUp = function () {
+        window.removeEventListener('mousemove', this._onWindowMove, false);
+        window.removeEventListener('touchmove', this._onWindowMove, false);
+        window.removeEventListener('mouseup', this._onWindowUp, false);
+        window.removeEventListener('touchend', this._onWindowUp, false);
+        window.removeEventListener('blur', this._onWindowUp, false);
+        this._isDragging = false;
+        this._dragLineId = null;
+        this._dragContainerRect = null;
+        this._stage.container().style.cursor = 'pointer';
+    };
     return LineIndicator;
 }(_dereq_('konva'), _dereq_('./svgs'), _dereq_('../utils'));
 },{"../utils":116,"./svgs":104,"konva":43}],94:[function(_dereq_,module,exports){

package/src/components/line-groups.js

@@ -61,6 +61,8 @@ define([
     this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
 
     this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
+
+    this._peaks.on('lineIndicator.drag', this._onIndicatorDrag.bind(this));
   }
 
   LineGroups.prototype.fitToView = function() {
@@ -563,6 +565,40 @@ define([
     return line.id;
   };
 
+  LineGroups.prototype._onIndicatorDrag = function(lineId, y) {
+    const lineGroup = this._lineGroupsById[lineId];
+
+    if (!lineGroup) {
+      return;
+    }
+
+    const positions = this.getLinesUnderY(y);
+
+    if (positions[0] !== positions[1] || positions[0] === lineGroup.getPosition()) {
+      return;
+    }
+
+    const targetPos = positions[0];
+    const targetLineGroup = this._lineGroupsByPosition[targetPos];
+    const targetCenterY = targetLineGroup.y() + (targetLineGroup.lineHeight() / 2);
+    const movingDown = targetPos > lineGroup.getPosition();
+
+    if ((movingDown && y < targetCenterY) || (!movingDown && y > targetCenterY)) {
+      return;
+    }
+
+    if (targetPos === lineGroup.getPosition() + 1) {
+      this._setLinePosition(targetLineGroup.getId(), lineGroup.getPosition());
+    }
+    else {
+      this._setLinePosition(lineId, targetPos);
+    }
+
+    this.refreshLineYs();
+
+    this._peaks.emit('line.moved', lineGroup.getLine());
+  };
+
   LineGroups.prototype.updateSegments = function(frameStartTime, frameEndTime) {
     for (var lineId in this._segmentsGroups) {
       if (Utils.objectHasProperty(this._segmentsGroups, lineId)) {

package/src/components/line-indicator.js

@@ -69,6 +69,13 @@ define([
     this._layer.add(this._separatingLine);
 
     this._layer.draw();
+
+    this._isDragging = false;
+    this._dragLineId = null;
+    this._dragContainerRect = null;
+
+    this._onWindowMove = this._onWindowMove.bind(this);
+    this._onWindowUp = this._onWindowUp.bind(this);
   }
 
   LineIndicator.prototype.fitToView = function() {
@@ -174,13 +181,26 @@ define([
         child.fill(child.getAttr('defaultColor'));
       });
       self.draw();
-      self._stage.container().style.cursor = 'default';
+      if (!self._isDragging) {
+        self._stage.container().style.cursor = 'default';
+      }
     });
 
     indicator.on('click', function(e) {
       self._peaks.emit('lineIndicator.click', self._indicators[lineGroup.getId()], e.evt);
     });
 
+    indicator.on('mousedown touchstart', function() {
+      self._dragLineId = lineGroup.getId();
+      self._dragContainerRect = self._stage.getContainer().getBoundingClientRect();
+
+      window.addEventListener('mousemove', self._onWindowMove, false);
+      window.addEventListener('touchmove', self._onWindowMove, false);
+      window.addEventListener('mouseup', self._onWindowUp, false);
+      window.addEventListener('touchend', self._onWindowUp, false);
+      window.addEventListener('blur', self._onWindowUp, false);
+    });
+
     return indicator;
   };
 
@@ -309,5 +329,42 @@ define([
     this._layer.draw();
   };
 
+  LineIndicator.prototype._onWindowMove = function(event) {
+    if (!this._dragContainerRect) {
+      return;
+    }
+
+    if (!this._isDragging) {
+      this._stage.container().style.cursor = 'grabbing';
+    }
+
+    var clientY;
+
+    if (event.type === 'touchmove') {
+      clientY = Math.floor(event.changedTouches[0].clientY);
+    }
+    else {
+      clientY = event.clientY;
+    }
+
+    const relY = clientY - this._dragContainerRect.top;
+
+    this._peaks.emit('lineIndicator.drag', this._dragLineId, relY);
+  };
+
+  LineIndicator.prototype._onWindowUp = function() {
+    window.removeEventListener('mousemove', this._onWindowMove, false);
+    window.removeEventListener('touchmove', this._onWindowMove, false);
+    window.removeEventListener('mouseup', this._onWindowUp, false);
+    window.removeEventListener('touchend', this._onWindowUp, false);
+    window.removeEventListener('blur', this._onWindowUp, false);
+
+    this._isDragging = false;
+    this._dragLineId = null;
+    this._dragContainerRect = null;
+
+    this._stage.container().style.cursor = 'pointer';
+  };
+
   return LineIndicator;
 });