snice 4.13.0 → 4.14.0

package/dist/cdn/qr-code/snice-qr-code.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.12.0
+ * snice v4.13.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -800,9 +800,11 @@ var SniceQrCode = (function (exports, snice) {
       draw(qrCode) {
           const opts = this.options;
           const nCount = qrCode.getModuleCount();
+          const margin = opts.margin || 0;
+          const totalSize = nCount + margin * 2;
           this.clear();
           const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          svg.setAttribute('viewBox', `0 0 ${nCount} ${nCount}`);
+          svg.setAttribute('viewBox', `0 0 ${totalSize} ${totalSize}`);
           svg.setAttribute('width', '100%');
           svg.setAttribute('height', '100%');
           svg.setAttribute('fill', opts.colorLight);
@@ -823,8 +825,8 @@ var SniceQrCode = (function (exports, snice) {
               for (let col = 0; col < nCount; col++) {
                   if (qrCode.isDark(row, col)) {
                       const use = this.createSVGElement('use', {
-                          x: String(col),
-                          y: String(row)
+                          x: String(margin + col),
+                          y: String(margin + row)
                       });
                       use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#template');
                       svg.appendChild(use);
@@ -870,17 +872,22 @@ var SniceQrCode = (function (exports, snice) {
               return;
           const opts = this.options;
           const ctx = this.context;
+          const margin = opts.margin || 0;
           const nCount = qrCode.getModuleCount();
-          const nWidth = opts.width / nCount;
-          const nHeight = opts.height / nCount;
+          const drawSize = Math.min(opts.width, opts.height) - margin * 2;
+          const nWidth = drawSize / nCount;
+          const nHeight = drawSize / nCount;
           const nRoundedWidth = Math.round(nWidth);
           const nRoundedHeight = Math.round(nHeight);
           this.clear();
+          // Fill background including quiet zone
+          ctx.fillStyle = opts.colorLight;
+          ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
           for (let row = 0; row < nCount; row++) {
               for (let col = 0; col < nCount; col++) {
                   const bIsDark = qrCode.isDark(row, col);
-                  const nLeft = col * nWidth;
-                  const nTop = row * nHeight;
+                  const nLeft = margin + col * nWidth;
+                  const nTop = margin + row * nHeight;
                   const color = bIsDark ? opts.colorDark : opts.colorLight;
                   ctx.fillStyle = color;
                   if (opts.dotStyle === 'dots') {
@@ -944,7 +951,8 @@ var SniceQrCode = (function (exports, snice) {
               colorLight: '#ffffff',
               correctLevel: 'H',
               useSVG: false,
-              dotStyle: 'square'
+              dotStyle: 'square',
+              margin: 4
           };
           let opts = vOption;
           if (typeof opts === 'string') {
@@ -1153,7 +1161,8 @@ var SniceQrCode = (function (exports, snice) {
                   colorLight: this.bgColor,
                   correctLevel: correctLevel,
                   useSVG: this.renderMode === 'svg',
-                  dotStyle: this.dotStyle
+                  dotStyle: this.dotStyle,
+                  margin: this.margin
               });
               // Apply overlays after QR code is rendered
               requestAnimationFrame(() => {
@@ -1161,7 +1170,11 @@ var SniceQrCode = (function (exports, snice) {
               });
           }
           applyOverlays() {
-              // Find the canvas element created by the library
+              const svg = this.container?.querySelector('svg');
+              if (svg) {
+                  this.applySvgOverlays(svg);
+                  return;
+              }
               const canvas = this.container?.querySelector('canvas');
               if (!canvas)
                   return;
@@ -1170,11 +1183,24 @@ var SniceQrCode = (function (exports, snice) {
                   ctx = canvas.getContext('2d');
               }
               catch (e) {
-                  // Canvas not supported in test environment
                   return;
               }
               if (!ctx)
                   return;
+              // Apply quiet zone margin by re-drawing canvas content inset
+              const m = this.margin;
+              if (m > 0) {
+                  const s = this.size;
+                  const inner = s - m * 2;
+                  const imgData = ctx.getImageData(0, 0, s, s);
+                  const off = document.createElement('canvas');
+                  off.width = s;
+                  off.height = s;
+                  off.getContext('2d').putImageData(imgData, 0, 0);
+                  ctx.fillStyle = this.bgColor;
+                  ctx.fillRect(0, 0, s, s);
+                  ctx.drawImage(off, 0, 0, s, s, m, m, inner, inner);
+              }
               // Center image overlay
               if (this.includeImage && this.imageUrl) {
                   const img = new Image();
@@ -1183,9 +1209,7 @@ var SniceQrCode = (function (exports, snice) {
                       const imgSize = this.imageSize;
                       const imgX = (this.size - imgSize) / 2;
                       const imgY = (this.size - imgSize) / 2;
-                      // Draw image directly without background
                       ctx.drawImage(img, imgX, imgY, imgSize, imgSize);
-                      // Apply center text after image if both are present
                       if (this.centerText) {
                           this.drawCenterText(ctx);
                       }
@@ -1193,39 +1217,144 @@ var SniceQrCode = (function (exports, snice) {
                   img.src = this.imageUrl;
               }
               else if (this.centerText) {
-                  // Center text overlay only
                   this.drawCenterText(ctx);
               }
           }
+          applySvgOverlays(svg) {
+              // Get viewBox dimensions to position overlays in SVG coordinate space
+              const vb = svg.getAttribute('viewBox')?.split(' ').map(Number) || [];
+              const vbSize = vb[2] || 100;
+              const center = vbSize / 2;
+              // Scale factor: SVG viewBox units per pixel
+              const scale = vbSize / this.size;
+              // Center image overlay
+              if (this.includeImage && this.imageUrl) {
+                  const imgSize = this.imageSize * scale;
+                  const imgX = center - imgSize / 2;
+                  const imgY = center - imgSize / 2;
+                  // Convert image to data URL for embedding in SVG
+                  const img = new Image();
+                  img.crossOrigin = 'anonymous';
+                  img.onload = () => {
+                      // Draw to temp canvas to get data URL
+                      const off = document.createElement('canvas');
+                      off.width = img.naturalWidth;
+                      off.height = img.naturalHeight;
+                      off.getContext('2d').drawImage(img, 0, 0);
+                      const dataUrl = off.toDataURL('image/png');
+                      const svgImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+                      svgImg.setAttribute('x', String(imgX));
+                      svgImg.setAttribute('y', String(imgY));
+                      svgImg.setAttribute('width', String(imgSize));
+                      svgImg.setAttribute('height', String(imgSize));
+                      svgImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', dataUrl);
+                      svg.appendChild(svgImg);
+                      if (this.centerText) {
+                          this.drawSvgCenterText(svg, center, scale);
+                      }
+                  };
+                  img.src = this.imageUrl;
+              }
+              else if (this.centerText) {
+                  this.drawSvgCenterText(svg, center, scale);
+              }
+          }
+          drawSvgCenterText(svg, center, scale) {
+              const fontSize = this.centerTextSize * scale;
+              const strokeWidth = 6 * scale;
+              // Outline text
+              const outline = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+              outline.setAttribute('x', String(center));
+              outline.setAttribute('y', String(center));
+              outline.setAttribute('text-anchor', 'middle');
+              outline.setAttribute('dominant-baseline', 'central');
+              outline.setAttribute('font-size', String(fontSize));
+              outline.setAttribute('font-weight', 'bold');
+              outline.setAttribute('font-family', 'sans-serif');
+              outline.setAttribute('stroke', this.textOutlineColor);
+              outline.setAttribute('stroke-width', String(strokeWidth));
+              outline.setAttribute('stroke-linejoin', 'round');
+              outline.setAttribute('fill', this.textOutlineColor);
+              outline.textContent = this.centerText;
+              svg.appendChild(outline);
+              // Fill text
+              const fill = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+              fill.setAttribute('x', String(center));
+              fill.setAttribute('y', String(center));
+              fill.setAttribute('text-anchor', 'middle');
+              fill.setAttribute('dominant-baseline', 'central');
+              fill.setAttribute('font-size', String(fontSize));
+              fill.setAttribute('font-weight', 'bold');
+              fill.setAttribute('font-family', 'sans-serif');
+              fill.setAttribute('fill', this.textFillColor);
+              fill.textContent = this.centerText;
+              svg.appendChild(fill);
+          }
           drawCenterText(ctx) {
               ctx.font = `bold ${this.centerTextSize}px sans-serif`;
               ctx.textAlign = 'center';
               ctx.textBaseline = 'middle';
               const x = this.size / 2;
               const y = this.size / 2;
-              // Draw text outline (stroke)
               ctx.strokeStyle = this.textOutlineColor;
               ctx.lineWidth = 6;
               ctx.lineJoin = 'round';
               ctx.miterLimit = 2;
               ctx.strokeText(this.centerText, x, y);
-              // Draw text fill
               ctx.fillStyle = this.textFillColor;
               ctx.fillText(this.centerText, x, y);
           }
+          toSVGString() {
+              const svg = this.container?.querySelector('svg');
+              if (!svg)
+                  return '';
+              return new XMLSerializer().serializeToString(svg);
+          }
           async toDataURL(type = 'image/png', quality = 0.92) {
+              // SVG export
+              if (type === 'image/svg+xml') {
+                  const svgStr = this.toSVGString();
+                  if (!svgStr)
+                      return '';
+                  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr);
+              }
+              // Canvas export (rasterize SVG if in SVG mode)
               const canvas = this.container?.querySelector('canvas');
-              if (!canvas)
+              if (canvas)
+                  return canvas.toDataURL(type, quality);
+              // SVG mode but raster export requested — rasterize to canvas
+              const svg = this.container?.querySelector('svg');
+              if (!svg)
                   return '';
-              return canvas.toDataURL(type, quality);
+              const svgStr = new XMLSerializer().serializeToString(svg);
+              const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+              const url = URL.createObjectURL(blob);
+              const img = new Image();
+              return new Promise((resolve) => {
+                  img.onload = () => {
+                      const off = document.createElement('canvas');
+                      off.width = this.size;
+                      off.height = this.size;
+                      off.getContext('2d').drawImage(img, 0, 0, this.size, this.size);
+                      URL.revokeObjectURL(url);
+                      resolve(off.toDataURL(type, quality));
+                  };
+                  img.onerror = () => { URL.revokeObjectURL(url); resolve(''); };
+                  img.src = url;
+              });
           }
           async toBlob(type = 'image/png', quality = 0.92) {
+              if (type === 'image/svg+xml') {
+                  const svgStr = this.toSVGString();
+                  return new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+              }
               const dataURL = await this.toDataURL(type, quality);
               const response = await fetch(dataURL);
               return response.blob();
           }
           async download(filename = 'qr-code.png') {
-              const dataURL = await this.toDataURL();
+              const isSvg = filename.endsWith('.svg');
+              const dataURL = await this.toDataURL(isSvg ? 'image/svg+xml' : 'image/png');
               const a = document.createElement('a');
               a.href = dataURL;
               a.download = filename;