From 7fd5a6d0f1686f4c5f171f6e48e0d54e784bbe19 Mon Sep 17 00:00:00 2001
From: agamemnus <agamemnus@users.noreply.github.com>
Date: Sun, 11 Jun 2017 10:23:14 -0400
Subject: [PATCH] Add pointerEvents: none to left/right sides. (#1112)

* Remove pointer events from the left and right sides of the wave and change `zIndex` to 2.

The reasoning behind this is to allow, for example, the region plugin to have a styling such that the regions are below the waves (so that the waves look clearer and not blended with the regions), while still allowing resize events on the regions. Otherwise, the left/right sections of the wave block the resize elements of the regions, since their `zIndex` needs to be necessarily higher to be drawn over the regions.
---
 src/drawer.canvas.js      | 6 ++++--
 src/drawer.multicanvas.js | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/drawer.canvas.js b/src/drawer.canvas.js
index 58a21a8c3..e92ac4b56 100644
--- a/src/drawer.canvas.js
+++ b/src/drawer.canvas.js
@@ -10,7 +10,8 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.Canvas, {
                 zIndex: 1,
                 left: 0,
                 top: 0,
-                bottom: 0
+                bottom: 0,
+                pointerEvents: 'none'
             })
         );
         this.waveCc = waveCanvas.getContext('2d');
@@ -28,7 +29,8 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.Canvas, {
                 boxSizing: 'border-box',
                 borderRightStyle: 'solid',
                 borderRightWidth: this.params.cursorWidth + 'px',
-                borderRightColor: this.params.cursorColor
+                borderRightColor: this.params.cursorColor,
+                pointerEvents: 'none'
             })
         );
 
diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js
index 76f91ade3..b88de95e9 100644
--- a/src/drawer.multicanvas.js
+++ b/src/drawer.multicanvas.js
@@ -33,7 +33,8 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, {
                 boxSizing: 'border-box',
                 borderRightStyle: 'solid',
                 borderRightWidth: this.params.cursorWidth + 'px',
-                borderRightColor: this.params.cursorColor
+                borderRightColor: this.params.cursorColor,
+                pointerEvents: 'none'
             })
         );
 
@@ -72,11 +73,12 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.MultiCanvas, {
         entry.wave = this.wrapper.appendChild(
             this.style(document.createElement('canvas'), {
                 position: 'absolute',
-                zIndex: 1,
+                zIndex: 2,
                 left: leftOffset + 'px',
                 top: 0,
                 bottom: 0,
-                height: '100%'
+                height: '100%',
+                pointerEvents: 'none'
             })
         );
         entry.waveCtx = entry.wave.getContext('2d');