qrlayout-core 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +164 -161
  2. package/package.json +68 -68
package/README.md CHANGED
@@ -1,161 +1,164 @@
1
- # qrlayout-core
2
-
3
- A powerful, framework-agnostic QR code layout engine for designing and printing QR code stickers and labels. Create pixel-perfect layouts with text and QR codes, and export them to **PNG**, **PDF**, or **ZPL** (Zebra Programming Language).
4
-
5
- > [!NOTE]
6
- > This package is the core rendering engine. For a visual drag-and-drop designer, check out **[qrlayout-ui](../ui/README.md)**.
7
- > It is a **Framework-Agnostic** embeddable UI component that works with **React, Vue, Angular, Svelte, and Vanilla JS**.
8
- >
9
- > Visit our **[Live Demo](https://qr-layout-designer.netlify.app/)** to see it in action.
10
-
11
-
12
- ## Features
13
-
14
- - **Precise Layouts**: Define stickers in `mm`, `cm`, `in`, or `px`.
15
- - **Multiple Formats**: Export to Canvas (preview), PNG/JPEG (image), PDF (print), or ZPL (industrial thermal printers).
16
- - **Dynamic Content**: Use variable placeholders (e.g., `{{name}}`, `{{visitorId}}`) to batch generate unique stickers.
17
- - **Lightweight**: Minimal dependencies. PDF export is optional to keep bundle size small.
18
-
19
- ## Keywords
20
-
21
- QR code, qrcode, qr-code, layout, sticker, label, generator, renderer, PDF, ZPL, barcode, thermal printer.
22
-
23
- ## Live Demo & Examples
24
-
25
- - **[Interactive Demo](https://qr-layout-designer.netlify.app/)**: A full-featured designer built with `qrlayout-core` and `qrlayout-ui`.
26
- - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/ui-react)**: Reference implementation for monorepo usage.
27
-
28
- ## Installation
29
-
30
- ```bash
31
- npm install qrlayout-core
32
- ```
33
-
34
- ## Quick Start
35
-
36
- ### 1. Define a Layout
37
-
38
- A layout is a JSON object describing the sticker dimensions and elements.
39
-
40
- ```ts
41
- import { type StickerLayout } from "qrlayout-core";
42
-
43
- const myLayout: StickerLayout = {
44
- id: "badge-layout",
45
- name: "Conference Badge",
46
- width: 100, // 100mm width
47
- height: 60, // 60mm height
48
- unit: "mm",
49
- elements: [
50
- {
51
- id: "title",
52
- type: "text",
53
- x: 0, y: 5, w: 100, h: 10,
54
- content: "VISITOR PASS",
55
- style: { fontSize: 14, fontWeight: "bold", textAlign: "center" }
56
- },
57
- {
58
- id: "name",
59
- type: "text",
60
- x: 5, y: 25, w: 60, h: 10,
61
- content: "{{name}}", // Placeholder
62
- style: { fontSize: 12 }
63
- },
64
- {
65
- id: "qr-code",
66
- type: "qr",
67
- x: 70, y: 20, w: 25, h: 25,
68
- content: "{{visitorId}}" // Placeholder
69
- }
70
- ]
71
- };
72
- ```
73
-
74
- ### 2. Render or Export
75
-
76
- Pass data to the `StickerPrinter` to generate outputs.
77
-
78
- ```ts
79
- import { StickerPrinter } from "qrlayout-core";
80
-
81
- // Data to fill placeholders
82
- const data = {
83
- name: "Priyanka Verma",
84
- visitorId: "https://example.com/visitors/priyanka"
85
- };
86
-
87
- const printer = new StickerPrinter();
88
-
89
- // --- Option A: Render to HTML Canvas (Browser) ---
90
- const canvas = document.querySelector("#preview") as HTMLCanvasElement;
91
- await printer.renderToCanvas(myLayout, data, canvas);
92
-
93
- // --- Option B: Get an Image URL (PNG) ---
94
- const imageUrl = await printer.renderToDataURL(myLayout, data, { format: "png", dpi: 300 });
95
- console.log(imageUrl); // "data:image/png;base64,..."
96
-
97
- // --- Option C: Generate ZPL for Thermal Printers ---
98
- const zplCommands = printer.exportToZPL(myLayout, [data]);
99
- console.log(zplCommands[0]); // "^XA^FO..."
100
-
101
- ```
102
-
103
- ## PDF Export (Optional)
104
-
105
- To enable PDF export, you must install `jspdf`. This is an optional peer dependency to prevent bloating the core library for users who don't need PDF support.
106
-
107
- ### 1. Install jspdf
108
-
109
- ```bash
110
- npm install jspdf
111
- ```
112
-
113
- ### 2. Use the PDF Module
114
-
115
- ```ts
116
- import { exportToPDF } from "qrlayout-core/pdf";
117
-
118
- // Generate a PDF with multiple stickers (e.g., standard A4 sheet logic can be handled by caller,
119
- // this function currently outputs one page per sticker or as configured).
120
- const pdfDoc = await exportToPDF(myLayout, [data, data2, data3]);
121
-
122
- // Save the PDF
123
- pdfDoc.save("badges.pdf");
124
- ```
125
-
126
- ## API Reference
127
-
128
- ### `StickerLayout` Interface
129
-
130
- | Property | Type | Description |
131
- |----------|------|-------------|
132
- | `id` | `string` | Unique identifier for the layout. |
133
- | `name` | `string` | Human-readable name of the layout. |
134
- | `width` | `number` | Width of the sticker. |
135
- | `height` | `number` | Height of the sticker. |
136
- | `unit` | `"mm" \| "cm" \| "in" \| "px"` | Unit of measurement. |
137
- | `elements` | `StickerElement[]` | List of items on the sticker. |
138
- | `backgroundColor` | `string` | (Optional) Background color hex. |
139
- | `backgroundImage` | `string` | (Optional) Background image URL. |
140
-
141
- ### `StickerElement` Interface
142
-
143
- | Property | Type | Description |
144
- |----------|------|-------------|
145
- | `id` | `string` | Unique identifier for the element. |
146
- | `type` | `"text" \| "qr"` | Type of element. |
147
- | `x`, `y` | `number` | Position from top-left. |
148
- | `w`, `h` | `number` | Width and height. |
149
- | `content` | `string` | Text, URL, source. Supports `{{key}}` syntax. |
150
- | `qrSeparator` | `string` | (Optional) Separator used to join consecutive `{{variables}}` (e.g., `|`, `,`). |
151
- | `style.fontFamily` | `string` | Font family (e.g., 'sans-serif', 'Inter'). |
152
- | `style.fontSize` | `number` | Font size (px). |
153
- | `style.fontWeight` | `string \| number` | Font weight (e.g., 'bold', 700). |
154
- | `style.textAlign` | `"left" \| "center" \| "right"` | Horizontal alignment. |
155
- | `style.verticalAlign` | `"top" \| "middle" \| "bottom"` | Vertical alignment. |
156
- | `style.color` | `string` | Text color hex code. |
157
- | `style.backgroundColor` | `string` | Background color for the element. |
158
-
159
- ## License
160
-
161
- MIT
1
+ # qrlayout-core
2
+
3
+ A powerful, framework-agnostic QR code layout engine for designing and printing QR code stickers and labels. Create pixel-perfect layouts with text and QR codes, and export them to **PNG**, **PDF**, or **ZPL** (Zebra Programming Language).
4
+
5
+ > [!NOTE]
6
+ > This package is the core rendering engine. For a visual drag-and-drop designer, check out **[qrlayout-ui](../ui/README.md)**.
7
+ > It is a **Framework-Agnostic** embeddable UI component that works with **React, Vue, Angular, Svelte, and Vanilla JS**.
8
+ >
9
+ - **[ React Live Demo](https://qr-layout-designer.netlify.app/)**
10
+ - **[ Svelte Live Demo](https://qr-layout-designer-svelte.netlify.app/)**
11
+
12
+
13
+ ## Features
14
+
15
+ - **Precise Layouts**: Define stickers in `mm`, `cm`, `in`, or `px`.
16
+ - **Multiple Formats**: Export to Canvas (preview), PNG/JPEG (image), PDF (print), or ZPL (industrial thermal printers).
17
+ - **Dynamic Content**: Use variable placeholders (e.g., `{{name}}`, `{{visitorId}}`) to batch generate unique stickers.
18
+ - **Lightweight**: Minimal dependencies. PDF export is optional to keep bundle size small.
19
+
20
+ ## Keywords
21
+
22
+ QR code, qrcode, qr-code, layout, sticker, label, generator, renderer, PDF, ZPL, barcode, thermal printer.
23
+
24
+ ## Live Demo & Examples
25
+
26
+ - **[Interactive Demo](https://qr-layout-designer.netlify.app/)**: A full-featured designer built with `qrlayout-core` and `qrlayout-ui`.
27
+ - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/ui-demo)**: Reference implementation for monorepo usage.
28
+
29
+ - **[Svelte Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/svelte-demo)**: Reference implementation for Svelte 5 + Tailwind CSS.
30
+
31
+ ## Installation
32
+
33
+ ```bash
34
+ npm install qrlayout-core
35
+ ```
36
+
37
+ ## Quick Start
38
+
39
+ ### 1. Define a Layout
40
+
41
+ A layout is a JSON object describing the sticker dimensions and elements.
42
+
43
+ ```ts
44
+ import { type StickerLayout } from "qrlayout-core";
45
+
46
+ const myLayout: StickerLayout = {
47
+ id: "badge-layout",
48
+ name: "Conference Badge",
49
+ width: 100, // 100mm width
50
+ height: 60, // 60mm height
51
+ unit: "mm",
52
+ elements: [
53
+ {
54
+ id: "title",
55
+ type: "text",
56
+ x: 0, y: 5, w: 100, h: 10,
57
+ content: "VISITOR PASS",
58
+ style: { fontSize: 14, fontWeight: "bold", textAlign: "center" }
59
+ },
60
+ {
61
+ id: "name",
62
+ type: "text",
63
+ x: 5, y: 25, w: 60, h: 10,
64
+ content: "{{name}}", // Placeholder
65
+ style: { fontSize: 12 }
66
+ },
67
+ {
68
+ id: "qr-code",
69
+ type: "qr",
70
+ x: 70, y: 20, w: 25, h: 25,
71
+ content: "{{visitorId}}" // Placeholder
72
+ }
73
+ ]
74
+ };
75
+ ```
76
+
77
+ ### 2. Render or Export
78
+
79
+ Pass data to the `StickerPrinter` to generate outputs.
80
+
81
+ ```ts
82
+ import { StickerPrinter } from "qrlayout-core";
83
+
84
+ // Data to fill placeholders
85
+ const data = {
86
+ name: "Priyanka Verma",
87
+ visitorId: "https://example.com/visitors/priyanka"
88
+ };
89
+
90
+ const printer = new StickerPrinter();
91
+
92
+ // --- Option A: Render to HTML Canvas (Browser) ---
93
+ const canvas = document.querySelector("#preview") as HTMLCanvasElement;
94
+ await printer.renderToCanvas(myLayout, data, canvas);
95
+
96
+ // --- Option B: Get an Image URL (PNG) ---
97
+ const imageUrl = await printer.renderToDataURL(myLayout, data, { format: "png", dpi: 300 });
98
+ console.log(imageUrl); // "data:image/png;base64,..."
99
+
100
+ // --- Option C: Generate ZPL for Thermal Printers ---
101
+ const zplCommands = printer.exportToZPL(myLayout, [data]);
102
+ console.log(zplCommands[0]); // "^XA^FO..."
103
+
104
+ ```
105
+
106
+ ## PDF Export (Optional)
107
+
108
+ To enable PDF export, you must install `jspdf`. This is an optional peer dependency to prevent bloating the core library for users who don't need PDF support.
109
+
110
+ ### 1. Install jspdf
111
+
112
+ ```bash
113
+ npm install jspdf
114
+ ```
115
+
116
+ ### 2. Use the PDF Module
117
+
118
+ ```ts
119
+ import { exportToPDF } from "qrlayout-core/pdf";
120
+
121
+ // Generate a PDF with multiple stickers (e.g., standard A4 sheet logic can be handled by caller,
122
+ // this function currently outputs one page per sticker or as configured).
123
+ const pdfDoc = await exportToPDF(myLayout, [data, data2, data3]);
124
+
125
+ // Save the PDF
126
+ pdfDoc.save("badges.pdf");
127
+ ```
128
+
129
+ ## API Reference
130
+
131
+ ### `StickerLayout` Interface
132
+
133
+ | Property | Type | Description |
134
+ |----------|------|-------------|
135
+ | `id` | `string` | Unique identifier for the layout. |
136
+ | `name` | `string` | Human-readable name of the layout. |
137
+ | `width` | `number` | Width of the sticker. |
138
+ | `height` | `number` | Height of the sticker. |
139
+ | `unit` | `"mm" \| "cm" \| "in" \| "px"` | Unit of measurement. |
140
+ | `elements` | `StickerElement[]` | List of items on the sticker. |
141
+ | `backgroundColor` | `string` | (Optional) Background color hex. |
142
+ | `backgroundImage` | `string` | (Optional) Background image URL. |
143
+
144
+ ### `StickerElement` Interface
145
+
146
+ | Property | Type | Description |
147
+ |----------|------|-------------|
148
+ | `id` | `string` | Unique identifier for the element. |
149
+ | `type` | `"text" \| "qr"` | Type of element. |
150
+ | `x`, `y` | `number` | Position from top-left. |
151
+ | `w`, `h` | `number` | Width and height. |
152
+ | `content` | `string` | Text, URL, source. Supports `{{key}}` syntax. |
153
+ | `qrSeparator` | `string` | (Optional) Separator used to join consecutive `{{variables}}` (e.g., `|`, `,`). |
154
+ | `style.fontFamily` | `string` | Font family (e.g., 'sans-serif', 'Inter'). |
155
+ | `style.fontSize` | `number` | Font size (px). |
156
+ | `style.fontWeight` | `string \| number` | Font weight (e.g., 'bold', 700). |
157
+ | `style.textAlign` | `"left" \| "center" \| "right"` | Horizontal alignment. |
158
+ | `style.verticalAlign` | `"top" \| "middle" \| "bottom"` | Vertical alignment. |
159
+ | `style.color` | `string` | Text color hex code. |
160
+ | `style.backgroundColor` | `string` | Background color for the element. |
161
+
162
+ ## License
163
+
164
+ MIT
package/package.json CHANGED
@@ -1,69 +1,69 @@
1
- {
2
- "name": "qrlayout-core",
3
- "version": "1.1.0",
4
- "description": "QR code layout builder, renderer, and exporter for stickers, labels, and PDFs",
5
- "keywords": [
6
- "qr",
7
- "qrcode",
8
- "qr-code",
9
- "qr-layout",
10
- "qr-layout",
11
- "qr-layout-designer",
12
- "layout",
13
- "qr-sticker",
14
- "qr-label",
15
- "zpl-generator",
16
- "pdf-generation",
17
- "label-printing",
18
- "layout",
19
- "qr-sticker",
20
- "qr-label",
21
- "generator",
22
- "renderer",
23
- "zpl",
24
- "thermal-printer"
25
- ],
26
- "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
27
- "license": "MIT",
28
- "repository": {
29
- "type": "git",
30
- "url": "git+https://github.com/shashi089/qr-code-layout-generate-tool.git",
31
- "directory": "packages/core"
32
- },
33
- "type": "module",
34
- "main": "dist/index.js",
35
- "module": "dist/index.js",
36
- "types": "dist/index.d.ts",
37
- "exports": {
38
- ".": {
39
- "types": "./dist/index.d.ts",
40
- "import": "./dist/index.js"
41
- },
42
- "./pdf": {
43
- "types": "./dist/pdf.d.ts",
44
- "import": "./dist/pdf.js"
45
- }
46
- },
47
- "files": [
48
- "dist",
49
- "README.md",
50
- "LICENSE"
51
- ],
52
- "publishConfig": {
53
- "access": "public"
54
- },
55
- "scripts": {
56
- "build": "tsc -p tsconfig.build.json"
57
- },
58
- "sideEffects": false,
59
- "dependencies": {
60
- "qrcode": "^1.5.4"
61
- },
62
- "optionalDependencies": {
63
- "jspdf": "^3.0.4"
64
- },
65
- "devDependencies": {
66
- "@types/qrcode": "^1.5.6",
67
- "typescript": "^5.3.3"
68
- }
1
+ {
2
+ "name": "qrlayout-core",
3
+ "version": "1.1.1",
4
+ "description": "QR code layout builder, renderer, and exporter for stickers, labels, and PDFs",
5
+ "keywords": [
6
+ "qr",
7
+ "qrcode",
8
+ "qr-code",
9
+ "qr-layout",
10
+ "qr-layout",
11
+ "qr-layout-designer",
12
+ "layout",
13
+ "qr-sticker",
14
+ "qr-label",
15
+ "zpl-generator",
16
+ "pdf-generation",
17
+ "label-printing",
18
+ "layout",
19
+ "qr-sticker",
20
+ "qr-label",
21
+ "generator",
22
+ "renderer",
23
+ "zpl",
24
+ "thermal-printer"
25
+ ],
26
+ "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
27
+ "license": "MIT",
28
+ "repository": {
29
+ "type": "git",
30
+ "url": "git+https://github.com/shashi089/qr-code-layout-generate-tool.git",
31
+ "directory": "packages/core"
32
+ },
33
+ "type": "module",
34
+ "main": "dist/index.js",
35
+ "module": "dist/index.js",
36
+ "types": "dist/index.d.ts",
37
+ "exports": {
38
+ ".": {
39
+ "types": "./dist/index.d.ts",
40
+ "import": "./dist/index.js"
41
+ },
42
+ "./pdf": {
43
+ "types": "./dist/pdf.d.ts",
44
+ "import": "./dist/pdf.js"
45
+ }
46
+ },
47
+ "files": [
48
+ "dist",
49
+ "README.md",
50
+ "LICENSE"
51
+ ],
52
+ "publishConfig": {
53
+ "access": "public"
54
+ },
55
+ "scripts": {
56
+ "build": "tsc -p tsconfig.build.json"
57
+ },
58
+ "sideEffects": false,
59
+ "dependencies": {
60
+ "qrcode": "^1.5.4"
61
+ },
62
+ "optionalDependencies": {
63
+ "jspdf": "^3.0.4"
64
+ },
65
+ "devDependencies": {
66
+ "@types/qrcode": "^1.5.6",
67
+ "typescript": "^5.3.3"
68
+ }
69
69
  }