qrlayout-core 1.1.4 → 1.1.5

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 +68 -109
  2. package/package.json +8 -2
package/README.md CHANGED
@@ -1,167 +1,126 @@
1
1
  # qrlayout-core
2
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).
3
+ A high-performance, framework-agnostic QR code layout engine designed for professional sticker and label generation. Create pixel-perfect layouts with text, QR codes, and dynamic data, with native support for **PNG**, **PDF**, and **ZPL** (Zebra Programming Language).
4
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
- - **[ Vue Live Demo](https://qr-layout-designer-vue.netlify.app/)**
5
+ > [!TIP]
6
+ > This package contains the headless rendering logic. For an interactive visual designer, use **[`qrlayout-ui`](../ui/README.md)**.
7
+ > It works seamlessly across **React, Vue, Angular, Svelte, and Vanilla JS**.
12
8
 
9
+ ## 🚀 Live Demos & Examples
13
10
 
14
- ## Features
11
+ | Framework | Live Demo | Source Code |
12
+ | :--- | :--- | :--- |
13
+ | **React** | [Live Demo](https://qr-layout-designer.netlify.app/) | [Source](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/react-demo) |
14
+ | **Svelte 5** | [Live Demo](https://qr-layout-designer-svelte.netlify.app/) | [Source](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/svelte-demo) |
15
+ | **Vue 3** | [Live Demo](https://qr-layout-designer-vue.netlify.app/) | [Source](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/vue-demo) |
15
16
 
16
- - **Precise Layouts**: Define stickers in `mm`, `cm`, `in`, or `px`.
17
- - **Multiple Formats**: Export to Canvas (preview), PNG/JPEG (image), PDF (print), or ZPL (industrial thermal printers).
18
- - **Dynamic Content**: Use variable placeholders (e.g., `{{name}}`, `{{visitorId}}`) to batch generate unique stickers.
19
- - **Lightweight**: Minimal dependencies. PDF export is optional to keep bundle size small.
17
+ ## ✨ Core Features
20
18
 
21
- ## Keywords
19
+ - **Industrial Precision**: Define layouts in `mm`, `cm`, `in`, or `px`.
20
+ - **ZPL Support**: Direct export to Zebra Programming Language for thermal printers.
21
+ - **Batched Processing**: Generate thousands of unique labels from a single template using dynamic data binding.
22
+ - **Hardware Agnostic**: Renders to Canvas (Browser), Buffer (Node.js), or professional document formats.
22
23
 
23
- `qr-code`, `zpl`, `pdf`, `barcode-rendering`, `thermal-printer`, `headless`, `batch-printing`, `zebra-printer`
24
-
25
- ## Live Demo & Examples
26
-
27
- - **[Interactive Demo](https://qr-layout-designer.netlify.app/)**: A full-featured designer built with `qrlayout-core` and `qrlayout-ui`.
28
- - **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/react-demo)**: Reference implementation for monorepo usage.
29
-
30
- - **[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.
31
-
32
- - **[Vue Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/main/examples/vue-demo)**: Reference implementation for Vue + Tailwind CSS.
33
-
34
- ## Installation
24
+ ## 📦 Installation
35
25
 
36
26
  ```bash
37
27
  npm install qrlayout-core
38
28
  ```
39
29
 
40
- ## Quick Start
30
+ ## ⌨️ Quick Start
41
31
 
42
- ### 1. Define a Layout
32
+ ### 1. Define a Template
33
+ A layout is a robust JSON schema defining dimensions and elements.
43
34
 
44
- A layout is a JSON object describing the sticker dimensions and elements.
45
-
46
- ```ts
35
+ ```typescript
47
36
  import { type StickerLayout } from "qrlayout-core";
48
37
 
49
- const myLayout: StickerLayout = {
50
- id: "badge-layout",
51
- name: "Conference Badge",
52
- width: 100, // 100mm width
53
- height: 60, // 60mm height
38
+ const template: StickerLayout = {
39
+ id: "asset-tag",
40
+ name: "Asset Label",
41
+ width: 100,
42
+ height: 60,
54
43
  unit: "mm",
55
44
  elements: [
56
45
  {
57
- id: "title",
46
+ id: "header",
58
47
  type: "text",
59
48
  x: 0, y: 5, w: 100, h: 10,
60
- content: "VISITOR PASS",
49
+ content: "PROPERTY OF CORP",
61
50
  style: { fontSize: 14, fontWeight: "bold", textAlign: "center" }
62
51
  },
63
52
  {
64
- id: "name",
65
- type: "text",
66
- x: 5, y: 25, w: 60, h: 10,
67
- content: "{{name}}", // Placeholder
68
- style: { fontSize: 12 }
69
- },
70
- {
71
- id: "qr-code",
53
+ id: "id-qr",
72
54
  type: "qr",
73
- x: 70, y: 20, w: 25, h: 25,
74
- content: "{{visitorId}} {{name}}" // Placeholder
55
+ x: 35, y: 20, w: 30, h: 30,
56
+ content: "{{assetId}}"
75
57
  }
76
58
  ]
77
59
  };
78
60
  ```
79
61
 
80
- ### 2. Render or Export
62
+ ### 2. Generate Output
63
+ Use the `StickerPrinter` to render the template with real data.
81
64
 
82
- Pass data to the `StickerPrinter` to generate outputs.
83
-
84
- ```ts
65
+ ```typescript
85
66
  import { StickerPrinter } from "qrlayout-core";
86
67
 
87
- // Data to fill placeholders
88
- const data = {
89
- name: "Priyanka Verma",
90
- visitorId: "https://example.com/visitors/priyanka"
91
- };
92
-
93
68
  const printer = new StickerPrinter();
69
+ const data = { assetId: "https://audit.co/ID-9921" };
94
70
 
95
- // --- Option A: Render to HTML Canvas (Browser) ---
96
- const canvas = document.querySelector("#preview") as HTMLCanvasElement;
97
- await printer.renderToCanvas(myLayout, data, canvas);
98
-
99
- // --- Option B: Get an Image URL (PNG) ---
100
- const imageUrl = await printer.renderToDataURL(myLayout, data, { format: "png", dpi: 300 });
101
- console.log(imageUrl); // "data:image/png;base64,..."
102
-
103
- // --- Option C: Generate ZPL for Thermal Printers ---
104
- const zplCommands = printer.exportToZPL(myLayout, [data]);
105
- console.log(zplCommands[0]); // "^XA^FO..."
71
+ // Render to Canvas for UI preview
72
+ await printer.renderToCanvas(template, data, myCanvasElement);
106
73
 
74
+ // Export to ZPL for thermal printing
75
+ const [zpl] = printer.exportToZPL(template, [data]);
107
76
  ```
108
77
 
109
- ## PDF Export (Optional)
110
-
111
- 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.
78
+ ## 📄 PDF Support (Optional)
112
79
 
113
- ### 1. Install jspdf
80
+ PDF export is provided as an optional module to keep the core bundle lightweight.
114
81
 
115
82
  ```bash
116
83
  npm install jspdf
117
84
  ```
118
85
 
119
- ### 2. Use the PDF Module
120
-
121
- ```ts
86
+ ```typescript
122
87
  import { exportToPDF } from "qrlayout-core/pdf";
123
88
 
124
- // Generate a PDF with multiple stickers (e.g., standard A4 sheet logic can be handled by caller,
125
- // this function currently outputs one page per sticker or as configured).
126
- const pdfDoc = await exportToPDF(myLayout, [data, data2, data3]);
127
-
128
- // Save the PDF
129
- pdfDoc.save("badges.pdf");
89
+ const pdf = await exportToPDF(template, [data1, data2]);
90
+ pdf.save("labels.pdf");
130
91
  ```
131
92
 
132
- ## API Reference
93
+ ## 📖 API Specification
133
94
 
134
- ### `StickerLayout` Interface
95
+ ### `StickerLayout` Attributes
135
96
 
136
- | Property | Type | Description |
137
- |----------|------|-------------|
97
+ | Attribute | Type | Description |
98
+ |---|---|---|
138
99
  | `id` | `string` | Unique identifier for the layout. |
139
- | `name` | `string` | Human-readable name of the layout. |
140
- | `width` | `number` | Width of the sticker. |
141
- | `height` | `number` | Height of the sticker. |
142
- | `unit` | `"mm" \| "cm" \| "in" \| "px"` | Unit of measurement. |
143
- | `elements` | `StickerElement[]` | List of items on the sticker. |
144
- | `backgroundColor` | `string` | (Optional) Background color hex. |
100
+ | `name` | `string` | Human-readable label name. |
101
+ | `width`, `height` | `number` | Physical dimensions. |
102
+ | `unit` | `mm \| cm \| in \| px` | Unit of measure. |
103
+ | `elements` | `StickerElement[]` | Array of visual components. |
104
+ | `backgroundColor` | `string` | (Optional) Background fill color hex. |
145
105
  | `backgroundImage` | `string` | (Optional) Background image URL. |
146
106
 
147
- ### `StickerElement` Interface
107
+ ### `StickerElement` Attributes
148
108
 
149
- | Property | Type | Description |
150
- |----------|------|-------------|
109
+ | Attribute | Type | Description |
110
+ |---|---|---|
151
111
  | `id` | `string` | Unique identifier for the element. |
152
- | `type` | `"text" \| "qr"` | Type of element. |
153
- | `x`, `y` | `number` | Position from top-left. |
154
- | `w`, `h` | `number` | Width and height. |
155
- | `content` | `string` | Text, URL, source. Supports `{{key}}` syntax. |
156
- | `qrSeparator` | `string` | (Optional) Separator used to join consecutive `{{variables}}` (e.g., `|`, `,`). |
157
- | `style.fontFamily` | `string` | Font family (e.g., 'sans-serif', 'Inter'). |
158
- | `style.fontSize` | `number` | Font size (px). |
159
- | `style.fontWeight` | `string \| number` | Font weight (e.g., 'bold', 700). |
160
- | `style.textAlign` | `"left" \| "center" \| "right"` | Horizontal alignment. |
161
- | `style.verticalAlign` | `"top" \| "middle" \| "bottom"` | Vertical alignment. |
162
- | `style.color` | `string` | Text color hex code. |
163
- | `style.backgroundColor` | `string` | Background color for the element. |
164
-
165
- ## License
112
+ | `type` | `text \| qr` | Component type. |
113
+ | `content` | `string` | Text content or template (e.g. `{{name}}`). |
114
+ | `x`, `y`, `w`, `h` | `number` | Position and size (top-left origin). |
115
+ | `qrSeparator` | `string` | Separator for joining consecutive `{{variables}}`. |
116
+ | `style.fontFamily` | `string` | Font family (e.g. `'Inter'`, `'sans-serif'`). |
117
+ | `style.fontSize` | `number` | Font size in pixels. |
118
+ | `style.fontWeight` | `string \| number` | Font weight (e.g. `'bold'`, `700`). |
119
+ | `style.textAlign` | `left \| center \| right` | Horizontal text alignment. |
120
+ | `style.verticalAlign` | `top \| middle \| bottom` | Vertical text alignment. |
121
+ | `style.color` | `string` | Text color hex. |
122
+ | `style.backgroundColor` | `string` | Element background color hex. |
123
+
124
+ ## 📄 License
166
125
 
167
126
  MIT
package/package.json CHANGED
@@ -1,9 +1,10 @@
1
1
  {
2
2
  "name": "qrlayout-core",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "description": "Headless rendering engine for QR code layouts, supporting ZPL, PDF, and Canvas.",
5
5
  "keywords": [
6
6
  "qr-code",
7
+ "qr-layout",
7
8
  "zpl",
8
9
  "pdf",
9
10
  "qrcode-rendering",
@@ -12,7 +13,12 @@
12
13
  "batch-printing",
13
14
  "zebra-printer",
14
15
  "label-printing",
15
- "qr-label"
16
+ "qr-label",
17
+ "sticker-printing",
18
+ "barcode",
19
+ "typescript",
20
+ "nodejs",
21
+ "canvas-rendering"
16
22
  ],
17
23
  "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
18
24
  "license": "MIT",