@needle-tools/engine 2.24.0-pre

package/lib/engine-components/ui/Graphic.js

@@ -0,0 +1,145 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { RGBAColor } from "../js-extensions/RGBAColor";
+import { BaseUIComponent } from "./BaseUIComponent";
+import { serializeable } from '../../engine/engine_serialization_decorator';
+import { RectTransform } from './RectTransform';
+import { onChange, scheduleAction } from "./Utils";
+export class Graphic extends BaseUIComponent {
+    get color() {
+        if (!this._color)
+            this._color = new RGBAColor(1, 1, 1, 1);
+        return this._color;
+    }
+    set color(col) {
+        const changed = !this._color || this._color.r !== col.r || this._color.g !== col.g || this._color.b !== col.b || this._color.alpha !== col.alpha;
+        if (!changed)
+            return;
+        if (!this._color) {
+            this._color = new RGBAColor(1, 1, 1, 1);
+        }
+        this._color.copy(col);
+    }
+    onColorChanged() {
+        const newcolor = this.color;
+        this.setOptions({ backgroundColor: newcolor, backgroundOpacity: newcolor.alpha, borderOpacity: newcolor.alpha });
+    }
+    // used via animations
+    get m_Color() {
+        return this._color;
+    }
+    raycastTarget = true;
+    uiObject = null;
+    _color = null;
+    _rect = null;
+    get rectTransform() {
+        if (!this._rect) {
+            this._rect = this.gameObject.getComponent(RectTransform);
+        }
+        return this._rect;
+    }
+    setState(state) {
+        this.makePanel();
+        if (this.uiObject) {
+            //@ts-ignore
+            this.uiObject.setState(state);
+        }
+    }
+    setupState(state) {
+        this.makePanel();
+        if (this.uiObject) {
+            //@ts-ignore
+            this.uiObject.setupState(state);
+        }
+    }
+    setOptions(opts) {
+        this.makePanel();
+        if (this.uiObject) {
+            //@ts-ignore
+            this.uiObject.set(opts);
+            if (opts["backgroundColor"] !== undefined || opts["backgroundOpacity"] !== undefined)
+                this.uiObject["updateBackgroundMaterial"]?.call(this.uiObject);
+        }
+    }
+    awake() {
+        super.awake();
+        this.makePanel();
+        // when _color is written to
+        onChange(this, "_color", () => scheduleAction(this, this.onColorChanged));
+    }
+    onEnable() {
+        super.onEnable();
+        if (this.uiObject) {
+            this.rectTransform.shadowComponent?.add(this.uiObject);
+            this.addShadowComponent(this.uiObject, this.rectTransform);
+        }
+    }
+    onDisable() {
+        super.onDisable();
+        if (this.uiObject)
+            this.removeShadowComponent();
+    }
+    _currentlyCreatingPanel = false;
+    makePanel() {
+        if (this.uiObject)
+            return;
+        if (this._currentlyCreatingPanel)
+            return;
+        this._currentlyCreatingPanel = true;
+        const opts = {
+            backgroundColor: this.color,
+            backgroundOpacity: this.color.alpha,
+            offset: 1, // without a tiny offset we get z fighting
+        };
+        this.onBeforeCreate(opts);
+        this.onCreate(opts);
+        this.controlsChildLayout = false;
+        this._currentlyCreatingPanel = false;
+        this.onAfterCreated();
+    }
+    onBeforeCreate(_opts) { }
+    onCreate(opts) {
+        this.uiObject = this.rectTransform.createNewBlock(opts);
+        this.uiObject.name = this.name;
+    }
+    onAfterCreated() { }
+    async setTexture(tex) {
+        if (!tex)
+            return;
+        this.setOptions({ backgroundOpacity: 0 });
+        if (tex) {
+            this.setOptions({ backgroundTexture: tex, borderRadius: 0, backgroundOpacity: this.color.alpha, backgroundSize: "stretch" });
+        }
+    }
+    onAfterAddedToScene() {
+        if (this.shadowComponent) {
+            //@ts-ignore
+            this.shadowComponent.offset = this.shadowComponent.position.z;
+            // console.log(this.shadowComponent);
+            // setTimeout(()=>{
+            //     this.shadowComponent?.traverse(c => {
+            //         console.log(c);
+            //         if(c.material) c.material.depthTest = false;
+            //     });
+            // },1000);
+        }
+    }
+}
+__decorate([
+    serializeable(RGBAColor)
+], Graphic.prototype, "color", null);
+__decorate([
+    serializeable()
+], Graphic.prototype, "raycastTarget", void 0);
+export class MaskableGraphic extends Graphic {
+    onAfterCreated() {
+        // flip image
+        if (this.uiObject)
+            this.uiObject.scale.y *= -1;
+    }
+}
+//# sourceMappingURL=Graphic.js.map

package/lib/engine-components/ui/Graphic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graphic.js","sourceRoot":"","sources":["../../../../engine-components/ui/Graphic.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/Image.d.ts

@@ -0,0 +1,20 @@
+import { Texture } from 'three';
+import { MaskableGraphic } from './Graphic';
+declare class Sprite {
+    texture?: THREE.Texture;
+    rect?: {
+        width: number;
+        height: number;
+    };
+}
+export declare class Image extends MaskableGraphic {
+    sprite?: Sprite;
+    private isBuiltinSprite;
+    protected onBeforeCreate(opts: any): void;
+    protected onAfterCreated(): void;
+}
+export declare class RawImage extends MaskableGraphic {
+    mainTexture?: Texture;
+    protected onAfterCreated(): void;
+}
+export {};

package/lib/engine-components/ui/Image.js

@@ -0,0 +1,61 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { serializeable } from '../../engine/engine_serialization_decorator';
+import { Color, Texture } from 'three';
+import { MaskableGraphic } from './Graphic';
+class Sprite {
+    texture;
+    rect;
+}
+__decorate([
+    serializeable(Texture)
+], Sprite.prototype, "texture", void 0);
+export class Image extends MaskableGraphic {
+    sprite;
+    isBuiltinSprite() {
+        switch (this.sprite?.texture?.name) {
+            case "InputFieldBackground":
+            case "UISprite":
+            case "Background":
+                return true;
+        }
+        return false;
+    }
+    onBeforeCreate(opts) {
+        if (this.isBuiltinSprite()) {
+            opts.borderRadius = 5;
+            opts.borderColor = new Color(.4, .4, .4);
+            opts.borderOpacity = this.color.alpha;
+            opts.borderWidth = .3;
+        }
+    }
+    onAfterCreated() {
+        super.onAfterCreated();
+        if (this.isBuiltinSprite())
+            return;
+        this.setTexture(this.sprite?.texture);
+    }
+}
+__decorate([
+    serializeable(Sprite)
+], Image.prototype, "sprite", void 0);
+export class RawImage extends MaskableGraphic {
+    mainTexture;
+    onAfterCreated() {
+        super.onAfterCreated();
+        // console.log(this);
+        // if (this.mainTexture) {
+        //     this.mainTexture.flipY = true;
+        //     this.mainTexture.needsUpdate = true;
+        // }
+        this.setTexture(this.mainTexture);
+    }
+}
+__decorate([
+    serializeable(Texture)
+], RawImage.prototype, "mainTexture", void 0);
+//# sourceMappingURL=Image.js.map

package/lib/engine-components/ui/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../engine-components/ui/Image.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,MAAM;IAER,OAAO,CAAiB;IAExB,IAAI,CAAqC;CAC5C;AAHG;IADC,aAAa,CAAC,OAAO,CAAC;uCACC;AAK5B,MAAM,OAAO,KAAM,SAAQ,eAAe;IAGtC,MAAM,CAAU;IAER,eAAe;QACnB,QAAQ,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;YAChC,KAAK,sBAAsB,CAAC;YAC5B,KAAK,UAAU,CAAC;YAChB,KAAK,YAAY;gBACb,OAAO,IAAI,CAAC;SACnB;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAES,cAAc,CAAC,IAAS;QAC9B,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,IAAI,CAAC,WAAW,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YACzC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACzB;IACL,CAAC;IAES,cAAc;QACpB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,eAAe,EAAE;YAAE,OAAO;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,CAAC;CACJ;AA1BG;IADC,aAAa,CAAC,MAAM,CAAC;qCACN;AA4BpB,MAAM,OAAO,QAAS,SAAQ,eAAe;IAEzC,WAAW,CAAW;IAEZ,cAAc;QACpB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,qBAAqB;QACrB,0BAA0B;QAC1B,qCAAqC;QACrC,2CAA2C;QAC3C,IAAI;QACJ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACtC,CAAC;CACJ;AAXG;IADC,aAAa,CAAC,OAAO,CAAC;6CACD"}

package/lib/engine-components/ui/InputField.d.ts

@@ -0,0 +1,25 @@
+import { Behaviour } from "../Component";
+import { IPointerEventHandler } from "./PointerEvents";
+import { EventList } from "../EventList";
+export declare class InputField extends Behaviour implements IPointerEventHandler {
+    get text(): string;
+    get isFocused(): boolean;
+    private textComponent?;
+    private placeholder?;
+    onValueChanged?: EventList;
+    onEndEdit?: EventList;
+    private static active;
+    private static activeTime;
+    private static htmlField;
+    private inputEventFn;
+    start(): void;
+    onEnable(): void;
+    onDisable(): void;
+    onPointerClick(_args: any): void;
+    private activeLoop;
+    private onSelected;
+    private onDeselected;
+    private onInput;
+    private setTextFromInputField;
+    private selectInputField;
+}

package/lib/engine-components/ui/InputField.js

@@ -0,0 +1,179 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Behaviour, GameObject } from "../Component";
+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 {
+    get text() {
+        return this.textComponent?.text ?? "";
+    }
+    get isFocused() {
+        return InputField.active === this;
+    }
+    textComponent;
+    placeholder;
+    onValueChanged;
+    onEndEdit;
+    static active = null;
+    static activeTime = -1;
+    static htmlField = null;
+    inputEventFn;
+    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();
+    }
+    *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();
+    }
+    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();
+        }
+    }
+    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();
+    }
+    onInput(evt) {
+        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;
+        // }
+    }
+    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;
+        }
+    }
+    selectInputField() {
+        if (InputField.htmlField) {
+            InputField.htmlField.setSelectionRange(InputField.htmlField.value.length, InputField.htmlField.value.length);
+            InputField.htmlField.focus();
+        }
+    }
+}
+__decorate([
+    serializeable(Text)
+], InputField.prototype, "textComponent", void 0);
+__decorate([
+    serializeable(Text)
+], InputField.prototype, "placeholder", void 0);
+__decorate([
+    serializeable(EventList)
+], InputField.prototype, "onValueChanged", void 0);
+__decorate([
+    serializeable(EventList)
+], InputField.prototype, "onEndEdit", void 0);
+//# sourceMappingURL=InputField.js.map

package/lib/engine-components/ui/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../engine-components/ui/InputField.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/Interfaces.d.ts

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

package/lib/engine-components/ui/Interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Interfaces.js.map

package/lib/engine-components/ui/Interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Interfaces.js","sourceRoot":"","sources":["../../../../engine-components/ui/Interfaces.ts"],"names":[],"mappings":""}

package/lib/engine-components/ui/Keyboard.d.ts

@@ -0,0 +1,31 @@
+import { BaseUIComponent } from './BaseUIComponent';
+import { Text } from './Text';
+declare enum KeymapOption {
+    fr = 0,
+    ru = 1,
+    de = 2,
+    es = 3,
+    el = 4,
+    nord = 5,
+    eng = 6
+}
+export declare class Keyboard extends BaseUIComponent {
+    font?: string;
+    text?: Text;
+    keymap?: KeymapOption;
+    padding?: number;
+    margin?: number;
+    fontSize?: number;
+    borderRadius?: number;
+    private colors;
+    awake(): void;
+    onEnable(): void;
+    onDisable(): void;
+    private keyboard;
+    private _lastKeyPressed;
+    private _lastKeyPressedStartTime;
+    private _lastKeyPressedTime;
+    private makeKeyboard;
+    private tryAppend;
+}
+export {};