@checksub_team/peaks_timeline 2.3.0-alpha.0 → 2.3.0-alpha.2

package/src/view.js

@@ -345,46 +345,72 @@ define([
    * @param {Function} [updateWhileNotScrolling] Called when not scrolling.
    */
   View.prototype.updateWithAutoScroll = function(updateWhileScrolling,
-    updateWhileNotScrolling) {
+    updateWhileNotScrolling,
+    enableVerticalAutoScroll) {
     var self = this;
 
     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
 
-    function getAutoScrollVelocity(pointerXValue) {
-      if (typeof pointerXValue !== 'number' || thresholdPx <= 0) {
+    function getAutoScrollVelocity(pointerValue, threshold, size) {
+      if (typeof pointerValue !== 'number' || threshold <= 0 || size <= 0) {
         return 0;
       }
 
-      if (pointerXValue < thresholdPx) {
+      if (pointerValue < threshold) {
         return Math.round(
-          -MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (thresholdPx - pointerXValue) / thresholdPx)
+          -MAX_AUTO_SCROLL_PX_PER_FRAME * Math.min(1, (threshold - pointerValue) / threshold)
         );
       }
-      if (pointerXValue > viewWidth - thresholdPx) {
+      if (pointerValue > size - threshold) {
         return Math.round(
           MAX_AUTO_SCROLL_PX_PER_FRAME
-          * Math.min(1, (pointerXValue - (viewWidth - thresholdPx)) / thresholdPx)
+          * Math.min(1, (pointerValue - (size - threshold)) / threshold)
         );
       }
       return 0;
     }
 
-    var velocityPxPerFrame = getAutoScrollVelocity(pointerX);
+    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;
+      }
+    }
+
+    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 canScroll = velocityPxPerFrame > 0 || (velocityPxPerFrame < 0 && self.getFrameOffset() > 0);
+    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 velocity on the instance for debugging/inspection.
-    this._limited = velocityPxPerFrame;
+    // Keep the current velocities on the instance for debugging/inspection.
+    this._autoScrollVelocityX = velocityXPerFrame;
+    this._autoScrollVelocityY = velocityYPerFrame;
 
-    if (velocityPxPerFrame !== 0 && canScroll) {
+    if ((velocityXPerFrame !== 0 && canScrollX)
+      || (velocityYPerFrame !== 0 && canScrollY)) {
       if (!this._scrollingRafId) {
         var lastTime = performance.now();
 
@@ -393,23 +419,64 @@ define([
             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 scrollAmount = Math.round(self._limited * deltaTime / NOMINAL_FRAME_MS);
+          var scrollAmountX = Math.round(xVel * deltaTime / NOMINAL_FRAME_MS);
+          var scrollAmountY = Math.round(yVel * deltaTime / NOMINAL_FRAME_MS);
 
           lastTime = currentTime;
 
-          var newOffset = self.getFrameOffset() + scrollAmount;
+          var newOffsetX = self.getFrameOffset() + scrollAmountX;
+          var newOffsetY = self.getFrameOffsetY() + scrollAmountY;
 
-          if (newOffset < 0) {
-            self.updateTimeline(0);
-            self._scrollingRafId = null;
+          if (newOffsetX < 0) {
+            newOffsetX = 0;
+          }
+
+          if (verticalScrollingEnabled) {
+            if (newOffsetY < 0) {
+              newOffsetY = 0;
+            }
+            else if (newOffsetY > maxY) {
+              newOffsetY = maxY;
+            }
+          }
+
+          if (!verticalScrollingEnabled) {
+            self.updateTimeline(newOffsetX);
           }
           else {
-            self.updateTimeline(newOffset);
-            updateWhileScrolling();
-            self._scrollingRafId = requestAnimationFrame(scrollFrame);
+            self.updateTimeline(newOffsetX, newOffsetY);
           }
+
+          updateWhileScrolling();
+          self._scrollingRafId = requestAnimationFrame(scrollFrame);
         }
 
         self._scrollingRafId = requestAnimationFrame(scrollFrame);