@checksub_team/peaks_timeline 1.9.5 → 1.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -15589,8 +15589,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.addSource = function (source) {
         this.sources.add(source);
     };
-    Peaks.prototype.destroySource = function (sourceId) {
-        this.sources.destroyById(sourceId);
+    Peaks.prototype.destroySource = function (sourceId, notify) {
+        this.sources.destroyById(sourceId, !notify);
     };
     Peaks.prototype.showSource = function (sourceId) {
         this.sources.showById(sourceId);
@@ -15639,8 +15639,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.selectSourcesOnLineAfter = function (lineId, time) {
         return this.view.selectSourcesOnLineAfter(lineId, time);
     };
-    Peaks.prototype.deselectAll = function () {
-        return this.view.deselectAll();
+    Peaks.prototype.deselectAll = function (notify) {
+        return this.view.deselectAll(notify);
     };
     Peaks.prototype._addWindowResizeHandler = function () {
         this._onResize = this._onResize.bind(this);
@@ -15753,25 +15753,27 @@ module.exports = function (Utils, Source, SourceGroup, Konva) {
         const sources = [];
         const segments = [];
         const self = this;
-        this.deselectDifference(elements, true);
+        this.deselectDifference(elements, false);
         elements.forEach(function (element) {
             if (!self._selectedElements[element.id]) {
                 self._selectedElements[element.id] = element;
-                element.setSelected(true);
-                if (notify) {
-                    if (element instanceof Source) {
-                        sources.push(element);
-                    } else {
-                        segments.push(element);
-                    }
+                element.selected = true;
+                if (element instanceof Source) {
+                    sources.push(element);
+                } else {
+                    segments.push(element);
                 }
             }
         });
-        if (notify) {
-            if (sources.length) {
+        if (sources.length) {
+            this._peaks.emit('sources.setSelected', sources);
+            if (notify) {
                 this._peaks.emit('sources.selected', sources);
             }
-            if (segments.length) {
+        }
+        if (segments.length) {
+            this._peaks.emit('segments.setSelected', segments);
+            if (notify) {
                 this._peaks.emit('segments.selected', segments);
             }
         }
@@ -15789,22 +15791,24 @@ module.exports = function (Utils, Source, SourceGroup, Konva) {
         for (var id in elements) {
             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);
-                    }
+                element.selected = false;
+                if (element instanceof Source) {
+                    sources.push(element);
+                } else {
+                    segments.push(element);
                 }
                 delete this._selectedElements[id];
             }
         }
-        if (notify) {
-            if (sources.length) {
+        if (sources.length) {
+            this._peaks.emit('sources.setSelected', sources);
+            if (notify) {
                 this._peaks.emit('sources.deselected', sources);
             }
-            if (segments.length) {
+        }
+        if (segments.length) {
+            this._peaks.emit('segments.setSelected', segments);
+            if (notify) {
                 this._peaks.emit('segments.deselected', segments);
             }
         }
@@ -17060,6 +17064,15 @@ module.exports = function (Utils) {
             set: function (newId) {
                 this._relativeId = newId;
             }
+        },
+        selected: {
+            enumerable: true,
+            get: function () {
+                return this._selected;
+            },
+            set: function (selected) {
+                this._selected = selected;
+            }
         }
     });
     Segment.prototype.update = function (options) {
@@ -17105,6 +17118,7 @@ module.exports = function (Utils) {
     };
     Segment.prototype.setSelected = function (selected) {
         this._selected = selected;
+        this._peaks.emit('segment.selected', this);
     };
     Segment.prototype.isVisible = function (startTime, endTime) {
         return this.startTime < endTime && startTime < this.endTime;
@@ -17699,7 +17713,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
         this._addHandles();
         this.setWrapping(source.wrapped);
-        this._setSelected();
+        this.setSelected();
         this._indicatorsGroup = new Konva.Group();
         this._group.add(this._indicatorsGroup);
         this.createIndicators();
@@ -18162,9 +18176,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             return preview.type === 'audio';
         });
     };
-    SourceGroup.prototype._setSelected = function () {
+    SourceGroup.prototype.setSelected = function () {
         if (this._border) {
-            if (this._source._selected) {
+            if (this._source.selected) {
                 this._border.fill(this._source.selectedColor);
                 this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
             } else {
@@ -18177,7 +18191,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     return node.getClassName() === 'Shape';
                 });
                 if (unwrap_background) {
-                    if (this._source._selected) {
+                    if (this._source.selected) {
                         unwrap_background.stroke(this._source.selectedColor);
                         unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
@@ -18190,7 +18204,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     return node.getClassName() === 'Shape';
                 });
                 if (wrap_background) {
-                    if (this._source._selected) {
+                    if (this._source.selected) {
                         wrap_background.stroke(this._source.selectedColor);
                         wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
@@ -18898,6 +18912,15 @@ module.exports = function (Utils) {
             get: function () {
                 return this._minSize;
             }
+        },
+        selected: {
+            enumerable: true,
+            get: function () {
+                return this._selected;
+            },
+            set: function (selected) {
+                this._selected = selected;
+            }
         }
     });
     Source.prototype.updateTimes = function (newStartTime, newEndTime) {
@@ -19057,10 +19080,6 @@ module.exports = function (Utils) {
         this._indicators = opts.indicators;
         this._peaks.emit('source.update', this);
     };
-    Source.prototype.setSelected = function (selected) {
-        this._selected = selected;
-        this._peaks.emit('source.update', this);
-    };
     Source.prototype.isVisible = function (startTime, endTime) {
         return this._startTime < endTime && startTime < this._endTime;
     };
@@ -19088,6 +19107,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.on('sources.destroy', this._onSourcesDestroy.bind(this));
         this._peaks.on('sources.show', this._onSourcesShow.bind(this));
         this._peaks.on('sources.hide', this._onSourcesHide.bind(this));
+        this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
         this._peaks.on('source.update', this._onSourceUpdate.bind(this));
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
         this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
@@ -19157,6 +19177,15 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
             this.updateSources(frameStartTime, frameEndTime);
         }
     };
+    SourcesLayer.prototype._onSourcesSetSelected = function (sources) {
+        sources.forEach(function (source) {
+            const sourceGroup = this._sourcesGroup[source.id];
+            if (sourceGroup) {
+                sourceGroup.setSelected();
+            }
+        }.bind(this));
+        this.draw();
+    };
     SourcesLayer.prototype._onSourcesShow = function (sources) {
         var self = this;
         sources.forEach(function (source) {
@@ -20248,8 +20277,8 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             this._modeLayer.selectElements(sources, false);
         }
     };
-    TimelineZoomView.prototype.deselectAll = function () {
-        this._modeLayer.deselectDifference([], false);
+    TimelineZoomView.prototype.deselectAll = function (notify) {
+        this._modeLayer.deselectDifference([], notify);
     };
     TimelineZoomView.prototype.isListening = function () {
         return this._stage.listening();

package/src/main.js

@@ -637,8 +637,8 @@ define([
    * @param {String} sourceId
    */
 
-  Peaks.prototype.destroySource = function(sourceId) {
-    this.sources.destroyById(sourceId);
+  Peaks.prototype.destroySource = function(sourceId, notify) {
+    this.sources.destroyById(sourceId, !notify);
   };
 
   /**
@@ -730,9 +730,9 @@ define([
             .selectSourcesOnLineAfter(lineId, time);
   };
 
-  Peaks.prototype.deselectAll = function() {
+  Peaks.prototype.deselectAll = function(notify) {
     return this.view
-            .deselectAll();
+            .deselectAll(notify);
   };
 
   Peaks.prototype._addWindowResizeHandler = function() {

package/src/mode-layer.js

@@ -86,28 +86,30 @@ define([
     const segments = [];
     const self = this;
 
-    this.deselectDifference(elements, true);
+    this.deselectDifference(elements, false);
 
     elements.forEach(function(element) {
       if (!self._selectedElements[element.id]) {
         self._selectedElements[element.id] = element;
-        element.setSelected(true);
-        if (notify) {
-          if (element instanceof Source) {
-            sources.push(element);
-          }
-          else {
-            segments.push(element);
-          }
+        element.selected = true;
+        if (element instanceof Source) {
+          sources.push(element);
+        }
+        else {
+          segments.push(element);
         }
       }
     });
 
-    if (notify) {
-      if (sources.length) {
+    if (sources.length) {
+      this._peaks.emit('sources.setSelected', sources);
+      if (notify) {
         this._peaks.emit('sources.selected', sources);
       }
-      if (segments.length) {
+    }
+    if (segments.length) {
+      this._peaks.emit('segments.setSelected', segments);
+      if (notify) {
         this._peaks.emit('segments.selected', segments);
       }
     }
@@ -131,24 +133,26 @@ define([
       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);
-          }
+        element.selected = false;
+        if (element instanceof Source) {
+          sources.push(element);
+        }
+        else {
+          segments.push(element);
         }
         delete this._selectedElements[id];
       }
     }
 
-    if (notify) {
-      if (sources.length) {
+    if (sources.length) {
+      this._peaks.emit('sources.setSelected', sources);
+      if (notify) {
         this._peaks.emit('sources.deselected', sources);
       }
-      if (segments.length) {
+    }
+    if (segments.length) {
+      this._peaks.emit('segments.setSelected', segments);
+      if (notify) {
         this._peaks.emit('segments.deselected', segments);
       }
     }

package/src/segment.js

@@ -292,6 +292,16 @@ define([
       set: function(newId) {
         this._relativeId = newId;
       }
+    },
+    selected: {
+      enumerable: true,
+      get: function() {
+        return this._selected;
+      },
+
+      set: function(selected) {
+        this._selected = selected;
+      }
     }
   });
 
@@ -343,7 +353,7 @@ define([
 
   Segment.prototype.setSelected = function(selected) {
     this._selected = selected;
-    // this._peaks.emit('segment.update', this); // It's currently useless
+    this._peaks.emit('segment.selected', this);
   };
 
   /**

package/src/source-group.js

@@ -98,7 +98,7 @@ define([
 
     this.setWrapping(source.wrapped);
 
-    this._setSelected();
+    this.setSelected();
 
     this._indicatorsGroup = new Konva.Group();
     this._group.add(this._indicatorsGroup);
@@ -741,9 +741,9 @@ define([
     });
   };
 
-  SourceGroup.prototype._setSelected = function() {
+  SourceGroup.prototype.setSelected = function() {
     if (this._border) {
-      if (this._source._selected) {
+      if (this._source.selected) {
         this._border.fill(this._source.selectedColor);
         this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
       }
@@ -760,7 +760,7 @@ define([
         });
 
         if (unwrap_background) {
-          if (this._source._selected) {
+          if (this._source.selected) {
             unwrap_background.stroke(this._source.selectedColor);
             unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
@@ -777,7 +777,7 @@ define([
         });
 
         if (wrap_background) {
-          if (this._source._selected) {
+          if (this._source.selected) {
             wrap_background.stroke(this._source.selectedColor);
             wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }

package/src/source.js

@@ -669,6 +669,16 @@ define([
       get: function() {
         return this._minSize;
       }
+    },
+    selected: {
+      enumerable: true,
+      get: function() {
+        return this._selected;
+      },
+
+      set: function(selected) {
+        this._selected = selected;
+      }
     }
   });
 
@@ -865,11 +875,6 @@ 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.
    *

package/src/sources-layer.js

@@ -53,6 +53,7 @@ define([
     this._peaks.on('sources.destroy', this._onSourcesDestroy.bind(this));
     this._peaks.on('sources.show', this._onSourcesShow.bind(this));
     this._peaks.on('sources.hide', this._onSourcesHide.bind(this));
+    this._peaks.on('sources.setSelected', this._onSourcesSetSelected.bind(this));
     this._peaks.on('source.update', this._onSourceUpdate.bind(this));
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
@@ -152,6 +153,18 @@ define([
     }
   };
 
+  SourcesLayer.prototype._onSourcesSetSelected = function(sources) {
+    sources.forEach(function(source) {
+      const sourceGroup = this._sourcesGroup[source.id];
+
+      if (sourceGroup) {
+        sourceGroup.setSelected();
+      }
+    }.bind(this));
+
+    this.draw();
+  };
+
   SourcesLayer.prototype._onSourcesShow = function(sources) {
     var self = this;
 

package/src/timeline-zoomview.js

@@ -400,8 +400,8 @@ define([
     }
   };
 
-  TimelineZoomView.prototype.deselectAll = function() {
-    this._modeLayer.deselectDifference([], false);
+  TimelineZoomView.prototype.deselectAll = function(notify) {
+    this._modeLayer.deselectDifference([], notify);
   };
 
   TimelineZoomView.prototype.isListening = function() {