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.
katspaugh · Jun 11, 2017 · 7fd5a6d · 7fd5a6d
1 parent 828a43e
commit 7fd5a6d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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');