correcly calc the of the waveform on region zoom; resolve #825

.editorconfig

@@ -0,0 +1,6 @@
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4

example/zoom/main.js

@@ -17,6 +17,21 @@ document.addEventListener('DOMContentLoaded', function () {
     // Load audio from URL
     wavesurfer.load('../media/demo.wav');
 
+    wavesurfer.enableDragSelection({ slop: 5 });
+
+    wavesurfer.on('ready', function () {
+        wavesurfer.addRegion({
+            start: 0,
+            end: 5,
+            color: 'hsla(400, 100%, 30%, 0.1)'
+        });
+
+        wavesurfer.addRegion({
+            start: 10,
+            end: 100,
+            color: 'hsla(200, 50%, 70%, 0.1)'
+        });
+    });
 
     // Zoom slider
     var slider = document.querySelector('[data-action="zoom"]');

plugin/wavesurfer.regions.js

@@ -140,7 +140,10 @@ WaveSurfer.Region = {
 
         this.bindInOut();
         this.render();
-        this.wavesurfer.on('zoom', this.updateRender.bind(this));
+
+        this.onZoom = this.updateRender.bind(this);
+        this.wavesurfer.on('zoom', this.onZoom);
+
         this.wavesurfer.fireEvent('region-created', this);
 
     },
@@ -188,8 +191,8 @@ WaveSurfer.Region = {
         if (this.element) {
             this.wrapper.removeChild(this.element);
             this.element = null;
+            this.wavesurfer.un('zoom', this.onZoom);
             this.fireEvent('remove');
-            this.wavesurfer.un('zoom', this.updateRender.bind(this));
             this.wavesurfer.fireEvent('region-removed', this);
         }
     },
@@ -262,16 +265,14 @@ WaveSurfer.Region = {
         }).join('-');
     },
 
+    getWidth: function () {
+        return this.wavesurfer.drawer.width / this.wavesurfer.params.pixelRatio;
+    },
+
     /* Update element's position, width, color. */
-    updateRender: function (pxPerSec) {
+    updateRender: function () {
         var dur = this.wavesurfer.getDuration();
-        var width;
-        if (pxPerSec) {
-            width = Math.round(this.wavesurfer.getDuration() * pxPerSec);
-        }
-        else {
-            width = this.wrapper.scrollWidth;
-        }
+        var width = this.getWidth();
 
         if (this.start < 0) {
           this.start = 0;