@checksub_team/peaks_timeline 1.4.27 → 1.4.30

package/src/lines.js

@@ -7,10 +7,12 @@
  */
 
 define([
+  './segments-group',
   './line',
   './line-indicator',
   './utils'
 ], function(
+    SegmentsGroup,
     Line,
     LineIndicator,
     Utils) {
@@ -26,6 +28,9 @@ define([
     this._areSourceInteractionsAllowed = true;
     this._areSegmentInteractionsAllowed = true;
 
+    this._segmentsGroups = {};
+    this._segmentsGroupToLine = {};
+
     this._lineId = 0;
 
     this._lineIndicator = new LineIndicator(
@@ -37,8 +42,50 @@ define([
     this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
     this._peaks.on('line.add', this._onLineAdd.bind(this));
     this._peaks.on('line.remove', this._onLineRemove.bind(this));
+
+    this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
+    this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
+    this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
+    this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
+    this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
   }
 
+  Lines.prototype._onSegmentsAdd = function(segments) {
+    var self = this;
+
+    segments.forEach(function(segment) {
+      if (!self._segmentsGroups[segment.line]) {
+        self._segmentsGroups[segment.line] = new SegmentsGroup(self._peaks, self._view, true);
+      }
+
+      self._segmentsGroups[segment.line].onSegmentsAdd([segment]);
+    });
+  };
+
+  Lines.prototype._onSegmentsUpdate = function(segment) {
+    this._segmentsGroups[segment.line].onSegmentsUpdate(segment);
+  };
+
+  Lines.prototype._onSegmentUpdated = function(segment) {
+    this._segmentsGroups[segment.line].onSegmentUpdated();
+  };
+
+  Lines.prototype._onSegmentsRemove = function(segments) {
+    var self = this;
+
+    segments.forEach(function(segment) {
+      self._segmentsGroups[segment.line].onSegmentsRemove([segment]);
+    });
+  };
+
+  Lines.prototype._onSegmentsRemoveAll = function(lineId) {
+    this._segmentsGroups[lineId].onSegmentsRemoveAll();
+
+    if (Utils.objectHasProperty(this._segmentsGroupToLine, lineId)) {
+      this._segmentsGroupToLine[lineId].refreshSegmentsHeight();
+    }
+  };
+
   Lines.prototype._onLineHeightChanged = function(position) {
     this._updateLinesPosition(position);
     this._view.updateTimeline();
@@ -78,12 +125,13 @@ define([
     this._linesBySourceId[sourceGroup.getSource().id] = this._linesByPosition[position];
   };
 
-  Lines.prototype.addSegments = function(segmentsGroup, position) {
+  Lines.prototype.addSegments = function(lineId, position) {
     this._createLine(position);
 
     this._linesByPosition[position].allowInteractions(this._areSegmentInteractionsAllowed);
-    this._linesByPosition[position].addSegments(segmentsGroup);
-    this._segmentsLine = this._linesByPosition[position];
+    this._linesByPosition[position].addSegments(this._segmentsGroups[lineId]);
+
+    this._segmentsGroupToLine[lineId] = this._linesByPosition[position];
 
     this._setInteractions(position);
 
@@ -130,6 +178,10 @@ define([
     return positions;
   };
 
+  Lines.prototype.getSegmentsGroups = function() {
+    return this._segmentsGroups;
+  };
+
   Lines.prototype.addToLayer = function(layer) {
     for (var position in this._linesByPosition) {
       if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -302,8 +354,10 @@ define([
   };
 
   Lines.prototype.updateSegments = function(frameStartTime, frameEndTime) {
-    if (this._segmentsLine) {
-      this._segmentsLine.updateSegments(frameStartTime, frameEndTime);
+    for (var lineId in this._segmentsGroups) {
+      if (Utils.objectHasProperty(this._segmentsGroups, lineId)) {
+        this._segmentsGroups[lineId].updateSegments(frameStartTime, frameEndTime);
+      }
     }
   };
 

package/src/main.js

@@ -596,8 +596,18 @@ define([
     this.sources.hideById(sourceId);
   };
 
-  Peaks.prototype.showSegments = function(position) {
-    this.segments.addSegmentsToPosition(position);
+  Peaks.prototype.showSegments = function(lineId, position) {
+    this.segments.addSegmentsToPosition(lineId, position);
+  };
+
+  /**
+   * Destroy a segment from the {@link Peaks} instance.
+   *
+   * @param {String} segmentId
+   */
+
+   Peaks.prototype.destroySegment = function(segmentId) {
+    this.segments.removeById(segmentId);
   };
 
   Peaks.prototype.setDefaultMode = function() {
@@ -635,7 +645,7 @@ define([
 
   Peaks.prototype.deselectSource = function() {
     return this.view
-            .deselectSource();
+            .deselectElement();
   };
 
   Peaks.prototype._addWindowResizeHandler = function() {

package/src/mode-layer.js

@@ -61,22 +61,32 @@ define([
     stage.add(this._layer);
   };
 
-  ModeLayer.prototype.selectSourceGroup = function(sourceGroup, notify) {
-    this.deselectSourceGroup();
-    if (sourceGroup) {
-      this._selectedElement = sourceGroup;
+  ModeLayer.prototype.selectElement = function(element, notify) {
+    this.deselectElement(notify);
+    if (element) {
+      this._selectedElement = element;
       this._selectedElement.setSelected(true);
       if (notify) {
-        this._peaks.emit('source.selected', this._selectedElement.getSource());
+        if (element instanceof SourceGroup) {
+          this._peaks.emit('source.selected', this._selectedElement.getSource());
+        }
+        else {
+          this._peaks.emit('segment.selected', this._selectedElement.getSegment());
+        }
       }
     }
   };
 
-  ModeLayer.prototype.deselectSourceGroup = function(notify) {
+  ModeLayer.prototype.deselectElement = function(notify) {
     if (this._selectedElement) {
       this._selectedElement.setSelected(false);
       if (notify) {
-        this._peaks.emit('source.deselected', this._selectedElement.getSource());
+        if (this._selectedElement instanceof SourceGroup) {
+          this._peaks.emit('source.deselected', this._selectedElement.getSource());
+        }
+        else {
+          this._peaks.emit('segment.deselected', this._selectedElement.getSegment());
+        }
       }
       this._selectedElement = null;
     }
@@ -140,16 +150,27 @@ define([
     var hoveredElement = this._view.getHoveredElement();
 
     if (hoveredElement) {
-      this.selectSourceGroup(hoveredElement, true);
+      this.selectElement(hoveredElement, true);
     }
     else {
-      this.deselectSourceGroup(true);
+      this.deselectElement(true);
     }
   };
 
   ModeLayer.prototype._onKeyboardDelete = function() {
     if (this._selectedElement) {
-      this._peaks.destroySource(this._selectedElement.getSource().id);
+      var selectedElement = this._selectedElement;
+
+      this.deselectElement(true);
+
+      if (selectedElement instanceof SourceGroup) {
+        this._peaks.destroySource(selectedElement.getSource().id);
+      }
+      else {
+        if (selectedElement.getSegment().allowDeletion) {
+          this._peaks.destroySegment(selectedElement.getSegment().id);
+        }
+      }
     }
   };
 
@@ -318,7 +339,7 @@ define([
         break;
     }
 
-    this.deselectSourceGroup(true);
+    this.deselectElement(true);
 
     // Set new mode
     switch (mode) {

package/src/playhead-layer.js

@@ -26,10 +26,10 @@ define([
    *   is shown next to the playhead.
    */
 
-  function PlayheadLayer(peaks, view, segmentsGroup, showTime) {
+  function PlayheadLayer(peaks, view, lines, showTime) {
     this._peaks = peaks;
     this._view = view;
-    this._segmentsGroup = segmentsGroup;
+    this._lines = lines;
     this._playheadPixel = 0;
     this._playheadLineAnimation = null;
     this._playheadVisible = false;
@@ -38,8 +38,8 @@ define([
 
     this._playheadLayer = new Konva.Layer();
 
-    this._activeSegment = null;
-    this._lastActiveSegmentId = null;
+    this._activeSegments = {};
+    this._lastActiveSegments = {};
 
     this._createPlayhead(this._playheadColor);
 
@@ -56,22 +56,26 @@ define([
   }
 
   PlayheadLayer.prototype._onSegmentsRemoveAll = function() {
-    this._activeSegment = null;
-    this._lastActiveSegmentId = null;
+    this._activeSegments = {};
+    this._lastActiveSegments = {};
   };
 
   PlayheadLayer.prototype._onSegmentsRemove = function(segments) {
-    if (this._activeSegment || this._lastActiveSegmentId) {
-      var activeSegmentId = this._activeSegment ? this._activeSegment.id : null;
-      var lastActiveSegmentId = this._lastActiveSegmentId ? this._lastActiveSegmentId.id : null;
-
+    if (this._activeSegments || this._lastActiveSegments) {
       for (var id in segments) {
         if (Utils.objectHasProperty(segments, id)) {
+          var activeSegmentId = this._activeSegments[segments[id].line] ?
+            this._activeSegments[segments[id].line].id :
+            null;
+          var lastActiveSegmentId = this._lastActiveSegments[segments[id].line] ?
+            this._lastActiveSegments[segments[id].line].id :
+            null;
+
           if (segments[id].id === activeSegmentId) {
-            this._activeSegment = null;
+            delete this._activeSegments[segments[id].line];
           }
           if (segments[id].id === lastActiveSegmentId) {
-            this._lastActiveSegmentId = null;
+            delete this._lastActiveSegments[segments[id].line];
           }
         }
       }
@@ -279,21 +283,27 @@ define([
       var playheadPositionDiff = this._playheadGroup.x() - playheadX;
 
       if (playheadPositionDiff) {
-        var newActiveSegment = this._segmentsGroup.getActiveSegment(
-          this._view.pixelsToTime(playheadX + frameOffset),
-          null,
-          true
-        );
+        var segmentsGroup = this._lines.getSegmentsGroups();
+
+        for (var lineId in segmentsGroup) {
+          if (Utils.objectHasProperty(segmentsGroup, lineId)) {
+            var newActiveSegment = segmentsGroup[lineId].getActiveSegment(
+              this._view.pixelsToTime(playheadX + frameOffset),
+              null,
+              true
+            );
 
-        if (newActiveSegment !== this._activeSegment) {
-          if (this._activeSegment) {
-            this._peaks.emit('segments.exit', this._activeSegment);
-            this._activeSegment = null;
-          }
-          if (newActiveSegment) {
-            this._peaks.emit('segments.enter', newActiveSegment);
-            this._activeSegment = newActiveSegment;
-            this._lastActiveSegment = this._activeSegment;
+            if (newActiveSegment !== this._activeSegments[lineId]) {
+              if (this._activeSegments[lineId]) {
+                this._peaks.emit('segments.exit', this._activeSegments[lineId]);
+                delete this._activeSegments[lineId];
+              }
+              if (newActiveSegment) {
+                this._peaks.emit('segments.enter', newActiveSegment);
+                this._activeSegments[lineId] = newActiveSegment;
+                this._lastActiveSegments[lineId] = this._activeSegments[lineId];
+              }
+            }
           }
         }
       }

package/src/segment-shape.js

@@ -39,6 +39,7 @@ define([
     this._startMarker   = null;
     this._endMarker     = null;
     this._rectangle     = null;
+    this._isSelected    = false;
 
     this._segmentHeight = this._peaks.options.segmentHeight;
 
@@ -244,7 +245,9 @@ define([
   SegmentShape.prototype._onMouseEnter = function() {
     this._view.setCursor('pointer');
 
-    this._rectangle.fill(this._segment.selectedColor + Math.round(
+    this._view.setHoveredElement(this);
+
+    this._rectangle.fill(this._segment.activeColor + Math.round(
       this._segment.opacity * 255
     ).toString(16));
 
@@ -256,6 +259,8 @@ define([
   SegmentShape.prototype._onMouseLeave = function() {
     this._view.setCursor('default');
 
+    this._view.setHoveredElement(null);
+
     this._rectangle.fill(this._segment.color + Math.round(
       this._segment.opacity * 255
     ).toString(16));
@@ -315,6 +320,10 @@ define([
     this._peaks.emit('segments.dragend', this._segment, startMarker);
   };
 
+  SegmentShape.prototype.setSelected = function(isSelected) {
+    this._isSelected = isSelected;
+  };
+
   SegmentShape.prototype.fitToView = function() {
     if (this._startMarker) {
       this._startMarker.fitToView();

package/src/segment.js

@@ -50,6 +50,10 @@ define([
     else if (!Utils.isString(options.labelText)) {
       throw new TypeError('peaks.segments.' + context + ': labelText must be a string');
     }
+
+    if (!Utils.isInteger(options.line)) {
+      throw new TypeError('peaks.segments.' + context + ': line must be an integer');
+    }
   }
 
   /**
@@ -70,7 +74,7 @@ define([
    */
 
   function Segment(peaks, id, startTime, endTime, labelText, color,
-    textColor, handleTextColor, opacity, editable) {
+    textColor, handleTextColor, opacity, editable, allowDeletion, line) {
     var opts = {
       startTime:       startTime,
       endTime:         endTime,
@@ -79,7 +83,9 @@ define([
       textColor:       textColor,
       handleTextColor: handleTextColor,
       opacity:         opacity,
-      editable:        editable
+      editable:        editable,
+      allowDeletion:   allowDeletion,
+      line:            line
     };
 
     validateSegment(peaks, opts, 'add()');
@@ -90,11 +96,13 @@ define([
     this._endTime         = opts.endTime;
     this._labelText       = opts.labelText;
     this._color           = opts.color;
-    this._selectedColor   = Utils.shadeColor(color, 20);
+    this._activeColor     = Utils.shadeColor(color, 20);
     this._textColor       = opts.textColor;
     this._handleTextColor = opts.handleTextColor;
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
+    this._allowDeletion   = opts.allowDeletion;
+    this._line            = opts.line;
     this._minSize         = peaks.options.minSegmentSize;
   }
 
@@ -137,10 +145,10 @@ define([
         return this._color;
       }
     },
-    selectedColor: {
+    activeColor: {
       enumerable: true,
       get: function() {
-        return this._selectedColor;
+        return this._activeColor;
       }
     },
     textColor: {
@@ -167,6 +175,18 @@ define([
         return this._editable;
       }
     },
+    allowDeletion: {
+      enumerable: true,
+      get: function() {
+        return this._allowDeletion;
+      }
+    },
+    line: {
+      enumerable: true,
+      get: function() {
+        return this._line;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -184,7 +204,9 @@ define([
       textColor:       this.textColor,
       handleTextColor: this.handleTextColor,
       opacity:         this.opacity,
-      editable:        this.editable
+      editable:        this.editable,
+      allowDeletion:   this.allowDeletion,
+      line:            this.line
     };
 
     Utils.extend(opts, options);
@@ -199,6 +221,8 @@ define([
     this._handleTextColor = opts.handleTextColor;
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
+    this._allowDeletion   = opts.allowDeletion;
+    this._line            = opts.line;
 
     this._peaks.emit('segment.updated', this);
   };

package/src/segments-group.js

@@ -44,11 +44,6 @@ define([
 
     this._isMagnetized = false;
 
-    this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
-    this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
-    this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
-    this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
-    this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
     this._peaks.on('segments.setMagnetizing', this.setMagnetizing.bind(this));
   }
 
@@ -112,7 +107,7 @@ define([
     return activeSegment;
   };
 
-  SegmentsGroup.prototype._onSegmentsUpdate = function(segment) {
+  SegmentsGroup.prototype.onSegmentsUpdate = function(segment) {
     if (this._segments[segment.id]) {
       var redraw = false;
       var segmentShape = this._segmentShapes[segment.id];
@@ -140,12 +135,12 @@ define([
     }
   };
 
-  SegmentsGroup.prototype._onSegmentUpdated = function() {
+  SegmentsGroup.prototype.onSegmentUpdated = function() {
     this._peaks.emit('segments.updated', this._updatedSegments);
     this._updatedSegments = [];
   };
 
-  SegmentsGroup.prototype._onSegmentsAdd = function(segments) {
+  SegmentsGroup.prototype.onSegmentsAdd = function(segments) {
     var self = this;
 
     var frameOffset = self._view.getFrameOffset();
@@ -161,7 +156,7 @@ define([
     self.updateSegments(frameStartTime, frameEndTime);
   };
 
-  SegmentsGroup.prototype._onSegmentsRemove = function(segments) {
+  SegmentsGroup.prototype.onSegmentsRemove = function(segments) {
     var self = this;
 
     segments.forEach(function(segment) {
@@ -178,7 +173,7 @@ define([
     this._draw();
   };
 
-  SegmentsGroup.prototype._onSegmentsRemoveAll = function() {
+  SegmentsGroup.prototype.onSegmentsRemoveAll = function() {
     this._group.removeChildren();
     this._firstSegmentId = null;
     this._segments       = {};
@@ -313,7 +308,7 @@ define([
 
   SegmentsGroup.prototype.updateSegments = function(startTime, endTime) {
     // Update segments in visible time range.
-    var segments = this._peaks.segments.find(startTime, endTime);
+    var segments = this.find(startTime, endTime);
 
     var count = segments.length;
 
@@ -327,6 +322,31 @@ define([
     }
   };
 
+  SegmentsGroup.prototype.find = function(startTime, endTime) {
+    var currentSegment = null;
+    var visibleSegments = [];
+
+    if (this._firstSegmentId) {
+      do {
+        if (!currentSegment) {
+          currentSegment = this._segments[this._firstSegmentId];
+        }
+        else {
+          currentSegment = this._segments[currentSegment.nextSegmentId];
+        }
+
+        if (currentSegment.segment.isVisible(startTime, endTime)) {
+          visibleSegments.push(currentSegment.segment);
+        }
+        else if (visibleSegments.length) {
+          break;
+        }
+      } while (currentSegment.nextSegmentId);
+    }
+
+    return visibleSegments;
+  };
+
   SegmentsGroup.prototype._draw = function() {
     this._view.drawSourcesLayer();
   };
@@ -352,8 +372,13 @@ define([
       }
     }
 
-    if (!currentHeight && this._segments) {
-      currentHeight = this._peaks.options.segmentHeight;
+    if (!currentHeight) {
+      if (Object.keys(this._segments).length > 0) {
+        currentHeight = this._peaks.options.segmentHeight;
+      }
+      else {
+        currentHeight = this._peaks.options.emptyLineHeight;
+      }
     }
 
     return currentHeight;
@@ -693,11 +718,7 @@ define([
   };
 
   SegmentsGroup.prototype.destroy = function() {
-    this._peaks.off('segment.updated', this._onSegmentsUpdate);
-    this._peaks.off('segments.add', this._onSegmentsAdd);
-    this._peaks.off('segments.remove', this._onSegmentsRemove);
-    this._peaks.off('segments.remove_all', this._onSegmentsRemoveAll);
-    this._peaks.off('segments.dragged', this._onSegmentsDragged);
+    this._peaks.off('segments.setMagnetizing', this.setMagnetizing);
   };
 
   SegmentsGroup.prototype.fitToView = function() {

package/src/sources-layer.js

@@ -8,7 +8,6 @@
 
 define([
   './source-group',
-  './segments-group',
   './lines',
   './data-retriever',
   './utils',
@@ -16,7 +15,6 @@ define([
   'konva'
 ], function(
   SourceGroup,
-  SegmentsGroup,
   Lines,
   DataRetriever,
   Utils,
@@ -45,8 +43,6 @@ define([
     this._lines         = new Lines(peaks, view, this);
     this._lines.addToLayer(this);
 
-    this._segmentsGroup = new SegmentsGroup(peaks, view, true);
-
     this._loadedData = {};
 
     this._debouncedRescale = new Invoker().debounce(
@@ -72,8 +68,8 @@ define([
     this._loadedData[id] = data;
   };
 
-  SourcesLayer.prototype.getSegmentsGroup = function() {
-    return this._segmentsGroup;
+  SourcesLayer.prototype.getSegmentsGroups = function() {
+    return this._lines.getSegmentsGroups();
   };
 
   SourcesLayer.prototype.add = function(element) {
@@ -242,8 +238,8 @@ define([
     this._layer.draw();
   };
 
-  SourcesLayer.prototype._onSegmentsShow = function(position) {
-    this._lines.addSegments(this._segmentsGroup, position);
+  SourcesLayer.prototype._onSegmentsShow = function(lineId, position) {
+    this._lines.addSegments(lineId, position);
     this._view.updateTimelineLength();
     this._layer.draw();
   };

package/src/timeline-segments.js

@@ -136,7 +136,9 @@ define([
       options.textColor || '#000000',
       options.handleTextColor || '#000000',
       options.opacity || 1,
-      true // editable
+      true, // editable
+      options.allowDeletion || false,
+      options.line
     );
 
     return segment;
@@ -156,8 +158,8 @@ define([
    * Add segments to the given line so they can be displayed.
    */
 
-  TimelineSegments.prototype.addSegmentsToPosition = function(position) {
-    this._peaks.emit('segments.show', position);
+  TimelineSegments.prototype.addSegmentsToPosition = function(lineId, position) {
+    this._peaks.emit('segments.show', lineId, position);
   };
 
   /**
@@ -379,10 +381,13 @@ define([
    * <code>segments.remove_all</code> event.
    */
 
-  TimelineSegments.prototype.removeAll = function() {
-    this._segments = [];
-    this._segmentsById = {};
-    this._peaks.emit('segments.remove_all');
+  TimelineSegments.prototype.removeAll = function(lineId) {
+    var indexes = this._findSegment(function(segment) {
+      return segment.line === lineId;
+    });
+
+    this._removeIndexes(indexes);
+    this._peaks.emit('segments.remove_all', lineId);
   };
 
   return TimelineSegments;

package/src/timeline-zoomview.js

@@ -131,7 +131,7 @@ define([
     self._playheadLayer = new PlayheadLayer(
       peaks,
       self,
-      self._sourcesLayer.getSegmentsGroup(),
+      self._sourcesLayer,
       self._options.showPlayheadTime
     );
 
@@ -365,12 +365,12 @@ define([
     var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
 
     if (sourceGroup) {
-      this._modeLayer.selectSourceGroup(sourceGroup, false);
+      this._modeLayer.selectElement(sourceGroup, false);
     }
   };
 
-  TimelineZoomView.prototype.deselectSource = function() {
-    this._modeLayer.deselectSourceGroup(false);
+  TimelineZoomView.prototype.deselectElement = function() {
+    this._modeLayer.deselectElement(false);
   };
 
   TimelineZoomView.prototype.isListening = function() {