@checksub_team/peaks_timeline 2.0.0-alpha.9 → 2.0.1

package/src/components/axis.js

@@ -63,18 +63,18 @@ define([
   Axis.prototype._onPlayheadMoved = function(playheadX, playheadWidth) {
     this._maskStart = playheadX + this._view.getFrameOffset();
     this._maskEnd = playheadX + this._view.getFrameOffset() + playheadWidth;
-    this._frontLayer.draw();
+    this._frontLayer.batchDraw();
   };
 
   Axis.prototype._onPlayheadHidden = function() {
     this._maskStart = null;
     this._maskEnd = null;
-    this._frontLayer.draw();
+    this._frontLayer.batchDraw();
   };
 
-  Axis.prototype.draw = function() {
-    this._backLayer.draw();
-    this._frontLayer.draw();
+  Axis.prototype.batchDraw = function() {
+    this._backLayer.batchDraw();
+    this._frontLayer.batchDraw();
   };
 
   Axis.prototype.addBackToStage = function(stage) {

package/src/components/data-retriever.js

@@ -7,8 +7,9 @@
  */
 
 define([
-    './data'
-    ], function(Data) {
+    './data',
+    '../utils'
+    ], function(Data, Utils) {
     'use strict';
 
     /**
@@ -84,13 +85,11 @@ define([
 
                     return response.blob();
                 })
-                .catch(function(err) {
-                    return later(delay)
-                        .then(function() {
-                            return recur(timesTried + 1, err);
-                        });
-                })
                 .then(function(blob) {
+                    if (Utils.isNullOrUndefined(blob)) {
+                        throw new Error('Failed to retrieve blob');
+                    }
+
                     var type = blob.type;
 
                     if (type) {
@@ -108,6 +107,12 @@ define([
                             self._peaks.emit('data.retrieved', data, src, url);
                         });
                     }
+                })
+                .catch(function(err) {
+                    return later(delay)
+                        .then(function() {
+                            return recur(timesTried + 1, err);
+                        });
                 });
         }
 

package/src/components/default-segment-marker.js

@@ -86,12 +86,12 @@ define([
     if (self._options.draggable) {
       group.on('dragstart', function() {
         self._label.show();
-        self._options.group.draw();
+        self._batchDraw();
       });
 
       group.on('dragend', function() {
         self._label.hide();
-        self._options.group.draw();
+        self._batchDraw();
       });
     }
 
@@ -100,13 +100,13 @@ define([
         self._options.view.setCursor('ew-resize');
         self._label.show();
         self._group.moveToTop();
-        self._options.view.drawSourcesLayer();
+        self._options.view.batchDrawSourcesLayer();
       });
 
       self._handle.on('mouseout touchend', function() {
         self._options.view.setCursor('default');
         self._label.hide();
-        self._options.view.drawSourcesLayer();
+        self._options.view.batchDrawSourcesLayer();
       });
     }
   };
@@ -128,5 +128,14 @@ define([
     this._label.setText(Utils.formatTime(time, false));
   };
 
+  DefaultSegmentMarker.prototype._batchDraw = function() {
+    const group = this._options.group;
+    const layer = group && group.getLayer && group.getLayer();
+
+    if (layer && typeof layer.batchDraw === 'function') {
+      layer.batchDraw();
+    }
+  };
+
   return DefaultSegmentMarker;
 });

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

@@ -68,7 +68,14 @@ define([
 
     this._layer.add(this._separatingLine);
 
-    this._layer.draw();
+    this._layer.batchDraw();
+
+    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() {
@@ -165,7 +172,7 @@ define([
       indicator.getChildren().forEach(function(child) {
         child.fill(child.getAttr('selectedColor'));
       });
-      self.draw();
+      self.batchDraw();
       self._stage.container().style.cursor = 'pointer';
     });
 
@@ -173,14 +180,27 @@ define([
       indicator.getChildren().forEach(function(child) {
         child.fill(child.getAttr('defaultColor'));
       });
-      self.draw();
-      self._stage.container().style.cursor = 'default';
+      self.batchDraw();
+      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;
   };
 
@@ -199,7 +219,8 @@ define([
       this._indicators[line.id] = {
         lineGroup: lineGroup,
         indicator: indicator,
-        type: line.indicatorType
+        type: line.indicatorType,
+        text: line.indicatorText
       };
     }
   };
@@ -230,7 +251,7 @@ define([
     indicatorData.type = line.indicatorType;
     indicatorData.text = line.indicatorText;
 
-    this.draw();
+    this.batchDraw();
   };
 
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
@@ -300,13 +321,50 @@ define([
     }
 
     if (anyChange) {
-      this.draw();
+      this.batchDraw();
     }
     return anyChange;
   };
 
-  LineIndicator.prototype.draw = function() {
-    this._layer.draw();
+  LineIndicator.prototype.batchDraw = function() {
+    this._layer.batchDraw();
+  };
+
+  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;

package/src/components/mode-layer.js

@@ -229,7 +229,7 @@ define([
     }
     else {
       this.deselectDifference([], true);
-      this._view.drawSourcesLayer();  // Redraw sources layer to remove selection
+      this._view.batchDrawSourcesLayer();  // Redraw sources layer to remove selection
     }
   };
 
@@ -258,7 +258,7 @@ define([
   ModeLayer.prototype._onMouseEnterInCutMode = function() {
     this._cutGroup.visible(true);
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   ModeLayer.prototype._updateCursorTime = function(position) {
@@ -359,13 +359,13 @@ define([
     this._updateCursorTime(cuttingPosition);
     this._updateCuttingLine(cuttingPosition);
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   ModeLayer.prototype._onMouseLeaveInCutMode = function() {
     this._cutGroup.visible(false);
 
-    this._layer.draw();
+    this._layer.batchDraw();
   };
 
   ModeLayer.prototype._onMouseClickInCutMode = function() {
@@ -417,7 +417,7 @@ define([
         this._updateCursorTime(cuttingPosition);
         this._updateCuttingLine(cuttingPosition);
 
-        this._layer.draw();
+        this._layer.batchDraw();
       }
     }
   };
@@ -494,8 +494,8 @@ define([
     }
 
     this._mode = mode;
-    this._layer.draw();
-    this._view.drawSourcesLayer();
+    this._layer.batchDraw();
+    this._view.batchDrawSourcesLayer();
   };
 
   ModeLayer.prototype.getCurrentMode = function() {

package/src/components/playhead-layer.js

@@ -269,7 +269,7 @@ define([
     }
 
     this._time = time;
-    this._playheadLayer.draw();
+    this._playheadLayer.batchDraw();
   };
 
   /**
@@ -307,7 +307,7 @@ define([
     }
 
     if (updated) {
-      this._playheadLayer.draw();
+      this._playheadLayer.batchDraw();
     }
   };
 

package/src/components/segment-shape.js

@@ -380,7 +380,7 @@ define([
       0.65, this._segment.warningColor
     ]);
 
-    this._view.drawSourcesLayer();
+    this._view.batchDrawSourcesLayer();
 
     this._peaks.emit('segments.mouseenter', this._segment);
   };
@@ -400,7 +400,7 @@ define([
       0.65, this._segment.warningColor
     ]);
 
-    this._view.drawSourcesLayer();
+    this._view.batchDrawSourcesLayer();
 
     this._peaks.emit('segments.mouseleave', this._segment);
   };

package/src/components/segments-group.js

@@ -377,7 +377,7 @@ define([
   };
 
   SegmentsGroup.prototype._draw = function() {
-    this._view.drawSourcesLayer();
+    this._view.batchDrawSourcesLayer();
   };
 
   /**