@checksub_team/peaks_timeline 2.3.0-alpha.0 → 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/line-groups.js

@@ -347,43 +347,11 @@ 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;

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

package/src/components/source-group.js

@@ -66,6 +66,9 @@ define([
     this._isHandleDragging = false;
     this._destroyed = false;
 
+    // Optional Konva element used as a drag "ghost" preview.
+    this._dragGhost = null;
+
     // Performance: track if draw is needed
     this._drawScheduled = false;
 
@@ -151,11 +154,54 @@ define([
   SourceGroup.prototype._onHoverEnd = function() {
     this._hovered = false;
     this._manualHover = false;
+    this._disableManualHoverTracking();
     this._view.setHoveredElement(null);
     this._hideButtons();
     this._scheduleBatchDraw();
   };
 
+  SourceGroup.prototype._enableManualHoverTracking = function() {
+    if (this._manualHoverTrackingEnabled) {
+      return;
+    }
+
+    if (!this._group || this._destroyed) {
+      return;
+    }
+
+    var stage = this._group.getStage && this._group.getStage();
+
+    if (!stage) {
+      return;
+    }
+
+    this._manualHoverTrackingEnabled = true;
+    this._manualHoverNamespace = '.manualHover.' + this._source.id;
+
+    this._manualHoverMoveHandler = function() {
+      this._manageManualHoverStop();
+    }.bind(this);
+
+    stage.on('mousemove' + this._manualHoverNamespace, this._manualHoverMoveHandler);
+    stage.on('touchmove' + this._manualHoverNamespace, this._manualHoverMoveHandler);
+  };
+
+  SourceGroup.prototype._disableManualHoverTracking = function() {
+    if (!this._manualHoverTrackingEnabled) {
+      return;
+    }
+
+    var stage = this._group && this._group.getStage && this._group.getStage();
+
+    if (stage && this._manualHoverNamespace) {
+      stage.off(this._manualHoverNamespace);
+    }
+
+    this._manualHoverTrackingEnabled = false;
+    this._manualHoverMoveHandler = null;
+    this._manualHoverNamespace = null;
+  };
+
   SourceGroup.prototype._onDragStart = function(element) {
     this._isDragged = true;
     this._layer.onSourcesGroupDragStart(element);
@@ -231,7 +277,7 @@ define([
           this._layer.batchDraw();
         }
       }.bind(this)
-    );
+    , null, false);
 
     return {
       x: draggedElement.absolutePosition().x,
@@ -285,6 +331,13 @@ define([
       // update unwrap
       this.updatePreviews();
     }
+
+    // Keep the drag ghost in sync automatically while dragging.
+    // This lets SourcesLayer avoid manually updating ghosts.
+    if (this._isDragged) {
+      this.createDragGhost();
+      this.updateDragGhost();
+    }
   };
 
   SourceGroup.prototype.setWrapping = function(wrap, forceCreate, notify) {
@@ -753,6 +806,7 @@ define([
 
   SourceGroup.prototype.startHover = function() {
     this._manualHover = true;
+    this._enableManualHoverTracking();
     this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
   };
 
@@ -762,6 +816,14 @@ define([
 
   SourceGroup.prototype.setDragging = function(isDragging) {
     this._isDragged = isDragging;
+
+    // Ghost lifecycle is tied to dragging state.
+    if (isDragging) {
+      this.createDragGhost();
+    }
+    else {
+      this.destroyDragGhost();
+    }
   };
 
   SourceGroup.prototype.startDrag = function() {
@@ -1271,6 +1333,90 @@ define([
     return this._height;
   };
 
+  /**
+   * Creates the drag ghost preview element if it does not exist.
+   * The ghost shows where the source will be placed when released.
+   */
+  SourceGroup.prototype.createDragGhost = function() {
+    if (this._dragGhost) {
+      return this._dragGhost;
+    }
+
+    var frameOffset = this._view.getFrameOffset();
+    var x = this._view.timeToPixels(this._source.startTime) - frameOffset;
+    var width = this._view.timeToPixels(this._source.endTime - this._source.startTime);
+    var height = this.getCurrentHeight();
+    var y = this.getAbsoluteY();
+
+    this._dragGhost = new Konva.Rect({
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      fill: this._source.backgroundColor,
+      opacity: 0.4,
+      stroke: this._source.selectedBorderColor,
+      strokeWidth: 2,
+      dash: [8, 4],
+      cornerRadius: 8,
+      listening: false
+    });
+
+    // Add to the main sources layer (not the group) so it stays behind sources.
+    this._layer.add(this._dragGhost);
+    this._dragGhost.moveToBottom();
+
+    // Ensure initial Y snaps to the current line position.
+    this.updateDragGhost();
+
+    return this._dragGhost;
+  };
+
+  /**
+   * Updates the drag ghost preview position and size.
+   *
+   * @param {Object} lineGroupsById Map of lineId -> Konva.Group
+   */
+  SourceGroup.prototype.updateDragGhost = function(lineGroupsById) {
+    if (!this._dragGhost) {
+      return;
+    }
+
+    // Allow callers to omit the lookup; resolve via the owning layer.
+    if (!lineGroupsById
+      && this._layer
+      && typeof this._layer.getLineGroups === 'function') {
+      var lineGroups = this._layer.getLineGroups();
+
+      if (lineGroups && typeof lineGroups.getLineGroupsById === 'function') {
+        lineGroupsById = lineGroups.getLineGroupsById();
+      }
+    }
+
+    var frameOffset = this._view.getFrameOffset();
+    var x = this._view.timeToPixels(this._source.startTime) - frameOffset;
+    var width = this._view.timeToPixels(this._source.endTime - this._source.startTime);
+
+    this._dragGhost.x(x);
+    this._dragGhost.width(width);
+    this._dragGhost.height(this.getCurrentHeight());
+
+    if (lineGroupsById) {
+      var lineGroup = lineGroupsById[this._source.lineId];
+
+      if (lineGroup) {
+        this._dragGhost.y(lineGroup.y());
+      }
+    }
+  };
+
+  SourceGroup.prototype.destroyDragGhost = function() {
+    if (this._dragGhost) {
+      this._dragGhost.destroy();
+      this._dragGhost = null;
+    }
+  };
+
   SourceGroup.prototype.getHeights = function() {
     return {
       unwrapped: this._unwrappedHeight,
@@ -1782,6 +1928,10 @@ define([
   };
 
   SourceGroup.prototype.destroy = function() {
+    this.destroyDragGhost();
+
+    this._disableManualHoverTracking();
+
     // Cancel any pending idle callbacks to prevent memory leaks
     if (this._pendingIdleCallbacks) {
       this._pendingIdleCallbacks.forEach(function(id) {