@needle-tools/engine 4.5.4 → 4.5.5

package/src/engine/engine_license.ts

@@ -1,3 +1,4 @@
+import { isDevEnvironment } from "./debug/index.js";
 import { BUILD_TIME, GENERATOR, PUBLIC_KEY, VERSION } from "./engine_constants.js";
 import { ContextEvent, ContextRegistry } from "./engine_context_registry.js";
 import { Context } from "./engine_setup.js";
@@ -68,8 +69,8 @@ function invokeLicenseCheckResultChanged(result: boolean) {
 
 ContextRegistry.registerCallback(ContextEvent.ContextRegistered, evt => {
     showLicenseInfo(evt.context);
-    sendUsageMessageToAnalyticsBackend();
     handleForbidden(evt.context);
+    setTimeout(() => sendUsageMessageToAnalyticsBackend(evt.context), 2000);
 });
 
 export let runtimeLicenseCheckPromise: Promise<void> | undefined = undefined;
@@ -336,16 +337,23 @@ async function logNonCommercialUse(_logo?: string) {
 }
 
 
-async function sendUsageMessageToAnalyticsBackend() {
+async function sendUsageMessageToAnalyticsBackend(context: IContext) {
     // We can't send beacons from cross-origin isolated pages
     if (window.crossOriginIsolated) return;
 
+    const licenseType = NEEDLE_ENGINE_LICENSE_TYPE;
+    if (licenseType === "pro") {
+        const attribute = context?.domElement?.getAttribute("no-telemetry");
+        if (attribute === "" || attribute === "true" || attribute === "1") {
+            if (debug) console.debug("Telemetry is disabled");
+            return;
+        }
+        if (debug) console.debug("Telemetry attribute: " + attribute);
+    }
+
     try {
-        const analyticsUrl = "https://needle-engine-analytics-v2-r26roub2hq-lz.a.run.app";
+        const analyticsUrl = "https:" + "//needle-engine-an" + "alytics-v2-r26roub2hq-lz" + ".a.run.app";
         if (analyticsUrl) {
-            if (debug) console.log("Analytics backend url", analyticsUrl);
-
-            // analyticsUrl = "http://localhost:3000/";
 
             // current url without query parameters
             const currentUrl = window.location.href.split("?")[0];
@@ -354,7 +362,7 @@ async function sendUsageMessageToAnalyticsBackend() {
             if (!analyticsUrl.endsWith("/")) endpoint = "/" + endpoint;
             const license = NEEDLE_ENGINE_LICENSE_TYPE;
             const finalUrl = `${analyticsUrl}${endpoint}`;
-            if (debug) console.log("Sending non-commercial usage message to analytics backend", finalUrl);
+            if (debug) console.debug("Sending beacon");
 
             const beaconData = {
                 license,
@@ -369,7 +377,7 @@ async function sendUsageMessageToAnalyticsBackend() {
                 public_key: PUBLIC_KEY,
             };
             const res = navigator.sendBeacon?.(finalUrl, JSON.stringify(beaconData));
-            if (debug) console.log("Send beacon result", res);
+            if (debug) console.debug("Sent beacon: " + res);
         }
     }
     catch (err) {

package/src/engine/engine_utils.ts

@@ -3,9 +3,11 @@ import { Quaternion, Vector2, Vector3, Vector4 } from "three";
 
 declare type Vector = Vector2 | Vector3 | Vector4 | Quaternion;
 
-import { type Context } from "./engine_context.js";
+import { needleLogoOnlySVG } from "./assets/index.js";
+import type { Context } from "./engine_context.js";
 import { ContextRegistry } from "./engine_context_registry.js";
 import { type SourceIdentifier } from "./engine_types.js";
+import type { NeedleEngineHTMLElement } from "./webcomponents/needle-engine.js";
 
 // https://schneidenbach.gitbooks.io/typescript-cookbook/content/nameof-operator.html
 /** @internal */
@@ -779,50 +781,7 @@ export async function microphonePermissionsGranted() {
     return DeviceUtilities.microphonePermissionsGranted();
 }
 
-const cloudflareIPRegex = /ip=(?<ip>.+?)\n/s;
-export async function getIpCloudflare() {
-    const data = await fetch('https://www.cloudflare.com/cdn-cgi/trace');
-    const body = await data.text();
-    // we are only interested in the ip= part:
-    const match = cloudflareIPRegex.exec(body);
-    if (match)
-        return match[1];
-    return null;
-}
-
-/** Gets the public IP address of this device. 
- * @returns IP address, or `undefined` when it can't be determined.
-*/
-export async function getIp() {
-    const res = (await fetch("https://api.db-ip.com/v2/free/self").catch(() => null));
-    if (!res) return undefined;
-    const json = await res.json() as IpAndLocation;
-    return json.ipAddress;
-}
 
-/**
- * Contains information about public IP, continent, country, state, city.  
- * This information may be affected by VPNs, proxies, or other network configurations.
- */
-export type IpAndLocation = {
-    ipAddress: string;
-    continentCode: string;
-    continentName: string;
-    countryCode: string;
-    countryName: string;
-    stateProv: string;
-    city: string;
-}
-
-/** Gets the public IP address, location, and country data of this device. 
- * @returns an object containing {@link IpAndLocation} data, or `undefined` when it can't be determined.
-*/
-export async function getIpAndLocation(): Promise<IpAndLocation | undefined> {
-    const res = (await fetch("https://api.db-ip.com/v2/free/self").catch(() => null));
-    if (!res) return undefined;
-    const json = await res.json() as IpAndLocation;
-    return json;
-}
 
 declare type AttributeChangeCallback = (value: string | null) => void;
 declare type HtmlElementExtra = {
@@ -937,12 +896,14 @@ export async function PromiseAllWithErrors<T>(promise: Promise<T>[]): Promise<{
  * @param args.colorDark The color of the dark squares
  * @param args.colorLight The color of the light squares
  * @param args.correctLevel The error correction level to use
+ * @param args.showLogo If true, the same logo as for the Needle loading screen will be drawn in the center of the QR code
+ * @param args.showUrl If true, the URL will be shown below the QR code
  * @param args.domElement The dom element to append the QR code to. If not provided a new div will be created and returned
  * @returns The dom element containing the QR code
  */
-export async function generateQRCode(args: { domElement?: HTMLElement, text: string, width?: number, height?: number, colorDark?: string, colorLight?: string, correctLevel?: any }): Promise<HTMLElement> {
+export async function generateQRCode(args: { domElement?: HTMLElement, text: string, width?: number, height?: number, colorDark?: string, colorLight?: string, correctLevel?: any, showLogo?: boolean, showUrl?: boolean }): Promise<HTMLElement> {
 
-    // ensure that the QRCode library is loaded
+    // Ensure that the QRCode library is loaded
     if (!globalThis["QRCode"]) {
         const url = "https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js";
         let script = document.head.querySelector(`script[src="${url}"]`) as HTMLScriptElement;
@@ -961,7 +922,7 @@ export async function generateQRCode(args: { domElement?: HTMLElement, text: str
 
     const QRCODE = globalThis["QRCode"];
     const target = args.domElement ?? document.createElement("div");
-    new QRCODE(target, {
+    const qrCode = new QRCODE(target, {
         width: args.width ?? 256,
         height: args.height ?? 256,
         colorDark: "#000000",
@@ -969,5 +930,165 @@ export async function generateQRCode(args: { domElement?: HTMLElement, text: str
         correctLevel: QRCODE.CorrectLevel.M,
         ...args,
     });
+
+    if (args.showLogo !== false) {
+        const canvas = qrCode?._oDrawing?._elCanvas as HTMLCanvasElement;
+        try {
+            const img = await addOverlays(canvas).catch(_e => { /** ignore */ });
+            if (img) {
+                target.innerHTML = "";
+                target.append(img);
+            }
+        }
+        catch { } // Ignore
+    }
+
+    if (args.showUrl !== false && args.text) {
+        // Add link label below the QR code
+        // Clean up the text. If it's a URL: remove the protocol, www. part, trailing slashes or trailing question marks
+        const existingLabel = target.querySelector(".qr-code-link-label");
+        let displayText = args.text.replace(/^(https?:\/\/)?(www\.)?/, "").replace(/\/+$/, "").replace(/\?+$/, "");
+        displayText = "Scan to visit: " + displayText;
+        if (existingLabel) {
+            existingLabel.textContent = displayText;
+        } else {
+            // Create a new label
+            const linkLabel = document.createElement("div");
+            linkLabel.classList.add("qr-code-link-label");
+            args.text = displayText;
+            linkLabel.textContent = args.text;
+            linkLabel.addEventListener("click", (ev) => {
+                // Prevent the QR panel from closing
+                ev.stopImmediatePropagation();
+            });
+
+            linkLabel.style.textAlign = "center";
+            linkLabel.style.fontSize = "0.8em";
+            linkLabel.style.marginTop = "0.1em";
+            linkLabel.style.color = "#000000";
+            linkLabel.style.fontFamily = "'Roboto Flex', sans-serif";
+            linkLabel.style.opacity = "0.5";
+            linkLabel.style.wordBreak = "break-all";
+            linkLabel.style.wordWrap = "break-word";
+            linkLabel.style.marginBottom = "0.3em";
+
+            // Ensure max. width
+            target.style.width = "calc(210px + 20px)";
+
+            target.appendChild(linkLabel);
+        }
+    }
+
     return target;
+}
+
+async function addOverlays(canvas: HTMLCanvasElement): Promise<HTMLImageElement | void> {
+    if (!canvas) return;
+
+    // Internal settings
+    const canvasPadding = 8;
+    const shadowColor = "#00000099";
+    const shadowBlur = 20;
+    const rectanglePadding = 12;
+    const rectangleRadius = 0.4 * 16;
+
+    // Draw the website's icon in the center of the QR code
+    const faviconImage = new Image();
+    const element = document.querySelector("needle-engine") as NeedleEngineHTMLElement;
+    const logoSrc = element?.getAttribute("loading-logo-src") || needleLogoOnlySVG;
+    if (!logoSrc) return;
+
+    faviconImage.src = logoSrc;
+    const haveLogo = await new Promise((resolve, _reject) => {
+        faviconImage.onload = () => resolve(true);
+        faviconImage.onerror = (err) => {
+            console.error("Error loading favicon image for QR code", err);
+            resolve(false);
+        };
+    });
+
+    // Add some padding around the canvas – we need to copy the QR code image to a larger canvas
+    const paddedCanvas = document.createElement("canvas");
+    paddedCanvas.width = canvas.width + canvasPadding;
+    paddedCanvas.height = canvas.height + canvasPadding;
+    const paddedContext = paddedCanvas.getContext("2d");
+    if (!paddedContext) {
+        return;
+    }
+
+    // Clear with white
+    paddedContext.fillStyle = "#ffffff";
+    paddedContext.fillRect(0, 0, paddedCanvas.width, paddedCanvas.height);
+    paddedContext.drawImage(canvas, canvasPadding / 2, canvasPadding / 2);
+
+    // Enable anti-aliasing
+    paddedContext.imageSmoothingEnabled = true;
+    paddedContext.imageSmoothingQuality = "high";
+    // @ts-ignore
+    paddedContext.mozImageSmoothingEnabled = true;
+    // @ts-ignore
+    paddedContext.webkitImageSmoothingEnabled = true;
+
+    // Draw a slight gradient background with 10% opacity and "lighten" composite operation
+    paddedContext.globalCompositeOperation = "lighten";
+    const gradient = paddedContext.createLinearGradient(0, 0, 0, paddedCanvas.height);
+    gradient.addColorStop(0, "rgb(45, 45, 45)");
+    gradient.addColorStop(1, "rgb(45, 45, 45)");
+    paddedContext.fillStyle = gradient;
+    paddedContext.fillRect(0, 0, paddedCanvas.width, paddedCanvas.height);
+    paddedContext.globalCompositeOperation = "source-over";
+
+
+    let sizeX = Math.min(paddedCanvas.width, paddedCanvas.height) / 4;
+    let sizeY = sizeX;
+
+    if (haveLogo) {
+        // get aspect of image
+        const aspect = faviconImage.width / faviconImage.height;
+        if (aspect > 1) sizeY = sizeX / aspect;
+        else sizeX = sizeY * aspect;
+
+        // Apply padding
+        const sizeXPadded = sizeX + rectanglePadding;
+        const sizeYPadded = sizeY + rectanglePadding;
+        const x = (paddedCanvas.width - sizeX) / 2;
+        const y = (paddedCanvas.height - sizeY) / 2;
+
+        // Draw shape with blurred shadow
+        paddedContext.shadowColor = shadowColor;
+        paddedContext.shadowBlur = shadowBlur;
+
+        // Draw rounded rectangle with radius
+        // Convert 0.4rem to pixels, taking DPI into account
+        const radius = rectangleRadius;
+        const xPadded = x - rectanglePadding / 2;
+        const yPadded = y - rectanglePadding / 2;
+        paddedContext.beginPath();
+        paddedContext.moveTo(xPadded + radius, yPadded);
+        paddedContext.lineTo(xPadded + sizeXPadded - radius, yPadded);
+        paddedContext.quadraticCurveTo(xPadded + sizeXPadded, yPadded, xPadded + sizeXPadded, yPadded + radius);
+        paddedContext.lineTo(xPadded + sizeXPadded, yPadded + sizeYPadded - radius);
+        paddedContext.quadraticCurveTo(xPadded + sizeXPadded, yPadded + sizeYPadded, xPadded + sizeXPadded - radius, yPadded + sizeYPadded);
+        paddedContext.lineTo(xPadded + radius, yPadded + sizeYPadded);
+        paddedContext.quadraticCurveTo(xPadded, yPadded + sizeYPadded, xPadded, yPadded + sizeYPadded - radius);
+        paddedContext.lineTo(xPadded, yPadded + radius);
+        paddedContext.quadraticCurveTo(xPadded, yPadded, xPadded + radius, yPadded);
+        paddedContext.fillStyle = "#ffffff";
+        paddedContext.closePath();
+        paddedContext.fill();
+        paddedContext.clip();
+
+        // Reset shadow and draw favicon
+        paddedContext.shadowColor = "transparent";
+        paddedContext.drawImage(faviconImage, x, y, sizeX, sizeY);
+    }
+
+    // Replace the canvas with the padded one
+    const paddedImage = paddedCanvas.toDataURL("image/png");
+    const img = document.createElement("img");
+    img.src = paddedImage;
+    img.style.width = "100%";
+    img.style.height = "auto";
+
+    return img;
 }

package/src/engine/webcomponents/buttons.ts

@@ -190,7 +190,7 @@ export class ButtonsFactory {
         qrCodeContainer.style.cssText = `
             position: fixed;
             display: inline-block;
-            padding: 1rem;
+            padding: 0.5rem;
             background-color: white;
             border-radius: 0.4rem;
             cursor: pointer;
@@ -223,10 +223,11 @@ export class ButtonsFactory {
             const buttonRect = qrCodeButton.getBoundingClientRect();
             qrCodeContainer.style.left = (buttonRect.left + buttonRect.width * .5 - containerRect.width * .5) + "px";
             const isButtonInTopHalf = buttonRect.top < containerRect.height;
+            const padding = "1.3rem";
             if (isButtonInTopHalf)
-                qrCodeContainer.style.top = `calc(${buttonRect.bottom}px + ${qrCodeContainer.style.padding} * .6)`;
+                qrCodeContainer.style.top = `calc(${buttonRect.bottom}px + ${qrCodeContainer.style.padding} + 0.0rem)`;
             else
-                qrCodeContainer.style.top = `calc(${buttonRect.top - containerRect.height}px - ${qrCodeContainer.style.padding} * 2.5)`;
+                qrCodeContainer.style.top = `calc(${buttonRect.top - containerRect.height}px - ${qrCodeContainer.style.padding} - ${padding})`;
             qrCodeContainer.style.opacity = "0";
             qrCodeContainer.style.pointerEvents = "all";
             qrCodeContainer.style.transition = "opacity 0.2s ease-in-out";

package/src/engine/xr/NeedleXRSession.ts

@@ -574,9 +574,24 @@ export class NeedleXRSession implements INeedleXRSession {
             console.log("%c" + `Started ${mode} session`, "font-weight:bold;");
         return this._activeSession;
     }
+
+    private static $_stop_request = Symbol();
     /** stops the active XR session */
-    static stop() {
-        this._activeSession?.end();
+    static stop(): void {
+        const session = this._activeSession;
+        if (session) {
+            if (session[this.$_stop_request] === undefined) {
+                if (debug) console.log("[NeedleXRSession] Stopping XR Session... (new)");
+                // We can not call session.end() immediately because we might be within a frame callback
+                // For example if a use calls `NeedleXRSession.stop()` within a `update()` callback
+                session[this.$_stop_request] = setTimeout(() => {
+                    session.end();
+                });
+            }
+            else if (debug) {
+                console.warn("[NeedleXRSession] XR Session stop already requested");
+            }
+        }
     }
     private static onEnd = () => {
         if (debug) console.log("XR Session ended");

package/src/engine-components/webxr/WebXRImageTracking.ts

@@ -258,6 +258,7 @@ export class WebXRImageTracking extends Behaviour {
         for (const trackedImage of this.trackedImages) {
             if (trackedImage.image) {
                 if (WebXRImageTracking._imageElements.has(trackedImage.image)) {
+                    // already loaded
                 }
                 else {
                     const url = trackedImage.image;