Feat: added rounded bars

dist/waveform-playlist/js/bars.js

@@ -24,6 +24,7 @@ playlist = WaveformPlaylist.init({
   },
   barWidth: 3,
   barGap: 1,
+  rounded: true,
 });
 
 playlist.load([

src/Playlist.js

@@ -162,6 +162,10 @@ export default class {
     this.barGap = width;
   }
 
+  setRounded(rounded) {
+    this.rounded = rounded;
+  }
+
   setAnnotations(config) {
     const controlWidth = this.controls.show ? this.controls.width : 0;
     this.annotationList = new AnnotationList(
@@ -931,6 +935,7 @@ export default class {
       colors: this.colors,
       barWidth: this.barWidth,
       barGap: this.barGap,
+      rounded: this.rounded,
     };
 
     return _defaults({}, data, defaults);
@@ -977,6 +982,7 @@ export default class {
           height: collapsed ? this.collapsedWaveHeight : this.waveHeight,
           barGap: this.barGap,
           barWidth: this.barWidth,
+          rounded: this.rounded,
         })
       );
     });

src/Track.js

@@ -579,7 +579,8 @@ export default class {
               scale,
               data.height,
               data.barWidth,
-              data.barGap
+              data.barGap,
+              data.rounded
             ),
           })
         );

src/app.js

@@ -43,6 +43,7 @@ export function init(options = {}, ee = EventEmitter()) {
     collapsedWaveHeight: 30,
     barWidth: 1,
     barGap: 0,
+    rounded: false,
     state: "cursor",
     zoomLevels: [512, 1024, 2048, 4096],
     annotationList: {
@@ -85,6 +86,7 @@ export function init(options = {}, ee = EventEmitter()) {
   playlist.setAnnotations(config.annotationList);
   playlist.setBarGap(config.barGap);
   playlist.setBarWidth(config.barWidth);
+  playlist.setRounded(config.rounded);
   playlist.isAutomaticScroll = config.isAutomaticScroll;
   playlist.isContinuousPlay = config.isContinuousPlay;
   playlist.linkedEndpoints = config.linkedEndpoints;

src/render/CanvasHook.js

@@ -1,8 +1,19 @@
+import { drawCorner } from "../utils/drawCorner";
 /*
  * virtual-dom hook for drawing to the canvas element.
  */
 class CanvasHook {
-  constructor(peaks, offset, bits, color, scale, height, barWidth, barGap) {
+  constructor(
+    peaks,
+    offset,
+    bits,
+    color,
+    scale,
+    height,
+    barWidth,
+    barGap,
+    rounded
+  ) {
     this.peaks = peaks;
     // http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
     this.offset = offset;
@@ -12,9 +23,10 @@ class CanvasHook {
     this.height = height;
     this.barWidth = barWidth;
     this.barGap = barGap;
+    this.rounded = rounded;
   }
 
-  static drawFrame(cc, h2, x, minPeak, maxPeak, width, gap) {
+  static drawFrame(cc, h2, x, minPeak, maxPeak, width, gap, rounded) {
     const min = Math.abs(minPeak * h2);
     const max = Math.abs(maxPeak * h2);
 
@@ -26,6 +38,16 @@ class CanvasHook {
     if (gap !== 0) {
       cc.fillRect(x + width, 0, gap, h2 * 2);
     }
+    if (rounded) {
+      //Draw Top-Left radius
+      drawCorner(cc, x, h2 - max, x + width, h2 - max - 0.1, width);
+      //Draw Top-Right radius
+      drawCorner(cc, x + width, h2 - max, x, h2 - max - 0.1, width);
+      //Draw Bottom-Left radius
+      drawCorner(cc, x, h2 + min, x + width, h2 + min + 0.1, width);
+      //Draw Bottom-Right radius
+      drawCorner(cc, x + width, h2 + min, x, h2 + min + 0.1, width);
+    }
   }
 
   hook(canvas, prop, prev) {
@@ -46,6 +68,7 @@ class CanvasHook {
     const maxValue = 2 ** (this.bits - 1);
     const width = this.barWidth;
     const gap = this.barGap;
+    const rounded = this.rounded;
     const barStart = width + gap;
 
     cc.clearRect(0, 0, canvas.width, canvas.height);
@@ -57,7 +80,16 @@ class CanvasHook {
     for (let pixel = 0; pixel < len; pixel += barStart) {
       const minPeak = this.peaks[(pixel + this.offset) * 2] / maxValue;
       const maxPeak = this.peaks[(pixel + this.offset) * 2 + 1] / maxValue;
-      CanvasHook.drawFrame(cc, h2, pixel, minPeak, maxPeak, width, gap);
+      CanvasHook.drawFrame(
+        cc,
+        h2,
+        pixel,
+        minPeak,
+        maxPeak,
+        width,
+        gap,
+        rounded
+      );
     }
 
     cc.restore();

src/utils/drawCorner.js

@@ -0,0 +1,8 @@
+export const drawCorner = (cc, x1, y1, x2, y2, width) => {
+  cc.beginPath();
+  cc.moveTo(x1, y1);
+  cc.arcTo(x1, y2, x2, y1, width / 2);
+  cc.lineTo(x1, y1);
+  cc.closePath();
+  cc.fill();
+};