Changeset 34669
- Timestamp:
- 2021-01-15T15:29:05+13:00 (3 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js
r34668 r34669 1 import Drawer from './drawer';1 import MultiCanvas from './drawer.multicanvas'; 2 2 import * as util from './util'; 3 3 import CanvasEntry from './drawer.canvasentry'; … … 228 228 * on the zoom level. 229 229 */ 230 export default class SpectrumMultiCanvas extends Drawer{230 export default class SpectrumMultiCanvas extends MultiCanvas { 231 231 /** 232 232 * @param {HTMLElement} container The container node of the wavesurfer instance … … 235 235 constructor(container, params) { 236 236 super(container, params); 237 238 /** 239 * @type {number} 240 */ 241 this.maxCanvasWidth = params.maxCanvasWidth; 242 243 /** 244 * @type {number} 245 */ 246 this.maxCanvasElementWidth = Math.round( 247 params.maxCanvasWidth / params.pixelRatio 248 ); 249 250 /** 251 * Whether or not the progress wave is rendered. If the `waveColor` 252 * and `progressColor` are the same color it is not. 253 * 254 * @type {boolean} 255 */ 256 this.hasProgressCanvas = params.waveColor != params.progressColor; 257 258 /** 259 * @type {number} 260 */ 261 this.halfPixel = 0.5 / params.pixelRatio; 262 263 /** 264 * List of `CanvasEntry` instances. 265 * 266 * @type {Array} 267 */ 268 this.canvases = []; 269 270 /** 271 * @type {HTMLElement} 272 */ 273 this.progressWave = null; 274 275 /** 276 * Class used to generate entries. 277 * 278 * @type {function} 279 */ 280 this.EntryClass = CanvasEntry; 281 282 /** 283 * Canvas 2d context attributes. 284 * 285 * @type {object} 286 */ 287 this.canvasContextAttributes = params.drawingContextAttributes; 288 289 /** 290 * Overlap added between entries to prevent vertical white stripes 291 * between `canvas` elements. 292 * 293 * @type {number} 294 */ 295 this.overlap = 2 * Math.ceil(params.pixelRatio / 2); 296 297 /** 298 * The radius of the wave bars. Makes bars rounded 299 * 300 * @type {number} 301 */ 302 this.barRadius = params.barRadius || 0; 303 304 305 if (params.colorMap) { 306 if (params.colorMap.length < 256) { 307 throw new Error('Colormap must contain 256 elements'); 237 238 if (params.colorMap) { 239 if (params.colorMap.length < 256) { 240 throw new Error('Colormap must contain 256 elements'); 241 } 242 for (let i = 0; i < params.colorMap.length; i++) { 243 const cmEntry = params.colorMap[i]; 244 if ((cmEntry.length !== 4) && (cmEntry.length !== 3)) { 245 throw new Error( 246 'ColorMap entries must contain 3 (rgb) or 4 (rgba) values' 247 ); 308 248 } 309 for (let i = 0; i < params.colorMap.length; i++) { 310 const cmEntry = params.colorMap[i]; 311 if ((cmEntry.length !== 4) && (cmEntry.length !== 3)) { 312 throw new Error( 313 'ColorMap entries must contain 3 (rgb) or 4 (rgba) values' 314 ); 315 } 316 } 317 this.colorMap = params.colorMap; 318 } else { 319 this.colorMap = []; 320 for (let i = 0; i < 256; i++) { 321 const val = (255 - i) / 256; 322 this.colorMap.push([val, val, val, 1]); 323 } 324 } 325 249 } 250 this.colorMap = params.colorMap; 251 } else { 252 this.colorMap = []; 253 for (let i = 0; i < 256; i++) { 254 const val = (255 - i) / 256; 255 this.colorMap.push([val, val, val, 1]); 256 } 257 } 326 258 } 327 259 … … 329 261 * Initialize the drawer 330 262 */ 263 /* 331 264 init() { 332 265 this.createWrapper(); 333 266 this.createElements(); 334 267 } 335 268 */ 269 336 270 /** 337 271 * Create the canvas elements and style them 338 272 * 339 273 */ 274 /* 340 275 createElements() { 341 276 this.progressWave = this.wrapper.appendChild( … … 357 292 this.addCanvas(); 358 293 this.updateCursor(); 359 } 294 }*/ 360 295 361 296 /** 362 297 * Update cursor style 363 298 */ 299 364 300 updateCursor() { 365 301 this.style(this.progressWave, { 366 borderRightWidth: this.params.cursorWidth + 'px', 367 borderRightColor: this.params.cursorColor 302 //borderRightWidth: this.params.cursorSpectrumWidth + 'px', 303 //borderRightColor: this.params.cursorSpectrumColor 304 borderRightWidth: '4px', 305 borderRightColor: 'rgba(255,255,255,0.3)' 368 306 }); 369 307 } 370 308 309 371 310 /** 372 311 * Adjust to the updated size by adding or removing canvases 373 312 */ 313 /* 374 314 updateSize() { 375 315 const totalWidth = Math.round(this.width / this.params.pixelRatio); … … 399 339 }); 400 340 } 401 341 */ 342 402 343 /** 403 344 * Add a canvas to the canvas list 404 345 * 405 346 */ 347 /* 406 348 addCanvas() { 407 349 const entry = new this.EntryClass(); … … 443 385 this.canvases.push(entry); 444 386 } 445 387 */ 388 446 389 /** 447 390 * Pop single canvas from the list 448 391 * 449 392 */ 393 /* 450 394 removeCanvas() { 451 395 let lastEntry = this.canvases[this.canvases.length - 1]; … … 467 411 this.canvases.pop(); 468 412 } 469 413 */ 414 470 415 /** 471 416 * Update the dimensions of a canvas element … … 475 420 * @param {number} height The new height of the element 476 421 */ 422 /* 477 423 updateDimensions(entry, width, height) { 478 424 const elementWidth = Math.round(width / this.params.pixelRatio); … … 485 431 this.style(this.progressWave, { display: 'block' }); 486 432 } 487 433 */ 434 488 435 /** 489 436 * Clear the whole multi-canvas 490 437 */ 438 /* 491 439 clearWave() { 492 440 util.frame(() => { … … 494 442 })(); 495 443 } 496 444 */ 497 445 498 446 drawPeaks(peaks, length, start, end) { … … 504 452 } 505 453 506 454 resample(oldMatrix) { 507 455 const columnsNumber = this.width; 508 456 const newMatrix = []; … … 680 628 * @returns {void} 681 629 */ 630 682 631 drawBars(peaks, channelIndex, start, end) { 683 632 return this.prepareDraw( … … 745 694 * @returns {void} 746 695 */ 696 /* 747 697 drawWave(peaks, channelIndex, start, end) { 748 698 return this.prepareDraw( … … 780 730 ); 781 731 } 782 732 */ 733 783 734 /** 784 735 * Tell the canvas entries to render their portion of the waveform … … 794 745 * @param {channelIndex} channelIndex The channel index of the line drawn 795 746 */ 747 /* 796 748 drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex) { 797 749 const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {}; … … 801 753 }); 802 754 } 803 755 */ 756 804 757 /** 805 758 * Draw a rectangle on the multi-canvas … … 811 764 * @param {number} radius Radius of the rectangle 812 765 */ 766 /* 813 767 fillRect(x, y, width, height, radius) { 814 768 const startCanvas = Math.floor(x / this.maxCanvasWidth); … … 845 799 } 846 800 } 847 801 */ 802 848 803 /** 849 804 * Returns whether to hide the channel from being drawn based on params. … … 852 807 * @returns {bool} True to hide the channel, false to draw. 853 808 */ 809 /* 854 810 hideChannel(channelIndex) { 855 811 return this.params.splitChannels && this.params.splitChannelsOptions.filterChannels.includes(channelIndex); 856 812 } 857 813 */ 814 858 815 /** 859 816 * Performs preparation tasks and calculations which are shared by `drawBars` … … 872 829 * @returns {void} 873 830 */ 831 /* 874 832 prepareDraw(peaks, channelIndex, start, end, fn, drawIndex) { 875 833 return util.frame(() => { … … 928 886 })(); 929 887 } 930 888 */ 889 931 890 /** 932 891 * Set the fill styles for a certain entry (wave and progress) … … 936 895 * @param {string} progressColor Progress color to draw this entry 937 896 */ 897 /* 938 898 setFillStyles(entry, waveColor = this.params.waveColor, progressColor = this.params.progressColor) { 939 899 entry.setFillStyles(waveColor, progressColor); 940 900 } 941 901 */ 942 902 /** 943 903 * Return image data of the multi-canvas … … 954 914 * canvas. 955 915 */ 916 /* 956 917 getImage(format, quality, type) { 957 918 if (type === 'blob') { … … 968 929 } 969 930 } 970 931 */ 932 971 933 /** 972 934 * Render the new progress … … 974 936 * @param {number} position X-offset of progress position in pixels 975 937 */ 938 /* 976 939 updateProgress(position) { 977 940 this.style(this.progressWave, { width: position + 'px' }); 978 941 } 942 */ 979 943 }
Note:
See TracChangeset
for help on using the changeset viewer.