onejs-core 3.0.3 → 3.0.4

package/dist/dom/document.d.ts

@@ -0,0 +1,30 @@
+/// <reference path="../../definitions/modules.d.ts" />
+import { DomWrapper } from "./dom";
+import { EventBase } from "UnityEngine/UIElements";
+interface ElementCreationOptions {
+    is?: string;
+}
+export declare class DocumentWrapper {
+    #private;
+    get _doc(): CS.OneJS.Dom.Document;
+    /**
+     * The body/root element of the document. Will be null for Editor documents.
+     */
+    get body(): DomWrapper | null;
+    constructor(doc: CS.OneJS.Dom.Document);
+    addRuntimeUSS(uss: string): void;
+    clearRuntimeStyleSheets(): void;
+    createElement(tagName: string, options?: ElementCreationOptions): DomWrapper;
+    createElementNS(ns: string, tagName: string, options?: ElementCreationOptions): DomWrapper;
+    createTextNode(text: string): DomWrapper;
+    createDocumentFragment(): DomWrapper;
+    getElementById(id: string): DomWrapper;
+    querySelectorAll(selector: string): DomWrapper[];
+    elementFromPoint(x: number, y: number): DomWrapper | null;
+    elementsFromPoint(x: number, y: number): DomWrapper[];
+    addEventListener(type: string, listener: (event: EventBase) => void, options?: boolean | {
+        once?: boolean;
+    }): void;
+    removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean): void;
+}
+export {};

package/dist/dom/document.js

@@ -0,0 +1,89 @@
+import { Vector2 } from "UnityEngine";
+import { DomWrapper } from "./dom";
+export class DocumentWrapper {
+    get _doc() { return this.#doc; }
+    #doc;
+    #body;
+    /**
+     * The body/root element of the document. Will be null for Editor documents.
+     */
+    get body() { return this.#body; }
+    constructor(doc) {
+        this.#doc = doc;
+        this.#body = doc.body ? new DomWrapper(doc.body) : null;
+    }
+    addRuntimeUSS(uss) {
+        this.#doc.addRuntimeUSS(uss);
+    }
+    clearRuntimeStyleSheets() {
+        this.#doc.clearRuntimeStyleSheets();
+    }
+    // MARK: Create
+    createElement(tagName, options) {
+        return new DomWrapper(this.#doc.createElement(tagName));
+    }
+    createElementNS(ns, tagName, options) {
+        tagName = typeof tagName === 'string' ? tagName : 'div';
+        return new DomWrapper(this.#doc.createElement(tagName));
+    }
+    createTextNode(text) {
+        return new DomWrapper(this.#doc.createTextNode(text));
+    }
+    createDocumentFragment() {
+        return this.createElement("div");
+    }
+    // MARK: Query
+    getElementById(id) {
+        return new DomWrapper(this.#doc.getElementById(id));
+    }
+    querySelectorAll(selector) {
+        let doms = this.#doc.querySelectorAll(selector);
+        let res = [];
+        for (let i = 0; i < doms.Length; i++) {
+            res.push(new DomWrapper(doms.get_Item(i)));
+        }
+        return res;
+    }
+    elementFromPoint(x, y) {
+        const root = this.body;
+        if (!root)
+            return null;
+        const hitTest = (node) => {
+            if (!node.ve.worldBound.Contains(new Vector2(x, y)))
+                return null;
+            // later siblings are painted on top → scan from back to front
+            for (let i = node.childNodes.length - 1; i >= 0; i--) {
+                const hit = hitTest(node.childNodes[i]);
+                if (hit)
+                    return hit;
+            }
+            return node;
+        };
+        return hitTest(root);
+    }
+    elementsFromPoint(x, y) {
+        const root = this.body;
+        if (!root)
+            return [];
+        const hits = [];
+        const collect = (node) => {
+            if (!node.ve.worldBound.Contains(new Vector2(x, y)))
+                return;
+            // visit children first, from front to back (last child is top‑most)
+            for (let i = node.childNodes.length - 1; i >= 0; i--) {
+                collect(node.childNodes[i]);
+            }
+            // add the current node itself
+            hits.push(node);
+        };
+        collect(root);
+        return hits; // ordered front‑to‑back (top‑most first)
+    }
+    // MARK: Event
+    addEventListener(type, listener, options) {
+        this.body?.addEventListener(type, listener, options);
+    }
+    removeEventListener(type, listener, useCapture) {
+        this.body?.removeEventListener(type, listener, useCapture);
+    }
+}

package/dist/dom/dom-style.d.ts

@@ -0,0 +1,9 @@
+export declare class DomStyleWrapper implements CS.OneJS.Dom.DomStyle {
+    _domStyle: CS.OneJS.Dom.DomStyle;
+    constructor(domStyle: CS.OneJS.Dom.DomStyle);
+    getProperty(name: string): any;
+    setProperty(name: string, value: any): void;
+}
+export interface DomStyleWrapper extends CS.OneJS.Dom.DomStyle {
+    [key: string | symbol]: any;
+}

package/dist/dom/dom-style.js

@@ -0,0 +1,27 @@
+export class DomStyleWrapper {
+    _domStyle; // Making this public so that Proxy's setProperty can access it
+    constructor(domStyle) {
+        this._domStyle = domStyle;
+        return new Proxy(this, {
+            set(target, prop, value, receiver) {
+                if (typeof prop === 'string' && !(prop in target)) {
+                    target.setProperty(prop, value);
+                    return true;
+                }
+                return Reflect.set(target, prop, value, receiver);
+            },
+            get(target, prop, receiver) {
+                if (typeof prop === 'string' && !(prop in target)) {
+                    return target.getProperty(prop);
+                }
+                return Reflect.get(target, prop, receiver);
+            }
+        });
+    }
+    getProperty(name) {
+        return this._domStyle.getProperty(name);
+    }
+    setProperty(name, value) {
+        this._domStyle.setProperty(name, value);
+    }
+}

package/dist/dom/dom.d.ts

@@ -0,0 +1,83 @@
+/// <reference path="../../definitions/modules.d.ts" />
+import { EventBase } from "UnityEngine/UIElements";
+import { DomStyleWrapper } from "./dom-style";
+export declare class DomWrapper {
+    get _dom(): CS.OneJS.Dom.Dom;
+    get ve(): CS.UnityEngine.UIElements.VisualElement;
+    get childNodes(): DomWrapper[];
+    get firstChild(): DomWrapper | null;
+    get parentNode(): DomWrapper | null;
+    get nextSibling(): DomWrapper | null;
+    get nodeType(): number;
+    get style(): DomStyleWrapper;
+    get Id(): string;
+    set Id(value: string);
+    get key(): string;
+    set key(value: string);
+    get value(): any;
+    get checked(): boolean;
+    get data(): any;
+    set data(value: any);
+    get className(): string;
+    set className(value: string);
+    get classList(): DomTokenList;
+    /**
+     * Not using private fields because of issues with the `#private;` line
+     * generated by tsc
+     */
+    dom: CS.OneJS.Dom.Dom;
+    domStyleWrapper: DomStyleWrapper;
+    domTokenList: DomTokenList;
+    cachedChildNodes: DomWrapper[] | null;
+    boundListeners: WeakMap<WeakKey, any>;
+    constructor(dom: CS.OneJS.Dom.Dom);
+    appendChild(child: DomWrapper): DomWrapper | undefined;
+    removeChild(child: DomWrapper): void;
+    insertBefore(a: DomWrapper, b: DomWrapper): void;
+    insertAfter(a: DomWrapper, b: DomWrapper): void;
+    before(other: DomWrapper): void;
+    clearChildren(): void;
+    setAttribute(name: string, value: any): void;
+    removeAttribute(name: string): void;
+    append(child: DomWrapper): void;
+    cloneNode(deep?: boolean): DomWrapper;
+    remove(): void;
+    contains(child: DomWrapper): boolean;
+    focus(): void;
+    addEventListener(type: string, listener: (event: EventBase) => void, options?: boolean | {
+        once?: boolean;
+    }): void;
+    removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean): void;
+    /**
+     * Returns all elements matching the specified selector.
+     * Supports basic selectors:
+     * - Tag names: 'div'
+     * - IDs: '#myId'
+     * - Classes: '.myClass'
+     * - Combinations: 'div.myClass#myId'
+     */
+    querySelectorAll(selector: string): DomWrapper[];
+    /**
+     * Returns the first element matching the specified selector.
+     * Supports the same basic selectors as querySelectorAll.
+     */
+    querySelector(selector: string): DomWrapper | null;
+}
+export declare function querySelectorAll(root: DomWrapper, selector: string): DomWrapper[];
+export declare function querySelector(root: DomWrapper, selector: string): DomWrapper | null;
+declare class DomTokenList {
+    dom: CS.OneJS.Dom.Dom;
+    constructor(dom: CS.OneJS.Dom.Dom);
+    _tokens(): string[];
+    _update(tokens: string[]): void;
+    add(...tokens: string[]): void;
+    remove(...tokens: string[]): void;
+    toggle(token: string, force?: boolean): boolean;
+    contains(token: string): boolean;
+    replace(oldToken: string, newToken: string): boolean;
+    toString(): string;
+    get length(): number;
+    item(index: number): string | null;
+    [Symbol.iterator](): Iterator<string>;
+}
+export {};

package/dist/dom/dom.js

@@ -0,0 +1,313 @@
+import { DomStyleWrapper } from "./dom-style";
+export class DomWrapper {
+    get _dom() { return this.dom; }
+    get ve() { return this.dom.ve; }
+    get childNodes() {
+        if (this.cachedChildNodes)
+            return this.cachedChildNodes;
+        this.cachedChildNodes = new Array(this.dom.childNodes.Length);
+        var i = this.dom.childNodes.Length;
+        while (i--) {
+            this.cachedChildNodes[i] = new DomWrapper(this.dom.childNodes.get_Item(i));
+        }
+        return this.cachedChildNodes;
+    }
+    get firstChild() {
+        return this.dom.firstChild ? new DomWrapper(this.dom.firstChild) : null;
+    }
+    get parentNode() {
+        return this.dom.parentNode ? new DomWrapper(this.dom.parentNode) : null;
+    }
+    get nextSibling() {
+        return this.dom.nextSibling ? new DomWrapper(this.dom.nextSibling) : null;
+    }
+    get nodeType() { return this.dom.nodeType; }
+    get style() { return this.domStyleWrapper; }
+    get Id() { return this.dom.Id; }
+    set Id(value) { this.dom.Id = value; }
+    get key() { return this.dom.key; }
+    set key(value) { this.dom.key = value; }
+    get value() { return this.dom.value; }
+    get checked() { return this.dom.checked; }
+    get data() { return this.dom.data; }
+    set data(value) { this.dom.data = value; }
+    get className() { return this.dom.className; }
+    set className(value) { this.dom.className = value; }
+    get classList() { return this.domTokenList; }
+    /**
+     * Not using private fields because of issues with the `#private;` line
+     * generated by tsc
+     */
+    dom;
+    domStyleWrapper;
+    domTokenList;
+    cachedChildNodes = null;
+    boundListeners = new WeakMap();
+    constructor(dom) {
+        this.dom = dom;
+        this.domStyleWrapper = new DomStyleWrapper(dom.style);
+        this.domTokenList = new DomTokenList(dom);
+    }
+    // MARK: Manipulation
+    appendChild(child) {
+        if (!child)
+            return;
+        this.dom.appendChild(child.dom);
+        this.cachedChildNodes = null;
+        return child;
+    }
+    removeChild(child) {
+        if (!child)
+            return;
+        this.dom.removeChild(child.dom);
+        this.cachedChildNodes = null;
+    }
+    insertBefore(a, b) {
+        this.dom.insertBefore(a?._dom, b?._dom);
+        this.cachedChildNodes = null;
+    }
+    insertAfter(a, b) {
+        this.dom.insertAfter(a?._dom, b?._dom);
+        this.cachedChildNodes = null;
+    }
+    before(other) {
+        if (this.parentNode) {
+            this.parentNode.insertBefore(other, this);
+        }
+    }
+    clearChildren() {
+        this.dom.clearChildren();
+        this.cachedChildNodes = null;
+    }
+    setAttribute(name, value) {
+        this.dom.setAttribute(name, value);
+    }
+    removeAttribute(name) {
+        this.dom.removeAttribute(name);
+    }
+    // MARK: Node.prototype
+    append(child) {
+        if (!child)
+            return;
+        this.dom.appendChild(child.dom);
+        this.cachedChildNodes = null;
+    }
+    cloneNode(deep = false) {
+        return this;
+    }
+    remove() {
+        if (this.parentNode) {
+            this.parentNode.removeChild(this);
+        }
+    }
+    // MARK: Misc
+    contains(child) {
+        if (!child)
+            return false;
+        return this.dom.contains(child._dom);
+    }
+    focus() {
+        this.dom.focus();
+    }
+    // MARK: Event
+    addEventListener(type, listener, options) {
+        let boundListener = this.boundListeners.get(listener);
+        if (!boundListener) {
+            boundListener = listener.bind(this);
+            this.boundListeners.set(listener, boundListener);
+        }
+        if (typeof options === 'object' && options.once) {
+            const onceWrapper = (event) => {
+                boundListener(event);
+                this.dom.removeEventListener(type, onceWrapper, false);
+            };
+            this.dom.addEventListener(type, onceWrapper, false);
+        }
+        else {
+            this.dom.addEventListener(type, boundListener, options ? true : false);
+        }
+    }
+    removeEventListener(type, listener, useCapture) {
+        const boundListener = this.boundListeners.get(listener);
+        if (boundListener) {
+            this.dom.removeEventListener(type, boundListener, useCapture ? true : false);
+            this.boundListeners.delete(listener); // isn't strictly necessary for WeakMap, but still good practice
+        }
+    }
+    /**
+     * Returns all elements matching the specified selector.
+     * Supports basic selectors:
+     * - Tag names: 'div'
+     * - IDs: '#myId'
+     * - Classes: '.myClass'
+     * - Combinations: 'div.myClass#myId'
+     */
+    querySelectorAll(selector) {
+        const selectorInfo = parseSelector(selector);
+        const results = [];
+        function traverse(element) {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                results.push(element);
+            }
+            for (const child of element.childNodes) {
+                traverse(child);
+            }
+        }
+        traverse(this);
+        return results;
+    }
+    /**
+     * Returns the first element matching the specified selector.
+     * Supports the same basic selectors as querySelectorAll.
+     */
+    querySelector(selector) {
+        const selectorInfo = parseSelector(selector);
+        function traverse(element) {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                return element;
+            }
+            for (const child of element.childNodes) {
+                const match = traverse(child);
+                if (match) {
+                    return match;
+                }
+            }
+            return null;
+        }
+        return traverse(this);
+    }
+}
+function parseSelector(selector) {
+    const selectorInfo = {
+        classes: []
+    };
+    // Handle ID
+    const idMatch = selector.match(/#([^.#\s]+)/);
+    if (idMatch) {
+        selectorInfo.id = idMatch[1];
+        selector = selector.replace(idMatch[0], '');
+    }
+    // Handle classes
+    const classMatches = selector.match(/\.([^.#\s]+)/g);
+    if (classMatches) {
+        selectorInfo.classes = classMatches.map(c => c.substring(1));
+        selector = selector.replace(/\.[^.#\s]+/g, '');
+    }
+    // Handle tag name (what's left after removing id and classes)
+    const tagName = selector.trim();
+    if (tagName) {
+        selectorInfo.tag = tagName.toLowerCase();
+    }
+    return selectorInfo;
+}
+function elementMatchesSelector(element, selectorInfo) {
+    // Check tag name
+    if (selectorInfo.tag && element.ve.GetType().Name.toLowerCase() !== selectorInfo.tag) {
+        return false;
+    }
+    // Check ID
+    if (selectorInfo.id && element.Id !== selectorInfo.id) {
+        return false;
+    }
+    // Check classes
+    if (selectorInfo.classes.length > 0) {
+        const elementClasses = element.className.split(' ').filter(c => c);
+        for (const className of selectorInfo.classes) {
+            if (!elementClasses.includes(className)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+export function querySelectorAll(root, selector) {
+    const results = [];
+    const selectorInfo = parseSelector(selector);
+    function traverse(element) {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            results.push(element);
+        }
+        // Recursively check children
+        for (const child of element.childNodes) {
+            traverse(child);
+        }
+    }
+    traverse(root);
+    return results;
+}
+export function querySelector(root, selector) {
+    const selectorInfo = parseSelector(selector);
+    function traverse(element) {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            return element;
+        }
+        // Recursively check children
+        for (const child of element.childNodes) {
+            const match = traverse(child);
+            if (match) {
+                return match;
+            }
+        }
+        return null;
+    }
+    return traverse(root);
+}
+class DomTokenList {
+    dom;
+    constructor(dom) {
+        this.dom = dom;
+    }
+    _tokens() {
+        return this.dom.className.trim().split(/\s+/).filter(Boolean);
+    }
+    _update(tokens) {
+        this.dom.className = tokens.join(' ');
+    }
+    add(...tokens) {
+        const set = new Set(this._tokens());
+        tokens.forEach(t => t && set.add(t));
+        this._update(Array.from(set));
+    }
+    remove(...tokens) {
+        const set = new Set(this._tokens());
+        tokens.forEach(t => set.delete(t));
+        this._update(Array.from(set));
+    }
+    toggle(token, force) {
+        if (!token)
+            return false;
+        const has = this.contains(token);
+        if (force === true || (!has && force !== false)) {
+            this.add(token);
+            return true;
+        }
+        if (has && (force === false || force === undefined)) {
+            this.remove(token);
+            return false;
+        }
+        return has;
+    }
+    contains(token) {
+        return this._tokens().includes(token);
+    }
+    replace(oldToken, newToken) {
+        if (!this.contains(oldToken))
+            return false;
+        const tokens = this._tokens().map(t => (t === oldToken ? newToken : t));
+        this._update(tokens);
+        return true;
+    }
+    toString() {
+        return this.dom.className;
+    }
+    get length() { return this._tokens().length; }
+    item(index) {
+        const t = this._tokens();
+        return index >= 0 && index < t.length ? t[index] : null;
+    }
+    [Symbol.iterator]() {
+        return this._tokens()[Symbol.iterator]();
+    }
+}

package/dist/dom/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference path="../../definitions/index.d.ts" />
+export { DocumentWrapper } from './document';
+export { DomWrapper } from './dom';
+export { DomStyleWrapper } from './dom-style';

package/dist/dom/index.js

@@ -0,0 +1,4 @@
+/// <reference path="../definitions/index.d.ts" />
+export { DocumentWrapper } from './document';
+export { DomWrapper } from './dom';
+export { DomStyleWrapper } from './dom-style';

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+/// <reference path="../definitions/index.d.ts" />
+import { DocumentWrapper } from "./dom/document";
+import { DomWrapper } from "./dom/dom";
+/**
+ * OneJS's own h function. Use this to quickly create elements in jsx-like syntax
+ * @param type
+ * @param props
+ * @param children
+ * @returns
+ */
+export declare function h(type: any, props: any, ...children: any[]): any;
+export { emo } from "./styling/index";
+declare global {
+    interface Document extends DocumentWrapper {
+    }
+    interface Element extends DomWrapper {
+    }
+    const newCsArray: <T>(type: {
+        new (...args: any[]): T;
+    }, count: number) => CS.System.Array;
+    const toJsArray: <T>(csArr: CS.System.Array) => T[];
+    const toCsArray: <T>(jsArr: T[], type: {
+        new (...args: any[]): T;
+    }) => CS.System.Array;
+}

package/dist/index.js

@@ -0,0 +1,45 @@
+/// <reference path="./definitions/index.d.ts" />
+import { DocumentWrapper } from "./dom/document";
+/**
+ * OneJS's own h function. Use this to quickly create elements in jsx-like syntax
+ * @param type
+ * @param props
+ * @param children
+ * @returns
+ */
+export function h(type, props, ...children) {
+    const element = typeof type === "string" ? document.createElement(type) : type;
+    // Assign properties to the element
+    for (const [key, value] of Object.entries(props || {})) {
+        if (key.startsWith("on") && typeof value === "function") {
+            element.addEventListener(key.substring(2).toLowerCase(), value);
+        }
+        else if (key === "style" && typeof value === "object") {
+            Object.assign(element.style, value);
+        }
+        else {
+            element.setAttribute(key, value);
+        }
+    }
+    // Append children
+    for (const child of children) {
+        if (typeof child === "string") {
+            element.appendChild(document.createTextNode(child));
+        }
+        else {
+            element.appendChild(child);
+        }
+    }
+    return element;
+}
+export { emo } from "./styling/index";
+if (typeof globalThis.___document != "undefined") {
+    // @ts-ignore
+    globalThis.onejsDocument = new DocumentWrapper(globalThis.___document);
+    // @ts-ignore
+    if (!globalThis.ONEJS_WEBGL && !globalThis.document) {
+        // @ts-ignore
+        globalThis.document = globalThis.onejsDocument;
+    }
+}
+// puer.$extension(CS.UnityEngine.UIElements.VisualElement, CS.UnityEngine.UIElements.VisualElementExtensions)