qrlayout-core 1.0.0 → 1.0.2

package/README.md

@@ -1,108 +1,140 @@
 # qrlayout-core
 
-Print-ready QR label layout engine. Build a label template with text/QR/image blocks, then export as PNG, PDF, or ZPL.
+A powerful, framework-agnostic engine for designing and printing QR code sticker layouts. Create pixel-perfect labels with text and QR codes, and export them to **PNG**, **PDF**, or **ZPL** (Zebra Programming Language).
 
 > [!NOTE]
-> This package was previously published as `@shashi089/qrlayout-core`. Please update your dependencies to `qrlayout-core`.
+> This package is the core rendering engine. For a visual drag-and-drop designer and a live React example, visit our **[Live Demo](https://qr-layout-design-react-demo.netlify.app/)**.
 
-## Install
+## Features
+
+-  **Precise Layouts**: Define stickers in `mm`, `cm`, `in`, or `px`.
+-  **Multiple Formats**: Export to Canvas (preview), PNG/JPEG (image), PDF (print), or ZPL (industrial thermal printers).
+-  **Dynamic Content**: Use variable placeholders (e.g., `{{name}}`, `{{sku}}`) to batch generate unique stickers.
+-  **Lightweight**: Minimal dependencies. PDF export is optional to keep bundle size small.
+
+## Live Demo & Examples
+
+- **[Interactive React Demo](https://qr-layout-design-react-demo.netlify.app/)**: A full-featured designer built with this package.
+- **[React Demo Source Code](https://github.com/shashi089/qr-code-layout-generate-tool/tree/example/demo-react)**: Reference implementation for monorepo usage.
+
+## Installation
 
 ```bash
 npm install qrlayout-core
 ```
 
-## Quick start
+## Quick Start
+
+### 1. Define a Layout
+
+A layout is a JSON object describing the sticker dimensions and elements.
 
 ```ts
-import { StickerPrinter, type StickerLayout } from "qrlayout-core";
+import { type StickerLayout } from "qrlayout-core";
 
-const layout: StickerLayout = {
-  id: "layout-1",
-  name: "Badge",
-  width: 100,
-  height: 60,
+const myLayout: StickerLayout = {
+  id: "badge-layout",
+  name: "Conference Badge",
+  width: 100, // 100mm width
+  height: 60, // 60mm height
   unit: "mm",
   elements: [
-    { id: "title", type: "text", x: 0, y: 5, w: 100, h: 10, content: "CONFERENCE PASS" },
-    { id: "name", type: "text", x: 5, y: 25, w: 60, h: 10, content: "{{name}}" },
-    { id: "qr", type: "qr", x: 70, y: 20, w: 25, h: 25, content: "{{uuid}}" }
+    { 
+        id: "title", 
+        type: "text", 
+        x: 0, y: 5, w: 100, h: 10, 
+        content: "VISITOR PASS",
+        style: { fontSize: 14, fontWeight: "bold", textAlign: "center" }
+    },
+    { 
+        id: "name", 
+        type: "text", 
+        x: 5, y: 25, w: 60, h: 10, 
+        content: "{{name}}", // Placeholder
+        style: { fontSize: 12 }
+    },
+    { 
+        id: "qr-code", 
+        type: "qr", 
+        x: 70, y: 20, w: 25, h: 25, 
+        content: "{{visitorId}}" // Placeholder
+    }
   ]
 };
+```
 
-const data = { name: "John Doe", uuid: "https://example.com" };
-const printer = new StickerPrinter();
+### 2. Render or Export
 
-// Browser canvas preview
-const canvas = document.getElementById("preview-canvas") as HTMLCanvasElement;
-await printer.renderToCanvas(layout, data, canvas);
+Pass data to the `StickerPrinter` to generate outputs.
 
-// PNG
-const png = await printer.renderToDataURL(layout, data, { format: "png" });
+```ts
+import { StickerPrinter } from "qrlayout-core";
 
-// PDF
-const pdf = await printer.exportToPDF(layout, [data]);
-pdf.save("stickers.pdf");
+// Data to fill placeholders
+const data = { 
+    name: "Priyanka Verma", 
+    visitorId: "https://example.com/visitors/priyanka" 
+};
 
-// ZPL
-const zpl = printer.exportToZPL(layout, [data]);
-console.log(zpl[0]);
-```
+const printer = new StickerPrinter();
 
-## Layout schema
+// --- Option A: Render to HTML Canvas (Browser) ---
+const canvas = document.querySelector("#preview") as HTMLCanvasElement;
+await printer.renderToCanvas(myLayout, data, canvas);
+
+// --- Option B: Get an Image URL (PNG) ---
+const imageUrl = await printer.renderToDataURL(myLayout, data, { format: "png", dpi: 300 });
+console.log(imageUrl); // "data:image/png;base64,..."
+
+// --- Option C: Generate ZPL for Thermal Printers ---
+const zplCommands = printer.exportToZPL(myLayout, [data]);
+console.log(zplCommands[0]); // "^XA^FO..."
 
-```ts
-type Unit = "mm" | "px" | "cm" | "in";
-type ElementType = "text" | "qr" | "image";
-
-interface StickerElement {
-  id: string;
-  type: ElementType;
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  content: string; // supports {{placeholders}}
-  style?: {
-    fontFamily?: string;
-    fontSize?: number;
-    fontWeight?: string | number;
-    textAlign?: "left" | "center" | "right";
-    color?: string;
-    backgroundColor?: string;
-  };
-}
-
-interface StickerLayout {
-  id: string;
-  name: string;
-  width: number;
-  height: number;
-  unit: Unit;
-  elements: StickerElement[];
-  backgroundColor?: string;
-  backgroundImage?: string;
-}
 ```
 
-## Outputs
+## PDF Export (Optional)
 
-- `renderToCanvas` for live preview in the browser
-- `renderToDataURL` for PNG/JPEG/WebP export
-- `exportToPDF` for print-ready PDF (optional)
-- `exportToZPL` for Zebra printers
+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.
 
-## Optional PDF export
+### 1. Install jspdf
+
+```bash
+npm install jspdf
+```
 
-PDF export is isolated in a separate entry so users can avoid the `jspdf` dependency unless needed.
+### 2. Use the PDF Module
 
 ```ts
 import { exportToPDF } from "qrlayout-core/pdf";
+
+// Generate a PDF with multiple stickers (e.g., standard A4 sheet logic can be handled by caller, 
+// this function currently outputs one page per sticker or as configured).
+const pdfDoc = await exportToPDF(myLayout, [data, data2, data3]);
+
+// Save the PDF
+pdfDoc.save("badges.pdf");
 ```
 
-If `jspdf` is not installed, `StickerPrinter.exportToPDF()` will throw a clear error.
+## API Reference
+
+### `StickerLayout` Interface
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `width` | `number` | Width of the sticker. |
+| `height` | `number` | Height of the sticker. |
+| `unit` | `"mm" \| "cm" \| "in" \| "px"` | Unit of measurement. |
+| `elements` | `StickerElement[]` | List of items on the sticker. |
+
+### `StickerElement` Interface
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `type` | `"text" \| "qr"` | Type of element. |
+| `x`, `y` | `number` | Position from top-left. |
+| `w`, `h` | `number` | Width and height. |
+| `content` | `string` | Text, URL, or image source. Supports `{{key}}` syntax. |
 
-## Notes
+## License
 
-- Text alignment is horizontal only (left/center/right).
-- For ZPL, images are not embedded (text and QR only).
-- When using external images in the browser, CORS headers are required or the canvas export will fail.
+MIT

package/dist/layout/schema.d.ts

@@ -1,10 +1,11 @@
 export type Unit = "mm" | "px" | "cm" | "in";
-export type ElementType = "text" | "qr" | "image";
+export type ElementType = "text" | "qr";
 export interface ElementStyle {
     fontFamily?: string;
     fontSize?: number;
     fontWeight?: string | number;
     textAlign?: "left" | "center" | "right";
+    verticalAlign?: "top" | "middle" | "bottom";
     color?: string;
     backgroundColor?: string;
 }

package/dist/pdf.js

@@ -59,16 +59,6 @@ export async function exportToPDF(layout, dataList) {
                     doc.addImage(qrUrl, "PNG", x, y, w, h);
                 }
             }
-            else if (element.type === "image") {
-                if (filledContent) {
-                    try {
-                        doc.addImage(filledContent, "PNG", x, y, w, h);
-                    }
-                    catch (e) {
-                        console.warn("Could not add image to PDF", e);
-                    }
-                }
-            }
             else if (element.type === "text") {
                 const style = element.style || {};
                 const fontSize = style.fontSize || 12;
@@ -81,8 +71,14 @@ export async function exportToPDF(layout, dataList) {
                     drawX = x + w / 2;
                 if (align === "right")
                     drawX = x + w;
-                doc.text(filledContent, drawX, y, {
-                    baseline: "top",
+                let drawY = y;
+                const vAlign = style.verticalAlign || "top";
+                if (vAlign === "middle")
+                    drawY = y + h / 2;
+                if (vAlign === "bottom")
+                    drawY = y + h;
+                doc.text(filledContent, drawX, drawY, {
+                    baseline: vAlign === "middle" ? "middle" : (vAlign === "bottom" ? "bottom" : "top"),
                     align: align
                 });
             }

package/dist/printer/StickerPrinter.js

@@ -51,11 +51,6 @@ export class StickerPrinter {
             else if (element.type === "text") {
                 this.drawText(ctx, element, filledContent, x, y, w, h);
             }
-            else if (element.type === "image") {
-                if (filledContent) { // Assume content is URL
-                    await this.drawImage(ctx, filledContent, x, y, w, h);
-                }
-            }
         }
     }
     async renderToDataURL(layout, data, options) {
@@ -79,15 +74,22 @@ export class StickerPrinter {
         const fontWeight = style.fontWeight || "normal";
         ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
         ctx.fillStyle = style.color || "#000";
-        ctx.textBaseline = "top";
+        // Handle Vertical Alignment (textBaseline)
+        ctx.textBaseline = style.verticalAlign === "middle" ? "middle" : (style.verticalAlign === "bottom" ? "bottom" : "top");
         ctx.textAlign = style.textAlign || "left";
-        // Handle Alignment X adjusment
+        // Handle Horizontal Alignment X adjustment
         let drawX = x;
         if (style.textAlign === "center")
             drawX = x + w / 2;
         if (style.textAlign === "right")
             drawX = x + w;
-        ctx.fillText(text, drawX, y);
+        // Handle Vertical Alignment Y adjustment
+        let drawY = y;
+        if (style.verticalAlign === "middle")
+            drawY = y + h / 2;
+        if (style.verticalAlign === "bottom")
+            drawY = y + h;
+        ctx.fillText(text, drawX, drawY);
     }
     drawImage(ctx, url, x, y, w, h) {
         return new Promise((resolve) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrlayout-core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "QR sticker layout builder/renderer/exporter core",
   "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
   "license": "MIT",