qrlayout-core 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shashidhar Naik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,108 @@
+# qrlayout-core
+
+Print-ready QR label layout engine. Build a label template with text/QR/image blocks, then export as PNG, PDF, or ZPL.
+
+> [!NOTE]
+> This package was previously published as `@shashi089/qrlayout-core`. Please update your dependencies to `qrlayout-core`.
+
+## Install
+
+```bash
+npm install qrlayout-core
+```
+
+## Quick start
+
+```ts
+import { StickerPrinter, type StickerLayout } from "qrlayout-core";
+
+const layout: StickerLayout = {
+  id: "layout-1",
+  name: "Badge",
+  width: 100,
+  height: 60,
+  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}}" }
+  ]
+};
+
+const data = { name: "John Doe", uuid: "https://example.com" };
+const printer = new StickerPrinter();
+
+// Browser canvas preview
+const canvas = document.getElementById("preview-canvas") as HTMLCanvasElement;
+await printer.renderToCanvas(layout, data, canvas);
+
+// PNG
+const png = await printer.renderToDataURL(layout, data, { format: "png" });
+
+// PDF
+const pdf = await printer.exportToPDF(layout, [data]);
+pdf.save("stickers.pdf");
+
+// ZPL
+const zpl = printer.exportToZPL(layout, [data]);
+console.log(zpl[0]);
+```
+
+## Layout schema
+
+```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
+
+- `renderToCanvas` for live preview in the browser
+- `renderToDataURL` for PNG/JPEG/WebP export
+- `exportToPDF` for print-ready PDF (optional)
+- `exportToZPL` for Zebra printers
+
+## Optional PDF export
+
+PDF export is isolated in a separate entry so users can avoid the `jspdf` dependency unless needed.
+
+```ts
+import { exportToPDF } from "qrlayout-core/pdf";
+```
+
+If `jspdf` is not installed, `StickerPrinter.exportToPDF()` will throw a clear error.
+
+## Notes
+
+- 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.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./layout/schema";
+export * from "./printer/StickerPrinter";
+export * from "./qr/generator";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./layout/schema";
+export * from "./printer/StickerPrinter";
+export * from "./qr/generator";

package/dist/layout/schema.d.ts

@@ -0,0 +1,32 @@
+export type Unit = "mm" | "px" | "cm" | "in";
+export type ElementType = "text" | "qr" | "image";
+export interface ElementStyle {
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string | number;
+    textAlign?: "left" | "center" | "right";
+    color?: string;
+    backgroundColor?: string;
+}
+export interface StickerElement {
+    id: string;
+    type: ElementType;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    content: string;
+    style?: ElementStyle;
+}
+export type StickerData = Record<string, unknown>;
+export interface StickerLayout {
+    id: string;
+    name: string;
+    width: number;
+    height: number;
+    unit: Unit;
+    elements: StickerElement[];
+    backgroundColor?: string;
+    backgroundImage?: string;
+}
+export type ImageFormat = "png" | "jpeg" | "jpg" | "webp";

package/dist/layout/schema.js

@@ -0,0 +1 @@
+export {};

package/dist/pdf.d.ts

@@ -0,0 +1,4 @@
+import jsPDF from "jspdf";
+import { StickerLayout } from "./layout/schema";
+export type PdfDoc = InstanceType<typeof jsPDF>;
+export declare function exportToPDF(layout: StickerLayout, dataList: Record<string, any>[]): Promise<PdfDoc>;

package/dist/pdf.js

@@ -0,0 +1,92 @@
+import jsPDF from "jspdf";
+import { generateQR } from "./qr/generator";
+function parseContent(content, data) {
+    return content.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+        const trimmedKey = String(key).trim();
+        return data[trimmedKey] !== undefined ? String(data[trimmedKey]) : "";
+    });
+}
+async function resolveDataUrl(src) {
+    if (!src)
+        return undefined;
+    if (src.startsWith("data:"))
+        return src;
+    if (typeof fetch === "undefined" || typeof FileReader === "undefined")
+        return undefined;
+    try {
+        const res = await fetch(src);
+        const blob = await res.blob();
+        return await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result);
+            reader.onerror = () => reject(reader.error);
+            reader.readAsDataURL(blob);
+        });
+    }
+    catch (err) {
+        console.warn("Could not resolve data URL", err);
+        return undefined;
+    }
+}
+export async function exportToPDF(layout, dataList) {
+    const validUnits = ["pt", "px", "in", "mm", "cm"];
+    const pdfUnit = validUnits.includes(layout.unit) ? layout.unit : "mm";
+    const doc = new jsPDF({
+        orientation: layout.width > layout.height ? "l" : "p",
+        unit: pdfUnit,
+        format: [layout.width, layout.height]
+    });
+    for (let i = 0; i < dataList.length; i++) {
+        if (i > 0)
+            doc.addPage([layout.width, layout.height], layout.width > layout.height ? "l" : "p");
+        const data = dataList[i];
+        if (layout.backgroundColor) {
+            doc.setFillColor(layout.backgroundColor);
+            doc.rect(0, 0, layout.width, layout.height, "F");
+        }
+        if (layout.backgroundImage) {
+            const dataUrl = await resolveDataUrl(layout.backgroundImage);
+            if (dataUrl) {
+                doc.addImage(dataUrl, "PNG", 0, 0, layout.width, layout.height);
+            }
+        }
+        for (const element of layout.elements) {
+            const filledContent = parseContent(element.content, data);
+            const { x, y, w, h } = element;
+            if (element.type === "qr") {
+                if (filledContent) {
+                    const qrUrl = await generateQR(filledContent);
+                    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;
+                const color = style.color || "#000000";
+                doc.setFontSize(fontSize);
+                doc.setTextColor(color);
+                let drawX = x;
+                const align = style.textAlign || "left";
+                if (align === "center")
+                    drawX = x + w / 2;
+                if (align === "right")
+                    drawX = x + w;
+                doc.text(filledContent, drawX, y, {
+                    baseline: "top",
+                    align: align
+                });
+            }
+        }
+    }
+    return doc;
+}

package/dist/printer/StickerPrinter.d.ts

@@ -0,0 +1,19 @@
+import { StickerLayout, StickerData, ImageFormat } from "../layout/schema";
+import type { PdfDoc } from "../pdf";
+export interface DataUrlOptions {
+    format?: ImageFormat;
+    quality?: number;
+    canvas?: HTMLCanvasElement;
+}
+export declare class StickerPrinter {
+    private toPx;
+    private parseContent;
+    renderToCanvas(layout: StickerLayout, data: StickerData, canvas: HTMLCanvasElement): Promise<void>;
+    renderToDataURL(layout: StickerLayout, data: StickerData, options?: DataUrlOptions): Promise<string>;
+    exportImages(layout: StickerLayout, dataList: StickerData[], options?: DataUrlOptions): Promise<string[]>;
+    private drawText;
+    private drawImage;
+    private createCanvas;
+    exportToPDF(layout: StickerLayout, dataList: Record<string, any>[]): Promise<PdfDoc>;
+    exportToZPL(layout: StickerLayout, dataList: Record<string, any>[]): string[];
+}

package/dist/printer/StickerPrinter.js

@@ -0,0 +1,192 @@
+import { generateQR } from "../qr/generator";
+export class StickerPrinter {
+    // Helper to convert units to Pixels (Canvas) and Points (PDF)
+    // We'll use 96 dpi for screen/canvas calculations
+    toPx(value, unit) {
+        switch (unit) {
+            case "mm": return (value * 96) / 25.4;
+            case "cm": return (value * 96) / 2.54;
+            case "in": return value * 96;
+            case "px":
+            default: return value;
+        }
+    }
+    // Parse variable content like "{{name}}"
+    parseContent(content, data) {
+        return content.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+            const trimmedKey = key.trim();
+            return data[trimmedKey] !== undefined ? String(data[trimmedKey]) : "";
+        });
+    }
+    // --- HTML Canvas Renderer (Preview & Image Export) ---
+    async renderToCanvas(layout, data, canvas) {
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            throw new Error("Canvas context not available");
+        // Setup Canvas Size
+        canvas.width = this.toPx(layout.width, layout.unit);
+        canvas.height = this.toPx(layout.height, layout.unit);
+        // Clear & Background
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        if (layout.backgroundColor) {
+            ctx.fillStyle = layout.backgroundColor;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        if (layout.backgroundImage) {
+            await this.drawImage(ctx, layout.backgroundImage, 0, 0, canvas.width, canvas.height);
+        }
+        // Render Elements
+        for (const element of layout.elements) {
+            const x = this.toPx(element.x, layout.unit);
+            const y = this.toPx(element.y, layout.unit);
+            const w = this.toPx(element.w, layout.unit);
+            const h = this.toPx(element.h, layout.unit);
+            const filledContent = this.parseContent(element.content, data);
+            if (element.type === "qr") {
+                if (filledContent) {
+                    const qrUrl = await generateQR(filledContent);
+                    await this.drawImage(ctx, qrUrl, x, y, w, h);
+                }
+            }
+            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) {
+        const format = ((options === null || options === void 0 ? void 0 : options.format) || "png").toLowerCase();
+        const mime = format === "jpg" ? "image/jpeg" : `image/${format}`;
+        const canvas = (options === null || options === void 0 ? void 0 : options.canvas) || this.createCanvas();
+        await this.renderToCanvas(layout, data, canvas);
+        return canvas.toDataURL(mime, options === null || options === void 0 ? void 0 : options.quality);
+    }
+    async exportImages(layout, dataList, options) {
+        const results = [];
+        for (const data of dataList) {
+            results.push(await this.renderToDataURL(layout, data, options));
+        }
+        return results;
+    }
+    drawText(ctx, el, text, x, y, w, h) {
+        const style = el.style || {};
+        const fontSize = style.fontSize || 12;
+        const fontFamily = style.fontFamily || "sans-serif";
+        const fontWeight = style.fontWeight || "normal";
+        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.fillStyle = style.color || "#000";
+        ctx.textBaseline = "top";
+        ctx.textAlign = style.textAlign || "left";
+        // Handle Alignment X adjusment
+        let drawX = x;
+        if (style.textAlign === "center")
+            drawX = x + w / 2;
+        if (style.textAlign === "right")
+            drawX = x + w;
+        ctx.fillText(text, drawX, y);
+    }
+    drawImage(ctx, url, x, y, w, h) {
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            img.onload = () => {
+                ctx.drawImage(img, x, y, w, h);
+                resolve();
+            };
+            img.onerror = () => resolve(); // Don't block if image fails
+            img.src = url;
+        });
+    }
+    createCanvas() {
+        if (typeof document === "undefined") {
+            throw new Error("Canvas creation requires a DOM environment. Pass a canvas explicitly when rendering server-side.");
+        }
+        return document.createElement("canvas");
+    }
+    // --- PDF Exporter ---
+    async exportToPDF(layout, dataList) {
+        try {
+            const { exportToPDF } = await import("../pdf");
+            return await exportToPDF(layout, dataList);
+        }
+        catch (err) {
+            throw new Error("PDF export requires optional dependency 'jspdf'. Install it to use exportToPDF().");
+        }
+    }
+    // --- ZPL Exporter ---
+    exportToZPL(layout, dataList) {
+        const dpi = 203; // Standard Zebra DPI
+        const dpmm = 8; // dots per mm
+        // Helper to convert to dots
+        const toDots = (val, unit) => {
+            let mm = 0;
+            switch (unit) {
+                case "mm":
+                    mm = val;
+                    break;
+                case "cm":
+                    mm = val * 10;
+                    break;
+                case "in":
+                    mm = val * 25.4;
+                    break;
+                case "px":
+                    mm = val * (25.4 / 96);
+                    break;
+                default: mm = val;
+            }
+            return Math.round(mm * dpmm);
+        };
+        const results = [];
+        for (const data of dataList) {
+            let zpl = "^XA\n"; // Start Format
+            // Label Length (optional but good practice)
+            // ^LL<length in dots>
+            const heightDots = toDots(layout.height, layout.unit);
+            const widthDots = toDots(layout.width, layout.unit);
+            zpl += `^PW${widthDots}\n`;
+            zpl += `^LL${heightDots}\n`;
+            for (const element of layout.elements) {
+                const filledContent = this.parseContent(element.content, data);
+                const x = toDots(element.x, layout.unit);
+                const y = toDots(element.y, layout.unit);
+                zpl += `^FO${x},${y}`;
+                if (element.type === "text") {
+                    // Font mapping is tricky. We'll use Scalable Font 0 (^A0)
+                    // Height in dots.
+                    const style = element.style || {};
+                    const fontSizePt = style.fontSize || 12;
+                    // Approximate pt to dots conversion (1 pt = 1/72 inch). 203 DPI.
+                    // dots = pt * (203/72) ~ pt * 2.8
+                    const fontHeightDots = Math.round(fontSizePt * 2.8);
+                    zpl += `^A0N,${fontHeightDots},${fontHeightDots}`;
+                    zpl += `^FD${filledContent}^FS\n`;
+                }
+                else if (element.type === "qr") {
+                    // ^BQN,2,height
+                    // ZPL QR codes are controlled by magnification factor mostly.
+                    const w = toDots(element.w, layout.unit);
+                    // Mag factor 1-10. Approximate based on width? 
+                    // Let's assume a reasonable default magnification or calculate roughly.
+                    // ^BQa,b,c,d,e
+                    // ^BQN,2,height
+                    let mag = 2;
+                    if (w > 100)
+                        mag = 4;
+                    if (w > 200)
+                        mag = 6;
+                    zpl += `^BQN,2,${mag}`;
+                    zpl += `^FDQA,${filledContent}^FS\n`;
+                }
+                // Images are very hard in pure ZPL text (need hex conversion), skipping for simple implementation
+            }
+            zpl += "^XZ"; // End Format
+            results.push(zpl);
+        }
+        return results;
+    }
+}

package/dist/qr/generator.d.ts

@@ -0,0 +1 @@
+export declare function generateQR(text: string): Promise<string>;

package/dist/qr/generator.js

@@ -0,0 +1,16 @@
+import QRCode from "qrcode";
+const qrCache = new Map();
+export async function generateQR(text) {
+    if (qrCache.has(text)) {
+        return qrCache.get(text);
+    }
+    try {
+        const url = await QRCode.toDataURL(text);
+        qrCache.set(text, url);
+        return url;
+    }
+    catch (err) {
+        console.error("Error generating QR code", err);
+        return "";
+    }
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "qrlayout-core",
+  "version": "1.0.0",
+  "description": "QR sticker layout builder/renderer/exporter core",
+  "author": "Shashidhar Naik <shashidharnaik8@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shashi089/qr-code-layout-generate-tool.git",
+    "directory": "packages/core"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./pdf": {
+      "types": "./dist/pdf.d.ts",
+      "import": "./dist/pdf.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "qrcode": "^1.5.4"
+  },
+  "optionalDependencies": {
+    "jspdf": "^3.0.4"
+  },
+  "devDependencies": {
+    "@types/jspdf": "^1.3.3",
+    "@types/qrcode": "^1.5.6",
+    "typescript": "^5.3.3"
+  }
+}