@framv/image 0.1.0

package/dist/bundle.esm.js

@@ -0,0 +1,143 @@
+// src/element.ts
+import { exportElement } from "@framv/core";
+var STYLES = `
+  :host {
+    display: block;
+    position: relative;
+    background: #f5f5f5;
+    border-radius: 8px;
+    overflow: hidden;
+    font-family: system-ui, sans-serif;
+  }
+  .framv-image-stage {
+    position: relative;
+    width: var(--framv-iw, 800px);
+    height: var(--framv-ih, 600px);
+    transform-origin: top left;
+    overflow: hidden;
+  }
+  .framv-image-toolbar {
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    padding: 8px 12px;
+    background: rgba(0,0,0,0.7);
+    color: #fff; font: 12px system-ui;
+    position: absolute; bottom: 0; left: 0; right: 0;
+    opacity: 0; transition: opacity 0.2s;
+    z-index: 10;
+  }
+  :host(:hover) .framv-image-toolbar { opacity: 1; }
+  .framv-image-toolbar button {
+    background: none; border: 1px solid rgba(255,255,255,0.2);
+    color: inherit; cursor: pointer;
+    padding: 4px 10px; font: inherit; border-radius: 4px;
+  }
+  .framv-image-toolbar button:hover { background: rgba(255,255,255,0.15); }
+  .framv-image-toolbar .btn-export {
+    border-color: #ff79c6; color: #ff79c6;
+  }
+  .framv-image-badge {
+    position: absolute; top: 8px; right: 8px;
+    background: rgba(0,0,0,0.6); color: #fff;
+    padding: 2px 8px; border-radius: 4px;
+    font: 11px system-ui; letter-spacing: 0.5px;
+    text-transform: uppercase; z-index: 5;
+  }
+`;
+var FramvImageElement = class extends HTMLElement {
+  static observedAttributes = ["format"];
+  _stage;
+  _exportBtn;
+  _shadow;
+  _exporting = false;
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  get width() {
+    return parseInt(this.getAttribute("width") ?? "800");
+  }
+  get height() {
+    return parseInt(this.getAttribute("height") ?? "600");
+  }
+  get format() {
+    return this.getAttribute("format") ?? "png";
+  }
+  get quality() {
+    return parseFloat(this.getAttribute("quality") ?? "0.95");
+  }
+  connectedCallback() {
+    const w = this.width;
+    const h = this.height;
+    this._shadow.innerHTML = `
+      <style>${STYLES}</style>
+      <div class="framv-image-badge">framv image \xB7 ${this.format.toUpperCase()} \xB7 ${w}x${h}</div>
+      <div class="framv-image-stage" style="--framv-iw:${w}px;--framv-ih:${h}px">
+        <slot></slot>
+      </div>
+      <div class="framv-image-toolbar">
+        <span style="opacity:0.6;font-size:11px">${w}x${h}</span>
+        <button class="btn-export">\u2B07 Export ${this.format.toUpperCase()}</button>
+      </div>
+    `;
+    this._stage = this._shadow.querySelector(".framv-image-stage");
+    this._exportBtn = this._shadow.querySelector(".btn-export");
+    this._adaptSize();
+    this._exportBtn.addEventListener("click", () => this._export());
+    new ResizeObserver(() => this._adaptSize()).observe(this);
+  }
+  attributeChangedCallback(name) {
+    if (name === "format" && this._stage) {
+      const badge = this._shadow.querySelector(".framv-image-badge");
+      if (badge) badge.textContent = `framv image \xB7 ${this.format.toUpperCase()} \xB7 ${this.width}x${this.height}`;
+      this._exportBtn.textContent = `\u2B07 Export ${this.format.toUpperCase()}`;
+    }
+  }
+  _adaptSize() {
+    const w = this.width;
+    const h = this.height;
+    const containerW = this.clientWidth || w;
+    const scale = Math.min(containerW / w, 1);
+    this._stage.style.transform = `scale(${scale})`;
+    this.style.minHeight = `${h * scale}px`;
+  }
+  async _export() {
+    if (this._exporting) return;
+    this._exporting = true;
+    const container = document.createElement("div");
+    container.style.width = `${this.width}px`;
+    container.style.height = `${this.height}px`;
+    container.style.position = "relative";
+    container.style.overflow = "hidden";
+    Array.from(this.children).forEach((child) => container.appendChild(child.cloneNode(true)));
+    try {
+      const blob = await exportElement({
+        element: container,
+        settings: {
+          format: this.format,
+          width: this.width,
+          height: this.height,
+          quality: this.quality,
+          time: 0
+        }
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `framv-image.${this.format}`;
+      this._shadow.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Export failed:", err);
+    } finally {
+      this._exporting = false;
+    }
+  }
+};
+if (!customElements.get("framv-image")) {
+  customElements.define("framv-image", FramvImageElement);
+}
+export {
+  FramvImageElement
+};