@checksub_team/peaks_timeline 2.1.0 → 2.1.2

package/package.json

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

package/peaks.js

@@ -16326,6 +16326,9 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
         }
     };
     ModeLayer.prototype._onKeyboardDelete = function () {
+        if (!this._view.isFocusedByClick()) {
+            return;
+        }
         const selectedElements = Object.values(this._selectedElements);
         if (selectedElements.length === 1) {
             var selectedElement = selectedElements[0];
@@ -16723,7 +16726,7 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._createPlayheadText = function (color) {
         this._playheadText = new Konva.Text({
             x: 13,
-            y: 3,
+            y: 10,
             text: '00:00:00',
             fontSize: 11,
             fontFamily: 'sans-serif',
@@ -16737,21 +16740,28 @@ module.exports = function (Utils, Konva) {
         this._syncPlayhead(time);
     };
     PlayheadLayer.prototype._syncPlayhead = function (time) {
-        if (this._time === time) {
-            return;
+        const pixelHasChanged = this._updatePlayheadPixel(time);
+        const timeHasChanged = this._time !== time;
+        if (timeHasChanged) {
+            this._updateActiveSegmentsAndSources(time);
+            this._updatePlayheadText(time);
         }
         this._time = time;
-        this._updatePlayheadPixel(time);
-        this._updateActiveSegmentsAndSources(time);
-        this._updatePlayheadText(time);
-        this._playheadLayer.batchDraw();
+        if (pixelHasChanged || timeHasChanged) {
+            this._playheadLayer.batchDraw();
+        }
     };
     PlayheadLayer.prototype._updatePlayheadPixel = function (time) {
         const pixelIndex = this._view.timeToPixels(time);
         const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
         this._playheadPixel = pixelIndex;
         const playheadX = this._playheadPixel - frameOffset;
-        this._playheadGroup.setAttr('x', playheadX);
+        const oldX = this._playheadGroup.getAttr('x');
+        const shouldUpdateX = oldX !== playheadX;
+        if (shouldUpdateX) {
+            this._playheadGroup.setAttr('x', playheadX);
+        }
+        return shouldUpdateX;
     };
     PlayheadLayer.prototype._updateActiveSegmentsAndSources = function (time) {
         const lineGroups = this._lines.getLineGroupsById();
@@ -16795,7 +16805,6 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._updatePlayheadText = function (time) {
         var text = Utils.formatTime(time, false);
         this._playheadText.setText(text);
-        this._peaks.emit('playhead.moved', this._playheadText.getAbsolutePosition().x, this._playheadText.width());
     };
     PlayheadLayer.prototype.getPlayheadOffset = function () {
         return this._playheadPixel - this._view.getFrameOffset();
@@ -22373,7 +22382,8 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._timelineLength = 0;
         self._timeToPixelsScale = self._options.initialZoomLevel;
         self._timeToPixelsMinScale = self._options.minScale;
-        self._isFocused = false;
+        self._focusedByHover = false;
+        self._focusedByClick = false;
         self._isClickable = true;
         self._width = container.clientWidth;
         self._height = container.clientHeight || self._options.height;
@@ -22449,13 +22459,13 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             }
         });
         this._stage.on('mouseover', function () {
-            self._isFocused = true;
+            self._focusedByHover = true;
         });
         this._stage.on('mouseout', function () {
-            self._isFocused = false;
+            self._focusedByHover = false;
         });
         this._stage.on('click', function (event) {
-            self._isFocused = true;
+            self._focusedByClick = true;
             if (!self._isClickable) {
                 return;
             }
@@ -22511,11 +22521,18 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         window.addEventListener('mouseup', this._mouseUp.bind(this), false);
         window.addEventListener('touchend', this._mouseUp.bind(this), false);
         window.addEventListener('blur', this._mouseUp.bind(this), false);
+        this._onWindowClick = this._onWindowClick.bind(this);
+        window.addEventListener('click', this._onWindowClick, false);
     }
     View.prototype._mouseUp = function () {
         this.clearScrollingInterval();
         this._peaks.emit('handler.view.mouseup');
     };
+    View.prototype._onWindowClick = function (event) {
+        if (!this._container.contains(event.target)) {
+            this._focusedByClick = false;
+        }
+    };
     View.prototype.setClickable = function (clickable) {
         this._isClickable = clickable;
     };
@@ -22600,8 +22617,14 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     View.prototype.isListening = function () {
         return this._stage.listening();
     };
+    View.prototype.isFocusedByHover = function () {
+        return this._focusedByHover;
+    };
+    View.prototype.isFocusedByClick = function () {
+        return this._focusedByClick;
+    };
     View.prototype.isFocused = function () {
-        return this._isFocused;
+        return this._focusedByHover || this._focusedByClick;
     };
     View.prototype.batchDrawSourcesLayer = function () {
         this._sourcesLayer.batchDraw();
@@ -22901,6 +22924,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this._peaks.off('handler.keyboard.shiftright', this._onKeyboardShiftRight);
         this._peaks.off('handler.view.defaultmode', this._onDefaultMode);
         this._peaks.off('handler.view.cutmode', this._onCutMode);
+        window.removeEventListener('click', this._onWindowClick, false);
         if (this._stage) {
             this._stage.destroy();
             this._stage = null;

package/src/components/mode-layer.js

@@ -234,6 +234,10 @@ define([
   };
 
   ModeLayer.prototype._onKeyboardDelete = function() {
+    if (!this._view.isFocusedByClick()) {
+      return;
+    }
+
     const selectedElements = Object.values(this._selectedElements);
 
     // We allow deletion if there is ONLY 1 element selected

package/src/components/playhead-layer.js

@@ -196,7 +196,7 @@ define([
     // Create with default y, the real value is set in fitToView().
     this._playheadText = new Konva.Text({
       x: 13,
-      y: 3,
+      y: 10,
       text: '00:00:00',
       fontSize: 11,
       fontFamily: 'sans-serif',
@@ -226,15 +226,18 @@ define([
    */
 
   PlayheadLayer.prototype._syncPlayhead = function(time) {
-    if (this._time === time) {
-      return;
+    const pixelHasChanged = this._updatePlayheadPixel(time);
+    const timeHasChanged = this._time !== time;
+
+    if (timeHasChanged) {
+      this._updateActiveSegmentsAndSources(time);
+      this._updatePlayheadText(time);
     }
 
     this._time = time;
-    this._updatePlayheadPixel(time);
-    this._updateActiveSegmentsAndSources(time);
-    this._updatePlayheadText(time);
-    this._playheadLayer.batchDraw();
+    if (pixelHasChanged || timeHasChanged) {
+      this._playheadLayer.batchDraw();
+    }
   };
 
   /**
@@ -249,8 +252,15 @@ define([
 
     this._playheadPixel = pixelIndex;
     const playheadX = this._playheadPixel - frameOffset;
+    const oldX = this._playheadGroup.getAttr('x');
+
+    const shouldUpdateX = oldX !== playheadX;
+
+    if (shouldUpdateX) {
+      this._playheadGroup.setAttr('x', playheadX);
+    }
 
-    this._playheadGroup.setAttr('x', playheadX);
+    return shouldUpdateX;
   };
 
   /**
@@ -328,11 +338,6 @@ define([
     var text = Utils.formatTime(time, false);
 
     this._playheadText.setText(text);
-    this._peaks.emit(
-      'playhead.moved',
-      this._playheadText.getAbsolutePosition().x,
-      this._playheadText.width()
-    );
   };
 
   /**

package/src/view.js

@@ -79,7 +79,8 @@ define([
     self._timeToPixelsScale = self._options.initialZoomLevel;
     self._timeToPixelsMinScale = self._options.minScale;
 
-    self._isFocused = false;
+    self._focusedByHover = false;
+    self._focusedByClick = false; // Track if focus was set by click
     self._isClickable = true;
 
     self._width = container.clientWidth;
@@ -205,15 +206,15 @@ define([
     });
 
     this._stage.on('mouseover', function() {
-      self._isFocused = true;
+      self._focusedByHover = true;
     });
 
     this._stage.on('mouseout', function() {
-      self._isFocused = false;
+      self._focusedByHover = false;
     });
 
     this._stage.on('click', function(event) {
-      self._isFocused = true;
+      self._focusedByClick = true;
 
       if (!self._isClickable) {
         return;
@@ -307,6 +308,10 @@ define([
     window.addEventListener('mouseup', this._mouseUp.bind(this), false);
     window.addEventListener('touchend', this._mouseUp.bind(this), false);
     window.addEventListener('blur', this._mouseUp.bind(this), false);
+
+    // Handle clicks outside the timeline to remove focus
+    this._onWindowClick = this._onWindowClick.bind(this);
+    window.addEventListener('click', this._onWindowClick, false);
   }
 
   View.prototype._mouseUp = function() {
@@ -314,6 +319,12 @@ define([
     this._peaks.emit('handler.view.mouseup');
   };
 
+  View.prototype._onWindowClick = function(event) {
+    if (!this._container.contains(event.target)) {
+      this._focusedByClick = false;
+    }
+  };
+
   View.prototype.setClickable = function(clickable) {
     this._isClickable = clickable;
   };
@@ -430,8 +441,16 @@ define([
     return this._stage.listening();
   };
 
+  View.prototype.isFocusedByHover = function() {
+    return this._focusedByHover;
+  };
+
+  View.prototype.isFocusedByClick = function() {
+    return this._focusedByClick;
+  };
+
   View.prototype.isFocused = function() {
-    return this._isFocused;
+    return this._focusedByHover || this._focusedByClick;
   };
 
   View.prototype.batchDrawSourcesLayer = function() {
@@ -900,6 +919,9 @@ define([
     this._peaks.off('handler.view.defaultmode', this._onDefaultMode);
     this._peaks.off('handler.view.cutmode', this._onCutMode);
 
+    // Remove window click listener
+    window.removeEventListener('click', this._onWindowClick, false);
+
     if (this._stage) {
       this._stage.destroy();
       this._stage = null;