@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.1

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,180 @@ 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,
+    enableVerticalAutoScroll) {
     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 pointerY = pointer ? pointer.y : null;
+    var viewWidth = this.getWidth();
+    var viewHeight = this.getHeight();
+    var thresholdPx = Math.round(this._peaks.options.autoScrollThreshold * viewWidth);
+    var thresholdPy = Math.round(this._peaks.options.autoScrollThreshold * viewHeight);
+
+    var MAX_AUTO_SCROLL_PX_PER_FRAME = 30;
+    var NOMINAL_FRAME_MS = 16.67; // ~60fps
 
-    if (posX < threshold) {
-      this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
+    function getAutoScrollVelocity(pointerValue, threshold, size) {
+      if (typeof pointerValue !== 'number' || threshold <= 0 || size <= 0) {
+        return 0;
+      }
+
+      if (pointerValue < threshold) {
+        return Math.round(
+          -MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (threshold - pointerValue) / threshold)
+        );
+      }
+      if (pointerValue > size - threshold) {
+        return Math.round(
+          MAX_AUTO_SCROLL_PX_PER_FRAME
+          * Math.min(1, (pointerValue - (size - threshold)) / threshold)
+        );
+      }
+      return 0;
     }
-    else if (posX > this.getWidth() - threshold) {
-      this._limited = Math.round(
-        30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold)
-      );
+
+    var velocityXPerFrame = getAutoScrollVelocity(pointerX, thresholdPx, viewWidth);
+
+    var verticalScrollingEnabled = Boolean(enableVerticalAutoScroll
+      && this._peaks.options.enableVerticalScrolling);
+
+    var maxFrameOffsetY = 0;
+
+    if (verticalScrollingEnabled) {
+      maxFrameOffsetY = this.getFullHeight() - viewHeight;
+      if (!Number.isFinite(maxFrameOffsetY) || maxFrameOffsetY < 0) {
+        maxFrameOffsetY = 0;
+      }
     }
 
-    if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
-      if (!this._scrollingInterval) {
-        this._scrollingInterval = setInterval(
-          function() {
-            var newOffset = self.getFrameOffset() + self._limited;
+    var velocityYPerFrame = verticalScrollingEnabled && maxFrameOffsetY > 0 ?
+      getAutoScrollVelocity(pointerY, thresholdPy, viewHeight) :
+      0;
+
+    // For left scroll (negative), only scroll if we can actually move left.
+    // For right scroll (positive), allow scrolling (timeline can extend).
+    var canScrollX = velocityXPerFrame > 0 || (velocityXPerFrame < 0 && self.getFrameOffset() > 0);
+    var canScrollY = verticalScrollingEnabled && maxFrameOffsetY > 0 && (
+      (velocityYPerFrame > 0 && self.getFrameOffsetY() < maxFrameOffsetY)
+      || (velocityYPerFrame < 0 && self.getFrameOffsetY() > 0)
+    );
+
+    // Keep the current velocities on the instance for debugging/inspection.
+    this._autoScrollVelocityX = velocityXPerFrame;
+    this._autoScrollVelocityY = velocityYPerFrame;
+
+    if ((velocityXPerFrame !== 0 && canScrollX)
+      || (velocityYPerFrame !== 0 && canScrollY)) {
+      if (!this._scrollingRafId) {
+        var lastTime = performance.now();
+
+        function scrollFrame(currentTime) {
+          if (!self._scrollingRafId) {
+            return;
+          }
+
+          var xVel = self._autoScrollVelocityX || 0;
+          var yVel = self._autoScrollVelocityY || 0;
+
+          var canContinueX = xVel > 0 || (xVel < 0 && self.getFrameOffset() > 0);
+          var maxY = 0;
+          var canContinueY = false;
+
+          if (verticalScrollingEnabled) {
+            maxY = self.getFullHeight() - self.getHeight();
+            if (!Number.isFinite(maxY) || maxY < 0) {
+              maxY = 0;
+            }
+
+            canContinueY = maxY > 0 && (
+              (yVel > 0 && self.getFrameOffsetY() < maxY)
+              || (yVel < 0 && self.getFrameOffsetY() > 0)
+            );
+          }
+
+          if ((xVel === 0 || !canContinueX)
+            && (yVel === 0 || !canContinueY)) {
+            self.stopAutoScroll();
+            updateWhileScrolling();
+            return;
+          }
+
+          // Calculate time delta for consistent scroll speed regardless of frame rate
+          var deltaTime = currentTime - lastTime;
+          var scrollAmountX = Math.round(xVel * deltaTime / NOMINAL_FRAME_MS);
+          var scrollAmountY = Math.round(yVel * deltaTime / NOMINAL_FRAME_MS);
+
+          lastTime = currentTime;
+
+          var newOffsetX = self.getFrameOffset() + scrollAmountX;
+          var newOffsetY = self.getFrameOffsetY() + scrollAmountY;
 
-            if (newOffset < 0) {
-              self.updateTimeline(0);
-              clearInterval(self._scrollingInterval);
-              self._scrollingInterval = null;
+          if (newOffsetX < 0) {
+            newOffsetX = 0;
+          }
+
+          if (verticalScrollingEnabled) {
+            if (newOffsetY < 0) {
+              newOffsetY = 0;
             }
-            else {
-              self.updateTimeline(self.getFrameOffset() + self._limited);
+            else if (newOffsetY > maxY) {
+              newOffsetY = maxY;
             }
+          }
 
-            updateInInterval();
-          },
-          10
-        );
+          if (!verticalScrollingEnabled) {
+            self.updateTimeline(newOffsetX);
+          }
+          else {
+            self.updateTimeline(newOffsetX, newOffsetY);
+          }
+
+          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 +771,7 @@ define([
 
     this.updateTimeline(this._frameOffset);
 
-    this._sourcesLayer.rescale(true);
+    this._sourcesLayer.rescale();
 
     // Update the playhead position after zooming.
     this._playheadLayer.updatePlayheadTime(currentTime);