remove watch on all props

yadav-saurabh · Aug 21, 2024 · 7fdd95f · 7fdd95f
1 parent 89f3088
commit 7fdd95f
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 47 deletions.
diff --git a/docs/.vitepress/components/GenerateQr.vue b/docs/.vitepress/components/GenerateQr.vue
@@ -298,7 +298,7 @@ onUnmounted(() => {
             :data-codeword-style="codewordStyle"
             :data-outer-finder-style="outerFinderStyle"
             :data-inner-finder-style="innerFinderStyle"
-            :image="{ src: imgSrc, overlap: imgOverlap, border: imgBorder }"
+            :image="imgSrc ? { src: imgSrc, overlap: imgOverlap, border: imgBorder } : undefined"
           />
           <div class="btn-container">
             <button class="btn" @click="onDownload">

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @qrgrid/react
 
+## 1.3.2
+
+### Patch Changes
+
+- remove watch on all props
+
 ## 1.3.1
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qrgrid/react",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "homepage": "https://www.qrgrid.dev/",
   "module": "src/index.ts",

diff --git a/packages/react/src/canvas/qr.tsx b/packages/react/src/canvas/qr.tsx
@@ -48,13 +48,12 @@ function QrComponent(props: QrProps, ref: Ref<HTMLCanvasElement>) {
   }, [
     props.input,
     props.qrOptions?.errorCorrection,
-    props.bgColor,
-    props.color,
+    props.size,
     props.image?.src,
     props.image?.opacity,
     props.image?.sizePercent,
-    props.size,
-    props.moduleStyle,
+    props.image?.overlap,
+    props.image?.border,
   ]);
 
   /**

diff --git a/packages/react/src/svg/qr.tsx b/packages/react/src/svg/qr.tsx
@@ -76,11 +76,12 @@ function QrComponent(props: QrProps, ref: Ref<SVGSVGElement>) {
   }, [
     props.input,
     props.qrOptions?.errorCorrection,
+    props.size,
     props.image?.src,
     props.image?.opacity,
     props.image?.sizePercent,
-    props.size,
-    props.moduleStyle,
+    props.image?.overlap,
+    props.image?.border,
   ]);
 
   /**
@@ -103,21 +104,6 @@ function QrComponent(props: QrProps, ref: Ref<SVGSVGElement>) {
     if (props.moduleStyle && typeof props.moduleStyle === "function") {
       moduleStyleFunction = props.moduleStyle;
     }
-    // placing each modules in x,y position in the svg using fillRect
-    let path = { finder: "", codeword: "" };
-    let x = size;
-    let y = size;
-    for (let i = 0; i < qr.data.length; i++) {
-      const bit = qr.data[i];
-      if (bit) {
-        moduleStyleFunction(path, { x, y, size, index: i }, qr);
-      }
-      x += size;
-      if (i % qr.gridSize === qr.gridSize - 1) {
-        x = size;
-        y += size;
-      }
-    }
     // if image place the image in center, QR ErrorCorrectionLevel Should be high and Image should not be more that 25-30% of the qr size to scan the QR code properly
     if (props.image) {
       drawImageInCenter(qr, size, moduleStyleFunction);

diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @qrgrid/vue
 
+## 1.4.2
+
+### Patch Changes
+
+- remove watch on all props
+
 ## 1.4.1
 
 ### Patch Changes

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qrgrid/vue",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "type": "module",
   "homepage": "https://www.qrgrid.dev/",
   "module": "src/index.ts",

diff --git a/packages/vue/src/canvas/qr.vue b/packages/vue/src/canvas/qr.vue
@@ -20,7 +20,6 @@ const DEFAULT_IMG_OPACITY = 1;
 const DEFAULT_IMG_BORDER = false;
 const DEFAULT_IMG_OVERLAP = true;
 
-
 /**
  * To apply default module style
  */
@@ -225,9 +224,21 @@ function drawBackgroundColor(ctx: CanvasRenderingContext2D) {
 }
 
 onMounted(() => generateQr());
-watch(props, () => {
-  generateQr();
-});
+watch(
+  [
+    () => props.input,
+    () => props.qrOptions?.errorCorrection,
+    () => props.size,
+    () => props.image?.src,
+    () => props.image?.opacity,
+    () => props.image?.sizePercent,
+    () => props.image?.overlap,
+    () => props.image?.border,
+  ],
+  () => {
+    generateQr();
+  }
+);
 defineExpose({ canvasRef });
 </script>
 

diff --git a/packages/vue/src/svg/qr.vue b/packages/vue/src/svg/qr.vue
@@ -98,21 +98,6 @@ function generateQr() {
   if (props.moduleStyle && typeof props.moduleStyle === "function") {
     moduleStyleFunction = props.moduleStyle;
   }
-  // placing each modules in x,y position in the svg using fillRect
-  let path = { finder: "", codeword: "" };
-  let x = size;
-  let y = size;
-  for (let i = 0; i < qr.data.length; i++) {
-    const bit = qr.data[i];
-    if (bit) {
-      moduleStyleFunction(path, { x, y, size, index: i }, qr);
-    }
-    x += size;
-    if (i % qr.gridSize === qr.gridSize - 1) {
-      x = size;
-      y += size;
-    }
-  }
   // if image place the image in center, QR ErrorCorrectionLevel Should be high and Image should not be more that 25-30% of the qr size to scan the QR code properly
   if (props.image) {
     drawImageInCenter(qr, size, moduleStyleFunction);
@@ -169,7 +154,7 @@ function drawImageInCenter(
     canvas.height = height;
     const ctx = canvas.getContext("2d")!;
     ctx.globalAlpha = props.image!.opacity || DEFAULT_IMG_OPACITY;
-    ctx.drawImage(img, 0, 0, height, width);
+    ctx.drawImage(img, 0, 0, width, height);
     const a = props.image?.opacity || DEFAULT_IMG_OPACITY;
     imgData.value = { img: canvas.toDataURL(), height, width, x, y, a };
     // qr modules
@@ -238,9 +223,21 @@ function overlappingImage(
 }
 
 onMounted(() => generateQr());
-watch(props, () => {
-  generateQr();
-});
+watch(
+  [
+    () => props.input,
+    () => props.qrOptions?.errorCorrection,
+    () => props.size,
+    () => props.image?.src,
+    () => props.image?.opacity,
+    () => props.image?.sizePercent,
+    () => props.image?.overlap,
+    () => props.image?.border,
+  ],
+  () => {
+    generateQr();
+  }
+);
 defineExpose({ svgRef });
 </script>