@checksub_team/peaks_timeline 1.6.0 → 1.6.2

package/package.json

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

package/peaks.js

@@ -14898,7 +14898,7 @@ module.exports = function (Konva, Utils) {
         return newXs;
     };
     Line.prototype._changeSourcePosition = function (source, sourceWidth, x) {
-        if (this._firstSourceId) {
+        if (source.orderable && this._firstSourceId) {
             var currentRange = {
                 start: null,
                 end: null
@@ -17578,6 +17578,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._initialFrameOffset = this._view.getFrameOffset();
     };
     SourceGroup.prototype._onSourceGroupDragEnd = 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]);
@@ -17615,7 +17620,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var newWidth = endPixel - startPixel;
         if (newWidth !== this._width) {
             this._width = newWidth;
-            this._rightHandle.x(newWidth - this._peaks.options.sourceHandleWidth);
             this.updatePreviews();
         }
     };
@@ -17645,10 +17649,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     };
     SourceGroup.prototype._addHandles = function (forceCreate) {
         var self = this;
+        var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
         if (!this._leftHandle || forceCreate) {
             this._leftHandle = new Konva.Rect({
                 x: 0,
-                width: this._peaks.options.sourceHandleWidth,
+                width: handleWidth,
                 height: this._unwrappedHeight,
                 visible: true,
                 draggable: this._source.resizable,
@@ -17673,8 +17678,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
         if (!this._rightHandle || forceCreate) {
             this._rightHandle = new Konva.Rect({
-                x: this._width - this._peaks.options.sourceHandleWidth,
-                width: this._peaks.options.sourceHandleWidth,
+                x: this._width - handleWidth,
+                width: handleWidth,
                 height: this._unwrappedHeight,
                 visible: true,
                 draggable: this._source.resizable,
@@ -18365,6 +18370,11 @@ module.exports = function (Utils) {
         } else if (!Utils.isBoolean(options.draggable)) {
             throw new TypeError('peaks.sources.' + context + ': draggable must be a boolean');
         }
+        if (Utils.isNullOrUndefined(options.orderable)) {
+            options.orderable = true;
+        } else if (!Utils.isBoolean(options.orderable)) {
+            throw new TypeError('peaks.sources.' + context + ': orderable must be a boolean');
+        }
         if (Utils.isNullOrUndefined(options.resizable)) {
             options.resizable = true;
         } else if (!Utils.isBoolean(options.resizable)) {
@@ -18411,7 +18421,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, textFont, textFontSize, textColor, textBackgroundColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight) {
+    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) {
         var opts = {
             title: title,
             url: url,
@@ -18438,6 +18448,7 @@ module.exports = function (Utils) {
             wrapped: wrapped,
             position: position,
             draggable: draggable,
+            orderable: orderable,
             resizable: resizable,
             cuttable: cuttable,
             deletable: deletable,
@@ -18475,6 +18486,7 @@ module.exports = function (Utils) {
         this._wrapped = opts.wrapped;
         this._position = opts.position;
         this._draggable = opts.draggable;
+        this._orderable = opts.orderable;
         this._resizable = opts.resizable;
         this._cuttable = opts.cuttable;
         this._deletable = opts.deletable;
@@ -18712,6 +18724,12 @@ module.exports = function (Utils) {
                 return this._draggable;
             }
         },
+        orderable: {
+            enumerable: true,
+            get: function () {
+                return this._orderable;
+            }
+        },
         resizable: {
             enumerable: true,
             get: function () {
@@ -18875,6 +18893,7 @@ module.exports = function (Utils) {
             wrapped: this.wrapped,
             position: this.position,
             draggable: this.draggable,
+            orderable: this.orderable,
             resizable: this.resizable,
             cuttable: this.cuttable,
             deletable: this.deletable,
@@ -18909,6 +18928,7 @@ module.exports = function (Utils) {
         this._wrapped = opts.wrapped;
         this._position = opts.position;
         this._draggable = opts.draggable;
+        this._orderable = opts.orderable;
         this._resizable = opts.resizable;
         this._cuttable = opts.cuttable;
         this._deletable = opts.deletable;
@@ -19653,6 +19673,7 @@ module.exports = function (Source, Utils) {
                 wrapped: sourceToCut.wrapped,
                 position: sourceToCut.position,
                 draggable: sourceToCut.draggable,
+                orderable: sourceToCut.orderable,
                 resizable: sourceToCut.resizable,
                 cuttable: sourceToCut.cuttable,
                 deletable: sourceToCut.deletable,
@@ -19676,7 +19697,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.resizable, options.cuttable, options.deletable, 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.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);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/line.js

@@ -432,7 +432,7 @@ define([
   };
 
   Line.prototype._changeSourcePosition = function(source, sourceWidth, x) {
-    if (this._firstSourceId) {
+    if (source.orderable && this._firstSourceId) {
       var currentRange = {
         start: null,
         end: null

package/src/source-group.js

@@ -125,8 +125,17 @@ define([
   };
 
   SourceGroup.prototype._onSourceGroupDragEnd = 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]);
   };
 
@@ -203,9 +212,6 @@ define([
     if (newWidth !== this._width) {
       this._width = newWidth;
 
-      // update handles
-      this._rightHandle.x(newWidth - this._peaks.options.sourceHandleWidth);
-
       // update unwrap
       this.updatePreviews();
     }
@@ -243,11 +249,12 @@ define([
 
   SourceGroup.prototype._addHandles = function(forceCreate) {
     var self = this;
+    var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
 
     if (!this._leftHandle || forceCreate) {
       this._leftHandle = new Konva.Rect({
         x: 0,
-        width: this._peaks.options.sourceHandleWidth,
+        width: handleWidth,
         height: this._unwrappedHeight,
         visible: true,
         draggable: this._source.resizable,
@@ -276,8 +283,8 @@ define([
 
     if (!this._rightHandle || forceCreate) {
       this._rightHandle = new Konva.Rect({
-        x: this._width - this._peaks.options.sourceHandleWidth,
-        width: this._peaks.options.sourceHandleWidth,
+        x: this._width - handleWidth,
+        width: handleWidth,
         height: this._unwrappedHeight,
         visible: true,
         draggable: this._source.resizable,

package/src/source.js

@@ -178,6 +178,13 @@ define([
       throw new TypeError('peaks.sources.' + context + ': draggable must be a boolean');
     }
 
+    if (Utils.isNullOrUndefined(options.orderable)) {
+      options.orderable = true;
+    }
+    else if (!Utils.isBoolean(options.orderable)) {
+      throw new TypeError('peaks.sources.' + context + ': orderable must be a boolean');
+    }
+
     if (Utils.isNullOrUndefined(options.resizable)) {
       options.resizable = true;
     }
@@ -264,8 +271,8 @@ define([
   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, resizable, cuttable,
-    deletable, wrapping, previewHeight, binaryHeight) {
+    textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable,
+    cuttable, deletable, wrapping, previewHeight, binaryHeight) {
     var opts = {
       title: title,
       url: url,
@@ -292,6 +299,7 @@ define([
       wrapped: wrapped,
       position: position,
       draggable: draggable,
+      orderable: orderable,
       resizable: resizable,
       cuttable: cuttable,
       deletable: deletable,
@@ -331,6 +339,7 @@ define([
     this._wrapped = opts.wrapped;
     this._position = opts.position;
     this._draggable = opts.draggable;
+    this._orderable = opts.orderable;
     this._resizable = opts.resizable;
     this._cuttable = opts.cuttable;
     this._deletable = opts.deletable;
@@ -587,6 +596,12 @@ define([
         return this._draggable;
       }
     },
+    orderable: {
+      enumerable: true,
+      get: function() {
+        return this._orderable;
+      }
+    },
     resizable: {
       enumerable: true,
       get: function() {
@@ -785,6 +800,7 @@ define([
       wrapped: this.wrapped,
       position: this.position,
       draggable: this.draggable,
+      orderable: this.orderable,
       resizable: this.resizable,
       cuttable: this.cuttable,
       deletable: this.deletable,
@@ -822,6 +838,7 @@ define([
     this._wrapped = opts.wrapped;
     this._position = opts.position;
     this._draggable = opts.draggable;
+    this._orderable = opts.orderable;
     this._resizable = opts.resizable;
     this._cuttable = opts.cuttable;
     this._deletable = opts.deletable;

package/src/timeline-sources.js

@@ -91,6 +91,7 @@ define([
       wrapped: sourceToCut.wrapped,
       position: sourceToCut.position,
       draggable: sourceToCut.draggable,
+      orderable: sourceToCut.orderable,
       resizable: sourceToCut.resizable,
       cuttable: sourceToCut.cuttable,
       deletable: sourceToCut.deletable,
@@ -172,6 +173,7 @@ define([
       options.wrapped,
       options.position,
       options.draggable,
+      options.orderable,
       options.resizable,
       options.cuttable,
       options.deletable,