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

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/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() {
@@ -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

@@ -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;
   };
 
@@ -230,7 +250,7 @@ define([
     indicatorData.type = line.indicatorType;
     indicatorData.text = line.indicatorText;
 
-    this.draw();
+    this.batchDraw();
   };
 
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
@@ -300,13 +320,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();
   };
 
   /**

package/src/components/source-group.js

@@ -24,6 +24,7 @@ define([
   var SPACING_BETWEEN_PREVIEWS = 1.5;
   var CORNER_RADIUS = 8;
   var INDICATOR_RADIUS = 4; // px
+  var PREVIEW_CREATE_CHUNK = 8; // number of preview tiles to add per idle slice
 
   /**
    * Creates a source group for the given source.
@@ -60,6 +61,8 @@ define([
     this._isDragged = false;
 
     this._previewList = [];
+  // internal queue state for async preview creation
+  this._previewBuildQueue = new Set();
 
     this._markersGroup = this._createMarkers();
 
@@ -131,7 +134,7 @@ define([
     if (!this._source.loading) {
       this._showButtons();
     }
-    this._group.draw();
+  this._batchDraw();
   };
 
   SourceGroup.prototype._onHoverEnd = function() {
@@ -139,7 +142,7 @@ define([
     this._manualHover = false;
     this._view.setHoveredElement(null);
     this._hideButtons();
-    this._group.draw();
+  this._batchDraw();
   };
 
   SourceGroup.prototype._onDragStart = function(element) {
@@ -211,7 +214,7 @@ define([
           leftHandle ? start + diff + timeOffsetDiff : null,
           leftHandle ? null : end + diff + timeOffsetDiff
         )) {
-          this._layer.draw();
+          this._layer.batchDraw();
         }
       }.bind(this)
     );
@@ -843,80 +846,49 @@ define([
           throw err;
         }
 
-        originalWaveformData.hasAudio = self._hasAudio(originalWaveformData);
+        var newScale = originalWaveformData.sample_rate / self._view.getTimeToPixelsMaxZoom();
 
-        if (originalWaveformData.hasAudio) {
-          var newScale = originalWaveformData.sample_rate / self._view.getTimeToPixelsMaxZoom();
-
-          if (newScale > originalWaveformData.scale) {
-            self._minScale = newScale;
-          }
-          else {
-            self._minScale = originalWaveformData.scale;
-          }
-
-          self._view.setTimeToPixelsMaxZoom(originalWaveformData.sample_rate / self._minScale);
+        if (newScale > originalWaveformData.scale) {
+          self._minScale = newScale;
+        }
+        else {
+          self._minScale = originalWaveformData.scale;
         }
 
+        self._view.setTimeToPixelsMaxZoom(originalWaveformData.sample_rate / self._minScale);
+
         self._layer.setLoadedData(url, originalWaveformData);
         self._layer.setLoadedData(
           url + '-scaled',
           { data: originalWaveformData, scale: originalWaveformData.sample_rate / self._minScale }
         );
         preview.loaded = true;
-        self._createAudioPreview(preview, originalWaveformData, redraw);
+        self._createAudioPreview(preview, redraw);
       });
     }
     else {
       preview.loaded = true;
-      this._createAudioPreview(preview, audioData, redraw);
+      this._createAudioPreview(preview, redraw);
     }
   };
 
-  SourceGroup.prototype._hasAudio = function(waveformData) {
-    var channels = waveformData.channels;
-    var channel, someIsNotZero = false;
-
-    for (var i = 0; i < channels; i++) {
-      channel = waveformData.channel(i);
-
-      someIsNotZero = channel.min_array().some(function(item) {
-        return item !== 0;
-      });
+  SourceGroup.prototype._createAudioPreview = function(preview, redraw) {
+    var waveform = new WaveformShape({
+      layer: this._layer,
+      view: this._view,
+      source: this._source,
+      height: preview.group.height(),
+      url: preview.url
+    });
 
-      if (!someIsNotZero) {
-        someIsNotZero = channel.max_array().some(function(item) {
-          return item !== 0;
-        });
-      }
+    preview.group.add(waveform);
+    this._addToUnwrap(preview.group);
 
-      if (someIsNotZero) {
-        break;
-      }
+    if (redraw) {
+      this._layer.rescale(true);
     }
 
-    return someIsNotZero;
-  };
-
-  SourceGroup.prototype._createAudioPreview = function(preview, waveformData, redraw) {
-    if (waveformData.hasAudio) {
-      var waveform = new WaveformShape({
-        layer: this._layer,
-        view: this._view,
-        source: this._source,
-        height: preview.group.height(),
-        url: preview.url
-      });
-
-      preview.group.add(waveform);
-      this._addToUnwrap(preview.group);
-
-      if (redraw) {
-        this._layer.rescale(true);
-      }
-
-      this._previewList.push(preview);
-    }
+    this._previewList.push(preview);
   };
 
   SourceGroup.prototype.getAudioPreview = function() {
@@ -1008,37 +980,100 @@ define([
               imageNumber = 0;
             }
 
-            var imageList = preview.group.getChildren();
-
-            var i = 0;
-
-            for (i = 0; i < imageNumber; i++) {
-              if (imageList.length > i) {
-                imageList[i].visible(true);
-              }
-              else {
-                var imagePreview = new Konva.Image({
-                  x: preview.imageData.borderSpacing + i * interImageSpacing,
-                  y: preview.imageData.borderSpacing,
-                  image: preview.imageData.image,
-                  width: preview.imageData.width,
-                  height: preview.imageData.height,
-                  listening: false,
-                  visible: true
-                });
-
-                preview.group.add(imagePreview);
-              }
-            }
-
-            for (i = imageNumber; i < imageList.length; i++) {
-              imageList[i].visible(false);
-            }
+            self._ensureImagePreviewCount(preview, imageNumber, interImageSpacing);
         }
       }
     });
   };
 
+  SourceGroup.prototype._batchDraw = function() {
+    var layer = this._group && this._group.getLayer && this._group.getLayer();
+
+    if (layer && typeof layer.batchDraw === 'function') {
+      layer.batchDraw();
+    }
+  };
+
+  // Utility to schedule work during idle time or next frame
+  SourceGroup.prototype._scheduleIdle = function(fn) {
+    if (typeof window !== 'undefined' && window.requestIdleCallback) {
+      return window.requestIdleCallback(fn, { timeout: 50 });
+    }
+
+    if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+      return window.requestAnimationFrame(function() {
+        fn({
+          timeRemaining: function() {
+            return 0;
+          },
+          didTimeout: true
+        });
+      });
+    }
+
+    return setTimeout(function() {
+      fn({
+        timeRemaining: function() {
+          return 0;
+        },
+        didTimeout: true
+      });
+    }, 0);
+  };
+
+  SourceGroup.prototype._ensureImagePreviewCount = function(preview, targetCount, interImageSpacing) {
+    var imageList = preview.group.getChildren();
+    var currentCount = imageList.length;
+
+    for (var i = 0; i < Math.min(currentCount, targetCount); i++) {
+      imageList[i].visible(true);
+    }
+    for (var j = targetCount; j < currentCount; j++) {
+      imageList[j].visible(false);
+    }
+
+    if (currentCount >= targetCount || this._previewBuildQueue.has(preview)) {
+      this._batchDraw();
+      return;
+    }
+
+    this._previewBuildQueue.add(preview);
+
+    var self = this;
+    var nextIndex = currentCount;
+
+    function buildChunk() {
+      var added = 0;
+
+      while (nextIndex < targetCount && added < PREVIEW_CREATE_CHUNK) {
+        var imagePreview = new Konva.Image({
+          x: preview.imageData.borderSpacing + nextIndex * interImageSpacing,
+          y: preview.imageData.borderSpacing,
+          image: preview.imageData.image,
+          width: preview.imageData.width,
+          height: preview.imageData.height,
+          listening: false,
+          visible: true
+        });
+
+        preview.group.add(imagePreview);
+        nextIndex += 1;
+        added += 1;
+      }
+
+      self._batchDraw();
+
+      if (nextIndex < targetCount) {
+        self._scheduleIdle(buildChunk);
+      }
+      else {
+        self._previewBuildQueue.delete(preview);
+      }
+    }
+
+    this._scheduleIdle(buildChunk);
+  };
+
   SourceGroup.prototype._createImagePreview = function(preview, image, redraw) {
     preview.imageData = {
       image: image,
@@ -1059,27 +1094,19 @@ define([
     preview.imageData.width = preview.imageData.height * preview.imageData.dimRatio;
     preview.imageData.imageSpacing = preview.imageData.width * SPACING_BETWEEN_PREVIEWS;
 
-    var currentX = preview.imageData.borderSpacing;
+    this._addToUnwrap(preview.group);
 
-    while (currentX < this._width) {
-      var imagePreview = new Konva.Image({
-        x: currentX,
-        y: preview.imageData.borderSpacing,
-        image: image,
-        width: preview.imageData.width,
-        height: preview.imageData.height,
-        listening: false
-      });
+    var interImageSpacing = preview.imageData.width + preview.imageData.imageSpacing;
 
-      preview.group.add(imagePreview);
+    var targetCount = 0;
 
-      currentX += preview.imageData.width + preview.imageData.imageSpacing;
+    if (this._width > preview.imageData.borderSpacing) {
+      targetCount = Math.trunc((this._width - preview.imageData.borderSpacing) / interImageSpacing) + 1;
     }
-
-    this._addToUnwrap(preview.group);
+    this._ensureImagePreviewCount(preview, targetCount, interImageSpacing);
 
     if (redraw) {
-      this._group.draw();
+      this._batchDraw();
     }
 
     this._previewList.push(preview);
@@ -1652,7 +1679,7 @@ define([
       self._source.volume = Math.max(self._source.volumeRange[0], Math.min(volume, self._source.volumeRange[1]));
       self._peaks.emit('source.volumeChanged', self._source);
 
-      self._group.draw();
+  self._batchDraw();
     });
 
     volumeSliderGroup.on('dragend', function() {