@editframe/elements 0.5.0-beta.7 → 0.5.0-beta.9

package/src/elements/EFTemporal.ts

@@ -1,246 +0,0 @@
-import { LitElement, ReactiveController } from "lit";
-import { consume, createContext } from "@lit/context";
-import { property, state } from "lit/decorators.js";
-import { EFTimegroup } from "./EFTimegroup";
-
-import { durationConverter } from "./durationConverter";
-import { Task } from "@lit/task";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
-
-export const timegroupContext = createContext<EFTimegroup>(
-  Symbol("timeGroupContext"),
-);
-
-export declare class TemporalMixinInterface {
-  get hasOwnDuration(): boolean;
-  get durationMs(): number;
-  get startTimeMs(): number;
-  get startTimeWithinParentMs(): number;
-  get endTimeMs(): number;
-  get ownCurrentTimeMs(): number;
-
-  parentTimegroup?: EFTimegroup;
-  rootTimegroup?: EFTimegroup;
-
-  frameTask: Task<readonly unknown[], unknown>;
-}
-
-export const isEFTemporal = (obj: any): obj is TemporalMixinInterface =>
-  obj[EF_TEMPORAL];
-
-const EF_TEMPORAL = Symbol("EF_TEMPORAL");
-
-export const deepGetTemporalElements = (
-  element: Element,
-  temporals: TemporalMixinInterface[] = [],
-) => {
-  for (const child of element.children) {
-    if (isEFTemporal(child)) {
-      temporals.push(child);
-    }
-    deepGetTemporalElements(child, temporals);
-  }
-  return temporals;
-};
-
-export const deepGetElementsWithFrameTasks = (
-  element: Element,
-  elements: { frameTask: Task }[] = [],
-) => {
-  for (const child of element.children) {
-    if ("frameTask" in child && child.frameTask instanceof Task) {
-      elements.push(child as { frameTask: Task });
-    }
-    deepGetElementsWithFrameTasks(child, elements);
-  }
-  return elements;
-};
-
-export const shallowGetTemporalElements = (
-  element: Element,
-  temporals: TemporalMixinInterface[] = [],
-) => {
-  for (const child of element.children) {
-    if (isEFTemporal(child)) {
-      temporals.push(child);
-    } else {
-      shallowGetTemporalElements(child, temporals);
-    }
-  }
-  return temporals;
-};
-
-export const shallowGetTimegroups = (
-  element: Element,
-  groups: EFTimegroup[] = [],
-) => {
-  for (const child of element.children) {
-    if (child instanceof EFTimegroup) {
-      groups.push(child);
-    } else {
-      shallowGetTimegroups(child, groups);
-    }
-  }
-  return groups;
-};
-
-export class OwnCurrentTimeController implements ReactiveController {
-  constructor(
-    private host: EFTimegroup,
-    private temporal: TemporalMixinInterface & LitElement,
-  ) {
-    host.addController(this);
-  }
-
-  hostUpdated() {
-    this.temporal.requestUpdate("ownCurrentTimeMs");
-  }
-
-  remove() {
-    this.host.removeController(this);
-  }
-}
-
-export const EFTemporal = <T extends Constructor<LitElement>>(
-  superClass: T,
-) => {
-  class TemporalMixinClass extends superClass {
-    ownCurrentTimeController?: OwnCurrentTimeController;
-
-    #parentTimegroup?: EFTimegroup;
-    @consume({ context: timegroupContext, subscribe: true })
-    @property({ attribute: false })
-    set parentTimegroup(value: EFTimegroup | undefined) {
-      this.#parentTimegroup = value;
-      this.ownCurrentTimeController?.remove();
-      this.rootTimegroup = this.getRootTimegroup();
-      if (this.rootTimegroup) {
-        this.ownCurrentTimeController = new OwnCurrentTimeController(
-          this.rootTimegroup,
-          this,
-        );
-      }
-    }
-    get parentTimegroup() {
-      return this.#parentTimegroup;
-    }
-
-    @property({
-      type: String,
-      attribute: "offset",
-      converter: durationConverter,
-    })
-    private _offsetMs = 0;
-
-    @property({
-      type: Number,
-      attribute: "duration",
-      converter: durationConverter,
-    })
-    private _durationMs?: number;
-
-    private get offsetAppliesToDuration() {
-      return !(this.parentTimegroup?.mode === "sequence");
-    }
-
-    @state()
-    rootTimegroup?: EFTimegroup = this.getRootTimegroup();
-
-    private getRootTimegroup(): EFTimegroup | undefined {
-      let parent = this instanceof EFTimegroup ? this : this.parentTimegroup;
-      while (parent?.parentTimegroup) {
-        parent = parent.parentTimegroup;
-      }
-      return parent;
-    }
-
-    get hasOwnDuration() {
-      return false;
-    }
-
-    // Defining this as a getter to a private property allows us to
-    // override it classes that include this mixin.
-    get durationMs() {
-      let durationMs =
-        this._durationMs || this.parentTimegroup?.durationMs || 0;
-      return durationMs || 0;
-    }
-
-    get offsetMs() {
-      return this._offsetMs || 0;
-    }
-
-    get parentTemporal() {
-      let parent = this.parentElement;
-      while (parent && !isEFTemporal(parent)) {
-        parent = parent.parentElement;
-      }
-      return parent;
-    }
-
-    get startTimeWithinParentMs() {
-      if (!this.parentTemporal) {
-        return 0;
-      }
-      return this.startTimeMs - this.parentTemporal.startTimeMs;
-    }
-
-    get startTimeMs(): number {
-      const parentTimegroup = this.parentTimegroup;
-      if (!parentTimegroup) {
-        return 0;
-      }
-      switch (parentTimegroup.mode) {
-        case "sequence": {
-          const siblingTemorals = shallowGetTemporalElements(parentTimegroup);
-          const ownIndex = siblingTemorals.indexOf(this);
-          if (ownIndex === 0) {
-            return parentTimegroup.startTimeMs;
-          }
-          const previous = siblingTemorals[ownIndex - 1];
-          if (!previous) {
-            throw new Error("Previous temporal element not found");
-          }
-          return previous.startTimeMs + previous.durationMs;
-        }
-        case "contain":
-        case "fixed":
-          return parentTimegroup.startTimeMs + this.offsetMs;
-        default:
-          throw new Error(`Invalid time mode: ${parentTimegroup.mode}`);
-      }
-    }
-
-    get endTimeMs(): number {
-      return this.startTimeMs + this.durationMs;
-    }
-
-    get ownCurrentTimeMs() {
-      if (this.rootTimegroup) {
-        return Math.min(
-          Math.max(0, this.rootTimegroup.currentTimeMs - this.startTimeMs),
-          this.durationMs,
-        );
-      }
-      return 0;
-    }
-
-    frameTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.ownCurrentTimeMs] as const,
-      task: async ([], { signal }) => {
-        let fullyUpdated = await this.updateComplete;
-        while (!fullyUpdated) {
-          fullyUpdated = await this.updateComplete;
-        }
-      },
-    });
-  }
-
-  Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {
-    value: true,
-  });
-
-  return TemporalMixinClass as unknown as Constructor<TemporalMixinInterface> &
-    T;
-};

package/src/elements/EFTimegroup.browsertest.ts

@@ -1,360 +0,0 @@
-import { LitElement, render, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { describe, test, assert, beforeEach } from "vitest";
-import "./EFTimegroup";
-import { EFTimegroup } from "./EFTimegroup";
-import { EFTemporal } from "./EFTemporal";
-import { buildLitFixture } from "./buildLitFixture";
-
-beforeEach(() => {
-  for (let i = 0; i < localStorage.length; i++) {
-    localStorage.removeItem(localStorage.key(i)!);
-  }
-});
-
-@customElement("test-temporal")
-class TestTemporal extends EFTemporal(LitElement) {
-  get hasOwnDuration(): boolean {
-    return true;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "test-temporal": TestTemporal;
-  }
-}
-
-const litTest = test.extend<{
-  container: HTMLDivElement;
-  timegroup: EFTimegroup;
-  containTimegroup: EFTimegroup;
-  sequenceTimegroup: EFTimegroup;
-  fixedTimegroup: EFTimegroup;
-  tenSecondTimegroup: EFTimegroup;
-}>({
-  container: async ({}, use) => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    await use(container);
-    document.body.removeChild(container);
-  },
-
-  timegroup: buildLitFixture<EFTimegroup>(html`<ef-timegroup></ef-timegroup>`),
-  containTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup mode="contain"></ef-timegroup>`,
-  ),
-  sequenceTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup mode="sequence"></ef-timegroup>`,
-  ),
-  fixedTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup mode="fixed"></ef-timegroup>`,
-  ),
-  tenSecondTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup id="ten-second" duration="10s"></ef-timegroup>`,
-  ),
-});
-
-describe(`<ef-timegroup mode="fixed">`, () => {
-  litTest(
-    "can explicitly set a duration in seconds",
-    async ({ fixedTimegroup: timegroup }) => {
-      timegroup.setAttribute("duration", "10s");
-      assert.equal(timegroup.durationMs, 10_000);
-    },
-  );
-
-  litTest(
-    "can explicitly set a duration in milliseconds",
-    async ({ fixedTimegroup: timegroup }) => {
-      timegroup.setAttribute("duration", "10ms");
-      assert.equal(timegroup.durationMs, 10);
-    },
-  );
-});
-
-describe(`<ef-timegroup mode="sequence">`, () => {
-  litTest("fixed duration is ignored", ({ sequenceTimegroup: timegroup }) => {
-    timegroup.setAttribute("duration", "10s");
-    assert.equal(timegroup.durationMs, 0);
-  });
-
-  litTest(
-    "duration is the sum of child time groups",
-    async ({ sequenceTimegroup: timegroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-        `,
-        timegroup,
-      );
-      await timegroup.updateComplete;
-      assert.equal(timegroup.durationMs, 10_000);
-    },
-  );
-
-  litTest(
-    "duration can include any element with a durationMs value",
-    async ({ sequenceTimegroup: TimeGroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          <test-temporal duration="5s"></test-temporal>
-        `,
-        TimeGroup,
-      );
-
-      assert.equal(TimeGroup.durationMs, 10_000);
-    },
-  );
-
-  litTest("arbitrary html is ignored", ({ sequenceTimegroup: timegroup }) => {
-    render(
-      html`
-        <div>
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-        </div>
-      `,
-      timegroup,
-    );
-    assert.equal(timegroup.durationMs, 5_000);
-  });
-
-  litTest(
-    "nested time groups are ignored",
-    async ({ sequenceTimegroup: timegroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s">
-            <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          </ef-timegroup>
-        `,
-        timegroup,
-      );
-      await timegroup.updateComplete;
-      assert.equal(timegroup.durationMs, 5_000);
-    },
-  );
-});
-
-describe(`<ef-timegroup mode="contain">`, () => {
-  litTest("fixed duration is ignored", ({ containTimegroup: timegroup }) => {
-    timegroup.setAttribute("duration", "10s");
-    assert.equal(timegroup.durationMs, 0);
-  });
-
-  litTest(
-    "duration is the max of child time groups",
-    async ({ containTimegroup: timegroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
-        `,
-        timegroup,
-      );
-      await timegroup.updateComplete;
-      assert.equal(timegroup.durationMs, 10_000);
-    },
-  );
-});
-
-describe("startTimeMs", () => {
-  litTest(
-    "is computed relative to the root time group",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="sequence">
-          <ef-timegroup id="a" mode="fixed" duration="5s"></ef-timegroup>
-          <ef-timegroup id="b" mode="sequence">
-            <ef-timegroup id="c" mode="fixed" duration="5s"></ef-timegroup>
-            <ef-timegroup id="d" mode="contain">
-              <ef-timegroup id="e" mode="fixed" duration="5s"></ef-timegroup>
-              <ef-timegroup id="f" mode="fixed" duration="5s"></ef-timegroup>
-            </ef-timegroup>
-          </ef-timegroup>
-        </ef-timegroup>`,
-        container,
-      );
-
-      const a = container.querySelector("#a") as EFTimegroup;
-      const b = container.querySelector("#b") as EFTimegroup;
-      const c = container.querySelector("#c") as EFTimegroup;
-      const d = container.querySelector("#d") as EFTimegroup;
-      const e = container.querySelector("#e") as EFTimegroup;
-      const f = container.querySelector("#f") as EFTimegroup;
-
-      assert.equal(a.startTimeMs, 0);
-      assert.equal(b.startTimeMs, 5_000);
-      assert.equal(c.startTimeMs, 5_000);
-      assert.equal(d.startTimeMs, 10_000);
-      assert.equal(e.startTimeMs, 10_000);
-      assert.equal(f.startTimeMs, 10_000);
-    },
-  );
-
-  // TODO: Rethink offset math, it shouldn't effect the duration of a temporal item
-  // but actually change the start and end time.
-  litTest.skip("can be offset with offset attribute", async ({ container }) => {
-    render(
-      html`<ef-timegroup id="root" mode="contain">
-        <test-temporal id="a" duration="5s" offset="5s"></test-temporal>
-      </ef-timegroup> `,
-      container,
-    );
-
-    const root = container.querySelector("#root") as EFTimegroup;
-    const a = container.querySelector("#a") as TestTemporal;
-
-    assert.equal(a.durationMs, 5_000);
-    assert.equal(root.durationMs, 10_000);
-    assert.equal(a.startTimeMs, 5_000);
-  });
-
-  litTest.skip(
-    "offsets do not affect start time when in a sequence group",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="sequence">
-          <test-temporal id="a" duration="5s"></test-temporal>
-          <test-temporal id="b" duration="5s" offset="5s"></test-temporal>
-        </ef-timegroup> `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as TestTemporal;
-      const b = container.querySelector("#b") as TestTemporal;
-
-      assert.equal(root.durationMs, 10_000);
-      assert.equal(a.startTimeMs, 0);
-      assert.equal(b.startTimeMs, 5_000);
-    },
-  );
-
-  litTest(
-    "temporal elements default to expand to fill a timegroup",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="fixed" duration="10s">
-          <test-temporal id="a"></test-temporal>
-        </ef-timegroup> `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as TestTemporal;
-
-      assert.equal(root.durationMs, 10_000);
-      assert.equal(a.durationMs, 10_000);
-    },
-  );
-
-  litTest(
-    "element's parentTimegroup updates as they move",
-    async ({ container }) => {
-      const timegroup1 = document.createElement("ef-timegroup");
-      timegroup1.setAttribute("mode", "fixed");
-      timegroup1.setAttribute("duration", "5s");
-
-      const timegroup2 = document.createElement("ef-timegroup");
-      timegroup2.setAttribute("mode", "fixed");
-      timegroup2.setAttribute("duration", "5s");
-
-      container.appendChild(timegroup1);
-      container.appendChild(timegroup2);
-
-      const temporal = document.createElement("test-temporal");
-
-      timegroup1.appendChild(temporal);
-
-      assert.equal(temporal.parentTimegroup, timegroup1);
-
-      timegroup2.appendChild(temporal);
-      assert.equal(temporal.parentTimegroup, timegroup2);
-    },
-  );
-
-  litTest(
-    "elements can access their root temporal element",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="contain" duration="10s">
-          <ef-timegroup id="a" mode="contain">
-            <div>
-              <ef-timegroup id="b" mode="contain">
-                <div>
-                  <test-temporal id="c" duration="5s"></test-temporal>
-                </div>
-              </ef-timegroup>
-            </div>
-          </ef-timegroup>
-        </ef-timegroup> `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as EFTimegroup;
-      const b = container.querySelector("#b") as EFTimegroup;
-      const c = container.querySelector("#c") as TestTemporal;
-
-      assert.equal(root.rootTimegroup, root);
-
-      assert.equal(a.rootTimegroup, root);
-      assert.equal(b.rootTimegroup, root);
-      assert.equal(c.rootTimegroup, root);
-    },
-  );
-});
-
-describe("setting currentTime", () => {
-  litTest(
-    "persists in localStorage if the timegroup has an id",
-    async ({ tenSecondTimegroup: timegroup }) => {
-      assert.isNull(localStorage.getItem(timegroup.storageKey));
-      timegroup.currentTime = 5_000;
-      assert.equal(localStorage.getItem(timegroup.storageKey), "5000");
-    },
-  );
-
-  litTest(
-    "does not persist in localStorage if the timegroup has no id",
-    async ({ timegroup }) => {
-      timegroup.currentTime = 5_000;
-      assert.isNull(localStorage.getItem(timegroup.storageKey));
-    },
-  );
-
-  litTest(
-    "nested items derive their ownCurrentTimeMs",
-    async ({ container }) => {
-      render(
-        html`
-          <ef-timegroup id="root" mode="sequence">
-            <ef-timegroup id="a" mode="fixed" duration="5s"> </ef-timegroup>
-            <test-temporal id="b" mode="fixed" duration="5s"> </test-temporal>
-          </ef-timegroup>
-        `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as TestTemporal;
-      const b = container.querySelector("#b") as TestTemporal;
-
-      assert.equal(a.ownCurrentTimeMs, 0);
-      assert.equal(b.ownCurrentTimeMs, 0);
-
-      root.currentTimeMs = 2_500;
-
-      assert.equal(a.ownCurrentTimeMs, 2_500);
-      assert.equal(b.ownCurrentTimeMs, 0);
-
-      root.currentTimeMs = 7_500;
-
-      assert.equal(a.ownCurrentTimeMs, 5_000);
-      assert.equal(b.ownCurrentTimeMs, 2_500);
-    },
-  );
-});