@editframe/elements 0.15.0-beta.1 → 0.15.0-beta.3

package/src/elements/EFWaveform.ts

@@ -1,16 +1,16 @@
-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 { customElement, property, state } 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 type { EFAudio } from "./EFAudio.js";
 import { EFTemporal } from "./EFTemporal.js";
-import { EFVideo } from "./EFVideo.js";
+import type { EFVideo } from "./EFVideo.js";
+import { TargetController } from "./TargetController.ts";
 
 @customElement("ef-waveform")
 export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
@@ -45,20 +45,22 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     type: String,
     attribute: "mode",
   })
-  mode: "roundBars" | "bars" | "bricks" | "line" | "pixel" | "wave" = "bars";
+  mode: "roundBars" | "bars" | "bricks" | "line" | "pixel" | "wave" | "spikes" =
+    "bars";
 
   @property({ type: String })
   color = "currentColor";
 
-  @property({ type: String, attribute: "target", reflect: true })
-  targetSelector = "";
+  @property({ type: String, reflect: true })
+  target = "";
+
+  @state()
+  targetElement: EFAudio | EFVideo | null = null;
 
   @property({ type: Number, attribute: "line-width" })
   lineWidth = 4;
 
-  set target(value: string) {
-    this.targetSelector = value;
-  }
+  targetController: TargetController = new TargetController(this);
 
   connectedCallback() {
     super.connectedCallback();
@@ -136,8 +138,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.reset();
 
     // Scale all drawing operations by dpr
-    ctx.scale(dpr, dpr);
-
     return ctx;
   }
 
@@ -145,31 +145,25 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const canvas = ctx.canvas;
     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 paddingInner = 0.5;
+    const paddingOuter = 0.01;
+    const availableWidth = waveWidth;
     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 normalizedValue = value / 255;
-      const height = normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
-      const y = baseline - height;
-
-      path.rect(x, y, barWidth, height * 2);
+      path.rect(x, y, barWidth, barHeight);
     });
 
-    // Single fill operation for all bars
     ctx.fill(path);
   }
 
@@ -185,11 +179,16 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
     const columnWidth = waveWidth / frequencyData.length;
     const boxSize = columnWidth * 0.9;
+    const verticalGap = boxSize * 0.2; // Add spacing between bricks
+    const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap)); // Account for gaps in height calculation
+
     frequencyData.forEach((value, i) => {
-      const brickHeight = (value / 255) * waveHeight;
-      for (let j = 0; j <= brickHeight; j++) {
+      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const brickCount = Math.floor(normalizedValue * maxBricks);
+
+      for (let j = 0; j < brickCount; j++) {
         const x = columnWidth * i;
-        const y = waveHeight - (j * columnWidth + boxSize);
+        const y = waveHeight - (j + 1) * (boxSize + verticalGap); // Include gap in position calculation
         path.rect(x, y, boxSize, boxSize);
       }
     });
@@ -204,13 +203,12 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const canvas = ctx.canvas;
     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 availableWidth = waveWidth;
     const barWidth =
       availableWidth / (totalBars + (totalBars - 1) * paddingInner);
 
@@ -220,13 +218,13 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
-      const height = normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const height = normalizedValue * waveHeight; // Use full wave height like in drawBars
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
-      const y = baseline - height;
+      const y = (waveHeight - height) / 2; // Center vertically
 
       // Add rounded rectangle to path
-      path.roundRect(x, y, barWidth, height * 2, barWidth / 2);
+      path.roundRect(x, y, barWidth, height, barWidth / 2);
     });
 
     // Single fill operation for all bars
@@ -239,9 +237,9 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   ) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
-    const barWidth = (waveWidth / frequencyData.length) * 0.8;
+    const waveHeight = canvas.height;
     const baseline = waveHeight / 2;
+    const barWidth = (waveWidth / frequencyData.length) * 0.8;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
 
@@ -272,7 +270,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
+    const waveHeight = canvas.height;
 
     ctx.clearRect(0, 0, waveWidth, waveHeight);
 
@@ -300,24 +298,21 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   ) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
+    const waveHeight = canvas.height;
     const baseline = waveHeight / 2;
     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 normalizedValue = Math.min((value / 255) * 2, 1); // Updated normalization
       const x = i * (waveWidth / frequencyData.length);
-      const barHeight = (value / 255) * baseline;
+      const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways
       const y = baseline - barHeight;
-
-      path.rect(x, y, barWidth, barHeight * 2);
+      path.rect(x, y, barWidth, barHeight * 2); // Double height to extend both ways
     });
 
-    // Single fill operation for all pixels
     ctx.fill(path);
   }
 
@@ -325,54 +320,147 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
-    const baseline = canvas.height / 4;
+    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 = 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 = Math.min((value / 255) * 2, 1);
+      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;
+      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 = 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;
+        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;
+      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 = 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;
+        path.quadraticCurveTo(nextX, nextY, xc, yc);
+      }
+    }
+
+    // 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();
-    path.moveTo(0, baseline);
 
     // 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 = value / 255;
-      const x = (i / (frequencyData.length - 1)) * waveWidth;
-      const y = baseline - normalizedValue * (waveHeight / 2);
+      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 = ((i - 1) / (frequencyData.length - 1)) * waveWidth;
+        const prevX =
+          startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;
         const prevValue = (frequencyData[i - 1] ?? 0) / 255;
-        const prevY = baseline - prevValue * (waveHeight / 2);
+        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 curve
+    // Draw bottom half
     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);
+      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 = ((i + 1) / (frequencyData.length - 1)) * waveWidth;
+        const nextX =
+          startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;
         const nextValue = (frequencyData[i + 1] ?? 0) / 255;
-        const nextY = baseline + nextValue * (waveHeight / 2);
+        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);
   }
 
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.targetElement?.frequencyDataTask.status] as const,
+    args: () => {
+      return [
+        this.targetElement,
+        this.targetElement?.frequencyDataTask.value,
+      ] as const;
+    },
     task: async () => {
       if (!this.targetElement) return;
       await this.targetElement.frequencyDataTask.taskComplete;
@@ -383,11 +471,15 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
       const frequencyData = this.targetElement.frequencyDataTask.value;
       if (!frequencyData) return;
 
+      ctx.save();
       if (this.color === "currentColor") {
         const computedStyle = getComputedStyle(this);
         const currentColor = computedStyle.color;
         ctx.strokeStyle = currentColor;
         ctx.fillStyle = currentColor;
+      } else {
+        ctx.strokeStyle = this.color;
+        ctx.fillStyle = this.color;
       }
 
       switch (this.mode) {
@@ -406,10 +498,15 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
         case "wave":
           this.drawWave(ctx, frequencyData);
           break;
+        case "spikes":
+          this.drawSpikes(ctx, frequencyData);
+          break;
         case "roundBars":
           this.drawRoundBars(ctx, frequencyData);
           break;
       }
+
+      ctx.restore();
     },
   });
 
@@ -418,14 +515,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     return this.targetElement.durationMs;
   }
 
-  get targetElement() {
-    const target = document.getElementById(this.targetSelector ?? "");
-    if (target instanceof EFAudio || target instanceof EFVideo) {
-      return target;
-    }
-    return null;
-  }
-
   protected updated(changedProperties: PropertyValueMap<this>): void {
     super.updated(changedProperties);
 
@@ -436,3 +525,9 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     }
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-waveform": EFWaveform & Element;
+  }
+}

package/src/elements/TargetController.test.ts

@@ -0,0 +1,229 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { afterEach, describe, expect, test } from "vitest";
+import { EFTargetable, TargetController } from "./TargetController.ts";
+
+let id = 0;
+
+const nextId = () => {
+  return `targetable-test-${id++}`;
+};
+
+@customElement("targetable-test")
+class TargetableTest extends EFTargetable(LitElement) {
+  @property()
+  value = "initial";
+
+  render() {
+    return html`<div>${this.value}</div>`;
+  }
+}
+
+@customElement("targeter-test")
+class TargeterTest extends LitElement {
+  // @ts-expect-error this controller is needed, but never referenced
+  private targetController: TargetController = new TargetController(this);
+
+  @state()
+  targetElement: Element | null = null;
+
+  @property()
+  target = "";
+
+  render() {
+    const target = this.targetElement;
+    return html`
+      <div>
+        ${target ? html`Found: ${target.tagName}` : html`Finding target...`}
+      </div>
+    `;
+  }
+}
+
+describe("target", () => {
+  afterEach(() => {
+    // Clean up all test elements from the document body
+    document.body.innerHTML = "";
+  });
+
+  test("should be able to get the target element", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should update when document changes", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(element);
+
+    const id = nextId();
+    element.target = id;
+
+    expect(element.targetElement).toBe(null);
+
+    target.id = id;
+    document.body.appendChild(target);
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should update when attribute changes", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(element);
+    document.body.appendChild(target);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    target.id = nextId();
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should update when target is set before id exists", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    element.target = id;
+    expect(element.targetElement).toBe(null);
+
+    target.id = id;
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should update when target changes to match existing id", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    expect(element.targetElement).toBe(null);
+
+    element.target = id;
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+  });
+
+  test("should handle target being cleared", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    element.target = "";
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should handle multiple elements targeting the same id", async () => {
+    const target = document.createElement("targetable-test");
+    const element1 = document.createElement("targeter-test");
+    const element2 = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element1);
+    document.body.appendChild(element2);
+
+    const id = nextId();
+    target.id = id;
+    element1.target = id;
+    element2.target = id;
+
+    await Promise.all([element1.updateComplete, element2.updateComplete]);
+    expect(element1.targetElement).toBe(target);
+    expect(element2.targetElement).toBe(target);
+  });
+
+  test("should handle element removal from DOM", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    document.body.removeChild(target);
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should handle rapid target id changes", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id1 = nextId();
+    const id2 = nextId();
+    const id3 = nextId();
+
+    target.id = id1;
+    element.target = id1;
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    target.id = id2;
+    target.id = id3; // Immediately change again
+    await element.updateComplete;
+    expect(element.targetElement).toBe(null);
+  });
+
+  test("should not trigger unnecessary updates when setting same id multiple times", async () => {
+    const target = document.createElement("targetable-test");
+    const element = document.createElement("targeter-test");
+    document.body.appendChild(target);
+    document.body.appendChild(element);
+
+    const id = nextId();
+    target.id = id;
+    element.target = id;
+
+    await element.updateComplete;
+    expect(element.targetElement).toBe(target);
+
+    // Set the same ID again
+    target.id = id;
+    await element.updateComplete;
+
+    // The target element should remain stable
+    expect(element.targetElement).toBe(target);
+  });
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "targetable-test": TargetableTest & Element;
+    "targeter-test": TargeterTest & Element;
+  }
+}