@checksub_team/peaks_timeline 1.8.2 → 1.9.1

package/src/line.js

@@ -655,6 +655,28 @@ define([
   //   }
   // };
 
+  Line.prototype.getSourcesAfter = function(time) {
+    const sources = [];
+    var currentId = this._firstSourceId;
+
+    while (currentId) {
+      var lineSource = this._sources[currentId];
+
+      if (lineSource.source.startTime >= time) {
+        while (currentId) {
+          lineSource = this._sources[currentId];
+
+          sources.push(lineSource.source);
+          currentId = lineSource.nextSourceId;
+        }
+        break;
+      }
+      currentId = lineSource.nextSourceId;
+    }
+
+    return sources;
+  };
+
   Line.prototype.updatePosition = function(pos) {
     for (var sourceId in this._sources) {
       if (Utils.objectHasProperty(this._sources, sourceId)) {

package/src/lines.js

@@ -185,6 +185,10 @@ define([
     return positions;
   };
 
+  Lines.prototype.getSourcesOnLineAfter = function(lineId, time) {
+    return this._linesByPosition[lineId].getSourcesAfter(time);
+  };
+
   Lines.prototype.getSegmentsGroups = function() {
     return this._segmentsGroups;
   };

package/src/main.js

@@ -715,14 +715,24 @@ define([
             .allowInteractions(forSources, forSegments);
   };
 
+  Peaks.prototype.getSelectedElements = function() {
+    return this.view
+            .getSelectedElements();
+  };
+
   Peaks.prototype.selectSourceById = function(sourceId) {
     return this.view
             .selectSourceById(sourceId);
   };
 
-  Peaks.prototype.deselectSource = function() {
+  Peaks.prototype.selectSourcesOnLineAfter = function(lineId, time) {
+    return this.view
+            .selectSourcesOnLineAfter(lineId, time);
+  };
+
+  Peaks.prototype.deselectAll = function() {
     return this.view
-            .deselectElement();
+            .deselectAll();
   };
 
   Peaks.prototype._addWindowResizeHandler = function() {

package/src/mode-layer.js

@@ -8,9 +8,10 @@
 
 define([
   './utils',
+  './source',
   './source-group',
   'konva'
-  ], function(Utils, SourceGroup, Konva) {
+  ], function(Utils, Source, SourceGroup, Konva) {
   'use strict';
 
   var TIME_X_OFFSET = 20;
@@ -34,6 +35,9 @@ define([
     this._playheadLayer = playheadLayer;
     this._stage = stage;
 
+    this._selectedElements = {};
+    this._currentLine = null;
+
     this._layer = new Konva.Layer({
       listening: this._mode !== 'default'
     });
@@ -63,37 +67,71 @@ define([
     stage.add(this._layer);
   };
 
-  ModeLayer.prototype.selectElement = function(element, notify) {
-    this.deselectElement(notify);
-    if (element) {
-      this._selectedElement = element;
-      this._selectedElement.setSelected(true);
+  ModeLayer.prototype.selectElements = function(elements, notify) {
+    const sources = [];
+    const segments = [];
+    const self = this;
+
+    this.deselectAll(true);
+
+    elements.forEach(function(element) {
+      self._selectedElements[element.id] = element;
+      element.setSelected(true);
       if (notify) {
-        if (element instanceof SourceGroup) {
-          this._peaks.emit('source.selected', this._selectedElement.getSource());
+        if (element instanceof Source) {
+          sources.push(element);
         }
         else {
-          this._peaks.emit('segment.selected', this._selectedElement.getSegment());
+          segments.push(element);
         }
       }
+    });
+
+    if (notify) {
+      if (sources.length) {
+        this._peaks.emit('sources.selected', sources);
+      }
+      if (segments.length) {
+        this._peaks.emit('segments.selected', segments);
+      }
     }
   };
 
-  ModeLayer.prototype.deselectElement = function(notify) {
-    if (this._selectedElement) {
-      this._selectedElement.setSelected(false);
-      if (notify) {
-        if (this._selectedElement instanceof SourceGroup) {
-          this._peaks.emit('source.deselected', this._selectedElement.getSource());
-        }
-        else {
-          this._peaks.emit('segment.deselected', this._selectedElement.getSegment());
+  ModeLayer.prototype.deselectAll = function(notify) {
+    const sources = [];
+    const segments = [];
+
+    for (var id in this._selectedElements) {
+      if (Utils.objectHasProperty(this._selectedElements, id)) {
+        const element = this._selectedElements[id];
+
+        element.setSelected(false);
+        if (notify) {
+          if (element instanceof Source) {
+            sources.push(element);
+          }
+          else {
+            segments.push(element);
+          }
         }
+        delete this._selectedElements[id];
+      }
+    }
+
+    if (notify) {
+      if (sources.length) {
+        this._peaks.emit('sources.deselected', sources);
+      }
+      if (segments.length) {
+        this._peaks.emit('segments.deselected', segments);
       }
-      this._selectedElement = null;
     }
   };
 
+  ModeLayer.prototype.getSelectedElements = function() {
+    return this._selectedElements;
+  };
+
   ModeLayer.prototype._prepareDefaultMode = function() {
     this._selectedElement = null;
   };
@@ -149,30 +187,39 @@ define([
   };
 
   ModeLayer.prototype._onMouseClickInDefaultMode = function() {
-    var hoveredElement = this._view.getHoveredElement();
+    const hoveredKonvaElement = this._view.getHoveredElement();
 
-    if (hoveredElement) {
-      this.selectElement(hoveredElement, true);
+    if (hoveredKonvaElement) {
+      if (hoveredKonvaElement instanceof SourceGroup) {
+        this.selectElements([hoveredKonvaElement.getSource()], true);
+      }
+      else {
+        this.selectElements([hoveredKonvaElement.getSegment()], true);
+      }
     }
     else {
-      this.deselectElement(true);
+      this.deselectAll(true);
+      this._view.drawSourcesLayer();  // Redraw sources layer to remove selection
     }
   };
 
   ModeLayer.prototype._onKeyboardDelete = function() {
-    if (this._selectedElement) {
-      var selectedElement = this._selectedElement;
+    const selectedElements = Object.values(this._selectedElements);
+
+    // We allow deletion if there is ONLY 1 element selected
+    if (selectedElements.length) {
+      var selectedElement = selectedElements[0];
 
-      this.deselectElement(true);
+      this.deselectAll(true);
 
-      if (selectedElement instanceof SourceGroup) {
+      if (selectedElement instanceof Source) {
         if (selectedElement.isDeletable()) {
-          this._peaks.destroySource(selectedElement.getSource().id);
+          this._peaks.destroySource(selectedElement.id);
         }
       }
       else {
         if (selectedElement.getSegment().allowDeletion) {
-          this._peaks.destroySegment(selectedElement.getSegment().id);
+          this._peaks.destroySegment(selectedElement.id);
         }
       }
     }
@@ -379,7 +426,7 @@ define([
         break;
     }
 
-    this.deselectElement(true);
+    this.deselectAll(true);
 
     // Set new mode
     switch (mode) {

package/src/playhead-layer.js

@@ -139,8 +139,7 @@ define([
           )
         );
 
-        var autoPos = self._view.updateWithAutoScroll(
-          this,
+        self._view.updateWithAutoScroll(
           function() {
             time = Math.max(
               0,
@@ -157,8 +156,8 @@ define([
         );
 
         return {
-          x: autoPos.x,
-          y: autoPos.y
+          x: Math.max(pos.x, 0),
+          y: 0
         };
       }
     });
@@ -180,7 +179,6 @@ define([
   PlayheadLayer.prototype._onPlayheadDragStart = function() {
     this._view.enableAutoScroll(false);
     this._dragging = true;
-    this._scrollInterval = null;
   };
 
   PlayheadLayer.prototype._onPlayheadDragEnd = function() {

package/src/segment-shape.js

@@ -46,7 +46,6 @@ define([
     this._endMarker     = null;
     this._shapeGroup    = null;
     this._rectangle     = null;
-    this._isSelected    = false;
     this._indicators    = {};
 
     var self = this;
@@ -89,20 +88,7 @@ define([
     this._shapeGroup.add(this._rectangle);
 
     this._shapeGroup.dragBoundFunc(function() {
-      var diff = self._view.getPointerPosition().x - self._mouseDownX;
-
-      self._group.updateSegment(
-        self._segment,
-        self._initialStartPixel + diff, self._initialEndPixel + diff
-      );
-
-      self._startMarker.timeUpdated(self._segment.startTime);
-      self._endMarker.timeUpdated(self._segment.endTime);
-
-      return {
-        x: this.absolutePosition().x,
-        y: this.absolutePosition().y
-      };
+      return self._onShapeGroupDrag(this);
     });
 
     // Set up event handlers to show/hide the segment label text when the user
@@ -138,6 +124,23 @@ define([
     this.createIndicators();
   }
 
+  SegmentShape.prototype._onShapeGroupDrag = function(draggedElement) {
+    const diff = this._view.getPointerPosition().x - this._mouseDownX;
+
+    this._group.updateSegment(
+      this._segment,
+      this._initialStartPixel + diff, this._initialEndPixel + diff
+    );
+
+    this._startMarker.timeUpdated(this._segment.startTime);
+    this._endMarker.timeUpdated(this._segment.endTime);
+
+    return {
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
+    };
+  };
+
   SegmentShape.prototype._cornerRadius = function() {
     return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ?
       this._segment.borderRadius :
@@ -452,10 +455,6 @@ 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

@@ -150,6 +150,7 @@ define([
     this._indicators      = opts.indicators;
     this._minSize         = peaks.options.minSegmentSize;
     this._relativeId      = 0;
+    this._selected        = false;
 
     if (shouldNotifyUpdate) {
       peaks.emit('segments.updated', [this]);
@@ -340,6 +341,11 @@ define([
     this._peaks.emit('segment.updated', this);
   };
 
+  Segment.prototype.setSelected = function(selected) {
+    this._selected = selected;
+    // this._peaks.emit('segment.update', this); // It's currently useless
+  };
+
   /**
    * Returns <code>true</code> if the segment overlaps a given time region.
    *