@checksub_team/peaks_timeline 2.2.0-alpha.1 → 2.2.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "2.2.0-alpha.1",
+  "version": "2.2.0-alpha.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];
@@ -22393,7 +22396,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;
@@ -22469,13 +22473,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;
             }
@@ -22531,11 +22535,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;
     };
@@ -22620,8 +22631,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();
@@ -22921,6 +22938,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/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;