@checksub_team/peaks_timeline 1.5.3 → 1.5.5

package/package.json

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

package/peaks.js

@@ -16238,7 +16238,7 @@ module.exports = function (Konva) {
         if (this._startMarker) {
             var newStartX;
             if (this._segment.duration) {
-                newStartX = Math.max(pos.x + this._view.getFrameOffset(), this._view.timeToPixels(this._segment.endTime - this._segment.duration) + this._view.getFrameOffset());
+                newStartX = Math.max(pos.x + this._view.getFrameOffset(), this._view.timeToPixels(this._segment.endTime - this._segment.duration));
             } else {
                 newStartX = pos.x + this._view.getFrameOffset();
             }
@@ -16246,7 +16246,7 @@ module.exports = function (Konva) {
         } else {
             var newEndX;
             if (this._segment.duration) {
-                newEndX = Math.min(pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth(), this._view.timeToPixels(this._segment.startTime + this._segment.duration) + this._view.getFrameOffset());
+                newEndX = Math.min(pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth(), this._view.timeToPixels(this._segment.startTime + this._segment.duration));
             } else {
                 newEndX = pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth();
             }
@@ -17535,6 +17535,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             this.unwrap();
             this._height = this._unwrappedHeight;
         }
+        if (this._title) {
+            this._title.y(this._getTitleY());
+        }
         this.setHandlesWrapping(wrap);
     };
     SourceGroup.prototype.setHandlesWrapping = function (wrap) {
@@ -17638,7 +17641,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
     };
     SourceGroup.prototype.drawSourceShape = function (ctx, shape) {
-        var radius = Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
+        var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
         var x = Math.max(0, this._view.getFrameOffset() - this._x - radius);
         var width = Math.min(this._width - x, this._view.getOriginalWidth() + radius - Math.max(0, this._x - this._view.getFrameOffset()));
         var xWidth = x + width;
@@ -17760,6 +17763,16 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
         this._group.add(this._title);
     };
+    SourceGroup.prototype._getTitleY = function () {
+        if (!this._title) {
+            return 0;
+        }
+        if (this._source.textPosition === 'bottom') {
+            return Math.max(this._height - this._title.getClientRect().height - 5, 5);
+        } else {
+            return 5;
+        }
+    };
     SourceGroup.prototype._createTitle = function () {
         var title = new Konva.Text({
             x: 5,
@@ -18217,6 +18230,11 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.textColor)) {
             throw new TypeError('peaks.sources.' + context + ': textColor should be a valid CSS color');
         }
+        if (Utils.isNullOrUndefined(options.textPosition)) {
+            options.textPosition = 'bottom';
+        } else if (!Utils.isString(options.textPosition)) {
+            throw new TypeError('peaks.sources.' + context + ': textPosition must be a string');
+        }
         if (Utils.isNullOrUndefined(options.borderWidth)) {
             options.borderWidth = 0;
         }
@@ -18269,7 +18287,7 @@ module.exports = function (Utils) {
             options.wrapped = false;
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
         var opts = {
             title: title,
             url: url,
@@ -18287,7 +18305,9 @@ module.exports = function (Utils) {
             borderColor: borderColor,
             selectedColor: selectedColor,
             textColor: textColor,
+            textPosition: textPosition,
             borderWidth: borderWidth,
+            borderRadius: borderRadius,
             wrapped: wrapped,
             position: position,
             draggable: draggable,
@@ -18317,7 +18337,9 @@ module.exports = function (Utils) {
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
+        this._textPosition = opts.textPosition;
         this._borderWidth = opts.borderWidth;
+        this._borderRadius = opts.borderRadius;
         this._wrapped = opts.wrapped;
         this._position = opts.position;
         this._draggable = opts.draggable;
@@ -18472,6 +18494,15 @@ module.exports = function (Utils) {
                 this._textColor = textColor;
             }
         },
+        textPosition: {
+            enumerable: true,
+            get: function () {
+                return this._textPosition;
+            },
+            set: function (textPosition) {
+                this._textPosition = textPosition;
+            }
+        },
         borderWidth: {
             enumerable: true,
             get: function () {
@@ -18481,6 +18512,15 @@ module.exports = function (Utils) {
                 this._borderWidth = borderWidth;
             }
         },
+        borderRadius: {
+            enumerable: true,
+            get: function () {
+                return this._borderRadius;
+            },
+            set: function (borderRadius) {
+                this._borderRadius = borderRadius;
+            }
+        },
         wrapped: {
             enumerable: true,
             get: function () {
@@ -18653,7 +18693,9 @@ module.exports = function (Utils) {
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
             textColor: this.textColor,
+            textPosition: this.textPosition,
             borderWidth: this.borderWidth,
+            borderRadius: this.borderRadius,
             wrapped: this.wrapped,
             position: this.position,
             draggable: this.draggable,
@@ -18680,7 +18722,9 @@ module.exports = function (Utils) {
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
+        this._textPosition = opts.textPosition;
         this._borderWidth = opts.borderWidth;
+        this._borderRadius = opts.borderRadius;
         this._wrapped = opts.wrapped;
         this._position = opts.position;
         this._draggable = opts.draggable;
@@ -19390,7 +19434,9 @@ module.exports = function (Source, Utils) {
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
                 textColor: sourceToCut.textColor,
+                textPosition: sourceToCut.textPosition,
                 borderWidth: sourceToCut.borderWidth,
+                borderRadius: sourceToCut.borderRadius,
                 wrapped: sourceToCut.wrapped,
                 position: sourceToCut.position,
                 draggable: sourceToCut.draggable,
@@ -19412,7 +19458,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.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
+        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.textColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/segment-marker.js

@@ -92,7 +92,6 @@ define([
         newStartX = Math.max(
           pos.x + this._view.getFrameOffset(),
           this._view.timeToPixels(this._segment.endTime - this._segment.duration)
-            + this._view.getFrameOffset()
         );
       }
       else {
@@ -112,7 +111,6 @@ define([
         newEndX = Math.min(
           pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth(),
           this._view.timeToPixels(this._segment.startTime + this._segment.duration)
-            + this._view.getFrameOffset()
         );
       }
       else {

package/src/source-group.js

@@ -220,6 +220,10 @@ define([
       this._height = this._unwrappedHeight;
     }
 
+    if (this._title) {
+      this._title.y(this._getTitleY());
+    }
+
     this.setHandlesWrapping(wrap);
   };
 
@@ -343,16 +347,18 @@ define([
   };
 
   SourceGroup.prototype.drawSourceShape = function(ctx, shape) {
-    var radius = Math.max(
-      1,
-      Math.min(
-        this._width / 2,
+    var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ?
+      this._source.borderRadius :
+      Math.max(
+        1,
         Math.min(
-          CORNER_RADIUS,
-          this._height / 2
+          this._width / 2,
+          Math.min(
+            CORNER_RADIUS,
+            this._height / 2
+          )
         )
-      )
-    );
+      );
     var x = Math.max(
       0,
       this._view.getFrameOffset() - this._x - radius
@@ -506,6 +512,19 @@ define([
     this._group.add(this._title);
   };
 
+  SourceGroup.prototype._getTitleY = function() {
+    if (!this._title) {
+      return 0;
+    }
+
+    if (this._source.textPosition === 'bottom') {
+      return Math.max(this._height - this._title.getClientRect().height - 5, 5);
+    }
+    else {
+      return 5;
+    }
+  };
+
   SourceGroup.prototype._createTitle = function() {
     var title = new Konva.Text({
       x: 5,

package/src/source.js

@@ -134,6 +134,13 @@ define([
       throw new TypeError('peaks.sources.' + context + ': textColor should be a valid CSS color');
     }
 
+    if (Utils.isNullOrUndefined(options.textPosition)) {
+      options.textPosition = 'bottom';
+    }
+    else if (!Utils.isString(options.textPosition)) {
+      throw new TypeError('peaks.sources.' + context + ': textPosition must be a string');
+    }
+
     if (Utils.isNullOrUndefined(options.borderWidth)) {
       options.borderWidth = 0;
     }
@@ -227,8 +234,8 @@ define([
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable,
-    wrapping, previewHeight, binaryHeight) {
+    borderColor, selectedColor, textColor, textPosition, borderWidth, borderRadius, wrapped,
+    position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
     var opts = {
       title: title,
       url: url,
@@ -246,7 +253,9 @@ define([
       borderColor: borderColor,
       selectedColor: selectedColor,
       textColor: textColor,
+      textPosition: textPosition,
       borderWidth: borderWidth,
+      borderRadius: borderRadius,
       wrapped: wrapped,
       position: position,
       draggable: draggable,
@@ -278,7 +287,9 @@ define([
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
+    this._textPosition = opts.textPosition;
     this._borderWidth = opts.borderWidth;
+    this._borderRadius = opts.borderRadius;
     this._wrapped = opts.wrapped;
     this._position = opts.position;
     this._draggable = opts.draggable;
@@ -444,6 +455,16 @@ define([
         this._textColor = textColor;
       }
     },
+    textPosition: {
+      enumerable: true,
+      get: function() {
+        return this._textPosition;
+      },
+
+      set: function(textPosition) {
+        this._textPosition = textPosition;
+      }
+    },
     borderWidth: {
       enumerable: true,
       get: function() {
@@ -454,6 +475,16 @@ define([
         this._borderWidth = borderWidth;
       }
     },
+    borderRadius: {
+      enumerable: true,
+      get: function() {
+        return this._borderRadius;
+      },
+
+      set: function(borderRadius) {
+        this._borderRadius = borderRadius;
+      }
+    },
     wrapped: {
       enumerable: true,
       get: function() {
@@ -663,7 +694,9 @@ define([
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
       textColor: this.textColor,
+      textPosition: this.textPosition,
       borderWidth: this.borderWidth,
+      borderRadius: this.borderRadius,
       wrapped: this.wrapped,
       position: this.position,
       draggable: this.draggable,
@@ -693,7 +726,9 @@ define([
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
+    this._textPosition = opts.textPosition;
     this._borderWidth = opts.borderWidth;
+    this._borderRadius = opts.borderRadius;
     this._wrapped = opts.wrapped;
     this._position = opts.position;
     this._draggable = opts.draggable;

package/src/timeline-sources.js

@@ -82,7 +82,9 @@ define([
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
       textColor: sourceToCut.textColor,
+      textPosition: sourceToCut.textPosition,
       borderWidth: sourceToCut.borderWidth,
+      borderRadius: sourceToCut.borderRadius,
       wrapped: sourceToCut.wrapped,
       position: sourceToCut.position,
       draggable: sourceToCut.draggable,
@@ -156,7 +158,9 @@ define([
       options.borderColor,
       options.selectedColor,
       options.textColor,
+      options.textPosition,
       options.borderWidth,
+      options.borderRadius,
       options.wrapped,
       options.position,
       options.draggable,