@checksub_team/peaks_timeline 1.9.6 → 1.10.0

package/package.json

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

package/peaks.js

@@ -17677,6 +17677,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._wrappedHeight = this._peaks.options.wrappedLineHeight;
         this._borderWidth = this._source.borderWidth;
         this._previewList = [];
+        this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
             x: this._x,
             sourceId: this._source.id,
@@ -17897,6 +17898,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             }
         }));
         unwrap.add(background);
+        unwrap.add(this._markersGroup);
         unwrap.add(this._createTitle(false));
         return unwrap;
     };
@@ -17943,6 +17945,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             }
         }));
         wrap.add(background);
+        wrap.add(this._markersGroup);
         wrap.add(this._createTitle(true));
         return wrap;
     };
@@ -18370,6 +18373,24 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._indicatorsGroup.offsetX(currentX - INDICATORS_MARGIN_LEFT);
         this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
     };
+    SourceGroup.prototype._createMarkers = function () {
+        const markersGroup = new Konva.Group({ listening: false });
+        this._source.markers.forEach(function (marker) {
+            const markerX = this._view.timeToPixels(marker);
+            var markerLine = new Konva.Line({
+                points: [
+                    markerX,
+                    0,
+                    markerX,
+                    this._unwrappedHeight
+                ],
+                stroke: this._source.markerColor,
+                strokeWidth: this._source.markerWidth
+            });
+            markersGroup.add(markerLine);
+        }.bind(this));
+        return markersGroup;
+    };
     return SourceGroup;
 }(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./utils'), _dereq_('konva'));
 },{"./utils":112,"./waveform-builder":113,"./waveform-shape":114,"konva":43}],105:[function(_dereq_,module,exports){
@@ -18543,8 +18564,17 @@ module.exports = function (Utils) {
         if (Utils.isNullOrUndefined(options.indicators)) {
             options.indicators = [];
         }
+        if (Utils.isNullOrUndefined(options.markers)) {
+            options.markers = [];
+        }
+        if (Utils.isNullOrUndefined(options.markerColor) || !Utils.isValidColor(options.markerColor)) {
+            options.markerColor = options.color;
+        }
+        if (Utils.isNullOrUndefined(options.markerWidth)) {
+            options.markerWidth = 2;
+        }
     }
-    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, 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, indicators, markers, markerColor, markerWidth) {
         var opts = {
             title: title,
             url: url,
@@ -18578,7 +18608,10 @@ module.exports = function (Utils) {
             wrapping: wrapping,
             previewHeight: previewHeight,
             binaryHeight: binaryHeight,
-            indicators: indicators
+            indicators: indicators,
+            markers: markers,
+            markerColor: markerColor,
+            markerWidth: markerWidth
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -18618,6 +18651,9 @@ module.exports = function (Utils) {
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
         this._indicators = opts.indicators;
+        this._markers = opts.markers;
+        this._markerColor = opts.markerColor;
+        this._markerWidth = opts.markerWidth;
         this._minSize = peaks.options.minSourceSize;
         this._selected = false;
     }
@@ -18907,6 +18943,24 @@ module.exports = function (Utils) {
                 return this._indicators;
             }
         },
+        markers: {
+            enumerable: true,
+            get: function () {
+                return this._markers;
+            }
+        },
+        markerColor: {
+            enumerable: true,
+            get: function () {
+                return this._markerColor;
+            }
+        },
+        markerWidth: {
+            enumerable: true,
+            get: function () {
+                return this._markerWidth;
+            }
+        },
         minSize: {
             enumerable: true,
             get: function () {
@@ -19041,7 +19095,10 @@ module.exports = function (Utils) {
             wrapping: this.wrapping,
             previewHeight: this.previewHeight,
             binaryHeight: this.binaryHeight,
-            indicators: this.indicators
+            indicators: this.indicators,
+            markers: this.markers,
+            markerColor: this.markerColor,
+            markerWidth: this.markerWidth
         };
         Utils.extend(opts, options);
         validateSource(this._peaks, opts, 'update()');
@@ -19078,6 +19135,9 @@ module.exports = function (Utils) {
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
         this._indicators = opts.indicators;
+        this._markers = opts.markers;
+        this._markerColor = opts.markerColor;
+        this._markerWidth = opts.markerWidth;
         this._peaks.emit('source.update', this);
     };
     Source.prototype.isVisible = function (startTime, endTime) {
@@ -19902,7 +19962,10 @@ module.exports = function (Source, Utils) {
                 deletable: sourceToCut.deletable,
                 wrapping: sourceToCut.wrapping,
                 previewHeight: sourceToCut.previewHeight,
-                binaryHeight: sourceToCut.binaryHeight
+                binaryHeight: sourceToCut.binaryHeight,
+                markers: sourceToCut.markers,
+                markerColor: sourceToCut.markerColor,
+                markerWidth: sourceToCut.markerWidth
             }])[0];
         this._peaks.emit('sources.updated', [
             sourceToCut,
@@ -19920,7 +19983,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.markerColor, options.markerWidth);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/source-group.js

@@ -56,6 +56,8 @@ define([
 
     this._previewList = [];
 
+    this._markersGroup = this._createMarkers();
+
     this._group = new Konva.Group({
       x: this._x,
       sourceId: this._source.id,
@@ -377,6 +379,7 @@ define([
     }));
 
     unwrap.add(background);
+    unwrap.add(this._markersGroup);
     unwrap.add(this._createTitle(false));
 
     return unwrap;
@@ -435,6 +438,7 @@ define([
     }));
 
     wrap.add(background);
+    wrap.add(this._markersGroup);
     wrap.add(this._createTitle(true));
 
     return wrap;
@@ -1000,5 +1004,25 @@ define([
     this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
   };
 
+  SourceGroup.prototype._createMarkers = function() {
+    const markersGroup = new Konva.Group({
+      listening: false
+    });
+
+    this._source.markers.forEach(function(marker) {
+      const markerX = this._view.timeToPixels(marker);
+
+      var markerLine = new Konva.Line({
+        points: [markerX, 0, markerX, this._unwrappedHeight],
+        stroke: this._source.markerColor,
+        strokeWidth: this._source.markerWidth
+      });
+
+      markersGroup.add(markerLine);
+    }.bind(this));
+
+    return markersGroup;
+  };
+
   return SourceGroup;
 });

package/src/source.js

@@ -250,6 +250,19 @@ define([
     if (Utils.isNullOrUndefined(options.indicators)) {
       options.indicators = [];
     }
+
+    if (Utils.isNullOrUndefined(options.markers)) {
+      options.markers = [];
+    }
+
+    if (Utils.isNullOrUndefined(options.markerColor)
+      || !Utils.isValidColor(options.markerColor)) {
+      options.markerColor = options.color;
+    }
+
+    if (Utils.isNullOrUndefined(options.markerWidth)) {
+      options.markerWidth = 2;
+    }
   }
 
   /**
@@ -277,7 +290,8 @@ define([
     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, indicators) {
+    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor,
+    markerWidth) {
     var opts = {
       title: title,
       url: url,
@@ -311,7 +325,10 @@ define([
       wrapping: wrapping,
       previewHeight: previewHeight,
       binaryHeight: binaryHeight,
-      indicators: indicators
+      indicators: indicators,
+      markers: markers,
+      markerColor: markerColor,
+      markerWidth: markerWidth
     };
 
     validateSource(peaks, opts, 'add()');
@@ -353,6 +370,9 @@ define([
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
     this._indicators = opts.indicators;
+    this._markers = opts.markers;
+    this._markerColor = opts.markerColor;
+    this._markerWidth = opts.markerWidth;
     this._minSize = peaks.options.minSourceSize;
     this._selected = false;
   }
@@ -664,6 +684,24 @@ define([
         return this._indicators;
       }
     },
+    markers: {
+      enumerable: true,
+      get: function() {
+        return this._markers;
+      }
+    },
+    markerColor: {
+      enumerable: true,
+      get: function() {
+        return this._markerColor;
+      }
+    },
+    markerWidth: {
+      enumerable: true,
+      get: function() {
+        return this._markerWidth;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -831,7 +869,10 @@ define([
       wrapping: this.wrapping,
       previewHeight: this.previewHeight,
       binaryHeight: this.binaryHeight,
-      indicators: this.indicators
+      indicators: this.indicators,
+      markers: this.markers,
+      markerColor: this.markerColor,
+      markerWidth: this.markerWidth
     };
 
     Utils.extend(opts, options);
@@ -871,6 +912,9 @@ define([
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
     this._indicators = opts.indicators;
+    this._markers = opts.markers;
+    this._markerColor = opts.markerColor;
+    this._markerWidth = opts.markerWidth;
 
     this._peaks.emit('source.update', this);
   };

package/src/timeline-sources.js

@@ -97,7 +97,10 @@ define([
       deletable: sourceToCut.deletable,
       wrapping: sourceToCut.wrapping,
       previewHeight: sourceToCut.previewHeight,
-      binaryHeight: sourceToCut.binaryHeight
+      binaryHeight: sourceToCut.binaryHeight,
+      markers: sourceToCut.markers,
+      markerColor: sourceToCut.markerColor,
+      markerWidth: sourceToCut.markerWidth
     }])[0];
 
     this._peaks.emit('sources.updated', [sourceToCut, newSource]);
@@ -180,7 +183,10 @@ define([
       options.wrapping,
       options.previewHeight,
       options.binaryHeight,
-      options.indicators
+      options.indicators,
+      options.markers,
+      options.markerColor,
+      options.markerWidth
     );
 
     return source;