@editframe/elements 0.16.8-beta.0 → 0.18.3-beta.0

package/dist/gui/EFFitScale.d.ts

@@ -1,7 +1,7 @@
 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>;
+    containerRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    contentRef: import('lit-html/directives/ref').Ref<HTMLSlotElement>;
     createRenderRoot(): this;
     uniqueId: string;
     private scale;

package/dist/gui/EFFitScale.js

@@ -1,138 +1,115 @@
 import { LitElement } from "lit";
-import { state, customElement } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
 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.scaleLastSetOn = null;
-    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;
-          if (this.scaleLastSetOn !== this.contentChild) {
-            this.removeScale();
-          }
-          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);
-      }
-    };
-    this.removeScale = () => {
-      if (this.scaleLastSetOn) {
-        Object.assign(this.scaleLastSetOn.style, {
-          transform: "",
-          transformOrigin: ""
-        });
-        this.scaleLastSetOn = null;
-      }
-    };
-  }
-  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();
-    this.removeScale();
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-    }
-  }
-};
-__decorateClass([
-  state()
-], EFFitScale.prototype, "scale", 2);
-EFFitScale = __decorateClass([
-  customElement("ef-fit-scale")
-], EFFitScale);
-export {
-  EFFitScale
+let EFFitScale = class EFFitScale$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.containerRef = createRef();
+		this.contentRef = createRef();
+		this.uniqueId = Math.random().toString(36).substring(2, 15);
+		this.scale = 1;
+		this.scaleLastSetOn = null;
+		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;
+					if (this.scaleLastSetOn !== this.contentChild) this.removeScale();
+					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);
+			}
+		};
+		this.removeScale = () => {
+			if (this.scaleLastSetOn) {
+				Object.assign(this.scaleLastSetOn.style, {
+					transform: "",
+					transformOrigin: ""
+				});
+				this.scaleLastSetOn = null;
+			}
+		};
+	}
+	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();
+		this.removeScale();
+		if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
+	}
 };
+_decorate([state()], EFFitScale.prototype, "scale", void 0);
+EFFitScale = _decorate([customElement("ef-fit-scale")], EFFitScale);
+export { EFFitScale };

package/dist/gui/EFFocusOverlay.js

@@ -1,59 +1,30 @@
+import { focusedElementContext } from "./focusedElementContext.js";
 import { consume } from "@lit/context";
-import { css, LitElement, html } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
-import { focusedElementContext } from "./focusedElementContext.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 EFFocusOverlay = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.overlay = createRef();
-    this.drawOverlay = () => {
-      const overlay = this.overlay.value;
-      if (overlay) {
-        if (this.focusedElement) {
-          overlay.style.display = "block";
-          const rect = this.focusedElement.getBoundingClientRect();
-          Object.assign(overlay.style, {
-            top: `${rect.top}px`,
-            left: `${rect.left}px`,
-            width: `${rect.width}px`,
-            height: `${rect.height}px`
-          });
-          this.animationFrame = requestAnimationFrame(this.drawOverlay);
-        } else {
-          overlay.style.display = "none";
-        }
-      }
-    };
-  }
-  render() {
-    return html`<div ${ref(this.overlay)} class="overlay"></div>`;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.drawOverlay();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.animationFrame) {
-      cancelAnimationFrame(this.animationFrame);
-    }
-  }
-  updated() {
-    this.drawOverlay();
-  }
-};
-EFFocusOverlay.styles = css`
+let EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.overlay = createRef();
+		this.drawOverlay = () => {
+			const overlay = this.overlay.value;
+			if (overlay) if (this.focusedElement) {
+				overlay.style.display = "block";
+				const rect = this.focusedElement.getBoundingClientRect();
+				Object.assign(overlay.style, {
+					top: `${rect.top}px`,
+					left: `${rect.left}px`,
+					width: `${rect.width}px`,
+					height: `${rect.height}px`
+				});
+				this.animationFrame = requestAnimationFrame(this.drawOverlay);
+			} else overlay.style.display = "none";
+		};
+	}
+	static {
+		this.styles = css`
     :host {
       display: block;
       position: relative;
@@ -71,12 +42,25 @@ EFFocusOverlay.styles = css`
       display: none;
     }
   `;
-__decorateClass([
-  consume({ context: focusedElementContext, subscribe: true })
-], EFFocusOverlay.prototype, "focusedElement", 2);
-EFFocusOverlay = __decorateClass([
-  customElement("ef-focus-overlay")
-], EFFocusOverlay);
-export {
-  EFFocusOverlay
+	}
+	render() {
+		return html`<div ${ref(this.overlay)} class="overlay"></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.drawOverlay();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
+	}
+	updated() {
+		this.drawOverlay();
+	}
 };
+_decorate([consume({
+	context: focusedElementContext,
+	subscribe: true
+})], EFFocusOverlay.prototype, "focusedElement", void 0);
+EFFocusOverlay = _decorate([customElement("ef-focus-overlay")], EFFocusOverlay);
+export { EFFocusOverlay };

package/dist/gui/EFPreview.js

@@ -1,56 +1,37 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { provide } from "@lit/context";
-import { ContextMixin } from "./ContextMixin.js";
-import { TWMixin } from "./TWMixin.js";
 import { focusedElementContext } from "./focusedElementContext.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 EFPreview = class extends ContextMixin(TWMixin(LitElement)) {
-  constructor() {
-    super();
-    this.addEventListener("mouseover", (e) => {
-      const target = e.target;
-      const timegroup = target.closest("ef-timegroup");
-      if (target !== this && timegroup) {
-        this.focusedElement = target;
-      }
-    });
-    this.addEventListener("mouseout", (e) => {
-      const relatedTarget = e.relatedTarget;
-      const targetingTimegroup = relatedTarget?.closest("ef-timegroup");
-      if (!this.contains(relatedTarget) || relatedTarget === this || !targetingTimegroup) {
-        this.focusedElement = void 0;
-      }
-    });
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-EFPreview.styles = [
-  css`
+import { ContextMixin } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin2.js";
+import { provide } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+let EFPreview = class EFPreview$1 extends ContextMixin(TWMixin(LitElement)) {
+	static {
+		this.styles = [css`
       :host {
         position: relative;
         display: block;
         cursor: crosshair;
       }
-    `
-];
-__decorateClass([
-  provide({ context: focusedElementContext })
-], EFPreview.prototype, "focusedElement", 2);
-EFPreview = __decorateClass([
-  customElement("ef-preview")
-], EFPreview);
-export {
-  EFPreview
+    `];
+	}
+	constructor() {
+		super();
+		this.addEventListener("mouseover", (e) => {
+			const target = e.target;
+			const timegroup = target.closest("ef-timegroup");
+			if (target !== this && timegroup) this.focusedElement = target;
+		});
+		this.addEventListener("mouseout", (e) => {
+			const relatedTarget = e.relatedTarget;
+			const targetingTimegroup = relatedTarget?.closest("ef-timegroup");
+			if (!this.contains(relatedTarget) || relatedTarget === this || !targetingTimegroup) this.focusedElement = void 0;
+		});
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
 };
+_decorate([provide({ context: focusedElementContext })], EFPreview.prototype, "focusedElement", void 0);
+EFPreview = _decorate([customElement("ef-preview")], EFPreview);
+export { EFPreview };

package/dist/gui/EFScrubber.js

@@ -1,82 +1,31 @@
-import { consume } from "@lit/context";
-import { css, LitElement, html } from "lit";
-import { state, customElement } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
 import { efContext } from "./efContext.js";
 import { playingContext } from "./playingContext.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 EFScrubber = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.playing = false;
-    this.lastTimeUpdateProgress = 0;
-    this.scrubProgress = 0;
-    this.isDragging = false;
-    this.boundHandleMouseDown = (e) => {
-      this.isDragging = true;
-      e.preventDefault();
-      this.updateProgress(e);
-    };
-    this.boundHandleMouseMove = (e) => {
-      if (this.isDragging) {
-        this.updateProgress(e);
-      }
-    };
-    this.boundHandleMouseUp = () => {
-      this.isDragging = false;
-    };
-  }
-  updateProgress(e) {
-    if (!this.context || !this.scrubberRef) return;
-    const rect = this.scrubberRef.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const progress = Math.max(0, Math.min(1, x / rect.width));
-    this.scrubProgress = progress;
-    this.context.currentTimeMs = progress * (this.context.targetTimegroup?.durationMs ?? 0);
-  }
-  render() {
-    const displayProgress = this.isDragging ? this.scrubProgress : this.lastTimeUpdateProgress;
-    return html`
-      <div 
-        ${ref((el) => {
-      this.scrubberRef = el;
-    })}
-        part="scrubber"
-        class="scrubber"
-        @mousedown=${this.boundHandleMouseDown}
-      >
-        <div class="progress" style="width: ${displayProgress * 100}%"></div>
-        <div class="handle" style="left: ${displayProgress * 100}%"></div>
-      </div>
-    `;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("mouseup", this.boundHandleMouseUp);
-    window.addEventListener("mousemove", this.boundHandleMouseMove);
-    if (this.context) {
-      this.context.addEventListener("timeupdate", (e) => {
-        this.lastTimeUpdateProgress = e.detail.progress;
-      });
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("mouseup", this.boundHandleMouseUp);
-    window.removeEventListener("mousemove", this.boundHandleMouseMove);
-  }
-};
-EFScrubber.styles = [
-  css`
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { ref } from "lit/directives/ref.js";
+let EFScrubber = class EFScrubber$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.playing = false;
+		this.lastTimeUpdateProgress = 0;
+		this.scrubProgress = 0;
+		this.isDragging = false;
+		this.boundHandleMouseDown = (e) => {
+			this.isDragging = true;
+			e.preventDefault();
+			this.updateProgress(e);
+		};
+		this.boundHandleMouseMove = (e) => {
+			if (this.isDragging) this.updateProgress(e);
+		};
+		this.boundHandleMouseUp = () => {
+			this.isDragging = false;
+		};
+	}
+	static {
+		this.styles = [css`
     :host {
       --ef-scrubber-height: 4px;
       --ef-scrubber-background: rgb(209 213 219);
@@ -117,26 +66,56 @@ EFScrubber.styles = [
     ::part(scrubber) { }
     ::part(progress) { }
     ::part(handle) { }
-    `
-];
-__decorateClass([
-  consume({ context: efContext, subscribe: true })
-], EFScrubber.prototype, "context", 2);
-__decorateClass([
-  consume({ context: playingContext, subscribe: true })
-], EFScrubber.prototype, "playing", 2);
-__decorateClass([
-  state()
-], EFScrubber.prototype, "lastTimeUpdateProgress", 2);
-__decorateClass([
-  state()
-], EFScrubber.prototype, "scrubProgress", 2);
-__decorateClass([
-  state()
-], EFScrubber.prototype, "isDragging", 2);
-EFScrubber = __decorateClass([
-  customElement("ef-scrubber")
-], EFScrubber);
-export {
-  EFScrubber
+    `];
+	}
+	updateProgress(e) {
+		if (!this.context || !this.scrubberRef) return;
+		const rect = this.scrubberRef.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const progress = Math.max(0, Math.min(1, x / rect.width));
+		this.scrubProgress = progress;
+		this.context.currentTimeMs = progress * (this.context.targetTimegroup?.durationMs ?? 0);
+	}
+	render() {
+		const displayProgress = this.isDragging ? this.scrubProgress : this.lastTimeUpdateProgress;
+		return html`
+      <div 
+        ${ref((el) => {
+			this.scrubberRef = el;
+		})}
+        part="scrubber"
+        class="scrubber"
+        @mousedown=${this.boundHandleMouseDown}
+      >
+        <div class="progress" style="width: ${displayProgress * 100}%"></div>
+        <div class="handle" style="left: ${displayProgress * 100}%"></div>
+      </div>
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener("mouseup", this.boundHandleMouseUp);
+		window.addEventListener("mousemove", this.boundHandleMouseMove);
+		if (this.context) this.context.addEventListener("timeupdate", (e) => {
+			this.lastTimeUpdateProgress = e.detail.progress;
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("mouseup", this.boundHandleMouseUp);
+		window.removeEventListener("mousemove", this.boundHandleMouseMove);
+	}
 };
+_decorate([consume({
+	context: efContext,
+	subscribe: true
+})], EFScrubber.prototype, "context", void 0);
+_decorate([consume({
+	context: playingContext,
+	subscribe: true
+})], EFScrubber.prototype, "playing", void 0);
+_decorate([state()], EFScrubber.prototype, "lastTimeUpdateProgress", void 0);
+_decorate([state()], EFScrubber.prototype, "scrubProgress", void 0);
+_decorate([state()], EFScrubber.prototype, "isDragging", void 0);
+EFScrubber = _decorate([customElement("ef-scrubber")], EFScrubber);
+export { EFScrubber };