@checksub_team/peaks_timeline 2.3.0-alpha.0 → 2.3.0-alpha.2

package/src/components/source-group.js

@@ -63,9 +63,12 @@ define([
     this._selected = this._source.selected;
     this._hovered = false;
     this._isDragged = false;
-    this._isHandleDragging = false;
+    this._isHandleDragged = false;
     this._destroyed = false;
 
+    // Optional Konva element used as a drag "ghost" preview.
+    this._dragGhost = null;
+
     // Performance: track if draw is needed
     this._drawScheduled = false;
 
@@ -151,11 +154,54 @@ define([
   SourceGroup.prototype._onHoverEnd = function() {
     this._hovered = false;
     this._manualHover = false;
+    this._disableManualHoverTracking();
     this._view.setHoveredElement(null);
     this._hideButtons();
     this._scheduleBatchDraw();
   };
 
+  SourceGroup.prototype._enableManualHoverTracking = function() {
+    if (this._manualHoverTrackingEnabled) {
+      return;
+    }
+
+    if (!this._group || this._destroyed) {
+      return;
+    }
+
+    var stage = this._group.getStage && this._group.getStage();
+
+    if (!stage) {
+      return;
+    }
+
+    this._manualHoverTrackingEnabled = true;
+    this._manualHoverNamespace = '.manualHover.' + this._source.id;
+
+    this._manualHoverMoveHandler = function() {
+      this._manageManualHoverStop();
+    }.bind(this);
+
+    stage.on('mousemove' + this._manualHoverNamespace, this._manualHoverMoveHandler);
+    stage.on('touchmove' + this._manualHoverNamespace, this._manualHoverMoveHandler);
+  };
+
+  SourceGroup.prototype._disableManualHoverTracking = function() {
+    if (!this._manualHoverTrackingEnabled) {
+      return;
+    }
+
+    var stage = this._group && this._group.getStage && this._group.getStage();
+
+    if (stage && this._manualHoverNamespace) {
+      stage.off(this._manualHoverNamespace);
+    }
+
+    this._manualHoverTrackingEnabled = false;
+    this._manualHoverMoveHandler = null;
+    this._manualHoverNamespace = null;
+  };
+
   SourceGroup.prototype._onDragStart = function(element) {
     this._isDragged = true;
     this._layer.onSourcesGroupDragStart(element);
@@ -192,7 +238,11 @@ define([
   };
 
   SourceGroup.prototype.isActive = function() {
-    return this._isDragged || this._isHandleDragging;
+    return this._isDragged || this._isHandleDragged;
+  };
+
+  SourceGroup.prototype.isDragged = function() {
+    return this._isDragged;
   };
 
   SourceGroup.prototype.addToContent = function(newChild) {
@@ -204,7 +254,7 @@ define([
     }
   };
 
-  SourceGroup.prototype.prepareDragEnd = function() {
+  SourceGroup.prototype._updateHandles = function() {
     var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
 
     this._leftHandle.width(handleWidth);
@@ -231,7 +281,7 @@ define([
           this._layer.batchDraw();
         }
       }.bind(this)
-    );
+    , null, false);
 
     return {
       x: draggedElement.absolutePosition().x,
@@ -263,8 +313,6 @@ define([
         this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
 
         this._updateMarkers();
-
-        this._rightHandle.x(this._width - this._rightHandle.width());
       }
       else {
         // the zoom was not changed, but the source was resized
@@ -278,6 +326,7 @@ define([
         }
       }
 
+      this._updateHandles();
       this._updateVolumeSlider();
       this._updateButtons();
       this._updateLoadingOverlay();
@@ -285,6 +334,13 @@ define([
       // update unwrap
       this.updatePreviews();
     }
+
+    // Keep the drag ghost in sync automatically while dragging.
+    // This lets SourcesLayer avoid manually updating ghosts.
+    if (this._isDragged) {
+      this.createDragGhost();
+      this.updateDragGhost();
+    }
   };
 
   SourceGroup.prototype.setWrapping = function(wrap, forceCreate, notify) {
@@ -324,20 +380,14 @@ define([
       start: this._source.startTime,
       end: this._source.endTime
     };
-    this._isHandleDragging = true;
-
+    this._isHandleDragged = true;
     this._hideButtons();
   };
 
   SourceGroup.prototype._onHandleDragEnd = function() {
-    this._isHandleDragging = false;
+    this._isHandleDragged = false;
     this._showButtons();
-
-    // When resizing via handles, drag events no longer bubble to the parent
-    // group, so we won't hit the move-drag end path that calls prepareDragEnd.
-    // Normalize handle geometry here so handles snap to the updated width.
-    this.update();
-    this.prepareDragEnd();
+    this._layer.processSourceUpdates([this._source]);
   };
 
   SourceGroup.prototype._addHandles = function(forceCreate) {
@@ -356,9 +406,6 @@ define([
         }
       });
 
-      // Prevent handle drag events from bubbling to the parent group.
-      // Otherwise the parent SourceGroup dragstart/dragend handlers run and
-      // the sources-layer creates move-drag ghosts during resize.
       this._leftHandle.on('dragstart', function(event) {
         event.cancelBubble = true;
         self._onHandleDragStart(event);
@@ -392,9 +439,6 @@ define([
         }
       });
 
-      // Prevent handle drag events from bubbling to the parent group.
-      // Otherwise the parent SourceGroup dragstart/dragend handlers run and
-      // the sources-layer creates move-drag ghosts during resize.
       this._rightHandle.on('dragstart', function(event) {
         event.cancelBubble = true;
         self._onHandleDragStart(event);
@@ -467,16 +511,15 @@ define([
         )
       );
 
-    var actualX = this._group.x() + this._view.getFrameOffset();
     var x = Math.max(
       0,
-      this._view.getFrameOffset() - actualX - 2 * radius
+      -(this._group.x() + 2 * radius)
     );
     var width = Math.min(
       this._width - x,
       this._view.getWidth() + 4 * radius - Math.max(
         0,
-        actualX - this._view.getFrameOffset()
+        this._group.x()
       )
     );
 
@@ -506,7 +549,7 @@ define([
         if (this._selected) {
           backgroundColor = this._source.selectedBackgroundColor;
         }
-        else if (this._hovered) {
+        else if (this._hovered && this._view.getCurrentMode() !== 'cut') {
           backgroundColor = this._source.hoverBackgroundColor;
         }
         else {
@@ -753,6 +796,7 @@ define([
 
   SourceGroup.prototype.startHover = function() {
     this._manualHover = true;
+    this._enableManualHoverTracking();
     this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
   };
 
@@ -762,6 +806,14 @@ define([
 
   SourceGroup.prototype.setDragging = function(isDragging) {
     this._isDragged = isDragging;
+
+    // Ghost lifecycle is tied to dragging state.
+    if (isDragging) {
+      this.createDragGhost();
+    }
+    else {
+      this.destroyDragGhost();
+    }
   };
 
   SourceGroup.prototype.startDrag = function() {
@@ -948,12 +1000,15 @@ define([
       }
     }
 
+    var self = this;
+
     var waveform = new WaveformShape({
-      layer: this._layer,
       view: this._view,
-      source: this._source,
+      color: this._source.color,
       height: preview.group.height(),
-      url: url
+      waveformDataFunc: function() {
+        return self._createWaveformPointsIterator(url);
+      }
     });
 
     preview.group.add(waveform);
@@ -966,6 +1021,101 @@ define([
     this._previewList.push(preview);
   };
 
+  SourceGroup.prototype._createWaveformPointsIterator = function(url) {
+    var loaded = this._layer.getLoadedData(url + '-scaled');
+    var waveformData = loaded && loaded.data;
+
+    if (!waveformData) {
+      return {
+        next: function() {
+          return { done: true };
+        }
+      };
+    }
+
+    var view = this._view;
+    var source = this._source;
+
+    var groupX = this._group && typeof this._group.x === 'function' ? this._group.x() : 0;
+    var groupWidth = this._width;
+    var viewWidth = view.getWidth();
+
+    var startPixel = 0;
+    var startOffset = 0;
+    var endPixel = Math.min(viewWidth, waveformData.length);
+    var targetSpeed = 1.0;
+
+    if (source) {
+      targetSpeed = source.targetSpeed || 1.0;
+
+      // Determine which part of the source is visible in the view based on
+      // its current on-canvas geometry (supports dragging without relying on
+      // startTime/endTime).
+      var hiddenLeftPixels = Math.max(-groupX, 0);
+      var hiddenRightPixels = Math.max(groupX + groupWidth - viewWidth, 0);
+
+      startPixel = Math.floor(
+        (view.timeToPixels(source.mediaStartTime) + hiddenLeftPixels) * targetSpeed
+      );
+
+      startOffset = view.timeToPixels(source.mediaStartTime);
+
+      endPixel = Math.min(
+        Math.ceil(
+          (view.timeToPixels(source.mediaEndTime) - hiddenRightPixels) * targetSpeed
+        ),
+        waveformData.length
+      );
+    }
+
+    if (startPixel < 0) {
+      startPixel = 0;
+    }
+
+    if (endPixel < startPixel) {
+      endPixel = startPixel;
+    }
+
+    var channels = waveformData.channels;
+
+    var channelData = new Array(channels);
+
+    for (var c = 0; c < channels; c++) {
+      channelData[c] = waveformData.channel(c);
+    }
+
+    var x = startPixel;
+
+    return {
+      next: function() {
+        if (x >= endPixel) {
+          return { done: true };
+        }
+
+        var min = new Array(channels);
+        var max = new Array(channels);
+
+        for (var i = 0; i < channels; i++) {
+          min[i] = channelData[i].min_sample(x);
+          max[i] = channelData[i].max_sample(x);
+        }
+
+        var value = {
+          x: x / targetSpeed - startOffset + 0.5,
+          min: min,
+          max: max
+        };
+
+        x++;
+
+        return {
+          done: false,
+          value: value
+        };
+      }
+    };
+  };
+
   SourceGroup.prototype.getAudioPreview = function() {
     return this._previewList.filter(function(preview) {
       return preview.type === 'audio';
@@ -1271,6 +1421,90 @@ define([
     return this._height;
   };
 
+  /**
+   * Creates the drag ghost preview element if it does not exist.
+   * The ghost shows where the source will be placed when released.
+   */
+  SourceGroup.prototype.createDragGhost = function() {
+    if (this._dragGhost) {
+      return this._dragGhost;
+    }
+
+    var frameOffset = this._view.getFrameOffset();
+    var x = this._view.timeToPixels(this._source.startTime) - frameOffset;
+    var width = this._view.timeToPixels(this._source.endTime - this._source.startTime);
+    var height = this.getCurrentHeight();
+    var y = this.getAbsoluteY();
+
+    this._dragGhost = new Konva.Rect({
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      fill: this._source.backgroundColor,
+      opacity: 0.4,
+      stroke: this._source.selectedBorderColor,
+      strokeWidth: 2,
+      dash: [8, 4],
+      cornerRadius: 8,
+      listening: false
+    });
+
+    // Add to the main sources layer (not the group) so it stays behind sources.
+    this._layer.add(this._dragGhost);
+    this._dragGhost.moveToBottom();
+
+    // Ensure initial Y snaps to the current line position.
+    this.updateDragGhost();
+
+    return this._dragGhost;
+  };
+
+  /**
+   * Updates the drag ghost preview position and size.
+   *
+   * @param {Object} lineGroupsById Map of lineId -> Konva.Group
+   */
+  SourceGroup.prototype.updateDragGhost = function(lineGroupsById) {
+    if (!this._dragGhost) {
+      return;
+    }
+
+    // Allow callers to omit the lookup; resolve via the owning layer.
+    if (!lineGroupsById
+      && this._layer
+      && typeof this._layer.getLineGroups === 'function') {
+      var lineGroups = this._layer.getLineGroups();
+
+      if (lineGroups && typeof lineGroups.getLineGroupsById === 'function') {
+        lineGroupsById = lineGroups.getLineGroupsById();
+      }
+    }
+
+    var frameOffset = this._view.getFrameOffset();
+    var x = this._view.timeToPixels(this._source.startTime) - frameOffset;
+    var width = this._view.timeToPixels(this._source.endTime - this._source.startTime);
+
+    this._dragGhost.x(x);
+    this._dragGhost.width(width);
+    this._dragGhost.height(this.getCurrentHeight());
+
+    if (lineGroupsById) {
+      var lineGroup = lineGroupsById[this._source.lineId];
+
+      if (lineGroup) {
+        this._dragGhost.y(lineGroup.y());
+      }
+    }
+  };
+
+  SourceGroup.prototype.destroyDragGhost = function() {
+    if (this._dragGhost) {
+      this._dragGhost.destroy();
+      this._dragGhost = null;
+    }
+  };
+
   SourceGroup.prototype.getHeights = function() {
     return {
       unwrapped: this._unwrappedHeight,
@@ -1746,12 +1980,14 @@ define([
     volumeSliderGroup.add(volumeSliderRect);
     volumeSliderGroup.add(volumeSliderLine);
 
-    volumeSliderGroup.on('dragstart', function() {
+    volumeSliderGroup.on('dragstart', function(evt) {
+      evt.cancelBubble = true;
       volumeText.visible(true);
       self._peaks.emit('source.startVolumeChange', self._source);
     });
 
-    volumeSliderGroup.on('dragmove', function() {
+    volumeSliderGroup.on('dragmove', function(evt) {
+      evt.cancelBubble = true;
       var volume = self._getVolumeFromY(volumeSliderGroup.y());
 
       volumeText.text((volume * 100).toFixed(0) + '%');
@@ -1762,7 +1998,8 @@ define([
       self._scheduleBatchDraw();
     });
 
-    volumeSliderGroup.on('dragend', function() {
+    volumeSliderGroup.on('dragend', function(evt) {
+      evt.cancelBubble = true;
       volumeText.visible(false);
       self._peaks.emit('source.endVolumeChange', self._source);
     });
@@ -1782,6 +2019,10 @@ define([
   };
 
   SourceGroup.prototype.destroy = function() {
+    this.destroyDragGhost();
+
+    this._disableManualHoverTracking();
+
     // Cancel any pending idle callbacks to prevent memory leaks
     if (this._pendingIdleCallbacks) {
       this._pendingIdleCallbacks.forEach(function(id) {