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

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-group.js

@@ -197,7 +197,7 @@ define([
       this._sourcesGroup[source.id] = sourceGroup;
       // 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.isDragged()) {
         if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
           sourceGroup.moveTo(this._group);
         }

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;
@@ -89,7 +98,7 @@ define([
     this.refreshIndicators();
   };
 
-  LineIndicator.prototype._createIndicator = function(lineGroup, type, text, subText) {
+  LineIndicator.prototype._createIndicator = function(lineGroup, type, text, subText, defaultStyle = {}) {
     const indicator = new Konva.Group();
     let indicatorHeight = 0;
     var self = this;
@@ -97,13 +106,13 @@ define([
     var textNode, iconNode, subTextNode;
 
     if (text) {
-      [textGroup, textNode] = this._createIndicatorText(text);
+      [textGroup, textNode] = this._createIndicatorText(text, 'line-indicator-text', defaultStyle);
 
       indicator.add(textGroup);
       indicatorHeight += textGroup.getAttr('trueHeight') + this._topPadding;
     }
 
-    [iconGroup, iconNode] = this._createIndicatorIcon(type);
+    [iconGroup, iconNode] = this._createIndicatorIcon(type, 'line-indicator-icon', defaultStyle);
 
     iconGroup.y(indicatorHeight);
     indicator.add(iconGroup);
@@ -112,7 +121,7 @@ define([
     if (subText) {
       indicatorHeight += this._bottomPadding;
 
-      [subTextGroup, subTextNode] = this._createIndicatorText(subText);
+      [subTextGroup, subTextNode] = this._createIndicatorText(subText, 'line-indicator-subText', defaultStyle);
 
       subTextGroup.y(indicatorHeight);
       indicator.add(subTextGroup);
@@ -208,17 +217,19 @@ define([
     return indicator;
   };
 
-  LineIndicator.prototype._createIndicatorText = function(text) {
+  LineIndicator.prototype._createIndicatorText = function(text, role, defaultStyle = {}) {
+    defaultStyle = defaultStyle[role] || {};
     const textGroup = new Konva.Group();
 
     const textNode = new Konva.Text({
       text: text,
       fontSize: this._sizes.font,
       fontFamily: this._peaks.options.lineIndicatorFont,
-      fill: this._peaks.options.lineIndicatorTextColor,
+      fill: defaultStyle.fill || this._peaks.options.lineIndicatorTextColor,
       align: 'center',
       width: this._width,
-      listening: false
+      listening: false,
+      name: role
     });
 
     textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
@@ -242,7 +253,8 @@ define([
     return [textGroup, textNode];
   };
 
-  LineIndicator.prototype._createIndicatorIcon = function(type) {
+  LineIndicator.prototype._createIndicatorIcon = function(type, role, defaultStyle = {}) {
+    defaultStyle = defaultStyle[role] || {};
     type = this._types.includes(type) ? type : 'default';
 
     const iconGroup = new Konva.Group();
@@ -255,9 +267,10 @@ define([
         x: this._width / 2,
         y: this._sizes.icon.default / 2,
         radius: this._sizes.icon.default / 2,
-        fill: this._peaks.options.lineIndicatorIconColor,
+        fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
         strokeWidth: 0,
-        listening: false
+        listening: false,
+        name: role
       });
     }
     else {
@@ -265,12 +278,13 @@ define([
         x: (this._width - this._sizes.icon[type]) / 2,
         y: 0,
         data: SVGs[type].path,
-        fill: this._peaks.options.lineIndicatorIconColor,
+        fill: defaultStyle.fill || this._peaks.options.lineIndicatorIconColor,
         scale: {
           x: (this._sizes.icon[type]) / SVGs[type].width,
           y: (this._sizes.icon[type]) / SVGs[type].height
         },
-        listening: false
+        listening: false,
+        name: role
       });
     }
 
@@ -326,17 +340,20 @@ define([
       return;
     }
 
-    if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText) {
+    if (indicatorData.type === line.indicatorType
+      && indicatorData.text === line.indicatorText
+      && indicatorData.subText === line.indicatorSubText) {
       return;
     }
 
-    this.removeIndicator(line.id, true);
+    const styleData = this.removeIndicator(line.id, true);
 
     var indicator = this._createIndicator(
       indicatorData.lineGroup,
       line.indicatorType,
       line.indicatorText,
-      line.indicatorSubText
+      line.indicatorSubText,
+      styleData
     );
 
     this._layer.add(indicator);
@@ -349,18 +366,51 @@ define([
     this.batchDraw();
   };
 
+  LineIndicator.prototype._getStyleData = function(konvaItem) {
+    if (!konvaItem) {
+      return {};
+    }
+
+    var styleData = {};
+    const name = konvaItem.name();
+
+    if (name) {
+      styleData[name] = {
+        fill: konvaItem.fill()
+      };
+    }
+
+    if (typeof konvaItem.getChildren === 'function') {
+      const children = konvaItem.getChildren();
+
+      if (children && children.length > 0) {
+        children.forEach(function(child) {
+          styleData = Object.assign(styleData, this._getStyleData(child));
+        }.bind(this));
+      }
+    }
+
+    return styleData;
+  };
+
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
+    var styleData = {};
+
     if (this._indicators[lineId]) {
-      if (this._indicators[lineId].indicator) {
-        this._indicators[lineId].indicator.destroy();
-      }
+      const indicator = this._indicators[lineId].indicator;
+
       if (!keepInList) {
         delete this._indicators[lineId];
       }
       else {
         this._indicators[lineId].indicator = null;
+        styleData = this._getStyleData(indicator);
+      }
+      if (indicator) {
+        indicator.destroy();
       }
     }
+    return styleData;
   };
 
   LineIndicator.prototype.refreshIndicator = function(lineId) {
@@ -423,7 +473,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) {
@@ -343,6 +355,15 @@ define([
   ModeLayer.prototype._onMouseMoveInCutMode = function() {
     var mousePosition = this._stage.getPointerPosition();
 
+    if (!mousePosition) {
+      return;
+    }
+
+    // In cut mode, cutting can replace Konva nodes under the pointer.
+    // Konva doesn't always emit enter/leave reliably across those updates,
+    // so keep the hovered element in sync as the mouse moves.
+    this._syncHoveredElementFromPointer();
+
     mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
 
     var cuttingPosition = mousePosition;
@@ -363,13 +384,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,16 +435,55 @@ 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) {
+          // Ensure the view state matches what is actually under the pointer.
+          this._view.setHoveredElement(sourceGroup);
+
+          if (!sourceGroup.isHovered()) {
+            sourceGroup.startHover();
+          }
+        }
+
+        return;
       }
+
+      node = node.getParent ? node.getParent() : null;
     }
+
+    // Pointer isn't over a source; clear any stale hovered element.
+    this._view.setHoveredElement(null);
   };
 
   ModeLayer.prototype.setMode = function(mode) {
@@ -498,7 +558,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();
     }
   };