@checksub_team/peaks_timeline 1.4.25 → 1.4.28

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(
@@ -61,6 +57,7 @@ define([
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     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));
   }
 
   SourcesLayer.prototype.getLoadedData = function(id) {
@@ -71,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) {
@@ -97,6 +94,36 @@ define([
     return this._allowEditing;
   };
 
+  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
+    var positions = [];
+
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        var source = this._sourcesGroup[sourceId].getSource();
+
+        if (!positions.includes(source.position)) {
+          this._lines.changeLineHeight(
+            oldHeight,
+            this._peaks.options.lineHeight
+          );
+          positions.push(source.position);
+        }
+        this._removeSource(source);
+        this._addSourceGroup(source);
+      }
+    }
+
+    if (positions) {
+      var frameOffset = this._view.getFrameOffset();
+      var width = this._view.getWidth();
+
+      this.updateSources(
+        this._view.pixelsToTime(frameOffset),
+        this._view.pixelsToTime(frameOffset + width)
+      );
+    }
+  };
+
   SourcesLayer.prototype._onSourceUpdate = function(source) {
     var redraw = false;
     var sourceGroup = this._sourcesGroup[source.id];
@@ -211,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();
   };
@@ -471,6 +498,10 @@ define([
     this._layer.stopDrag();
   };
 
+  SourcesLayer.prototype.getSourceGroupById = function(sourceId) {
+    return this._sourcesGroup[sourceId];
+  };
+
   SourcesLayer.prototype._sourcesOverlapped = function(source1, source2) {
     var endsLater = (source1.startTime < source2.startTime)
                     && (source1.endTime > source2.startTime);

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,10 @@ define([
    * <code>segments.remove_all</code> event.
    */
 
-  TimelineSegments.prototype.removeAll = function() {
+  TimelineSegments.prototype.removeAll = function(lineId) {
     this._segments = [];
     this._segmentsById = {};
-    this._peaks.emit('segments.remove_all');
+    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
     );
 
@@ -361,6 +361,18 @@ define([
     this._sourcesLayer.draw();
   };
 
+  TimelineZoomView.prototype.selectSourceById = function(sourceId) {
+    var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
+
+    if (sourceGroup) {
+      this._modeLayer.selectElement(sourceGroup, false);
+    }
+  };
+
+  TimelineZoomView.prototype.deselectElement = function() {
+    this._modeLayer.deselectElement(false);
+  };
+
   TimelineZoomView.prototype.isListening = function() {
     return this._stage.listening();
   };