Feature waveborder (#50)

zhw2590582 · Oct 7, 2023 · d6be618 · d6be618
1 parent eb54b6d
commit d6be618
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 8 deletions.
diff --git a/dist/wfplayer.js b/dist/wfplayer.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wfplayer",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "WFPlayer.js is an audio waveform generator",
   "main": "dist/wfplayer.js",
   "types": "types/wfplayer.d.ts",
@@ -45,4 +45,4 @@
   "dependencies": {
     "option-validator": "^2.0.6"
   }
-}
+}
diff --git a/src/index.js b/src/index.js
@@ -52,6 +52,9 @@ export default class WFPlayer extends Emitter {
             waveScale: 0.8,
             waveSize: 1,
             pixelRatio: Math.ceil(window.devicePixelRatio),
+            waveBorder: false,
+            waveBorderWidth: 1,
+            waveBorderColor: "rgba(255, 255, 255, 0.1)"
         };
     }
 
@@ -83,6 +86,9 @@ export default class WFPlayer extends Emitter {
             waveScale: 'number',
             waveSize: 'number',
             pixelRatio: 'number',
+            waveBorder: 'boolean',
+            waveBorderWidth: 'number',
+            waveBorderColor: 'string',
         };
     }
 

diff --git a/src/worker.js b/src/worker.js
@@ -106,6 +106,9 @@ function drawWave(data) {
         waveScale,
         waveSize,
         scrollable,
+        waveBorder,
+        waveBorderWidth,
+        waveBorderColor,
     } = data;
 
     const middle = height / 2;
@@ -128,13 +131,29 @@ function drawWave(data) {
         }
         if (stepIndex >= step && xIndex < waveWidth) {
             const waveX = gridGap * padding + xIndex;
+
+            if (waveBorder) {
+                ctx.strokeStyle = waveBorderColor; // Set the border color
+                ctx.lineWidth = waveBorderWidth; // Set the border width
+
+                // Draw the border around the rectangle
+                ctx.strokeRect(
+                    waveX,
+                    (1 + min * waveScale) * middle,
+                    waveSize,
+                    Math.max(1, (max - min) * middle * waveScale)
+                );
+            }
+
+            // Fill the rectangle with the desired color
             ctx.fillStyle = progress && cursorX >= waveX ? progressColor : waveColor;
             ctx.fillRect(
-                waveX,
-                (1 + min * waveScale) * middle,
-                waveSize,
-                Math.max(1, (max - min) * middle * waveScale),
+                waveX + (waveBorder ? waveBorderWidth / 2 : 0), // Offset the x-coordinate to accommodate the border
+                (1 + min * waveScale) * middle + (waveBorder ? waveBorderWidth / 2 : 0), // Offset the y-coordinate
+                waveSize - (waveBorder ? waveBorderWidth : 0), // Adjust the width for the border
+                Math.max(1, (max - min) * middle * waveScale) - (waveBorder ? waveBorderWidth : 0) // Adjust the height for the border
             );
+
             xIndex += waveSize;
             stepIndex = 0;
             min = 1;

diff --git a/types/wfplayer.d.ts b/types/wfplayer.d.ts
@@ -28,6 +28,9 @@ type Option = {
     waveScale?: number;
     waveSize?: number;
     pixelRatio?: number;
+    waveBorder?: boolean;
+    waveBorderWidth?: number;
+    waveBorderColor?: string;
 };
 
 type Config = {