@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.1

package/src/components/sources-layer.js

@@ -43,12 +43,29 @@ define([
     this._lineGroups    = new LineGroups(peaks, view, this);
     this._lineGroups.addToLayer(this);
 
+    // Drag overlay container.
+    // Use a Group inside the main sources layer to avoid adding an extra Stage layer.
+    this._dragGroup = new Konva.Group({
+      listening: false
+    });
+    this._layer.add(this._dragGroup);
+
     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 +76,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._draggedElements && this._draggedElements.length > 0) {
+      this._dragSourcesGroup();
+    }
+  };
+
   SourcesLayer.prototype._stopDrag = function() {
     const draggedSourceGroup = this._sourcesGroup[this._draggedElementId];
 
@@ -87,6 +112,11 @@ define([
 
   SourcesLayer.prototype.add = function(element) {
     this._layer.add(element);
+
+    // Keep drag group on top even if other callers add elements later.
+    if (this._dragGroup) {
+      this._dragGroup.moveToTop();
+    }
   };
 
   /**
@@ -190,7 +220,7 @@ define([
 
     this._view.updateTimelineLength();
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesShow = function(sources) {
@@ -200,7 +230,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(false, true);
     });
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onSourcesHide = function(sources) {
@@ -210,7 +240,7 @@ define([
       self._sourcesGroup[source.id].setWrapping(true, true);
     });
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   SourcesLayer.prototype._onDataRetrieved = function(data, source, url) {
@@ -243,7 +273,7 @@ define([
   SourcesLayer.prototype._onSegmentsShow = function(segmentsGroupId, lineId) {
     this._lineGroups.addSegments(segmentsGroupId, lineId);
     this._view.updateTimelineLength();
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   /**
@@ -285,12 +315,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 +338,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 +383,67 @@ define([
       orderable: true,
       draggable: true
     });
+
+    var self = this;
+
+    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 group so it draws above ALL other sources/segments
+        // without introducing an additional Konva.Layer on the Stage.
+        sourceGroup.moveTo(self._dragGroup);
+        // Restore the Y position (now relative to drag layer, which is at y=0)
+        sourceGroup.y(absoluteY);
+      }
+    });
   };
 
   SourcesLayer.prototype.onSourcesGroupDragEnd = function() {
+    var self = this;
+
+    this._initialSourcePositions = null;
+    this._dragOffsetX = undefined;
+    this._dragOffsetY = undefined;
+
     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,7 +451,70 @@ define([
   };
 
   SourcesLayer.prototype.onSourcesGroupDrag = function(draggedElement) {
-    this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this));
+    var pointerPos = this._view.getPointerPosition();
+
+    this._view.updateWithAutoScroll(this._dragSourcesGroup.bind(this), null, true);
+
+    // Return position that follows the mouse cursor exactly
+    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,
@@ -399,10 +541,13 @@ 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
@@ -424,8 +569,40 @@ define([
     );
   };
 
-  SourcesLayer.prototype._applyTimeChangesToSources = function(sources, initialStartTime, newStartTime,
-    newEndTime
+  /**
+   * 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 +611,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 +709,31 @@ 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 group
+        sourceGroup.moveTo(this._dragGroup);
+        sourceGroup.y(absoluteY);
+      }
     }
 
     return sourceGroup;
@@ -625,8 +855,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 +888,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 +930,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 +963,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);
 

package/src/utils.js

@@ -338,6 +338,96 @@ define([
       var BB = ((B.toString(16).length === 1) ? '0' + B.toString(16) : B.toString(16));
 
       return '#' + RR + GG + BB;
+    },
+
+    // ==================== Performance Utilities ====================
+
+    /**
+     * Schedules work during browser idle time.
+     * Falls back to setTimeout if requestIdleCallback is not available.
+     *
+     * @param {Function} callback Function to execute
+     * @param {Object} options Options object with timeout property
+     * @returns {Number} ID that can be used to cancel
+     */
+    scheduleIdle: function(callback, options) {
+      options = options || { timeout: 50 };
+
+      if (typeof window !== 'undefined' && window.requestIdleCallback) {
+        return window.requestIdleCallback(callback, options);
+      }
+      return setTimeout(function() {
+        callback({
+          didTimeout: true,
+          timeRemaining: function() {
+            return 0;
+          }
+        });
+      }, 0);
+    },
+
+    /**
+     * Cancels a scheduled idle callback.
+     *
+     * @param {Number} id The ID returned by scheduleIdle
+     */
+    cancelIdle: function(id) {
+      if (typeof window !== 'undefined' && window.cancelIdleCallback) {
+        window.cancelIdleCallback(id);
+      }
+      else {
+        clearTimeout(id);
+      }
+    },
+
+    /**
+     * Creates a simple LRU (Least Recently Used) cache.
+     *
+     * @param {Number} maxSize Maximum number of items to cache
+     * @returns {Object} Cache with get(), set(), has(), delete(), clear() methods
+     */
+    createLRUCache: function(maxSize) {
+      var cache = new Map();
+
+      maxSize = maxSize || 100;
+
+      return {
+        get: function(key) {
+          if (!cache.has(key)) {
+            return undefined;
+          }
+          // Move to end (most recently used)
+          var value = cache.get(key);
+
+          cache.delete(key);
+          cache.set(key, value);
+          return value;
+        },
+        set: function(key, value) {
+          if (cache.has(key)) {
+            cache.delete(key);
+          }
+          else if (cache.size >= maxSize) {
+            // Delete oldest (first) entry
+            var firstKey = cache.keys().next().value;
+
+            cache.delete(firstKey);
+          }
+          cache.set(key, value);
+        },
+        has: function(key) {
+          return cache.has(key);
+        },
+        delete: function(key) {
+          return cache.delete(key);
+        },
+        clear: function() {
+          cache.clear();
+        },
+        size: function() {
+          return cache.size;
+        }
+      };
     }
   };
 });