From 77b6b396d74af8edd0db737021666eee037bddf6 Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Sun, 26 Jan 2025 19:34:51 +0100
Subject: [PATCH] feat(Barcode Generator): use bwip-js to add more barcode
 types

Including Datamatrix, fix #1343
---
 components.d.ts                               |   1 -
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   8 ++
 .../barcode-generator/barcode-generator.vue   | 124 ++++++++++--------
 .../barcode-generator/barcode.formats.json    | 112 ++++++++++++++++
 src/tools/barcode-generator/bwip-js.d.ts      |  82 ++++++++++++
 6 files changed, 274 insertions(+), 54 deletions(-)
 create mode 100644 src/tools/barcode-generator/barcode.formats.json
 create mode 100644 src/tools/barcode-generator/bwip-js.d.ts

diff --git a/components.d.ts b/components.d.ts
index 77c764b7e..63380ced3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -247,7 +247,6 @@ declare module '@vue/runtime-core' {
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NginxFormatter: typeof import('./src/tools/nginx-formatter/nginx-formatter.vue')['default']
     NH1: typeof import('naive-ui')['NH1']
diff --git a/package.json b/package.json
index 4a354a028..1688a195c 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "apache-md5": "^1.1.8",
     "arr-diff": "^4.0.0",
     "bcryptjs": "^2.4.3",
+    "bwip-js": "^4.5.1",
     "big.js": "^6.2.2",
     "change-case": "^4.1.2",
     "chatgpt-prompt-splitter": "^1.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fdd28fe4..9ae2644a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -125,6 +125,9 @@ dependencies:
   big.js:
     specifier: ^6.2.2
     version: 6.2.2
+  bwip-js:
+    specifier: ^4.5.1
+    version: 4.5.1
   change-case:
     specifier: ^4.1.2
     version: 4.1.2
@@ -7709,6 +7712,11 @@ packages:
       semver: 7.6.3
     dev: true
 
+  /bwip-js@4.5.1:
+    resolution: {integrity: sha512-83yQCKiIftz5YonnsTh6wIkFoHHWl+B/XaGWD1UdRw7aB6XP9JtyYP9n8sRy3m5rzL+Ch/RUPnu28UW0RrPZUA==}
+    hasBin: true
+    dev: false
+
   /bytes.js@0.0.2:
     resolution: {integrity: sha512-KrLm4hv5Qs9w6b0U7h1bCdqxrsf+e9QMsfHeyQFzAz94x/5Aqa+FTEUSNBtt5d2VuV3Hfiea3c4ti74RZDDYkg==}
     dev: false
diff --git a/src/tools/barcode-generator/barcode-generator.vue b/src/tools/barcode-generator/barcode-generator.vue
index d0f603417..463e855ac 100644
--- a/src/tools/barcode-generator/barcode-generator.vue
+++ b/src/tools/barcode-generator/barcode-generator.vue
@@ -1,51 +1,61 @@
 <script setup lang="ts">
-import VueBarcode from '@chenfengyuan/vue-barcode';
-import JsBarcode from 'jsbarcode';
+import bwipjs, { type RenderOptions } from 'bwip-js/browser';
+import { Base64 } from 'js-base64';
+import formats from './barcode.formats.json';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
 
-const foreground = useQueryParamOrStorage({ name: 'fg', storageName: 'barcode-gen:fg', defaultValue: '#000000ff' });
-const background = useQueryParamOrStorage({ name: 'bg', storageName: 'barcode-gen:bg', defaultValue: '#ffffffff' });
-const width = useQueryParamOrStorage({ name: 'width', storageName: 'barcode-gen:width', defaultValue: 2 });
-const height = useQueryParamOrStorage({ name: 'height', storageName: 'barcode-gen:height', defaultValue: 100 });
+const foreground = useQueryParamOrStorage({ name: 'fg', storageName: 'barcode-gen:fg', defaultValue: '#000000' });
+const background = useQueryParamOrStorage({ name: 'bg', storageName: 'barcode-gen:bg', defaultValue: '#FFFFFF' });
+const scale = useQueryParamOrStorage({ name: 'scale', storageName: 'barcode-gen:scale', defaultValue: 2 });
+const height = useQueryParamOrStorage({ name: 'height', storageName: 'barcode-gen:height', defaultValue: 25 });
 const margin = useQueryParamOrStorage({ name: 'margin', storageName: 'barcode-gen:margin', defaultValue: 10 });
-const format = useQueryParamOrStorage({ name: 'format', storageName: 'barcode-gen:format', defaultValue: 'auto' });
+const format = useQueryParamOrStorage({ name: 'format', storageName: 'barcode-gen:format', defaultValue: 'code128' });
 const displayValue = useQueryParamOrStorage({ name: 'display', storageName: 'barcode-gen:display', defaultValue: true });
-const ean128 = useQueryParamOrStorage({ name: 'ean128', storageName: 'barcode-gen:ean128', defaultValue: false });
 const value = ref('123456789');
+const barcodeCanvas = ref<HTMLCanvasElement>();
 
-const options = computed(() => ({
-  lineColor: foreground.value,
-  background: background.value,
-  width: width.value,
+const options = computed<RenderOptions>(() => ({
+  barcolor: foreground.value,
+  textcolor: foreground.value,
+  backgroundcolor: background.value,
+  scale: scale.value,
   height: height.value,
-  margin: margin.value,
-  format: format.value === 'auto' ? 'CODE128' : format.value,
-  displayValue: displayValue.value,
-  ean128: ean128.value,
+  padding: margin.value,
+  bcid: format.value === 'auto' ? 'code128' : format.value,
+  includetext: displayValue.value,
   text: value.value,
+  textxalign: 'center',
 }));
 
-const formats = [
-  'auto',
-  'CODE39',
-  'CODE128', 'CODE128A', 'CODE128B', 'CODE128C',
-  'EAN13', 'EAN8', 'EAN5', 'EAN2', 'UPC', 'UPCE',
-  'ITF14',
-  'ITF',
-  'MSI', 'MSI10', 'MSI11', 'MSI1010', 'MSI1110',
-  'pharmacode',
-  'codabar',
-  'GenericBarcode',
-];
+const error = ref('');
+watchEffect(() => {
+  if (!barcodeCanvas.value) {
+    return;
+  }
+
+  try {
+    bwipjs.toCanvas(barcodeCanvas.value, options.value);
+  }
+  catch (e: any) {
+    error.value = e.toString();
+  }
+});
 
 const barcodePNG = computed(() => {
-  const canvas = document.createElement('canvas');
-  JsBarcode(canvas, value.value, options.value);
-  return canvas.toDataURL('image/png');
+  return barcodeCanvas.value?.toDataURL('image/png') || '';
+});
+const barcodeSVG = computed(() => {
+  try {
+    return Base64.encode(bwipjs.toSVG(options.value));
+  }
+  catch (e: any) {
+    return '';
+  }
 });
 
-const { download } = useDownloadFileFromBase64({ source: barcodePNG, filename: 'barcode.png' });
+const { download: downloadPNG } = useDownloadFileFromBase64({ source: barcodePNG, filename: 'barcode.png' });
+const { download: downloadSVG } = useDownloadFileFromBase64({ source: barcodeSVG, filename: 'barcode.svg' });
 </script>
 
 <template>
@@ -61,20 +71,31 @@ const { download } = useDownloadFileFromBase64({ source: barcodePNG, filename: '
           multiline
           rows="1"
           autosize
-          placeholder="Your text..."
+          placeholder="Your barcode..."
           mb-6
         />
         <n-form label-width="130" label-placement="left">
+          <c-select
+            v-model:value="format"
+            label="Format:"
+            label-position="left"
+            label-width="130px"
+            label-align="right"
+            :options="formats"
+            searchable
+            mb-4
+          />
+
           <n-form-item label="Foreground color:">
-            <n-color-picker v-model:value="foreground" :modes="['hex']" />
+            <n-color-picker v-model:value="foreground" :modes="['hex']" :show-alpha="false" />
           </n-form-item>
           <n-form-item label="Background color:">
-            <n-color-picker v-model:value="background" :modes="['hex']" />
+            <n-color-picker v-model:value="background" :modes="['hex']" :show-alpha="false" />
           </n-form-item>
-          <n-form-item label="Width:">
-            <n-input-number v-model:value="width" :min="0" />
+          <n-form-item label="Scale:">
+            <n-input-number v-model:value="scale" :min="0" />
           </n-form-item>
-          <n-form-item label="Height:">
+          <n-form-item label="Height (mm):">
             <n-input-number v-model:value="height" :min="0" />
           </n-form-item>
           <n-form-item label="Margin:">
@@ -83,25 +104,22 @@ const { download } = useDownloadFileFromBase64({ source: barcodePNG, filename: '
           <n-form-item label="Display text:">
             <n-checkbox v-model:checked="displayValue" />
           </n-form-item>
-          <c-select
-            v-model:value="format"
-            label="Format:"
-            label-position="left"
-            label-width="130px"
-            label-align="right"
-            :options="formats.map((value) => ({ label: value, value }))"
-          />
         </n-form>
       </n-gi>
       <n-gi>
         <div flex flex-col items-center gap-3>
-          <VueBarcode
-            :options="options"
-            :value="value"
-          />
-          <c-button @click="download">
-            Download barcode
-          </c-button>
+          <c-alert v-if="error">
+            {{ error }}
+          </c-alert>
+          <canvas ref="barcodeCanvas" />
+          <div flex justify-center>
+            <c-button mr-2 @click="downloadPNG">
+              Download PNG barcode
+            </c-button>
+            <c-button @click="downloadSVG">
+              Download SVG barcode
+            </c-button>
+          </div>
         </div>
       </n-gi>
     </n-grid>
diff --git a/src/tools/barcode-generator/barcode.formats.json b/src/tools/barcode-generator/barcode.formats.json
new file mode 100644
index 000000000..951ddf550
--- /dev/null
+++ b/src/tools/barcode-generator/barcode.formats.json
@@ -0,0 +1,112 @@
+[
+  { "value": "auspost", "label": "AusPost 4 State Customer Code" },
+  { "value": "azteccode", "label": "Aztec Code" },
+  { "value": "azteccodecompact", "label": "Compact Aztec Code" },
+  { "value": "aztecrune", "label": "Aztec Runes" },
+  { "value": "bc412", "label": "BC412" },
+  { "value": "channelcode", "label": "Channel Code" },
+  { "value": "codablockf", "label": "Codablock F" },
+  { "value": "code11", "label": "Code 11" },
+  { "value": "code128", "label": "Code 128" },
+  { "value": "code16k", "label": "Code 16K" },
+  { "value": "code2of5", "label": "Code 25" },
+  { "value": "code32", "label": "Italian Pharmacode" },
+  { "value": "code39", "label": "Code 39" },
+  { "value": "code39ext", "label": "Code 39 Extended" },
+  { "value": "code49", "label": "Code 49" },
+  { "value": "code93", "label": "Code 93" },
+  { "value": "code93ext", "label": "Code 93 Extended" },
+  { "value": "codeone", "label": "Code One" },
+  { "value": "coop2of5", "label": "COOP 2 of 5" },
+  { "value": "daft", "label": "Custom 4 state symbology" },
+  { "value": "databarexpanded", "label": "GS1 DataBar Expanded" },
+  { "value": "databarexpandedcomposite", "label": "GS1 DataBar Expanded Composite" },
+  { "value": "databarexpandedstacked", "label": "GS1 DataBar Expanded Stacked" },
+  { "value": "databarexpandedstackedcomposite", "label": "GS1 DataBar Expanded Stacked Composite" },
+  { "value": "databarlimited", "label": "GS1 DataBar Limited" },
+  { "value": "databarlimitedcomposite", "label": "GS1 DataBar Limited Composite" },
+  { "value": "databaromni", "label": "GS1 DataBar Omnidirectional" },
+  { "value": "databaromnicomposite", "label": "GS1 DataBar Omnidirectional Composite" },
+  { "value": "databarstacked", "label": "GS1 DataBar Stacked" },
+  { "value": "databarstackedcomposite", "label": "GS1 DataBar Stacked Composite" },
+  { "value": "databarstackedomni", "label": "GS1 DataBar Stacked Omnidirectional" },
+  { "value": "databarstackedomnicomposite", "label": "GS1 DataBar Stacked Omnidirectional Composite" },
+  { "value": "databartruncated", "label": "GS1 DataBar Truncated" },
+  { "value": "databartruncatedcomposite", "label": "GS1 DataBar Truncated Composite" },
+  { "value": "datalogic2of5", "label": "Datalogic 2 of 5" },
+  { "value": "datamatrix", "label": "Data Matrix" },
+  { "value": "datamatrixrectangular", "label": "Data Matrix Rectangular" },
+  { "value": "datamatrixrectangularextension", "label": "Data Matrix Rectangular Extension" },
+  { "value": "dotcode", "label": "DotCode" },
+  { "value": "ean13", "label": "EAN-13" },
+  { "value": "ean13composite", "label": "EAN-13 Composite" },
+  { "value": "ean14", "label": "GS1-14" },
+  { "value": "ean2", "label": "EAN-2 (2 digit addon)" },
+  { "value": "ean5", "label": "EAN-5 (5 digit addon)" },
+  { "value": "ean8", "label": "EAN-8" },
+  { "value": "ean8composite", "label": "EAN-8 Composite" },
+  { "value": "flattermarken", "label": "Flattermarken" },
+  { "value": "gs1-128", "label": "GS1-128" },
+  { "value": "gs1-128composite", "label": "GS1-128 Composite" },
+  { "value": "gs1-cc", "label": "GS1 Composite 2D Component" },
+  { "value": "gs1datamatrix", "label": "GS1 Data Matrix" },
+  { "value": "gs1datamatrixrectangular", "label": "GS1 Data Matrix Rectangular" },
+  { "value": "gs1dldatamatrix", "label": "GS1 Digital Link Data Matrix" },
+  { "value": "gs1dlqrcode", "label": "GS1 Digital Link QR Code" },
+  { "value": "gs1dotcode", "label": "GS1 DotCode" },
+  { "value": "gs1northamericancoupon", "label": "GS1 North American Coupon" },
+  { "value": "gs1qrcode", "label": "GS1 QR Code" },
+  { "value": "hanxin", "label": "Han Xin Code" },
+  { "value": "hibcazteccode", "label": "HIBC Aztec Code" },
+  { "value": "hibccodablockf", "label": "HIBC Codablock F" },
+  { "value": "hibccode128", "label": "HIBC Code 128" },
+  { "value": "hibccode39", "label": "HIBC Code 39" },
+  { "value": "hibcdatamatrix", "label": "HIBC Data Matrix" },
+  { "value": "hibcdatamatrixrectangular", "label": "HIBC Data Matrix Rectangular" },
+  { "value": "hibcmicropdf417", "label": "HIBC MicroPDF417" },
+  { "value": "hibcpdf417", "label": "HIBC PDF417" },
+  { "value": "hibcqrcode", "label": "HIBC QR Code" },
+  { "value": "iata2of5", "label": "IATA 2 of 5" },
+  { "value": "identcode", "label": "Deutsche Post Identcode" },
+  { "value": "industrial2of5", "label": "Industrial 2 of 5" },
+  { "value": "interleaved2of5", "label": "Interleaved 2 of 5 (ITF)" },
+  { "value": "isbn", "label": "ISBN" },
+  { "value": "ismn", "label": "ISMN" },
+  { "value": "issn", "label": "ISSN" },
+  { "value": "itf14", "label": "ITF-14" },
+  { "value": "japanpost", "label": "Japan Post 4 State Customer Code" },
+  { "value": "kix", "label": "Royal Dutch TPG Post KIX" },
+  { "value": "leitcode", "label": "Deutsche Post Leitcode" },
+  { "value": "mailmark", "label": "Royal Mail Mailmark" },
+  { "value": "mands", "label": "Marks & Spencer" },
+  { "value": "matrix2of5", "label": "Matrix 2 of 5" },
+  { "value": "maxicode", "label": "MaxiCode" },
+  { "value": "micropdf417", "label": "MicroPDF417" },
+  { "value": "microqrcode", "label": "Micro QR Code" },
+  { "value": "msi", "label": "MSI Modified Plessey" },
+  { "value": "onecode", "label": "USPS Intelligent Mail" },
+  { "value": "pdf417", "label": "PDF417" },
+  { "value": "pdf417compact", "label": "Compact PDF417" },
+  { "value": "pharmacode", "label": "Pharmaceutical Binary Code" },
+  { "value": "pharmacode2", "label": "Two-track Pharmacode" },
+  { "value": "planet", "label": "USPS PLANET" },
+  { "value": "plessey", "label": "Plessey UK" },
+  { "value": "posicode", "label": "PosiCode" },
+  { "value": "postnet", "label": "USPS POSTNET" },
+  { "value": "pzn", "label": "Pharmazentralnummer (PZN)" },
+  { "value": "qrcode", "label": "QR Code" },
+  { "value": "rationalizedCodabar", "label": "Codabar" },
+  { "value": "raw", "label": "Custom 1D symbology" },
+  { "value": "rectangularmicroqrcode", "label": "Rectangular Micro QR Code" },
+  { "value": "royalmail", "label": "Royal Mail 4 State Customer Code" },
+  { "value": "sscc18", "label": "SSCC-18" },
+  { "value": "swissqrcode", "label": "Swiss QR Code" },
+  { "value": "symbol", "label": "Miscellaneous symbols" },
+  { "value": "telepen", "label": "Telepen" },
+  { "value": "telepennumeric", "label": "Telepen Numeric" },
+  { "value": "ultracode", "label": "Ultracode" },
+  { "value": "upca", "label": "UPC-A" },
+  { "value": "upcacomposite", "label": "UPC-A Composite" },
+  { "value": "upce", "label": "UPC-E" },
+  { "value": "upcecomposite", "label": "UPC-E Composite" }
+]
diff --git a/src/tools/barcode-generator/bwip-js.d.ts b/src/tools/barcode-generator/bwip-js.d.ts
new file mode 100644
index 000000000..ca352c3eb
--- /dev/null
+++ b/src/tools/barcode-generator/bwip-js.d.ts
@@ -0,0 +1,82 @@
+declare module 'bwip-js/browser' {
+    export interface BwippOptions {
+        includecheck?: boolean | undefined;
+        includecheckintext?: boolean | undefined;
+
+        parse?: boolean | undefined;
+        parsefnc?: boolean | undefined;
+
+        height?: number | undefined;
+        width?: number | undefined;
+
+        inkspread?: number | undefined;
+        inkspreadh?: number | undefined;
+        inkspreadv?: number | undefined;
+        dotty?: boolean | undefined;
+
+        binarytext?: boolean | undefined;   // really a bwip-js option but better positioned here
+        includetext?: boolean | undefined;
+        textfont?: string | undefined;
+        textsize?: number | undefined;
+        textgaps?: number | undefined;
+        alttext?: string | undefined;
+
+        textxalign?: 'offleft' | 'left' | 'center' | 'right' | 'offright' | 'justify' | undefined;
+        textyalign?: 'below' | 'center' | 'above' | undefined;
+        textxoffset?: number | undefined;
+        textyoffset?: number | undefined;
+
+        showborder?: boolean | undefined;
+        borderwidth?: number | undefined;
+        borderleft?: number | undefined;
+        borderright?: number | undefined;
+        bordertop?: number | undefined;
+        boraderbottom?: number | undefined;
+
+        barcolor?: string | undefined;
+        backgroundcolor?: string | undefined;
+        bordercolor?: string | undefined;
+        textcolor?: string | undefined;
+
+        addontextxoffset?: number | undefined;
+        addontextyoffset?: number | undefined;
+        addontextfont?: string | undefined;
+        addontextsize?: number | undefined;
+
+        guardwhitespace?: boolean | undefined;
+        guardwidth?: number | undefined;
+        guardheight?: number | undefined;
+        guardleftpos?: number | undefined;
+        guardrightpos?: number | undefined;
+        guardleftypos?: number | undefined;
+        guardrightypos?: number | undefined;
+    }
+    export interface RenderOptions extends BwippOptions {
+        bcid: string;
+        text: string;
+
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        scale?: number | undefined;
+
+        rotate?: 'N' | 'R' | 'L' | 'I' | undefined;
+
+        paddingwidth?: number | undefined;
+        paddingheight?: number | undefined;
+
+        paddingleft?: number | undefined;
+        paddingright?: number | undefined;
+        paddingtop?: number | undefined;
+        paddingbottom?: number | undefined;
+
+        monochrome?: boolean | undefined;
+        sizelimit?: number | undefined;
+    }
+
+    export const BWIPP_VERSION: string;
+    export const BWIPJS_VERSION: string;
+
+    export function toSVG(opts: RenderOptions): string;
+
+    export function toCanvas(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
+}
\ No newline at end of file