@needle-tools/engine 4.12.1-next.d0e7ab9 → 4.12.2

package/lib/engine/webcomponents/needle-engine.js

@@ -224,7 +224,7 @@ export class NeedleEngineWebComponent extends HTMLElement {
     <canvas></canvas>
 </div>
 <div class="content">
-    <slot class="overlay-content"></slot>
+    <slot class="overlay-content" style="display: contents;"></slot>
 </div>
 `;
         // #endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.12.1-next.d0e7ab9",
+  "version": "4.12.2",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {
@@ -176,4 +176,4 @@
   "module": "lib/needle-engine.js",
   "typings": "lib/needle-engine.d.ts",
   "types": "lib/needle-engine.d.ts"
-}
+}

package/src/engine/debug/debug_overlay.ts

@@ -110,7 +110,11 @@ function onParseError(args: Array<any>) {
 export function addLog(type: LogType, message: string | any[], _file?: string | null, _line?: number | null) {
     if (hide) return;
     const context = ContextRegistry.Current;
-    const domElement = context?.domElement ?? document.querySelector("needle-engine");
+    let domElement = context?.domElement ?? document.querySelector("needle-engine");
+    // check if we're in webxr dom overlay
+    if (context.isInAR) {
+        domElement = context.arOverlayElement;
+    }
     if (!domElement) return;
     if (Array.isArray(message)) {
         let newMessage = "";

package/src/engine/webcomponents/buttons.ts

@@ -176,7 +176,7 @@ export class ButtonsFactory {
      * The QR code will be generated with the current URL when the button is clicked
      * @returns the QR code button element
      */
-    createQRCode(): HTMLButtonElement {
+    createQRCode(opts?: { anchorElement?: HTMLElement }): HTMLButtonElement {
 
         if (this._qrButton) return this._qrButton;
 
@@ -223,7 +223,7 @@ export class ButtonsFactory {
             // TODO: we would need to search for the right engine element to insert this into if there are more
             // Insert the QR code overlay inside the needle-engine element
             const engine_element = document.body.querySelector("needle-engine");
-            const parent = engine_element || document.body;
+            const parent = opts?.anchorElement?.parentElement || engine_element || document.body;
             parent.appendChild(qrCodeContainer);
             const containerRect = qrCodeElement.getBoundingClientRect();
             const buttonRect = qrCodeButton.getBoundingClientRect();

package/src/engine/webcomponents/needle-button.ts

@@ -1,4 +1,5 @@
 import { isDevEnvironment } from "../debug/index.js";
+import { ButtonsFactory } from "./buttons.js";
 import { iconFontUrl, loadFont } from "./fonts.js";
 import { WebXRButtonFactory } from "./WebXRButtons.js";
 
@@ -41,7 +42,7 @@ const isDev = isDevEnvironment();
  */
 export class NeedleButtonElement extends HTMLElement {
 
-    static observedAttributes = ["ar", "vr", "quicklook"];
+    static observedAttributes = ["ar", "vr", "quicklook", "qrcode"];
 
     constructor() {
         super();
@@ -62,13 +63,13 @@ export class NeedleButtonElement extends HTMLElement {
     #button: HTMLButtonElement | undefined;
     /** If AR or VR is requested we create and use the webxr button factory to create a button with default behaviour */
     #webxrfactory: WebXRButtonFactory | undefined;
+    #buttonfactory: ButtonsFactory | undefined;
 
     #observer: MutationObserver | undefined;
 
     #update() {
         this.#button?.remove();
 
-
         if (this.getAttribute("ar") != null) {
             this.#webxrfactory ??= new WebXRButtonFactory()
             this.#button = this.#webxrfactory.createARButton();
@@ -81,11 +82,15 @@ export class NeedleButtonElement extends HTMLElement {
             this.#webxrfactory ??= new WebXRButtonFactory()
             this.#button = this.#webxrfactory.createQuicklookButton();
         }
+        else if (this.getAttribute("qrcode") != null) {
+            this.#buttonfactory ??= new ButtonsFactory();
+            this.#button = this.#buttonfactory.createQRCode({ anchorElement: this });
+        }
         else {
             if (isDev) {
                 console.warn("No button type specified for <needle-button>. Use either ar, vr or quicklook attribute.")
             }
-            else {
+            else {
                 console.debug("No button type specified for <needle-button>. Use either ar, vr or quicklook attribute.")
             }
             return;
@@ -96,30 +101,29 @@ export class NeedleButtonElement extends HTMLElement {
         this.#styles ??= document.createElement("style");
         this.#styles.innerHTML = `
             button {
-                all: initial;
-                cursor: inherit;
-                color: inherit;
-                font-family: inherit;
-                gap: inherit;
-                white-space: nowrap;
+                all: unset;
             }
         `;
         const hasUnstyledAttribute = this.getAttribute("unstyled") != undefined;
         if (!hasUnstyledAttribute) {
             this.#styles.innerHTML += `
             :host {
-                display: inline-block;
-                background: rgba(255, 255, 255, .8);
-                backdrop-filter: blur(10px);
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
                 width: fit-content;
-                transition: background .2s;
 
-                cursor: pointer;
                 padding: 0.4rem .5rem;
-                border-radius: 0.8rem;
-                color: black;
+                border-radius: 100vw;
+                
                 background: rgba(245, 245, 245, .8);
+                backdrop-filter: blur(10px);
+
+                cursor: pointer;
+                color: black;
                 outline: rgba(0,0,0,.05) 1px solid;
+
+                transition: all .2s;
             }
             :host(:hover) {
                 background: rgba(255, 255, 255, 1);
@@ -152,8 +156,8 @@ export class NeedleButtonElement extends HTMLElement {
         this.#observer?.disconnect();
         this.#observer ??= new MutationObserver(() => this.#updateVisibility());
         this.#observer.observe(this.#button, { attributes: true });
-        if(isDev) {
-            console.log("Needle Button updated")
+        if (isDev) {
+            console.log("Needle Button updated", this);
         }
     }
 
@@ -170,7 +174,7 @@ export class NeedleButtonElement extends HTMLElement {
 
     #onclick = (_ev: MouseEvent) => {
         if (isDev) {
-            console.log("Needle Button clicked")
+            console.log("Needle Button clicked", { defaultPrevented: _ev.defaultPrevented, hasButton: !!this.#button });
         }
         if (_ev.defaultPrevented) return;
 

package/src/engine/webcomponents/needle-engine.ar-overlay.ts

@@ -120,6 +120,7 @@ export class AROverlayHandler {
 
 
         const quitARSlot = document.createElement("slot");
+        quitARSlot.style.display = "contents";
         quitARSlot.setAttribute("name", "quit-ar");
         this.appendElement(quitARSlot, element);
         this._createdAROnlyElements.push(quitARSlot);

package/src/engine/webcomponents/needle-engine.ts

@@ -254,7 +254,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     <canvas></canvas>
 </div>
 <div class="content">
-    <slot class="overlay-content"></slot>
+    <slot class="overlay-content" style="display: contents;"></slot>
 </div>
 `;
         // #endregion