@editframe/elements 0.7.0-beta.8 → 0.8.0-beta.1

package/src/gui/EFWorkbench.ts

@@ -1,34 +1,15 @@
-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 { customElement, eventOptions } 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>(Symbol("focusContext"));
-
-export const focusedElement = createContext<HTMLElement | undefined>(
-  Symbol("focusedElement"),
-);
-
-export const fetchContext = createContext<typeof fetch>(Symbol("fetchContext"));
-
-export const apiHostContext = createContext<string>(Symbol("apiHostContext"));
+import { deepGetTemporalElements } from "../elements/EFTemporal.ts";
+import { TWMixin } from "./TWMixin.ts";
+import { shallowGetTimegroups } from "../elements/EFTimegroup.ts";
+import { ContextMixin } from "./ContextMixin.ts";
 
 @customElement("ef-workbench")
-export class EFWorkbench extends TWMixin(LitElement) {
+export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
   static styles = [
     css`
       :host {
@@ -38,51 +19,6 @@ export class EFWorkbench extends TWMixin(LitElement) {
       }
     `,
   ];
-  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();
@@ -93,40 +29,6 @@ export class EFWorkbench extends TWMixin(LitElement) {
     event.preventDefault();
   }
 
-  @provide({ context: focusContext })
-  focusContext = this as FocusContext;
-
-  @provide({ context: focusedElement })
-  @state()
-  focusedElement?: HTMLElement;
-
-  @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>();
 
   update(
@@ -215,7 +117,7 @@ export class EFWorkbench extends TWMixin(LitElement) {
 
     for (let i = 0; i < frameCount; i++) {
       firstGroup.currentTimeMs = i * stepDurationMs;
-      await awaitMicrotask();
+      await new Promise<void>(queueMicrotask);
       const busyTasks = temporals
         .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
         .map((temporal) => temporal.frameTask);

package/src/gui/TWMixin.ts

@@ -2,8 +2,11 @@ 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);
+let twSheet: CSSStyleSheet | null = null;
+if (typeof window !== "undefined") {
+  twSheet = new CSSStyleSheet();
+  twSheet.replaceSync(twStyle);
+}
 export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
   class TWElement extends Base {
     createRenderRoot() {
@@ -13,7 +16,11 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
           "TWMixin can only be applied to elements with shadow roots",
         );
       }
-
+      if (!twSheet) {
+        throw new Error(
+          "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment",
+        );
+      }
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,

package/src/gui/apiHostContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const apiHostContext = createContext<string>(Symbol("apiHostContext"));

package/src/gui/fetchContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+
+export const fetchContext = createContext<
+  (url: string, init?: RequestInit) => Promise<Response>
+>(Symbol("fetchContext"));

package/src/gui/focusContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from "@lit/context";
+
+export interface FocusContext {
+  focusedElement: HTMLElement | null;
+}
+
+export const focusContext = createContext<FocusContext>(Symbol("focusContext"));

package/src/gui/focusedElementContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+
+export const focusedElementContext = createContext<HTMLElement | undefined>(
+  Symbol("focusedElement"),
+);

package/src/gui/playingContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const playingContext = createContext<boolean>(Symbol("playingContext"));