qrlayout-core 1.0.1 → 1.0.2

package/README.md

@@ -1,16 +1,21 @@
 # qrlayout-core
 
-A powerful, framework-agnostic engine for designing and printing QR code sticker layouts. Create pixel-perfect labels with text, QR codes, and images, and export them to **PNG**, **PDF**, or **ZPL** (Zebra Programming Language).
+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 is the core rendering engine. for a visual drag-and-drop designer, check out the [QR Layout Workspace](https://github.com/shashi089/qr-code-layout-generate-tool).
+> 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/)**.
 
 ## 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.
+-  **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
 
@@ -67,8 +72,8 @@ import { StickerPrinter } from "qrlayout-core";
 
 // Data to fill placeholders
 const data = { 
-    name: "Alice Johnson", 
-    visitorId: "https://example.com/visitors/alice" 
+    name: "Priyanka Verma", 
+    visitorId: "https://example.com/visitors/priyanka" 
 };
 
 const printer = new StickerPrinter();
@@ -125,7 +130,7 @@ pdfDoc.save("badges.pdf");
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `type` | `"text" \| "qr" \| "image"` | Type of element. |
+| `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. |

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.1",
+  "version": "1.0.2",
   "description": "QR sticker layout builder/renderer/exporter core",
   "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
   "license": "MIT",