@checksub_team/peaks_timeline 1.8.2 → 1.9.1

package/src/source-group.js

@@ -21,6 +21,9 @@ define([
   var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
   var SPACING_BETWEEN_PREVIEWS = 1.5;
   var CORNER_RADIUS = 8;
+  var INDICATOR_RADIUS = 4; // px
+  var INDICATORS_MARGIN_LEFT = 8; // px
+  var INDICATORS_MARGIN_TOP = 12; // px
 
   /**
    * Creates a source group for the given source.
@@ -39,6 +42,7 @@ define([
     this._peaks         = peaks;
     this._layer         = layer;
     this._view          = view;
+    this._indicators    = {};
 
     var self = this;
 
@@ -54,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') {
@@ -78,7 +82,6 @@ define([
         self.toggleResizing(true);
       }
     });
-    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
 
     this._group.add(new Konva.Group());
 
@@ -94,6 +97,13 @@ define([
     this._addHandles();
 
     this.setWrapping(source.wrapped);
+
+    this._setSelected();
+
+    this._indicatorsGroup = new Konva.Group();
+    this._group.add(this._indicatorsGroup);
+
+    this.createIndicators();
   }
 
   // SourceGroup.prototype.rescale = function() {
@@ -114,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(
@@ -193,8 +150,8 @@ define([
     );
 
     return {
-      x: pos.x,
-      y: pos.y
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
     };
   };
 
@@ -264,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');
         });
@@ -294,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');
         });
@@ -410,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);
       }
@@ -429,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();
@@ -448,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);
       }
     }));
 
@@ -490,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);
       }
@@ -509,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();
@@ -528,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);
       }
     }));
 
@@ -842,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;
       }
@@ -861,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);
           }
@@ -878,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);
           }
@@ -888,8 +787,7 @@ define([
         }
       }
     }
-
-    this._view.drawSourcesLayer();
+    // this.setDraggingBehavior();
   };
 
   SourceGroup.prototype.updatePreviews = function() {
@@ -1023,10 +921,6 @@ define([
     return this._group.visible();
   };
 
-  SourceGroup.prototype.isDragged = function() {
-    return this._dragged;
-  };
-
   SourceGroup.prototype.isCuttable = function() {
     return this._source.cuttable;
   };
@@ -1039,5 +933,73 @@ define([
     this._group.destroy();
   };
 
+  SourceGroup.prototype.getLine = function() {
+    return this._source.position;
+  };
+
+  SourceGroup.prototype.createIndicators = function() {
+    var newIndicatorsColors = this._source.indicators;
+
+    var oldIndicators = this._indicators;
+    var newIndicators = {};
+
+    if (newIndicatorsColors) {
+      newIndicatorsColors.forEach(function(indicatorColor) {
+        var oldIndicator = oldIndicators[indicatorColor];
+
+        if (oldIndicator) {
+          newIndicators[indicatorColor] = oldIndicator;
+          delete oldIndicators[indicatorColor];
+        }
+        else {
+          newIndicators[indicatorColor] = null;
+        }
+      });
+
+      for (var color in oldIndicators) {
+        if (Utils.objectHasProperty(oldIndicators, color)) {
+          oldIndicators[color].destroy();
+        }
+      }
+    }
+
+    this._indicators = Object.keys(newIndicators)
+      .sort()
+      .reverse()
+      .reduce(function(objEntries, key) {
+        objEntries[key] = newIndicators[key];
+        return objEntries;
+        }, {}
+      );
+
+    this._createIndicators();
+  };
+
+  SourceGroup.prototype._createIndicators = function() {
+    var currentX = 0;
+    var zIndex = 0;
+
+    for (var color in this._indicators) {
+      if (Utils.objectHasProperty(this._indicators, color)) {
+        if (!this._indicators[color]) {
+          this._indicators[color] = new Konva.Circle({
+            radius: INDICATOR_RADIUS,
+            fill: color,
+            strokeEnabled: false
+          });
+          this._indicatorsGroup.add(this._indicators[color]);
+        }
+
+        this._indicators[color].x(currentX);
+        this._indicators[color].zIndex(zIndex);
+        currentX -= INDICATOR_RADIUS;
+        zIndex += 1;
+      }
+    }
+
+    this._indicatorsGroup.offsetX(currentX - INDICATORS_MARGIN_LEFT);
+    this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+  };
+
   return SourceGroup;
 });

package/src/source.js

@@ -246,6 +246,10 @@ define([
     else if (options.wrapping === 'complete') {
       options.wrapped = false;
     }
+
+    if (Utils.isNullOrUndefined(options.indicators)) {
+      options.indicators = [];
+    }
   }
 
   /**
@@ -266,13 +270,14 @@ define([
    * @param {Number} position Position of the source on the timeline.
    *                          Correspond to the index of the line.
    * @param {Boolean} segments If <code>true</code> this source will integrate the segments.
+   * @param {Array<String>} indicators Array containing the colors of all indicators.
    */
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
     borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor,
     textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable,
-    cuttable, deletable, wrapping, previewHeight, binaryHeight) {
+    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators) {
     var opts = {
       title: title,
       url: url,
@@ -305,7 +310,8 @@ define([
       deletable: deletable,
       wrapping: wrapping,
       previewHeight: previewHeight,
-      binaryHeight: binaryHeight
+      binaryHeight: binaryHeight,
+      indicators: indicators
     };
 
     validateSource(peaks, opts, 'add()');
@@ -346,7 +352,9 @@ define([
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
+    this._indicators = opts.indicators;
     this._minSize = peaks.options.minSourceSize;
+    this._selected = false;
   }
 
   Object.defineProperties(Source.prototype, {
@@ -650,6 +658,12 @@ define([
         this._binaryHeight = binaryHeight;
       }
     },
+    indicators: {
+      enumerable: true,
+      get: function() {
+        return this._indicators;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -806,7 +820,8 @@ define([
       deletable: this.deletable,
       wrapping: this.wrapping,
       previewHeight: this.previewHeight,
-      binaryHeight: this.binaryHeight
+      binaryHeight: this.binaryHeight,
+      indicators: this.indicators
     };
 
     Utils.extend(opts, options);
@@ -845,10 +860,16 @@ define([
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
+    this._indicators = opts.indicators;
 
     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.
    *
@@ -862,5 +883,16 @@ define([
     return this._startTime < endTime && startTime < this._endTime;
   };
 
+  /**
+   * Update the indicators of this source.
+   *
+   * @param {Array<String>} newIndicators The new indicators.
+   */
+
+  Source.prototype.setIndicators = function(newIndicators) {
+    this._indicators = newIndicators;
+    this._peaks.emit('source.setIndicators', this);
+  };
+
   return Source;
 });

package/src/sources-layer.js

@@ -58,6 +58,7 @@ define([
     this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
     this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
     this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
+    this._peaks.on('source.setIndicators', this.setIndicators.bind(this));
   }
 
   SourcesLayer.prototype.fitToView = function() {
@@ -280,6 +281,15 @@ define([
     return sourceGroup;
   };
 
+  SourcesLayer.prototype.setIndicators = function(source) {
+    var sourceGroup = this._sourcesGroup[source.id];
+
+    if (sourceGroup) {
+      sourceGroup.createIndicators();
+      this._layer.draw();
+    }
+  };
+
   /**
    * Updates the positions of all displayed sources in the view.
    *
@@ -310,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();
@@ -347,8 +446,9 @@ define([
         newXs.updateWidth
       );
 
-      this.draw();
+      return true;
     }
+    return false;
   };
 
   SourcesLayer.prototype.manageVerticalPosition = function(source, newY) {
@@ -400,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++;
         }
@@ -506,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);
@@ -565,9 +668,12 @@ 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);
   };
 
   SourcesLayer.prototype.getHeight = function() {

package/src/timeline-sources.js

@@ -179,7 +179,8 @@ define([
       options.deletable,
       options.wrapping,
       options.previewHeight,
-      options.binaryHeight
+      options.binaryHeight,
+      options.indicators
     );
 
     return source;