@editframe/elements 0.15.0-beta.9 → 0.16.0-beta.1

package/src/elements/EFWaveform.ts

@@ -61,6 +61,9 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   @property({ type: String, reflect: true })
   target = "";
 
+  @property({ type: Number, attribute: "bar-spacing" })
+  barSpacing = 0.5;
+
   @state()
   targetElement: EFAudio | EFVideo | null = null;
 
@@ -154,7 +157,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const waveHeight = canvas.height;
 
     const totalBars = frequencyData.length;
-    const paddingInner = 0.5;
+    const paddingInner = this.barSpacing;
     const paddingOuter = 0.01;
     const availableWidth = waveWidth;
     const barWidth =
@@ -164,7 +167,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const normalizedValue = value / 255;
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -190,7 +193,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap)); // Account for gaps in height calculation
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const normalizedValue = value / 255;
       const brickCount = Math.floor(normalizedValue * maxBricks);
 
       for (let j = 0; j < brickCount; j++) {
@@ -213,7 +216,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
 
     // Similar padding calculation as drawBars
     const totalBars = frequencyData.length;
-    const paddingInner = 0.5;
+    const paddingInner = this.barSpacing;
     const paddingOuter = 0.01;
     const availableWidth = waveWidth;
     const barWidth =
@@ -225,7 +228,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1);
+      const normalizedValue = value / 255;
       const height = normalizedValue * waveHeight; // Use full wave height like in drawBars
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = (waveHeight - height) / 2; // Center vertically
@@ -238,42 +241,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.fill(path);
   }
 
-  protected drawEqualizer(
-    ctx: CanvasRenderingContext2D,
-    frequencyData: Uint8Array,
-  ) {
-    const canvas = ctx.canvas;
-    const waveWidth = canvas.width;
-    const waveHeight = canvas.height;
-    const baseline = waveHeight / 2;
-    const barWidth = (waveWidth / frequencyData.length) * 0.8;
-
-    ctx.clearRect(0, 0, waveWidth, waveHeight);
-
-    // Create paths for baseline and bars
-    const baselinePath = new Path2D();
-    const barsPath = new Path2D();
-
-    // Draw baseline
-    baselinePath.moveTo(0, baseline);
-    baselinePath.lineTo(waveWidth, baseline);
-
-    // Draw bars
-    frequencyData.forEach((value, i) => {
-      const height = (value / 255) * (waveHeight / 2);
-      const x = i * (waveWidth / frequencyData.length);
-      const y = baseline - height;
-      barsPath.rect(x, y, barWidth, Math.max(height * 2, 1));
-    });
-
-    // Render baseline
-    ctx.lineWidth = 2;
-    ctx.stroke(baselinePath);
-
-    // Render bars
-    ctx.fill(barsPath);
-  }
-
   protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
@@ -283,7 +250,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     // Sample fewer points to make sharp angles more visible
-    const sampleRate = 4; // Only use every 4th point
+    const sampleRate = 1; // Only use every 4th point
 
     for (let i = 0; i < frequencyData.length; i += sampleRate) {
       const x = (i / frequencyData.length) * waveWidth;
@@ -295,7 +262,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
         path.lineTo(x, y);
       }
     }
-
     // Ensure we draw to the end
     const lastX = waveWidth;
     const lastY =
@@ -351,7 +317,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
 
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min((value / 255) * 2, 1); // Updated normalization
+      const normalizedValue = value / 255;
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways
       const y = baseline - barHeight;

package/src/elements/durationConverter.ts

@@ -1,19 +1,24 @@
 import { parseTimeToMs } from "./parseTimeToMs.js";
 
 export const durationConverter = {
-  fromAttribute: (value: string): number => parseTimeToMs(value),
-  toAttribute: (value: number) => `${value}s`,
+  fromAttribute: (value: string | null) =>
+    value === null ? null : parseTimeToMs(value),
+  toAttribute: (value: number | null) => (value === null ? null : `${value}s`),
 };
 
 const positiveDurationConverter = (error: string) => {
   return {
-    fromAttribute: (value: string): number => {
+    fromAttribute: (value: string | null): number | null => {
+      if (value === null) {
+        return null;
+      }
       if (value.startsWith("-")) {
         throw new Error(error);
       }
       return parseTimeToMs(value);
     },
-    toAttribute: (value: number) => `${value}s`,
+    toAttribute: (value: number | null) =>
+      value === null ? null : `${value}s`,
   };
 };
 

package/src/elements/updateAnimations.ts

@@ -0,0 +1,88 @@
+import { isEFTemporal } from "./EFTemporal.ts";
+import type { EFTimegroup } from "./EFTimegroup.ts";
+
+export const updateAnimations = (
+  element: HTMLElement & {
+    currentTimeMs: number;
+    durationMs: number;
+    rootTimegroup?: EFTimegroup;
+    parentTimegroup?: EFTimegroup;
+    startTimeMs: number;
+    endTimeMs: number;
+  },
+) => {
+  element.style.setProperty(
+    "--ef-progress",
+    `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`,
+  );
+  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
+  if (
+    element.startTimeMs > timelineTimeMs ||
+    element.endTimeMs < timelineTimeMs
+  ) {
+    element.style.display = "none";
+    return;
+  }
+  element.style.display = "";
+  const animations = element.getAnimations({ subtree: true });
+  element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
+  element.style.setProperty(
+    "--ef-transition-duration",
+    `${element.parentTimegroup?.overlapMs ?? 0}ms`,
+  );
+  element.style.setProperty(
+    "--ef-transition-out-start",
+    `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`,
+  );
+
+  for (const animation of animations) {
+    if (animation.playState === "running") {
+      animation.pause();
+    }
+    const effect = animation.effect;
+    if (!(effect && effect instanceof KeyframeEffect)) {
+      continue;
+    }
+    const target = effect.target;
+    // TODO: better generalize work avoidance for temporal elements
+    if (!target) {
+      continue;
+    }
+    if (target.closest("ef-timegroup") !== element) {
+      continue;
+    }
+
+    const timing = effect.getTiming();
+    const duration = Number(timing.duration) ?? 0;
+    const delay = Number(timing.delay) ?? 0;
+    const iterations = Number(timing.iterations) ?? 1;
+
+    const timeTarget = isEFTemporal(target)
+      ? target
+      : target.closest("ef-timegroup");
+    if (!timeTarget) {
+      continue;
+    }
+
+    const currentTime = timeTarget.ownCurrentTimeMs;
+
+    // Handle delay - don't start animation until delay is complete
+    if (currentTime < delay) {
+      animation.currentTime = 0;
+      continue;
+    }
+
+    const currentIteration = Math.floor((currentTime - delay) / duration);
+    const currentIterationTime = (currentTime - delay) % duration;
+
+    if (currentIteration >= iterations) {
+      // Stop just before the end to prevent DOM removal
+      animation.currentTime = duration - 0.01;
+      continue;
+    }
+
+    // Ensure we never reach exactly duration
+    animation.currentTime =
+      Math.min(currentIterationTime, duration - 0.01) + delay;
+  }
+};

package/src/gui/ContextMixin.ts

@@ -129,9 +129,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @property({ type: Boolean, reflect: true })
     loop = false;
 
-    // @state()
-    // private stageScale = 1;
-
     @property({ type: Boolean })
     rendering = false;
 

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,152 @@
+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,
+    };
+  }
+
+  scaleLastSetOn: HTMLElement | null = null;
+
+  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;
+
+        // In the rare event that the content child is changed, we need to remove the scale
+        // because we don't want to have a scale on the old content child that is somewhere else in the DOM
+        if (this.scaleLastSetOn !== this.contentChild) {
+          this.removeScale();
+        }
+        // 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.scaleLastSetOn = this.contentChild;
+      }
+      this.animationFrameId = requestAnimationFrame(this.setScale);
+    }
+  };
+
+  removeScale = () => {
+    if (this.scaleLastSetOn) {
+      Object.assign(this.scaleLastSetOn.style, {
+        transform: "",
+        transformOrigin: "",
+      });
+      this.scaleLastSetOn = null;
+    }
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.animationFrameId = requestAnimationFrame(this.setScale);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeScale();
+    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, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 import { ContextMixin } from "./ContextMixin.js";
@@ -17,69 +17,22 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
     `,
   ];
 
-  stageRef = createRef<HTMLDivElement>();
-  canvasRef = createRef<HTMLSlotElement>();
+  @property({ type: Boolean })
+  rendering = false;
+
+  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 {
@@ -121,13 +74,14 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
   };
 
   render() {
-    if (this.rendering) {
+    // TODO: this.rendering is not correctly set when using the framegen bridge
+    // so to hack we're checking for the existence of EF_RENDERING on the window
+    if (
+      this.rendering ||
+      (typeof window !== "undefined" && window.EF_RENDERING?.() === true)
+    ) {
       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 +90,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)}

package/src/gui/TWMixin.ts

@@ -1,4 +1,4 @@
-import type { LitElement } from "lit";
+import type { CSSResult, LitElement } from "lit";
 // @ts-expect-error cannot figure out how to declare this module as a string
 import twStyle from "./TWMixin.css?inline";
 
@@ -21,13 +21,30 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
           "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment",
         );
       }
+
+      const constructorStylesheets: CSSStyleSheet[] = [];
+      const constructorStyles = (("styles" in this.constructor &&
+        this.constructor.styles) ||
+        []) as CSSResult | CSSResult[];
+
+      if (Array.isArray(constructorStyles)) {
+        for (const item of constructorStyles) {
+          if (item.styleSheet) {
+            constructorStylesheets.push(item.styleSheet);
+          }
+        }
+      } else if (constructorStyles.styleSheet) {
+        constructorStylesheets.push(constructorStyles.styleSheet);
+      }
+
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,
           ...renderRoot.adoptedStyleSheets,
+          ...constructorStylesheets,
         ];
       } else {
-        renderRoot.adoptedStyleSheets = [twSheet];
+        renderRoot.adoptedStyleSheets = [twSheet, ...constructorStylesheets];
       }
       return renderRoot;
     }