@needle-tools/engine 4.5.7-next.029f239 → 4.5.8-next.e775d5d

package/src/engine/engine_utils.ts

@@ -927,28 +927,36 @@ export async function generateQRCode(args: { domElement?: HTMLElement, text: str
         height: args.height ?? 256,
         colorDark: "#000000",
         colorLight: "#ffffff",
-        correctLevel: QRCODE.CorrectLevel.M,
+        correctLevel: args.showLogo ? QRCODE.CorrectionLevel.H : 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);
-            }
+    // Number of rows/columns of the generated QR code
+    const moduleCount = qrCode?._oQRCode.moduleCount || 0;
+    const canvas = qrCode?._oDrawing?._elCanvas as HTMLCanvasElement;
+    
+    let sizePercentage = 0.25;
+    if (moduleCount < 40)
+        sizePercentage = Math.floor(moduleCount / 4) / moduleCount;
+    else
+        sizePercentage = Math.floor(moduleCount / 6) / moduleCount;
+    
+    const paddingPercentage = Math.floor(moduleCount / 20) / moduleCount;
+    try {
+        const img = await addOverlays(canvas, { showLogo: args.showLogo, logoSize: sizePercentage, logoPadding: paddingPercentage }).catch(_e => { /** ignore */ });
+        if (img) {
+            target.innerHTML = "";
+            target.append(img);
         }
-        catch { } // Ignore
     }
+    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;
+        displayText = "Scan to visit " + displayText;
         if (existingLabel) {
             existingLabel.textContent = displayText;
         } else {
@@ -982,15 +990,21 @@ export async function generateQRCode(args: { domElement?: HTMLElement, text: str
     return target;
 }
 
-async function addOverlays(canvas: HTMLCanvasElement): Promise<HTMLImageElement | void> {
+async function addOverlays(canvas: HTMLCanvasElement, args: { showLogo?: boolean, logoSize?: number, logoPadding?: number }): Promise<HTMLImageElement | void> {
     if (!canvas) return;
 
     // Internal settings
     const canvasPadding = 8;
-    const shadowColor = "#00000099";
     const shadowBlur = 20;
-    const rectanglePadding = 12;
+    const rectanglePadding = args.logoPadding || 1. / 32;
+    // With dropshadow under the logo
+    /*
+    const shadowColor = "#00000099";
     const rectangleRadius = 0.4 * 16;
+    */
+    // Without dropshadow under the logo
+    const shadowColor = "transparent";
+    const rectangleRadius = 0;
 
     // Draw the website's icon in the center of the QR code
     const faviconImage = new Image();
@@ -998,14 +1012,17 @@ async function addOverlays(canvas: HTMLCanvasElement): Promise<HTMLImageElement
     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);
-        };
-    });
+    let haveLogo = false;
+    if (args.showLogo !== false) {
+        faviconImage.src = logoSrc;
+        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");
@@ -1039,20 +1056,23 @@ async function addOverlays(canvas: HTMLCanvasElement): Promise<HTMLImageElement
     paddedContext.globalCompositeOperation = "source-over";
 
 
-    let sizeX = Math.min(paddedCanvas.width, paddedCanvas.height) / 4;
+    let sizeX = Math.min(canvas.width, canvas.height) * (args.logoSize || 0.25);
     let sizeY = sizeX;
 
     if (haveLogo) {
-        // get aspect of image
+        // Get aspect of image
         const aspect = faviconImage.width / faviconImage.height;
         if (aspect > 1) sizeY = sizeX / aspect;
         else sizeX = sizeY * aspect;
 
+        const rectanglePaddingPx = rectanglePadding * canvas.width;
+
         // Apply padding
-        const sizeXPadded = sizeX + rectanglePadding;
-        const sizeYPadded = sizeY + rectanglePadding;
-        const x = (paddedCanvas.width - sizeX) / 2;
-        const y = (paddedCanvas.height - sizeY) / 2;
+        const sizeForBackground = Math.max(sizeX, sizeY);
+        const sizeXPadded = Math.round(sizeForBackground + rectanglePaddingPx);
+        const sizeYPadded = Math.round(sizeForBackground + rectanglePaddingPx);
+        const x = (paddedCanvas.width - sizeForBackground) / 2;
+        const y = (paddedCanvas.height - sizeForBackground) / 2;
 
         // Draw shape with blurred shadow
         paddedContext.shadowColor = shadowColor;
@@ -1061,8 +1081,8 @@ async function addOverlays(canvas: HTMLCanvasElement): Promise<HTMLImageElement
         // 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;
+        const xPadded = Math.round(x - rectanglePaddingPx / 2);
+        const yPadded = Math.round(y - rectanglePaddingPx / 2);
         paddedContext.beginPath();
         paddedContext.moveTo(xPadded + radius, yPadded);
         paddedContext.lineTo(xPadded + sizeXPadded - radius, yPadded);
@@ -1080,7 +1100,9 @@ async function addOverlays(canvas: HTMLCanvasElement): Promise<HTMLImageElement
 
         // Reset shadow and draw favicon
         paddedContext.shadowColor = "transparent";
-        paddedContext.drawImage(faviconImage, x, y, sizeX, sizeY);
+        const logoX = (paddedCanvas.width - sizeX) / 2;
+        const logoY = (paddedCanvas.height - sizeY) / 2;
+        paddedContext.drawImage(faviconImage, logoX, logoY, sizeX, sizeY);
     }
 
     // Replace the canvas with the padded one