Merge pull request #22 from Intosoft/feat/web

refactor: code organization
Intosoft · Mar 9, 2024 · 7713473 · 7713473
2 parents d2039bf + 587f5a4
commit 7713473
Showing 7 changed files with 77 additions and 61 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -4,3 +4,4 @@ node_modules/
 examples/
 .git/
 .github/
+README.md
diff --git a/README.md b/README.md
@@ -5,6 +5,7 @@ Intosoft CustoQR is a fully customizable open source QR code generator tool.
 -   **Versatile and Customizable:** Fully color, style, content customization
 -   **Seamless Integration:** Integrate Intosoft QRcode seamlessly into your existing tech stack, whether you're working with React, React Native, NodeJS, Vue.js, Angular, or pure JavaScript.
 
+![Sample image](https://custoqr.com/sample.png)
 ### [Demo / Config generator tool](https://custoqr.com)
 
 ## Installation
@@ -36,6 +37,7 @@ export const RenderQR = () => {
 ```
 
 React Native
+
 First Install [react-native-svg](https://github.com/software-mansion/react-native-svg)
 
 ```jsx
@@ -57,7 +59,7 @@ Vanilla JS
     <body>
       <div id="svg-container"></div>
     </body>
-    <script src="https://unpkg.com/@intosoft/custoqr@0.0.1/dist/index-standalone.js"></script>
+    <script src="https://unpkg.com/@intosoft/custoqr@0.0.2/dist/index-standalone.js"></script>
     <script>
       window.addEventListener("load", function () {
         const config = {}; //paste config here

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@intosoft/custoqr",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "",
     "module": "dist/index.esm.js",
     "main": "dist/index.js",

diff --git a/src/config.ts b/src/config.ts
@@ -1,3 +1,5 @@
+import { QRCodeErrorCorrectionLevel } from 'qrcode';
+
 export type EyeFrameShape =
     | 'body'
     | 'square'
@@ -52,6 +54,8 @@ export type BodyShape =
 
 export interface Config {
     length: number;
+    padding: number;
+    errorCorrectionLevel: QRCodeErrorCorrectionLevel;
     value: string;
     logo?: {
         url: string;

diff --git a/src/generateSVGString.ts b/src/generateSVGString.ts
@@ -0,0 +1,49 @@
+import { generateLinearGradientByConfig, isGradientColor } from './utils/gradient';
+import { Config } from './config';
+import { generateEyeballSVGFromConfig } from './eyeball';
+import { generateEyeFrameSVGFromConfig } from './eyeframes';
+import { generatePath } from './path';
+import { generateMatrix, renderLogoFromConfig, isTransparent } from './utils';
+
+export const generateSVGString = (config: Config) => {
+    const matrix = generateMatrix(
+        config.value || 'https://intosoft.com',
+        config.errorCorrectionLevel || 'H',
+    );
+
+    const path = generatePath({ matrix, size: config.length, config });
+
+    const svg = `<svg viewBox="${[
+        -config.padding,
+        -config.padding,
+        config.length + config.padding * 2,
+        config.length + config.padding * 2,
+    ].join(' ')}" width="${config.length}" height="${
+        config.length
+    }" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+    ${generateLinearGradientByConfig(config)}
+    ${renderLogoFromConfig(config, config.length / matrix.length)}
+    </defs>
+ 
+<rect x="${-config.padding}" y="${-config.padding}" width="${
+        config.length + config.padding * 2
+    }" height="${config.length + config.padding * 2}" fill="${
+        isTransparent(config.colors.background) ? 'none' : config.colors.background
+    }" />
+
+ 
+ 
+  <path d="${path}" 
+     stroke-linecap="butt" 
+     stroke-width="${0}"  fill="${
+         isGradientColor(config.colors.body) ? 'url(#body)' : config.colors.body
+     }"  stroke="${isGradientColor(config.colors.body) ? 'url(#body)' : config.colors.body}" /> 
+  ${generateEyeFrameSVGFromConfig(config, matrix.length, matrix)}      
+  ${generateEyeballSVGFromConfig(config, matrix.length, matrix)} 
+
+  <use href="#logo"/>
+  </svg>`;
+
+    return svg;
+};
diff --git a/src/index.ts b/src/index.ts
@@ -1,65 +1,7 @@
 import { generateContentString, WifiEncryption } from './generateContent';
-import { generateLinearGradientByConfig, isGradientColor } from './utils/gradient';
 import { Config, BodyShape, EyeFrameShape, EyeballShape } from './config';
-import { generateEyeballSVGFromConfig } from './eyeball';
-import { generateEyeFrameSVGFromConfig } from './eyeframes';
-import { generatePath } from './path';
-import { generateMatrix, renderLogoFromConfig } from './utils';
+import { generateSVGString } from './generateSVGString';
 
-const quietZone = 0;
-
-function isTransparent(color: string) {
-    if (color.startsWith('#')) {
-        return color === '#00000000' || color === '#0000';
-    }
-    if (color.startsWith('rgba')) {
-        const rgbaValues = color.slice(5, -1).split(',');
-        const alpha = parseFloat(rgbaValues[3]);
-        return alpha === 0;
-    }
-    if (color.startsWith('rgb')) {
-        return color === 'rgba(0,0,0,0)' || color === 'rgba(0, 0, 0, 0)';
-    }
-    return false; // Not transparent
-}
-
-const generateSVGString = (config: Config) => {
-    const matrix = generateMatrix(config.value || 'https://intosoft.com', 'H');
-
-    const path = generatePath({ matrix, size: config.length, config });
-
-    const svg = `<svg viewBox="${[
-        -quietZone,
-        -quietZone,
-        config.length + quietZone * 2,
-        config.length + quietZone * 2,
-    ].join(' ')}" width="${config.length}" height="${
-        config.length
-    }" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-    ${generateLinearGradientByConfig(config)}
-    </defs>
-<g>
-<rect x="${-quietZone}" y="${-quietZone}" width="${
-        config.length + quietZone * 2
-    }" height="${config.length + quietZone * 2}" fill="${
-        isTransparent(config.colors.background) ? 'none' : config.colors.background
-    }" />
-  </g>
-  ${renderLogoFromConfig(config, config.length / matrix.length)}
-  <path d="${path}" 
-     stroke-linecap="butt" 
-     stroke-width="${0}"  fill="${
-         isGradientColor(config.colors.body) ? 'url(#body)' : config.colors.body
-     }"  stroke="${isGradientColor(config.colors.body) ? 'url(#body)' : config.colors.body}" /> 
-  ${generateEyeFrameSVGFromConfig(config, matrix.length, matrix)}      
-  ${generateEyeballSVGFromConfig(config, matrix.length, matrix)} 
-    
-   <use href="#logo"/>
-  </svg>`;
-
-    return svg;
-};
 export { generateContentString, generateSVGString };
 
 export type { Config, WifiEncryption, BodyShape, EyeFrameShape, EyeballShape };

diff --git a/src/utils.ts b/src/utils.ts
@@ -142,3 +142,21 @@ export const getLogoPathPositions = (matrixLength: number, size?: number) => {
     }
     return [];
 };
+
+export const isTransparent = (color: string) => {
+    if (color === 'transparent') {
+        return true;
+    }
+    if (color.startsWith('#')) {
+        return color === '#00000000' || color === '#0000';
+    }
+    if (color.startsWith('rgba')) {
+        const rgbaValues = color.slice(5, -1).split(',');
+        const alpha = parseFloat(rgbaValues[3]);
+        return alpha === 0;
+    }
+    if (color.startsWith('rgb')) {
+        return color === 'rgba(0,0,0,0)' || color === 'rgba(0, 0, 0, 0)';
+    }
+    return false; // Not transparent
+};