@editframe/elements 0.18.20-beta.0 → 0.18.21-beta.0

package/dist/elements/EFTemporal.d.ts

@@ -187,7 +187,6 @@ export declare const deepGetElementsWithFrameTasks: (element: Element, elements?
 }>) => (HTMLElement & {
     frameTask: Task;
 })[];
-export declare const clearTemporalCacheForElement: (element: Element) => void;
 export declare const shallowGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
 export declare class OwnCurrentTimeController implements ReactiveController {
     private host;

package/dist/elements/EFTemporal.js

@@ -15,21 +15,17 @@ const deepGetElementsWithFrameTasks = (element, elements = []) => {
 	return elements;
 };
 let temporalCache;
-let modifiedElements = /* @__PURE__ */ new WeakSet();
 const resetTemporalCache = () => {
 	temporalCache = /* @__PURE__ */ new Map();
-	modifiedElements = /* @__PURE__ */ new WeakSet();
 	if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(resetTemporalCache);
 };
 resetTemporalCache();
-const clearTemporalCacheForElement = (element) => {
-	temporalCache.delete(element);
-	modifiedElements.add(element);
-};
 const shallowGetTemporalElements = (element, temporals = []) => {
-	temporals.length = 0;
+	const cachedResult = temporalCache.get(element);
+	if (cachedResult) return cachedResult;
 	for (const child of element.children) if (isEFTemporal(child)) temporals.push(child);
 	else shallowGetTemporalElements(child, temporals);
+	temporalCache.set(element, temporals);
 	return temporals;
 };
 var OwnCurrentTimeController = class {
@@ -285,4 +281,4 @@ const EFTemporal = (superClass) => {
 	Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, { value: true });
 	return TemporalMixinClass;
 };
-export { EFTemporal, clearTemporalCacheForElement, deepGetElementsWithFrameTasks, flushStartTimeMsCache, isEFTemporal, shallowGetTemporalElements, timegroupContext };
+export { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, isEFTemporal, shallowGetTemporalElements, timegroupContext };

package/dist/elements/EFTimegroup.js

@@ -53,7 +53,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	#currentTime = 0;
 	#resizeObserver;
-	#childObserver;
 	set currentTime(time) {
 		const newTime = Math.max(0, Math.min(time, this.durationMs / 1e3));
 		if (this.isRootTimegroup && this.isFrameUpdateInProgress) {
@@ -129,25 +128,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		});
 		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
-		this.#childObserver = new MutationObserver((mutations) => {
-			let shouldUpdate = false;
-			for (const mutation of mutations) if (mutation.type === "childList") shouldUpdate = true;
-			else if (mutation.type === "attributes") {
-				if (mutation.attributeName === "duration" || mutation.attributeName === "mode") shouldUpdate = true;
-			}
-			if (shouldUpdate) {
-				import("./EFTemporal.js").then(({ clearTemporalCacheForElement }) => {
-					clearTemporalCacheForElement(this);
-				});
-				this.requestUpdate();
-			}
-		});
-		this.#childObserver.observe(this, {
-			childList: true,
-			subtree: true,
-			attributes: true,
-			attributeFilter: ["duration", "mode"]
-		});
 		requestAnimationFrame(() => {
 			this.updateAnimations();
 		});
@@ -155,7 +135,6 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver?.disconnect();
-		this.#childObserver?.disconnect();
 	}
 	get storageKey() {
 		if (!this.id) throw new Error("Timegroup must have an id to use localStorage.");

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -4,7 +4,7 @@ declare class TestContext extends TestContext_base {
 }
 declare const TestContextElement_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContextElement extends TestContextElement_base {
-    render(): import('../elements/EFTimegroup.js').EFTimegroup & Element;
+    render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/gui/ContextMixin.js

@@ -149,7 +149,7 @@ function ContextMixin(superClass) {
 				if (newTimegroup !== this.targetTimegroup) {
 					this.targetTimegroup = newTimegroup;
 					shouldUpdate = true;
-				}
+				} else if (mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			} else if (mutation.type === "attributes") {
 				if (mutation.attributeName === "duration" || mutation.attributeName === "mode" || mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.18.20-beta.0",
+  "version": "0.18.21-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.18.20-beta.0",
+    "@editframe/assets": "0.18.21-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFTemporal.ts

@@ -236,32 +236,22 @@ export const deepGetElementsWithFrameTasks = (
 };
 
 let temporalCache: Map<Element, TemporalMixinInterface[]>;
-let modifiedElements = new WeakSet<Element>();
-
 const resetTemporalCache = () => {
   temporalCache = new Map();
-  modifiedElements = new WeakSet();
   if (typeof requestAnimationFrame !== "undefined") {
     requestAnimationFrame(resetTemporalCache);
   }
 };
 resetTemporalCache();
 
-export const clearTemporalCacheForElement = (element: Element) => {
-  temporalCache.delete(element);
-  modifiedElements.add(element);
-};
-
 export const shallowGetTemporalElements = (
   element: Element,
   temporals: TemporalMixinInterface[] = [],
 ) => {
-  // Temporarily disable caching to ensure reactivity works correctly
-  // TODO: Implement proper cache invalidation mechanism
-
-  // Clear the temporals array to ensure fresh results
-  temporals.length = 0;
-
+  const cachedResult = temporalCache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
   for (const child of element.children) {
     if (isEFTemporal(child)) {
       temporals.push(child);
@@ -269,7 +259,7 @@ export const shallowGetTemporalElements = (
       shallowGetTemporalElements(child, temporals);
     }
   }
-
+  temporalCache.set(element, temporals);
   return temporals;
 };
 

package/src/elements/EFTimegroup.ts

@@ -73,7 +73,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   fit: "none" | "contain" | "cover" = "none";
 
   #resizeObserver?: ResizeObserver;
-  #childObserver?: MutationObserver;
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
@@ -186,44 +185,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       this.wrapWithWorkbench();
     }
 
-    // Set up observer to detect child changes that affect duration
-    this.#childObserver = new MutationObserver((mutations) => {
-      let shouldUpdate = false;
-
-      for (const mutation of mutations) {
-        if (mutation.type === "childList") {
-          // Child added/removed - this affects duration for contain/sequence modes
-          shouldUpdate = true;
-        } else if (mutation.type === "attributes") {
-          // Attribute changes that might affect duration
-          if (
-            mutation.attributeName === "duration" ||
-            mutation.attributeName === "mode"
-          ) {
-            shouldUpdate = true;
-          }
-        }
-      }
-
-      if (shouldUpdate) {
-        // Clear the temporal cache for this element to ensure childTemporals is up to date
-        import("./EFTemporal.js").then(({ clearTemporalCacheForElement }) => {
-          clearTemporalCacheForElement(this);
-        });
-
-        // Trigger an update to recalculate computed properties
-        this.requestUpdate();
-      }
-    });
-
-    // Observe this element for child changes
-    this.#childObserver.observe(this, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["duration", "mode"],
-    });
-
     requestAnimationFrame(() => {
       this.updateAnimations();
     });
@@ -232,7 +193,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#resizeObserver?.disconnect();
-    this.#childObserver?.disconnect();
   }
 
   get storageKey() {

package/src/gui/ContextMixin.browsertest.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
@@ -13,7 +13,7 @@ class TestContext extends ContextMixin(LitElement) {}
 @customElement("test-context-reactivity")
 class TestContextElement extends ContextMixin(LitElement) {
   render() {
-    return document.createElement("ef-timegroup");
+    return html`<slot></slot>`;
   }
 }
 
@@ -631,6 +631,9 @@ describe("ContextMixin", () => {
       await timegroup.updateComplete;
       await newChild.updateComplete;
 
+      // Wait for next animation frame to ensure temporal cache is cleared
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+
       // Duration should now be 15s (the max of all children)
       expect(element.targetTimegroup?.durationMs).toBe(15000);
 

package/src/gui/ContextMixin.ts

@@ -250,6 +250,13 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           if (newTimegroup !== this.targetTimegroup) {
             this.targetTimegroup = newTimegroup;
             shouldUpdate = true;
+          } else if (
+            mutation.target instanceof Element &&
+            (mutation.target.tagName === "EF-TIMEGROUP" ||
+              mutation.target.closest("ef-timegroup"))
+          ) {
+            // Handle childList changes within existing timegroups
+            shouldUpdate = true;
           }
         } else if (mutation.type === "attributes") {
           // Watch for attribute changes that might affect duration