onejs-core 0.3.43 → 0.3.45

package/definitions/Assemblies/OneJS.Runtime.d.ts

@@ -230,6 +230,7 @@ declare namespace CS {
             public removeChild ($child: OneJS.Dom.Dom) : void
             public contains ($child: OneJS.Dom.Dom) : boolean
             public insertBefore ($a: OneJS.Dom.Dom, $b: OneJS.Dom.Dom) : void
+            public insertAfter ($a: OneJS.Dom.Dom, $b: OneJS.Dom.Dom) : void
             public setAttribute ($name: string, $val: any) : void
             public removeAttribute ($name: string) : void
             public focus () : void
@@ -261,6 +262,7 @@ declare namespace CS {
             public createTextNode ($text: string) : OneJS.Dom.Dom
             public getElementById ($id: string) : OneJS.Dom.Dom
             public querySelectorAll ($selector: string) : System.Array$1<OneJS.Dom.Dom>
+            public getDomFromVE ($ve: UnityEngine.UIElements.VisualElement) : OneJS.Dom.Dom
             public loadImage ($path: string, $filterMode?: UnityEngine.FilterMode) : UnityEngine.Texture2D
             public loadFont ($path: string) : UnityEngine.Font
             public loadFontDefinition ($path: string) : UnityEngine.UIElements.FontDefinition

package/definitions/globals.d.ts

@@ -24,9 +24,9 @@ declare const onejs: {
         eventSource: T,
         eventName: K,
         handler: OneJS.EventGenericType<T[K]>
-    ): () => void
+    ): CS.System.Action
 
-    subscribe(eventName: string, handler: () => void): () => void
+    subscribe(eventName: string, handler: () => void): CS.System.Action
 }
 
 declare function require(name: string): any

package/dist/dom/dom.d.ts

@@ -32,6 +32,7 @@ export declare class DomWrapper {
     appendChild(child: DomWrapper): void;
     removeChild(child: DomWrapper): void;
     insertBefore(a: DomWrapper, b: DomWrapper): void;
+    insertAfter(a: DomWrapper, b: DomWrapper): void;
     contains(child: DomWrapper): boolean;
     clearChildren(): void;
     focus(): void;
@@ -39,4 +40,20 @@ export declare class DomWrapper {
     removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean): void;
     setAttribute(name: string, value: any): void;
     removeAttribute(name: string): 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;

package/dist/dom/dom.js

@@ -61,6 +61,10 @@ export class DomWrapper {
         this.dom.insertBefore(a?._dom, b?._dom);
         this.cachedChildNodes = null;
     }
+    insertAfter(a, b) {
+        this.dom.insertAfter(a?._dom, b?._dom);
+        this.cachedChildNodes = null;
+    }
     contains(child) {
         if (!child)
             return false;
@@ -94,4 +98,123 @@ export class DomWrapper {
     removeAttribute(name) {
         this.dom.removeAttribute(name);
     }
+    /**
+     * 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.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);
 }

package/dist/index.js

@@ -37,3 +37,10 @@ if (typeof ___document != "undefined") {
     // @ts-ignore
     globalThis.document = new DocumentWrapper(___document);
 }
+// @ts-ignore
+CS.OneJS.EngineHost.prototype.sub = function (a, b, c) {
+    let unsubscribe = c ? this.subscribe(a, b, c) : this.subscribe(a, b);
+    return () => {
+        unsubscribe.Invoke();
+    };
+};

package/dom/document.ts

@@ -8,14 +8,16 @@ export class DocumentWrapper {
     public get _doc(): CS.OneJS.Dom.Document { return this.#doc }
 
     #doc: CS.OneJS.Dom.Document;
-    #body: DomWrapper;
+    #body: DomWrapper | null;
 
-    public get body(): DomWrapper { return this.#body }
+    /**
+     * The body/root element of the document. Will be null for Editor documents.
+     */
+    public get body(): DomWrapper | null { return this.#body }
 
     constructor(doc: CS.OneJS.Dom.Document) {
         this.#doc = doc
-        if (doc.body)
-            this.#body = new DomWrapper(doc.body)
+        this.#body = doc.body ? new DomWrapper(doc.body) : null
     }
 
     addRuntimeUSS(uss: string): void {

package/dom/dom.ts

@@ -69,6 +69,11 @@ export class DomWrapper {
         this.cachedChildNodes = null
     }
 
+    insertAfter(a: DomWrapper, b: DomWrapper) {
+        this.dom.insertAfter(a?._dom, b?._dom)
+        this.cachedChildNodes = null
+    }
+
     contains(child: DomWrapper) {
         if (!child) return false
         return this.dom.contains(child._dom)
@@ -107,4 +112,156 @@ export class DomWrapper {
     removeAttribute(name: string) {
         this.dom.removeAttribute(name)
     }
+
+    /**
+     * 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[] {
+        const selectorInfo = parseSelector(selector);
+        const results: DomWrapper[] = [];
+
+        function traverse(element: DomWrapper) {
+            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: string): DomWrapper | null {
+        const selectorInfo = parseSelector(selector);
+
+        function traverse(element: DomWrapper): DomWrapper | null {
+            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);
+    }
+}
+
+interface SelectorInfo {
+    tag?: string;
+    id?: string;
+    classes: string[];
+}
+
+function parseSelector(selector: string): SelectorInfo {
+    const selectorInfo: 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: DomWrapper, selectorInfo: SelectorInfo): boolean {
+    // Check tag name
+    if (selectorInfo.tag && element.ve.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: DomWrapper, selector: string): DomWrapper[] {
+    const results: DomWrapper[] = [];
+    const selectorInfo = parseSelector(selector);
+
+    function traverse(element: DomWrapper) {
+        // 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: DomWrapper, selector: string): DomWrapper | null {
+    const selectorInfo = parseSelector(selector);
+
+    function traverse(element: DomWrapper): DomWrapper | null {
+        // 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);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "onejs-core",
     "description": "The JS part of OneJS, a UI framework and Scripting Engine for Unity.",
-    "version": "0.3.43",
+    "version": "0.3.45",
     "main": "./dist/index.js",
     "types": "./typings.d.ts",
     "dependencies": {