@checksub_team/peaks_timeline 1.8.3 → 1.9.1

package/src/sources-layer.js

@@ -320,6 +320,95 @@ define([
     }
   };
 
+  SourcesLayer.prototype.onSourcesGroupDragStart = function(element) {
+    this._initialFrameOffset = this._view.getFrameOffset();
+    this._mouseDownX = this._view.getPointerPosition().x;
+    this._selectedElements = {};
+
+    const draggedElementId = element.currentTarget.attrs.sourceId;
+    const shouldDragSelectedElements = Object.keys(this._view.getSelectedElements()).includes(
+      draggedElementId
+    );
+
+    this._nonSelectedElement = shouldDragSelectedElements ?
+      null :
+      [this._sourcesGroup[draggedElementId].getSource()];
+  };
+
+  SourcesLayer.prototype.onSourcesGroupDragEnd = function() {
+    const updatedSources = (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).map(
+      function(source) {
+        const sourceGroup = this._sourcesGroup[source.id];
+
+        if (sourceGroup) {
+          sourceGroup.prepareDragEnd();
+        }
+
+        return source;
+      }.bind(this)
+    );
+
+    this._view.drawSourcesLayer();
+    this._view.updateTimelineLength();
+
+    this._selectedElements = {};
+
+    this._peaks.emit('sources.updated', updatedSources);
+  };
+
+  SourcesLayer.prototype.onSourcesGroupDrag = function(draggedElement) {
+    this._view.updateWithAutoScroll(this._updateSourcesGroup.bind(this));
+
+    return {
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
+    };
+  };
+
+  SourcesLayer.prototype._updateSourcesGroup = function() {
+    var mousePos = Math.min(
+      this._view.getWidth() - this._peaks.options.autoScrollThreshold * this._view.getWidth(),
+      Math.max(
+        0,
+        this._view.getPointerPosition().x
+      )
+    );
+
+    const diff = mousePos - this._mouseDownX;
+    const currentFrameOffset = this._view.getFrameOffset();
+    const mousePosY = this._view.getPointerPosition().y;
+    var newEnd = 0;
+    var shouldRedraw = false;
+
+    (this._nonSelectedElement || Object.values(this._view.getSelectedElements())).forEach(function(source) {
+      if (!this._selectedElements[source.id]) {
+        this._selectedElements[source.id] = {
+          startX: this._view.timeToPixels(source.startTime),
+          endX: this._view.timeToPixels(source.endTime)
+        };
+      }
+
+      const { startX, endX } = this._selectedElements[source.id];
+
+      newEnd = Math.max(newEnd, source.endTime);
+
+      shouldRedraw = this.updateSource(
+        source,
+        startX + diff + (currentFrameOffset - this._initialFrameOffset),
+        endX + diff + (currentFrameOffset - this._initialFrameOffset),
+        mousePosY
+      ) || shouldRedraw;
+    }.bind(this));
+
+    if (shouldRedraw) {
+      this.draw();
+    }
+
+    this._view.setTimelineLength(
+      this._view.timeToPixels(newEnd) + this._view.getWidth()
+    );
+  };
+
   SourcesLayer.prototype.findSources = function(startTime, endTime) {
     var sources = this._peaks.sources.find(startTime, endTime);
     var positions = this._lines.getVisibleLines();
@@ -357,8 +446,9 @@ define([
         newXs.updateWidth
       );
 
-      this.draw();
+      return true;
     }
+    return false;
   };
 
   SourcesLayer.prototype.manageVerticalPosition = function(source, newY) {
@@ -410,8 +500,7 @@ define([
       if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
         var source = this._sourcesGroup[sourceId].getSource();
 
-        if (!this._isSourceVisible(source, startTime, endTime)
-        && !this._sourcesGroup[sourceId].isDragged()) {
+        if (!this._isSourceVisible(source, startTime, endTime)) {
           this._removeSource(source);
           count++;
         }
@@ -516,6 +605,10 @@ define([
     return this._sourcesGroup[sourceId];
   };
 
+  SourcesLayer.prototype.getSourcesOnLineAfter = function(lineId, time) {
+    return this._lines.getSourcesOnLineAfter(lineId, time);
+  };
+
   SourcesLayer.prototype._sourcesOverlapped = function(source1, source2) {
     var endsLater = (source1.startTime < source2.startTime)
                     && (source1.endTime > source2.startTime);
@@ -575,9 +668,11 @@ define([
     this._peaks.off('sources.destroy', this._onSourcesDestroy);
     this._peaks.off('sources.show', this._onSourcesShow);
     this._peaks.off('sources.hide', this._onSourcesHide);
+    this._peaks.off('source.update', this._onSourceUpdate);
     this._peaks.off('data.retrieved', this._onDataRetrieved);
     this._peaks.off('sources.refresh', this._onSourcesRefresh);
     this._peaks.off('segments.show', this._onSegmentsShow);
+    this._peaks.off('options.set.line_height', this._onOptionsLineHeightChange);
     this._peaks.off('source.setIndicators', this.setIndicators);
   };
 

package/src/timeline-zoomview.js

@@ -241,6 +241,10 @@ define([
       // prevent parent scrolling
       e.evt.preventDefault();
 
+      if (self._mouseDragHandler.isDragging()) {
+        return;
+      }
+
       if (self._peaks.keyboardHandler.isCtrlCmdPressed()) {
         if (e.evt.deltaY > 0) {
           self.setZoom(
@@ -288,38 +292,50 @@ define([
         }
       }
     });
+
+    window.addEventListener('mouseup', this._mouseUp.bind(this), false);
+    window.addEventListener('touchend', this._mouseUp.bind(this), false);
+    window.addEventListener('blur', this._mouseUp.bind(this), false);
   }
 
-  TimelineZoomView.prototype.updateWithAutoScroll = function(obj, updateInInterval,
+  TimelineZoomView.prototype._mouseUp = function() {
+    this.clearScrollingInterval();
+  };
+
+  TimelineZoomView.prototype.getSelectedElements = function() {
+    return this._modeLayer.getSelectedElements();
+  };
+
+  TimelineZoomView.prototype.updateWithAutoScroll = function(updateInInterval,
     updateOutInterval) {
     var self = this;
     var posX = this.getPointerPosition().x;
     var threshold = Math.round(this._peaks.options.autoScrollThreshold * this.getWidth());
 
-    obj._limited = 0;
+    this._limited = 0;
 
     if (posX < threshold) {
-      obj._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
+      this._limited = Math.round(-30 * Math.min(1, (threshold - posX) / threshold));
     }
     else if (posX > this.getWidth() - threshold) {
-      obj._limited = Math.round(
+      this._limited = Math.round(
         30 * Math.min(1, (posX - (this.getWidth() - threshold)) / threshold)
       );
     }
 
-    if (obj._limited && self.getFrameOffset() > 0 || obj._limited > 0) {
-      if (!obj._scrollingInterval) {
-        obj._scrollingInterval = setInterval(
+    if (this._limited && self.getFrameOffset() > 0 || this._limited > 0) {
+      if (!this._scrollingInterval) {
+        this._scrollingInterval = setInterval(
           function() {
-            var newOffset = self.getFrameOffset() + obj._limited;
+            var newOffset = self.getFrameOffset() + self._limited;
 
             if (newOffset < 0) {
               self.updateTimeline(0, null, false);
-              clearInterval(obj._scrollingInterval);
-              obj._scrollingInterval = null;
+              clearInterval(self._scrollingInterval);
+              self._scrollingInterval = null;
             }
             else {
-              self.updateTimeline(self.getFrameOffset() + obj._limited, null, false);
+              self.updateTimeline(self.getFrameOffset() + self._limited, null, false);
             }
 
             updateInInterval();
@@ -329,10 +345,7 @@ define([
       }
     }
     else {
-      if (obj._scrollingInterval) {
-        clearInterval(obj._scrollingInterval);
-        obj._scrollingInterval = null;
-      }
+      this.clearScrollingInterval();
 
       if (updateOutInterval) {
         updateOutInterval();
@@ -341,11 +354,13 @@ define([
         updateInInterval();
       }
     }
+  };
 
-    return {
-      x: obj.absolutePosition().x,
-      y: obj.absolutePosition().y
-    };
+  TimelineZoomView.prototype.clearScrollingInterval = function() {
+    if (this._scrollingInterval) {
+      clearInterval(this._scrollingInterval);
+      this._scrollingInterval = null;
+    }
   };
 
   TimelineZoomView.prototype.getCurrentMode = function() {
@@ -365,16 +380,28 @@ define([
     this._sourcesLayer.draw();
   };
 
+  TimelineZoomView.prototype.getSelectedElements = function() {
+    return this._modeLayer.getSelectedElements();
+  };
+
   TimelineZoomView.prototype.selectSourceById = function(sourceId) {
-    var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
+    const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
 
     if (sourceGroup) {
-      this._modeLayer.selectElement(sourceGroup, false);
+      this._modeLayer.selectElements([sourceGroup.getSource()], false);
+    }
+  };
+
+  TimelineZoomView.prototype.selectSourcesOnLineAfter = function(lineId, time) {
+    const sources = this._sourcesLayer.getSourcesOnLineAfter(lineId, time);
+
+    if (sources) {
+      this._modeLayer.selectElements(sources, false);
     }
   };
 
-  TimelineZoomView.prototype.deselectElement = function() {
-    this._modeLayer.deselectElement(false);
+  TimelineZoomView.prototype.deselectAll = function() {
+    this._modeLayer.deselectAll(false);
   };
 
   TimelineZoomView.prototype.isListening = function() {