@editframe/elements 0.6.0-beta.9 → 0.7.0-beta.4

package/dist/packages/elements/src/elements/EFTemporal.cjs

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const context = require("@lit/context");
+const decorators_js = require("lit/decorators.js");
+const durationConverter = require("./durationConverter.cjs");
+const task = require("@lit/task");
+const EF_INTERACTIVE = require("../EF_INTERACTIVE.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const timegroupContext = context.createContext(
+  Symbol("timeGroupContext")
+);
+const isEFTemporal = (obj) => obj[EF_TEMPORAL];
+const EF_TEMPORAL = Symbol("EF_TEMPORAL");
+const deepGetTemporalElements = (element, temporals = []) => {
+  for (const child of element.children) {
+    if (isEFTemporal(child)) {
+      temporals.push(child);
+    }
+    deepGetTemporalElements(child, temporals);
+  }
+  return temporals;
+};
+const deepGetElementsWithFrameTasks = (element, elements = []) => {
+  for (const child of element.children) {
+    if ("frameTask" in child && child.frameTask instanceof task.Task) {
+      elements.push(child);
+    }
+    deepGetElementsWithFrameTasks(child, elements);
+  }
+  return elements;
+};
+const shallowGetTemporalElements = (element, temporals = []) => {
+  for (const child of element.children) {
+    if (isEFTemporal(child)) {
+      temporals.push(child);
+    } else {
+      shallowGetTemporalElements(child, temporals);
+    }
+  }
+  return temporals;
+};
+class OwnCurrentTimeController {
+  constructor(host, temporal) {
+    this.host = host;
+    this.temporal = temporal;
+    host.addController(this);
+  }
+  hostUpdated() {
+    this.temporal.requestUpdate("ownCurrentTimeMs");
+  }
+  remove() {
+    this.host.removeController(this);
+  }
+}
+const EFTemporal = (superClass) => {
+  class TemporalMixinClass extends superClass {
+    constructor() {
+      super(...arguments);
+      this._offsetMs = 0;
+      this.rootTimegroup = this.getRootTimegroup();
+      this.frameTask = new task.Task(this, {
+        autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+        args: () => [this.ownCurrentTimeMs],
+        task: async ([], { signal: _signal }) => {
+          let fullyUpdated = await this.updateComplete;
+          while (!fullyUpdated) {
+            fullyUpdated = await this.updateComplete;
+          }
+        }
+      });
+    }
+    #parentTimegroup;
+    set parentTimegroup(value) {
+      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;
+    }
+    getRootTimegroup() {
+      let parent = this.tagName === "EF-TIMEGROUP" ? 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() {
+      return this._durationMs || this.parentTimegroup?.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() {
+      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() {
+      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;
+    }
+  }
+  __decorateClass([
+    context.consume({ context: timegroupContext, subscribe: true }),
+    decorators_js.property({ attribute: false })
+  ], TemporalMixinClass.prototype, "parentTimegroup", 1);
+  __decorateClass([
+    decorators_js.property({
+      type: String,
+      attribute: "offset",
+      converter: durationConverter.durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_offsetMs", 2);
+  __decorateClass([
+    decorators_js.property({
+      type: Number,
+      attribute: "duration",
+      converter: durationConverter.durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_durationMs", 2);
+  __decorateClass([
+    decorators_js.state()
+  ], TemporalMixinClass.prototype, "rootTimegroup", 2);
+  Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {
+    value: true
+  });
+  return TemporalMixinClass;
+};
+exports.EFTemporal = EFTemporal;
+exports.OwnCurrentTimeController = OwnCurrentTimeController;
+exports.deepGetElementsWithFrameTasks = deepGetElementsWithFrameTasks;
+exports.deepGetTemporalElements = deepGetTemporalElements;
+exports.isEFTemporal = isEFTemporal;
+exports.shallowGetTemporalElements = shallowGetTemporalElements;
+exports.timegroupContext = timegroupContext;

package/dist/packages/elements/src/elements/EFTemporal.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, ReactiveController } from 'lit';
+import { EFTimegroup } from './EFTimegroup';
+import { Task } from '@lit/task';
+
+export declare const timegroupContext: {
+    __context__: EFTimegroup;
+};
+export declare class TemporalMixinInterface {
+    get hasOwnDuration(): boolean;
+    get durationMs(): number;
+    get startTimeMs(): number;
+    get startTimeWithinParentMs(): number;
+    get endTimeMs(): number;
+    get ownCurrentTimeMs(): number;
+    set duration(value: string);
+    get duration(): string;
+    parentTimegroup?: EFTimegroup;
+    rootTimegroup?: EFTimegroup;
+    frameTask: Task<readonly unknown[], unknown>;
+}
+export declare const isEFTemporal: (obj: any) => obj is TemporalMixinInterface;
+export declare const deepGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
+export declare const deepGetElementsWithFrameTasks: (element: Element, elements?: Array<HTMLElement & {
+    frameTask: Task;
+}>) => (HTMLElement & {
+    frameTask: Task;
+})[];
+export declare const shallowGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
+export declare class OwnCurrentTimeController implements ReactiveController {
+    private host;
+    private temporal;
+    constructor(host: EFTimegroup, temporal: TemporalMixinInterface & LitElement);
+    hostUpdated(): void;
+    remove(): void;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare const EFTemporal: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TemporalMixinInterface> & T;
+export {};

package/dist/packages/elements/src/elements/EFTemporal.js

@@ -0,0 +1,199 @@
+import { createContext, consume } from "@lit/context";
+import { property, state } from "lit/decorators.js";
+import { durationConverter } from "./durationConverter.js";
+import { Task } from "@lit/task";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const timegroupContext = createContext(
+  Symbol("timeGroupContext")
+);
+const isEFTemporal = (obj) => obj[EF_TEMPORAL];
+const EF_TEMPORAL = Symbol("EF_TEMPORAL");
+const deepGetTemporalElements = (element, temporals = []) => {
+  for (const child of element.children) {
+    if (isEFTemporal(child)) {
+      temporals.push(child);
+    }
+    deepGetTemporalElements(child, temporals);
+  }
+  return temporals;
+};
+const deepGetElementsWithFrameTasks = (element, elements = []) => {
+  for (const child of element.children) {
+    if ("frameTask" in child && child.frameTask instanceof Task) {
+      elements.push(child);
+    }
+    deepGetElementsWithFrameTasks(child, elements);
+  }
+  return elements;
+};
+const shallowGetTemporalElements = (element, temporals = []) => {
+  for (const child of element.children) {
+    if (isEFTemporal(child)) {
+      temporals.push(child);
+    } else {
+      shallowGetTemporalElements(child, temporals);
+    }
+  }
+  return temporals;
+};
+class OwnCurrentTimeController {
+  constructor(host, temporal) {
+    this.host = host;
+    this.temporal = temporal;
+    host.addController(this);
+  }
+  hostUpdated() {
+    this.temporal.requestUpdate("ownCurrentTimeMs");
+  }
+  remove() {
+    this.host.removeController(this);
+  }
+}
+const EFTemporal = (superClass) => {
+  class TemporalMixinClass extends superClass {
+    constructor() {
+      super(...arguments);
+      this._offsetMs = 0;
+      this.rootTimegroup = this.getRootTimegroup();
+      this.frameTask = new Task(this, {
+        autoRun: EF_INTERACTIVE,
+        args: () => [this.ownCurrentTimeMs],
+        task: async ([], { signal: _signal }) => {
+          let fullyUpdated = await this.updateComplete;
+          while (!fullyUpdated) {
+            fullyUpdated = await this.updateComplete;
+          }
+        }
+      });
+    }
+    #parentTimegroup;
+    set parentTimegroup(value) {
+      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;
+    }
+    getRootTimegroup() {
+      let parent = this.tagName === "EF-TIMEGROUP" ? 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() {
+      return this._durationMs || this.parentTimegroup?.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() {
+      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() {
+      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;
+    }
+  }
+  __decorateClass([
+    consume({ context: timegroupContext, subscribe: true }),
+    property({ attribute: false })
+  ], TemporalMixinClass.prototype, "parentTimegroup", 1);
+  __decorateClass([
+    property({
+      type: String,
+      attribute: "offset",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_offsetMs", 2);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "duration",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_durationMs", 2);
+  __decorateClass([
+    state()
+  ], TemporalMixinClass.prototype, "rootTimegroup", 2);
+  Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, {
+    value: true
+  });
+  return TemporalMixinClass;
+};
+export {
+  EFTemporal,
+  OwnCurrentTimeController,
+  deepGetElementsWithFrameTasks,
+  deepGetTemporalElements,
+  isEFTemporal,
+  shallowGetTemporalElements,
+  timegroupContext
+};

package/dist/packages/elements/src/elements/EFTimegroup.browsertest.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare class TestTemporal extends TestTemporal_base {
+    get hasOwnDuration(): boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-temporal": TestTemporal;
+    }
+}
+export {};