From d53d7a2587f9f861cc7c3ab5369fddf96dd72b1a Mon Sep 17 00:00:00 2001 From: Florian Pollak Date: Fri, 3 Apr 2026 23:32:53 +0200 Subject: [PATCH 1/3] implement datamatrix 2D code --- package.json | 2 + src/components/LabelDesigner.svelte | 8 +- .../DataMatrixParamsControls.svelte | 31 + .../designer-controls/ObjectPicker.svelte | 4 + .../ObjectPositionControls.svelte | 4 +- .../VariableInsertControl.svelte | 3 +- src/fabric-object/datamatrix.ts | 128 ++ src/types.ts | 2 +- src/utils/canvas_preprocess.ts | 3 +- src/utils/canvas_utils.ts | 5 +- src/utils/label_designer_object_helper.ts | 13 + yarn.lock | 1813 +++++++++++++++++ 12 files changed, 2009 insertions(+), 7 deletions(-) create mode 100644 src/components/designer-controls/DataMatrixParamsControls.svelte create mode 100644 src/fabric-object/datamatrix.ts create mode 100644 yarn.lock diff --git a/package.json b/package.json index 1909ee06..c929767f 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@mmote/niimbluelib": "0.0.1-alpha.38", "@popperjs/core": "^2.11.8", "bootstrap": "5.3.8", + "bwip-js": "4.9.0", "d3-dsv": "^3.0.1", "dayjs": "^1.11.19", "fabric": "^7.1.0", @@ -38,6 +39,7 @@ "@sveltejs/vite-plugin-svelte": "^6.2.1", "@tsconfig/svelte": "^5.0.5", "@types/bootstrap": "^5.2.10", + "@types/bwip-js": "3.2.3", "@types/d3-dsv": "^3.0.7", "@types/node": "^24.10.0", "@types/qrcode-svg": "^1.1.5", diff --git a/src/components/LabelDesigner.svelte b/src/components/LabelDesigner.svelte index 8fc2b71c..0156300c 100644 --- a/src/components/LabelDesigner.svelte +++ b/src/components/LabelDesigner.svelte @@ -5,6 +5,7 @@ import { ArUcoMarker } from "$/fabric-object/aruco"; import { Barcode } from "$/fabric-object/barcode"; import { QRCode } from "$/fabric-object/qrcode"; + import { DataMatrix } from "$/fabric-object/datamatrix"; import { iconCodepoints, type MaterialIcon } from "$/styles/mdi_icons"; import { automation, connectionState, csvData, loadedFonts } from "$/stores"; import { @@ -30,6 +31,7 @@ import PrintPreview from "$/components/PrintPreview.svelte"; import ArUcoParamsPanel from "$/components/designer-controls/ArUcoParamsControls.svelte"; import QrCodeParamsPanel from "$/components/designer-controls/QRCodeParamsControls.svelte"; + import DataMatrixParamsPanel from "$/components/designer-controls/DataMatrixParamsControls.svelte"; import TextParamsControls from "$/components/designer-controls/TextParamsControls.svelte"; import VariableInsertControl from "$/components/designer-controls/VariableInsertControl.svelte"; import { DEFAULT_LABEL_PROPS, GRID_SIZE, OBJECT_DEFAULTS } from "$/defaults"; @@ -550,6 +552,10 @@ {#if selectedObject instanceof QRCode} {/if} + + {#if selectedObject instanceof DataMatrix} + + {/if} {#if selectedObject instanceof ArUcoMarker} @@ -559,7 +565,7 @@ {/if} - {#if selectedObject instanceof fabric.IText || selectedObject instanceof QRCode || (selectedObject instanceof Barcode && selectedObject.encoding === "CODE128B")} + {#if selectedObject instanceof fabric.IText || selectedObject instanceof QRCode || selectedObject instanceof DataMatrix || (selectedObject instanceof Barcode && selectedObject.encoding === "CODE128B")} {/if} diff --git a/src/components/designer-controls/DataMatrixParamsControls.svelte b/src/components/designer-controls/DataMatrixParamsControls.svelte new file mode 100644 index 00000000..ca5d7a79 --- /dev/null +++ b/src/components/designer-controls/DataMatrixParamsControls.svelte @@ -0,0 +1,31 @@ + + + + + + + diff --git a/src/components/designer-controls/ObjectPicker.svelte b/src/components/designer-controls/ObjectPicker.svelte index 9e691b86..1d78914c 100644 --- a/src/components/designer-controls/ObjectPicker.svelte +++ b/src/components/designer-controls/ObjectPicker.svelte @@ -49,6 +49,10 @@ {$tr("editor.objectpicker.qrcode")} +