@checksub_team/peaks_timeline 1.8.3 → 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.
    *

package/src/source-group.js

@@ -58,16 +58,16 @@ define([
 
     this._group = new Konva.Group({
       x: this._x,
+      sourceId: this._source.id,
       draggable: this._source.draggable,
       dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
+        return self._layer.onSourcesGroupDrag(this);
       }
     });
 
-    this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
+    this._group.on('dragstart', this._layer.onSourcesGroupDragStart.bind(this._layer));
+    this._group.on('dragend', this._layer.onSourcesGroupDragEnd.bind(this._layer));
+
     this._group.on('mouseover', function() {
       self._view.setHoveredElement(self);
       if (self._view.getCurrentMode() === 'cut') {
@@ -82,7 +82,6 @@ define([
         self.toggleResizing(true);
       }
     });
-    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
 
     this._group.add(new Konva.Group());
 
@@ -99,6 +98,8 @@ define([
 
     this.setWrapping(source.wrapped);
 
+    this._setSelected();
+
     this._indicatorsGroup = new Konva.Group();
     this._group.add(this._indicatorsGroup);
 
@@ -123,78 +124,25 @@ define([
   //   });
   // };
 
-  SourceGroup.prototype._onSourceGroupDragStart = function() {
-    this._dragged = true;
-    this._mouseDownX = this._view.getPointerPosition().x;
-    this._initialStartTime = this._source.startTime;
-    this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
-    this._initialEndTime = this._source.endTime;
-    this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
-    this._initialFrameOffset = this._view.getFrameOffset();
-  };
-
-  SourceGroup.prototype._onSourceGroupDragEnd = function() {
+  SourceGroup.prototype.prepareDragEnd = function() {
     var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
 
     this._leftHandle.width(handleWidth);
     this._rightHandle.width(handleWidth);
     this._rightHandle.x(this._width - handleWidth);
-
-    this._view.drawSourcesLayer();
-
-    this._dragged = false;
-    this._view.updateTimelineLength();
-
-    this._peaks.emit('sources.updated', [this._source]);
-  };
-
-  SourceGroup.prototype._onSourceGroupDrag = function(draggedElement) {
-    var self = this;
-
-    var pos = this._view.updateWithAutoScroll(
-      draggedElement,
-      function() {
-        var mousePos = Math.min(
-          self._view.getWidth() - self._peaks.options.autoScrollThreshold * self._view.getWidth(),
-          Math.max(
-            0,
-            self._view.getPointerPosition().x
-          )
-        );
-
-        var diff = mousePos - self._mouseDownX;
-
-        self._layer.updateSource(
-          self._source,
-          self._initialStartPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
-          self._initialEndPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
-          self._view.getPointerPosition().y
-        );
-
-        self._view.setTimelineLength(
-          self._view.timeToPixels(self._source.endTime) + self._view.getWidth()
-        );
-      }
-    );
-
-    return {
-      x: pos.x,
-      y: pos.y
-    };
   };
 
   SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
-    var self = this;
-
-    var pos = this._view.updateWithAutoScroll(
-      draggedElement,
+    this._view.updateWithAutoScroll(
       function() {
-        self._layer.updateSource(
-          self._source,
-          leftHandle ? dragPos.x + self._view.getFrameOffset() : null,
-          leftHandle ? null : dragPos.x + draggedElement.width() + self._view.getFrameOffset()
-        );
-      }
+        if (this._layer.updateSource(
+          this._source,
+          leftHandle ? dragPos.x + this._view.getFrameOffset() : null,
+          leftHandle ? null : dragPos.x + draggedElement.width() + this._view.getFrameOffset()
+        )) {
+          this._layer.draw();
+        }
+      }.bind(this)
     );
 
     this._view.setTimelineLength(
@@ -202,8 +150,8 @@ define([
     );
 
     return {
-      x: pos.x,
-      y: pos.y
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
     };
   };
 
@@ -273,13 +221,6 @@ define([
       });
 
       if (this._source.resizable) {
-        this._leftHandle.on('dragend', function() {
-          if (this._scrollingInterval) {
-            clearInterval(this._scrollingInterval);
-            this._scrollingInterval = null;
-          }
-        });
-
         this._leftHandle.on('mouseover', function() {
           self._view.setCursor('ew-resize');
         });
@@ -303,13 +244,6 @@ define([
       });
 
       if (this._source.resizable) {
-        this._rightHandle.on('dragend', function() {
-          if (this._scrollingInterval) {
-            clearInterval(this._scrollingInterval);
-            this._scrollingInterval = null;
-          }
-        });
-
         this._rightHandle.on('mouseover', function() {
           self._view.setCursor('ew-resize');
         });
@@ -419,13 +353,6 @@ define([
     var unwrap = new Konva.Group({
       width: this._width,
       height: this._unwrappedHeight,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      },
       clipFunc: function(ctx) {
         self.drawSourceShape(ctx, null, true);
       }
@@ -438,17 +365,6 @@ define([
       unwrap.on('mouseout', function() {
         self._view.setCursor('default');
       });
-
-      unwrap.on('dragstart', function() {
-        this._scrollInterval = null;
-      });
-
-      unwrap.on('dragend', function() {
-        if (this._scrollingInterval) {
-          clearInterval(this._scrollingInterval);
-          this._scrollingInterval = null;
-        }
-      });
     }
 
     var background = new Konva.Group();
@@ -457,10 +373,6 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -499,13 +411,6 @@ define([
     var wrap = new Konva.Group({
       width: this._width,
       height: this._wrappedHeight,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      },
       clipFunc: function(ctx) {
         self.drawSourceShape(ctx, null, true);
       }
@@ -518,17 +423,6 @@ define([
       wrap.on('mouseout', function() {
         self._view.setCursor('default');
       });
-
-      wrap.on('dragstart', function() {
-        this._scrollInterval = null;
-      });
-
-      wrap.on('dragend', function() {
-        if (this._scrollingInterval) {
-          clearInterval(this._scrollingInterval);
-          this._scrollingInterval = null;
-        }
-      });
     }
 
     var background = new Konva.Group();
@@ -537,10 +431,6 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -851,9 +741,9 @@ define([
     });
   };
 
-  SourceGroup.prototype.setSelected = function(isSelected) {
+  SourceGroup.prototype._setSelected = function() {
     if (this._border) {
-      if (isSelected) {
+      if (this._source._selected) {
         this._border.fill(this._source.selectedColor);
         this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
       }
@@ -870,7 +760,7 @@ define([
         });
 
         if (unwrap_background) {
-          if (isSelected) {
+          if (this._source._selected) {
             unwrap_background.stroke(this._source.selectedColor);
             unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
@@ -887,7 +777,7 @@ define([
         });
 
         if (wrap_background) {
-          if (isSelected) {
+          if (this._source._selected) {
             wrap_background.stroke(this._source.selectedColor);
             wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
@@ -897,8 +787,7 @@ define([
         }
       }
     }
-
-    this._view.drawSourcesLayer();
+    // this.setDraggingBehavior();
   };
 
   SourceGroup.prototype.updatePreviews = function() {
@@ -1032,10 +921,6 @@ define([
     return this._group.visible();
   };
 
-  SourceGroup.prototype.isDragged = function() {
-    return this._dragged;
-  };
-
   SourceGroup.prototype.isCuttable = function() {
     return this._source.cuttable;
   };
@@ -1048,6 +933,10 @@ define([
     this._group.destroy();
   };
 
+  SourceGroup.prototype.getLine = function() {
+    return this._source.position;
+  };
+
   SourceGroup.prototype.createIndicators = function() {
     var newIndicatorsColors = this._source.indicators;
 

package/src/source.js

@@ -354,6 +354,7 @@ define([
     this._binaryHeight = opts.binaryHeight;
     this._indicators = opts.indicators;
     this._minSize = peaks.options.minSourceSize;
+    this._selected = false;
   }
 
   Object.defineProperties(Source.prototype, {
@@ -864,6 +865,11 @@ define([
     this._peaks.emit('source.update', this);
   };
 
+  Source.prototype.setSelected = function(selected) {
+    this._selected = selected;
+    this._peaks.emit('source.update', this);
+  };
+
   /**
    * Returns <code>true</code> if the source overlaps a given time region.
    *