qrcode.vue 3.7.0 → 3.8.0

package/dist/qrcode.vue.esm.js

@@ -1,10 +1,10 @@
 /*!
- * qrcode.vue v3.7.0
+ * qrcode.vue v3.8.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
  */
-import { defineComponent, ref, watch, h, onMounted, Fragment } from 'vue';
+import { defineComponent, h, ref, onMounted, watchEffect, Fragment, computed } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -909,6 +909,7 @@ var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
 var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
+var IMAGE_EXCAVATE_THICKNESS = 2;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -928,42 +929,6 @@ var SUPPORTS_PATH2D = (function () {
 function validErrorCorrectLevel(level) {
     return level in ErrorCorrectLevelMap;
 }
-function isPointInRoundedRect(px, py, rx, ry, rw, rh, r) {
-    // Fast check: point outside the bounding box
-    if (px < rx || px > rx + rw || py < ry || py > ry + rh) {
-        return false;
-    }
-    // If no border radius or point is in the center rectangle
-    if (r <= 0 || (px > rx + r && px < rx + rw - r) || (py > ry + r && py < ry + rh - r)) {
-        return true;
-    }
-    // Check the four corners
-    // Top-left corner
-    if (px < rx + r && py < ry + r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Top-right corner
-    if (px > rx + rw - r && py < ry + r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-left corner
-    if (px < rx + r && py > ry + rh - r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-right corner
-    if (px > rx + rw - r && py > ry + rh - r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    return true;
-}
 function generatePath(modules, margin) {
     if (margin === void 0) { margin = 0; }
     var path = '';
@@ -1010,42 +975,51 @@ function getImageSettings(cells, size, margin, imageSettings) {
     var h = (height || defaultSize) * scale;
     var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
     var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
+    var borderRadius = (imageSettings.borderRadius || 0) * scale;
     var excavation = null;
     if (imageSettings.excavate) {
         var floorX = Math.floor(x);
         var floorY = Math.floor(y);
         var ceilW = Math.ceil(w + x - floorX);
         var ceilH = Math.ceil(h + y - floorY);
-        var borderRadius = (imageSettings.borderRadius || 0) * scale;
-        excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH, borderRadius: borderRadius };
+        excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
     }
-    return { x: x, y: y, h: h, w: w, excavation: excavation };
+    return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
 }
-function excavateModules(modules, excavation) {
-    var borderRadius = excavation.borderRadius;
-    // If no border radius, use simple rectangular excavation
-    if (!borderRadius || borderRadius <= 0) {
-        return modules.map(function (row, y) {
-            if (y < excavation.y || y >= excavation.y + excavation.h) {
-                return row;
-            }
-            return row.map(function (cell, x) {
-                if (x < excavation.x || x >= excavation.x + excavation.w) {
-                    return cell;
-                }
-                return false;
-            });
-        });
-    }
-    // For rounded corners, check each module against the rounded rectangle shape
-    return modules.map(function (row, y) {
-        return row.map(function (cell, x) {
-            if (!cell)
-                return cell;
-            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
-            return inExcavation ? false : cell;
-        });
+function useQRCode(props) {
+    var margin = computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
+    var cells = computed(function () {
+        var level = validErrorCorrectLevel(props.level) ? props.level : defaultErrorCorrectLevel;
+        return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
+    });
+    var numCells = computed(function () { return cells.value.length + margin.value * 2; });
+    var fgPath = computed(function () { return generatePath(cells.value, margin.value); });
+    var imageProps = computed(function () {
+        if (!props.imageSettings.src) {
+            return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
+        }
+        var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
+        return {
+            x: settings.x + margin.value,
+            y: settings.y + margin.value,
+            width: settings.w,
+            height: settings.h,
+            borderRadius: settings.borderRadius,
+        };
     });
+    var imageBorderProps = computed(function () {
+        if (!props.imageSettings.excavate || !props.imageSettings.src)
+            return null;
+        var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
+        return {
+            x: imageProps.value.x - borderThickness,
+            y: imageProps.value.y - borderThickness,
+            width: imageProps.value.width + borderThickness * 2,
+            height: imageProps.value.height + borderThickness * 2,
+            borderRadius: imageProps.value.borderRadius,
+        };
+    });
+    return { margin: margin, numCells: numCells, cells: cells, fgPath: fgPath, imageProps: imageProps, imageBorderProps: imageBorderProps };
 }
 var QRCodeProps = {
     value: {
@@ -1112,35 +1086,8 @@ var QrcodeSvg = defineComponent({
     name: 'QRCodeSvg',
     props: QRCodeProps,
     setup: function (props) {
-        var numCells = ref(0);
-        var fgPath = ref('');
-        var imageProps;
-        var generate = function () {
-            var value = props.value, _level = props.level, _margin = props.margin;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            numCells.value = cells.length + margin * 2;
-            if (props.imageSettings.src) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation);
-                }
-            }
-            // Drawing strategy: instead of a rect per module, we're going to create a
-            // single path for the dark modules and layer that on top of a light rect,
-            // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
-            // way faster than DOM ops.
-            // For level 1, 441 nodes -> 2
-            // For level 40, 31329 -> 2
-            fgPath.value = generatePath(cells, margin);
-        };
+        var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
+        var qrGradientId = 'qrcode.vue-gradient';
         var renderGradient = function () {
             if (!props.gradient)
                 return null;
@@ -1158,7 +1105,7 @@ var QrcodeSvg = defineComponent({
                     fx: '50%',
                     fy: '50%',
                 };
-            return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+            return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: qrGradientId }, gradientProps), [
                 h('stop', {
                     offset: '0%',
                     style: { stopColor: props.gradientStartColor },
@@ -1169,25 +1116,24 @@ var QrcodeSvg = defineComponent({
                 }),
             ]);
         };
+        var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
         var renderClipPath = function () {
-            var borderRadius = props.imageSettings.borderRadius || 0;
+            var borderRadius = imageProps.value.borderRadius;
             if (!props.imageSettings.src)
                 return null;
             if (borderRadius <= 0)
                 return null;
-            return h('clipPath', { id: 'qr-logo-clip' }, [
+            return h('clipPath', { id: qrLogoClipPathId }, [
                 h('rect', {
-                    x: imageProps.x,
-                    y: imageProps.y,
-                    width: imageProps.width,
-                    height: imageProps.height,
+                    x: imageProps.value.x,
+                    y: imageProps.value.y,
+                    width: imageProps.value.width,
+                    height: imageProps.value.height,
                     rx: borderRadius,
                     ry: borderRadius,
                 }),
             ]);
         };
-        generate();
-        watch(props, generate, { deep: true });
         return function () { return h('svg', {
             width: props.size,
             height: props.size,
@@ -1202,10 +1148,19 @@ var QrcodeSvg = defineComponent({
                 fill: props.background,
             }),
             h('path', {
-                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
                 d: fgPath.value,
             }),
-            props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps), (props.imageSettings.borderRadius ? { 'clip-path': 'url(#qr-logo-clip)' } : {}))),
+            imageBorderProps.value && h('rect', {
+                x: imageBorderProps.value.x,
+                y: imageBorderProps.value.y,
+                width: imageBorderProps.value.width,
+                height: imageBorderProps.value.height,
+                fill: props.background,
+                rx: imageBorderProps.value.borderRadius,
+                ry: imageBorderProps.value.borderRadius,
+            }),
+            props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
 });
@@ -1213,93 +1168,86 @@ var QrcodeCanvas = defineComponent({
     name: 'QRCodeCanvas',
     props: QRCodeProps,
     setup: function (props, ctx) {
+        var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var canvasEl = ref(null);
         var imageRef = ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
+            var size = props.size, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var canvas = canvasEl.value;
             if (!canvas) {
                 return;
             }
-            var ctx = canvas.getContext('2d');
-            if (!ctx) {
+            var canvasCtx = canvas.getContext('2d');
+            if (!canvasCtx) {
                 return;
             }
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            var numCells = cells.length + margin * 2;
+            var qrCells = cells.value;
             var image = imageRef.value;
-            var imageProps = { x: 0, y: 0, width: 0, height: 0 };
-            var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation);
-                }
-            }
             var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-            var scale = (size / numCells) * devicePixelRatio;
+            var scale = (size / numCells.value) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
-            ctx.scale(scale, scale);
-            ctx.fillStyle = background;
-            ctx.fillRect(0, 0, numCells, numCells);
+            canvasCtx.scale(scale, scale);
+            canvasCtx.fillStyle = background;
+            canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
             if (gradient) {
                 var grad = void 0;
                 if (gradientType === 'linear') {
-                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                    grad = canvasCtx.createLinearGradient(0, 0, numCells.value, numCells.value);
                 }
                 else {
-                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                    grad = canvasCtx.createRadialGradient(numCells.value / 2, numCells.value / 2, 0, numCells.value / 2, numCells.value / 2, numCells.value / 2);
                 }
                 grad.addColorStop(0, gradientStartColor);
                 grad.addColorStop(1, gradientEndColor);
-                ctx.fillStyle = grad;
+                canvasCtx.fillStyle = grad;
             }
             else {
-                ctx.fillStyle = foreground;
+                canvasCtx.fillStyle = foreground;
             }
             if (SUPPORTS_PATH2D) {
-                ctx.fill(new Path2D(generatePath(cells, margin)));
+                canvasCtx.fill(new Path2D(generatePath(qrCells, margin.value)));
             }
             else {
-                cells.forEach(function (row, rdx) {
+                qrCells.forEach(function (row, rdx) {
                     row.forEach(function (cell, cdx) {
                         if (cell) {
-                            ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+                            canvasCtx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
                         }
                     });
                 });
             }
+            var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
             if (showImage) {
-                var borderRadius = props.imageSettings.borderRadius || 0;
-                if (borderRadius > 0) {
-                    ctx.save();
+                var drawRoundedRect = function (ctx, x, y, width, height, radius) {
                     ctx.beginPath();
                     if (ctx.roundRect) {
-                        ctx.roundRect(imageProps.x, imageProps.y, imageProps.width, imageProps.height, borderRadius);
+                        ctx.roundRect(x, y, width, height, radius);
                     }
                     else {
-                        // Fallback for browsers without roundRect support
-                        ctx.rect(imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                        ctx.rect(x, y, width, height);
                     }
-                    ctx.clip();
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
-                    ctx.restore();
+                };
+                if (imageBorderProps.value) {
+                    var imageBorder = imageBorderProps.value;
+                    canvasCtx.fillStyle = props.background;
+                    drawRoundedRect(canvasCtx, imageBorder.x, imageBorder.y, imageBorder.width, imageBorder.height, imageBorder.borderRadius);
+                    canvasCtx.fill();
+                }
+                var borderRadius = imageProps.value.borderRadius;
+                if (borderRadius > 0) {
+                    canvasCtx.save();
+                    drawRoundedRect(canvasCtx, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height, borderRadius);
+                    canvasCtx.clip();
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
+                    canvasCtx.restore();
                 }
                 else {
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
                 }
             }
         };
         onMounted(generate);
-        watch(props, generate, { deep: true });
+        watchEffect(generate);
         var style = ctx.attrs.style;
         return function () { return h(Fragment, [
             h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
   "type": "module",
   "main": "./dist/qrcode.vue.cjs.js",
@@ -34,6 +34,7 @@
   ],
   "files": [
     "/dist",
+    "CHANGELOG.md",
     "README-zh_cn.md",
     "README.md"
   ],