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

package/src/gui/EFWorkbench.ts

@@ -0,0 +1,242 @@
+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

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

package/src/gui/TWMixin.ts

@@ -0,0 +1,27 @@
+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

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

package/dist/elements/elements.css.mjs

@@ -1 +0,0 @@
-