@needle-tools/engine 2.24.0-pre

package/src/engine-components/DropListener.ts

@@ -0,0 +1,101 @@
+import { Behaviour, GameObject } from "./Component";
+import { RaycastOptions } from "../engine/engine_physics";
+import * as files from "../engine/engine_networking_files";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Networking } from "../engine-components/Networking";
+import { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
+
+// web.download_file("487f7b22f68312d2c1bbc93b1aea445b.glb", "487f7b22f68312d2c1bbc93b1aea445b", 28152).then(async res => {
+//     console.log(res);
+//     const gltf = await parseSync(res);
+//     scene.add(gltf.scene);
+//     console.log("GLTF", gltf);
+// });
+
+export enum DropListenerEvents {
+    ObjectAdded = "object-added",
+}
+
+
+export class DropListener extends Behaviour {
+
+    @serializeable()
+    filesBackendUrl?: string;
+
+    @serializeable()
+    localhost?:string;
+    
+    private _dragOver!: (evt: DragEvent) => void;
+    private _drop!: (evt: DragEvent) => void;
+
+    onEnable(): void {
+        this.filesBackendUrl = this.filesBackendUrl ? Networking.GetUrl(this.filesBackendUrl, this.localhost) : undefined;
+
+        this._dragOver = this.onDrag.bind(this);
+        this._drop = this.onDrop.bind(this);
+        this.context.domElement.addEventListener("dragover", this._dragOver);
+        this.context.domElement.addEventListener("drop", this._drop);
+    }
+
+    onDisable(): void {
+        this.context.domElement.removeEventListener("dragover", this._dragOver);
+        this.context.domElement.removeEventListener("drop", this._drop);
+    }
+
+    private onDrag(evt: DragEvent) {
+        // necessary to get drop event
+        evt.preventDefault();
+    }
+
+    private async onDrop(evt: DragEvent) {
+        console.log(evt);
+        if (!evt.dataTransfer) return;
+        evt.preventDefault();
+        const items = evt.dataTransfer.items;
+        if (!items) return;
+
+        for (const ite in items) {
+            const it = items[ite];
+            if (it.kind === "file") {
+                const file = it.getAsFile();
+                if (!file) continue;
+                console.log("Register file " + file.name + " to", this.filesBackendUrl, file);
+                const res = await files.addFile(file, this.context, this.filesBackendUrl);
+                if (res)
+                    this.addObject(evt, res);
+            }
+            else if (it.kind === "string" && it.type == "text/plain") {
+                it.getAsString(async str => {
+                    console.log("dropped url", str);
+                    try {
+                        const url = new URL(str);
+                        if (!url) return;
+                        const res = await files.addFileFromUrl(url, this.context);
+                        if (res)
+                            this.addObject(evt, res);
+                    }
+                    catch (_) {
+                        console.log("dropped string is not a valid URL!", str);
+                    }
+                });
+            }
+        }
+    }
+
+    private async addObject(evt: DragEvent, gltf: GLTF) {
+        console.log("Dropped", gltf);
+        const opts = new RaycastOptions();
+        opts.setMask(0xffffff);
+        opts.screenPointFromOffset(evt.offsetX, evt.offsetY);
+        const rc = this.context.physics.raycast(opts);
+        const obj = gltf.scene;
+        if (rc && rc.length > 0) {
+            for (const hit of rc) {
+                obj.position.copy(hit.point);
+                break;
+            }
+        }
+        this.gameObject.add(obj);
+        this.dispatchEvent(new CustomEvent(DropListenerEvents.ObjectAdded, { detail: obj }));
+    }
+}

package/src/engine-components/Duplicatable.ts

@@ -0,0 +1,146 @@
+import { Behaviour, GameObject, InstantiateOptions } from "./Component";
+import { WebXRController, ControllerEvents } from "./WebXRController";
+import { DragControls, DragEvents } from "./DragControls";
+import { Interactable } from "./Interactable";
+import { Animation } from "./Animation";
+import { Vector3, Quaternion, Object3D } from "three";
+import { serializeable } from "../engine/engine_serialization_decorator";
+
+export class Duplicatable extends Interactable {
+
+    @serializeable(Object3D)
+    parent: GameObject | null = null;
+    @serializeable(Object3D)
+    object: GameObject | null = null;
+
+    // limit max object spawn count per interval
+    @serializeable()
+    limitCount = 10;
+    @serializeable()
+    limitInterval = 60;
+
+    private _currentCount = 0;
+    private _startPosition: THREE.Vector3 | null = null;
+    private _startQuaternion: THREE.Quaternion | null = null;
+
+    awake(): void {
+        // TODO: add support to not having to assign a object to clone
+        // if(!this.object){
+        //     const opts = new InstantiateOptions();
+        //     opts.parent = this.gameObject;
+        //     opts.idProvider = InstantiateIdProvider.createFromString(this.guid);
+        //     const clone = GameObject.instantiate(this.gameObject, opts);
+        //     const duplicatable = 
+        //     this.object = clone;
+        // }
+        // console.log(this, this.object);
+        if (this.object) {
+            if (this.object === this.gameObject) {
+                console.error("Can not duplicate self");
+                return;
+            }
+            this.object.visible = false;
+
+            // when this is in a moveable parent in multiuser scenario somehow the object position gets an offset and might stay that way
+            // this is just a workaround to set the object position before duplicating
+            this._startPosition = this.object.position?.clone() ?? new Vector3(0, 0, 0);
+            this._startQuaternion = this.object.quaternion?.clone() ?? new Quaternion(0, 0, 0, 1);
+        }
+
+        const drag = GameObject.getComponentInParent(this.gameObject, DragControls);
+        if (drag) {
+            drag.addDragEventListener(DragEvents.SelectStart, (_ctrls, args) => {
+                if (this._currentCount >= this.limitCount) {
+                    args.attached = null;
+                    return;
+                }
+                const res = this.handleDuplication(args.selected);
+                if (res) {
+                    console.assert(res !== args.selected, "Duplicated object is original");
+                    args.attached = res;
+                }
+            });
+        }
+        else console.warn("Could no find drag controls in parent", this.name);
+
+        WebXRController.addEventListener(ControllerEvents.SelectStart, (_controller: WebXRController, args: { selected: THREE.Object3D, grab: THREE.Object3D | GameObject | null }) => {
+            if (this._currentCount >= this.limitCount) {
+                args.grab = null;
+                return;
+            }
+            const res = this.handleDuplication(args.selected);
+            if (res) args.grab = res;
+        });
+
+        this.cloneLimitIntervalFn();
+    }
+
+    private cloneLimitIntervalFn() {
+        if (this.destroyed) return;
+        if (this._currentCount > 0) {
+            this._currentCount -= 1;
+        }
+        setTimeout(() => {
+            this.cloneLimitIntervalFn();
+        }, (this.limitInterval / this.limitCount) * 1000);
+    }
+
+    private handleDuplication(selected: THREE.Object3D): THREE.Object3D | null {
+        if (this._currentCount >= this.limitCount) return null;
+        if (!this.object) return null;
+        if (selected === this.gameObject || this.handleMultiObject(selected)) {
+
+            if (this.object === this.gameObject) return null;
+            this.object.visible = true;
+
+            if (this._startPosition)
+                this.object.position.copy(this._startPosition);
+            if (this._startQuaternion)
+                this.object.quaternion.copy(this._startQuaternion);
+
+            const opts = new InstantiateOptions();
+            if (!this.parent) this.parent = this.gameObject.parent as GameObject;
+            if (this.parent) {
+                opts.parent = this.parent.guid ?? this.parent.userData?.guid;
+                opts.keepWorldPosition = true;
+            }
+            opts.position = this.worldPosition;
+            opts.rotation = this.worldQuaternion;
+            opts.context = this.context;
+            this._currentCount += 1;
+
+            const newInstance = GameObject.instantiateSynced(this.object as GameObject, opts) as GameObject;
+            console.assert(newInstance !== this.object, "Duplicated object is original");
+            this.object.visible = false;
+
+            // see if this fixes object being offset when duplicated and dragged - it looks like three clone has shared position/quaternion objects?
+            if (this._startPosition)
+                this.object.position.clone().copy(this._startPosition);
+            if (this._startQuaternion)
+                this.object.quaternion.clone().copy(this._startQuaternion);
+
+            return newInstance;
+        }
+        return null;
+    }
+
+    private handleMultiObject(selected: THREE.Object3D): boolean {
+        const shouldSearchInChildren = this.gameObject.type === "Group" || this.gameObject.type === "Object3D";
+        if (!shouldSearchInChildren) return false;
+        return this.isInChildren(this.gameObject, selected);
+    }
+
+    private isInChildren(current: THREE.Object3D, search: THREE.Object3D): boolean {
+        if (!current) return false;
+        if (current === search) return true;
+        if (current.children) {
+            for (let child of current.children) {
+                if (this.isInChildren(child, search)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+}

package/src/engine-components/EventList.ts

@@ -0,0 +1,116 @@
+
+export class CallInfo {
+    method?: Function;
+    enabled: boolean;
+
+    constructor(method?: Function, enabled?: boolean) {
+        this.method = method;
+        this.enabled = enabled !== undefined ? enabled : true;
+    }
+
+    invoke(...args: any) {
+        if (this.enabled === false) return;
+        if (!this.method) {
+            console.warn("No function. Please check you assigned a method to invoke on export", this);
+            return;
+        }
+        this.method(...args);
+    }
+
+}
+
+const isUpperCase = (string) => /^[A-Z]*$/.test(string);
+
+export class EventListEvent extends Event { //implements ArrayLike<T> {
+
+    args?: [];
+}
+
+// UnityEvent is emitted as EventList
+export class EventList {
+
+    private target?: object;
+    private key?: string;
+
+    // TODO: serialization should not take care of the args but instead give them to the eventlist directly
+    // so we can handle passing them on here instead of in the serializer
+    // this would also allow us to pass them on to the component EventTarget
+
+    /** set an event target to try invoke the EventTarget dispatchEvent when this EventList is invoked */
+    setEventTarget(key: string, target: object) {
+        this.key = key;
+        this.target = target;
+        if (this.key !== undefined) {
+            let temp = "";
+            let foundFirstLetter = false;
+            for (let c of this.key) {
+                if (foundFirstLetter && isUpperCase(c))
+                    temp += "-";
+                foundFirstLetter = true;
+                temp += c.toLowerCase();
+            }
+            this.key = temp;
+        }
+    }
+
+    private _isInvoking: boolean = false;
+
+    // TODO: can we make functions serializable?
+    private methods: CallInfo[] = [];
+
+    constructor(evts?: CallInfo[]) {
+        this.methods = evts ?? [];
+    }
+
+    invoke(...args: any) {
+        if (this._isInvoking) {
+            console.warn("Circular event invocation detected. Please check your event listeners for circular references.", this);
+            return;
+        }
+
+
+        this._isInvoking = true;
+        try {
+
+            // first invoke all the methods that were subscribed to this eventlist
+            for (const m of this.methods) {
+                m.invoke(...args);
+            }
+
+            // then try to dispatch the event on the object that is owning this eventlist
+            // with this we get automatic event listener support for unity events on all componnets
+            // so example for a component with a click UnityEvent you can also subscribe to the component like this:
+            // myComponent.addEventListener("click", args => {...")
+            if (typeof this.target === "object" && typeof this.key === "string") {
+                const fn = this.target["dispatchEvent"];
+                if (typeof fn === "function") {
+                    const evt = new EventListEvent(this.key);
+                    evt.args = args;
+                    fn.call(this.target, evt);
+                }
+            }
+        }
+        finally {
+            this._isInvoking = false;
+        }
+    }
+
+    addEventListener(cb: Function): Function {
+        this.methods.push(new CallInfo(cb, true));
+        return cb;
+    }
+
+    removeEventListener(cb: Function | null | undefined) {
+        if (!cb) return;
+        for (let i = this.methods.length - 1; i >= 0; i--) {
+            if (this.methods[i].method === cb) {
+                this.methods[i].enabled = false;
+                this.methods.splice(i, 1);
+            }
+        }
+    }
+
+    removeAllEventListeners() {
+        this.methods.length = 0;
+    }
+}

package/src/engine-components/EventTrigger.ts

@@ -0,0 +1,28 @@
+import { Behaviour } from "./Component"
+import { EventType } from "./EventType"
+
+export class EventTrigger extends Behaviour {
+/*
+    private triggers: Array<{ key: EventType, callbacks: Array<Function> }> = [];
+    private events: Map<EventType, Array<Function>> = new Map();
+
+    awake() {
+        for (const i in this.triggers) {
+            const evt = this.triggers[i];
+            const key = EventType[evt.key];
+            this.events.set(key, evt.callbacks);
+        }
+        console.log(this);
+        // console.log(this.events);
+    }
+
+    public invoke(type: EventType) {
+        const evt = this.events.get(type);
+        if (evt) {
+            evt.forEach(callback => {
+                callback();
+            });
+        }
+    }
+*/
+}

package/src/engine-components/EventType.ts

@@ -0,0 +1,88 @@
+
+export enum EventType {
+
+    /// <summary>
+    /// Intercepts a IPointerEnterHandler.OnPointerEnter.
+    /// </summary>
+    PointerEnter = 0,
+
+    /// <summary>
+    /// Intercepts a IPointerExitHandler.OnPointerExit.
+    /// </summary>
+    PointerExit = 1,
+
+    /// <summary>
+    /// Intercepts a IPointerDownHandler.OnPointerDown.
+    /// </summary>
+    PointerDown = 2,
+
+    /// <summary>
+    /// Intercepts a IPointerUpHandler.OnPointerUp.
+    /// </summary>
+    PointerUp = 3,
+
+    /// <summary>
+    /// Intercepts a IPointerClickHandler.OnPointerClick.
+    /// </summary>
+    PointerClick = 4,
+
+    /// <summary>
+    /// Intercepts a IDragHandler.OnDrag.
+    /// </summary>
+    Drag = 5,
+
+    /// <summary>
+    /// Intercepts a IDropHandler.OnDrop.
+    /// </summary>
+    Drop = 6,
+
+    /// <summary>
+    /// Intercepts a IScrollHandler.OnScroll.
+    /// </summary>
+    Scroll = 7,
+
+    /// <summary>
+    /// Intercepts a IUpdateSelectedHandler.OnUpdateSelected.
+    /// </summary>
+    UpdateSelected = 8,
+
+    /// <summary>
+    /// Intercepts a ISelectHandler.OnSelect.
+    /// </summary>
+    Select = 9,
+
+    /// <summary>
+    /// Intercepts a IDeselectHandler.OnDeselect.
+    /// </summary>
+    Deselect = 10,
+
+    /// <summary>
+    /// Intercepts a IMoveHandler.OnMove.
+    /// </summary>
+    Move = 11,
+
+    /// <summary>
+    /// Intercepts IInitializePotentialDrag.InitializePotentialDrag.
+    /// </summary>
+    InitializePotentialDrag = 12,
+
+    /// <summary>
+    /// Intercepts IBeginDragHandler.OnBeginDrag.</
+    /// </summary>
+    BeginDrag = 13,
+
+    /// <summary>
+    /// Intercepts IEndDragHandler.OnEndDrag.
+    /// </summary>
+    EndDrag = 14,
+
+    /// <summary>
+    /// Intercepts ISubmitHandler.Submit.
+    /// </summary>
+    Submit = 15,
+
+    /// <summary>
+    /// Intercepts ICancelHandler.OnCancel.
+    /// </summary>
+    Cancel = 16
+}

package/src/engine-components/FlyControls.ts

@@ -0,0 +1,27 @@
+import { Behaviour, GameObject } from "./Component";
+import { FlyControls as ThreeFlyControls } from "three/examples/jsm/controls/FlyControls";
+import { Camera } from "./Camera";
+
+export class FlyControls extends Behaviour {
+    private _controls: ThreeFlyControls | null = null;
+
+    onEnable(): void {
+        const cam = GameObject.getComponent(this.gameObject, Camera)?.cam;
+        this._controls = new ThreeFlyControls(cam!, this.context.renderer.domElement);
+        this._controls.rollSpeed = .5;
+        this._controls.movementSpeed = 3;
+        this._controls.dragToLook = true;
+        
+    }
+
+    onDisable(): void {
+        this._controls?.dispose();
+        this._controls = null;
+    }
+
+    update(): void {
+        if (this._controls)
+            this._controls.update(this.context.time.deltaTime);
+    }
+
+}

package/src/engine-components/Gizmos.ts

@@ -0,0 +1,53 @@
+import { Behaviour } from "./Component";
+import * as THREE from "three";
+import * as Gizmos from "../engine/engine_gizmos";
+import * as params from "../engine/engine_default_parameters";
+import { FrameEvent } from "../engine/engine_setup";
+import { BoxHelper, Color } from "three";
+import { serializeable } from "../engine/engine_serialization_decorator";
+
+
+export class BoxGizmo extends Behaviour {
+    @serializeable()
+    objectBounds: boolean = false;
+    @serializeable(Color)
+    color?: THREE.Color;
+    @serializeable()
+    isGizmo : boolean = true;
+
+    private _gizmoObject: THREE.Object3D | null | BoxHelper = null;
+    private _boxHelper: BoxHelper | null = null;
+
+    onEnable(): void {
+        if (this.isGizmo && !params.showGizmos) return;
+        if (!this._gizmoObject) {
+            if (this.objectBounds && this.gameObject["isMesh"] === true) {
+                this._gizmoObject = new THREE.BoxHelper(this.gameObject, this.color ?? 0xffff00);
+            }
+            else {
+                this.objectBounds = false;
+                this._gizmoObject = Gizmos.CreateWireCube(this.color ?? 0xffff00);
+            }
+        }
+        if (this.objectBounds) {
+            this.scene.add(this._gizmoObject);
+            this._boxHelper = this._gizmoObject as BoxHelper;
+            this.startCoroutine(this.syncObjectBounds(), FrameEvent.OnBeforeRender);
+        }
+        else
+            this.gameObject.add(this._gizmoObject);
+    }
+
+    onDisable(): void {
+        if (this._gizmoObject) {
+            this.gameObject.remove(this._gizmoObject);
+        }
+    }
+
+    private *syncObjectBounds() {
+        while (this._boxHelper) {
+            this._boxHelper?.update();
+            yield;
+        }
+    }
+}