markers plugin: check for event after every add/remove (#2599)

* #2560 check for event after every add/remove

* Updated for lint issues

* Fixed events after re-registration

* Add changelog entry

Author: rstefek

CHANGES.md

@@ -1,6 +1,10 @@
 wavesurfer.js changelog
 =======================
 
+6.4.0 (unreleased)
+------------------
+- Markers plugin: check for event after every add/remove (#2560)
+
 6.3.0 (03.10.2022)
 ------------------
 - Fix `barMinHeight` option not setting the minimum bar height properly (#2522)

src/plugin/markers/index.js

@@ -173,6 +173,8 @@ export default class MarkersPlugin {
         this.markers.push(marker);
         this._updateMarkerPositions();
 
+        this._registerEvents();
+
         return marker;
     }
 
@@ -201,6 +203,8 @@ export default class MarkersPlugin {
 
         this.wrapper.removeChild(marker.el);
         this.markers.splice(index, 1);
+
+        this._unregisterEvents();
     }
 
     _createPointerSVG(color, position) {
@@ -390,6 +394,37 @@ export default class MarkersPlugin {
         this.wavesurfer.fireEvent("marker-drop", this.selectedMarker, event);
     }
 
+    _registerEvents() {
+        if (!this.markers.find(marker => marker.draggable)) {
+            return;
+        }
+        //we have some draggable markers, check for listeners
+        if (!this.onMouseMove) {
+            this.onMouseMove = (e) => this._onMouseMove(e);
+            window.addEventListener('mousemove', this.onMouseMove);
+        }
+
+        if (!this.onMouseUp) {
+            this.onMouseUp = (e) => this._onMouseUp(e);
+            window.addEventListener("mouseup", this.onMouseUp);
+        }
+    }
+
+    _unregisterEvents() {
+        if (this.markers.find(marker => marker.draggable)) {
+            return;
+        }
+        //we don't have any draggable markers, unregister listeners
+        if (this.onMouseMove) {
+            window.removeEventListener('mousemove', this.onMouseMove);
+            this.onMouseMove = null;
+        }
+        if (this.onMouseUp) {
+            window.removeEventListener("mouseup", this.onMouseUp);
+            this.onMouseUp = null;
+        }
+    }
+
     /**
      * Remove all markers
      */