@editframe/elements 0.15.0-beta.14 → 0.15.0-beta.17

package/src/elements/EFWaveform.ts

@@ -45,8 +45,15 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     type: String,
     attribute: "mode",
   })
-  mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" =
-    "bars";
+  mode:
+    | "roundBars"
+    | "bars"
+    | "bricks"
+    | "line"
+    | "curve"
+    | "pixel"
+    | "wave"
+    | "spikes" = "bars";
 
   @property({ type: String })
   color = "currentColor";
@@ -157,7 +164,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -183,7 +190,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap)); // Account for gaps in height calculation
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const brickCount = Math.floor(normalizedValue * maxBricks);
 
       for (let j = 0; j < brickCount; j++) {
@@ -218,7 +225,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const height = normalizedValue * waveHeight; // Use full wave height like in drawBars
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = (waveHeight - height) / 2; // Center vertically
@@ -307,7 +314,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.abs(value - 128) / 128;
+      const normalizedValue = value / 255;
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways
       const y = baseline - barHeight;
@@ -328,50 +335,129 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
 
-    // For PCM data, normalize around the center point (128)
-    const firstValue = ((frequencyData[0] ?? 128) - 128) / 128;
-    const firstY = waveHeight / 2 + (firstValue * waveHeight) / 2;
+    // Draw top curve
+    const firstValue = Math.min(((frequencyData[0] ?? 0) / 255) * 2, 1);
+    const firstY = (waveHeight - firstValue * waveHeight) / 2;
     path.moveTo(startX, firstY);
 
     // Draw top half
     frequencyData.forEach((value, i) => {
-      const normalizedValue = (value - 128) / 128; // Center around 0 (-1 to 1)
+      const normalizedValue = Math.min((value / 255) * 2, 1);
       const x = startX + (i / (frequencyData.length - 1)) * availableWidth;
-      const y = waveHeight / 2 - (normalizedValue * waveHeight) / 2; // Create downward curve for top
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight - barHeight) / 2;
 
       if (i === 0) {
         path.moveTo(x, y);
       } else {
         const prevX =
           startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;
-        const prevValue = ((frequencyData[i - 1] ?? 128) - 128) / 128;
-        const prevY = waveHeight / 2 - (prevValue * waveHeight) / 2; // Create downward curve for top
+        const prevValue = Math.min(((frequencyData[i - 1] ?? 0) / 255) * 2, 1);
+        const prevBarHeight = prevValue * waveHeight;
+        const prevY = (waveHeight - prevBarHeight) / 2;
         const xc = (prevX + x) / 2;
-        const yc = (prevY + y) / 2; // Control point for smooth curve
-        path.quadraticCurveTo(prevX, prevY, xc, yc); // Maintain the curve
+        const yc = (prevY + y) / 2;
+        path.quadraticCurveTo(prevX, prevY, xc, yc);
       }
     });
 
-    // Draw bottom mirror
+    // Draw bottom half
     for (let i = frequencyData.length - 1; i >= 0; i--) {
-      const normalizedValue = ((frequencyData[i] ?? 128) - 128) / 128; // Center around 0 (-1 to 1)
+      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);
       const x = startX + (i / (frequencyData.length - 1)) * availableWidth;
-      const y = waveHeight / 2 + (normalizedValue * waveHeight) / 2; // Create upward curve for bottom
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight + barHeight) / 2;
 
       if (i === frequencyData.length - 1) {
         path.lineTo(x, y);
       } else {
         const nextX =
           startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;
-        const nextValue = ((frequencyData[i + 1] ?? 128) - 128) / 128;
-        const nextY = waveHeight / 2 + (nextValue * waveHeight) / 2; // Create upward curve for bottom
+        const nextValue = Math.min(((frequencyData[i + 1] ?? 0) / 255) * 2, 1);
+        const nextBarHeight = nextValue * waveHeight;
+        const nextY = (waveHeight + nextBarHeight) / 2;
         const xc = (nextX + x) / 2;
-        const yc = (nextY + y) / 2; // Control point for smooth curve
-        path.quadraticCurveTo(nextX, nextY, xc, yc); // Maintain the curve
+        const yc = (nextY + y) / 2;
+        path.quadraticCurveTo(nextX, nextY, xc, yc);
       }
     }
 
-    path.closePath();
+    // Close the path with a smooth curve back to start
+    const lastY = (waveHeight + firstValue * waveHeight) / 2;
+    const controlX = startX;
+    const controlY = (lastY + firstY) / 2;
+    path.quadraticCurveTo(controlX, controlY, startX, firstY);
+
+    ctx.fill(path);
+  }
+
+  protected drawSpikes(
+    ctx: CanvasRenderingContext2D,
+    frequencyData: Uint8Array,
+  ) {
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const paddingOuter = 0.01;
+    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const startX = waveWidth * paddingOuter;
+
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    const path = new Path2D();
+
+    // Draw top curve
+    const firstValue = (frequencyData[0] ?? 0) / 255;
+    const firstY = (waveHeight - firstValue * waveHeight) / 2;
+    path.moveTo(startX, firstY);
+
+    // Draw top half
+    frequencyData.forEach((value, i) => {
+      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;
+      const barHeight = normalizedValue * (waveHeight / 2);
+      const y = (waveHeight - barHeight * 2) / 2;
+
+      if (i === 0) {
+        path.moveTo(x, y);
+      } else {
+        const prevX =
+          startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;
+        const prevValue = (frequencyData[i - 1] ?? 0) / 255;
+        const prevBarHeight = prevValue * (waveHeight / 2);
+        const prevY = (waveHeight - prevBarHeight * 2) / 2;
+        const xc = (prevX + x) / 2;
+        const yc = (prevY + y) / 2;
+        path.quadraticCurveTo(prevX, prevY, xc, yc);
+      }
+    });
+
+    // Draw bottom half
+    for (let i = frequencyData.length - 1; i >= 0; i--) {
+      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);
+      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;
+      const barHeight = normalizedValue * (waveHeight / 2);
+      const y = (waveHeight + barHeight * 2) / 2;
+
+      if (i === frequencyData.length - 1) {
+        path.lineTo(x, y);
+      } else {
+        const nextX =
+          startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;
+        const nextValue = (frequencyData[i + 1] ?? 0) / 255;
+        const nextBarHeight = nextValue * (waveHeight / 2);
+        const nextY = (waveHeight + nextBarHeight * 2) / 2;
+        const xc = (nextX + x) / 2;
+        const yc = (nextY + y) / 2;
+        path.quadraticCurveTo(nextX, nextY, xc, yc);
+      }
+    }
+
+    // Close the path with a smooth curve
+    const lastY = (waveHeight + firstValue * waveHeight) / 2;
+    const controlX = startX;
+    const controlY = (lastY + firstY) / 2;
+    path.quadraticCurveTo(controlX, controlY, startX, firstY);
+
     ctx.fill(path);
   }
 
@@ -407,10 +493,10 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
       switch (this.mode) {
         case "bars":
-          this.drawBars(ctx, byteTimeData);
+          this.drawBars(ctx, frequencyData);
           break;
         case "bricks":
-          this.drawBricks(ctx, byteTimeData);
+          this.drawBricks(ctx, frequencyData);
           break;
         case "line":
           this.drawLine(ctx, byteTimeData);
@@ -419,13 +505,16 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
           this.drawCurve(ctx, byteTimeData);
           break;
         case "pixel":
-          this.drawPixel(ctx, byteTimeData);
+          this.drawPixel(ctx, frequencyData);
           break;
         case "wave":
-          this.drawWave(ctx, byteTimeData);
+          this.drawWave(ctx, frequencyData);
+          break;
+        case "spikes":
+          this.drawSpikes(ctx, frequencyData);
           break;
         case "roundBars":
-          this.drawRoundBars(ctx, byteTimeData);
+          this.drawRoundBars(ctx, frequencyData);
           break;
       }