@editframe/elements 0.15.0-beta.17 → 0.15.0-beta.19

package/src/gui/EFFilmstrip.ts

@@ -87,31 +87,22 @@ class FilmstripItem extends TWMixin(LitElement) {
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
+  // Gutter styles represent the entire source media.
+  // If there is no trim, then the gutter and trim portion are the same.
   get gutterStyles() {
-    if (this.element.sourceInMs || this.element.sourceOutMs) {
-      return {
-        position: "relative",
-        left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
-        width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`,
-      };
-    }
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`,
+      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.sourceStartMs)}px`,
+      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`,
     };
   }
 
+  // Trim portion is the section of source that will be placed in the timeline
+  // If there is no trim, then the gutter and trim portion are the same.
   get trimPortionStyles() {
-    if (this.element.sourceInMs || this.element.sourceOutMs) {
-      return {
-        width: `${this.pixelsPerMs * this.element.durationMs}px`,
-        left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`,
-      };
-    }
     return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * this.element.trimStartMs}px`,
+      left: `${this.pixelsPerMs * this.element.sourceStartMs}px`,
     };
   }
 

package/src/gui/EFFitScale.ts

@@ -0,0 +1,133 @@
+import { LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { createRef } from "lit/directives/ref.js";
+
+@customElement("ef-fit-scale")
+export class EFFitScale extends LitElement {
+  containerRef = createRef<HTMLDivElement>();
+  contentRef = createRef<HTMLSlotElement>();
+
+  createRenderRoot() {
+    Object.assign(this.style, {
+      display: "grid",
+      width: "100%",
+      height: "100%",
+      gridTemplateColumns: "100%",
+      gridTemplateRows: "100%",
+      overflow: "hidden",
+      boxSizing: "border-box",
+      contain: "strict",
+      position: "relative",
+    });
+    this.id = `${this.uniqueId}`;
+    return this;
+  }
+
+  uniqueId = Math.random().toString(36).substring(2, 15);
+
+  @state()
+  private scale = 1;
+
+  private animationFrameId?: number;
+
+  get contentChild() {
+    const firstElement = this.children[0];
+    if (!firstElement) return null;
+
+    let current: Element = firstElement;
+    while (current) {
+      if (current instanceof HTMLSlotElement) {
+        const assigned = current.assignedElements()[0];
+        if (!assigned) break;
+        current = assigned;
+        continue;
+      }
+
+      const display = window.getComputedStyle(current).display;
+      if (display !== "contents" && display !== "none") {
+        return current as HTMLElement;
+      }
+      const firstChild = current.children[0];
+      if (!firstChild) break;
+      current = firstChild;
+    }
+    return firstElement as HTMLElement; // Fallback to first element if no non-contents found
+  }
+
+  get scaleInfo() {
+    if (!this.contentChild) {
+      return {
+        scale: 1,
+        containerWidth: 0,
+        containerHeight: 0,
+        contentWidth: 0,
+        contentHeight: 0,
+      };
+    }
+
+    const containerWidth = this.clientWidth;
+    const containerHeight = this.clientHeight;
+    const contentWidth = this.contentChild.clientWidth;
+    const contentHeight = this.contentChild.clientHeight;
+
+    const containerRatio = containerWidth / containerHeight;
+    const contentRatio = contentWidth / contentHeight;
+
+    const scale =
+      containerRatio > contentRatio
+        ? containerHeight / contentHeight
+        : containerWidth / contentWidth;
+
+    return {
+      scale,
+      containerWidth,
+      containerHeight,
+      contentWidth,
+      contentHeight,
+    };
+  }
+
+  setScale = () => {
+    if (this.isConnected) {
+      const { scale } = this.scaleInfo;
+      if (this.contentChild) {
+        const containerRect = this.getBoundingClientRect();
+        const contentRect = this.contentChild.getBoundingClientRect();
+
+        const unscaledWidth = contentRect.width / this.scale;
+        const unscaledHeight = contentRect.height / this.scale;
+        const scaledWidth = unscaledWidth * scale;
+        const scaledHeight = unscaledHeight * scale;
+        const translateX = (containerRect.width - scaledWidth) / 2;
+        const translateY = (containerRect.height - scaledHeight) / 2;
+
+        // Use toFixed to avoid floating point precision issues
+        // this will update every frame with sub-pixel changes if we don't pin it down
+        Object.assign(this.contentChild.style, {
+          transform: `translate(${translateX.toFixed(4)}px, ${translateY.toFixed(4)}px) scale(${scale.toFixed(4)})`,
+          transformOrigin: "top left",
+        });
+        this.scale = scale;
+      }
+      this.animationFrameId = requestAnimationFrame(this.setScale);
+    }
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.animationFrameId = requestAnimationFrame(this.setScale);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-fit-scale": EFFitScale;
+  }
+}

package/src/gui/EFWorkbench.ts

@@ -1,5 +1,5 @@
 import { LitElement, type PropertyValueMap, css, html } from "lit";
-import { customElement, eventOptions, state } from "lit/decorators.js";
+import { customElement, eventOptions } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 import { ContextMixin } from "./ContextMixin.js";
@@ -17,69 +17,19 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
     `,
   ];
 
-  stageRef = createRef<HTMLDivElement>();
-  canvasRef = createRef<HTMLSlotElement>();
+  focusOverlay = createRef<HTMLDivElement>();
 
   @eventOptions({ passive: false, capture: true })
   handleStageWheel(event: WheelEvent) {
     event.preventDefault();
   }
 
-  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 {
@@ -123,11 +73,7 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
   render() {
     if (this.rendering) {
       return html`
-        <slot
-          ${ref(this.canvasRef)}
-          class="fixed inset-0 h-full w-full"
-          name="canvas"
-        ></slot>
+        <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
       `;
     }
     return html`
@@ -136,15 +82,12 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
         style="grid-template-rows: 1fr 300px; grid-template-columns: 100%;"
       >
         <div
-          ${ref(this.stageRef)}
-          class="relative grid h-full w-full justify-center overflow-hidden"
+          class="relative h-full w-full overflow-hidden"
           @wheel=${this.handleStageWheel}
         >
-          <slot
-            ${ref(this.canvasRef)}
-            name="canvas"
-            class="inline-block"
-          ></slot>
+          <ef-fit-scale class="h-full grid place-content-center">
+            <slot name="canvas" class="contents"></slot>
+          </ef-fit-scale>
           <div
             class="border border-blue-500 bg-blue-200 bg-opacity-20 absolute"
             ${ref(this.focusOverlay)}