Merge branch 'master' into master

Gary-Pan · Oct 31, 2017 · b5beec7 · b5beec7
2 parents ec66ad3 + 92ebd4b
commit b5beec7
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 56 deletions.
diff --git a/src/plugin/cursor.js b/src/plugin/cursor.js
@@ -1,6 +1,15 @@
 /**
  * @typedef {Object} CursorPluginParams
  * @property {?boolean} deferInit Set to true to stop auto init in `addPlugin()`
+ * @property {boolean} hideOnBlur=true Hide the cursor when the mouse leaves the
+ * waveform
+ * @property {string} width='1px' The width of the cursor
+ * @property {string} color='black' The color of the cursor
+ * @property {string} opacity='0.25' The opacity of the cursor
+ * @property {string} style='solid' The border style of the cursor
+ * @property {number} zIndex=3 The z-index of the cursor element
+ * @property {object} customStyle An object with custom styles which are applied
+ * to the cursor element
  */
 
 /**
@@ -54,85 +63,121 @@ export default class CursorPlugin {
         };
     }
 
+    /**
+     * @type {CursorPluginParams}
+     */
+    defaultParams = {
+        hideOnBlur: true,
+        width: '1px',
+        color: 'black',
+        opacity: '0.25',
+        style: 'solid',
+        zIndex: 4,
+        customStyle: {}
+    };
+
+    /** @private */
+    _onMousemove = e => {
+        const bbox = this.wavesurfer.container.getBoundingClientRect();
+        this.updateCursorPosition(e.clientX - bbox.left);
+    };
+    /** @private */
+    _onMouseenter = () => this.showCursor();
+    /** @private */
+    _onMouseleave = () => this.hideCursor();
+
+    /**
+     * Construct the plugin class. You probably want to use CursorPlugin.create
+     * instead.
+     *
+     * @param {CursorPluginParams} params
+     * @param {object} ws
+     */
     constructor(params, ws) {
+        /** @private */
         this.wavesurfer = ws;
+        /** @private */
         this.style = ws.util.style;
-        this._onDrawerCreated = () => {
-            this.drawer = this.wavesurfer.drawer;
-            this.wrapper = this.wavesurfer.drawer.wrapper;
-
-            this._onMousemove = e =>
-                this.updateCursorPosition(this.drawer.handleEvent(e));
-            this.wrapper.addEventListener('mousemove', this._onMousemove);
-
-            this._onMouseenter = () => this.showCursor();
-            this.wrapper.addEventListener('mouseenter', this._onMouseenter);
-
-            this._onMouseleave = () => this.hideCursor();
-            this.wrapper.addEventListener('mouseleave', this._onMouseleave);
-
-            this.cursor = this.wrapper.appendChild(
-                this.style(document.createElement('wave'), {
-                    position: 'absolute',
-                    zIndex: 3,
-                    left: 0,
-                    top: 0,
-                    bottom: 0,
-                    width: '0',
-                    display: 'block',
-                    borderRightStyle: 'solid',
-                    borderRightWidth: 1 + 'px',
-                    borderRightColor: 'black',
-                    opacity: '.25',
-                    pointerEvents: 'none'
-                })
-            );
-        };
+        /**
+         * The cursor html element
+         *
+         * @type {?HTMLElement}
+         */
+        this.cursor = null;
+        /** @private */
+        this.params = ws.util.extend({}, this.defaultParams, params);
     }
 
+    /**
+     * Initialise the plugin (used by the Plugin API)
+     */
     init() {
-        // drawer already existed, just call initialisation code
-        if (this.wavesurfer.drawer) {
-            this._onDrawerCreated();
-        }
+        const wrapper = this.wavesurfer.container;
+        this.cursor = wrapper.appendChild(
+            this.style(
+                document.createElement('cursor'),
+                this.wavesurfer.util.extend(
+                    {
+                        position: 'absolute',
+                        zIndex: this.params.zIndex,
+                        left: 0,
+                        top: 0,
+                        bottom: 0,
+                        width: '0',
+                        display: 'block',
+                        borderRightStyle: this.params.style,
+                        borderRightWidth: this.params.width,
+                        borderRightColor: this.params.color,
+                        opacity: this.params.opacity,
+                        pointerEvents: 'none'
+                    },
+                    this.params.customStyle
+                )
+            )
+        );
 
-        // the drawer was initialised, call the initialisation code
-        this.wavesurfer.on('drawer-created', this._onDrawerCreated);
+        wrapper.addEventListener('mousemove', this._onMousemove);
+        if (this.params.hideOnBlur) {
+            wrapper.addEventListener('mouseenter', this._onMouseenter);
+            wrapper.addEventListener('mouseleave', this._onMouseleave);
+        }
     }
 
+    /**
+     * Destroy the plugin (used by the Plugin API)
+     */
     destroy() {
-        this.wavesurfer.un('drawer-created', this._onDrawerCreated);
-
-        // if cursor was appended, remove it
-        if (this.cursor) {
-            this.cursor.parentNode.removeChild(this.cursor);
-        }
-
-        // if the drawer existed (the cached version referenced in the init code),
-        // remove the event listeners attached to it
-        if (this.drawer) {
-            this.wrapper.removeEventListener('mousemove', this._onMousemove);
+        this.cursor.parentNode.removeChild(this.cursor);
+        this.wrapper.removeEventListener('mousemove', this._onMousemove);
+        if (this.params.hideOnBlur) {
             this.wrapper.removeEventListener('mouseenter', this._onMouseenter);
             this.wrapper.removeEventListener('mouseleave', this._onMouseleave);
         }
     }
 
-    updateCursorPosition(progress) {
-        const pos =
-            Math.round(this.drawer.width * progress) /
-                this.drawer.params.pixelRatio -
-            1;
+    /**
+     * Update the cursor position
+     *
+     * @param {number} pos The x offset of the cursor in pixels
+     */
+    updateCursorPosition(pos) {
         this.style(this.cursor, {
             left: `${pos}px`
         });
     }
 
+    /**
+     * Show the cursor
+     */
     showCursor() {
         this.style(this.cursor, {
             display: 'block'
         });
     }
 
+    /**
+     * Hide the cursor
+     */
     hideCursor() {
         this.style(this.cursor, {
             display: 'none'

diff --git a/src/plugin/timeline.js b/src/plugin/timeline.js
@@ -362,14 +362,13 @@ export default class TimelinePlugin {
     fillText(text, x, y) {
         let textWidth;
         let xOffset = 0;
-        let i;
 
         this.canvases.forEach(canvas => {
             const context = canvas.getContext('2d');
             const canvasWidth = context.canvas.width;
 
             if (xOffset > x + textWidth) {
-                break;
+                return;
             }
 
             if (xOffset + canvasWidth > x) {
@@ -378,6 +377,6 @@ export default class TimelinePlugin {
             }
 
             xOffset += canvasWidth;
-        }
+        });
     }
 }