@gjsify/dom-elements 0.1.8 → 0.1.9

package/lib/esm/dom-matrix.js

@@ -0,0 +1,124 @@
+class DOMMatrix {
+  constructor(init) {
+    // 2D components
+    this.a = 1;
+    this.b = 0;
+    this.c = 0;
+    this.d = 1;
+    this.e = 0;
+    this.f = 0;
+    // 3D components (column-major)
+    this.m11 = 1;
+    this.m12 = 0;
+    this.m13 = 0;
+    this.m14 = 0;
+    this.m21 = 0;
+    this.m22 = 1;
+    this.m23 = 0;
+    this.m24 = 0;
+    this.m31 = 0;
+    this.m32 = 0;
+    this.m33 = 1;
+    this.m34 = 0;
+    this.m41 = 0;
+    this.m42 = 0;
+    this.m43 = 0;
+    this.m44 = 1;
+    this.is2D = true;
+    this.isIdentity = true;
+    if (Array.isArray(init)) {
+      if (init.length === 6) {
+        this.a = this.m11 = init[0];
+        this.b = this.m12 = init[1];
+        this.c = this.m21 = init[2];
+        this.d = this.m22 = init[3];
+        this.e = this.m41 = init[4];
+        this.f = this.m42 = init[5];
+        this.is2D = true;
+      } else if (init.length === 16) {
+        this.m11 = init[0];
+        this.m12 = init[1];
+        this.m13 = init[2];
+        this.m14 = init[3];
+        this.m21 = init[4];
+        this.m22 = init[5];
+        this.m23 = init[6];
+        this.m24 = init[7];
+        this.m31 = init[8];
+        this.m32 = init[9];
+        this.m33 = init[10];
+        this.m34 = init[11];
+        this.m41 = init[12];
+        this.m42 = init[13];
+        this.m43 = init[14];
+        this.m44 = init[15];
+        this.a = this.m11;
+        this.b = this.m12;
+        this.c = this.m21;
+        this.d = this.m22;
+        this.e = this.m41;
+        this.f = this.m42;
+        this.is2D = false;
+      }
+      this.isIdentity = this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1 && this.e === 0 && this.f === 0;
+    }
+  }
+  /**
+   * Multiply this 2D matrix by another 2D matrix and return a new matrix.
+   * [a c e] [a' c' e']   [a*a'+c*b'  a*c'+c*d'  a*e'+c*f'+e]
+   * [b d f] [b' d' f'] = [b*a'+d*b'  b*c'+d*d'  b*e'+d*f'+f]
+   * [0 0 1] [0  0  1 ]   [0          0          1           ]
+   */
+  multiply(other) {
+    const a = this.a * other.a + this.c * other.b;
+    const b = this.b * other.a + this.d * other.b;
+    const c = this.a * other.c + this.c * other.d;
+    const d = this.b * other.c + this.d * other.d;
+    const e = this.a * other.e + this.c * other.f + this.e;
+    const f = this.b * other.e + this.d * other.f + this.f;
+    return new DOMMatrix([a, b, c, d, e, f]);
+  }
+  /** In-place multiply; returns this. */
+  multiplySelf(other) {
+    const result = this.multiply(other);
+    this.a = result.a;
+    this.b = result.b;
+    this.c = result.c;
+    this.d = result.d;
+    this.e = result.e;
+    this.f = result.f;
+    this.m11 = this.a;
+    this.m12 = this.b;
+    this.m21 = this.c;
+    this.m22 = this.d;
+    this.m41 = this.e;
+    this.m42 = this.f;
+    this.isIdentity = false;
+    return this;
+  }
+  /** 2D inverse. Throws if non-invertible (det === 0). */
+  inverse() {
+    const det = this.a * this.d - this.b * this.c;
+    if (det === 0) return new DOMMatrix([1, 0, 0, 1, 0, 0]);
+    const invDet = 1 / det;
+    return new DOMMatrix([
+      this.d * invDet,
+      -this.b * invDet,
+      -this.c * invDet,
+      this.a * invDet,
+      (this.c * this.f - this.d * this.e) * invDet,
+      (this.b * this.e - this.a * this.f) * invDet
+    ]);
+  }
+  translate(tx = 0, ty = 0) {
+    return this.multiply({ a: 1, b: 0, c: 0, d: 1, e: tx, f: ty });
+  }
+  scale(sx = 1, sy = sx) {
+    return this.multiply({ a: sx, b: 0, c: 0, d: sy, e: 0, f: 0 });
+  }
+}
+const DOMMatrixReadOnly = DOMMatrix;
+export {
+  DOMMatrix,
+  DOMMatrixReadOnly
+};

package/lib/esm/font-face.js

@@ -0,0 +1,90 @@
+class FontFace {
+  constructor(family, source, _descriptors) {
+    this.status = "unloaded";
+    this.display = "auto";
+    this.style = "normal";
+    this.weight = "normal";
+    this.stretch = "normal";
+    this.unicodeRange = "U+0-10FFFF";
+    this.variant = "normal";
+    this.featureSettings = "normal";
+    this.family = family;
+    this.source = typeof source === "string" ? source : "[binary]";
+    this.loaded = Promise.resolve(this);
+  }
+  // Parses: url(file:///path), url("file:///path"), url('file:///path')
+  _extractFilePath() {
+    const m = this.source.match(/url\s*\(\s*["']?(file:\/\/\/[^"')]+)["']?\s*\)/i);
+    if (!m) return null;
+    return m[1].replace(/^file:\/\//, "");
+  }
+  async load() {
+    this.status = "loading";
+    const filePath = this._extractFilePath();
+    if (filePath) {
+      try {
+        const { default: PangoCairo } = await import("gi://PangoCairo?version=1.0");
+        PangoCairo.font_map_get_default().add_font_file(filePath);
+      } catch {
+      }
+    }
+    this.status = "loaded";
+    return this;
+  }
+}
+class FontFaceSet {
+  constructor() {
+    this.status = "loaded";
+    this.ready = Promise.resolve(this);
+    this._faces = /* @__PURE__ */ new Set();
+  }
+  addEventListener(_type, _listener) {
+  }
+  removeEventListener(_type, _listener) {
+  }
+  dispatchEvent(_event) {
+    return true;
+  }
+  add(face) {
+    this._faces.add(face);
+    return this;
+  }
+  delete(face) {
+    return this._faces.delete(face);
+  }
+  clear() {
+    this._faces.clear();
+  }
+  has(face) {
+    return this._faces.has(face);
+  }
+  check(_font, _text) {
+    return false;
+  }
+  load(_font, _text) {
+    return Promise.resolve([]);
+  }
+  forEach(callback) {
+    this._faces.forEach((f) => callback(f, f, this));
+  }
+  values() {
+    return this._faces.values();
+  }
+  keys() {
+    return this._faces.values();
+  }
+  entries() {
+    const faces = Array.from(this._faces);
+    return faces.map((f) => [f, f])[Symbol.iterator]();
+  }
+  [Symbol.iterator]() {
+    return this._faces[Symbol.iterator]();
+  }
+  get size() {
+    return this._faces.size;
+  }
+}
+export {
+  FontFace,
+  FontFaceSet
+};

package/lib/esm/html-element.js

@@ -3,7 +3,39 @@ import { Element } from "./element.js";
 import * as PS from "./property-symbol.js";
 class CSSStyleDeclaration {
   constructor() {
-    this.cssText = "";
+    this._cssText = "";
+  }
+  /** Setting cssText parses individual declarations and stores them as camelCase properties,
+   *  matching browser behavior for feature-detection checks like Excalibur's rgbaSupport. */
+  get cssText() {
+    return this._cssText;
+  }
+  set cssText(value) {
+    this._cssText = value;
+    for (const decl of value.split(";")) {
+      const colon = decl.indexOf(":");
+      if (colon === -1) continue;
+      const prop = decl.slice(0, colon).trim();
+      const val = decl.slice(colon + 1).trim();
+      if (!prop) continue;
+      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      this[camel] = val;
+    }
+  }
+  setProperty(property, value, _priority) {
+    this[property] = value;
+  }
+  getPropertyValue(property) {
+    const v = this[property];
+    return typeof v === "string" ? v : "";
+  }
+  removeProperty(property) {
+    const v = this[property];
+    delete this[property];
+    return typeof v === "string" ? v : "";
+  }
+  getPropertyPriority(_property) {
+    return "";
   }
 }
 class HTMLElement extends Element {
@@ -12,6 +44,38 @@ class HTMLElement extends Element {
     // -- Style stub (no layout engine — assignments are no-ops) --
     this.style = new CSSStyleDeclaration();
   }
+  // -- dataset: Proxy-backed DOMStringMap over data-* attributes --
+  // Converts `data-original-src` ↔ `originalSrc` (camelCase). Used by
+  // Excalibur's ImageSource which sets data-original-src on images for
+  // debugging and TextureLoader.checkImageSizeSupportedAndLog.
+  get dataset() {
+    const el = this;
+    return new Proxy({}, {
+      get(_target, prop) {
+        if (typeof prop !== "string") return void 0;
+        const attr = "data-" + prop.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+        const value = el.getAttribute(attr);
+        return value ?? void 0;
+      },
+      set(_target, prop, value) {
+        if (typeof prop !== "string") return false;
+        const attr = "data-" + prop.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+        el.setAttribute(attr, String(value));
+        return true;
+      },
+      deleteProperty(_target, prop) {
+        if (typeof prop !== "string") return false;
+        const attr = "data-" + prop.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+        el.removeAttribute(attr);
+        return true;
+      },
+      has(_target, prop) {
+        if (typeof prop !== "string") return false;
+        const attr = "data-" + prop.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+        return el.hasAttribute(attr);
+      }
+    });
+  }
   // -- Attribute-backed string properties --
   get title() {
     return this.getAttribute("title") ?? "";

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

@@ -1,4 +1,5 @@
 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";
@@ -82,10 +83,43 @@ class HTMLImageElement extends HTMLElement {
   }
   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://") || src.startsWith("data:")) {
+    } else if (src.startsWith("http://") || src.startsWith("https://")) {
       this._complete = true;
       this.dispatchEvent(new Event("error"));
       return;
@@ -94,12 +128,15 @@ class HTMLImageElement extends HTMLElement {
       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"));
     }

package/lib/esm/index.js

@@ -19,20 +19,29 @@ import { IntersectionObserver } from "./intersection-observer.js";
 import { NodeType } from "./node-type.js";
 import { NamespaceURI } from "./namespace-uri.js";
 import * as PropertySymbol from "./property-symbol.js";
+import { FontFace, FontFaceSet } from "./font-face.js";
+import { MediaQueryList, matchMedia } from "./match-media.js";
+import { location } from "./location-stub.js";
+import { DOMMatrix, DOMMatrixReadOnly } from "./dom-matrix.js";
 export {
   Attr,
   CSSStyleDeclaration,
   CharacterData,
   Comment,
+  DOMMatrix,
+  DOMMatrixReadOnly,
   DOMTokenList,
   Document,
   DocumentFragment,
   Element,
+  FontFace,
+  FontFaceSet,
   HTMLCanvasElement,
   HTMLElement,
   HTMLImageElement,
   Image,
   IntersectionObserver,
+  MediaQueryList,
   MutationObserver,
   NamedNodeMap,
   NamespaceURI,
@@ -42,5 +51,7 @@ export {
   PropertySymbol,
   ResizeObserver,
   Text,
-  document
+  document,
+  location,
+  matchMedia
 };

package/lib/esm/location-stub.js

@@ -0,0 +1,25 @@
+const location = {
+  href: "file://",
+  origin: "file://",
+  protocol: "file:",
+  host: "",
+  hostname: "",
+  port: "",
+  pathname: "/",
+  search: "",
+  hash: "",
+  assign(_url) {
+  },
+  replace(_url) {
+  },
+  reload() {
+  },
+  toString() {
+    return this.href;
+  },
+  ancestorOrigins: { length: 0, item: () => null, contains: () => false, [Symbol.iterator]: function* () {
+  } }
+};
+export {
+  location
+};

package/lib/esm/match-media.js

@@ -0,0 +1,22 @@
+import { EventTarget } from "@gjsify/dom-events";
+class MediaQueryList extends EventTarget {
+  constructor(query) {
+    super();
+    this.onchange = null;
+    this.media = query;
+    this.matches = false;
+  }
+  /** @deprecated Use addEventListener('change', ...) */
+  addListener(_listener) {
+  }
+  /** @deprecated Use removeEventListener('change', ...) */
+  removeListener(_listener) {
+  }
+}
+function matchMedia(query) {
+  return new MediaQueryList(query);
+}
+export {
+  MediaQueryList,
+  matchMedia
+};

package/lib/esm/register/canvas.js

@@ -0,0 +1,16 @@
+import { CanvasRenderingContext2D } from "@gjsify/canvas2d-core";
+import { HTMLCanvasElement } from "../html-canvas-element.js";
+import { DOMMatrix, DOMMatrixReadOnly } from "../dom-matrix.js";
+import { defineGlobal } from "./helpers.js";
+defineGlobal("HTMLCanvasElement", HTMLCanvasElement);
+defineGlobal("CanvasRenderingContext2D", CanvasRenderingContext2D);
+defineGlobal("DOMMatrix", DOMMatrix);
+defineGlobal("DOMMatrixReadOnly", DOMMatrixReadOnly);
+const CANVAS2D_KEY = /* @__PURE__ */ Symbol.for("gjsify_canvas2d_context");
+HTMLCanvasElement.registerContextFactory("2d", (canvas, options) => {
+  const existing = canvas[CANVAS2D_KEY];
+  if (existing) return existing;
+  const ctx = new CanvasRenderingContext2D(canvas, options);
+  canvas[CANVAS2D_KEY] = ctx;
+  return ctx;
+});

package/lib/esm/register/document.js

@@ -0,0 +1,36 @@
+import { EventTarget as OurEventTarget } from "@gjsify/dom-events";
+import { Comment } from "../comment.js";
+import { document } from "../document.js";
+import { DocumentFragment } from "../document-fragment.js";
+import { DOMTokenList } from "../dom-token-list.js";
+import { Text } from "../text.js";
+import { defineGlobal, defineGlobalIfMissing } from "./helpers.js";
+defineGlobal("Text", Text);
+defineGlobal("Comment", Comment);
+defineGlobal("DocumentFragment", DocumentFragment);
+defineGlobal("DOMTokenList", DOMTokenList);
+defineGlobal("document", document);
+defineGlobalIfMissing("self", globalThis);
+class Window {
+}
+defineGlobalIfMissing("Window", Window);
+defineGlobalIfMissing("window", globalThis);
+defineGlobalIfMissing("focus", () => {
+});
+defineGlobalIfMissing("blur", () => {
+});
+if (typeof globalThis.addEventListener !== "function") {
+  const _globalEventTarget = new OurEventTarget();
+  globalThis.__gjsify_globalEventTarget = _globalEventTarget;
+  globalThis.addEventListener = (type, listener, options) => _globalEventTarget.addEventListener(type, listener, options);
+  globalThis.removeEventListener = (type, listener, options) => _globalEventTarget.removeEventListener(type, listener, options);
+  globalThis.dispatchEvent = (event) => _globalEventTarget.dispatchEvent(event);
+}
+defineGlobalIfMissing("devicePixelRatio", 1);
+defineGlobalIfMissing("alert", (...args) => console.error("alert:", ...args));
+if (typeof globalThis.top === "undefined") {
+  Object.defineProperty(globalThis, "top", {
+    get: () => globalThis,
+    configurable: true
+  });
+}

package/lib/esm/register/font-face.js

@@ -0,0 +1,14 @@
+import { FontFace, FontFaceSet } from "../font-face.js";
+import { defineGlobalIfMissing } from "./helpers.js";
+defineGlobalIfMissing("FontFace", FontFace);
+if (typeof globalThis.FontFace === "undefined") {
+  globalThis.FontFace = FontFace;
+}
+const _doc = globalThis.document;
+if (_doc && typeof _doc.fonts === "undefined") {
+  Object.defineProperty(_doc, "fonts", {
+    value: new FontFaceSet(),
+    configurable: true,
+    writable: true
+  });
+}

package/lib/esm/register/helpers.js

@@ -0,0 +1,16 @@
+function defineGlobal(name, value) {
+  Object.defineProperty(globalThis, name, {
+    value,
+    writable: true,
+    configurable: true
+  });
+}
+function defineGlobalIfMissing(name, value) {
+  if (typeof globalThis[name] === "undefined") {
+    defineGlobal(name, value);
+  }
+}
+export {
+  defineGlobal,
+  defineGlobalIfMissing
+};

package/lib/esm/register/image.js

@@ -0,0 +1,5 @@
+import { HTMLImageElement } from "../html-image-element.js";
+import { Image } from "../image.js";
+import { defineGlobal } from "./helpers.js";
+defineGlobal("HTMLImageElement", HTMLImageElement);
+defineGlobal("Image", Image);

package/lib/esm/register/location.js

@@ -0,0 +1,3 @@
+import { location } from "../location-stub.js";
+import { defineGlobalIfMissing } from "./helpers.js";
+defineGlobalIfMissing("location", location);

package/lib/esm/register/match-media.js

@@ -0,0 +1,3 @@
+import { matchMedia } from "../match-media.js";
+import { defineGlobalIfMissing } from "./helpers.js";
+defineGlobalIfMissing("matchMedia", matchMedia);

package/lib/esm/register/navigator.js

@@ -0,0 +1,3 @@
+if (typeof globalThis.navigator === "undefined") {
+  globalThis.navigator = {};
+}

package/lib/esm/register/observers.js

@@ -0,0 +1,7 @@
+import { IntersectionObserver } from "../intersection-observer.js";
+import { MutationObserver } from "../mutation-observer.js";
+import { ResizeObserver } from "../resize-observer.js";
+import { defineGlobal } from "./helpers.js";
+defineGlobal("MutationObserver", MutationObserver);
+defineGlobal("ResizeObserver", ResizeObserver);
+defineGlobal("IntersectionObserver", IntersectionObserver);

package/lib/esm/register.js

@@ -1,47 +1,8 @@
-import { CanvasRenderingContext2D } from "@gjsify/canvas2d-core";
-import { Comment } from "./comment.js";
-import { document } from "./document.js";
-import { DocumentFragment } from "./document-fragment.js";
-import { DOMTokenList } from "./dom-token-list.js";
-import { HTMLCanvasElement } from "./html-canvas-element.js";
-import { HTMLImageElement } from "./html-image-element.js";
-import { Image } from "./image.js";
-import { IntersectionObserver } from "./intersection-observer.js";
-import { MutationObserver } from "./mutation-observer.js";
-import { ResizeObserver } from "./resize-observer.js";
-import { Text } from "./text.js";
-function defineGlobal(name, value) {
-  Object.defineProperty(globalThis, name, {
-    value,
-    writable: true,
-    configurable: true
-  });
-}
-function defineGlobalIfMissing(name, value) {
-  if (typeof globalThis[name] === "undefined") {
-    defineGlobal(name, value);
-  }
-}
-defineGlobal("Text", Text);
-defineGlobal("Comment", Comment);
-defineGlobal("DocumentFragment", DocumentFragment);
-defineGlobal("DOMTokenList", DOMTokenList);
-defineGlobal("HTMLCanvasElement", HTMLCanvasElement);
-defineGlobal("HTMLImageElement", HTMLImageElement);
-defineGlobal("Image", Image);
-defineGlobal("document", document);
-defineGlobal("MutationObserver", MutationObserver);
-defineGlobal("ResizeObserver", ResizeObserver);
-defineGlobal("IntersectionObserver", IntersectionObserver);
-defineGlobal("CanvasRenderingContext2D", CanvasRenderingContext2D);
-const CANVAS2D_KEY = /* @__PURE__ */ Symbol.for("gjsify_canvas2d_context");
-HTMLCanvasElement.registerContextFactory("2d", (canvas, options) => {
-  const existing = canvas[CANVAS2D_KEY];
-  if (existing) return existing;
-  const ctx = new CanvasRenderingContext2D(canvas, options);
-  canvas[CANVAS2D_KEY] = ctx;
-  return ctx;
-});
-defineGlobalIfMissing("self", globalThis);
-defineGlobalIfMissing("devicePixelRatio", 1);
-defineGlobalIfMissing("alert", (...args) => console.error("alert:", ...args));
+import "./register/document.js";
+import "./register/canvas.js";
+import "./register/image.js";
+import "./register/observers.js";
+import "./register/font-face.js";
+import "./register/match-media.js";
+import "./register/location.js";
+import "./register/navigator.js";