From 4ee2b2986b6d3ff824e390c24889fafa64967b37 Mon Sep 17 00:00:00 2001
From: katspaugh <ivan@mycs.com>
Date: Sat, 19 Nov 2016 19:09:01 +0100
Subject: [PATCH] correcly calc the of the waveform on region zoom; resolve
 #825

---
 .editorconfig                |  6 ++++++
 example/zoom/main.js         | 15 +++++++++++++++
 plugin/wavesurfer.regions.js | 21 +++++++++++----------
 3 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..ee13034f1
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,6 @@
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
\ No newline at end of file
diff --git a/example/zoom/main.js b/example/zoom/main.js
index b0329be3f..ba488e416 100644
--- a/example/zoom/main.js
+++ b/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"]');
diff --git a/plugin/wavesurfer.regions.js b/plugin/wavesurfer.regions.js
index ffac135ad..b7b4dac8d 100755
--- a/plugin/wavesurfer.regions.js
+++ b/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;