@gjsify/dom-elements 0.3.13 → 0.3.15

package/lib/esm/html-image-element.js

@@ -1,230 +1,231 @@
+import { localName, namespaceURI, tagName } from "./property-symbol.js";
+import { NamespaceURI } from "./namespace-uri.js";
+import { HTMLElement } from "./html-element.js";
+import { Event } from "@gjsify/dom-events";
 import GLib from "@girs/glib-2.0";
 import Gio from "@girs/gio-2.0";
 import GdkPixbuf from "@girs/gdkpixbuf-2.0";
-import { Event } from "@gjsify/dom-events";
-import { HTMLElement } from "./html-element.js";
-import * as PropertySymbol from "./property-symbol.js";
-import { NamespaceURI } from "./namespace-uri.js";
 import System from "system";
-class HTMLImageElement extends HTMLElement {
-  constructor() {
-    super();
-    this._complete = false;
-    this._naturalHeight = 0;
-    this._naturalWidth = 0;
-    this[PropertySymbol.tagName] = "IMG";
-    this[PropertySymbol.localName] = "img";
-    this[PropertySymbol.namespaceURI] = NamespaceURI.html;
-  }
-  // -- Read-only properties --
-  get complete() {
-    return this._complete;
-  }
-  get naturalHeight() {
-    return this._naturalHeight;
-  }
-  get naturalWidth() {
-    return this._naturalWidth;
-  }
-  get currentSrc() {
-    return this.src;
-  }
-  get x() {
-    return 0;
-  }
-  get y() {
-    return 0;
-  }
-  // -- Attribute-backed string properties --
-  get alt() {
-    return this.getAttribute("alt") ?? "";
-  }
-  set alt(value) {
-    this.setAttribute("alt", value);
-  }
-  get crossOrigin() {
-    return this.getAttribute("crossorigin");
-  }
-  set crossOrigin(value) {
-    if (value === null) {
-      this.removeAttribute("crossorigin");
-    } else {
-      this.setAttribute("crossorigin", value);
-    }
-  }
-  get decoding() {
-    return this.getAttribute("decoding") ?? "auto";
-  }
-  set decoding(value) {
-    this.setAttribute("decoding", value);
-  }
-  get loading() {
-    const value = this.getAttribute("loading");
-    if (value === "lazy" || value === "eager") return value;
-    return "auto";
-  }
-  set loading(value) {
-    this.setAttribute("loading", value);
-  }
-  get referrerPolicy() {
-    return this.getAttribute("referrerpolicy") ?? "";
-  }
-  set referrerPolicy(value) {
-    this.setAttribute("referrerpolicy", value);
-  }
-  get sizes() {
-    return this.getAttribute("sizes") ?? "";
-  }
-  set sizes(value) {
-    this.setAttribute("sizes", value);
-  }
-  get src() {
-    return this.getAttribute("src") ?? "";
-  }
-  set src(src) {
-    this.setAttribute("src", src);
-    const DEBUG = globalThis.__GJSIFY_DEBUG_IMG === true;
-    if (src.startsWith("data:")) {
-      const commaIdx = src.indexOf(",");
-      if (commaIdx === -1) {
-        this._complete = true;
-        this.dispatchEvent(new Event("error"));
-        return;
-      }
-      const meta = src.slice(5, commaIdx);
-      const data = src.slice(commaIdx + 1);
-      const isBase64 = meta.includes(";base64");
-      try {
-        let bytes;
-        if (isBase64) {
-          bytes = GLib.base64_decode(data);
-        } else {
-          bytes = new TextEncoder().encode(decodeURIComponent(data));
-        }
-        const gbytes = GLib.Bytes.new(bytes);
-        const stream = Gio.MemoryInputStream.new_from_bytes(gbytes);
-        this._pixbuf = GdkPixbuf.Pixbuf.new_from_stream(stream, null);
-        this._naturalWidth = this._pixbuf.get_width();
-        this._naturalHeight = this._pixbuf.get_height();
-        this._complete = true;
-        if (DEBUG) console.log(`[img] ok data: (${this._naturalWidth}x${this._naturalHeight})`);
-        this.dispatchEvent(new Event("load"));
-      } catch (_error) {
-        if (DEBUG) console.warn(`[img] error data:: ${_error?.message ?? _error}`);
-        this._complete = true;
-        this.dispatchEvent(new Event("error"));
-      }
-      return;
-    }
-    let filename;
-    if (src.startsWith("file://")) {
-      filename = GLib.filename_from_uri(src)[0];
-    } else if (src.startsWith("http://") || src.startsWith("https://")) {
-      this._complete = true;
-      this.dispatchEvent(new Event("error"));
-      return;
-    } else {
-      const dir = GLib.path_get_dirname(System.programInvocationName);
-      filename = GLib.build_filenamev([dir, src]);
-    }
-    try {
-      if (DEBUG) console.log(`[img] load ${filename}`);
-      this._pixbuf = GdkPixbuf.Pixbuf.new_from_file(filename);
-      this._naturalWidth = this._pixbuf.get_width();
-      this._naturalHeight = this._pixbuf.get_height();
-      this._complete = true;
-      if (DEBUG) console.log(`[img] ok ${filename} (${this._naturalWidth}x${this._naturalHeight})`);
-      this.dispatchEvent(new Event("load"));
-    } catch (_error) {
-      if (DEBUG) console.warn(`[img] error ${filename}: ${_error?.message ?? _error}`);
-      this._complete = true;
-      this.dispatchEvent(new Event("error"));
-    }
-  }
-  get srcset() {
-    return this.getAttribute("srcset") ?? "";
-  }
-  set srcset(value) {
-    this.setAttribute("srcset", value);
-  }
-  get useMap() {
-    return this.getAttribute("usemap") ?? "";
-  }
-  set useMap(value) {
-    this.setAttribute("usemap", value);
-  }
-  // -- Attribute-backed numeric properties --
-  get height() {
-    if (this._pixbuf) {
-      return this._pixbuf.get_height();
-    }
-    const attr = this.getAttribute("height");
-    return attr !== null ? Number(attr) : 0;
-  }
-  set height(value) {
-    this.setAttribute("height", String(value));
-  }
-  get width() {
-    if (this._pixbuf) {
-      return this._pixbuf.get_width();
-    }
-    const attr = this.getAttribute("width");
-    return attr !== null ? Number(attr) : 0;
-  }
-  set width(value) {
-    this.setAttribute("width", String(value));
-  }
-  // -- Attribute-backed boolean property --
-  get isMap() {
-    return this.hasAttribute("ismap");
-  }
-  set isMap(value) {
-    if (value) {
-      this.setAttribute("ismap", "");
-    } else {
-      this.removeAttribute("ismap");
-    }
-  }
-  // -- Methods --
-  /**
-   * Decode the image. Returns a promise that resolves when the image is decoded.
-   */
-  decode() {
-    return Promise.resolve();
-  }
-  /**
-   * Clone this node.
-   */
-  cloneNode(deep = false) {
-    return super.cloneNode(deep);
-  }
-  // -- GJS-specific extensions --
-  /**
-   * Get the pixels of the loaded GdkPixbuf as ImageData.
-   * Always returns RGBA (4 channels) — matches standard browser ImageData behaviour
-   * and what WebGL expects for texSubImage2D with format=RGBA.
-   * JPEG and other non-alpha formats are promoted to RGBA via add_alpha().
-   */
-  getImageData() {
-    if (!this._pixbuf) return null;
-    const rgba = this._pixbuf.get_has_alpha() ? this._pixbuf : this._pixbuf.add_alpha(false, 0, 0, 0) ?? this._pixbuf;
-    return {
-      colorSpace: "srgb",
-      data: new Uint8ClampedArray(rgba.get_pixels()),
-      height: rgba.get_height(),
-      width: rgba.get_width()
-    };
-  }
-  /**
-   * Check if this image is backed by a GdkPixbuf.
-   */
-  isPixbuf() {
-    return !!this._pixbuf;
-  }
-  get [Symbol.toStringTag]() {
-    return "HTMLImageElement";
-  }
-}
-export {
-  HTMLImageElement
+
+//#region src/html-image-element.ts
+/**
+* HTML Image Element.
+*
+* Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement
+*/
+var HTMLImageElement = class extends HTMLElement {
+	constructor() {
+		super();
+		this._complete = false;
+		this._naturalHeight = 0;
+		this._naturalWidth = 0;
+		this[tagName] = "IMG";
+		this[localName] = "img";
+		this[namespaceURI] = NamespaceURI.html;
+	}
+	get complete() {
+		return this._complete;
+	}
+	get naturalHeight() {
+		return this._naturalHeight;
+	}
+	get naturalWidth() {
+		return this._naturalWidth;
+	}
+	get currentSrc() {
+		return this.src;
+	}
+	get x() {
+		return 0;
+	}
+	get y() {
+		return 0;
+	}
+	get alt() {
+		return this.getAttribute("alt") ?? "";
+	}
+	set alt(value) {
+		this.setAttribute("alt", value);
+	}
+	get crossOrigin() {
+		return this.getAttribute("crossorigin");
+	}
+	set crossOrigin(value) {
+		if (value === null) {
+			this.removeAttribute("crossorigin");
+		} else {
+			this.setAttribute("crossorigin", value);
+		}
+	}
+	get decoding() {
+		return this.getAttribute("decoding") ?? "auto";
+	}
+	set decoding(value) {
+		this.setAttribute("decoding", value);
+	}
+	get loading() {
+		const value = this.getAttribute("loading");
+		if (value === "lazy" || value === "eager") return value;
+		return "auto";
+	}
+	set loading(value) {
+		this.setAttribute("loading", value);
+	}
+	get referrerPolicy() {
+		return this.getAttribute("referrerpolicy") ?? "";
+	}
+	set referrerPolicy(value) {
+		this.setAttribute("referrerpolicy", value);
+	}
+	get sizes() {
+		return this.getAttribute("sizes") ?? "";
+	}
+	set sizes(value) {
+		this.setAttribute("sizes", value);
+	}
+	get src() {
+		return this.getAttribute("src") ?? "";
+	}
+	set src(src) {
+		this.setAttribute("src", src);
+		const DEBUG = globalThis.__GJSIFY_DEBUG_IMG === true;
+		if (src.startsWith("data:")) {
+			const commaIdx = src.indexOf(",");
+			if (commaIdx === -1) {
+				this._complete = true;
+				this.dispatchEvent(new Event("error"));
+				return;
+			}
+			const meta = src.slice(5, commaIdx);
+			const data = src.slice(commaIdx + 1);
+			const isBase64 = meta.includes(";base64");
+			try {
+				let bytes;
+				if (isBase64) {
+					bytes = GLib.base64_decode(data);
+				} else {
+					bytes = new TextEncoder().encode(decodeURIComponent(data));
+				}
+				const gbytes = GLib.Bytes.new(bytes);
+				const stream = Gio.MemoryInputStream.new_from_bytes(gbytes);
+				this._pixbuf = GdkPixbuf.Pixbuf.new_from_stream(stream, null);
+				this._naturalWidth = this._pixbuf.get_width();
+				this._naturalHeight = this._pixbuf.get_height();
+				this._complete = true;
+				if (DEBUG) console.log(`[img] ok data: (${this._naturalWidth}x${this._naturalHeight})`);
+				this.dispatchEvent(new Event("load"));
+			} catch (_error) {
+				if (DEBUG) console.warn(`[img] error data:: ${_error?.message ?? _error}`);
+				this._complete = true;
+				this.dispatchEvent(new Event("error"));
+			}
+			return;
+		}
+		let filename;
+		if (src.startsWith("file://")) {
+			filename = GLib.filename_from_uri(src)[0];
+		} else if (src.startsWith("http://") || src.startsWith("https://")) {
+			this._complete = true;
+			this.dispatchEvent(new Event("error"));
+			return;
+		} else {
+			const dir = GLib.path_get_dirname(System.programInvocationName);
+			filename = GLib.build_filenamev([dir, src]);
+		}
+		try {
+			if (DEBUG) console.log(`[img] load ${filename}`);
+			this._pixbuf = GdkPixbuf.Pixbuf.new_from_file(filename);
+			this._naturalWidth = this._pixbuf.get_width();
+			this._naturalHeight = this._pixbuf.get_height();
+			this._complete = true;
+			if (DEBUG) console.log(`[img] ok ${filename} (${this._naturalWidth}x${this._naturalHeight})`);
+			this.dispatchEvent(new Event("load"));
+		} catch (_error) {
+			if (DEBUG) console.warn(`[img] error ${filename}: ${_error?.message ?? _error}`);
+			this._complete = true;
+			this.dispatchEvent(new Event("error"));
+		}
+	}
+	get srcset() {
+		return this.getAttribute("srcset") ?? "";
+	}
+	set srcset(value) {
+		this.setAttribute("srcset", value);
+	}
+	get useMap() {
+		return this.getAttribute("usemap") ?? "";
+	}
+	set useMap(value) {
+		this.setAttribute("usemap", value);
+	}
+	get height() {
+		if (this._pixbuf) {
+			return this._pixbuf.get_height();
+		}
+		const attr = this.getAttribute("height");
+		return attr !== null ? Number(attr) : 0;
+	}
+	set height(value) {
+		this.setAttribute("height", String(value));
+	}
+	get width() {
+		if (this._pixbuf) {
+			return this._pixbuf.get_width();
+		}
+		const attr = this.getAttribute("width");
+		return attr !== null ? Number(attr) : 0;
+	}
+	set width(value) {
+		this.setAttribute("width", String(value));
+	}
+	get isMap() {
+		return this.hasAttribute("ismap");
+	}
+	set isMap(value) {
+		if (value) {
+			this.setAttribute("ismap", "");
+		} else {
+			this.removeAttribute("ismap");
+		}
+	}
+	/**
+	* Decode the image. Returns a promise that resolves when the image is decoded.
+	*/
+	decode() {
+		return Promise.resolve();
+	}
+	/**
+	* Clone this node.
+	*/
+	cloneNode(deep = false) {
+		return super.cloneNode(deep);
+	}
+	/**
+	* Get the pixels of the loaded GdkPixbuf as ImageData.
+	* Always returns RGBA (4 channels) — matches standard browser ImageData behaviour
+	* and what WebGL expects for texSubImage2D with format=RGBA.
+	* JPEG and other non-alpha formats are promoted to RGBA via add_alpha().
+	*/
+	getImageData() {
+		if (!this._pixbuf) return null;
+		const rgba = this._pixbuf.get_has_alpha() ? this._pixbuf : this._pixbuf.add_alpha(false, 0, 0, 0) ?? this._pixbuf;
+		return {
+			colorSpace: "srgb",
+			data: new Uint8ClampedArray(rgba.get_pixels()),
+			height: rgba.get_height(),
+			width: rgba.get_width()
+		};
+	}
+	/**
+	* Check if this image is backed by a GdkPixbuf.
+	*/
+	isPixbuf() {
+		return !!this._pixbuf;
+	}
+	get [Symbol.toStringTag]() {
+		return "HTMLImageElement";
+	}
 };
+
+//#endregion
+export { HTMLImageElement };