@needle-tools/engine 3.5.5-alpha → 3.5.6-alpha

package/src/engine-components/export/usdz/USDZExporter.ts

@@ -66,7 +66,6 @@ export class USDZExporter extends Behaviour {
     private webARSessionRoot: WebARSessionRoot | undefined;
 
     start() {
-        console.log(this.customUsdzFile);
         if (debug) {
             console.log(this);
             console.log("Debug USDZ, press 't' to export")

package/src/engine-components/js-extensions/Object3D.ts

@@ -2,7 +2,7 @@ import { applyPrototypeExtensions, registerPrototypeExtensions } from "./Extensi
 import { Object3D } from "three";
 import { Constructor, ConstructorConcrete, IComponent } from "../../engine/engine_types"
 import { IComponent as Component } from "../../engine/engine_types";
-import { addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components";
+import { moveComponentInstance, addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components";
 import { isActiveSelf, setActive, destroy } from "../../engine/engine_gameobject";
 
 // used to decorate cloned object3D objects with the same added components defined above
@@ -24,6 +24,10 @@ Object3D.prototype["destroy"] = function () {
     destroy(this);
 }
 
+Object3D.prototype["addComponent"] = function <T extends IComponent>(instance: T) {
+    return moveComponentInstance(this, instance);
+}
+
 Object3D.prototype["addNewComponent"] = function <T extends Component>(type: ConstructorConcrete<T>) {
     return addNewComponent(this, new type());
 }

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

@@ -68,6 +68,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
         if (debug)
             console.log("Button Enter", this.animationTriggers?.highlightedTrigger, this.animator);
         this._isHovered = true;
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this.animationTriggers.highlightedTrigger);
         }
@@ -81,6 +82,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
         if (debug)
             console.log("Button Exit", this.animationTriggers?.highlightedTrigger, this.animator);
         this._isHovered = false;
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this.animationTriggers.normalTrigger);
         }
@@ -93,6 +95,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     onPointerDown(_) {
         if (debug)
             console.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this.animationTriggers.pressedTrigger);
         }
@@ -104,6 +107,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     onPointerUp(_) {
         if (debug)
             console.warn("Button Up", this.animationTriggers?.highlightedTrigger, this.animator, this._isHovered);
+        if (!this.interactable) return;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.setTrigger(this._isHovered ? this.animationTriggers.highlightedTrigger : this.animationTriggers.normalTrigger);
         }
@@ -113,6 +117,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     }
 
     onPointerClick(_args: PointerEventData) {
+        if (!this.interactable) return;
         if (debug) {
             console.warn("Button Click", this.onClick);
             showBalloonMessage("CLICKED button " + this.name + " at " + this.context.time.frameCount);

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

@@ -293,7 +293,8 @@ export class Canvas extends UIRootComponent implements ICanvas {
         let camera = this.context.mainCameraComponent;
         let planeDistance: number = 10;
         if (camera && camera.nearClipPlane > 0 && camera.farClipPlane > 0) {
-            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .5);
+            // TODO: this is a hack/workaround for event system currently only passing events to the nearest object
+            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .15);
         }
         if (this._renderMode === RenderMode.ScreenSpaceCamera) {
             if (this.worldCamera)

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

@@ -38,12 +38,10 @@ export class CanvasGroup extends Behaviour implements ICanvasGroup {
         this.applyChangesNow();
     }
 
-    private _buffer : Graphic[] = [];
+    private _buffer: Graphic[] = [];
     private applyChangesNow() {
         for (const ch of GameObject.getComponentsInChildren(this.gameObject, Graphic, this._buffer)) {
-            const col = ch.color;
-            col.alpha = this._alpha;
-            ch.color = col;
+            ch.setAlphaFactor(this._alpha);
         }
     }
 }

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

@@ -9,12 +9,12 @@ import { onChange, scheduleAction } from "./Utils"
 import { GameObject } from '../Component';
 import SimpleStateBehavior from "three-mesh-ui/examples/behaviors/states/SimpleStateBehavior"
 import { Outline } from './Outline';
-import { BehaviorExtension, UsdzBehaviour } from '../../engine-components/export/usdz/extensions/behavior/Behaviour';
-import { USDObject } from '../../engine-components/export/usdz/ThreeUSDZExporter';
 
-const _colorStateObject: { backgroundColor: Color, backgroundOpacity: number } = {
+const _colorStateObject: { backgroundColor: Color, backgroundOpacity: number, borderColor: Color, borderOpacity: number } = {
     backgroundColor: new Color(1, 1, 1),
     backgroundOpacity: 1,
+    borderColor: new Color(1, 1, 1),
+    borderOpacity: 1,
 };
 
 export class Graphic extends BaseUIComponent implements IGraphic, IRectTransformChangedReceiver {
@@ -35,10 +35,20 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         this._color.copy(col);
     }
 
+    private _alphaFactor: number = 1;
+    setAlphaFactor(factor: number) {
+        this._alphaFactor = factor;
+        this.onColorChanged();
+    }
+
     protected onColorChanged() {
-        _colorStateObject.backgroundColor = this._color;
-        _colorStateObject.backgroundOpacity = this._color.alpha;
-        this.uiObject?.set(_colorStateObject);
+        if (this.uiObject) {
+            _colorStateObject.backgroundColor = this._color;
+            _colorStateObject.backgroundOpacity = this._color.alpha * this._alphaFactor;
+            this.applyEffects(_colorStateObject, this._alphaFactor);
+            this.uiObject.set(_colorStateObject);
+            this.markDirty();
+        }
     }
 
     // used via animations
@@ -52,10 +62,9 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     protected uiObject: ThreeMeshUI.Block | null = null;
     private _color: RGBAColor = null!;
 
-
     private _rect: RectTransform | null = null;
 
-    private _stateManager : SimpleStateBehavior | null = null;
+    private _stateManager: SimpleStateBehavior | null = null;
 
     protected get rectTransform(): RectTransform {
         if (!this._rect) {
@@ -65,7 +74,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     }
 
     onParentRectTransformChanged() {
-        this.uiObject?.set({ width: this.rectTransform.width, height:this.rectTransform.height })
+        this.uiObject?.set({ width: this.rectTransform.width, height: this.rectTransform.height })
         this.markDirty();
     }
 
@@ -73,7 +82,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         super.__internalNewInstanceCreated();
         this._rect = null;
         this.uiObject = null;
-        if(this._color) this._color = this._color.clone();
+        if (this._color) this._color = this._color.clone();
     }
 
     setState(state: string) {
@@ -93,7 +102,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
             // ie : (::firstChild::hover::disabled) where firstchild, hover and disabled are all on different channels
             // In order to keep needle Raycaster and EventSystem intact, I added in v7 a SimpleStateBehavior, which acts as previously
 
-            if( !this._stateManager ) this._stateManager = new SimpleStateBehavior(this.uiObject);
+            if (!this._stateManager) this._stateManager = new SimpleStateBehavior(this.uiObject);
             //@ts-ignore
             this.uiObject.setupState(state.state, state.attributes);
         }
@@ -159,13 +168,13 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     }
     protected onAfterCreated() { }
 
-    private applyEffects(opts){
+    private applyEffects(opts, alpha: number = 1) {
         const outline = this.gameObject?.getComponent(Outline);
         if (outline) {
             if (outline.effectDistance) opts.borderWidth = Math.max(Math.abs(outline.effectDistance.x), Math.abs(outline.effectDistance.y));
             if (outline.effectColor) {
                 opts.borderColor = outline.effectColor;
-                opts.borderOpacity = outline.effectColor.alpha;
+                opts.borderOpacity = outline.effectColor.alpha * alpha;
             }
         }
     }
@@ -177,8 +186,8 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         this.setOptions({ backgroundOpacity: 0 });
         if (tex) {
             // workaround for https://github.com/needle-tools/needle-engine-support/issues/109
-            if(tex.encoding === sRGBEncoding) {
-                if(Graphic.textureCache.has(tex)) {
+            if (tex.encoding === sRGBEncoding) {
+                if (Graphic.textureCache.has(tex)) {
                     tex = Graphic.textureCache.get(tex)!;
                 } else {
                     const clone = tex.clone();

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

@@ -14,7 +14,11 @@ export interface ICanvasGroup {
     interactable: boolean;
 }
 
-export interface IGraphic extends IComponent {
+export interface IHasImage {
+    setAlphaFactor(val: number);
+}
+
+export interface IGraphic extends IComponent, IHasImage {
     get isGraphic(): boolean;
     raycastTarget: boolean;
 }