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

package/src/components/line-indicator.js

@@ -98,7 +98,7 @@ define([
     this.refreshIndicators();
   };
 
-  LineIndicator.prototype._createIndicator = function(lineGroup, type, text, subText) {
+  LineIndicator.prototype._createIndicator = function(lineGroup, type, text, subText, defaultStyle = {}) {
     const indicator = new Konva.Group();
     let indicatorHeight = 0;
     var self = this;
@@ -106,13 +106,13 @@ define([
     var textNode, iconNode, subTextNode;
 
     if (text) {
-      [textGroup, textNode] = this._createIndicatorText(text);
+      [textGroup, textNode] = this._createIndicatorText(text, 'line-indicator-text', defaultStyle);
 
       indicator.add(textGroup);
       indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
     }
 
-    [iconGroup, iconNode] = this._createIndicatorIcon(type);
+    [iconGroup, iconNode] = this._createIndicatorIcon(type, 'line-indicator-icon', defaultStyle);
 
     iconGroup.y(indicatorHeight);
     indicator.add(iconGroup);
@@ -121,7 +121,7 @@ define([
     if (subText) {
       indicatorHeight += this._bottomPadding;
 
-      [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+      [subTextGroup, subTextNode] = this._createIndicatorText(subText, 'line-indicator-subText', defaultStyle);
 
       subTextGroup.y(indicatorHeight);
       indicator.add(subTextGroup);
@@ -217,17 +217,19 @@ define([
     return indicator;
   };
 
-  LineIndicator.prototype._createIndicatorText = function(text) {
+  LineIndicator.prototype._createIndicatorText = function(text, role, defaultStyle = {}) {
+    defaultStyle = defaultStyle[role] || {};
     const textGroup = new Konva.Group();
 
     const textNode = new Konva.Text({
       text: text,
       fontSize: this._sizes.font,
       fontFamily: this._peaks.options.lineIndicatorFont,
-      fill: this._peaks.options.lineIndicatorTextColor,
+      fill: defaultStyle.fill || this._peaks.options.lineIndicatorTextColor,
       align: 'center',
       width: this._width,
-      listening: false
+      listening: false,
+      name: role
     });
 
     textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
@@ -251,7 +253,8 @@ define([
     return [textGroup, textNode];
   };
 
-  LineIndicator.prototype._createIndicatorIcon = function(type) {
+  LineIndicator.prototype._createIndicatorIcon = function(type, role, defaultStyle = {}) {
+    defaultStyle = defaultStyle[role] || {};
     type = this._types.includes(type) ? type : 'default';
 
     const iconGroup = new Konva.Group();
@@ -264,9 +267,10 @@ define([
         x: this._width / 2,
         y: this._sizes.icon.default / 2,
         radius: this._sizes.icon.default / 2,
-        fill: this._peaks.options.lineIndicatorIconColor,
+        fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
-        listening: false
+        listening: false,
+        name: role
       });
     }
     else {
@@ -274,12 +278,13 @@ define([
         x: (this._width - this._sizes.icon[type]) / 2,
         y: 0,
         data: SVGs[type].path,
-        fill: this._peaks.options.lineIndicatorIconColor,
+        fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
         scale: {
           x: (this._sizes.icon[type]) / SVGs[type].width,
           y: (this._sizes.icon[type]) / SVGs[type].height
         },
-        listening: false
+        listening: false,
+        name: role
       });
     }
 
@@ -335,17 +340,20 @@ define([
       return;
     }
 
-    if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText) {
+    if (indicatorData.type === line.indicatorType
+      && indicatorData.text === line.indicatorText
+      && indicatorData.subText === line.indicatorSubText) {
       return;
     }
 
-    this.removeIndicator(line.id, true);
+    const styleData = this.removeIndicator(line.id, true);
 
     var indicator = this._createIndicator(
       indicatorData.lineGroup,
       line.indicatorType,
       line.indicatorText,
-      line.indicatorSubText
+      line.indicatorSubText,
+      styleData
     );
 
     this._layer.add(indicator);
@@ -358,18 +366,51 @@ define([
     this.batchDraw();
   };
 
+  LineIndicator.prototype._getStyleData = function(konvaItem) {
+    if (!konvaItem) {
+      return {};
+    }
+
+    var styleData = {};
+    const name = konvaItem.name();
+
+    if (name) {
+      styleData[name] = {
+        fill: konvaItem.fill()
+      };
+    }
+
+    if (typeof konvaItem.getChildren === 'function') {
+      const children = konvaItem.getChildren();
+
+      if (children && children.length > 0) {
+        children.forEach(function(child) {
+          styleData = Object.assign(styleData, this._getStyleData(child));
+        }.bind(this));
+      }
+    }
+
+    return styleData;
+  };
+
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
+    var styleData = {};
+
     if (this._indicators[lineId]) {
-      if (this._indicators[lineId].indicator) {
-        this._indicators[lineId].indicator.destroy();
-      }
+      const indicator = this._indicators[lineId].indicator;
+
       if (!keepInList) {
         delete this._indicators[lineId];
       }
       else {
         this._indicators[lineId].indicator = null;
+        styleData = this._getStyleData(indicator);
+      }
+      if (indicator) {
+        indicator.destroy();
       }
     }
+    return styleData;
   };
 
   LineIndicator.prototype.refreshIndicator = function(lineId) {

package/src/components/mode-layer.js

@@ -355,6 +355,15 @@ define([
   ModeLayer.prototype._onMouseMoveInCutMode = function() {
     var mousePosition = this._stage.getPointerPosition();
 
+    if (!mousePosition) {
+      return;
+    }
+
+    // In cut mode, cutting can replace Konva nodes under the pointer.
+    // Konva doesn't always emit enter/leave reliably across those updates,
+    // so keep the hovered element in sync as the mouse moves.
+    this._syncHoveredElementFromPointer();
+
     mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
 
     var cuttingPosition = mousePosition;
@@ -458,8 +467,13 @@ define([
       if (node.attrs && node.attrs.sourceId) {
         var sourceGroup = this._view.getSourceGroupById(node.attrs.sourceId);
 
-        if (sourceGroup && !sourceGroup.isHovered()) {
-          sourceGroup.startHover();
+        if (sourceGroup) {
+          // Ensure the view state matches what is actually under the pointer.
+          this._view.setHoveredElement(sourceGroup);
+
+          if (!sourceGroup.isHovered()) {
+            sourceGroup.startHover();
+          }
         }
 
         return;
@@ -467,6 +481,9 @@ define([
 
       node = node.getParent ? node.getParent() : null;
     }
+
+    // Pointer isn't over a source; clear any stale hovered element.
+    this._view.setHoveredElement(null);
   };
 
   ModeLayer.prototype.setMode = function(mode) {

package/src/components/source-group.js

@@ -63,7 +63,7 @@ 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.
@@ -238,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) {
@@ -250,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);
@@ -309,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
@@ -324,6 +326,7 @@ define([
         }
       }
 
+      this._updateHandles();
       this._updateVolumeSlider();
       this._updateButtons();
       this._updateLoadingOverlay();
@@ -377,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) {
@@ -409,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);
@@ -445,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);
@@ -520,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()
       )
     );
 
@@ -559,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 {
@@ -1010,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);
@@ -1028,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';
@@ -1892,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) + '%');
@@ -1908,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);
     });

package/src/components/sources-layer.js

@@ -155,22 +155,22 @@ define([
     const frameEndTime   = this._view.pixelsToTime(frameOffset + width);
     var redraw = false;
     var isSourceGroupHovered = false;
-    var isSourceGroupActive = false;
+    var isSourceGroupDragged = false;
 
     if (sourceGroup) {
       isSourceGroupHovered = sourceGroup.isHovered();
-      isSourceGroupActive = sourceGroup.isActive();
+      isSourceGroupDragged = sourceGroup.isDragged();
       this._destroySourceGroup(source);
       redraw = true;
     }
 
-    if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupActive) {
+    if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupDragged) {
       const newSourceGroup = this._addSourceGroup(source);
 
       if (isSourceGroupHovered) {
         newSourceGroup.startHover();
       }
-      if (isSourceGroupActive) {
+      if (isSourceGroupDragged) {
         newSourceGroup.startDrag();
       }
       redraw = true;
@@ -429,7 +429,6 @@ define([
         if (sourceGroup) {
           // Clear dragging state before moving back to line group
           sourceGroup.setDragging(false);
-          sourceGroup.prepareDragEnd();
           // Move source back to its line group (it was moved to layer during drag)
           self._lineGroups.addSource(source, sourceGroup);
           // Reset Y position to 0 relative to parent line group
@@ -444,10 +443,7 @@ define([
     this._draggedElementId = null;
 
     this.refresh();
-    this._view.batchDrawSourcesLayer();
-    this._view.updateTimelineLength();
-
-    this._peaks.emit('sources.updated', updatedSources);
+    this.processSourceUpdates(updatedSources);
   };
 
   SourcesLayer.prototype.onSourcesGroupDrag = function(draggedElement) {
@@ -558,6 +554,13 @@ define([
     }
   };
 
+  SourcesLayer.prototype.processSourceUpdates = function(updatedSources) {
+    this._view.batchDrawSourcesLayer();
+    this._view.updateTimelineLength();
+
+    this._peaks.emit('sources.updated', updatedSources);
+  };
+
   SourcesLayer.prototype.findSources = function(startTime, endTime) {
     var sources = this._peaks.sourceHandler.find(startTime, endTime);
     var lineIds = this._lineGroups.getVisibleLines();
@@ -660,7 +663,7 @@ define([
     this.refresh();
   };
 
-  // TODO: This assumes that no sources between the start and the end are unselected
+  // WARNING: This assumes that no sources between the start and the end are unselected
   SourcesLayer.prototype.manageSourceMovements = function(sources, newStartTime, newEndTime, orderable, mouseX,
     mouseY
   ) {
@@ -756,7 +759,10 @@ define([
       if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
         var sourceGroup = this._sourcesGroup[sourceId];
 
-        if (!sourceGroup.isActive()) {
+        if (sourceGroup.isActive()) {
+          sourceGroup.update();
+        }
+        else {
           var source = this._sourcesGroup[sourceId].getSource();
 
           if (!this._isSourceVisible(source, startTime, endTime)) {