@needle-tools/engine 3.2.11-alpha → 3.2.13-alpha

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

@@ -10,16 +10,23 @@ import { IUSDZExporterExtension } from "./Extension";
 import { Behaviour, GameObject } from "../../Component";
 import { WebXR } from "../../webxr/WebXR"
 import { serializable } from "../../../engine/engine_serialization";
-import { showBalloonWarning } from "../../../engine/debug/debug";
+import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../../../engine/debug/debug";
 import { Context } from "../../../engine/engine_setup";
 import { WebARSessionRoot } from "../../webxr/WebARSessionRoot";
 
 const debug = getParam("debugusdz");
 
-export type QuickLookOverlay = {
+export class QuickLookOverlay {
+    @serializable()
     callToAction?: string;
+    @serializable()
     checkoutTitle?: string;
+    @serializable()
     checkoutSubtitle?: string;
+
+    /** if assigned the call to action button in quicklook will open the URL. Otherwise it will just close quicklook. */
+    @serializable()
+    callToActionURL?: string;
 }
 
 export class USDZExporter extends Behaviour {
@@ -30,6 +37,9 @@ export class USDZExporter extends Behaviour {
     @serializable()
     autoExportAnimations: boolean = false;
 
+    @serializable(QuickLookOverlay)
+    overlay?: QuickLookOverlay;
+
     extensions: IUSDZExporterExtension[] = [];
 
     private link!: HTMLAnchorElement;
@@ -39,6 +49,8 @@ export class USDZExporter extends Behaviour {
 
     start() {
         if (debug) {
+            console.log(this);
+            console.log("Debug USDZ, press 't' to export")
             window.addEventListener("keydown", (evt) => {
                 switch (evt.key) {
                     case "t":
@@ -58,6 +70,12 @@ export class USDZExporter extends Behaviour {
         });
 
         if (!this.objectToExport) this.objectToExport = this.gameObject;
+
+
+        if (isDevEnvironment() && (!this.objectToExport || this.objectToExport.children.length <= 0)) {
+            showBalloonWarning("USDZ Exporter has nothing to export");
+            console.warn("USDZExporter has no objects to export assigned:", this)
+        }
     }
 
 
@@ -66,16 +84,25 @@ export class USDZExporter extends Behaviour {
         const ios = isiOS()
         const safari = isSafari();
         if (debug || (ios && safari)) {
-            this.createQuicklookButton();
+            this.addQuicklookButton();
             this.webARSessionRoot = GameObject.findObjectOfType(WebARSessionRoot) ?? undefined;
             this.lastCallback = this.quicklookCallback.bind(this);
             this.link = ensureQuicklookLinkIsCreated(this.context);
             this.link.addEventListener('message', this.lastCallback);
         }
+        if (debug)
+            showBalloonMessage("USDZ Exporter enabled: " + this.name);
     }
 
     onDisable() {
         this.link?.removeEventListener('message', this.lastCallback);
+        const ios = isiOS()
+        const safari = isSafari();
+        if (debug || (ios && safari)) {
+            this.removeQuicklookButton();
+        }
+        if (debug)
+            showBalloonMessage("USDZ Exporter disabled: " + this.name);
     }
 
     async exportAsync() {
@@ -125,14 +152,15 @@ export class USDZExporter extends Behaviour {
 
         // see https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look
         const overlay = this.buildQuicklookOverlay();
+        console.log(overlay);
         const callToAction = overlay.callToAction ? encodeURIComponent(overlay.callToAction) : "";
         const checkoutTitle = overlay.checkoutTitle ? encodeURIComponent(overlay.checkoutTitle) : "";
         const checkoutSubtitle = overlay.checkoutSubtitle ? encodeURIComponent(overlay.checkoutSubtitle) : "";
-        this.link.href = URL.createObjectURL(blob) + `#callToAction=${callToAction}&checkoutTitle=${checkoutTitle}&checkoutSubtitle=${checkoutSubtitle}&`;
+        this.link.href = URL.createObjectURL(blob) + `#callToAction=${callToAction}&checkoutTitle=${checkoutTitle}&checkoutSubtitle=${checkoutSubtitle}&callToActionURL=${overlay.callToActionURL}`;
 
 
         if (!this.lastCallback) {
-            this.lastCallback = this.quicklookCallback.bind(this);
+            this.lastCallback = this.quicklookCallback.bind(this)
             this.link.addEventListener('message', this.lastCallback);
         }
 
@@ -146,24 +174,44 @@ export class USDZExporter extends Behaviour {
 
     private lastCallback?: any;
 
-    private quicklookCallback(event) {
+    private quicklookCallback(event: Event) {
         if ((event as any)?.data == '_apple_ar_quicklook_button_tapped') {
             if (debug) showBalloonWarning("Quicklook closed via call to action button");
-            this.dispatchEvent(new CustomEvent("quicklook-button-tapped", { detail: this }));
+            var evt = new CustomEvent("quicklook-button-tapped", { detail: this });
+            this.dispatchEvent(evt);
+            if (!evt.defaultPrevented) {
+                const url = new URLSearchParams(this.link.href);
+                if (url) {
+                    const callToActionURL = url.get("callToActionURL");
+                    if (debug)
+                        showBalloonMessage("Quicklook url: " + callToActionURL);
+                    if (callToActionURL) {
+                        globalThis.open(callToActionURL, "_blank");
+                    }
+                }
+            }
         }
     }
 
     private buildQuicklookOverlay(): QuickLookOverlay {
         const obj: QuickLookOverlay = {};
-        obj.callToAction = "Close";
-        obj.checkoutTitle = "🌵 Made with Needle";
-        obj.checkoutSubtitle = "_";
+        if (this.overlay) Object.assign(obj, this.overlay);
+        if (!obj.callToAction?.length)
+            obj.callToAction = "Close";
+        if (!obj.checkoutTitle?.length)
+            obj.checkoutTitle = "🌵 Made with Needle";
+        if (!obj.checkoutSubtitle?.length)
+            obj.checkoutSubtitle = "_";
         // Use the quicklook-overlay event to customize the overlay
         this.dispatchEvent(new CustomEvent("quicklook-overlay", { detail: obj }));
         return obj;
     }
 
-    private _arButton?: HTMLElement;
+
+
+
+    private _quicklookButton?: HTMLElement;
+
     private async createQuicklookButton() {
         if (!this.webxr) {
             await delay(1);
@@ -171,8 +219,8 @@ export class USDZExporter extends Behaviour {
             if (this.webxr) {
                 if (this.webxr.VRButton) this.webxr.VRButton.parentElement?.removeChild(this.webxr.VRButton);
                 // check if we have an AR button already and re-use that
-                if (this.webxr.ARButton && this._arButton !== this.webxr.ARButton) {
-                    this._arButton = this.webxr.ARButton;
+                if (this.webxr.ARButton && this._quicklookButton !== this.webxr.ARButton) {
+                    this._quicklookButton = this.webxr.ARButton;
                     // Hack to remove the immersiveweb link
                     const linkInButton = this.webxr.ARButton.parentElement?.querySelector("a");
                     if (linkInButton) {
@@ -185,6 +233,7 @@ export class USDZExporter extends Behaviour {
                         this.exportAsync();
                     });
                     this.webxr.ARButton.classList.add("quicklook-ar-button");
+                    this._quicklookButtonContainer = this.webxr.ARButton.parentElement;
                     this.dispatchEvent(new CustomEvent("created-button", { detail: this.webxr.ARButton }))
                 }
                 // create a button if WebXR didnt create one yet
@@ -205,6 +254,7 @@ export class USDZExporter extends Behaviour {
                     button.classList.add('webxr-button');
                     button.classList.add("quicklook-ar-button");
                     container.appendChild(button);
+                    this._quicklookButtonContainer = container;
                     this.dispatchEvent(new CustomEvent("created-button", { detail: button }))
                 }
             }
@@ -214,20 +264,15 @@ export class USDZExporter extends Behaviour {
         }
     }
 
-    private resetStyles(el: HTMLElement) {
-        el.style.position = "";
-        el.style.top = "";
-        el.style.left = "";
-        el.style.width = "";
-        el.style.height = "";
-        el.style.margin = "";
-        el.style.padding = "";
-        el.style.border = "";
-        el.style.background = "";
-        el.style.color = "";
-        el.style.font = "";
-        el.style.textAlign = "";
-        el.style.opacity = "";
-        el.style.zIndex = "";
+
+    private _quicklookButtonContainer: Element | null = null;
+    private async addQuicklookButton() {
+        await this.createQuicklookButton();
+        if (this._quicklookButton && this._quicklookButtonContainer) {
+            this._quicklookButtonContainer.appendChild(this._quicklookButton);
+        }
+    }
+    private removeQuicklookButton() {
+        this._quicklookButton?.remove();
     }
 }