@checksub_team/peaks_timeline 1.15.0 → 1.15.1-alpha.0

package/package.json

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

package/peaks.js

@@ -16078,6 +16078,9 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.getSelectedElements = function () {
         return this.view.getSelectedElements();
     };
+    Peaks.prototype.getSourceGroupById = function (id) {
+        return this.view.getSourceGroupById(id);
+    };
     Peaks.prototype.selectSourceById = function (sourceId) {
         return this.view.selectSourceById(sourceId);
     };
@@ -18840,6 +18843,19 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.getLine = function () {
         return this._source.position;
     };
+    SourceGroup.prototype.getAbsoluteBoundingBox = function () {
+        var stageContainer = this._group.getStage().container();
+        var containerRect = stageContainer.getBoundingClientRect();
+        var elementPos = this._group.getAbsolutePosition();
+        return {
+            x: containerRect.left + elementPos.x,
+            y: containerRect.top + elementPos.y,
+            width: this._width,
+            height: this._height,
+            pageX: containerRect.left + elementPos.x + window.pageXOffset,
+            pageY: containerRect.top + elementPos.y + window.pageYOffset
+        };
+    };
     SourceGroup.prototype.createIndicators = function () {
         var newIndicatorsColors = this._source.indicators;
         var oldIndicators = this._indicators;
@@ -18916,7 +18932,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var buttonsGap = this._peaks.options.sourceButtonsGap;
         var self = this;
         this._source.buttons.forEach(function (button) {
-            const {id, width, height, cornerRadius, color, borderColor, borderWidth, svg, image} = button;
+            const {id, width, height, cornerRadius, color, hoverColor, borderColor, borderWidth, svg, image} = button;
             if (buttonsGroupWidth > 0) {
                 buttonsGroupWidth += buttonsGap;
             }
@@ -18962,16 +18978,20 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 };
                 imageObj.src = image.data;
             }
-            if (button.hoverColor) {
-                buttonGroup.on('mouseover', function () {
-                    buttonRect.fill(button.hoverColor);
+            buttonGroup.on('mouseover', function () {
+                if (hoverColor) {
+                    buttonRect.fill(hoverColor);
                     buttonGroup.draw();
-                });
-                buttonGroup.on('mouseout', function () {
-                    buttonRect.fill(button.color);
+                }
+                self._peaks.emit('source.buttonEnter', self._source, id);
+            });
+            buttonGroup.on('mouseout', function () {
+                if (buttonRect.fill() !== color) {
+                    buttonRect.fill(color);
                     buttonGroup.draw();
-                });
-            }
+                }
+                self._peaks.emit('source.buttonLeave', self._source, id);
+            });
             buttonGroup.on('click', function () {
                 self._peaks.emit('source.buttonClicked', self._source, id);
             });
@@ -21282,6 +21302,9 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     TimelineZoomView.prototype.getSelectedElements = function () {
         return this._modeLayer.getSelectedElements();
     };
+    TimelineZoomView.prototype.getSourceGroupById = function (sourceId) {
+        return this._sourcesLayer.getSourceGroupById(sourceId);
+    };
     TimelineZoomView.prototype.selectSourceById = function (sourceId) {
         const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
         if (sourceGroup) {

package/src/main.js

@@ -734,6 +734,11 @@ define([
             .getSelectedElements();
   };
 
+  Peaks.prototype.getSourceGroupById = function(id) {
+    return this.view
+            .getSourceGroupById(id);
+  };
+
   Peaks.prototype.selectSourceById = function(sourceId) {
     return this.view
             .selectSourceById(sourceId);

package/src/source-group.js

@@ -1025,6 +1025,22 @@ define([
     return this._source.position;
   };
 
+  SourceGroup.prototype.getAbsoluteBoundingBox = function() {
+    var stageContainer = this._group.getStage().container();
+    var containerRect = stageContainer.getBoundingClientRect();
+
+    var elementPos = this._group.getAbsolutePosition();
+
+    return {
+      x: containerRect.left + elementPos.x,
+      y: containerRect.top + elementPos.y,
+      width: this._width,
+      height: this._height,
+      pageX: containerRect.left + elementPos.x + window.pageXOffset,
+      pageY: containerRect.top + elementPos.y + window.pageYOffset
+    };
+  };
+
   SourceGroup.prototype.createIndicators = function() {
     var newIndicatorsColors = this._source.indicators;
 
@@ -1126,6 +1142,7 @@ define([
         height,
         cornerRadius,
         color,
+        hoverColor,
         borderColor,
         borderWidth,
         svg,
@@ -1188,17 +1205,21 @@ define([
         imageObj.src = image.data;
       }
 
-      if (button.hoverColor) {
-        buttonGroup.on('mouseover', function() {
-          buttonRect.fill(button.hoverColor);
+      buttonGroup.on('mouseover', function() {
+        if (hoverColor) {
+          buttonRect.fill(hoverColor);
           buttonGroup.draw();
-        });
+        }
+        self._peaks.emit('source.buttonEnter', self._source, id);
+      });
 
-        buttonGroup.on('mouseout', function() {
-          buttonRect.fill(button.color);
+      buttonGroup.on('mouseout', function() {
+        if (buttonRect.fill() !== color) {
+          buttonRect.fill(color);
           buttonGroup.draw();
-        });
-      }
+        }
+        self._peaks.emit('source.buttonLeave', self._source, id);
+      });
 
       buttonGroup.on('click', function() {
         self._peaks.emit('source.buttonClicked', self._source, id);

package/src/timeline-zoomview.js

@@ -384,6 +384,10 @@ define([
     return this._modeLayer.getSelectedElements();
   };
 
+  TimelineZoomView.prototype.getSourceGroupById = function(sourceId) {
+    return this._sourcesLayer.getSourceGroupById(sourceId);
+  };
+
   TimelineZoomView.prototype.selectSourceById = function(sourceId) {
     const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);