@gjsify/dom-elements 0.1.0

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

@@ -0,0 +1,65 @@
+import { HTMLElement } from "./html-element.js";
+class HTMLCanvasElement extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    // WebGL context event handlers
+    this.oncontextlost = null;
+    this.oncontextrestored = null;
+    this.onwebglcontextcreationerror = null;
+    this.onwebglcontextlost = null;
+    this.onwebglcontextrestored = null;
+  }
+  static {
+    // Context factory registry — packages register their context types here.
+    // e.g. @gjsify/canvas2d registers '2d', @gjsify/webgl registers 'webgl'.
+    this._contextFactories = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Register a rendering context factory for a given context type.
+   * Called by packages like @gjsify/canvas2d and @gjsify/webgl to plug in their implementations.
+   */
+  static registerContextFactory(contextId, factory) {
+    HTMLCanvasElement._contextFactories.set(contextId, factory);
+  }
+  /** Returns the width of the canvas element. Default: 300. */
+  get width() {
+    const w = this.getAttribute("width");
+    return w !== null ? Number(w) : 300;
+  }
+  set width(value) {
+    this.setAttribute("width", String(value));
+  }
+  /** Returns the height of the canvas element. Default: 150. */
+  get height() {
+    const h = this.getAttribute("height");
+    return h !== null ? Number(h) : 150;
+  }
+  set height(value) {
+    this.setAttribute("height", String(value));
+  }
+  /**
+   * Returns a rendering context.
+   * Checks the static context factory registry for a matching factory.
+   * Subclasses (e.g. @gjsify/webgl) may override and fall through via super.getContext().
+   */
+  getContext(contextId, options) {
+    const factory = HTMLCanvasElement._contextFactories.get(contextId);
+    if (factory) return factory(this, options);
+    return null;
+  }
+  /** Returns a data URL representing the canvas image. Stub — returns empty string. */
+  toDataURL(_type, _quality) {
+    return "";
+  }
+  /** Converts the canvas to a Blob and passes it to the callback. Stub — returns empty Blob. */
+  toBlob(callback, _type, _quality) {
+    callback(new Blob([]));
+  }
+  /** Returns a MediaStream capturing the canvas. Stub — returns empty object. */
+  captureStream(_frameRequestRate) {
+    return {};
+  }
+}
+export {
+  HTMLCanvasElement
+};

package/lib/esm/html-element.js

@@ -0,0 +1,346 @@
+import { Event } from "@gjsify/dom-events";
+import { Element } from "./element.js";
+import * as PS from "./property-symbol.js";
+class CSSStyleDeclaration {
+  constructor() {
+    this.cssText = "";
+  }
+}
+class HTMLElement extends Element {
+  constructor() {
+    super(...arguments);
+    // -- Style stub (no layout engine — assignments are no-ops) --
+    this.style = new CSSStyleDeclaration();
+  }
+  // -- Attribute-backed string properties --
+  get title() {
+    return this.getAttribute("title") ?? "";
+  }
+  set title(value) {
+    this.setAttribute("title", value);
+  }
+  get lang() {
+    return this.getAttribute("lang") ?? "";
+  }
+  set lang(value) {
+    this.setAttribute("lang", value);
+  }
+  get dir() {
+    return this.getAttribute("dir") ?? "";
+  }
+  set dir(value) {
+    this.setAttribute("dir", value);
+  }
+  get accessKey() {
+    return this.getAttribute("accesskey") ?? "";
+  }
+  set accessKey(value) {
+    this.setAttribute("accesskey", value);
+  }
+  get accessKeyLabel() {
+    return this.getAttribute("accesskey") ?? "";
+  }
+  // -- Attribute-backed boolean properties --
+  get hidden() {
+    return this.hasAttribute("hidden");
+  }
+  set hidden(value) {
+    if (value) {
+      this.setAttribute("hidden", "");
+    } else {
+      this.removeAttribute("hidden");
+    }
+  }
+  get draggable() {
+    return this.getAttribute("draggable") === "true";
+  }
+  set draggable(value) {
+    this.setAttribute("draggable", String(value));
+  }
+  get spellcheck() {
+    const attr = this.getAttribute("spellcheck");
+    if (attr === "false") return false;
+    return attr !== null;
+  }
+  set spellcheck(value) {
+    this.setAttribute("spellcheck", String(value));
+  }
+  get translate() {
+    const attr = this.getAttribute("translate");
+    return attr !== "no";
+  }
+  set translate(value) {
+    this.setAttribute("translate", value ? "yes" : "no");
+  }
+  // -- Attribute-backed numeric properties --
+  get tabIndex() {
+    const attr = this.getAttribute("tabindex");
+    return attr !== null ? Number(attr) : -1;
+  }
+  set tabIndex(value) {
+    this.setAttribute("tabindex", String(value));
+  }
+  // -- Content editable --
+  get contentEditable() {
+    const attr = this.getAttribute("contenteditable");
+    if (attr === "" || attr === "true") return "true";
+    if (attr === "false") return "false";
+    return "inherit";
+  }
+  set contentEditable(value) {
+    if (value === "inherit") {
+      this.removeAttribute("contenteditable");
+    } else {
+      this.setAttribute("contenteditable", value);
+    }
+  }
+  get isContentEditable() {
+    return this.contentEditable === "true";
+  }
+  // -- Layout stubs (return 0 — no layout engine) --
+  get offsetHeight() {
+    return 0;
+  }
+  get offsetWidth() {
+    return 0;
+  }
+  get offsetLeft() {
+    return 0;
+  }
+  get offsetTop() {
+    return 0;
+  }
+  get offsetParent() {
+    return null;
+  }
+  get clientHeight() {
+    return 0;
+  }
+  get clientWidth() {
+    return 0;
+  }
+  get clientLeft() {
+    return 0;
+  }
+  get clientTop() {
+    return 0;
+  }
+  get scrollHeight() {
+    return 0;
+  }
+  get scrollWidth() {
+    return 0;
+  }
+  get scrollTop() {
+    return 0;
+  }
+  set scrollTop(_value) {
+  }
+  get scrollLeft() {
+    return 0;
+  }
+  set scrollLeft(_value) {
+  }
+  // -- Interaction methods --
+  click() {
+    this.dispatchEvent(new Event("click", { bubbles: true, cancelable: true }));
+  }
+  blur() {
+    this.dispatchEvent(new Event("blur"));
+  }
+  focus() {
+    this.dispatchEvent(new Event("focus"));
+  }
+  // -- on* event handler properties --
+  // Following happy-dom pattern: stored in propertyEventListeners Map,
+  // dispatched automatically by Element.dispatchEvent override
+  get onclick() {
+    return this[PS.propertyEventListeners].get("onclick") ?? null;
+  }
+  set onclick(value) {
+    this[PS.propertyEventListeners].set("onclick", value);
+  }
+  get ondblclick() {
+    return this[PS.propertyEventListeners].get("ondblclick") ?? null;
+  }
+  set ondblclick(value) {
+    this[PS.propertyEventListeners].set("ondblclick", value);
+  }
+  get onload() {
+    return this[PS.propertyEventListeners].get("onload") ?? null;
+  }
+  set onload(value) {
+    this[PS.propertyEventListeners].set("onload", value);
+  }
+  get onerror() {
+    return this[PS.propertyEventListeners].get("onerror") ?? null;
+  }
+  set onerror(value) {
+    this[PS.propertyEventListeners].set("onerror", value);
+  }
+  get onabort() {
+    return this[PS.propertyEventListeners].get("onabort") ?? null;
+  }
+  set onabort(value) {
+    this[PS.propertyEventListeners].set("onabort", value);
+  }
+  get onfocus() {
+    return this[PS.propertyEventListeners].get("onfocus") ?? null;
+  }
+  set onfocus(value) {
+    this[PS.propertyEventListeners].set("onfocus", value);
+  }
+  get onblur() {
+    return this[PS.propertyEventListeners].get("onblur") ?? null;
+  }
+  set onblur(value) {
+    this[PS.propertyEventListeners].set("onblur", value);
+  }
+  get onchange() {
+    return this[PS.propertyEventListeners].get("onchange") ?? null;
+  }
+  set onchange(value) {
+    this[PS.propertyEventListeners].set("onchange", value);
+  }
+  get oninput() {
+    return this[PS.propertyEventListeners].get("oninput") ?? null;
+  }
+  set oninput(value) {
+    this[PS.propertyEventListeners].set("oninput", value);
+  }
+  get onsubmit() {
+    return this[PS.propertyEventListeners].get("onsubmit") ?? null;
+  }
+  set onsubmit(value) {
+    this[PS.propertyEventListeners].set("onsubmit", value);
+  }
+  get onreset() {
+    return this[PS.propertyEventListeners].get("onreset") ?? null;
+  }
+  set onreset(value) {
+    this[PS.propertyEventListeners].set("onreset", value);
+  }
+  get onscroll() {
+    return this[PS.propertyEventListeners].get("onscroll") ?? null;
+  }
+  set onscroll(value) {
+    this[PS.propertyEventListeners].set("onscroll", value);
+  }
+  get onresize() {
+    return this[PS.propertyEventListeners].get("onresize") ?? null;
+  }
+  set onresize(value) {
+    this[PS.propertyEventListeners].set("onresize", value);
+  }
+  // Mouse events
+  get onmousedown() {
+    return this[PS.propertyEventListeners].get("onmousedown") ?? null;
+  }
+  set onmousedown(value) {
+    this[PS.propertyEventListeners].set("onmousedown", value);
+  }
+  get onmouseup() {
+    return this[PS.propertyEventListeners].get("onmouseup") ?? null;
+  }
+  set onmouseup(value) {
+    this[PS.propertyEventListeners].set("onmouseup", value);
+  }
+  get onmousemove() {
+    return this[PS.propertyEventListeners].get("onmousemove") ?? null;
+  }
+  set onmousemove(value) {
+    this[PS.propertyEventListeners].set("onmousemove", value);
+  }
+  get onmouseover() {
+    return this[PS.propertyEventListeners].get("onmouseover") ?? null;
+  }
+  set onmouseover(value) {
+    this[PS.propertyEventListeners].set("onmouseover", value);
+  }
+  get onmouseout() {
+    return this[PS.propertyEventListeners].get("onmouseout") ?? null;
+  }
+  set onmouseout(value) {
+    this[PS.propertyEventListeners].set("onmouseout", value);
+  }
+  get onmouseenter() {
+    return this[PS.propertyEventListeners].get("onmouseenter") ?? null;
+  }
+  set onmouseenter(value) {
+    this[PS.propertyEventListeners].set("onmouseenter", value);
+  }
+  get onmouseleave() {
+    return this[PS.propertyEventListeners].get("onmouseleave") ?? null;
+  }
+  set onmouseleave(value) {
+    this[PS.propertyEventListeners].set("onmouseleave", value);
+  }
+  get oncontextmenu() {
+    return this[PS.propertyEventListeners].get("oncontextmenu") ?? null;
+  }
+  set oncontextmenu(value) {
+    this[PS.propertyEventListeners].set("oncontextmenu", value);
+  }
+  // Keyboard events
+  get onkeydown() {
+    return this[PS.propertyEventListeners].get("onkeydown") ?? null;
+  }
+  set onkeydown(value) {
+    this[PS.propertyEventListeners].set("onkeydown", value);
+  }
+  get onkeyup() {
+    return this[PS.propertyEventListeners].get("onkeyup") ?? null;
+  }
+  set onkeyup(value) {
+    this[PS.propertyEventListeners].set("onkeyup", value);
+  }
+  // Touch events
+  get ontouchstart() {
+    return this[PS.propertyEventListeners].get("ontouchstart") ?? null;
+  }
+  set ontouchstart(value) {
+    this[PS.propertyEventListeners].set("ontouchstart", value);
+  }
+  get ontouchend() {
+    return this[PS.propertyEventListeners].get("ontouchend") ?? null;
+  }
+  set ontouchend(value) {
+    this[PS.propertyEventListeners].set("ontouchend", value);
+  }
+  get ontouchmove() {
+    return this[PS.propertyEventListeners].get("ontouchmove") ?? null;
+  }
+  set ontouchmove(value) {
+    this[PS.propertyEventListeners].set("ontouchmove", value);
+  }
+  // Pointer events
+  get onpointerdown() {
+    return this[PS.propertyEventListeners].get("onpointerdown") ?? null;
+  }
+  set onpointerdown(value) {
+    this[PS.propertyEventListeners].set("onpointerdown", value);
+  }
+  get onpointerup() {
+    return this[PS.propertyEventListeners].get("onpointerup") ?? null;
+  }
+  set onpointerup(value) {
+    this[PS.propertyEventListeners].set("onpointerup", value);
+  }
+  get onpointermove() {
+    return this[PS.propertyEventListeners].get("onpointermove") ?? null;
+  }
+  set onpointermove(value) {
+    this[PS.propertyEventListeners].set("onpointermove", value);
+  }
+  // -- Clone --
+  cloneNode(deep = false) {
+    return super.cloneNode(deep);
+  }
+  get [Symbol.toStringTag]() {
+    return "HTMLElement";
+  }
+}
+export {
+  CSSStyleDeclaration,
+  HTMLElement
+};

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

@@ -0,0 +1,184 @@
+import GLib from "@girs/glib-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 dir = GLib.path_get_dirname(System.programInvocationName);
+    const filename = GLib.build_filenamev([dir, src]);
+    try {
+      this._pixbuf = GdkPixbuf.Pixbuf.new_from_file(filename);
+      this._naturalWidth = this._pixbuf.get_width();
+      this._naturalHeight = this._pixbuf.get_height();
+      this._complete = true;
+      this.dispatchEvent(new Event("load"));
+    } catch (_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
+};

package/lib/esm/image.js

@@ -0,0 +1,23 @@
+import { HTMLImageElement } from "./html-image-element.js";
+class Image extends HTMLImageElement {
+  /**
+   * Constructor.
+   *
+   * @param [width] Width.
+   * @param [height] Height.
+   */
+  constructor(width = null, height = null) {
+    super();
+    if (width !== null) {
+      this.width = width;
+    }
+    if (height !== null) {
+      this.height = height;
+    }
+  }
+}
+export {
+  HTMLImageElement,
+  Image,
+  Image as default
+};