Changeset 34669 for gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js

Timestamp:

2021-01-15T15:29:05+13:00 (3 years ago)

Author:

davidb

Message:

Next step in development of spectrum renderer: now inherits from MultiCanvas

File:

• gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js (modified) (26 diffs)

gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js

@@ -1 @@
-import Drawer from './drawer';
+import MultiCanvas from './drawer.multicanvas';
 import * as util from './util';
 import CanvasEntry from './drawer.canvasentry';
@@ -228 +228 @@
  * on the zoom level.
  */
-export default class SpectrumMultiCanvas extends Drawer {
+export default class SpectrumMultiCanvas extends MultiCanvas {
     /**
      * @param {HTMLElement} container The container node of the wavesurfer instance
@@ -235 +235 @@
     constructor(container, params) {
         super(container, params);
-
-        /**
-         * @type {number}
-         */
-        this.maxCanvasWidth = params.maxCanvasWidth;
-
-        /**
-         * @type {number}
-         */
-        this.maxCanvasElementWidth = Math.round(
-            params.maxCanvasWidth / params.pixelRatio
-        );
-
-        /**
-         * Whether or not the progress wave is rendered. If the `waveColor`
-         * and `progressColor` are the same color it is not.
-         *
-         * @type {boolean}
-         */
-        this.hasProgressCanvas = params.waveColor != params.progressColor;
-
-        /**
-         * @type {number}
-         */
-        this.halfPixel = 0.5 / params.pixelRatio;
-
-        /**
-         * List of `CanvasEntry` instances.
-         *
-         * @type {Array}
-         */
-        this.canvases = [];
-
-        /**
-         * @type {HTMLElement}
-         */
-        this.progressWave = null;
-
-        /**
-         * Class used to generate entries.
-         *
-         * @type {function}
-         */
-        this.EntryClass = CanvasEntry;
-
-        /**
-         * Canvas 2d context attributes.
-         *
-         * @type {object}
-         */
-        this.canvasContextAttributes = params.drawingContextAttributes;
-
-        /**
-         * Overlap added between entries to prevent vertical white stripes
-         * between `canvas` elements.
-         *
-         * @type {number}
-         */
-        this.overlap = 2 * Math.ceil(params.pixelRatio / 2);
-
-        /**
-         * The radius of the wave bars. Makes bars rounded
-         *
-         * @type {number}
-         */
-        this.barRadius = params.barRadius || 0;
-
-
-            if (params.colorMap) {
-                if (params.colorMap.length < 256) {
-                    throw new Error('Colormap must contain 256 elements');
+    
+        if (params.colorMap) {
+            if (params.colorMap.length < 256) {
+                throw new Error('Colormap must contain 256 elements');
+            }
+            for (let i = 0; i < params.colorMap.length; i++) {
+                const cmEntry = params.colorMap[i];
+                if ((cmEntry.length !== 4) && (cmEntry.length !== 3)) {
+                    throw new Error(
+                        'ColorMap entries must contain 3 (rgb) or 4 (rgba) values'
+                    );
                 }
-                for (let i = 0; i < params.colorMap.length; i++) {
-                    const cmEntry = params.colorMap[i];
-                    if ((cmEntry.length !== 4) && (cmEntry.length !== 3)) {
-                        throw new Error(
-                            'ColorMap entries must contain 3 (rgb) or 4 (rgba) values'
-                        );
-                    }
-                }
-                this.colorMap = params.colorMap;
-            } else {
-                this.colorMap = [];
-                for (let i = 0; i < 256; i++) {
-                    const val = (255 - i) / 256;
-                    this.colorMap.push([val, val, val, 1]);
-                }
-            }
-    
+            }
+            this.colorMap = params.colorMap;
+        } else {
+            this.colorMap = [];
+            for (let i = 0; i < 256; i++) {
+                const val = (255 - i) / 256;
+                this.colorMap.push([val, val, val, 1]);
+            }
+        }   
     }
 
@@ -329 +261 @@
      * Initialize the drawer
      */
+    /*
     init() {
         this.createWrapper();
         this.createElements();
     }
-
+    */
+    
     /**
      * Create the canvas elements and style them
      *
      */
+    /*
     createElements() {
         this.progressWave = this.wrapper.appendChild(
@@ -357 +292 @@
         this.addCanvas();
         this.updateCursor();
-    }
+    }*/
 
     /**
      * Update cursor style
      */
+    
     updateCursor() {
         this.style(this.progressWave, {
-            borderRightWidth: this.params.cursorWidth + 'px',
-            borderRightColor: this.params.cursorColor
+            //borderRightWidth: this.params.cursorSpectrumWidth + 'px',
+            //borderRightColor: this.params.cursorSpectrumColor
+            borderRightWidth: '4px',
+            borderRightColor: 'rgba(255,255,255,0.3)'
         });
     }
-
+    
+    
     /**
      * Adjust to the updated size by adding or removing canvases
      */
+    /*
     updateSize() {
         const totalWidth = Math.round(this.width / this.params.pixelRatio);
@@ -399 +339 @@
         });
     }
-
+    */
+    
     /**
      * Add a canvas to the canvas list
      *
      */
+    /*
     addCanvas() {
         const entry = new this.EntryClass();
@@ -443 +385 @@
         this.canvases.push(entry);
     }
-
+    */
+    
     /**
      * Pop single canvas from the list
      *
      */
+    /*
     removeCanvas() {
         let lastEntry = this.canvases[this.canvases.length - 1];
@@ -467 +411 @@
         this.canvases.pop();
     }
-
+    */
+    
     /**
      * Update the dimensions of a canvas element
@@ -475 +420 @@
      * @param {number} height The new height of the element
      */
+    /*
     updateDimensions(entry, width, height) {
         const elementWidth = Math.round(width / this.params.pixelRatio);
@@ -485 +431 @@
         this.style(this.progressWave, { display: 'block' });
     }
-
+    */
+    
     /**
      * Clear the whole multi-canvas
      */
+    /*
     clearWave() {
         util.frame(() => {
@@ -494 +442 @@
         })();
     }
-
+*/
 
     drawPeaks(peaks, length, start, end) {
@@ -504 +452 @@
     }
 
-        resample(oldMatrix) {
+    resample(oldMatrix) {
         const columnsNumber = this.width;
         const newMatrix = [];
@@ -680 +628 @@
      * @returns {void}
      */
+    
     drawBars(peaks, channelIndex, start, end) {
         return this.prepareDraw(
@@ -745 +694 @@
      * @returns {void}
      */
+    /*
     drawWave(peaks, channelIndex, start, end) {
         return this.prepareDraw(
@@ -780 +730 @@
         );
     }
-
+    */
+    
     /**
      * Tell the canvas entries to render their portion of the waveform
@@ -794 +745 @@
      * @param {channelIndex} channelIndex The channel index of the line drawn
      */
+    /*
     drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex) {
         const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};
@@ -801 +753 @@
         });
     }
-
+    */
+    
     /**
      * Draw a rectangle on the multi-canvas
@@ -811 +764 @@
      * @param {number} radius Radius of the rectangle
      */
+    /*
     fillRect(x, y, width, height, radius) {
         const startCanvas = Math.floor(x / this.maxCanvasWidth);
@@ -845 +799 @@
         }
     }
-
+    */
+    
     /**
      * Returns whether to hide the channel from being drawn based on params.
@@ -852 +807 @@
      * @returns {bool} True to hide the channel, false to draw.
      */
+    /*
     hideChannel(channelIndex) {
         return this.params.splitChannels && this.params.splitChannelsOptions.filterChannels.includes(channelIndex);
     }
-
+    */
+    
     /**
      * Performs preparation tasks and calculations which are shared by `drawBars`
@@ -872 +829 @@
      * @returns {void}
      */
+    /*
     prepareDraw(peaks, channelIndex, start, end, fn, drawIndex) {
         return util.frame(() => {
@@ -928 +886 @@
         })();
     }
-
+    */
+    
     /**
      * Set the fill styles for a certain entry (wave and progress)
@@ -936 +895 @@
      * @param {string} progressColor Progress color to draw this entry
      */
+    /*
     setFillStyles(entry, waveColor = this.params.waveColor, progressColor = this.params.progressColor) {
         entry.setFillStyles(waveColor, progressColor);
     }
-
+*/
     /**
      * Return image data of the multi-canvas
@@ -954 +914 @@
      * canvas.
      */
+    /*
     getImage(format, quality, type) {
         if (type === 'blob') {
@@ -968 +929 @@
         }
     }
-
+    */
+    
     /**
      * Render the new progress
@@ -974 +936 @@
      * @param {number} position X-offset of progress position in pixels
      */
+    /*
     updateProgress(position) {
         this.style(this.progressWave, { width: position + 'px' });
     }
+*/
 }