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

package/src/elements/EFWaveform.ts

@@ -45,15 +45,8 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     type: String,
     attribute: "mode",
   })
-  mode:
-    | "roundBars"
-    | "bars"
-    | "bricks"
-    | "line"
-    | "curve"
-    | "pixel"
-    | "wave"
-    | "spikes" = "bars";
+  mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" =
+    "bars";
 
   @property({ type: String })
   color = "currentColor";
@@ -164,7 +157,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const normalizedValue = Math.abs(value - 128) / 128;
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -190,7 +183,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.min((value / 255) * 2, 1);
+      const normalizedValue = Math.abs(value - 128) / 128;
       const brickCount = Math.floor(normalizedValue * maxBricks);
 
       for (let j = 0; j < brickCount; j++) {
@@ -225,7 +218,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const normalizedValue = Math.abs(value - 128) / 128;
       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
@@ -238,42 +231,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.fill(path);
   }
 
-  protected drawEqualizer(
-    ctx: CanvasRenderingContext2D,
-    frequencyData: Uint8Array,
-  ) {
-    const canvas = ctx.canvas;
-    const waveWidth = canvas.width;
-    const waveHeight = canvas.height;
-    const baseline = waveHeight / 2;
-    const barWidth = (waveWidth / frequencyData.length) * 0.8;
-
-    ctx.clearRect(0, 0, waveWidth, waveHeight);
-
-    // Create paths for baseline and bars
-    const baselinePath = new Path2D();
-    const barsPath = new Path2D();
-
-    // Draw baseline
-    baselinePath.moveTo(0, baseline);
-    baselinePath.lineTo(waveWidth, baseline);
-
-    // Draw bars
-    frequencyData.forEach((value, i) => {
-      const height = (value / 255) * (waveHeight / 2);
-      const x = i * (waveWidth / frequencyData.length);
-      const y = baseline - height;
-      barsPath.rect(x, y, barWidth, Math.max(height * 2, 1));
-    });
-
-    // Render baseline
-    ctx.lineWidth = 2;
-    ctx.stroke(baselinePath);
-
-    // Render bars
-    ctx.fill(barsPath);
-  }
-
   protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
@@ -283,7 +240,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     // Sample fewer points to make sharp angles more visible
-    const sampleRate = 4; // Only use every 4th point
+    const sampleRate = 1; // Only use every 4th point
 
     for (let i = 0; i < frequencyData.length; i += sampleRate) {
       const x = (i / frequencyData.length) * waveWidth;
@@ -295,7 +252,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
         path.lineTo(x, y);
       }
     }
-
     // Ensure we draw to the end
     const lastX = waveWidth;
     const lastY =
@@ -351,7 +307,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1); // Updated normalization
+      const normalizedValue = Math.abs(value - 128) / 128;
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways
       const y = baseline - barHeight;
@@ -372,129 +328,50 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
 
-    // Draw top curve
-    const firstValue = Math.min(((frequencyData[0] ?? 0) / 255) * 2, 1);
-    const firstY = (waveHeight - firstValue * waveHeight) / 2;
+    // For PCM data, normalize around the center point (128)
+    const firstValue = ((frequencyData[0] ?? 128) - 128) / 128;
+    const firstY = waveHeight / 2 + (firstValue * waveHeight) / 2;
     path.moveTo(startX, firstY);
 
     // Draw top half
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const normalizedValue = (value - 128) / 128; // Center around 0 (-1 to 1)
       const x = startX + (i / (frequencyData.length - 1)) * availableWidth;
-      const barHeight = normalizedValue * waveHeight;
-      const y = (waveHeight - barHeight) / 2;
+      const y = waveHeight / 2 - (normalizedValue * waveHeight) / 2; // Create downward curve for top
 
       if (i === 0) {
         path.moveTo(x, y);
       } else {
         const prevX =
           startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;
-        const prevValue = Math.min(((frequencyData[i - 1] ?? 0) / 255) * 2, 1);
-        const prevBarHeight = prevValue * waveHeight;
-        const prevY = (waveHeight - prevBarHeight) / 2;
+        const prevValue = ((frequencyData[i - 1] ?? 128) - 128) / 128;
+        const prevY = waveHeight / 2 - (prevValue * waveHeight) / 2; // Create downward curve for top
         const xc = (prevX + x) / 2;
-        const yc = (prevY + y) / 2;
-        path.quadraticCurveTo(prevX, prevY, xc, yc);
+        const yc = (prevY + y) / 2; // Control point for smooth curve
+        path.quadraticCurveTo(prevX, prevY, xc, yc); // Maintain the curve
       }
     });
 
-    // Draw bottom half
+    // Draw bottom mirror
     for (let i = frequencyData.length - 1; i >= 0; i--) {
-      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);
+      const normalizedValue = ((frequencyData[i] ?? 128) - 128) / 128; // Center around 0 (-1 to 1)
       const x = startX + (i / (frequencyData.length - 1)) * availableWidth;
-      const barHeight = normalizedValue * waveHeight;
-      const y = (waveHeight + barHeight) / 2;
+      const y = waveHeight / 2 + (normalizedValue * waveHeight) / 2; // Create upward curve for bottom
 
       if (i === frequencyData.length - 1) {
         path.lineTo(x, y);
       } else {
         const nextX =
           startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;
-        const nextValue = Math.min(((frequencyData[i + 1] ?? 0) / 255) * 2, 1);
-        const nextBarHeight = nextValue * waveHeight;
-        const nextY = (waveHeight + nextBarHeight) / 2;
+        const nextValue = ((frequencyData[i + 1] ?? 128) - 128) / 128;
+        const nextY = waveHeight / 2 + (nextValue * waveHeight) / 2; // Create upward curve for bottom
         const xc = (nextX + x) / 2;
-        const yc = (nextY + y) / 2;
-        path.quadraticCurveTo(nextX, nextY, xc, yc);
+        const yc = (nextY + y) / 2; // Control point for smooth curve
+        path.quadraticCurveTo(nextX, nextY, xc, yc); // Maintain the curve
       }
     }
 
-    // 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);
-
+    path.closePath();
     ctx.fill(path);
   }
 
@@ -530,10 +407,10 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
       switch (this.mode) {
         case "bars":
-          this.drawBars(ctx, frequencyData);
+          this.drawBars(ctx, byteTimeData);
           break;
         case "bricks":
-          this.drawBricks(ctx, frequencyData);
+          this.drawBricks(ctx, byteTimeData);
           break;
         case "line":
           this.drawLine(ctx, byteTimeData);
@@ -542,16 +419,13 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
           this.drawCurve(ctx, byteTimeData);
           break;
         case "pixel":
-          this.drawPixel(ctx, frequencyData);
+          this.drawPixel(ctx, byteTimeData);
           break;
         case "wave":
-          this.drawWave(ctx, frequencyData);
-          break;
-        case "spikes":
-          this.drawSpikes(ctx, frequencyData);
+          this.drawWave(ctx, byteTimeData);
           break;
         case "roundBars":
-          this.drawRoundBars(ctx, frequencyData);
+          this.drawRoundBars(ctx, byteTimeData);
           break;
       }
 

package/src/gui/TWMixin.ts

@@ -25,12 +25,16 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
       const constructorStylesheets: CSSStyleSheet[] = [];
       const constructorStyles = (("styles" in this.constructor &&
         this.constructor.styles) ||
-        []) as CSSResult[];
+        []) as CSSResult | CSSResult[];
 
-      for (const item of constructorStyles) {
-        if (item.styleSheet) {
-          constructorStylesheets.push(item.styleSheet);
+      if (Array.isArray(constructorStyles)) {
+        for (const item of constructorStyles) {
+          if (item.styleSheet) {
+            constructorStylesheets.push(item.styleSheet);
+          }
         }
+      } else if (constructorStyles.styleSheet) {
+        constructorStylesheets.push(constructorStyles.styleSheet);
       }
 
       if (renderRoot?.adoptedStyleSheets) {