@needle-tools/engine 2.24.0-pre

package/src/engine-components/ui/Image.ts

@@ -0,0 +1,57 @@
+import { serializeable } from '../../engine/engine_serialization_decorator';
+import { Color, Texture } from 'three';
+import { MaskableGraphic } from './Graphic';
+
+
+class Sprite {
+    @serializeable(Texture)
+    texture?: THREE.Texture;
+
+    rect?: { width: number, height: number };
+}
+
+export class Image extends MaskableGraphic {
+
+    @serializeable(Sprite)
+    sprite?: Sprite;
+
+    private isBuiltinSprite() {
+        switch (this.sprite?.texture?.name) {
+            case "InputFieldBackground":
+            case "UISprite":
+            case "Background":
+                return true;
+        }
+        return false;
+    }
+
+    protected onBeforeCreate(opts: any): void {
+        if (this.isBuiltinSprite()) {
+            opts.borderRadius = 5;
+            opts.borderColor = new Color(.4, .4, .4);
+            opts.borderOpacity = this.color.alpha;
+            opts.borderWidth = .3;
+        }
+    }
+
+    protected onAfterCreated(): void {
+        super.onAfterCreated();
+        if (this.isBuiltinSprite()) return;
+        this.setTexture(this.sprite?.texture);
+    }
+}
+
+export class RawImage extends MaskableGraphic {
+    @serializeable(Texture)
+    mainTexture?: Texture;
+
+    protected onAfterCreated(): void {
+        super.onAfterCreated();
+        // console.log(this);
+        // if (this.mainTexture) {
+        //     this.mainTexture.flipY = true;
+        //     this.mainTexture.needsUpdate = true;
+        // }
+        this.setTexture(this.mainTexture);
+    }
+}

package/src/engine-components/ui/InputField.ts

@@ -0,0 +1,235 @@
+import { Behaviour, GameObject } from "../Component";
+import { IPointerClickHandler, IPointerEventHandler } from "./PointerEvents";
+import { FrameEvent } from "../../engine/engine_setup";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { Text } from "./Text";
+import { getParam } from "../../engine/engine_utils";
+import { EventList } from "../EventList";
+
+const debug = getParam("debuginputfield");
+
+export class InputField extends Behaviour implements IPointerEventHandler {
+
+    get text() : string {
+        return this.textComponent?.text ?? "";
+    }
+
+    get isFocused() {
+        return InputField.active === this;
+    }
+
+    @serializeable(Text)
+    private textComponent?: Text;
+
+    @serializeable(Text)
+    private placeholder?: Text;
+
+    @serializeable(EventList)
+    onValueChanged?: EventList;
+
+    @serializeable(EventList)
+    onEndEdit?: EventList;
+
+
+    private static active: InputField | null = null;
+    private static activeTime: number = -1;
+    private static htmlField: HTMLInputElement | null = null;
+
+    private inputEventFn: any;
+
+    start() {
+        if (debug)
+            console.log(this.name, this);
+    }
+
+    onEnable() {
+        if (!InputField.htmlField) {
+            InputField.htmlField = document.createElement("input");
+            InputField.htmlField.classList.add("ar");
+            document.body.appendChild(InputField.htmlField);
+        }
+        if (!this.inputEventFn) {
+            this.inputEventFn = this.onInput.bind(this);
+        }
+        // InputField.htmlField.addEventListener("input", this.mobileInputEventListener);
+        InputField.htmlField.addEventListener("keyup", this.inputEventFn);
+        // InputField.htmlField.addEventListener("change", this.inputEventFn);
+        if (this.placeholder && this.textComponent?.text.length) {
+            GameObject.setActive(this.placeholder.gameObject, false);
+        }
+    }
+
+    onDisable() {
+        // InputField.htmlField?.removeEventListener("input", this.mobileInputEventListener);
+        InputField.htmlField?.removeEventListener("keyup", this.inputEventFn);
+        // InputField.htmlField?.removeEventListener("change", this.inputEventFn);
+        this.onDeselected();
+    }
+
+    onPointerClick(_args) {
+        if (debug) console.log("CLICK", _args, InputField.active);
+        InputField.activeTime = this.context.time.time;
+        if (InputField.active !== this) {
+            this.startCoroutine(this.activeLoop(), FrameEvent.LateUpdate);
+        }
+        this.selectInputField();
+    }
+
+    private *activeLoop() {
+        this.onSelected();
+        while (InputField.active === this) {
+            if (this.context.input.getPointerUp(0)) {
+                if (this.context.time.time - InputField.activeTime > 0.2) {
+                    break;
+                }
+            }
+            this.setTextFromInputField();
+            yield;
+        }
+        this.onDeselected();
+    }
+
+    private onSelected() {
+        if (InputField.active === this) return;
+        if (debug) console.log("Select", this.name, this, InputField.htmlField, this.context.isInXR, this.context.AROverlayElement, this.textComponent?.text, InputField.htmlField?.value);
+
+        InputField.active?.onDeselected();
+        InputField.active = this;
+
+        if (this.placeholder)
+            GameObject.setActive(this.placeholder.gameObject, false);
+
+        if (InputField.htmlField) {
+
+            InputField.htmlField.value = this.textComponent?.text || "";
+            if (debug)
+                console.log("set input field value", InputField.htmlField.value);
+
+            if (this.context.isInXR) {
+                const overlay = this.context.AROverlayElement;
+                if (overlay) {
+                    InputField.htmlField.style.width = "0px";
+                    InputField.htmlField.style.height = "0px";
+                    overlay.append(InputField.htmlField)
+                }
+            }
+
+            this.selectInputField();
+        }
+    }
+
+    private onDeselected() {
+        if (InputField.active !== this) return;
+        InputField.active = null;
+
+        if (debug) console.log("Deselect", this.name, this);
+        if (InputField.htmlField) {
+            InputField.htmlField.blur();
+            document.body.append(InputField.htmlField);
+            InputField.htmlField.style.width = "";
+            InputField.htmlField.style.height = "";
+        }
+        if (this.placeholder && (!this.textComponent || this.textComponent.text.length <= 0))
+            GameObject.setActive(this.placeholder.gameObject, true);
+
+        this.onEndEdit?.invoke();
+    }
+
+
+    private onInput(evt: KeyboardEvent) {
+        if (InputField.active !== this) return;
+        if (debug)
+            console.log(evt.code, evt, InputField.htmlField?.value, this.textComponent?.text);
+        if (evt.code === "Escape" || evt.code === "Enter") {
+            this.onDeselected();
+            return;
+        }
+        if (InputField.htmlField) {
+            if (this.textComponent) {
+                this.setTextFromInputField();
+                if (this.placeholder) {
+                    GameObject.setActive(this.placeholder.gameObject, this.textComponent.text.length <= 0);
+                }
+            }
+            this.selectInputField();
+        }
+        // switch (evt.inputType) {
+        //     case "insertCompositionText":
+        //         this.appendLetter(evt.data?.charAt(evt.data.length - 1) || null);
+        //         break;
+        //     case "insertText":
+        //         console.log(evt.data);
+        //         this.appendLetter(evt.data);
+        //         break;
+        //     case "deleteContentBackward":
+        //         this.deleteLetter();
+        //         break;
+        // }
+    }
+
+    private setTextFromInputField() {
+        if (this.textComponent && InputField.htmlField) {
+            if (this.textComponent.text !== InputField.htmlField.value) {
+                if (debug)
+                    console.log("VALUE CHANGED");
+                const oldValue = this.textComponent.text;
+                const newValue = InputField.htmlField.value;
+                this.onValueChanged?.invoke(newValue, oldValue);
+            }
+            this.textComponent.text = InputField.htmlField.value;
+        }
+    }
+
+    private selectInputField() {
+        if (InputField.htmlField) {
+            InputField.htmlField.setSelectionRange(InputField.htmlField.value.length, InputField.htmlField.value.length);
+            InputField.htmlField.focus();
+        }
+    }
+
+
+
+    // private static _lastDeletionTime: number = 0;
+    // private static _lastKeyInputTime: number = 0;
+
+    // TODO: support modifiers, refactor to not use backspace as string etc
+    // private handleKey(key: string | null) {
+    //     if (!this.textComponent) return;
+    //     if (!key) return;
+
+    //     InputField._lastKey = key || "";
+
+    //     const text = this.textComponent.text;
+    //     if (debug)
+    //         console.log(key, text);
+    //     switch (key) {
+    //         case "Backspace":
+    //             this.deleteLetter();
+    //             break;
+
+    //         default:
+    //             this.appendLetter(key);
+    //             break;
+    //     }
+    // }
+
+    // private appendLetter(key: string | null) {
+    //     if (this.textComponent && key) {
+    //         const timeSinceLastInput = this.context.time.time - InputField._lastKeyInputTime;
+    //         if (key.length === 1 && (this.context.input.getKeyDown() === key || timeSinceLastInput > .1)) {
+    //             this.textComponent.text += key;
+    //             InputField._lastKeyInputTime = this.context.time.time;
+    //         }
+    //     }
+    // }
+
+    // private deleteLetter() {
+    //     if (this.textComponent) {
+    //         const text = this.textComponent.text;
+    //         if (text.length > 0 && this.context.time.time - InputField._lastDeletionTime > 0.05) {
+    //             this.textComponent.text = text.slice(0, -1);
+    //             InputField._lastDeletionTime = this.context.time.time;
+    //         }
+    //     }
+    // }
+}

package/src/engine-components/ui/Interfaces.ts

@@ -0,0 +1,8 @@
+export interface ICanvasGroup {
+    blocksRaycasts: boolean;
+    interactable: boolean;
+}
+
+export interface IGraphic {
+    raycastTarget: boolean;
+}

package/src/engine-components/ui/Keyboard.ts

@@ -0,0 +1,203 @@
+import * as ThreeMeshUI from 'three-mesh-ui'
+import * as THREE from 'three'
+import { BaseUIComponent, includesDir } from './BaseUIComponent';
+import { Text } from './Text';
+import { getWorldScale } from '../../engine/engine_three_utils';
+import { RectTransform } from './RectTransform';
+
+
+enum KeymapOption {
+    fr,
+    ru,
+    de,
+    es,
+    el,
+    nord,
+    eng
+}
+
+
+// see https://github.com/felixmariotto/three-mesh-ui/blob/master/examples/keyboard.js
+export class Keyboard extends BaseUIComponent {
+
+    font?: string;
+    text?: Text;
+    keymap?: KeymapOption;
+    padding?: number;
+    margin?: number;
+    fontSize?: number;
+    borderRadius?: number;
+
+
+    private colors = {
+        keyboardBack: 0x858585,
+        panelBack: 0x262626,
+        button: 0x363636,
+        hovered: 0x1c1c1c,
+        selected: 0x109c5d,
+    };
+
+
+    awake() {
+        super.awake();
+        const langKey = KeymapOption[this.keymap || KeymapOption.eng];
+        this.makeKeyboard(langKey);
+    }
+    onEnable(): void {
+        this.addShadowComponent(this.keyboard);
+    }
+    onDisable(): void {
+        this.removeShadowComponent();
+    }
+
+    private keyboard: ThreeMeshUI.Keyboard | null = null!;
+    private _lastKeyPressed: any;
+    private _lastKeyPressedStartTime: number = 0;
+    private _lastKeyPressedTime: number = 0;
+
+    private makeKeyboard(language?: string) {
+
+        if (!language && !navigator.language) {
+            language = "en";
+        }
+
+        const fontName = this.font ? this.font : "arial";
+
+        const rt = this.gameObject.getComponent(RectTransform);
+        if(!rt){
+            console.error("Missing rect transform, please add this component inside a canvas");
+            return;
+        }
+        const opts = {
+            ...rt.getBasicOptions(),
+            margin: this.margin || 0,
+            padding: this.padding || 0,
+            language: language,
+            fontFamily: includesDir + "/" + fontName + "-msdf.json",
+            fontTexture: includesDir + "/" + fontName + ".png",
+            fontSize: this.fontSize || 6, // fontSize will propagate to the keys blocks
+            backgroundColor: new THREE.Color(this.colors.keyboardBack),
+            backspaceTexture: includesDir + '/backspace.png',
+            shiftTexture: includesDir + '/shift.png',
+            enterTexture: includesDir + '/enter.png',
+            borderRadius: this.borderRadius || 0,
+            autoLayout: false,
+
+        };
+        // const ws = getWorldScale(this.gameObject);
+        const scale = this.gameObject.scale;
+        opts.width *= this.gameObject.scale.x;
+        opts.height *= this.gameObject.scale.y;
+        opts.fontSize *= Math.max(scale.x, scale.y);
+        this.keyboard = new ThreeMeshUI.Keyboard(opts);
+
+        // const scale = this.gameObject.scale;
+        // const max = Math.max(scale.x, scale.y, scale.z);
+        this.gameObject.scale.set(1, 1, 1);
+
+        //@ts-ignore
+        this.keyboard.keys.forEach((key) => {
+
+            key.setupState({
+                state: 'normal',
+                attributes: {
+                    offset: 0.003,
+                    backgroundColor: new THREE.Color(this.colors.button),
+                    backgroundOpacity: 1
+                }
+            });
+            key.setState("normal");
+
+            key.setupState({
+                state: 'hovered',
+                attributes: {
+                    offset: 0.3,
+                    backgroundColor: new THREE.Color(this.colors.hovered),
+                    backgroundOpacity: 1
+                }
+            });
+
+            key.setupState({
+                state: 'pressed',
+                attributes: {
+                    offset: 0.1,
+                    backgroundColor: new THREE.Color(this.colors.selected),
+                    backgroundOpacity: 1
+                },
+                // triggered when the user clicked on a keyboard's key
+                onSet: () => {
+                    const input = key.info.input;
+                    const cmd = key.info.command;
+                    if (this._lastKeyPressed !== input) {
+                        this._lastKeyPressedStartTime = this.context.time.time;
+                    }
+                    else if (this.context.time.time - this._lastKeyPressedTime > .05) {
+                        // there was probably a key up inbetween
+                        this._lastKeyPressedStartTime = this.context.time.time;
+                    }
+                    else if (this.context.time.time - this._lastKeyPressedStartTime < .5
+                        || cmd == "switch"
+                        || cmd == "shift"
+                        || cmd == "switch-set"
+                    ) {
+                        this._lastKeyPressedTime = this.context.time.time;
+                        return;
+                    }
+                    this._lastKeyPressedTime = this.context.time.time;
+                    this._lastKeyPressed = input;
+                    // if the key have a command (eg: 'backspace', 'switch', 'enter'...)
+                    // special actions are taken
+                    if (cmd) {
+                        switch (cmd) {
+                            // switch between panels
+                            case 'switch':
+                                //@ts-ignore
+                                this.keyboard.setNextPanel();
+                                break;
+
+                            // switch between panel charsets (eg: russian/english)
+                            case 'switch-set':
+                                //@ts-ignore
+                                this.keyboard.setNextCharset();
+                                break;
+
+                            case 'enter':
+                                this.tryAppend('\n');
+                                break;
+
+                            case 'space':
+                                this.tryAppend(' ');
+                                break;
+
+                            case 'backspace':
+                                //@ts-ignore
+                                if (!this.text?.text?.length) break
+                                if (this.text?.text)
+                                    this.text.text = this.text.text.substring(0, this.text.text.length - 1) || ""
+                                break;
+
+                            case 'shift':
+                                //@ts-ignore
+                                this.keyboard.toggleCase();
+                                break;
+
+                        };
+
+                        // print a glyph, if any
+                    } else if (key.info.input !== undefined) {
+                        this.tryAppend(key.info.input);
+                    };
+
+                }
+            });
+
+        });
+    };
+
+    private tryAppend(char: string) {
+        if (this.text) {
+            this.text.text += char;
+            this.markDirty();
+        }
+    }
+}

package/src/engine-components/ui/Layout.ts

@@ -0,0 +1,17 @@
+import { Behaviour } from "../Component";
+
+export class LayoutGroup extends Behaviour {
+    reverseArrangement: boolean = false;
+}
+
+export class VerticalLayoutGroup extends LayoutGroup {
+
+}
+
+export class HorizontalLayoutGroup extends LayoutGroup {
+
+}
+
+export class GridLayoutGroup extends LayoutGroup {
+
+}

package/src/engine-components/ui/PointerEvents.ts

@@ -0,0 +1,54 @@
+export interface IInputEventArgs {
+    get used(): boolean;
+    Use(): void;
+    StopPropagation?(): void;
+}
+
+export class PointerEventData implements IInputEventArgs {
+    used: boolean = false; 
+
+    Use() {
+        this.used = true;
+    }
+
+    StopPropagation() {
+        this.event?.stopImmediatePropagation();
+    }
+
+    inputSource: any;
+    object!: THREE.Object3D;
+
+    isDown: boolean | undefined;
+    isUp: boolean | undefined;
+    isPressed: boolean | undefined;
+    isClicked: boolean | undefined;
+
+    private event?:Event;
+
+    constructor(events?:Event){
+        this.event = events;
+    }
+}
+
+export interface IPointerDownHandler {
+    onPointerDown?(args: PointerEventData);
+}
+
+export interface IPointerUpHandler {
+    onPointerUp?(args: PointerEventData);
+}
+
+export interface IPointerEnterHandler {
+    onPointerEnter?(args: PointerEventData);
+}
+
+export interface IPointerExitHandler {
+    onPointerExit?(args: PointerEventData);
+}
+
+export interface IPointerClickHandler {
+    onPointerClick?(args: PointerEventData);
+}
+
+export interface IPointerEventHandler extends IPointerDownHandler,
+    IPointerUpHandler, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler { }

package/src/engine-components/ui/Raycaster.ts

@@ -0,0 +1,47 @@
+import { Camera } from "three";
+import { RaycastOptions } from "../../engine/engine_physics";
+import { Behaviour } from "../Component";
+import { EventSystem } from "./EventSystem";
+
+export class Raycaster extends Behaviour {
+    awake(): void {
+        EventSystem.createIfNoneExists(this.context);
+    }
+
+    onEnable(): void {
+        EventSystem.instance?.register(this);
+    }
+
+    onDisable(): void {
+        EventSystem.instance?.unregister(this);
+    }
+
+    performRaycast(_opts: RaycastOptions | null = null): THREE.Intersection[] | null {
+        return null;
+    }
+}
+
+export class ObjectRaycaster extends Raycaster {
+    private targets: THREE.Object3D[] | null = null;
+    private raycastHits: THREE.Intersection[] = [];
+
+    start(): void {
+        this.targets = [this.gameObject];
+    }
+
+    performRaycast(opts: RaycastOptions | null = null): THREE.Intersection[] | null {
+        if (!this.targets) return null;
+        opts ??= new RaycastOptions();
+        opts.targets = this.targets;
+        opts.results = this.raycastHits;
+        const hits = this.context.physics.raycast(opts);
+        // console.log(this.context.alias, hits);
+        return hits;
+    }
+}
+
+export class GraphicRaycaster extends ObjectRaycaster {
+    eventCamera: Camera | null = null;
+    ignoreReversedGraphics: boolean = false;
+    rootRaycaster: GraphicRaycaster | null = null;
+}