@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.0

package/dist/gui/EFOverlayLayer.js

@@ -0,0 +1,104 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { panZoomTransformContext } from "./panZoomTransformContext.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+//#region src/gui/EFOverlayLayer.ts
+let EFOverlayLayer = class EFOverlayLayer$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.registeredItems = /* @__PURE__ */ new Set();
+		this.rafId = null;
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        transform-origin: 0 0;
+      }
+    `];
+	}
+	/**
+	* Register an overlay item for coordinated updates.
+	* Called by EFOverlayItem in connectedCallback.
+	*/
+	registerOverlayItem(item) {
+		this.registeredItems.add(item);
+	}
+	/**
+	* Unregister an overlay item.
+	* Called by EFOverlayItem in disconnectedCallback.
+	*/
+	unregisterOverlayItem(item) {
+		this.registeredItems.delete(item);
+	}
+	/**
+	* Single source of truth for reading the current transform.
+	* Priority: context > sibling DOM read > prop > default
+	*/
+	readTransform() {
+		if (this.panZoomTransformFromContext) return this.panZoomTransformFromContext;
+		const panZoomElement = this.parentElement?.querySelector("ef-pan-zoom");
+		if (panZoomElement && typeof panZoomElement.x === "number") {
+			const contentWrapper = panZoomElement.shadowRoot?.querySelector(".content-wrapper");
+			const matrixMatch = (contentWrapper && window.getComputedStyle(contentWrapper).transform)?.match(/matrix\(([^)]+)\)/);
+			const scale = matrixMatch ? parseFloat(matrixMatch[1].split(",")[0].trim()) : panZoomElement.scale ?? 1;
+			return {
+				x: panZoomElement.x ?? 0,
+				y: panZoomElement.y ?? 0,
+				scale
+			};
+		}
+		if (this.panZoomTransform) return this.panZoomTransform;
+		return {
+			x: 0,
+			y: 0,
+			scale: 1
+		};
+	}
+	/**
+	* Simple RAF loop: Update everything on every frame.
+	*/
+	startLoop() {
+		const update = () => {
+			const transform = this.readTransform();
+			if (this.panZoomTransformFromContext) this.style.transform = "none";
+			else this.style.transform = `translate(${transform.x}px, ${transform.y}px)`;
+			for (const item of this.registeredItems) item.updatePosition();
+			this.rafId = requestAnimationFrame(update);
+		};
+		this.rafId = requestAnimationFrame(update);
+	}
+	stopLoop() {
+		if (this.rafId !== null) {
+			cancelAnimationFrame(this.rafId);
+			this.rafId = null;
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.startLoop();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.stopLoop();
+	}
+	updated() {}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([consume({
+	context: panZoomTransformContext,
+	subscribe: true
+})], EFOverlayLayer.prototype, "panZoomTransformFromContext", void 0);
+__decorate([property({ type: Object })], EFOverlayLayer.prototype, "panZoomTransform", void 0);
+EFOverlayLayer = __decorate([customElement("ef-overlay-layer")], EFOverlayLayer);
+
+//#endregion
+export { EFOverlayLayer };
+//# sourceMappingURL=EFOverlayLayer.js.map

package/dist/gui/EFOverlayLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFOverlayLayer.js","names":["EFOverlayLayer"],"sources":["../../src/gui/EFOverlayLayer.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { panZoomTransformContext } from \"./panZoomTransformContext.js\";\nimport type { PanZoomTransform } from \"../elements/EFPanZoom.js\";\nimport type { EFOverlayItem } from \"./EFOverlayItem.js\";\n\n/**\n * Overlay layer container component.\n *\n * SIMPLE ARCHITECTURE:\n * - Runs a SINGLE RAF loop that updates everything every frame\n * - No change detection, no optimization, no delays\n * - Just: read transform → apply it → update all items → next frame\n *\n * Core responsibilities:\n * - Consumes PanZoom transform from context (if PanZoom is ancestor)\n * - Accepts transform via props as fallback (for sibling PanZoom)\n * - Applies translate-only transform (no scale) directly to host element\n * - Manages registered child EFOverlayItem components\n * - Updates all overlays every animation frame\n *\n * The transform is applied directly to the host element so that:\n * 1. getBoundingClientRect() returns the transformed position\n * 2. EFOverlayItem can use this rect for coordinate calculations\n */\n@customElement(\"ef-overlay-layer\")\nexport class EFOverlayLayer extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        transform-origin: 0 0;\n      }\n    `,\n  ];\n\n  @consume({ context: panZoomTransformContext, subscribe: true })\n  panZoomTransformFromContext?: PanZoomTransform;\n\n  /**\n   * Pan/zoom transform as fallback for when context or sibling PanZoom is not available.\n   * Primarily used for testing and standalone usage.\n   */\n  @property({ type: Object })\n  panZoomTransform?: PanZoomTransform;\n\n  // Track registered overlay items for coordinated updates\n  private registeredItems = new Set<EFOverlayItem>();\n  private rafId: number | null = null;\n\n  /**\n   * Register an overlay item for coordinated updates.\n   * Called by EFOverlayItem in connectedCallback.\n   */\n  registerOverlayItem(item: EFOverlayItem) {\n    this.registeredItems.add(item);\n  }\n\n  /**\n   * Unregister an overlay item.\n   * Called by EFOverlayItem in disconnectedCallback.\n   */\n  unregisterOverlayItem(item: EFOverlayItem) {\n    this.registeredItems.delete(item);\n  }\n\n  /**\n   * Single source of truth for reading the current transform.\n   * Priority: context > sibling DOM read > prop > default\n   */\n  private readTransform(): PanZoomTransform {\n    // 1. Context (synchronous, preferred)\n    if (this.panZoomTransformFromContext) {\n      return this.panZoomTransformFromContext;\n    }\n\n    // 2. Read directly from sibling PanZoom element\n    const panZoomElement = this.parentElement?.querySelector(\n      \"ef-pan-zoom\",\n    ) as any;\n    if (panZoomElement && typeof panZoomElement.x === \"number\") {\n      const contentWrapper =\n        panZoomElement.shadowRoot?.querySelector(\".content-wrapper\");\n      const computedTransform =\n        contentWrapper && window.getComputedStyle(contentWrapper).transform;\n\n      // Parse scale from matrix(scaleX, skewY, skewX, scaleY, tx, ty)\n      const matrixMatch = computedTransform?.match(/matrix\\(([^)]+)\\)/);\n      const scale = matrixMatch\n        ? parseFloat(matrixMatch[1].split(\",\")[0].trim())\n        : (panZoomElement.scale ?? 1);\n\n      return { x: panZoomElement.x ?? 0, y: panZoomElement.y ?? 0, scale };\n    }\n\n    // 3. Prop (for testing)\n    if (this.panZoomTransform) {\n      return this.panZoomTransform;\n    }\n\n    // 4. Default\n    return { x: 0, y: 0, scale: 1 };\n  }\n\n  /**\n   * Simple RAF loop: Update everything on every frame.\n   */\n  private startLoop() {\n    const update = () => {\n      const transform = this.readTransform();\n\n      // Apply transform\n      // If we're a child of panzoom (receiving context), we're inside the scaled content-wrapper\n      // which already applies translate(x, y) scale(s). We should NOT apply our own translate\n      // because the parent transform already handles the pan. Our getBoundingClientRect() will\n      // naturally include the parent's transform.\n      // If we're a sibling of panzoom, we need to apply the translate ourselves to match the pan.\n      if (this.panZoomTransformFromContext) {\n        // Child of panzoom - don't apply any transform, parent handles it\n        this.style.transform = \"none\";\n      } else {\n        // Sibling of panzoom - apply translate directly to match panzoom's pan\n        this.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n      }\n\n      // Update all overlay items\n      for (const item of this.registeredItems) {\n        item.updatePosition();\n      }\n\n      // Schedule next frame\n      this.rafId = requestAnimationFrame(update);\n    };\n\n    this.rafId = requestAnimationFrame(update);\n  }\n\n  private stopLoop() {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.startLoop();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stopLoop();\n  }\n\n  updated() {\n    // Transform changes are handled by RAF loop\n  }\n\n  render() {\n    // Simple slot - transform is applied to host element, not a wrapper\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-overlay-layer\": EFOverlayLayer;\n  }\n}\n"],"mappings":";;;;;;;AA2BO,2BAAMA,yBAAuB,WAAW;;;yCAwBnB,IAAI,KAAoB;eACnB;;;gBAxBf,CACd,GAAG;;;;;;;;MASJ;;;;;;CAoBD,oBAAoB,MAAqB;AACvC,OAAK,gBAAgB,IAAI,KAAK;;;;;;CAOhC,sBAAsB,MAAqB;AACzC,OAAK,gBAAgB,OAAO,KAAK;;;;;;CAOnC,AAAQ,gBAAkC;AAExC,MAAI,KAAK,4BACP,QAAO,KAAK;EAId,MAAM,iBAAiB,KAAK,eAAe,cACzC,cACD;AACD,MAAI,kBAAkB,OAAO,eAAe,MAAM,UAAU;GAC1D,MAAM,iBACJ,eAAe,YAAY,cAAc,mBAAmB;GAK9D,MAAM,eAHJ,kBAAkB,OAAO,iBAAiB,eAAe,CAAC,YAGrB,MAAM,oBAAoB;GACjE,MAAM,QAAQ,cACV,WAAW,YAAY,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,CAAC,GAC9C,eAAe,SAAS;AAE7B,UAAO;IAAE,GAAG,eAAe,KAAK;IAAG,GAAG,eAAe,KAAK;IAAG;IAAO;;AAItE,MAAI,KAAK,iBACP,QAAO,KAAK;AAId,SAAO;GAAE,GAAG;GAAG,GAAG;GAAG,OAAO;GAAG;;;;;CAMjC,AAAQ,YAAY;EAClB,MAAM,eAAe;GACnB,MAAM,YAAY,KAAK,eAAe;AAQtC,OAAI,KAAK,4BAEP,MAAK,MAAM,YAAY;OAGvB,MAAK,MAAM,YAAY,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE;AAIpE,QAAK,MAAM,QAAQ,KAAK,gBACtB,MAAK,gBAAgB;AAIvB,QAAK,QAAQ,sBAAsB,OAAO;;AAG5C,OAAK,QAAQ,sBAAsB,OAAO;;CAG5C,AAAQ,WAAW;AACjB,MAAI,KAAK,UAAU,MAAM;AACvB,wBAAqB,KAAK,MAAM;AAChC,QAAK,QAAQ;;;CAIjB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,WAAW;;CAGlB,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,UAAU;;CAGjB,UAAU;CAIV,SAAS;AAEP,SAAO,IAAI;;;YA5HZ,QAAQ;CAAE,SAAS;CAAyB,WAAW;CAAM,CAAC;YAO9D,SAAS,EAAE,MAAM,QAAQ,CAAC;6BArB5B,cAAc,mBAAmB"}

package/dist/gui/EFPause.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit18 from "lit";
+import * as lit20 from "lit";
 import { LitElement } from "lit";
-import * as lit_html16 from "lit-html";
+import * as lit_html20 from "lit-html";
 
 //#region src/gui/EFPause.d.ts
 declare const EFPause_base: (new (...args: any[]) => {
@@ -10,13 +10,13 @@ declare const EFPause_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPause extends EFPause_base {
-  static styles: lit18.CSSResult[];
+  static styles: lit20.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html16.TemplateResult<1>;
+  render(): lit_html20.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFPlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit17 from "lit";
+import * as lit19 from "lit";
 import { LitElement } from "lit";
-import * as lit_html15 from "lit-html";
+import * as lit_html19 from "lit-html";
 
 //#region src/gui/EFPlay.d.ts
 declare const EFPlay_base: (new (...args: any[]) => {
@@ -10,13 +10,13 @@ declare const EFPlay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPlay extends EFPlay_base {
-  static styles: lit17.CSSResult[];
+  static styles: lit19.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html15.TemplateResult<1>;
+  render(): lit_html19.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFResizableBox.d.ts

@@ -1,6 +1,6 @@
-import * as lit25 from "lit";
+import * as lit29 from "lit";
 import { LitElement } from "lit";
-import * as lit_html22 from "lit-html";
+import * as lit_html28 from "lit-html";
 
 //#region src/gui/EFResizableBox.d.ts
 interface BoxBounds {
@@ -15,26 +15,22 @@ declare class EFResizableBox extends LitElement {
   private containerHeight;
   minSize: number;
   private isDragging;
-  private dragMode;
-  private interaction;
-  private modifiers;
-  static styles: lit25.CSSResult;
+  private isResizing;
+  private dragStart;
+  private dragStartPosition;
+  private resizeStartCorner;
+  private resizeStartSize;
+  private resizeStartPosition;
+  static styles: lit29.CSSResult;
   private resizeObserver?;
   connectedCallback(): void;
+  disconnectedCallback(): void;
   private handlePointerDown;
   private handlePointerMove;
   private handlePointerUp;
-  private calculateBoundsWithModeAwareConstraints;
-  private constrainBoundsForMode;
-  private isValidBounds;
-  private constrainWithAspectRatio;
-  private constrainCenterResize;
-  private constrainCenterResizeWithAspectRatio;
-  private simpleConstrainBounds;
-  private constrainResizeDeltas;
+  private cleanup;
   private dispatchBoundsChange;
-  render(): lit_html22.TemplateResult<1>;
-  private renderHandles;
+  render(): lit_html28.TemplateResult<1>;
 }
 //#endregion
 export { BoxBounds, EFResizableBox };