@editframe/elements 0.26.3-beta.0 → 0.30.0-beta.13

package/src/gui/EFScrubber.ts

@@ -1,151 +0,0 @@
-import { consume } from "@lit/context";
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-
-import { ref } from "lit/directives/ref.js";
-import type { ControllableInterface } from "./Controllable.js";
-import { currentTimeContext } from "./currentTimeContext.js";
-import { durationContext } from "./durationContext.js";
-import { efContext } from "./efContext.js";
-import { playingContext } from "./playingContext.js";
-import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
-
-@customElement("ef-scrubber")
-export class EFScrubber extends TargetOrContextMixin(LitElement, efContext) {
-  static styles = [
-    css`
-    :host {
-      --ef-scrubber-height: 4px;
-      --ef-scrubber-background: rgb(209 213 219);
-      --ef-scrubber-progress-color: rgb(37 99 235);
-      --ef-scrubber-handle-size: 12px;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .scrubber {
-      width: 100%;
-      height: var(--ef-scrubber-height);
-      background: var(--ef-scrubber-background);
-      position: relative;
-      cursor: pointer;
-      border-radius: 2px;
-    }
-
-    .progress {
-      position: absolute;
-      height: 100%;
-      background: var(--ef-scrubber-progress-color);
-      border-radius: 2px;
-    }
-
-    .handle {
-      position: absolute;
-      width: var(--ef-scrubber-handle-size);
-      height: var(--ef-scrubber-handle-size);
-      background: var(--ef-scrubber-progress-color);
-      border-radius: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      cursor: grab;
-    }
-
-    /* Add CSS Shadow Parts */
-    ::part(scrubber) { }
-    ::part(progress) { }
-    ::part(handle) { }
-    `,
-  ];
-
-  @consume({ context: playingContext, subscribe: true })
-  playing = false;
-
-  @consume({ context: currentTimeContext, subscribe: true })
-  currentTimeMs = Number.NaN;
-
-  @consume({ context: durationContext, subscribe: true })
-  durationMs = 0;
-
-  get context(): ControllableInterface | null {
-    return this.effectiveContext;
-  }
-
-  @state()
-  private scrubProgress = 0;
-
-  @state()
-  private isMoving = false;
-
-  private scrubberRef?: HTMLElement;
-
-  private updateProgress(e: MouseEvent) {
-    if (!this.context || !this.scrubberRef) return;
-
-    const rect = this.scrubberRef.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const progress = Math.max(0, Math.min(1, x / rect.width));
-
-    this.scrubProgress = progress;
-    this.context.currentTimeMs = progress * this.durationMs;
-  }
-
-  private boundHandlePointerDown = (e: MouseEvent) => {
-    this.isMoving = true;
-    e.preventDefault();
-    this.updateProgress(e);
-  };
-
-  private boundHandlePointerMove = (e: MouseEvent) => {
-    if (this.isMoving) {
-      this.updateProgress(e);
-    }
-  };
-
-  private boundHandlePointerUp = () => {
-    this.isMoving = false;
-  };
-
-  render() {
-    // Calculate progress from currentTimeMs and duration
-    const currentProgress =
-      this.durationMs > 0 ? (this.currentTimeMs ?? 0) / this.durationMs : 0;
-
-    const displayProgress = this.isMoving
-      ? this.scrubProgress
-      : currentProgress;
-
-    return html`
-      <div 
-        ${ref((el) => {
-          this.scrubberRef = el as HTMLElement;
-        })}
-        part="scrubber"
-        class="scrubber"
-        @mousedown=${this.boundHandlePointerDown}
-      >
-        <div class="progress" style="width: ${displayProgress * 100}%"></div>
-        <div class="handle" style="left: ${displayProgress * 100}%"></div>
-      </div>
-    `;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("pointerup", this.boundHandlePointerUp);
-    window.addEventListener("pointermove", this.boundHandlePointerMove);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("pointerup", this.boundHandlePointerUp);
-    window.removeEventListener("pointermove", this.boundHandlePointerMove);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-scrubber": EFScrubber;
-  }
-}

package/src/gui/EFTimeDisplay.browsertest.ts

@@ -1,237 +0,0 @@
-import { html, render as litRender, type TemplateResult } from "lit";
-import { assert, beforeEach, describe, test, vi } from "vitest";
-import { EFTimeDisplay } from "./EFTimeDisplay.js";
-import "./EFTimeDisplay.js";
-import type { EFTimegroup } from "../elements/EFTimegroup.js";
-import "../elements/EFTimegroup.js";
-import "./EFPreview.js";
-
-beforeEach(() => {
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
-    if (typeof key !== "string") continue;
-    localStorage.removeItem(key);
-  }
-  while (document.body.children.length) {
-    document.body.children[0]?.remove();
-  }
-});
-
-const renderTimeDisplay = (result: TemplateResult) => {
-  const container = document.createElement("div");
-  litRender(result, container);
-  const timeDisplay = container.querySelector("ef-time-display");
-  if (!timeDisplay) {
-    throw new Error("No ef-time-display found");
-  }
-  if (!(timeDisplay instanceof EFTimeDisplay)) {
-    throw new Error("Element is not an EFTimeDisplay");
-  }
-  document.body.appendChild(container);
-  return { timeDisplay, container };
-};
-
-describe("EFTimeDisplay", () => {
-  test("shows 0:00 / 0:00 when context is null", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-time-display></ef-time-display>`,
-    );
-    await timeDisplay.updateComplete;
-
-    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(timeText, "0:00 / 0:00");
-  });
-
-  test("works correctly with real EFTimegroup context", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="5s">
-          <ef-time-display></ef-time-display>
-        </ef-timegroup>
-      </ef-preview>`,
-    );
-
-    await timeDisplay.updateComplete;
-
-    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(
-      timeText,
-      "0:00 / 0:05",
-      "Should work with real timegroup context",
-    );
-  });
-
-  test("handles undefined currentTimeMs gracefully", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-    );
-
-    // const context = timeDisplay.closest("ef-preview") ;
-    await timeDisplay.updateComplete;
-
-    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(
-      timeText,
-      "0:00 / 0:05",
-      "Should show 0:00 when currentTimeMs is undefined",
-    );
-  });
-
-  test("handles NaN currentTimeMs gracefully", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-    );
-
-    const context = timeDisplay.closest("ef-preview")!;
-    context.currentTimeMs = Number.NaN;
-    await timeDisplay.updateComplete;
-
-    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(
-      timeText,
-      "0:00 / 0:05",
-      "Should show 0:00 when currentTimeMs is NaN",
-    );
-  });
-
-  test("formats time correctly with valid values", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="3s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-    );
-
-    const context = timeDisplay.closest("ef-preview")!;
-    const timegroup = context.querySelector("ef-timegroup") as EFTimegroup;
-
-    await timegroup.updateComplete;
-    await timegroup.seek(1500); // 1.5 seconds = 0:01
-
-    // Wait for context to update and propagate to time display
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-    await context.updateComplete;
-    await timeDisplay.updateComplete;
-
-    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(timeText, "0:01 / 0:03");
-  });
-
-  test("formats minutes correctly", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="125s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-    );
-
-    const context = timeDisplay.closest("ef-preview")!;
-
-    // Create a mock timegroup with longer duration
-    const mockTimegroup = document.createElement("ef-timegroup") as EFTimegroup;
-    mockTimegroup.setAttribute("mode", "fixed");
-    mockTimegroup.setAttribute("duration", "125s"); // 2:05
-
-    context.currentTimeMs = 75000; // 75 seconds = 1:15
-    await vi.waitUntil(
-      () => timeDisplay.shadowRoot?.textContent?.trim() === "1:15 / 2:05",
-    );
-  });
-
-  test("updates display when time changes", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-    );
-
-    const context = timeDisplay.closest("ef-preview")!;
-    const timegroup = context.querySelector("ef-timegroup") as EFTimegroup;
-
-    await timegroup.updateComplete;
-
-    // Initial time
-    await timegroup.seek(2000); // 2 seconds = 0:02
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-    await context.updateComplete;
-    await timeDisplay.updateComplete;
-
-    let timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(timeText, "0:02 / 0:10");
-
-    // Update time
-    await timegroup.seek(7000); // 7 seconds = 0:07
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-    await context.updateComplete;
-    await timeDisplay.updateComplete;
-
-    timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(timeText, "0:07 / 0:10", "Should update when time changes");
-  });
-
-  test("handles zero duration", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-    );
-
-    const context = timeDisplay.closest("ef-preview")!;
-    const timegroup = context.targetTemporal!;
-
-    (timegroup as unknown as Element).setAttribute("duration", "0s");
-    assert.equal(timegroup.durationMs, 0);
-
-    await timegroup.updateComplete;
-    await timeDisplay.updateComplete;
-    await vi.waitUntil(
-      () => timeDisplay.shadowRoot?.textContent?.trim() === "0:00 / 0:00",
-    );
-  });
-
-  test("handles context changes correctly", async () => {
-    const { timeDisplay } = renderTimeDisplay(
-      html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-    );
-
-    const context = timeDisplay.closest("ef-preview")!;
-
-    // Set initial values
-    context.currentTimeMs = 1000;
-    await timeDisplay.updateComplete;
-
-    let timeText = timeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(timeText, "0:01 / 0:10");
-
-    // Move to a different context (using renderTimeDisplay to get proper TestContext)
-    const { timeDisplay: newTimeDisplay, container: newContainer } =
-      renderTimeDisplay(
-        html`<ef-preview>
-        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
-        <ef-time-display></ef-time-display>
-      </ef-preview>`,
-      );
-
-    const newContext = newTimeDisplay.closest("ef-preview")!;
-
-    // Set different values in new context
-    newContext.currentTimeMs = 3000;
-    await newTimeDisplay.updateComplete;
-
-    timeText = newTimeDisplay.shadowRoot?.textContent?.trim();
-    assert.equal(timeText, "0:03 / 0:10", "Should work with new context");
-
-    newContainer.remove();
-  });
-});

package/src/gui/EFTimeDisplay.ts

@@ -1,55 +0,0 @@
-import { consume } from "@lit/context";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { currentTimeContext } from "./currentTimeContext.js";
-import { durationContext } from "./durationContext.js";
-import { efContext } from "./efContext.js";
-import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
-
-@customElement("ef-time-display")
-export class EFTimeDisplay extends TargetOrContextMixin(LitElement, efContext) {
-  static styles = css`
-    :host {
-      display: inline-block;
-      font-family: var(--ef-font-family, system-ui);
-      font-size: var(--ef-font-size-xs, 0.75rem);
-      color: var(--ef-text-color, rgb(75 85 99));
-      white-space: nowrap;
-    }
-  `;
-
-  @consume({ context: currentTimeContext, subscribe: true })
-  currentTimeMs = Number.NaN;
-
-  @consume({ context: durationContext, subscribe: true })
-  durationMs = 0;
-
-  private formatTime(ms: number): string {
-    // Handle NaN, undefined, null, or negative values
-    if (!Number.isFinite(ms) || ms < 0) {
-      return "0:00";
-    }
-
-    const totalSeconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-  }
-
-  render() {
-    const currentTime = this.currentTimeMs;
-    const totalTime = this.durationMs;
-
-    return html`
-      <span part="time">
-        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}
-      </span>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-time-display": EFTimeDisplay;
-  }
-}

package/src/gui/EFToggleLoop.ts

@@ -1,35 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import type { ControllableInterface } from "./Controllable.js";
-import { efContext } from "./efContext.js";
-import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
-
-@customElement("ef-toggle-loop")
-export class EFToggleLoop extends TargetOrContextMixin(LitElement, efContext) {
-  static styles = [
-    css`
-      :host {}
-    `,
-  ];
-
-  get context(): ControllableInterface | null {
-    return this.effectiveContext;
-  }
-
-  render() {
-    return html`
-      <slot @click=${() => {
-        if (this.context) {
-          this.context.loop = !this.context.loop;
-        }
-      }}></slot>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-toggle-loop": EFToggleLoop;
-  }
-}

package/src/gui/EFTogglePlay.ts

@@ -1,70 +0,0 @@
-import { consume } from "@lit/context";
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { attachContextRoot } from "../attachContextRoot.js";
-import type { ControllableInterface } from "./Controllable.js";
-import { efContext } from "./efContext.js";
-import { playingContext } from "./playingContext.js";
-import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
-
-attachContextRoot();
-
-@customElement("ef-toggle-play")
-export class EFTogglePlay extends TargetOrContextMixin(LitElement, efContext) {
-  static styles = [
-    css`
-      :host {}
-      div {
-        all: inherit;
-      }
-    `,
-  ];
-
-  @consume({ context: playingContext, subscribe: true })
-  @state()
-  playing = false;
-
-  get efContext(): ControllableInterface | null {
-    return this.effectiveContext;
-  }
-
-  // Attach click listener to host
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.togglePlay);
-  }
-
-  // Detach click listener from host
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.togglePlay);
-  }
-
-  render() {
-    return html`
-      <div>
-        ${
-          this.playing
-            ? html`<slot name="pause"></slot>`
-            : html`<slot name="play"></slot>`
-        }
-      </div>
-    `;
-  }
-
-  togglePlay = () => {
-    if (this.efContext) {
-      if (this.playing) {
-        this.efContext.pause();
-      } else {
-        this.efContext.play();
-      }
-    }
-  };
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-toggle-play": EFTogglePlay;
-  }
-}

package/src/gui/EFWorkbench.ts

@@ -1,115 +0,0 @@
-import { css, html, LitElement, type PropertyValueMap } from "lit";
-import { customElement, eventOptions, property } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-
-import { ContextMixin } from "./ContextMixin.js";
-import { TWMixin } from "./TWMixin.js";
-
-@customElement("ef-workbench")
-export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    `,
-  ];
-
-  @property({ type: Boolean })
-  rendering = false;
-
-  focusOverlay = createRef<HTMLDivElement>();
-
-  @eventOptions({ passive: false, capture: true })
-  handleStageWheel(event: WheelEvent) {
-    event.preventDefault();
-  }
-
-  connectedCallback(): void {
-    document.body.style.width = "100%";
-    document.body.style.height = "100%";
-    document.documentElement.style.width = "100%";
-    document.documentElement.style.height = "100%";
-    super.connectedCallback();
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    document.body.style.width = "";
-    document.body.style.height = "";
-    document.documentElement.style.width = "";
-    document.documentElement.style.height = "";
-  }
-
-  update(
-    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
-  ): void {
-    super.update(changedProperties);
-
-    if (changedProperties.has("focusedElement")) {
-      this.drawOverlays();
-    }
-  }
-
-  drawOverlays = () => {
-    const focusOverlay = this.focusOverlay.value;
-    if (focusOverlay) {
-      if (this.focusedElement) {
-        focusOverlay.style.display = "block";
-        const rect = this.focusedElement.getBoundingClientRect();
-        Object.assign(focusOverlay.style, {
-          position: "fixed",
-          top: `${rect.top}px`,
-          left: `${rect.left}px`,
-          width: `${rect.width}px`,
-          height: `${rect.height}px`,
-        });
-        requestAnimationFrame(this.drawOverlays);
-      } else {
-        focusOverlay.style.display = "none";
-      }
-    }
-  };
-
-  render() {
-    // TODO: this.rendering is not correctly set when using the framegen bridge
-    // so to hack we're checking for the existence of EF_RENDERING on the window
-    if (
-      this.rendering ||
-      (typeof window !== "undefined" && window.EF_RENDERING?.() === true)
-    ) {
-      return html`
-        <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
-      `;
-    }
-    return html`
-      <div
-        class="grid h-full w-full bg-slate-800"
-        style="grid-template-rows: 1fr 300px; grid-template-columns: 100%;"
-      >
-        <div
-          class="relative h-full w-full overflow-hidden"
-          @wheel=${this.handleStageWheel}
-        >
-          <ef-fit-scale class="h-full grid place-content-center">
-            <slot name="canvas" class="contents"></slot>
-          </ef-fit-scale>
-          <div
-            class="border border-blue-500 bg-blue-200 bg-opacity-20 absolute"
-            ${ref(this.focusOverlay)}
-          ></div>
-        </div>
-
-        <slot class="overflow inline-block" name="timeline"></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-workbench": EFWorkbench;
-  }
-}