@checksub_team/peaks_timeline 1.6.0-beta.1 → 1.6.0-beta.2

package/package.json

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

package/peaks.js

@@ -15428,6 +15428,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             lineIndicatorSelectedTextColor: '#ccc',
             lineIndicatorSelectedIconColor: '#ccc',
             sourceSelectedBorderWidth: 3,
+            sourceHandleWidth: 12,
             sourceTextXOffset: 10,
             sourceTextYOffset: 10,
             autoScrollThreshold: 0.05,
@@ -17515,7 +17516,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     'use strict';
     var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
     var SPACING_BETWEEN_PREVIEWS = 1.5;
-    var HANDLE_WIDTH = 8;
     var CORNER_RADIUS = 8;
     function SourceGroup(source, peaks, layer, view) {
         this._source = source;
@@ -17614,7 +17614,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var newWidth = endPixel - startPixel;
         if (newWidth !== this._width) {
             this._width = newWidth;
-            this._rightHandle.x(newWidth - HANDLE_WIDTH);
+            this._rightHandle.x(newWidth - this._peaks.options.sourceHandleWidth);
             this.updatePreviews();
         }
     };
@@ -17647,7 +17647,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         if (!this._leftHandle || forceCreate) {
             this._leftHandle = new Konva.Rect({
                 x: 0,
-                width: HANDLE_WIDTH,
+                width: this._peaks.options.sourceHandleWidth,
                 height: this._unwrappedHeight,
                 visible: true,
                 draggable: this._source.resizable,
@@ -17672,8 +17672,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
         if (!this._rightHandle || forceCreate) {
             this._rightHandle = new Konva.Rect({
-                x: this._width - HANDLE_WIDTH,
-                width: HANDLE_WIDTH,
+                x: this._width - this._peaks.options.sourceHandleWidth,
+                width: this._peaks.options.sourceHandleWidth,
                 height: this._unwrappedHeight,
                 visible: true,
                 draggable: this._source.resizable,
@@ -18107,7 +18107,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
             } else {
                 this._border.fill(this._source.borderColor);
-                this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
+                this._borderWidth = this._source.borderWidth;
             }
         } else {
             if (this._unwrap) {

package/src/main.js

@@ -340,6 +340,11 @@ define([
        */
       sourceSelectedBorderWidth: 3,
 
+      /**
+       * Handle width for a source, in pixels
+       */
+      sourceHandleWidth: 12,
+
       /**
        * X Offset of the text in the source, in pixels
        */

package/src/source-group.js

@@ -20,7 +20,6 @@ define([
 
   var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
   var SPACING_BETWEEN_PREVIEWS = 1.5;
-  var HANDLE_WIDTH = 8;
   var CORNER_RADIUS = 8;
 
   /**
@@ -203,7 +202,7 @@ define([
       this._width = newWidth;
 
       // update handles
-      this._rightHandle.x(newWidth - HANDLE_WIDTH);
+      this._rightHandle.x(newWidth - this._peaks.options.sourceHandleWidth);
 
       // update unwrap
       this.updatePreviews();
@@ -246,7 +245,7 @@ define([
     if (!this._leftHandle || forceCreate) {
       this._leftHandle = new Konva.Rect({
         x: 0,
-        width: HANDLE_WIDTH,
+        width: this._peaks.options.sourceHandleWidth,
         height: this._unwrappedHeight,
         visible: true,
         draggable: this._source.resizable,
@@ -275,8 +274,8 @@ define([
 
     if (!this._rightHandle || forceCreate) {
       this._rightHandle = new Konva.Rect({
-        x: this._width - HANDLE_WIDTH,
-        width: HANDLE_WIDTH,
+        x: this._width - this._peaks.options.sourceHandleWidth,
+        width: this._peaks.options.sourceHandleWidth,
         height: this._unwrappedHeight,
         visible: true,
         draggable: this._source.resizable,
@@ -846,7 +845,7 @@ define([
       }
       else {
         this._border.fill(this._source.borderColor);
-        this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
+        this._borderWidth = this._source.borderWidth;
       }
     }
     else {