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

package/dist/elements/EFTimegroup.js

@@ -6,9 +6,10 @@ import { property, customElement } from "lit/decorators.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
 import { deepGetMediaElements } from "./EFMedia.js";
-import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
+import { EFTemporal, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
 import { TimegroupController } from "./TimegroupController.js";
 import { durationConverter } from "./durationConverter.js";
+import { updateAnimations } from "./updateAnimations.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -115,50 +116,18 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     super.disconnectedCallback();
     __privateGet(this, _resizeObserver)?.disconnect();
   }
-  // private get displayedParent(): Element | null {
-  //   let displayedParent = this.parentElement;
-  //   while (
-  //     displayedParent &&
-  //     getComputedStyle(displayedParent).display === "contents"
-  //   ) {
-  //     displayedParent = displayedParent.parentElement;
-  //   }
-  //   return displayedParent;
-  // }
-  // private updateScale() {
-  //   if (this.fit === "none") return;
-  //   const displayedParent = this.displayedParent;
-  //   if (!displayedParent) return;
-  //   // Get the natural size of the content
-  //   const contentWidth = this.clientWidth;
-  //   const contentHeight = this.clientHeight;
-  //   // Get the available space from displayed parent
-  //   const containerWidth = displayedParent.clientWidth;
-  //   const containerHeight = displayedParent.clientHeight;
-  //   // Calculate scale ratios
-  //   const widthRatio = containerWidth / contentWidth;
-  //   const heightRatio = containerHeight / contentHeight;
-  //   let scale: number;
-  //   if (this.fit === "contain") {
-  //     // Use height ratio for contain mode to ensure it fits vertically
-  //     scale = heightRatio;
-  //     // If width would overflow after scaling, use width ratio instead
-  //     if (contentWidth * scale > containerWidth) {
-  //       scale = widthRatio;
-  //     }
-  //   } else {
-  //     // cover
-  //     scale = Math.max(widthRatio, heightRatio);
-  //   }
-  //   // Apply transform with fixed center origin
-  //   this.style.transform = `scale(${scale})`;
-  // }
   get storageKey() {
     if (!this.id) {
       throw new Error("Timegroup must have an id to use localStorage.");
     }
     return `ef-timegroup-${this.id}`;
   }
+  get intrinsicDurationMs() {
+    if (this.hasExplicitDuration) {
+      return this.explicitDurationMs;
+    }
+    return void 0;
+  }
   get durationMs() {
     switch (this.mode) {
       case "fixed":
@@ -176,7 +145,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       case "contain": {
         let maxDuration = 0;
         for (const node of this.childTemporals) {
-          if (node.hasOwnDuration) {
+          if (node.intrinsicDurationMs !== void 0) {
             maxDuration = Math.max(maxDuration, node.durationMs);
           }
         }
@@ -208,69 +177,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     }
   }
   updateAnimations() {
-    this.style.setProperty(
-      "--ef-progress",
-      `${Math.max(0, Math.min(1, this.currentTimeMs / this.durationMs)) * 100}%`
-    );
-    const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
-    if (this.startTimeMs > timelineTimeMs || this.endTimeMs < timelineTimeMs) {
-      this.style.display = "none";
-      return;
-    }
-    this.style.display = "";
-    const animations = this.getAnimations({ subtree: true });
-    this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
-    this.style.setProperty(
-      "--ef-transition-duration",
-      `${this.parentTimegroup?.overlapMs ?? 0}ms`
-    );
-    this.style.setProperty(
-      "--ef-transition-out-start",
-      `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`
-    );
-    for (const animation of animations) {
-      if (animation.playState === "running") {
-        animation.pause();
-      }
-      const effect = animation.effect;
-      if (!(effect && effect instanceof KeyframeEffect)) {
-        return;
-      }
-      const target = effect.target;
-      if (!target) {
-        return;
-      }
-      if (target.closest("ef-timegroup") !== this) {
-        return;
-      }
-      if (isEFTemporal(target)) {
-        const timing = effect.getTiming();
-        const duration = Number(timing.duration) ?? 0;
-        const delay = Number(timing.delay);
-        const newTime = Math.floor(
-          Math.min(target.ownCurrentTimeMs, duration - 1 + delay)
-        );
-        if (Number.isNaN(newTime)) {
-          return;
-        }
-        animation.currentTime = newTime;
-      } else if (target) {
-        const nearestTimegroup = target.closest("ef-timegroup");
-        if (!nearestTimegroup) {
-          return;
-        }
-        const timing = effect.getTiming();
-        const duration = Number(timing.duration) ?? 0;
-        const delay = Number(timing.delay);
-        const newTime = Math.floor(
-          Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay)
-        );
-        if (Number.isNaN(newTime)) {
-          return;
-        }
-        animation.currentTime = newTime;
-      }
-    }
+    updateAnimations(this);
   }
   get contextProvider() {
     let parent = this.parentNode;
@@ -307,9 +214,6 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     filmstrip.setAttribute("target", this.id);
     workbench.append(filmstrip);
   }
-  get hasOwnDuration() {
-    return true;
-  }
   get efElements() {
     return Array.from(
       this.querySelectorAll(
@@ -385,7 +289,8 @@ EFTimegroup.styles = css`
       width: 100%;
       height: 100%;
       position: absolute;
-      transform-origin: center center;
+      top: 0;
+      left: 0;
     }
   `;
 __decorateClass([

package/dist/elements/EFVideo.js

@@ -93,7 +93,9 @@ let EFVideo = class extends TWMixin(EFMedia) {
     });
   }
   render() {
-    return html` <canvas ${ref(this.canvasRef)}></canvas>`;
+    return html`
+      <canvas ${ref(this.canvasRef)}></canvas>
+    `;
   }
   get canvasElement() {
     return this.canvasRef.value;

package/dist/elements/durationConverter.d.ts

@@ -1,16 +1,16 @@
 export declare const durationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };
 export declare const trimDurationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };
 export declare const imageDurationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };
 export declare const sourceDurationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };

package/dist/elements/durationConverter.js

@@ -1,7 +1,7 @@
 import { parseTimeToMs } from "./parseTimeToMs.js";
 const durationConverter = {
-  fromAttribute: (value) => parseTimeToMs(value),
-  toAttribute: (value) => `${value}s`
+  fromAttribute: (value) => value === null ? null : parseTimeToMs(value),
+  toAttribute: (value) => value === null ? null : `${value}s`
 };
 export {
   durationConverter

package/dist/elements/updateAnimations.d.ts

@@ -0,0 +1,9 @@
+import { EFTimegroup } from './EFTimegroup.ts';
+export declare const updateAnimations: (element: HTMLElement & {
+    currentTimeMs: number;
+    durationMs: number;
+    rootTimegroup?: EFTimegroup;
+    parentTimegroup?: EFTimegroup;
+    startTimeMs: number;
+    endTimeMs: number;
+}) => void;

package/dist/elements/updateAnimations.js

@@ -0,0 +1,62 @@
+import { isEFTemporal } from "./EFTemporal.js";
+const updateAnimations = (element) => {
+  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;
+    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;
+    if (currentTime < delay) {
+      animation.currentTime = 0;
+      continue;
+    }
+    const currentIteration = Math.floor((currentTime - delay) / duration);
+    const currentIterationTime = (currentTime - delay) % duration;
+    if (currentIteration >= iterations) {
+      animation.currentTime = duration - 0.01;
+      continue;
+    }
+    animation.currentTime = Math.min(currentIterationTime, duration - 0.01) + delay;
+  }
+};
+export {
+  updateAnimations
+};

package/dist/gui/EFFilmstrip.js

@@ -74,30 +74,21 @@ class FilmstripItem extends TWMixin(LitElement) {
   get isFocused() {
     return this.element && this.focusContext?.focusedElement === this.element;
   }
+  // 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`
     };
   }
   render() {

package/dist/gui/EFFitScale.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+export declare class EFFitScale extends LitElement {
+    containerRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    contentRef: import('lit-html/directives/ref.js').Ref<HTMLSlotElement>;
+    createRenderRoot(): this;
+    uniqueId: string;
+    private scale;
+    private animationFrameId?;
+    get contentChild(): HTMLElement | null;
+    get scaleInfo(): {
+        scale: number;
+        containerWidth: number;
+        containerHeight: number;
+        contentWidth: number;
+        contentHeight: number;
+    };
+    setScale: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-fit-scale": EFFitScale;
+    }
+}

package/dist/gui/EFFitScale.js

@@ -0,0 +1,123 @@
+import { LitElement } from "lit";
+import { state, customElement } from "lit/decorators.js";
+import { createRef } from "lit/directives/ref.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let EFFitScale = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.containerRef = createRef();
+    this.contentRef = createRef();
+    this.uniqueId = Math.random().toString(36).substring(2, 15);
+    this.scale = 1;
+    this.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;
+          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);
+      }
+    };
+  }
+  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;
+  }
+  get contentChild() {
+    const firstElement = this.children[0];
+    if (!firstElement) return null;
+    let current = 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;
+      }
+      const firstChild = current.children[0];
+      if (!firstChild) break;
+      current = firstChild;
+    }
+    return firstElement;
+  }
+  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
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.animationFrameId = requestAnimationFrame(this.setScale);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+    }
+  }
+};
+__decorateClass([
+  state()
+], EFFitScale.prototype, "scale", 2);
+EFFitScale = __decorateClass([
+  customElement("ef-fit-scale")
+], EFFitScale);
+export {
+  EFFitScale
+};

package/dist/gui/EFWorkbench.d.ts

@@ -2,12 +2,8 @@ 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[];
-    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;
+    handleStageWheel(event: WheelEvent): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

package/dist/gui/EFWorkbench.js

@@ -1,5 +1,5 @@
 import { html, css, LitElement } from "lit";
-import { eventOptions, state, customElement } from "lit/decorators.js";
+import { eventOptions, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin.js";
@@ -16,43 +16,7 @@ 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})`;
-            }
-            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);
-      }
-    };
     this.drawOverlays = () => {
       const focusOverlay = this.focusOverlay.value;
       if (focusOverlay) {
@@ -82,7 +46,6 @@ let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
     document.documentElement.style.width = "100%";
     document.documentElement.style.height = "100%";
     super.connectedCallback();
-    requestAnimationFrame(this.setStageScale);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -100,11 +63,7 @@ let EFWorkbench = class 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`
@@ -113,15 +72,12 @@ let EFWorkbench = class 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 place-content-center place-items-center"
+          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)}
@@ -145,9 +101,6 @@ EFWorkbench.styles = [
 __decorateClass([
   eventOptions({ passive: false, capture: true })
 ], EFWorkbench.prototype, "handleStageWheel", 1);
-__decorateClass([
-  state()
-], EFWorkbench.prototype, "stageScale", 2);
 EFWorkbench = __decorateClass([
   customElement("ef-workbench")
 ], EFWorkbench);