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

package/src/gui/EFWorkbench.ts

@@ -1,242 +0,0 @@
-import { createContext, provide } from "@lit/context";
-import { LitElement, html, css, PropertyValueMap } from "lit";
-import { TaskStatus } from "@lit/task";
-import {
-  customElement,
-  eventOptions,
-  property,
-  state,
-} from "lit/decorators.js";
-import { ref, createRef } from "lit/directives/ref.js";
-import { styleMap } from "lit/directives/style-map.js";
-
-import { awaitMicrotask } from "@/util/awaitMicrotask";
-import {
-  deepGetTemporalElements,
-  shallowGetTimegroups,
-} from "../elements/EFTemporal";
-import { TWMixin } from "./TWMixin";
-
-export interface FocusContext {
-  focusedElement: HTMLElement | null;
-}
-export const focusContext = createContext<FocusContext>(null);
-
-export const focusedElement = createContext<HTMLElement | null>(null);
-
-export const fetchContext = createContext<typeof fetch>(fetch);
-
-export const apiHostContext = createContext<string>(null);
-
-@customElement("ef-workbench")
-export class EFWorkbench extends TWMixin(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    `,
-  ];
-  stageRef = createRef<HTMLDivElement>();
-  canvasRef = createRef<HTMLSlotElement>();
-
-  resizeObserver = new ResizeObserver(() => {
-    if (this.isConnected && !this.rendering) {
-      const canvasElement = this.canvasRef.value;
-      const stageElement = this.stageRef.value;
-      if (stageElement && canvasElement) {
-        // Determine the appropriate scale factor to make the canvas fit into
-        // it's parent element.
-        const stageWidth = stageElement.clientWidth;
-        const stageHeight = stageElement.clientHeight;
-        const canvasWidth = canvasElement.clientWidth;
-        const canvasHeight = canvasElement.clientHeight;
-        const stageRatio = stageWidth / stageHeight;
-        const canvasRatio = canvasWidth / canvasHeight;
-        if (stageRatio > canvasRatio) {
-          const scale = stageHeight / canvasHeight;
-          canvasElement.style.transform = `scale(${scale})`;
-        } else {
-          const scale = stageWidth / canvasWidth;
-          canvasElement.style.transform = `scale(${scale})`;
-        }
-      }
-    }
-  });
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.resizeObserver.observe(this);
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.resizeObserver.unobserve(this);
-  }
-
-  @eventOptions({ passive: false, capture: true })
-  handleStageWheel(event: WheelEvent) {
-    event.preventDefault();
-  }
-
-  @provide({ context: focusContext })
-  focusContext = this;
-
-  @provide({ context: focusedElement })
-  @state()
-  focusedElement: HTMLElement | null = null;
-
-  @provide({ context: fetchContext })
-  fetch = (path: URL | RequestInfo, init: RequestInit = {}) => {
-    init.headers ||= {};
-    Object.assign(init.headers, {
-      "Content-Type": "application/json",
-    });
-
-    const bearerToken = this.apiToken;
-    if (bearerToken) {
-      Object.assign(init.headers, {
-        Authorization: `Bearer ${bearerToken}`,
-      });
-    }
-
-    return fetch(path, init);
-  };
-
-  @property({ type: String })
-  apiToken?: string;
-
-  @provide({ context: apiHostContext })
-  @property({ type: String })
-  apiHost = "";
-
-  @property({ type: Boolean })
-  rendering = false;
-
-  focusOverlay = createRef<HTMLDivElement>();
-
-  protected 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: "absolute",
-          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() {
-    if (this.rendering) {
-      return html`
-        <slot
-          ${ref(this.canvasRef)}
-          class="fixed inset-0 h-full w-full"
-          name="canvas"
-        ></slot>
-      `;
-    } else {
-      return html`
-        <div
-          class="grid h-full w-full"
-          style="gridTemplateRows: 1fr 200px; gridTemplateColumns: 100%;"
-        >
-          <div
-            ${ref(this.stageRef)}
-            class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
-            @wheel=${this.handleStageWheel}
-          >
-            <slot
-              ${ref(this.canvasRef)}
-              class="inline-block"
-              name="canvas"
-            ></slot>
-            <div
-              class="border border-blue-500 bg-blue-200 bg-opacity-20"
-              ${ref(this.focusOverlay)}
-            ></div>
-          </div>
-
-          <slot class="overflow" name="timeline"></slot>
-        </div>
-      `;
-    }
-  }
-
-  get requiredAssets() {
-    const assets: Record<string, Set<string>> = {};
-    Array.from(
-      document.querySelectorAll(
-        "ef-audio, ef-video, ef-image, ef-captions, ef-waveform",
-      ),
-    ).forEach((el) => {
-      Object.entries((el as any).requiredAssets ?? {}).forEach(
-        ([key, value]) => {
-          if (assets[key]) {
-            for (const v of value) {
-              assets[key].add(v);
-            }
-          } else {
-            assets[key] = new Set(value);
-          }
-        },
-      );
-    });
-    return assets;
-  }
-
-  async stepThrough() {
-    const stepDurationMs = 1000 / 30;
-    const timegroups = shallowGetTimegroups(this);
-    const firstGroup = timegroups[0];
-    if (!firstGroup) {
-      throw new Error("No temporal elements found");
-    }
-    firstGroup.currentTimeMs = 0;
-
-    const temporals = deepGetTemporalElements(this);
-
-    const busyTasks = temporals
-      .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
-      .map((temporal) => temporal.frameTask);
-
-    await Promise.all(busyTasks.map((task) => task.taskComplete));
-
-    while (firstGroup.currentTimeMs < firstGroup.durationMs) {
-      firstGroup.currentTimeMs += stepDurationMs;
-      await awaitMicrotask();
-      const busyTasks = temporals
-        .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
-        .map((temporal) => temporal.frameTask);
-
-      await Promise.all(busyTasks.map((task) => task.taskComplete));
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-workbench": EFWorkbench;
-  }
-}

package/src/gui/TWMixin.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/gui/TWMixin.ts

@@ -1,27 +0,0 @@
-import { LitElement } from "lit";
-import twStyle from "./TWMixin.css?inline";
-
-const twSheet = new CSSStyleSheet();
-twSheet.replaceSync(twStyle);
-export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
-  return class TWElement extends Base {
-    createRenderRoot() {
-      const renderRoot = super.createRenderRoot();
-      if (!(renderRoot instanceof ShadowRoot)) {
-        throw new Error(
-          "TWMixin can only be applied to elements with shadow roots",
-        );
-      }
-
-      if (renderRoot?.adoptedStyleSheets) {
-        renderRoot.adoptedStyleSheets = [
-          twSheet,
-          ...renderRoot.adoptedStyleSheets,
-        ];
-      } else {
-        renderRoot.adoptedStyleSheets = [twSheet];
-      }
-      return renderRoot;
-    }
-  };
-}

package/src/util.d.ts

@@ -1 +0,0 @@
-type Constructor<T = {}> = new (...args: any[]) => T;