@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.0

package/src/components/sources-layer.js

@@ -39,16 +39,28 @@ define([
     this._allowEditing  = allowEditing;
     this._sourcesGroup  = {};
     this._layer         = new Konva.Layer();
+    // Separate layer for dragged elements - always renders on top of sources layer
+    this._dragLayer     = new Konva.Layer();
     this._dataRetriever = new DataRetriever(peaks);
     this._lineGroups    = new LineGroups(peaks, view, this);
     this._lineGroups.addToLayer(this);
 
     this._loadedData = {};
 
-    this._debouncedRescale = new Invoker().debounce(
-      this._rescale, 150
+    // Create invoker for performance optimizations
+    this._invoker = new Invoker();
+
+    // Version counter for cancellable rescale operations
+    this._rescaleVersion = 0;
+
+    // Throttled batch draw to prevent excessive redraws
+    this._throttledBatchDraw = this._invoker.throttleTrailing(
+      this._layer.batchDraw.bind(this._layer)
     );
 
+    // Pending draw flag to coalesce multiple draw requests
+    this._drawPending = false;
+
     this._peaks.on('handler.sources.add', this._onSourcesAdd.bind(this));
     this._peaks.on('handler.sources.destroy', this._onSourcesDestroy.bind(this));
     this._peaks.on('handler.sources.show', this._onSourcesShow.bind(this));
@@ -59,8 +71,16 @@ define([
     this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
     this._peaks.on('model.source.setIndicators', this.setIndicators.bind(this));
     this._peaks.on('handler.view.mouseup', this._stopDrag.bind(this));
+    this._peaks.on('sources.delayedLineChange', this._onSourcesDelayedLineChanged.bind(this));
   }
 
+  SourcesLayer.prototype._onSourcesDelayedLineChanged = function() {
+    // Update dragged source groups when sources change line after a delay (e.g., after automatic line creation)
+    if (this._dragGhosts && this._draggedElements && this._draggedElements.length > 0) {
+      this._dragSourcesGroup();
+    }
+  };
+
   SourcesLayer.prototype._stopDrag = function() {
     const draggedSourceGroup = this._sourcesGroup[this._draggedElementId];
 
@@ -97,6 +117,7 @@ define([
 
   SourcesLayer.prototype.addToStage = function(stage) {
     stage.add(this._layer);
+    stage.add(this._dragLayer);
   };
 
   SourcesLayer.prototype.enableEditing = function(enable) {
@@ -190,7 +211,7 @@ define([
 
     this._view.updateTimelineLength();
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesShow = function(sources) {
@@ -200,7 +221,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(false, true);
     });
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesHide = function(sources) {
@@ -210,7 +231,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(true, true);
     });
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onDataRetrieved = function(data, source, url) {
@@ -243,7 +264,7 @@ define([
   SourcesLayer.prototype._onSegmentsShow = function(segmentsGroupId, lineId) {
     this._lineGroups.addSegments(segmentsGroupId, lineId);
     this._view.updateTimelineLength();
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   /**
@@ -285,12 +306,13 @@ define([
 
     if (sourceGroup) {
       sourceGroup.createIndicators();
-      this._layer.batchDraw();
+      this.batchDraw();
     }
   };
 
   /**
    * Updates the positions of all displayed sources in the view.
+   * Uses optimized batching to reduce draw calls.
    *
    * @param {Number} startTime The start of the visible range in the view,
    *   in seconds.
@@ -307,12 +329,16 @@ define([
 
     var count = sources.length;
 
-    sources.forEach(this._updateSource.bind(this));
+    // Batch update all sources
+    for (var i = 0; i < sources.length; i++) {
+      this._updateSource(sources[i]);
+    }
 
     count += this._removeInvisibleSources(startTime, endTime);
 
     if (count > 0) {
-      this._layer.batchDraw();
+      // Use throttled batch draw for consistent performance
+      this.batchDraw();
     }
   };
 
@@ -348,23 +374,85 @@ define([
       orderable: true,
       draggable: true
     });
+
+    // Store initial source positions and create ghost previews
+    var self = this;
+
+    this._dragGhosts = [];
+    this._initialSourcePositions = {};
+
+    this._draggedElements.forEach(function(source) {
+      // Store initial position for ALL dragged sources (even those outside view)
+      // This is needed for time calculations during drag
+      self._initialSourcePositions[source.id] = {
+        startTime: source.startTime,
+        endTime: source.endTime,
+        lineId: source.lineId
+      };
+
+      var sourceGroup = self._sourcesGroup[source.id];
+
+      if (sourceGroup) {
+        // Mark as dragging (for all sources, not just the clicked one)
+        sourceGroup.setDragging(true);
+
+        // Get absolute Y position before moving (relative to line group)
+        var absoluteY = sourceGroup.getAbsoluteY();
+
+        // Move source to the drag layer so it draws above ALL other sources/segments
+        sourceGroup.moveTo(self._dragLayer);
+        // Restore the Y position (now relative to drag layer, which is at y=0)
+        sourceGroup.y(absoluteY);
+
+        // Create ghost preview
+        var ghost = self._createDragGhost(sourceGroup);
+
+        self._dragGhosts.push({
+          ghost: ghost,
+          sourceId: source.id
+        });
+      }
+    });
   };
 
   SourcesLayer.prototype.onSourcesGroupDragEnd = function() {
+    // Clean up ghost previews
+    if (this._dragGhosts) {
+      this._dragGhosts.forEach(function(item) {
+        if (item.ghost) {
+          item.ghost.destroy();
+        }
+      });
+      this._dragGhosts = null;
+    }
+    this._initialSourcePositions = null;
+    this._dragOffsetX = undefined;
+    this._dragOffsetY = undefined;
+
+    var self = this;
+
     const updatedSources = this._draggedElements.map(
       function(source) {
-        const sourceGroup = this._sourcesGroup[source.id];
+        const sourceGroup = self._sourcesGroup[source.id];
 
         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
+          // (source followed cursor during drag, now snap to line position)
+          sourceGroup.y(0);
         }
 
         return source;
-      }.bind(this)
+      }
     );
 
     this._draggedElementId = null;
 
+    this.refresh();
     this._view.batchDrawSourcesLayer();
     this._view.updateTimelineLength();
 
@@ -372,8 +460,72 @@ define([
   };
 
   SourcesLayer.prototype.onSourcesGroupDrag = function(draggedElement) {
+    var pointerPos = this._view.getPointerPosition();
+
     this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
 
+    // Return position that follows the mouse cursor exactly
+    // The ghost preview shows where it will actually be placed
+    var clickedSourceGroup = this._sourcesGroup[this._draggedElementId];
+
+    if (clickedSourceGroup) {
+      var mouseX = pointerPos.x;
+      var mouseY = pointerPos.y;
+      var offsetX = this._dragOffsetX || 0;
+      var offsetY = this._dragOffsetY || 0;
+
+      // Calculate offset on first drag if not set
+      if (this._dragOffsetX === undefined) {
+        var currentPos = draggedElement.absolutePosition();
+
+        this._dragOffsetX = currentPos.x - mouseX;
+        this._dragOffsetY = currentPos.y - mouseY;
+        offsetX = this._dragOffsetX;
+        offsetY = this._dragOffsetY;
+      }
+
+      var clickedSourceX = mouseX + offsetX;
+      var clickedSourceY = mouseY + offsetY;
+
+      // Position all other dragged sources relative to the clicked source
+      // They should maintain their initial relative positions
+      if (this._draggedElements && this._draggedElements.length > 1 && this._initialSourcePositions) {
+        var self = this;
+        var clickedInitialPos = this._initialSourcePositions[this._draggedElementId];
+
+        if (clickedInitialPos) {
+          var clickedInitialPixelX = this._view.timeToPixels(clickedInitialPos.startTime);
+
+          this._draggedElements.forEach(function(source) {
+            if (source.id !== self._draggedElementId) {
+              var sourceGroup = self._sourcesGroup[source.id];
+
+              if (sourceGroup) {
+                var initialPos = self._initialSourcePositions[source.id];
+
+                if (initialPos) {
+                  // Calculate pixel offset from clicked source's initial position
+                  var initialPixelX = self._view.timeToPixels(initialPos.startTime);
+                  var pixelOffset = initialPixelX - clickedInitialPixelX;
+
+                  // Position this source relative to clicked source's current position
+                  sourceGroup.absolutePosition({
+                    x: clickedSourceX + pixelOffset,
+                    y: clickedSourceY
+                  });
+                }
+              }
+            }
+          });
+        }
+      }
+
+      return {
+        x: clickedSourceX,
+        y: clickedSourceY
+      };
+    }
+
     return {
       x: draggedElement.absolutePosition().x,
       y: draggedElement.absolutePosition().y
@@ -399,17 +551,23 @@ define([
       return;
     }
 
+    var newStartTime = Utils.roundTime(initialStartTime + timeOffsetDiff + timeDiff);
+    var newEndTime = Utils.roundTime(initialEndTime + timeOffsetDiff + timeDiff);
+
     const shouldRedraw = this.manageSourceMovements(
       this._draggedElements,
-      initialStartTime + timeOffsetDiff + timeDiff,
-      initialEndTime + timeOffsetDiff + timeDiff,
+      newStartTime,
+      newEndTime,
       orderable,
       mousePosX,
       mousePosY
     );
 
+    this._updateDragGhosts();
+
     if (shouldRedraw) {
       this.batchDraw();
+      this._dragLayer.batchDraw();
     }
   };
 
@@ -424,8 +582,112 @@ define([
     );
   };
 
-  SourcesLayer.prototype._applyTimeChangesToSources = function(sources, initialStartTime, newStartTime,
-    newEndTime
+  /**
+   * Creates a ghost preview element for a source being dragged.
+   * The ghost shows where the source will be placed when released.
+   *
+   * @private
+   * @param {SourceGroup} sourceGroup The source group to create a ghost for
+   * @returns {Konva.Rect} The ghost preview element
+   */
+  SourcesLayer.prototype._createDragGhost = function(sourceGroup) {
+    var source = sourceGroup.getSource();
+    var frameOffset = this._view.getFrameOffset();
+    var x = this._view.timeToPixels(source.startTime) - frameOffset;
+    var width = this._view.timeToPixels(source.endTime - source.startTime);
+    var height = sourceGroup.getCurrentHeight();
+    var y = sourceGroup.getAbsoluteY();
+
+    var ghost = new Konva.Rect({
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      fill: source.backgroundColor,
+      opacity: 0.4,
+      stroke: source.selectedBorderColor,
+      strokeWidth: 2,
+      dash: [8, 4],
+      cornerRadius: 8,
+      listening: false
+    });
+
+    this._layer.add(ghost);
+    ghost.moveToBottom();
+
+    return ghost;
+  };
+
+  /**
+   * Updates the positions of all drag ghost previews.
+   *
+   * @private
+   */
+  SourcesLayer.prototype._updateDragGhosts = function() {
+    if (!this._dragGhosts) {
+      return;
+    }
+
+    var self = this;
+    var frameOffset = this._view.getFrameOffset();
+    var lineGroupsById = this._lineGroups.getLineGroupsById();
+
+    this._dragGhosts.forEach(function(item) {
+      var sourceGroup = self._sourcesGroup[item.sourceId];
+
+      if (!sourceGroup || !item.ghost) {
+        return;
+      }
+
+      // Use current source times (updated during drag)
+      var sourceData = sourceGroup.getSource();
+      var x = self._view.timeToPixels(sourceData.startTime) - frameOffset;
+
+      item.ghost.x(x);
+
+      // Update Y position based on line
+      var lineGroup = lineGroupsById[sourceData.lineId];
+
+      if (lineGroup) {
+        item.ghost.y(lineGroup.y());
+      }
+    });
+  };
+
+  /**
+   * Updates source times during drag using initial positions.
+   *
+   * @private
+   * @param {Number} newStartTime The new start time for the first source
+   */
+  SourcesLayer.prototype._updateSourceTimesDuringDrag = function(newStartTime) {
+    if (!this._initialSourcePositions || !this._draggedElements) {
+      return;
+    }
+
+    var self = this;
+    var firstSourceInitial = this._initialSourcePositions[this._draggedElements[0].id];
+
+    if (!firstSourceInitial) {
+      return;
+    }
+
+    // Calculate time diff from INITIAL position, not current position
+    var timeDiff = Utils.roundTime(newStartTime - firstSourceInitial.startTime);
+
+    this._draggedElements.forEach(function(source) {
+      var initialPos = self._initialSourcePositions[source.id];
+
+      if (initialPos) {
+        source.updateTimes(
+          Utils.roundTime(initialPos.startTime + timeDiff),
+          Utils.roundTime(initialPos.endTime + timeDiff)
+        );
+      }
+    });
+  };
+
+  SourcesLayer.prototype._applyTimeChangesToSources = function(sources, initialStartTime, newStartTime, newEndTime
   ) {
     if (sources.length === 1) {
       sources[0].updateTimes(
@@ -434,18 +696,49 @@ define([
       );
     }
     else {
-      // We cannot have more than 1 source being resized at a time
-      // Reaching this point implies that that we are only dragging, not resizing
-      // So, we can safely assume that the difference between the initial times and the new times is the same
-      const timeDiff = Utils.roundTime(newStartTime - initialStartTime);
-
-      if (timeDiff !== 0) {
-        sources.forEach(function(source) {
-          source.updateTimes(
-            Utils.roundTime(source.startTime + timeDiff),
-            Utils.roundTime(source.endTime + timeDiff)
-          );
-        });
+      // When moving multiple sources via block-drag, compute time diff from the
+      // drag-start positions to avoid cumulative drift as times are updated.
+      var canUseInitialPositions = Boolean(this._initialSourcePositions
+        && this._initialSourcePositions[sources[0].id]);
+
+      if (canUseInitialPositions) {
+        for (var i = 0; i < sources.length; i++) {
+          if (!this._initialSourcePositions[sources[i].id]) {
+            canUseInitialPositions = false;
+            break;
+          }
+        }
+      }
+
+      if (canUseInitialPositions) {
+        var firstInitial = this._initialSourcePositions[sources[0].id];
+        var timeDiffFromInitial = Utils.roundTime(newStartTime - firstInitial.startTime);
+
+        if (timeDiffFromInitial !== 0) {
+          var self = this;
+
+          sources.forEach(function(source) {
+            var initialPos = self._initialSourcePositions[source.id];
+
+            source.updateTimes(
+              Utils.roundTime(initialPos.startTime + timeDiffFromInitial),
+              Utils.roundTime(initialPos.endTime + timeDiffFromInitial)
+            );
+          });
+        }
+      }
+      else {
+        // Fallback for non-drag multi-updates.
+        const timeDiff = Utils.roundTime(newStartTime - initialStartTime);
+
+        if (timeDiff !== 0) {
+          sources.forEach(function(source) {
+            source.updateTimes(
+              Utils.roundTime(source.startTime + timeDiff),
+              Utils.roundTime(source.endTime + timeDiff)
+            );
+          });
+        }
       }
     }
 
@@ -501,9 +794,39 @@ define([
 
   SourcesLayer.prototype._findOrAddSourceGroup = function(source) {
     var sourceGroup = this._sourcesGroup[source.id];
+    var isNewlyCreated = false;
 
     if (!sourceGroup) {
       sourceGroup = this._addSourceGroup(source);
+      isNewlyCreated = true;
+    }
+
+    // If this source is being dragged and was just recreated (came back into view),
+    // set it up properly for dragging
+    if (isNewlyCreated && this._draggedElements && this._initialSourcePositions) {
+      var isDraggedSource = this._draggedElements.some(function(s) {
+        return s.id === source.id;
+      });
+
+      if (isDraggedSource) {
+        // Mark as dragging
+        sourceGroup.setDragging(true);
+
+        // Get Y position from line group before moving
+        var absoluteY = sourceGroup.getAbsoluteY();
+
+        // Move to drag layer
+        sourceGroup.moveTo(this._dragLayer);
+        sourceGroup.y(absoluteY);
+
+        // Create ghost preview for this source
+        var ghost = this._createDragGhost(sourceGroup);
+
+        this._dragGhosts.push({
+          ghost: ghost,
+          sourceId: source.id
+        });
+      }
     }
 
     return sourceGroup;
@@ -625,8 +948,12 @@ define([
     this._layer.setVisible(visible);
   };
 
+  /**
+   * Schedules a batch draw using RAF throttling for better performance.
+   * Multiple calls within the same frame are coalesced into one draw.
+   */
   SourcesLayer.prototype.batchDraw = function() {
-    this._layer.batchDraw();
+    this._throttledBatchDraw();
   };
 
   SourcesLayer.prototype.listening = function(bool) {
@@ -654,21 +981,36 @@ define([
     return endsLater || startsEarlier;
   };
 
-  SourcesLayer.prototype.rescale = function(debounce) {
-    if (debounce) {
-      this._debouncedRescale();
-    }
-    else {
-      this._rescale();
-    }
+  SourcesLayer.prototype.rescale = function() {
+    // Increment the rescale version to cancel any in-progress rescale
+    this._rescaleVersion = (this._rescaleVersion || 0) + 1;
+    this._rescale(this._rescaleVersion);
   };
 
-  SourcesLayer.prototype._rescale = function() {
-    var id, audioPreviews, urls = [], self = this;
+  SourcesLayer.prototype._rescale = function(version) {
+    var self = this;
+    var ids = Object.keys(this._sourcesGroup);
+    var urls = [];
+    var index = 0;
+
+    function processNext() {
+      // Check if this rescale was cancelled (a newer one started)
+      if (self._rescaleVersion !== version) {
+        return;
+      }
+
+      if (index >= ids.length) {
+        // Done processing all sources
+        self.batchDraw();
+        return;
+      }
+
+      var id = ids[index];
+      var sourceGroup = self._sourcesGroup[id];
 
-    for (id in this._sourcesGroup) {
-      if (Utils.objectHasProperty(this._sourcesGroup, id)) {
-        audioPreviews = this._sourcesGroup[id].getAudioPreview();
+      // Skip if source group was removed during async processing
+      if (sourceGroup) {
+        var audioPreviews = sourceGroup.getAudioPreview();
 
         audioPreviews.forEach(function(audioPreview) {
           if (self._shouldResampleAudio(audioPreview.url, urls)) {
@@ -681,8 +1023,14 @@ define([
           }
         });
       }
+
+      index++;
+
+      // Yield to allow cancellation and UI updates
+      Utils.scheduleIdle(processNext, { timeout: 16 });
     }
-    this._layer.batchDraw();
+
+    processNext();
   };
 
   SourcesLayer.prototype._shouldResampleAudio = function(audioUrl, urls) {
@@ -708,6 +1056,14 @@ define([
     this._peaks.off('handler.segments.show', this._onSegmentsShow);
     this._peaks.off('model.source.setIndicators', this.setIndicators);
     this._peaks.off('handler.view.mouseup', this._stopDrag);
+
+    // Cancel any in-progress rescale
+    this._rescaleVersion++;
+
+    // Clean up invoker resources
+    if (this._invoker) {
+      this._invoker.destroy();
+    }
   };
 
   SourcesLayer.prototype.getHeight = function() {

package/src/components/waveform-builder.js

@@ -16,13 +16,8 @@ define([
 
   var isXhr2 = ('withCredentials' in new XMLHttpRequest());
 
-  // Schedule heavy work during idle time to avoid UI stutter
-  function scheduleIdle(fn) {
-    if (typeof window !== 'undefined' && window.requestIdleCallback) {
-      return window.requestIdleCallback(fn, { timeout: 80 });
-    }
-    return setTimeout(fn, 0);
-  }
+  // Waveform data cache for better performance on repeated requests
+  var waveformCache = Utils.createLRUCache(50);
 
   /**
    * Creates and returns a WaveformData object, either by requesting the
@@ -39,6 +34,14 @@ define([
     this._peaks = peaks;
   }
 
+  /**
+   * Clears the waveform data cache.
+   * Useful when memory needs to be freed.
+   */
+  WaveformBuilder.clearCache = function() {
+    waveformCache.clear();
+  };
+
   /**
    * Options for requesting remote waveform data.
    *
@@ -192,6 +195,18 @@ define([
       return;
     }
 
+    // Check cache first for better performance
+    var cacheKey = url + ':' + requestType;
+    var cachedData = waveformCache.get(cacheKey);
+
+    if (cachedData) {
+      // Return cached waveform data asynchronously to maintain consistent API
+      Utils.scheduleIdle(function() {
+        callback(null, cachedData);
+      });
+      return;
+    }
+
     var xhr = self._createXHR(url, requestType, options.withCredentials, function(event) {
       if (this.readyState !== 4) {
         return;
@@ -205,7 +220,7 @@ define([
         return;
       }
 
-      scheduleIdle(function() {
+      Utils.scheduleIdle(function() {
         try {
           var waveformData = WaveformData.create(event.target.response);
 
@@ -214,6 +229,9 @@ define([
             return;
           }
 
+          // Cache the waveform data for future use
+          waveformCache.set(cacheKey, waveformData);
+
           callback(null, waveformData);
         }
         catch (err) {
@@ -270,7 +288,7 @@ define([
       return;
     }
 
-    scheduleIdle(function() {
+    Utils.scheduleIdle(function() {
       try {
         var createdWaveformData = WaveformData.create(data);