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

package/package.json

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

package/peaks.js

@@ -15721,6 +15721,7 @@ module.exports = function (Utils, Source, SourceGroup, Konva) {
         this._playheadLayer = playheadLayer;
         this._stage = stage;
         this._selectedElements = {};
+        this._currentLine = null;
         this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
         this._prepareDefaultMode();
         this._onMouseClickInDefaultMode = this._onMouseClickInDefaultMode.bind(this);
@@ -15835,6 +15836,11 @@ module.exports = function (Utils, Source, SourceGroup, Konva) {
     };
     ModeLayer.prototype._onMouseClickInDefaultMode = function () {
         const hoveredKonvaElement = this._view.getHoveredElement();
+        const currentLine = hoveredKonvaElement && hoveredKonvaElement.getLine();
+        if (currentLine !== this._currentLine) {
+            this.deselectAll(true);
+            this._currentLine = currentLine;
+        }
         if (hoveredKonvaElement) {
             if (hoveredKonvaElement instanceof SourceGroup) {
                 this.selectElements([hoveredKonvaElement.getSource()], true);
@@ -16500,14 +16506,7 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         });
         this._shapeGroup.add(this._rectangle);
         this._shapeGroup.dragBoundFunc(function () {
-            var diff = self._view.getPointerPosition().x - self._mouseDownX;
-            self._group.updateSegment(self._segment, self._initialStartPixel + diff, self._initialEndPixel + diff);
-            self._startMarker.timeUpdated(self._segment.startTime);
-            self._endMarker.timeUpdated(self._segment.endTime);
-            return {
-                x: this.absolutePosition().x,
-                y: this.absolutePosition().y
-            };
+            return self._onShapeGroupDrag(this);
         });
         this._shapeGroup.on('mouseenter', this._onMouseEnter.bind(this));
         this._shapeGroup.on('mouseleave', this._onMouseLeave.bind(this));
@@ -16532,6 +16531,16 @@ module.exports = function (Konva, SegmentMarker, Utils) {
         this._shapeGroup.add(this._indicatorsGroup);
         this.createIndicators();
     }
+    SegmentShape.prototype._onShapeGroupDrag = function (draggedElement) {
+        const diff = this._view.getPointerPosition().x - this._mouseDownX;
+        this._group.updateSegment(this._segment, this._initialStartPixel + diff, this._initialEndPixel + diff);
+        this._startMarker.timeUpdated(this._segment.startTime);
+        this._endMarker.timeUpdated(this._segment.endTime);
+        return {
+            x: draggedElement.absolutePosition().x,
+            y: draggedElement.absolutePosition().y
+        };
+    };
     SegmentShape.prototype._cornerRadius = function () {
         return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ? this._segment.borderRadius : SEGMENT_CORNER_RADIUS;
     };
@@ -17638,10 +17647,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             x: this._x,
             draggable: this._source.draggable,
             dragBoundFunc: function () {
-                return {
-                    x: this.absolutePosition().x,
-                    y: this.absolutePosition().y
-                };
+                return self._onSourceGroupDrag(this);
             }
         });
         this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
@@ -17873,13 +17879,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var unwrap = new Konva.Group({
             width: this._width,
             height: this._unwrappedHeight,
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return {
-                    x: this.absolutePosition().x,
-                    y: this.absolutePosition().y
-                };
-            },
             clipFunc: function (ctx) {
                 self.drawSourceShape(ctx, null, true);
             }
@@ -17906,10 +17905,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
                 self.drawSourceShape(ctx, shape, true);
-            },
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return self._onSourceGroupDrag(this);
             }
         }));
         unwrap.add(background);
@@ -17939,13 +17934,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var wrap = new Konva.Group({
             width: this._width,
             height: this._wrappedHeight,
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return {
-                    x: this.absolutePosition().x,
-                    y: this.absolutePosition().y
-                };
-            },
             clipFunc: function (ctx) {
                 self.drawSourceShape(ctx, null, true);
             }
@@ -17972,10 +17960,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             fill: this._source.backgroundColor,
             sceneFunc: function (ctx, shape) {
                 self.drawSourceShape(ctx, shape, true);
-            },
-            draggable: this._source.draggable,
-            dragBoundFunc: function () {
-                return self._onSourceGroupDrag(this);
             }
         }));
         wrap.add(background);
@@ -18358,6 +18342,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.destroy = function () {
         this._group.destroy();
     };
+    SourceGroup.prototype.getLine = function () {
+        return this._source.position;
+    };
     SourceGroup.prototype.createIndicators = function () {
         var newIndicatorsColors = this._source.indicators;
         var oldIndicators = this._indicators;

package/src/mode-layer.js

@@ -36,6 +36,7 @@ define([
     this._stage = stage;
 
     this._selectedElements = {};
+    this._currentLine = null;
 
     this._layer = new Konva.Layer({
       listening: this._mode !== 'default'
@@ -179,6 +180,12 @@ define([
 
   ModeLayer.prototype._onMouseClickInDefaultMode = function() {
     const hoveredKonvaElement = this._view.getHoveredElement();
+    const currentLine = hoveredKonvaElement && hoveredKonvaElement.getLine();
+
+    if (currentLine !== this._currentLine) {
+      this.deselectAll(true);
+      this._currentLine = currentLine;
+    }
 
     if (hoveredKonvaElement) {
       if (hoveredKonvaElement instanceof SourceGroup) {

package/src/segment-shape.js

@@ -88,20 +88,7 @@ define([
     this._shapeGroup.add(this._rectangle);
 
     this._shapeGroup.dragBoundFunc(function() {
-      var diff = self._view.getPointerPosition().x - self._mouseDownX;
-
-      self._group.updateSegment(
-        self._segment,
-        self._initialStartPixel + diff, self._initialEndPixel + diff
-      );
-
-      self._startMarker.timeUpdated(self._segment.startTime);
-      self._endMarker.timeUpdated(self._segment.endTime);
-
-      return {
-        x: this.absolutePosition().x,
-        y: this.absolutePosition().y
-      };
+      return self._onShapeGroupDrag(this);
     });
 
     // Set up event handlers to show/hide the segment label text when the user
@@ -137,6 +124,23 @@ define([
     this.createIndicators();
   }
 
+  SegmentShape.prototype._onShapeGroupDrag = function(draggedElement) {
+    const diff = this._view.getPointerPosition().x - this._mouseDownX;
+
+    this._group.updateSegment(
+      this._segment,
+      this._initialStartPixel + diff, this._initialEndPixel + diff
+    );
+
+    this._startMarker.timeUpdated(this._segment.startTime);
+    this._endMarker.timeUpdated(this._segment.endTime);
+
+    return {
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
+    };
+  };
+
   SegmentShape.prototype._cornerRadius = function() {
     return this._segment.borderRadius !== undefined && this._segment.borderRadius !== null ?
       this._segment.borderRadius :

package/src/source-group.js

@@ -60,10 +60,7 @@ define([
       x: this._x,
       draggable: this._source.draggable,
       dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
+        return self._onSourceGroupDrag(this);
       }
     });
 
@@ -421,13 +418,6 @@ define([
     var unwrap = new Konva.Group({
       width: this._width,
       height: this._unwrappedHeight,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      },
       clipFunc: function(ctx) {
         self.drawSourceShape(ctx, null, true);
       }
@@ -459,10 +449,6 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -501,13 +487,6 @@ define([
     var wrap = new Konva.Group({
       width: this._width,
       height: this._wrappedHeight,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      },
       clipFunc: function(ctx) {
         self.drawSourceShape(ctx, null, true);
       }
@@ -539,10 +518,6 @@ define([
       fill: this._source.backgroundColor,
       sceneFunc: function(ctx, shape) {
         self.drawSourceShape(ctx, shape, true);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
       }
     }));
 
@@ -1048,6 +1023,10 @@ define([
     this._group.destroy();
   };
 
+  SourceGroup.prototype.getLine = function() {
+    return this._source.position;
+  };
+
   SourceGroup.prototype.createIndicators = function() {
     var newIndicatorsColors = this._source.indicators;