@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.0

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;
+        }
+      };
     }
   };
 });

package/src/view.js

@@ -120,8 +120,6 @@ define([
       height: self._height
     });
 
-    self._tempGroup = new Konva.Group({ listening: false });
-
     self._width -= self._peaks.options.lineIndicatorWidth;
 
     self._axis = new Axis(self._peaks, self, {
@@ -134,8 +132,6 @@ define([
     self._sourcesLayer = new SourcesLayer(peaks, self, true);
     self._sourcesLayer.addToStage(self._stage);
 
-    self._sourcesLayer.add(self._tempGroup);
-
     self._axis.addFrontToStage(self._stage);
 
     self._playheadLayer = new PlayheadLayer(
@@ -315,7 +311,7 @@ define([
   }
 
   View.prototype._mouseUp = function() {
-    this.clearScrollingInterval();
+    this.stopAutoScroll();
     this._peaks.emit('handler.view.mouseup');
   };
 
@@ -329,68 +325,113 @@ define([
     this._isClickable = clickable;
   };
 
-  View.prototype.getTempGroup = function() {
-    return this._tempGroup;
-  };
-
   View.prototype.getSelectedElements = function() {
     return Object.values(this._modeLayer.getSelectedElements());
   };
 
-  View.prototype.updateWithAutoScroll = function(updateInInterval,
-    updateOutInterval) {
+  /**
+   * Updates the view with auto-scroll behavior during drag operations.
+   *
+   * Auto-scroll activates when the pointer is within `autoScrollThreshold` of
+   * the left/right edges. While scrolling, we call `updateWhileScrolling` on
+   * every animation frame after updating the timeline offset.
+   *
+   * If auto-scroll is not active, we stop any pending auto-scroll loop and call
+   * `updateWhileNotScrolling` (or fall back to `updateWhileScrolling`).
+   *
+   * Uses requestAnimationFrame for smooth, consistent scrolling.
+   *
+   * @param {Function} updateWhileScrolling Called after each scroll step.
+   * @param {Function} [updateWhileNotScrolling] Called when not scrolling.
+   */
+  View.prototype.updateWithAutoScroll = function(updateWhileScrolling,
+    updateWhileNotScrolling) {
     var self = this;
-    var posX = this.getPointerPosition().x;
-    var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
 
-    this._limited = 0;
+    var pointer = this.getPointerPosition();
+    var pointerX = pointer ? pointer.x : null;
+    var viewWidth = this.getWidth();
+    var thresholdPx = Math.round(this._peaks.options.autoScrollThreshold * viewWidth);
 
-    if (posX < threshold) {
-      this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
-    }
-    else if (posX > this.getWidth() - threshold) {
-      this._limited = Math.round(
-        30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold)
-      );
-    }
+    var MAX_AUTO_SCROLL_PX_PER_FRAME = 30;
+    var NOMINAL_FRAME_MS = 16.67; // ~60fps
 
-    if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
-      if (!this._scrollingInterval) {
-        this._scrollingInterval = setInterval(
-          function() {
-            var newOffset = self.getFrameOffset() + self._limited;
-
-            if (newOffset < 0) {
-              self.updateTimeline(0);
-              clearInterval(self._scrollingInterval);
-              self._scrollingInterval = null;
-            }
-            else {
-              self.updateTimeline(self.getFrameOffset() + self._limited);
-            }
-
-            updateInInterval();
-          },
-          10
+    function getAutoScrollVelocity(pointerXValue) {
+      if (typeof pointerXValue !== 'number' || thresholdPx <= 0) {
+        return 0;
+      }
+
+      if (pointerXValue < thresholdPx) {
+        return Math.round(
+          -MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (thresholdPx - pointerXValue) / thresholdPx)
         );
       }
+      if (pointerXValue > viewWidth - thresholdPx) {
+        return Math.round(
+          MAX_AUTO_SCROLL_PX_PER_FRAME
+          * Math.min(1, (pointerXValue - (viewWidth - thresholdPx)) / thresholdPx)
+        );
+      }
+      return 0;
+    }
+
+    var velocityPxPerFrame = getAutoScrollVelocity(pointerX);
+
+    // For left scroll (negative), only scroll if we can actually move left.
+    // For right scroll (positive), allow scrolling (timeline can extend).
+    var canScroll = velocityPxPerFrame > 0 || (velocityPxPerFrame < 0 && self.getFrameOffset() > 0);
+
+    // Keep the current velocity on the instance for debugging/inspection.
+    this._limited = velocityPxPerFrame;
+
+    if (velocityPxPerFrame !== 0 && canScroll) {
+      if (!this._scrollingRafId) {
+        var lastTime = performance.now();
+
+        function scrollFrame(currentTime) {
+          if (!self._scrollingRafId) {
+            return;
+          }
+
+          // Calculate time delta for consistent scroll speed regardless of frame rate
+          var deltaTime = currentTime - lastTime;
+          var scrollAmount = Math.round(self._limited * deltaTime / NOMINAL_FRAME_MS);
+
+          lastTime = currentTime;
+
+          var newOffset = self.getFrameOffset() + scrollAmount;
+
+          if (newOffset < 0) {
+            self.updateTimeline(0);
+            self._scrollingRafId = null;
+          }
+          else {
+            self.updateTimeline(newOffset);
+            updateWhileScrolling();
+            self._scrollingRafId = requestAnimationFrame(scrollFrame);
+          }
+        }
+
+        self._scrollingRafId = requestAnimationFrame(scrollFrame);
+      }
     }
     else {
-      this.clearScrollingInterval();
+      this.stopAutoScroll();
 
-      if (updateOutInterval) {
-        updateOutInterval();
+      if (updateWhileNotScrolling) {
+        updateWhileNotScrolling();
       }
       else {
-        updateInInterval();
+        updateWhileScrolling();
       }
     }
   };
 
-  View.prototype.clearScrollingInterval = function() {
-    if (this._scrollingInterval) {
-      clearInterval(this._scrollingInterval);
-      this._scrollingInterval = null;
+  // Clear/stop any active auto-scroll loop.
+  View.prototype.stopAutoScroll = function() {
+    if (this._scrollingRafId) {
+      cancelAnimationFrame(this._scrollingRafId);
+      this._scrollingRafId = null;
     }
   };
 
@@ -663,7 +704,7 @@ define([
 
     this.updateTimeline(this._frameOffset);
 
-    this._sourcesLayer.rescale(true);
+    this._sourcesLayer.rescale();
 
     // Update the playhead position after zooming.
     this._playheadLayer.updatePlayheadTime(currentTime);