@checksub_team/peaks_timeline 1.6.1 → 1.6.3

package/package.json

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

package/peaks.js

@@ -14419,17 +14419,19 @@ module.exports = function (Konva, Utils, SVGs) {
         indicator.setAttr('trueHeight', indicatorHeight);
         indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
         var self = this;
-        indicator.on('mouseover', function () {
+        indicator.on('mouseenter', function () {
             indicator.getChildren().forEach(function (child) {
                 child.fill(child.getAttr('selectedColor'));
             });
             self.draw();
+            self._stage.container().style.cursor = 'pointer';
         });
         indicator.on('mouseout', function () {
             indicator.getChildren().forEach(function (child) {
                 child.fill(child.getAttr('defaultColor'));
             });
             self.draw();
+            self._stage.container().style.cursor = 'default';
         });
         indicator.on('click', function (e) {
             self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt);
@@ -17578,6 +17580,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 +17622,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 +17651,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 +17680,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,

package/src/line-indicator.js

@@ -197,11 +197,12 @@ define([
 
     var self = this;
 
-    indicator.on('mouseover', function() {
+    indicator.on('mouseenter', function() {
       indicator.getChildren().forEach(function(child) {
         child.fill(child.getAttr('selectedColor'));
       });
       self.draw();
+      self._stage.container().style.cursor = 'pointer';
     });
 
     indicator.on('mouseout', function() {
@@ -209,6 +210,7 @@ define([
         child.fill(child.getAttr('defaultColor'));
       });
       self.draw();
+      self._stage.container().style.cursor = 'default';
     });
 
     indicator.on('click', function(e) {

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,