@editframe/elements 0.26.3-beta.0 → 0.26.4-beta.0

package/src/gui/EFPlay.ts

@@ -1,73 +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-play")
-export class EFPlay extends TargetOrContextMixin(LitElement, efContext) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-      :host([hidden]) {
-        display: none;
-      }
-      div {
-        all: inherit;
-      }
-    `,
-  ];
-
-  @consume({ context: playingContext, subscribe: true })
-  @state()
-  playing = false;
-
-  get efContext(): ControllableInterface | null {
-    return this.effectiveContext;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this.handleClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.handleClick);
-  }
-
-  updated(changedProperties: Map<string | number | symbol, unknown>): void {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("playing")) {
-      this.style.display = this.playing ? "none" : "";
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  handleClick = () => {
-    if (this.efContext) {
-      this.efContext.play();
-    }
-  };
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-play": EFPlay;
-  }
-}

package/src/gui/EFPreview.ts

@@ -1,74 +0,0 @@
-import { provide } from "@lit/context";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { isEFTemporal } from "../elements/EFTemporal.js";
-import { EFTargetable } from "../elements/TargetController.js";
-import { ContextMixin } from "./ContextMixin.js";
-import { focusedElementContext } from "./focusedElementContext.js";
-import { TWMixin } from "./TWMixin.js";
-
-@customElement("ef-preview")
-export class EFPreview extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
-  static styles = [
-    css`
-      :host {
-        position: relative;
-        display: block;
-        cursor: crosshair;
-      }
-    `,
-  ];
-
-  @provide({ context: focusedElementContext })
-  focusedElement?: HTMLElement;
-
-  /**
-   * Find the closest temporal element (timegroup, video, audio, etc.)
-   */
-  private findClosestTemporal(element: HTMLElement | null): HTMLElement | null {
-    let current = element;
-    while (current && current !== this) {
-      if (isEFTemporal(current)) {
-        return current;
-      }
-      current = current.parentElement;
-    }
-    return null;
-  }
-
-  constructor() {
-    super();
-    this.addEventListener("mouseover", (e) => {
-      const target = e.target as HTMLElement;
-      const temporal = this.findClosestTemporal(target);
-      if (target !== this && temporal) {
-        this.focusedElement = target;
-      }
-    });
-    this.addEventListener("mouseout", (e) => {
-      const relatedTarget = e.relatedTarget as HTMLElement;
-      const targetingTemporal = this.findClosestTemporal(relatedTarget);
-      // Clear focus if:
-      // 1. Moving outside the preview entirely, or
-      // 2. Moving to the preview itself, or
-      // 3. Moving to an element that's not within a temporal
-      if (
-        !this.contains(relatedTarget) ||
-        relatedTarget === this ||
-        !targetingTemporal
-      ) {
-        this.focusedElement = undefined;
-      }
-    });
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-preview": EFPreview;
-  }
-}

package/src/gui/EFResizableBox.browsertest.ts

@@ -1,79 +0,0 @@
-import { html, render } from "lit";
-import { afterEach, describe, expect, test } from "vitest";
-import type { EFResizableBox } from "./EFResizableBox";
-import "./EFResizableBox";
-
-describe("EFResizableBox", () => {
-  afterEach(() => {
-    document.body.innerHTML = "";
-  });
-
-  test("should render with default bounds", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    render(html`<ef-resizable-box></ef-resizable-box>`, container);
-    const el = container.querySelector<EFResizableBox>("ef-resizable-box")!;
-    await el.updateComplete;
-
-    const box = el.shadowRoot!.querySelector(".box") as HTMLDivElement;
-    expect(box).to.exist;
-    expect(box.style.left).to.equal("0px");
-    expect(box.style.top).to.equal("0px");
-    expect(box.style.width).to.equal("100px");
-    expect(box.style.height).to.equal("100px");
-  });
-
-  test("should render with provided bounds", async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const bounds = { x: 50, y: 50, width: 200, height: 150 };
-    render(
-      html`<ef-resizable-box .bounds=${bounds}></ef-resizable-box>`,
-      container,
-    );
-    const el = container.querySelector<EFResizableBox>("ef-resizable-box")!;
-    await el.updateComplete;
-
-    const box = el.shadowRoot!.querySelector(".box") as HTMLDivElement;
-    expect(box.style.left).to.equal("50px");
-    expect(box.style.top).to.equal("50px");
-    expect(box.style.width).to.equal("200px");
-    expect(box.style.height).to.equal("150px");
-  });
-
-  test("should be constrained by its parent", async () => {
-    const container = document.createElement("div");
-    container.style.width = "300px";
-    container.style.height = "300px";
-    container.style.position = "relative";
-    document.body.appendChild(container);
-    const bounds = { x: 250, y: 250, width: 100, height: 100 };
-    render(
-      html`<ef-resizable-box .bounds=${bounds}></ef-resizable-box>`,
-      container,
-    );
-    const el = container.querySelector<EFResizableBox>("ef-resizable-box")!;
-    await el.updateComplete;
-
-    const box = el.shadowRoot!.querySelector(".box") as HTMLDivElement;
-    const downEvent = new PointerEvent("pointerdown", {
-      clientX: 260,
-      clientY: 260,
-      bubbles: true,
-      composed: true,
-    });
-    box.dispatchEvent(downEvent);
-
-    const moveEvent = new PointerEvent("pointermove", {
-      clientX: 350,
-      clientY: 350,
-      bubbles: true,
-      composed: true,
-    });
-    document.dispatchEvent(moveEvent);
-    await el.updateComplete;
-
-    expect(el.bounds.x).to.be.lessThanOrEqual(200);
-    expect(el.bounds.y).to.be.lessThanOrEqual(200);
-  });
-});