@checksub_team/peaks_timeline 1.5.9 → 1.5.10

package/package.json

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

package/peaks.js

@@ -14306,6 +14306,7 @@ module.exports = function (Konva, Utils, SVGs) {
                 noVisibility: this._peaks.options.lineIndicatorNoVisibilityIconSize
             }
         };
+        this._yPadding = 30;
         this._defaultPadding = 5;
         this._types = ['default'].concat(Object.keys(SVGs));
         this._stage = new Konva.Stage({
@@ -14449,6 +14450,7 @@ module.exports = function (Konva, Utils, SVGs) {
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
         if (this._indicators[lineId]) {
             if (this._indicators[lineId].indicator) {
+                console.log('remove', lineId);
                 this._indicators[lineId].indicator.destroy();
             }
             if (!keepInList) {
@@ -14460,13 +14462,13 @@ module.exports = function (Konva, Utils, SVGs) {
     };
     LineIndicator.prototype.updateIndicator = function (lineId) {
         if (this._indicators[lineId]) {
-            var y = this._indicators[lineId].line.getY() + this._indicators[lineId].line.lineHeight() / 2;
-            if (y + this._indicators[lineId].line.lineHeight() > 0 && y < this._height) {
+            var y = this._indicators[lineId].line.getY();
+            if (y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0 && y - this._yPadding < this._height) {
                 if (!this._indicators[lineId].indicator) {
                     this._indicators[lineId].indicator = this._createIndicator(this._indicators[lineId].line, this._indicators[lineId].type, this._indicators[lineId].text);
                     this._layer.add(this._indicators[lineId].indicator);
                 } else {
-                    this._indicators[lineId].indicator.y(y - this._indicators[lineId].indicator.getAttr('trueHeight') / 2);
+                    this._indicators[lineId].indicator.y(y + this._indicators[lineId].line.lineHeight() / 2 - this._indicators[lineId].indicator.getAttr('trueHeight') / 2);
                 }
             } else {
                 this.removeIndicator(lineId, true);

package/src/line-indicator.js

@@ -45,6 +45,7 @@ define([
       }
     };
 
+    this._yPadding = 30;
     this._defaultPadding = 5;
     this._types = ['default'].concat(Object.keys(SVGs));
 
@@ -234,6 +235,7 @@ define([
   LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
     if (this._indicators[lineId]) {
       if (this._indicators[lineId].indicator) {
+        console.log('remove', lineId);
         this._indicators[lineId].indicator.destroy();
       }
       if (!keepInList) {
@@ -247,10 +249,9 @@ define([
 
   LineIndicator.prototype.updateIndicator = function(lineId) {
     if (this._indicators[lineId]) {
-      var y = this._indicators[lineId].line.getY()
-        + (this._indicators[lineId].line.lineHeight() / 2);
+      var y = this._indicators[lineId].line.getY();
 
-      if (y + this._indicators[lineId].line.lineHeight() > 0 && y < this._height) {
+      if (y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0 && y - this._yPadding < this._height) {
         // The indicator is visible
         if (!this._indicators[lineId].indicator) {
           this._indicators[lineId].indicator = this._createIndicator(
@@ -262,7 +263,8 @@ define([
         }
         else {
           this._indicators[lineId].indicator.y(
-            y - this._indicators[lineId].indicator.getAttr('trueHeight') / 2
+            y + this._indicators[lineId].line.lineHeight() / 2
+              - this._indicators[lineId].indicator.getAttr('trueHeight') / 2
           );
         }
       }