@checksub_team/peaks_timeline 2.2.1 → 2.3.0-alpha.1

package/src/components/axis.js

@@ -8,8 +8,9 @@
 
 define([
   '../utils',
+  './invoker',
   'konva'
-], function(Utils, Konva) {
+], function(Utils, Invoker, Konva) {
   'use strict';
 
   var LEFT_PADDING = 4;
@@ -29,52 +30,62 @@ define([
   function Axis(peaks, view, options) {
     this._view = view;
 
+    this._invoker = new Invoker();
+
     var self = this;
 
     peaks.on('playhead.moved', this._onPlayheadMoved.bind(this));
     peaks.on('playhead.hidden', this._onPlayheadHidden.bind(this));
 
-    self._axisGridlineColor = options.axisGridlineColor;
-    self._axisLabelColor    = options.axisLabelColor;
+    this._axisGridlineColor = options.axisGridlineColor;
+    this._axisLabelColor    = options.axisLabelColor;
 
-    self._backLayer = new Konva.Layer({
+    this._backLayer = new Konva.Layer({
       listening: false
     });
 
-    self._frontLayer = new Konva.Layer({
+    this._frontLayer = new Konva.Layer({
       listening: false
     });
 
-    self._axisShape = new Konva.Shape({
+    this._axisShape = new Konva.Shape({
       sceneFunc: function(context) {
         self.drawAxis(context, view);
       }
     });
-    self._backLayer.add(self._axisShape);
+    this._backLayer.add(this._axisShape);
 
-    self._timesShape = new Konva.Shape({
+    this._timesShape = new Konva.Shape({
       sceneFunc: function(context) {
         self.drawTimes(context, view);
       }
     });
-    self._frontLayer.add(self._timesShape);
+    this._frontLayer.add(this._timesShape);
+
+    // Throttled draws to prevent excessive redraws.
+    this._throttledBackDraw = this._invoker.throttleTrailing(
+      this._backLayer.batchDraw.bind(this._backLayer)
+    );
+    this._throttledFrontDraw = this._invoker.throttleTrailing(
+      this._frontLayer.batchDraw.bind(this._frontLayer)
+    );
   }
 
   Axis.prototype._onPlayheadMoved = function(playheadX, playheadWidth) {
     this._maskStart = playheadX + this._view.getFrameOffset();
     this._maskEnd = playheadX + this._view.getFrameOffset() + playheadWidth;
-    this._frontLayer.batchDraw();
+    this._throttledFrontDraw();
   };
 
   Axis.prototype._onPlayheadHidden = function() {
     this._maskStart = null;
     this._maskEnd = null;
-    this._frontLayer.batchDraw();
+    this._throttledFrontDraw();
   };
 
   Axis.prototype.batchDraw = function() {
-    this._backLayer.batchDraw();
-    this._frontLayer.batchDraw();
+    this._throttledBackDraw();
+    this._throttledFrontDraw();
   };
 
   Axis.prototype.addBackToStage = function(stage) {

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,6 +346,9 @@ define([
 
       this._automaticallyCreatedLineId = automaticallyCreatedLineGroup.getId();
       this._moveSourcesToPositionIfPossible(sources, newLinePosition);
+
+      // 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);
   };
 
@@ -361,7 +366,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();

package/src/components/line-indicator.js

@@ -9,10 +9,12 @@
 define([
   'konva',
   './svgs',
+  './invoker',
   '../utils'
 ], function(
   Konva,
   SVGs,
+  Invoker,
   Utils) {
   'use strict';
 
@@ -31,6 +33,8 @@ define([
     this._view = view;
     this._container = container;
 
+    this._invoker = new Invoker();
+
     this._width = this._peaks.options.lineIndicatorWidth;
     this._height = this._view.getHeight();
 
@@ -58,6 +62,11 @@ define([
     this._layer = new Konva.Layer();
     this._stage.add(this._layer);
 
+    // Throttled draws to coalesce multiple updates per frame.
+    this._throttledBatchDraw = this._invoker.throttleTrailing(
+      this._layer.batchDraw.bind(this._layer)
+    );
+
     this._indicators = {};
 
     this._separatingLine = new Konva.Line({
@@ -69,7 +78,7 @@ define([
 
     this._layer.add(this._separatingLine);
 
-    this._layer.batchDraw();
+    this.batchDraw();
 
     this._isDragging = false;
     this._dragLineId = null;
@@ -423,7 +432,7 @@ define([
   };
 
   LineIndicator.prototype.batchDraw = function() {
-    this._layer.batchDraw();
+    this._throttledBatchDraw();
   };
 
   LineIndicator.prototype._onWindowMove = function(event) {

package/src/components/mode-layer.js

@@ -8,10 +8,11 @@
 
 define([
   './source-group',
+  './invoker',
   '../models/source',
   '../utils',
   'konva'
-  ], function(SourceGroup, Source, Utils, Konva) {
+  ], function(SourceGroup, Invoker, Source, Utils, Konva) {
   'use strict';
 
   var TIME_X_OFFSET = 20;
@@ -35,6 +36,8 @@ define([
     this._playheadLayer = playheadLayer;
     this._stage = stage;
 
+    this._invoker = new Invoker();
+
     this._selectedElements = {};
     this._currentLine = null;
 
@@ -42,6 +45,11 @@ define([
       listening: this._mode !== 'default'
     });
 
+    // Throttled draws to coalesce multiple updates per frame.
+    this._throttledBatchDraw = this._invoker.throttleTrailing(
+      this._layer.batchDraw.bind(this._layer)
+    );
+
     this._prepareDefaultMode();
 
     this._onMouseClickInDefaultMode = this._onMouseClickInDefaultMode.bind(this);
@@ -59,6 +67,10 @@ define([
     this._peaks.on('handler.sources.destroy', this._onSourcesDestroy.bind(this));
   }
 
+  ModeLayer.prototype.batchDraw = function() {
+    this._throttledBatchDraw();
+  };
+
   ModeLayer.prototype._onSourcesDestroy = function(sources) {
     const selectedElementsToDeselect = {};
 
@@ -262,7 +274,7 @@ define([
   ModeLayer.prototype._onMouseEnterInCutMode = function() {
     this._cutGroup.visible(true);
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   ModeLayer.prototype._updateCursorTime = function(position) {
@@ -363,13 +375,13 @@ define([
     this._updateCursorTime(cuttingPosition);
     this._updateCuttingLine(cuttingPosition);
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   ModeLayer.prototype._onMouseLeaveInCutMode = function() {
     this._cutGroup.visible(false);
 
-    this._layer.batchDraw();
+    this.batchDraw();
   };
 
   ModeLayer.prototype._onMouseClickInCutMode = function() {
@@ -414,18 +426,49 @@ define([
 
         this._cuttingLine.visible(false);
 
+        // Avoid keeping a reference to a SourceGroup that will be destroyed
+        // as part of the cut update.
+        this._view.setHoveredElement(null);
+
         this._peaks.cutSource(hoveredElement.getSource(), this._view.pixelsToTime(cuttingPixel));
 
-        this._view.setHoveredElement(null);
+        // Cutting replaces Konva nodes under the cursor; Konva won't always emit
+        // enter/leave for the new nodes until the mouse moves. Re-sync hover now
+        // so subsequent leave events behave correctly.
+        this._syncHoveredElementFromPointer();
 
         this._updateCursorTime(cuttingPosition);
         this._updateCuttingLine(cuttingPosition);
 
-        this._layer.batchDraw();
+        this.batchDraw();
       }
     }
   };
 
+  ModeLayer.prototype._syncHoveredElementFromPointer = function() {
+    var pointerPos = this._stage.getPointerPosition();
+
+    if (!pointerPos) {
+      return;
+    }
+
+    var node = this._stage.getIntersection(pointerPos);
+
+    while (node) {
+      if (node.attrs && node.attrs.sourceId) {
+        var sourceGroup = this._view.getSourceGroupById(node.attrs.sourceId);
+
+        if (sourceGroup && !sourceGroup.isHovered()) {
+          sourceGroup.startHover();
+        }
+
+        return;
+      }
+
+      node = node.getParent ? node.getParent() : null;
+    }
+  };
+
   ModeLayer.prototype.setMode = function(mode) {
     if (this._mode === mode) {
       return;
@@ -498,7 +541,7 @@ define([
     }
 
     this._mode = mode;
-    this._layer.batchDraw();
+    this.batchDraw();
     this._view.batchDrawSourcesLayer();
   };
 

package/src/components/playhead-layer.js

@@ -8,8 +8,9 @@
 
 define([
   '../utils',
+  './invoker',
   'konva'
-  ], function(Utils, Konva) {
+  ], function(Utils, Invoker, Konva) {
   'use strict';
 
   var HANDLE_RADIUS = 10;
@@ -38,6 +39,11 @@ define([
 
     this._playheadLayer = new Konva.Layer();
 
+    this._invoker = new Invoker();
+    this._throttledBatchDraw = this._invoker.throttleTrailing(
+      this._playheadLayer.batchDraw.bind(this._playheadLayer)
+    );
+
     this._activeSegments = {};
     this._activeSources = {};
 
@@ -236,10 +242,14 @@ define([
 
     this._time = time;
     if (pixelHasChanged || timeHasChanged) {
-      this._playheadLayer.batchDraw();
+      this.batchDraw();
     }
   };
 
+  PlayheadLayer.prototype.batchDraw = function() {
+    this._throttledBatchDraw();
+  };
+
   /**
    * Update cached pixel values and position of the playhead group.
    * @private
@@ -375,7 +385,7 @@ define([
     }
 
     if (updated) {
-      this._playheadLayer.batchDraw();
+      this.batchDraw();
     }
   };