@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.1

package/src/components/source-group.js

@@ -10,12 +10,14 @@ define([
   './waveform-builder',
   './waveform-shape',
   './loader',
+  './invoker',
   '../utils',
   'konva'
   ], function(
     WaveformBuilder,
     WaveformShape,
     Loader,
+    Invoker,
     Utils,
     Konva) {
   'use strict';
@@ -24,7 +26,10 @@ 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
+  var PREVIEW_CREATE_CHUNK = 12; // number of preview tiles to add per idle slice (increased for better throughput)
+
+  // Shared invoker for all source groups to coordinate updates
+  var sharedInvoker = new Invoker();
 
   /**
    * Creates a source group for the given source.
@@ -47,7 +52,6 @@ define([
 
     var self = this;
 
-    this._x = this._view.timeToPixels(source.startTime);
     this._width = this._view.timeToPixels(source.endTime - source.startTime);
     var heights = SourceGroup.getHeights(source, peaks);
 
@@ -59,16 +63,25 @@ define([
     this._selected = this._source.selected;
     this._hovered = false;
     this._isDragged = false;
+    this._isHandleDragging = 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;
+
     this._previewList = [];
-  // internal queue state for async preview creation
-  this._previewBuildQueue = new Set();
+    // internal queue state for async preview creation
+    this._previewBuildQueue = new Set();
+    // Track pending idle callbacks for cleanup
+    this._pendingIdleCallbacks = new Set();
 
     this._markersGroup = this._createMarkers();
 
     this._group = new Konva.Group({
-      x: this._x,
+      x: this._view.timeToPixels(source.startTime),
       sourceId: this._source.id,
       draggable: this._source.draggable,
       dragBoundFunc: function() {
@@ -135,15 +148,58 @@ define([
     if (!this._source.loading) {
       this._showButtons();
     }
-  this._batchDraw();
+    this._scheduleBatchDraw();
   };
 
   SourceGroup.prototype._onHoverEnd = function() {
     this._hovered = false;
     this._manualHover = false;
+    this._disableManualHoverTracking();
     this._view.setHoveredElement(null);
     this._hideButtons();
-  this._batchDraw();
+    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) {
@@ -182,7 +238,7 @@ define([
   };
 
   SourceGroup.prototype.isActive = function() {
-    return this._isDragged;
+    return this._isDragged || this._isHandleDragging;
   };
 
   SourceGroup.prototype.addToContent = function(newChild) {
@@ -202,14 +258,17 @@ define([
     this._rightHandle.x(this._width - handleWidth);
   };
 
-  SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
-    const diff = this._view.pixelsToTime(dragPos.x - this._mouseDownX);
-    const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
-
+  SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, leftHandle) {
     const { start, end } = this._initialTimes;
 
     this._view.updateWithAutoScroll(
       function() {
+        var pointer = this._view.getPointerPosition();
+        var pointerX = pointer ? pointer.x : this._mouseDownX;
+
+        const diff = this._view.pixelsToTime(pointerX - this._mouseDownX);
+        const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
+
         if (this._layer.manageSourceMovements(
           [this._source],
           leftHandle ? start + diff + timeOffsetDiff : null,
@@ -218,7 +277,7 @@ define([
           this._layer.batchDraw();
         }
       }.bind(this)
-    );
+    , null, false);
 
     return {
       x: draggedElement.absolutePosition().x,
@@ -232,9 +291,13 @@ define([
     const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
     const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
 
-    this._group.x(startPixel - frameOffset);
-
-    this._x = startPixel;
+    // When sources are being moved (dragged as blocks), their Konva positions are
+    // controlled by the drag handler so they follow the cursor.
+    // Auto-scroll triggers frequent `updateSources()` calls; avoid overwriting
+    // the drag position here to prevent jitter.
+    if (!this._isDragged) {
+      this._group.x(startPixel - frameOffset);
+    }
 
     const newWidth = endPixel - startPixel;
 
@@ -268,6 +331,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) {
@@ -307,14 +377,20 @@ define([
       start: this._source.startTime,
       end: this._source.endTime
     };
-    this._isDragged = true;
+    this._isHandleDragging = true;
 
     this._hideButtons();
   };
 
   SourceGroup.prototype._onHandleDragEnd = function() {
-    this._isDragged = false;
+    this._isHandleDragging = 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();
   };
 
   SourceGroup.prototype._addHandles = function(forceCreate) {
@@ -328,14 +404,23 @@ define([
         height: this._unwrappedHeight,
         visible: true,
         draggable: this._source.resizable,
-        dragBoundFunc: function(pos) {
-          return self._onSourceGroupHandleDrag(this, pos, true);
+        dragBoundFunc: function() {
+          return self._onSourceGroupHandleDrag(this, true);
         }
       });
 
-      this._leftHandle.on('dragstart', this._onHandleDragStart.bind(this));
+      // 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);
+      });
 
-      this._leftHandle.on('dragend', this._onHandleDragEnd.bind(this));
+      this._leftHandle.on('dragend', function(event) {
+        event.cancelBubble = true;
+        self._onHandleDragEnd(event);
+      });
 
       if (this._source.resizable) {
         this._leftHandle.on('mouseover', function() {
@@ -355,14 +440,23 @@ define([
         height: this._unwrappedHeight,
         visible: true,
         draggable: this._source.resizable,
-        dragBoundFunc: function(pos) {
-          return self._onSourceGroupHandleDrag(this, pos, false);
+        dragBoundFunc: function() {
+          return self._onSourceGroupHandleDrag(this, false);
         }
       });
 
-      this._rightHandle.on('dragstart', this._onHandleDragStart.bind(this));
+      // 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);
+      });
 
-      this._rightHandle.on('dragend', this._onHandleDragEnd.bind(this));
+      this._rightHandle.on('dragend', function(event) {
+        event.cancelBubble = true;
+        self._onHandleDragEnd(event);
+      });
 
       if (this._source.resizable) {
         this._rightHandle.on('mouseover', function() {
@@ -425,17 +519,20 @@ define([
           )
         )
       );
+
+    var actualX = this._group.x() + this._view.getFrameOffset();
     var x = Math.max(
       0,
-      this._view.getFrameOffset() - this._x - 2 * radius
+      this._view.getFrameOffset() - actualX - 2 * radius
     );
     var width = Math.min(
       this._width - x,
       this._view.getWidth() + 4 * radius - Math.max(
         0,
-        this._x - this._view.getFrameOffset()
+        actualX - this._view.getFrameOffset()
       )
     );
+
     var xWidth = x + width;
 
     if (width > 0) {
@@ -678,10 +775,6 @@ define([
     return this._width;
   };
 
-  SourceGroup.prototype.getX = function() {
-    return this._x;
-  };
-
   SourceGroup.prototype.getAbsoluteY = function() {
     return this._group.absolutePosition().y;
   };
@@ -700,12 +793,20 @@ define([
     return this._group.y(value);
   };
 
+  SourceGroup.prototype.absolutePosition = function(value) {
+    if (value) {
+      return this._group.absolutePosition(value);
+    }
+    return this._group.absolutePosition();
+  };
+
   SourceGroup.prototype.getSource = function() {
     return this._source;
   };
 
   SourceGroup.prototype.startHover = function() {
     this._manualHover = true;
+    this._enableManualHoverTracking();
     this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
   };
 
@@ -713,6 +814,18 @@ define([
     this._group.fire('mouseleave', { evt: new MouseEvent('mouseleave') }, true);
   };
 
+  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() {
     return this._group.startDrag();
   };
@@ -725,12 +838,12 @@ define([
     this._group.moveTo(group);
   };
 
-  SourceGroup.prototype.isDescendantOf = function(group) {
-    return group.isAncestorOf(this._group);
+  SourceGroup.prototype.moveToTop = function() {
+    this._group.moveToTop();
   };
 
-  SourceGroup.prototype.hideButKeepFocus = function() {
-    this._group.moveTo(this._view.getTempGroup());
+  SourceGroup.prototype.isDescendantOf = function(group) {
+    return group.isAncestorOf(this._group);
   };
 
   SourceGroup.prototype.getParent = function() {
@@ -878,19 +991,38 @@ define([
   };
 
   SourceGroup.prototype._createAudioPreview = function(preview, redraw) {
+    var url = preview.url;
+
+    // Resample the waveform data for the current zoom level if needed
+    var scaledData = this._layer.getLoadedData(url + '-scaled');
+    var currentScale = this._view.getTimeToPixelsScale();
+
+    if (scaledData && scaledData.scale !== currentScale) {
+      var originalData = this._layer.getLoadedData(url);
+
+      if (originalData) {
+        this._layer.setLoadedData(url + '-scaled', {
+          data: originalData.resample({
+            scale: originalData.sample_rate / currentScale
+          }),
+          scale: currentScale
+        });
+      }
+    }
+
     var waveform = new WaveformShape({
       layer: this._layer,
       view: this._view,
       source: this._source,
       height: preview.group.height(),
-      url: preview.url
+      url: url
     });
 
     preview.group.add(waveform);
     this._addToUnwrap(preview.group);
 
     if (redraw) {
-      this._layer.rescale(true);
+      this._scheduleBatchDraw();
     }
 
     this._previewList.push(preview);
@@ -991,6 +1123,26 @@ define([
     });
   };
 
+  /**
+   * Schedules a batch draw using RAF to coalesce multiple draw requests.
+   * This is more efficient than calling _batchDraw directly.
+   */
+  SourceGroup.prototype._scheduleBatchDraw = function() {
+    if (this._destroyed || this._drawScheduled) {
+      return;
+    }
+
+    this._drawScheduled = true;
+    var self = this;
+
+    sharedInvoker.scheduleFrame(function() {
+      self._drawScheduled = false;
+      if (!self._destroyed) {
+        self._batchDraw();
+      }
+    });
+  };
+
   SourceGroup.prototype._batchDraw = function() {
     var layer = this._group && this._group.getLayer && this._group.getLayer();
 
@@ -999,31 +1151,16 @@ define([
     }
   };
 
-  // Utility to schedule work during idle time or next frame
+  // Utility to schedule work during idle time, with tracking for cleanup
   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
-        });
-      });
-    }
+    var self = this;
+    var id = Utils.scheduleIdle(function(deadline) {
+      self._pendingIdleCallbacks.delete(id);
+      fn(deadline);
+    }, { timeout: 50 });
 
-    return setTimeout(function() {
-      fn({
-        timeRemaining: function() {
-          return 0;
-        },
-        didTimeout: true
-      });
-    }, 0);
+    this._pendingIdleCallbacks.add(id);
+    return id;
   };
 
   SourceGroup.prototype._ensureImagePreviewCount = function(preview, targetCount, interImageSpacing) {
@@ -1038,7 +1175,7 @@ define([
     }
 
     if (currentCount >= targetCount || this._previewBuildQueue.has(preview)) {
-      this._batchDraw();
+      this._scheduleBatchDraw();
       return;
     }
 
@@ -1066,7 +1203,7 @@ define([
         added += 1;
       }
 
-      self._batchDraw();
+      self._scheduleBatchDraw();
 
       if (nextIndex < targetCount) {
         self._scheduleIdle(buildChunk);
@@ -1111,7 +1248,7 @@ define([
     this._ensureImagePreviewCount(preview, targetCount, interImageSpacing);
 
     if (redraw) {
-      this._batchDraw();
+      this._scheduleBatchDraw();
     }
 
     this._previewList.push(preview);
@@ -1196,6 +1333,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,
@@ -1684,7 +1905,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._batchDraw();
+      self._scheduleBatchDraw();
     });
 
     volumeSliderGroup.on('dragend', function() {
@@ -1707,6 +1928,23 @@ 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) {
+        Utils.cancelIdle(id);
+      });
+      this._pendingIdleCallbacks.clear();
+    }
+
+    // Clear preview build queue
+    if (this._previewBuildQueue) {
+      this._previewBuildQueue.clear();
+    }
+
     if (this._buttonsAnimation) {
       this._buttonsAnimation.destroy();
       this._buttonsAnimation = null;