@editframe/elements 0.21.0-beta.0 → 0.23.6-beta.0

package/dist/gui/Controllable.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { TemporalMixinInterface } from '../elements/EFTemporal.js';
+import { ContextMixinInterface } from './ContextMixin.js';
+export declare class ControllableInterface extends LitElement {
+    playing: boolean;
+    loop: boolean;
+    currentTimeMs: number;
+    durationMs: number;
+    play(): void | Promise<void>;
+    pause(): void;
+}
+export declare function isControllable(value: any): value is ControllableInterface;
+export type ControllableElement = ContextMixinInterface | (TemporalMixinInterface & {
+    playbackController: NonNullable<TemporalMixinInterface["playbackController"]>;
+});

package/dist/gui/Controllable.js

@@ -0,0 +1,9 @@
+import { isEFTemporal } from "../elements/EFTemporal.js";
+import { isContextMixin } from "./ContextMixin.js";
+function isControllable(value) {
+	if (!value || typeof value !== "object") return false;
+	if (isContextMixin(value)) return true;
+	if (isEFTemporal(value)) return value.playbackController !== void 0;
+	return false;
+}
+export { isControllable };

package/dist/gui/EFConfiguration.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { createContext, provide } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";

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

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+declare const EFControlsTestContext_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
+declare class EFControlsTestContext extends EFControlsTestContext_base {
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-controls-test-context": EFControlsTestContext;
+    }
+}
+export {};

package/dist/gui/EFControls.d.ts

@@ -1,5 +1,10 @@
-import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.js';
+import { LitElement, PropertyValueMap } from 'lit';
+import { TemporalMixinInterface } from '../elements/EFTemporal.js';
+import { ControllableInterface } from './Controllable.js';
+import { FocusContext } from './focusContext.js';
+export declare const testContext: {
+    __context__: string | null;
+};
 /**
  * EFControls provides a way to control an ef-preview element that is not a direct ancestor.
  * It bridges the contexts from a target preview element to its children controls.
@@ -21,6 +26,7 @@ import { ContextMixinInterface } from './ContextMixin.js';
 export declare class EFControls extends LitElement {
     #private;
     static styles: import('lit').CSSResult;
+    createRenderRoot(): this;
     /**
      * The ID of the ef-preview element to control
      */
@@ -28,8 +34,16 @@ export declare class EFControls extends LitElement {
     /**
      * The target element (set by TargetController)
      */
-    targetElement: ContextMixinInterface | null;
-    render(): import('lit-html').TemplateResult<1>;
+    targetElement: ControllableInterface | null;
+    playing: boolean;
+    loop: boolean;
+    currentTimeMs: number;
+    durationMs: number;
+    targetTemporal: TemporalMixinInterface | null;
+    focusedElement?: HTMLElement;
+    focusContext: FocusContext;
+    updated(changedProperties: PropertyValueMap<this>): void;
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/gui/EFControls.js

@@ -1,22 +1,50 @@
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
-import { efConfigurationContext } from "./EFConfiguration.js";
+import { loopContext, playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { efContext } from "./efContext.js";
-import { fetchContext } from "./fetchContext.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
-import { loopContext, playingContext } from "./playingContext.js";
-import { targetTimegroupContext } from "./ContextMixin.js";
+import { targetTemporalContext } from "./ContextMixin.js";
 import { TargetController } from "../elements/TargetController.js";
-import { ContextProxyController } from "../elements/ContextProxiesController.js";
-import { LitElement, css, html } from "lit";
+import { attachContextRoot } from "../attachContextRoot.js";
+import { createContext, provide } from "@lit/context";
+import { LitElement, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+attachContextRoot();
+var ContextRequestEvent = class extends Event {
+	constructor(context, contextTarget, callback, subscribe) {
+		super("context-request", {
+			bubbles: true,
+			composed: true
+		});
+		this.context = context;
+		this.contextTarget = contextTarget;
+		this.callback = callback;
+		this.subscribe = subscribe ?? false;
+	}
+};
+var proxiedContexts = [
+	[(proxy, value) => proxy.playing = value, playingContext],
+	[(proxy, value) => proxy.loop = value, loopContext],
+	[(proxy, value) => proxy.currentTimeMs = value, currentTimeContext],
+	[(proxy, value) => proxy.durationMs = value, durationContext],
+	[(proxy, value) => proxy.targetTemporal = value, targetTemporalContext],
+	[(proxy, value) => proxy.focusedElement = value, focusedElementContext],
+	[(proxy, value) => proxy.focusContext.focusedElement = value, focusContext]
+];
+createContext("test");
 var EFControls = class EFControls$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.target = "";
 		this.targetElement = null;
+		this.playing = false;
+		this.loop = false;
+		this.currentTimeMs = 0;
+		this.durationMs = 0;
+		this.targetTemporal = null;
+		this.focusContext = this;
 	}
 	static {
 		this.styles = css`
@@ -25,27 +53,41 @@ var EFControls = class EFControls$1 extends LitElement {
     }
   `;
 	}
+	createRenderRoot() {
+		return this;
+	}
 	#targetController = new TargetController(this);
-	#contextProxyController = new ContextProxyController(this, {
-		target: () => this.targetElement,
-		contexts: [
-			playingContext,
-			loopContext,
-			currentTimeContext,
-			durationContext,
-			targetTimegroupContext,
-			focusedElementContext,
-			efContext,
-			fetchContext,
-			focusContext,
-			efConfigurationContext
-		]
-	});
-	render() {
-		return html`<slot></slot>`;
+	#proxyUnsubscribeMap = /* @__PURE__ */ new Map();
+	#unsubscribe() {
+		for (const unsubscribe of this.#proxyUnsubscribeMap.values()) unsubscribe();
+		this.#proxyUnsubscribeMap.clear();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("targetElement")) {
+			this.#unsubscribe();
+			if (this.targetElement) for (const [callback, context] of proxiedContexts) {
+				const event = new ContextRequestEvent(context, this, (value, unsubscribe) => {
+					callback(this, value);
+					this.#proxyUnsubscribeMap.set(context, unsubscribe);
+				}, true);
+				this.targetElement.dispatchEvent(event);
+			}
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unsubscribe();
 	}
 };
 __decorate([property({ type: String })], EFControls.prototype, "target", void 0);
-__decorate([state()], EFControls.prototype, "targetElement", void 0);
+__decorate([provide({ context: efContext }), state()], EFControls.prototype, "targetElement", void 0);
+__decorate([provide({ context: playingContext }), state()], EFControls.prototype, "playing", void 0);
+__decorate([provide({ context: loopContext }), state()], EFControls.prototype, "loop", void 0);
+__decorate([provide({ context: currentTimeContext }), state()], EFControls.prototype, "currentTimeMs", void 0);
+__decorate([provide({ context: durationContext }), state()], EFControls.prototype, "durationMs", void 0);
+__decorate([provide({ context: targetTemporalContext }), state()], EFControls.prototype, "targetTemporal", void 0);
+__decorate([provide({ context: focusedElementContext }), state()], EFControls.prototype, "focusedElement", void 0);
+__decorate([provide({ context: focusContext })], EFControls.prototype, "focusContext", void 0);
 EFControls = __decorate([customElement("ef-controls")], EFControls);
 export { EFControls };

package/dist/gui/EFDial.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export interface DialChangeDetail {
+    value: number;
+}
+export declare class EFDial extends LitElement {
+    set value(newValue: number);
+    get value(): number;
+    private _value;
+    private isDragging;
+    private dragStartAngle;
+    private dragStartValue;
+    static styles: import('lit').CSSResult;
+    private getAngleFromPoint;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/gui/EFDial.js

@@ -0,0 +1,141 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+var EFDial = class EFDial$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._value = 0;
+		this.isDragging = false;
+		this.dragStartAngle = 0;
+		this.dragStartValue = 0;
+	}
+	set value(newValue) {
+		newValue = newValue % 360;
+		if (newValue < 0) newValue += 360;
+		newValue = Number.parseFloat(newValue.toPrecision(6));
+		const oldValue = this._value;
+		this._value = newValue;
+		this.requestUpdate("value", oldValue);
+	}
+	get value() {
+		return this._value;
+	}
+	static {
+		this.styles = css`
+    :host {
+        display: inline-block;
+        width: 200px; /* Default size, can be overridden by CSS */
+        height: 200px; /* Default size, can be overridden by CSS */
+    }
+    .dial-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: #f3f4f6;
+      border: 2px solid #d1d5db;
+    }
+    .handle {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        border: 2px solid #3b82f6;
+        background-color: white;
+        cursor: grab;
+    }
+    .handle.dragging {
+        background-color: #3b82f6;
+        cursor: grabbing;
+    }
+    .center-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        border: 1px solid #d1d5db;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 12px;
+    }
+  `;
+	}
+	getAngleFromPoint(clientX, clientY, rect) {
+		const center = this.clientWidth / 2;
+		const x = clientX - rect.left - center;
+		const y = clientY - rect.top - center;
+		return Math.atan2(y, x);
+	}
+	handlePointerDown(e) {
+		e.preventDefault();
+		this.isDragging = true;
+		const rect = this.getBoundingClientRect();
+		this.dragStartAngle = this.getAngleFromPoint(e.clientX, e.clientY, rect);
+		this.dragStartValue = this.value;
+		this.setPointerCapture(e.pointerId);
+		this.addEventListener("pointermove", this.handlePointerMove);
+		this.addEventListener("pointerup", this.handlePointerUp);
+	}
+	handlePointerMove(e) {
+		if (!this.isDragging) return;
+		const rect = this.getBoundingClientRect();
+		const angleDelta = this.getAngleFromPoint(e.clientX, e.clientY, rect) - this.dragStartAngle;
+		let newValue = this.dragStartValue + angleDelta * 180 / Math.PI;
+		if (e.shiftKey) newValue = Math.round(newValue / 15) * 15;
+		newValue = newValue % 360;
+		if (newValue < 0) newValue += 360;
+		newValue = Number.parseFloat(newValue.toPrecision(6));
+		this.value = newValue;
+		this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
+	}
+	handlePointerUp(e) {
+		this.isDragging = false;
+		this.releasePointerCapture(e.pointerId);
+		this.removeEventListener("pointermove", this.handlePointerMove);
+		this.removeEventListener("pointerup", this.handlePointerUp);
+	}
+	render() {
+		const center = this.clientWidth / 2;
+		const radius = center - 20;
+		const handleAngle = this.value * Math.PI / 180;
+		const handleX = center + Math.cos(handleAngle) * radius;
+		const handleY = center + Math.sin(handleAngle) * radius;
+		const handleStyles = {
+			left: `${handleX - 8}px`,
+			top: `${handleY - 8}px`
+		};
+		return html`
+      <div class="dial-container" @pointerdown=${this.handlePointerDown}>
+        <svg class="absolute inset-0 w-full h-full">
+          <circle
+            cx=${center}
+            cy=${center}
+            r=${radius}
+            fill="none"
+            stroke="#94a3b8"
+            stroke-width="2"
+            stroke-dasharray="4 4"
+          />
+          ${[
+			0,
+			90,
+			180,
+			270
+		].map((deg) => {
+			const angle = deg * Math.PI / 180;
+			return html`<line x1=${center + Math.cos(angle) * (radius - 8)} y1=${center + Math.sin(angle) * (radius - 8)} x2=${center + Math.cos(angle) * (radius + 8)} y2=${center + Math.sin(angle) * (radius + 8)} stroke="#64748b" stroke-width="2" />`;
+		})}
+        </svg>
+        <div class="handle ${this.isDragging ? "dragging" : ""}" style=${styleMap(handleStyles)}></div>
+        <div class="center-text">${this.value.toFixed(0)}°</div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Number })], EFDial.prototype, "value", null);
+__decorate([state()], EFDial.prototype, "isDragging", void 0);
+EFDial = __decorate([customElement("ef-dial")], EFDial);
+export { EFDial };

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

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+declare const TestContextWrapper_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
+declare class TestContextWrapper extends TestContextWrapper_base {
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-context-wrapper": TestContextWrapper;
+    }
+}
+export {};

package/dist/gui/EFFilmstrip.d.ts

@@ -34,6 +34,8 @@ declare class FilmstripItem extends FilmstripItem_base {
     };
     render(): TemplateResult<1>;
     renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
+    hideSelectors?: string[];
+    showSelectors?: string[];
     contents(): TemplateResult<1>;
     animations(): (TemplateResult<1> | typeof nothing)[];
     protected filmstripController?: ElementFilmstripController;
@@ -100,6 +102,8 @@ declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> ext
     element: ElementType;
     focusContext?: FocusContext;
     focusedElement?: HTMLElement | null;
+    hideSelectors?: string[];
+    showSelectors?: string[];
     get icon(): TemplateResult<1> | string;
     get isFocused(): boolean;
     displayLabel(): TemplateResult<1> | string | typeof nothing;
@@ -140,6 +144,10 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     #private;
     static styles: import('lit').CSSResult[];
     pixelsPerMs: number;
+    hide: string;
+    show: string;
+    get hideSelectors(): string[] | undefined;
+    get showSelectors(): string[] | undefined;
     scrubbing: boolean;
     timelineScrolltop: number;
     playing?: boolean;
@@ -163,8 +171,10 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     get gutter(): HTMLDivElement | undefined;
     render(): TemplateResult<1>;
     updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    target?: string;
-    targetTimegroup?: EFTimegroup | null;
+    target: string;
+    targetElement: Element | null;
+    private _contextProvidedTemporal?;
+    get targetTemporal(): TemporalMixinInterface | null;
     protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
 }
 declare global {