@editframe/elements 0.13.0-beta.2 → 0.13.0-beta.3

package/dist/gui/ContextMixin.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import { createRef } from 'lit/directives/ref.js';
 import { EFTimegroup } from '../elements/EFTimegroup.js';
 export declare const targetTimegroupContext: {
     __context__: EFTimegroup | null;
@@ -12,8 +11,6 @@ export declare class ContextMixinInterface extends LitElement {
     loop: boolean;
     currentTimeMs: number;
     focusedElement?: HTMLElement;
-    stageRef: ReturnType<typeof createRef<HTMLDivElement>>;
-    canvasRef: ReturnType<typeof createRef<HTMLElement>>;
     targetTimegroup: EFTimegroup | null;
     play(): void;
     pause(): void;

package/dist/gui/ContextMixin.js

@@ -1,6 +1,5 @@
 import { createContext, provide } from "@lit/context";
 import { state, property } from "lit/decorators.js";
-import { createRef } from "lit/directives/ref.js";
 import { apiHostContext } from "./apiHostContext.js";
 import { efContext } from "./efContext.js";
 import { fetchContext } from "./fetchContext.js";
@@ -64,8 +63,6 @@ function ContextMixin(superClass) {
       this.loop = false;
       this.rendering = false;
       this.currentTimeMs = 0;
-      this.stageRef = createRef();
-      this.canvasRef = createRef();
       this.#FPS = 30;
       this.#MS_PER_FRAME = 1e3 / this.#FPS;
       this.#timegroupObserver = new MutationObserver((mutations) => {

package/dist/gui/EFFilmstrip.js

@@ -736,6 +736,8 @@ EFFilmstrip.styles = [
       :host {
         display: block;
         overflow: hidden;
+        width: 100%;
+        height: 100%;
       }
     `
 ];

package/dist/gui/EFWorkbench.d.ts

@@ -2,9 +2,14 @@ import { LitElement, PropertyValueMap } from 'lit';
 declare const EFWorkbench_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 export declare class EFWorkbench extends EFWorkbench_base {
     static styles: import('lit').CSSResult[];
-    disconnectedCallback(): void;
+    stageRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLSlotElement>;
     handleStageWheel(event: WheelEvent): void;
     focusOverlay: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    private stageScale;
+    setStageScale: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     drawOverlays: () => void;
     render(): import('lit-html').TemplateResult<1>;

package/dist/gui/EFWorkbench.js

@@ -1,5 +1,5 @@
 import { html, css, LitElement } from "lit";
-import { eventOptions, customElement } from "lit/decorators.js";
+import { eventOptions, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin.js";
@@ -16,7 +16,45 @@ var __decorateClass = (decorators, target, key, kind) => {
 let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
   constructor() {
     super(...arguments);
+    this.stageRef = createRef();
+    this.canvasRef = createRef();
     this.focusOverlay = createRef();
+    this.stageScale = 1;
+    this.setStageScale = () => {
+      if (this.isConnected && !this.rendering) {
+        const canvasElement = this.canvasRef.value;
+        const stageElement = this.stageRef.value;
+        const canvasChild = canvasElement?.assignedElements()[0];
+        if (stageElement && canvasElement && canvasChild) {
+          canvasElement.style.width = `${canvasChild.clientWidth}px`;
+          canvasElement.style.height = `${canvasChild.clientHeight}px`;
+          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})`;
+              canvasElement.style.transformOrigin = "top center";
+            }
+            this.stageScale = scale;
+          } else {
+            const scale = stageWidth / canvasWidth;
+            if (this.stageScale !== scale) {
+              canvasElement.style.transform = `scale(${scale})`;
+              canvasElement.style.transformOrigin = "center";
+            }
+            this.stageScale = scale;
+          }
+        }
+      }
+      if (this.isConnected) {
+        requestAnimationFrame(this.setStageScale);
+      }
+    };
     this.drawOverlays = () => {
       const focusOverlay = this.focusOverlay.value;
       if (focusOverlay) {
@@ -37,12 +75,24 @@ let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
       }
     };
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
   handleStageWheel(event) {
     event.preventDefault();
   }
+  connectedCallback() {
+    document.body.style.width = "100%";
+    document.body.style.height = "100%";
+    document.documentElement.style.width = "100%";
+    document.documentElement.style.height = "100%";
+    super.connectedCallback();
+    requestAnimationFrame(this.setStageScale);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.body.style.width = "";
+    document.body.style.height = "";
+    document.documentElement.style.width = "";
+    document.documentElement.style.height = "";
+  }
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("focusedElement")) {
@@ -97,6 +147,9 @@ EFWorkbench.styles = [
 __decorateClass([
   eventOptions({ passive: false, capture: true })
 ], EFWorkbench.prototype, "handleStageWheel", 1);
+__decorateClass([
+  state()
+], EFWorkbench.prototype, "stageScale", 2);
 EFWorkbench = __decorateClass([
   customElement("ef-workbench")
 ], EFWorkbench);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.13.0-beta.2",
+  "version": "0.13.0-beta.3",
   "description": "",
   "exports": {
     ".": {
@@ -21,7 +21,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.13.0-beta.2",
+    "@editframe/assets": "0.13.0-beta.3",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/gui/ContextMixin.ts

@@ -2,7 +2,6 @@ import { createContext, provide } from "@lit/context";
 import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import { createRef } from "lit/directives/ref.js";
 import type { EFTimegroup } from "../elements/EFTimegroup.js";
 import { apiHostContext } from "./apiHostContext.js";
 import { efContext } from "./efContext.js";
@@ -23,8 +22,6 @@ export declare class ContextMixinInterface extends LitElement {
   loop: boolean;
   currentTimeMs: number;
   focusedElement?: HTMLElement;
-  stageRef: ReturnType<typeof createRef<HTMLDivElement>>;
-  canvasRef: ReturnType<typeof createRef<HTMLElement>>;
   targetTimegroup: EFTimegroup | null;
   play(): void;
   pause(): void;
@@ -123,9 +120,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @state()
     currentTimeMs = 0;
 
-    stageRef = createRef<HTMLDivElement>();
-    canvasRef = createRef<HTMLSlotElement>();
-
     #FPS = 30;
     #MS_PER_FRAME = 1000 / this.#FPS;
 

package/src/gui/EFFilmstrip.ts

@@ -525,6 +525,8 @@ export class EFFilmstrip extends TWMixin(LitElement) {
       :host {
         display: block;
         overflow: hidden;
+        width: 100%;
+        height: 100%;
       }
     `,
   ];

package/src/gui/EFWorkbench.ts

@@ -1,5 +1,5 @@
 import { LitElement, type PropertyValueMap, css, html } from "lit";
-import { customElement, eventOptions } from "lit/decorators.js";
+import { customElement, eventOptions, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 import { ContextMixin } from "./ContextMixin.js";
@@ -17,9 +17,8 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
     `,
   ];
 
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-  }
+  stageRef = createRef<HTMLDivElement>();
+  canvasRef = createRef<HTMLSlotElement>();
 
   @eventOptions({ passive: false, capture: true })
   handleStageWheel(event: WheelEvent) {
@@ -28,6 +27,69 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
 
   focusOverlay = createRef<HTMLDivElement>();
 
+  @state()
+  private stageScale = 1;
+
+  setStageScale = () => {
+    if (this.isConnected && !this.rendering) {
+      const canvasElement = this.canvasRef.value;
+      const stageElement = this.stageRef.value;
+      const canvasChild = canvasElement?.assignedElements()[0];
+      if (stageElement && canvasElement && canvasChild) {
+        // Determine the appropriate scale factor to make the canvas fit into
+        canvasElement.style.width = `${canvasChild.clientWidth}px`;
+        canvasElement.style.height = `${canvasChild.clientHeight}px`;
+        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})`;
+            canvasElement.style.transformOrigin = "top center";
+          }
+          this.stageScale = scale;
+        } else {
+          const scale = stageWidth / canvasWidth;
+          if (this.stageScale !== scale) {
+            canvasElement.style.transform = `scale(${scale})`;
+            canvasElement.style.transformOrigin = "center";
+          }
+          this.stageScale = scale;
+        }
+      }
+    }
+    if (this.isConnected) {
+      requestAnimationFrame(this.setStageScale);
+    }
+  };
+
+  connectedCallback(): void {
+    // Set the body and html to 100% width and height to avoid scaling issues
+    // this is a hack to avoid scaling issues when the stage is scaled and during output rendering
+    // What I've discovered recently is that having the workbench be so smart as to determine
+    // how it should be displayed at render time causes problems. Much of that has been extracted
+    // but this is a quick fix to avoid scaling issues.
+    document.body.style.width = "100%";
+    document.body.style.height = "100%";
+    document.documentElement.style.width = "100%";
+    document.documentElement.style.height = "100%";
+    super.connectedCallback();
+    requestAnimationFrame(this.setStageScale);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.body.style.width = "";
+    document.body.style.height = "";
+    document.documentElement.style.width = "";
+    document.documentElement.style.height = "";
+  }
+
   update(
     changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {