@editframe/elements 0.6.0-beta.16 → 0.6.0-beta.17

package/src/gui/EFWorkbench.ts

@@ -0,0 +1,231 @@
+import { createContext, provide } from "@lit/context";
+import { LitElement, html, css, type 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 { awaitMicrotask } from "@/util/awaitMicrotask";
+import { deepGetTemporalElements } from "../elements/EFTemporal";
+import { TWMixin } from "./TWMixin";
+import { shallowGetTimegroups } from "../elements/EFTimegroup";
+
+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>();
+
+  @state()
+  stageScale = 1;
+
+  setStageScale = () => {
+    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;
+          if (this.stageScale !== scale) {
+            canvasElement.style.transform = `scale(${scale})`;
+          }
+          this.stageScale = scale;
+        } else {
+          const scale = stageWidth / canvasWidth;
+          if (this.stageScale !== scale) {
+            canvasElement.style.transform = `scale(${scale})`;
+          }
+          this.stageScale = scale;
+        }
+      }
+    }
+    if (this.isConnected) {
+      requestAnimationFrame(this.setStageScale);
+    }
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    // Preferrably we would use a resizeObserver, but it is difficult to get the first resize
+    // timed correctl. So we use requestAnimationFrame as a stop-gap.
+    requestAnimationFrame(this.setStageScale);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+  }
+
+  @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>
+      `;
+    }
+    return html`
+      <div
+        class="grid h-full w-full"
+        style="grid-template-rows: 1fr 300px; grid-template-columns: 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>
+    `;
+  }
+
+  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 frameCount = Math.ceil(firstGroup.durationMs / stepDurationMs);
+
+    const busyTasks = temporals
+      .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
+      .map((temporal) => temporal.frameTask);
+
+    await Promise.all(busyTasks.map((task) => task.taskComplete));
+
+    for (let i = 0; i < frameCount; i++) {
+      firstGroup.currentTimeMs = i * 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));
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+  }
+}
+
+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,30 @@
+import type { LitElement } from "lit";
+// @ts-expect-error cannot figure out how to declare this module as a string
+import twStyle from "./TWMixin.css?inline";
+
+const twSheet = new CSSStyleSheet();
+twSheet.replaceSync(twStyle);
+export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
+  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;
+    }
+  }
+
+  return TWElement as T;
+}