@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.0

package/src/components/invoker.js

@@ -6,12 +6,22 @@
  * @module invoker
  */
 
- define([
+define([
   ], function() {
     'use strict';
 
+    // Use requestAnimationFrame for smoother animations when available
+    var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) ||
+              function(fn) {
+                return setTimeout(fn, 16);
+              };
+    var caf = (typeof window !== 'undefined' && window.cancelAnimationFrame) ||
+              function(id) {
+                clearTimeout(id);
+              };
+
     /**
-     * An invoker class for throttling.
+     * An invoker class for throttling and performance optimization.
      *
      * @class
      * @alias Invoker
@@ -19,8 +29,14 @@
 
     function Invoker() {
       this._throttledFunc = {};
+      this._rafThrottled = {};
+      this._frameCallbacks = [];
+      this._frameScheduled = false;
     }
 
+    /**
+     * Throttle using setInterval - good for consistent timing
+     */
     Invoker.prototype.throttle = function(id, func, wait) {
       var self = this;
 
@@ -50,6 +66,78 @@
       }
     };
 
+    /**
+     * Throttle using requestAnimationFrame - ideal for visual updates
+     * Ensures function runs at most once per animation frame
+     */
+    Invoker.prototype.throttleRAF = function(id, func) {
+      var self = this;
+
+      if (this._rafThrottled[id]) {
+        // Update the function but don't schedule again
+        this._rafThrottled[id].func = func;
+        this._rafThrottled[id].pending = true;
+        return;
+      }
+
+      this._rafThrottled[id] = {
+        func: func,
+        pending: true,
+        rafId: null
+      };
+
+      function frame() {
+        if (self._rafThrottled[id] && self._rafThrottled[id].pending) {
+          self._rafThrottled[id].pending = false;
+          self._rafThrottled[id].func();
+          self._rafThrottled[id].rafId = raf(frame);
+        }
+        else if (self._rafThrottled[id]) {
+          delete self._rafThrottled[id];
+        }
+      }
+
+      this._rafThrottled[id].rafId = raf(frame);
+    };
+
+    /**
+     * Cancel a RAF-throttled function
+     */
+    Invoker.prototype.cancelThrottleRAF = function(id) {
+      if (this._rafThrottled[id]) {
+        if (this._rafThrottled[id].rafId) {
+          caf(this._rafThrottled[id].rafId);
+        }
+        delete this._rafThrottled[id];
+      }
+    };
+
+    /**
+     * Schedule a callback for the next animation frame
+     * Multiple callbacks are batched together
+     */
+    Invoker.prototype.scheduleFrame = function(callback) {
+      var self = this;
+
+      this._frameCallbacks.push(callback);
+
+      if (!this._frameScheduled) {
+        this._frameScheduled = true;
+        raf(function() {
+          self._frameScheduled = false;
+          var callbacks = self._frameCallbacks;
+
+          self._frameCallbacks = [];
+          for (var i = 0; i < callbacks.length; i++) {
+            callbacks[i]();
+          }
+        });
+      }
+    };
+
+    /**
+     * Creates a debounced function
+     */
     Invoker.prototype.debounce = function(func, wait, immediate) {
       var timeout;
 
@@ -77,5 +165,133 @@
       };
     };
 
+    /**
+     * Creates a leading-edge throttled function using RAF
+     * Executes immediately, then throttles subsequent calls
+     */
+    Invoker.prototype.throttleLeading = function(func) {
+      var scheduled = false;
+      var savedArgs = null;
+      var savedThis = null;
+
+      return function throttled() {
+        if (scheduled) {
+          savedArgs = arguments;
+          // eslint-disable-next-line consistent-this
+          savedThis = this;
+          return;
+        }
+
+        func.apply(this, arguments);
+        scheduled = true;
+
+        raf(function() {
+          scheduled = false;
+          if (savedArgs) {
+            func.apply(savedThis, savedArgs);
+            savedArgs = null;
+            savedThis = null;
+          }
+        });
+      };
+    };
+
+    /**
+     * Creates a trailing-edge throttled function using RAF
+     * Collects calls and executes only the last one per frame
+     */
+    Invoker.prototype.throttleTrailing = function(func) {
+      var rafId = null;
+      var savedArgs = null;
+      var savedThis = null;
+
+      return function throttled() {
+        savedArgs = arguments;
+        // eslint-disable-next-line consistent-this
+        savedThis = this;
+
+        if (rafId === null) {
+          rafId = raf(function() {
+            rafId = null;
+            func.apply(savedThis, savedArgs);
+          });
+        }
+      };
+    };
+
+    /**
+     * Batch multiple function calls into a single execution
+     * Useful for accumulating updates before rendering
+     */
+    Invoker.prototype.createBatcher = function(processFn, options) {
+      options = options || {};
+      var maxWait = options.maxWait || 100;
+      var items = [];
+      var timeout = null;
+      var lastFlush = 0;
+
+      function flush() {
+        if (items.length === 0) {
+          return;
+        }
+        var batch = items;
+
+        items = [];
+        timeout = null;
+        lastFlush = Date.now();
+        processFn(batch);
+      }
+
+      return {
+        add: function(item) {
+          items.push(item);
+
+          if (timeout === null) {
+            var timeSinceLastFlush = Date.now() - lastFlush;
+
+            if (timeSinceLastFlush >= maxWait) {
+              raf(flush);
+            }
+            else {
+              timeout = setTimeout(flush, Math.min(16, maxWait - timeSinceLastFlush));
+            }
+          }
+        },
+        flush: flush,
+        size: function() {
+          return items.length;
+        }
+      };
+    };
+
+    /**
+     * Destroy all pending operations
+     */
+    Invoker.prototype.destroy = function() {
+      var id;
+
+      // Clear interval-based throttles
+      for (id in this._throttledFunc) {
+        if (Object.prototype.hasOwnProperty.call(this._throttledFunc, id)) {
+          clearInterval(this._throttledFunc[id].timer);
+        }
+      }
+      this._throttledFunc = {};
+
+      // Clear RAF-based throttles
+      for (id in this._rafThrottled) {
+        if (Object.prototype.hasOwnProperty.call(this._rafThrottled, id)) {
+          if (this._rafThrottled[id].rafId) {
+            caf(this._rafThrottled[id].rafId);
+          }
+        }
+      }
+      this._rafThrottled = {};
+
+      // Clear frame callbacks
+      this._frameCallbacks = [];
+      this._frameScheduled = false;
+    };
+
     return Invoker;
 });

package/src/components/line-group.js

@@ -195,8 +195,12 @@ define([
   LineGroup.prototype.addSource = function(source, sourceGroup, sourcesAround) {
     if (sourceGroup) {
       this._sourcesGroup[source.id] = sourceGroup;
-      if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
-        sourceGroup.moveTo(this._group);
+      // Only move to this group if not currently being dragged
+      // (during drag, source stays in drag layer for z-order)
+      if (!sourceGroup.isActive()) {
+        if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
+          sourceGroup.moveTo(this._group);
+        }
       }
     }
 
@@ -342,10 +346,6 @@ define([
 
     delete this._sourcesGroup[source.id];
 
-    if (sourceGroup) {
-      sourceGroup.hideButKeepFocus();
-    }
-
     return sourceGroup;
   };
 

package/src/components/line-groups.js

@@ -30,6 +30,7 @@ define([
 
     this._automaticallyCreatedLineId = null;
     this._automaticLineCreationPosition = null;
+    this._automaticLineCreationMouseY = null;
     this._automaticLineCreationTimeout = null;
 
     this._segmentsGroups = {};
@@ -141,7 +142,6 @@ define([
 
   LineGroups.prototype._onLineHeightChanged = function() {
     this.refreshLineYs();
-    this._view.updateTimeline();
   };
 
   LineGroups.prototype._onSourcesWrappingChanged = function(sources) {
@@ -282,10 +282,11 @@ define([
     }
     this._automaticLineCreationTimeout = null;
     this._automaticLineCreationPosition = null;
+    this._automaticLineCreationMouseY = null;
     this._automaticallyCreatedLineId = null;
   };
 
-  LineGroups.prototype.manageAutomaticLineCreation = function(newLinePosition, initialPosition, sources) {
+  LineGroups.prototype.manageAutomaticLineCreation = function(newLinePosition, initialPosition, sources, mouseY) {
     if (!Utils.isNullOrUndefined(this._automaticallyCreatedLineId)) {
       return;
     }
@@ -301,6 +302,7 @@ define([
     }
 
     this._automaticLineCreationPosition = newLinePosition;
+    this._automaticLineCreationMouseY = mouseY;
     this._automaticLineCreationTimeout = setTimeout(function() {
       this._automaticLineCreationTimeout = null;
 
@@ -344,9 +346,44 @@ define([
 
       this._automaticallyCreatedLineId = automaticallyCreatedLineGroup.getId();
       this._moveSourcesToPositionIfPossible(sources, newLinePosition);
+
+      // After creating and moving to the new line, nudge the vertical scroll so
+      // the pointer is closer to the center of that line.
+      this._nudgeFrameOffsetYToLineCenter(newLinePosition, this._automaticLineCreationMouseY);
+
+      // Notify that sources have been moved to a new line (for ghost preview updates)
+      this._peaks.emit('sources.delayedLineChange', sources);
     }.bind(this), this._peaks.options.automaticLineCreationDelay);
   };
 
+  LineGroups.prototype._nudgeFrameOffsetYToLineCenter = function(linePosition, mouseY) {
+    if (!this._peaks.options.enableVerticalScrolling) {
+      return;
+    }
+
+    if (Utils.isNullOrUndefined(mouseY)) {
+      return;
+    }
+
+    const lineGroup = this._lineGroupsByPosition[linePosition];
+
+    if (!lineGroup) {
+      return;
+    }
+
+    const targetCenterY = lineGroup.y() + (lineGroup.lineHeight() / 2);
+    const deltaY = targetCenterY - mouseY;
+
+    if (deltaY === 0) {
+      return;
+    }
+
+    const maxOffsetY = Math.max(0, this._view.getFullHeight() - this._view.getHeight());
+    const nextOffsetY = Utils.clamp(this._view.getFrameOffsetY() + deltaY, 0, maxOffsetY);
+
+    this._view.updateTimeline(null, nextOffsetY);
+  };
+
   LineGroups.prototype.manageVerticalPosition = function(sources, startTime, endTime, mouseX, mouseY) {
     if (Utils.isNullOrUndefined(mouseX)) {
       return;
@@ -361,7 +398,7 @@ define([
     }
 
     if (linePos[0] !== linePos[1]) {
-      this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
+      this.manageAutomaticLineCreation(linePos[0] + 1, position, sources, mouseY);
     }
     else {
       this.stopAutomaticLineCreation();