@editframe/elements 0.14.0-beta.2 → 0.15.0-beta.1

package/src/elements/EFWaveform.ts

@@ -1,10 +1,12 @@
 import { EFAudio } from "./EFAudio.js";
 
+import { CSSStyleObserver } from "@bramus/style-observer";
 import { Task } from "@lit/task";
 import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
 import { TWMixin } from "../gui/TWMixin.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
 import { EFTemporal } from "./EFTemporal.js";
@@ -30,6 +32,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
   canvasRef: Ref<HTMLCanvasElement> = createRef();
   private ctx: CanvasRenderingContext2D | null = null;
+  private styleObserver: CSSStyleObserver | null = null;
 
   private resizeObserver?: ResizeObserver;
   private mutationObserver?: MutationObserver;
@@ -42,15 +45,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     type: String,
     attribute: "mode",
   })
-  mode:
-    | "roundBars"
-    | "bars"
-    | "bricks"
-    | "equalizer"
-    | "curve"
-    | "line"
-    | "pixel"
-    | "wave" = "bars";
+  mode: "roundBars" | "bars" | "bricks" | "line" | "pixel" | "wave" = "bars";
 
   @property({ type: String })
   color = "currentColor";
@@ -58,14 +53,23 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   @property({ type: String, attribute: "target", reflect: true })
   targetSelector = "";
 
+  @property({ type: Number, attribute: "line-width" })
+  lineWidth = 4;
+
   set target(value: string) {
     this.targetSelector = value;
   }
 
   connectedCallback() {
     super.connectedCallback();
-    if (this.targetElement) {
-      new CrossUpdateController(this.targetElement, this);
+    try {
+      if (this.targetElement) {
+        new CrossUpdateController(this.targetElement, this);
+      }
+    } catch (e) {
+      // TODO: determine if this is a critical error, or if we should just ignore it
+      // currenty evidence suggests everything still works
+      // no target element, no cross update controller
     }
 
     // Initialize ResizeObserver
@@ -87,6 +91,13 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
     // Observe attribute changes on the element
     this.mutationObserver.observe(this, { attributes: true });
+
+    if (!EF_RENDERING()) {
+      this.styleObserver = new CSSStyleObserver(["color"], () => {
+        this.frameTask.run();
+      });
+      this.styleObserver.attach(this);
+    }
   }
 
   disconnectedCallback() {
@@ -94,6 +105,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     // Disconnect the observers when the element is removed from the DOM
     this.resizeObserver?.disconnect();
     this.mutationObserver?.disconnect();
+    this.styleObserver?.detach();
   }
 
   private resizeCanvas() {
@@ -107,7 +119,10 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const canvas = this.canvasRef.value;
     if (!canvas) return null;
 
-    const rect = this.getBoundingClientRect();
+    const rect = {
+      width: this.offsetWidth,
+      height: this.offsetHeight,
+    };
     const dpr = window.devicePixelRatio;
 
     canvas.style.width = `${rect.width}px`;
@@ -128,20 +143,34 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
   protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
-    const barWidth = (waveWidth / frequencyData.length) * 0.8; // 0.8 for padding
-    const baseline = waveHeight / 2;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const baseline = waveHeight / 4;
+
+    // Calculate bar width with padding
+    const totalBars = frequencyData.length;
+    const paddingInner = 0.5; // 50% padding between bars
+    const paddingOuter = 0.01; // 1% padding on edges
+    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const barWidth =
+      availableWidth / (totalBars + (totalBars - 1) * paddingInner);
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
 
+    // Create a single Path2D object for all bars
+    const path = new Path2D();
+
     frequencyData.forEach((value, i) => {
-      const height = (value / 255) * (waveHeight / 2);
-      const x = i * (waveWidth / frequencyData.length);
+      const normalizedValue = value / 255;
+      const height = normalizedValue * (waveHeight / 2);
+      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = baseline - height;
 
-      ctx.fillRect(x, y, barWidth, Math.max(height * 2, 2));
+      path.rect(x, y, barWidth, height * 2);
     });
+
+    // Single fill operation for all bars
+    ctx.fill(path);
   }
 
   protected drawBricks(
@@ -149,55 +178,23 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     frequencyData: Uint8Array,
   ) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
-    const brickWidth = waveWidth / frequencyData.length;
-    const brickHeightFactor = waveHeight / 255 / 2;
-    const brickPadding = 2;
-    const midHeight = waveHeight / 2;
-
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
+    const path = new Path2D();
 
-    // Draw baseline
-    ctx.beginPath();
-    ctx.setLineDash([2]);
-    ctx.lineWidth = 4;
-    ctx.moveTo(0, midHeight);
-    ctx.lineTo(waveWidth, midHeight);
-    ctx.stroke();
-    ctx.setLineDash([]); // Reset dash
-
-    // Draw bricks
+    const columnWidth = waveWidth / frequencyData.length;
+    const boxSize = columnWidth * 0.9;
     frequencyData.forEach((value, i) => {
-      const x = i * brickWidth;
-      const height = value * brickHeightFactor * 2;
-      const y = midHeight - height / 2;
-
-      ctx.fillRect(x, y, brickWidth - brickPadding, height);
-    });
-  }
-
-  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
-    const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
-
-    ctx.clearRect(0, 0, waveWidth, waveHeight);
-    ctx.beginPath();
-
-    frequencyData.forEach((value, i) => {
-      const x = (i / frequencyData.length) * waveWidth;
-      const y = (1 - value / 255) * waveHeight;
-
-      if (i === 0) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
+      const brickHeight = (value / 255) * waveHeight;
+      for (let j = 0; j <= brickHeight; j++) {
+        const x = columnWidth * i;
+        const y = waveHeight - (j * columnWidth + boxSize);
+        path.rect(x, y, boxSize, boxSize);
       }
     });
 
-    ctx.lineWidth = 4;
-    ctx.stroke();
+    ctx.fill(path);
   }
 
   protected drawRoundBars(
@@ -205,25 +202,35 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     frequencyData: Uint8Array,
   ) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
-    const barWidth = (waveWidth / frequencyData.length) * 0.5; // Add padding
-    const baseline = waveHeight / 2;
-    const maxHeight = waveHeight / 2;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const baseline = waveHeight / 4;
+
+    // Similar padding calculation as drawBars
+    const totalBars = frequencyData.length;
+    const paddingInner = 0.5;
+    const paddingOuter = 0.01;
+    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const barWidth =
+      availableWidth / (totalBars + (totalBars - 1) * paddingInner);
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
 
+    // Create a single Path2D object for all rounded bars
+    const path = new Path2D();
+
     frequencyData.forEach((value, i) => {
-      const height = (value / 255) * maxHeight;
-      const x = i * (waveWidth / frequencyData.length);
+      const normalizedValue = value / 255;
+      const height = normalizedValue * (waveHeight / 2);
+      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = baseline - height;
 
-      // Draw rounded rectangle
-      const radius = barWidth / 2;
-      ctx.beginPath();
-      ctx.roundRect(x, y, barWidth, Math.max(height * 2, 2), radius);
-      ctx.fill();
+      // Add rounded rectangle to path
+      path.roundRect(x, y, barWidth, height * 2, barWidth / 2);
     });
+
+    // Single fill operation for all bars
+    ctx.fill(path);
   }
 
   protected drawEqualizer(
@@ -231,54 +238,60 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     frequencyData: Uint8Array,
   ) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height / 2;
     const barWidth = (waveWidth / frequencyData.length) * 0.8;
     const baseline = waveHeight / 2;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
 
+    // Create paths for baseline and bars
+    const baselinePath = new Path2D();
+    const barsPath = new Path2D();
+
     // Draw baseline
-    ctx.beginPath();
-    ctx.lineWidth = 2;
-    ctx.moveTo(0, baseline);
-    ctx.lineTo(waveWidth, baseline);
-    ctx.stroke();
+    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;
-
-      ctx.fillRect(x, y, barWidth, Math.max(height * 2, 1));
+      barsPath.rect(x, y, barWidth, Math.max(height * 2, 1));
     });
+
+    // Render baseline
+    ctx.lineWidth = 2;
+    ctx.stroke(baselinePath);
+
+    // Render bars
+    ctx.fill(barsPath);
   }
 
-  protected drawCurve(
-    ctx: CanvasRenderingContext2D,
-    frequencyData: Uint8Array,
-  ) {
+  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height / 2;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
-    ctx.beginPath();
+
+    // Create a single Path2D object for the curve
+    const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
       const x = (i / frequencyData.length) * waveWidth;
       const y = (1 - value / 255) * waveHeight;
 
       if (i === 0) {
-        ctx.moveTo(x, y);
+        path.moveTo(x, y);
       } else {
-        ctx.lineTo(x, y);
+        path.lineTo(x, y);
       }
     });
 
-    ctx.lineWidth = 4;
-    ctx.stroke();
+    ctx.lineWidth = this.lineWidth;
+    ctx.stroke(path);
   }
 
   protected drawPixel(
@@ -286,132 +299,122 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     frequencyData: Uint8Array,
   ) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height / 2;
     const baseline = waveHeight / 2;
-    const barWidth = (waveWidth / frequencyData.length) * 0.97; // Account for padding
+    const barWidth = waveWidth / frequencyData.length;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
 
+    // Create a single Path2D object for all pixels
+    const path = new Path2D();
+
     frequencyData.forEach((value, i) => {
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = (value / 255) * baseline;
       const y = baseline - barHeight;
 
-      ctx.fillRect(x, y, barWidth, barHeight * 2);
+      path.rect(x, y, barWidth, barHeight * 2);
     });
+
+    // Single fill operation for all pixels
+    ctx.fill(path);
   }
 
   protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
-    const baseline = waveHeight / 2;
-    const barWidth = (waveWidth / frequencyData.length) * 0.97; // Account for padding
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const baseline = canvas.height / 4;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
+    const path = new Path2D();
+    path.moveTo(0, baseline);
 
-    // Draw baseline
-    ctx.beginPath();
-    ctx.moveTo(0, baseline);
-    ctx.lineTo(waveWidth, baseline);
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = 1;
-    ctx.stroke();
-
-    // Draw bars
+    // Draw top curve
     frequencyData.forEach((value, i) => {
-      const x = i * (waveWidth / frequencyData.length);
-      const barHeight = (value / 255) * (waveHeight / 2);
-      const y = baseline - barHeight;
+      const normalizedValue = value / 255;
+      const x = (i / (frequencyData.length - 1)) * waveWidth;
+      const y = baseline - normalizedValue * (waveHeight / 2);
 
-      ctx.fillRect(x, y, barWidth, barHeight * 2);
+      if (i === 0) {
+        path.moveTo(x, y);
+      } else {
+        const prevX = ((i - 1) / (frequencyData.length - 1)) * waveWidth;
+        const prevValue = (frequencyData[i - 1] ?? 0) / 255;
+        const prevY = baseline - prevValue * (waveHeight / 2);
+        const xc = (prevX + x) / 2;
+        const yc = (prevY + y) / 2;
+        path.quadraticCurveTo(prevX, prevY, xc, yc);
+      }
     });
+
+    // Draw bottom curve
+    for (let i = frequencyData.length - 1; i >= 0; i--) {
+      const normalizedValue = (frequencyData[i] ?? 0) / 255;
+      const x = (i / (frequencyData.length - 1)) * waveWidth;
+      const y = baseline + normalizedValue * (waveHeight / 2);
+
+      if (i === frequencyData.length - 1) {
+        path.lineTo(x, y);
+      } else {
+        const nextX = ((i + 1) / (frequencyData.length - 1)) * waveWidth;
+        const nextValue = (frequencyData[i + 1] ?? 0) / 255;
+        const nextY = baseline + nextValue * (waveHeight / 2);
+        const xc = (nextX + x) / 2;
+        const yc = (nextY + y) / 2;
+        path.quadraticCurveTo(nextX, nextY, xc, yc);
+      }
+    }
+
+    ctx.fill(path);
   }
 
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.targetElement.audioBufferTask.status] as const,
+    args: () => [this.targetElement?.frequencyDataTask.status] as const,
     task: async () => {
-      await this.targetElement.audioBufferTask.taskComplete;
-      // Lazy initialize canvas, if we don't stash it, we re-init
-      // every frame, which blanks the canvas, causing flicker.
+      if (!this.targetElement) return;
+      await this.targetElement.frequencyDataTask.taskComplete;
       this.ctx ||= this.initCanvas();
       const ctx = this.ctx;
       if (!ctx) return;
 
-      if (!this.targetElement.audioBufferTask.value) return;
-
-      if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
-        const FRAME_DURATION_MS = 48000 / 1000;
-        const FRAME_SMEAR_MS = FRAME_DURATION_MS * 1;
-        const FRAME_SMEAR_S = FRAME_SMEAR_MS / 1000;
-
-        const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
-        const audioBufferSource = audioContext.createBufferSource();
-        audioBufferSource.buffer =
-          this.targetElement.audioBufferTask.value.buffer;
-        const analyser = audioContext.createAnalyser();
-
-        // Adjust FFT size for better frequency resolution
-        analyser.fftSize = 128 * 8;
+      const frequencyData = this.targetElement.frequencyDataTask.value;
+      if (!frequencyData) return;
 
-        audioBufferSource.connect(analyser);
-
-        const startTime = Math.max(
-          0,
-          (this.targetElement.trimAdjustedOwnCurrentTimeMs -
-            this.targetElement.audioBufferTask.value.startOffsetMs) /
-            1000,
-        );
-
-        audioBufferSource.start(0, startTime, FRAME_SMEAR_S);
-        await audioContext.startRendering();
-
-        const frameData = new Uint8Array(analyser.frequencyBinCount);
-        analyser.getByteFrequencyData(frameData);
-
-        const smoothedData = frameData.slice(0, frameData.length / 2);
-
-        if (this.color === "currentColor") {
-          const computedStyle = getComputedStyle(this);
-          const currentColor = computedStyle.color;
-          ctx.strokeStyle = currentColor;
-          ctx.fillStyle = currentColor;
-        } else {
-        }
+      if (this.color === "currentColor") {
+        const computedStyle = getComputedStyle(this);
+        const currentColor = computedStyle.color;
+        ctx.strokeStyle = currentColor;
+        ctx.fillStyle = currentColor;
+      }
 
-        switch (this.mode) {
-          case "bars":
-            this.drawBars(ctx, smoothedData);
-            break;
-          case "bricks":
-            this.drawBricks(ctx, smoothedData);
-            break;
-          case "curve":
-            this.drawCurve(ctx, smoothedData);
-            break;
-          case "line":
-            this.drawLine(ctx, smoothedData);
-            break;
-          case "pixel":
-            this.drawPixel(ctx, smoothedData);
-            break;
-          case "wave":
-            this.drawWave(ctx, smoothedData);
-            break;
-          case "roundBars":
-            this.drawRoundBars(ctx, smoothedData);
-            break;
-          case "equalizer":
-            this.drawEqualizer(ctx, smoothedData);
-            break;
-        }
+      switch (this.mode) {
+        case "bars":
+          this.drawBars(ctx, frequencyData);
+          break;
+        case "bricks":
+          this.drawBricks(ctx, frequencyData);
+          break;
+        case "line":
+          this.drawLine(ctx, frequencyData);
+          break;
+        case "pixel":
+          this.drawPixel(ctx, frequencyData);
+          break;
+        case "wave":
+          this.drawWave(ctx, frequencyData);
+          break;
+        case "roundBars":
+          this.drawRoundBars(ctx, frequencyData);
+          break;
       }
     },
   });
 
   get durationMs() {
+    if (!this.targetElement) return 0;
     return this.targetElement.durationMs;
   }
 
@@ -420,7 +423,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
+    return null;
   }
 
   protected updated(changedProperties: PropertyValueMap<this>): void {

package/src/gui/EFWorkbench.ts

@@ -107,7 +107,7 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
         focusOverlay.style.display = "block";
         const rect = this.focusedElement.getBoundingClientRect();
         Object.assign(focusOverlay.style, {
-          position: "absolute",
+          position: "fixed",
           top: `${rect.top}px`,
           left: `${rect.left}px`,
           width: `${rect.width}px`,