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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "2.0.0-alpha.13",
+  "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();
@@ -15502,11 +15503,18 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this._automaticLineCreationPosition = newLinePosition;
         this._automaticLineCreationTimeout = setTimeout(function () {
             this._automaticLineCreationTimeout = null;
-            var currentLine = this._lineGroupsByPosition[initialPosition];
+            const currentLine = this._lineGroupsByPosition[initialPosition];
             sources = sources.filter(function (source) {
                 return currentLine.hasSource(source.id);
             });
-            if (sources.length === 0 || sources.length === currentLine.countRemainingElements()) {
+            if (sources.length === 0) {
+                this.stopAutomaticLineCreation();
+                return;
+            }
+            const posAround = this.getLinesAroundPos(currentLine.getPosition());
+            const targetPosIsJustBefore = newLinePosition <= currentLine.getPosition() && newLinePosition > posAround[0];
+            const targetPosIsJustAfter = newLinePosition >= currentLine.getPosition() && newLinePosition <= posAround[1];
+            if (sources.length === currentLine.countRemainingElements() && (targetPosIsJustBefore || targetPosIsJustAfter)) {
                 this.stopAutomaticLineCreation();
                 return;
             }
@@ -15583,6 +15591,24 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         }
         return pos;
     };
+    LineGroups.prototype.getLinesAroundPos = function (pos) {
+        var returnPos = [
+            -1,
+            this.getLastPosition() + 1
+        ];
+        for (var position in this._lineGroupsByPosition) {
+            if (Utils.objectHasProperty(this._lineGroupsByPosition, position)) {
+                var p = parseInt(position, 10);
+                if (p < pos) {
+                    returnPos[0] = p;
+                } else if (p > pos) {
+                    returnPos[1] = p;
+                    break;
+                }
+            }
+        }
+        return returnPos;
+    };
     LineGroups.prototype._moveSourcesToPositionIfPossible = function (sources, targetPosition, targetTime, sourcesDuration) {
         const lineGroup = this._lineGroupsByPosition[targetPosition];
         if (!lineGroup || lineGroup.isSegmentsLine()) {
@@ -15667,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)) {
@@ -15751,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();
@@ -15838,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) {
@@ -15928,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() {
@@ -298,13 +300,25 @@ define([
     this._automaticLineCreationTimeout = setTimeout(function() {
       this._automaticLineCreationTimeout = null;
 
-      var currentLine = this._lineGroupsByPosition[initialPosition];
+      const currentLine = this._lineGroupsByPosition[initialPosition];
 
       sources = sources.filter(function(source) {
         return currentLine.hasSource(source.id);
       });
 
-      if (sources.length === 0 || sources.length === currentLine.countRemainingElements()) {
+      if (sources.length === 0) {
+        this.stopAutomaticLineCreation();
+        return;
+      }
+
+      const posAround = this.getLinesAroundPos(currentLine.getPosition());
+      const targetPosIsJustBefore = newLinePosition <= currentLine.getPosition() && newLinePosition > posAround[0];
+      const targetPosIsJustAfter = newLinePosition >= currentLine.getPosition() && newLinePosition <= posAround[1];
+
+      if (
+        sources.length === currentLine.countRemainingElements() &&
+        (targetPosIsJustBefore || targetPosIsJustAfter)
+      ) {
         this.stopAutomaticLineCreation();
         return;
       }
@@ -409,6 +423,26 @@ define([
     return pos;
   };
 
+  LineGroups.prototype.getLinesAroundPos = function(pos) {
+    var returnPos = [-1, this.getLastPosition() + 1];
+
+    for (var position in this._lineGroupsByPosition) {
+      if (Utils.objectHasProperty(this._lineGroupsByPosition, position)) {
+        var p = parseInt(position, 10);
+
+        if (p < pos) {
+          returnPos[0] = p;
+        }
+        else if (p > pos) {
+          returnPos[1] = p;
+          break;
+        }
+      }
+    }
+
+    return returnPos;
+  };
+
   LineGroups.prototype._moveSourcesToPositionIfPossible = function(sources, targetPosition, targetTime,
     sourcesDuration
   ) {
@@ -531,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;
 });