@thermal-print/escpos 0.3.1-beta.6 → 0.4.0-beta.0

package/dist/traverser.js

@@ -1,10 +1,16 @@
-import { alignTextInColumn, extractTextStyle, extractViewStyle, mapTextAlign, mergeStyles, parseWidth, wrapText } from "./styles";
+import { alignTextInColumn, calculateHorizontalSpacing, distributeColumnWidths, distributeGaps, extractTextStyle, extractViewStyle, FONT_LEVEL_COLUMN_UNITS, isBold, mapTextAlign, mergeStyles, parsePercentageWidth, parseSize, wrapText, } from "./styles";
 /**
  * Tree Traverser
  * Walks through the element tree and generates ESC/POS commands
  */
 export class TreeTraverser {
     constructor(generator) {
+        /**
+         * Alignment inherited from an ancestor View's `alignItems`, mirroring
+         * PDFTraverser.alignmentContext. A Text or Image without its own textAlign
+         * follows it.
+         */
+        this.alignmentContext = "left";
         this.generator = generator;
     }
     /**
@@ -45,46 +51,97 @@ export class TreeTraverser {
     async handleDocument(node) {
         this.generator.initialize();
         await this.traverseChildren(node);
-        // Add 6 blank lines at end for paper feed spacing
+        // Add blank lines at end for paper feed spacing
         this.generator.addNewline(2);
     }
     /**
-     * Handle Page element
+     * Handle Page element.
+     *
+     * In "rico" mode the Page padding becomes the receipt margin, the same way
+     * PDFTraverser.handlePage turns it into page margins. Margins arrive in
+     * points; the generator clamps them so they can never eat the whole line.
      */
     async handlePage(node) {
+        if (!this.generator.isRichStyleMode()) {
+            await this.traverseChildren(node);
+            return;
+        }
+        const style = node.style || {};
+        const padding = style.padding;
+        const left = calculateHorizontalSpacing(style.paddingLeft ?? padding);
+        const right = calculateHorizontalSpacing(style.paddingRight ?? padding);
+        const hasHorizontalPadding = left > 0 || right > 0;
+        if (hasHorizontalPadding) {
+            this.generator.pushHorizontalPadding(left, right);
+        }
+        this.generator.addSpacing(style.paddingTop ?? padding);
         await this.traverseChildren(node);
+        this.generator.addSpacing(style.paddingBottom ?? padding);
+        if (hasHorizontalPadding) {
+            this.generator.popHorizontalPadding();
+        }
     }
     /**
      * Handle View element (container with layout)
      */
     async handleView(node) {
         const viewStyle = extractViewStyle(node.style);
-        // Apply spacing before
+        const rich = this.generator.isRichStyleMode();
+        // margin-top -> border-top -> padding-top
         this.generator.applyViewSpacing(node.style, "before");
-        // Handle different layout modes
-        if (viewStyle.flexDirection === "row") {
-            await this.handleRowLayout(node);
+        // Horizontal padding shrinks the line for everything inside this View
+        let hasHorizontalPadding = false;
+        if (rich) {
+            const padding = viewStyle.padding;
+            const left = calculateHorizontalSpacing(viewStyle.paddingLeft ?? padding);
+            const right = calculateHorizontalSpacing(viewStyle.paddingRight ?? padding);
+            hasHorizontalPadding = left > 0 || right > 0;
+            if (hasHorizontalPadding) {
+                this.generator.pushHorizontalPadding(left, right);
+            }
+        }
+        // A percentage width constrains images drawn inside this View
+        const previousWidthFraction = this.widthFraction;
+        const widthFraction = parsePercentageWidth(viewStyle.width);
+        if (widthFraction !== undefined) {
+            this.widthFraction = widthFraction;
+        }
+        // alignItems on a column container aligns its children horizontally
+        const previousAlignment = this.alignmentContext;
+        if (viewStyle.flexDirection !== "row") {
+            if (viewStyle.alignItems === "center") {
+                this.alignmentContext = "center";
+            }
+            else if (viewStyle.alignItems === "flex-end") {
+                this.alignmentContext = "right";
+            }
+        }
+        if (node.children.length > 0) {
+            if (viewStyle.flexDirection === "row") {
+                await this.handleRowLayout(node);
+            }
+            else {
+                await this.handleColumnLayout(node);
+            }
         }
         else {
-            // Column layout (default) - add spacing between children
-            await this.handleColumnLayout(node);
+            // An empty View with an explicit height is a spacer, not a no-op
+            this.generator.addSpacing(parseSize(viewStyle.height));
+        }
+        this.alignmentContext = previousAlignment;
+        this.widthFraction = previousWidthFraction;
+        if (hasHorizontalPadding) {
+            this.generator.popHorizontalPadding();
         }
-        // Apply spacing after
+        // padding-bottom -> border-bottom -> margin-bottom
         this.generator.applyViewSpacing(node.style, "after");
     }
     /**
      * Handle column layout (stacked vertically)
-     * Adds newlines between sibling elements for proper spacing
      */
     async handleColumnLayout(node) {
-        const children = node.children;
-        for (let i = 0; i < children.length; i++) {
-            await this.traverse(children[i]);
-            // Add newline after each child except the last one
-            // This ensures proper spacing between elements in column layout
-            // if (i < children.length - 1 && children[i].type.toLowerCase() === "view") {
-            //   this.generator.addNewline();
-            // }
+        for (const child of node.children) {
+            await this.traverse(child);
         }
     }
     /**
@@ -101,90 +158,116 @@ export class TreeTraverser {
             return;
         }
         const viewStyle = extractViewStyle(node.style);
-        const paperWidth = this.generator.getPaperWidth();
-        // Check layout justification mode
+        const rich = this.generator.isRichStyleMode();
         const isSpaceBetween = viewStyle.justifyContent === "space-between";
         const isCentered = viewStyle.justifyContent === "center";
-        // Calculate column widths
-        const columns = [];
-        // Extract text style from the first Text node for the entire row
-        // This preserves formatting like bold, fontSize across all columns
-        let rowTextStyle = null;
-        const firstTextNode = this.findFirstTextNode(children[0]);
-        if (firstTextNode && firstTextNode.style) {
-            rowTextStyle = mergeStyles(firstTextNode.style);
-        }
+        const cells = [];
         for (const child of children) {
             const childStyle = extractViewStyle(child.style);
-            const width = parseWidth(childStyle.width, paperWidth);
-            // Collect text content from child
             const content = await this.collectTextContent(child);
-            // Determine alignment - check for Text node textAlign first
-            let align = "left";
-            // Look for Text element with textAlign
             const textNode = this.findFirstTextNode(child);
+            // Alignment: the cell's own Text wins, then the cell View's own flex props
+            let align = "left";
             if (textNode && textNode.style) {
-                const textStyle = extractTextStyle(textNode.style);
-                align = mapTextAlign(textStyle.textAlign);
+                align = mapTextAlign(extractTextStyle(textNode.style).textAlign);
             }
-            else {
-                // Fall back to View alignment
-                if (childStyle.alignItems === "center" || childStyle.justifyContent === "center") {
-                    align = "center";
-                }
-                else if (childStyle.alignItems === "flex-end" || childStyle.justifyContent === "flex-end") {
-                    align = "right";
-                }
+            else if (childStyle.alignItems === "center" || childStyle.justifyContent === "center") {
+                align = "center";
             }
-            columns.push({ node: child, width, content, align });
+            else if (childStyle.alignItems === "flex-end" || childStyle.justifyContent === "flex-end") {
+                align = "right";
+            }
+            cells.push({
+                rawWidth: childStyle.width,
+                content,
+                align,
+                textStyle: textNode?.style ? mergeStyles(textNode.style) : null,
+            });
         }
-        // Check if columns have explicit widths (table layout) or should use space-between
-        const hasExplicitWidths = columns.some((col) => {
-            const childStyle = extractViewStyle(col.node.style);
-            return childStyle.width !== undefined;
-        });
-        // Determine max number of sub-lines across all columns
-        const columnLines = columns.map(col => col.content.split("\n"));
-        const maxLines = Math.max(...columnLines.map(lines => lines.length));
-        // Apply text style (bold, fontSize) before adding the row text
-        if (rowTextStyle) {
-            this.generator.applyTextStyle(rowTextStyle);
+        const hasExplicitWidths = cells.some((cell) => cell.rawWidth !== undefined);
+        // space-between / centered place the cells by their content, not on a grid
+        const usesColumnGrid = hasExplicitWidths || (!isSpaceBetween && !isCentered);
+        // The row prints in the font of its first Text node; column widths are
+        // measured in characters of THAT font, so the print mode goes first.
+        const rowTextStyle = cells[0]?.textStyle ?? null;
+        if (rowTextStyle || rich) {
+            this.generator.applyTextStyle(rowTextStyle ?? {}, {
+                inheritedAlign: this.alignmentContext,
+            });
         }
-        // Emit one output line per sub-line
+        const rowLevel = this.generator.getFontLevel();
+        const rowBold = isBold(extractTextStyle(rowTextStyle));
+        const paperWidth = this.generator.getPaperWidth();
+        const widths = distributeColumnWidths(cells.map((cell) => cell.rawWidth), paperWidth);
+        // In "rico" a cell may print one level up or down from the row; a bigger
+        // character eats more of the column, so the capacity is not the width.
+        const cellLevels = cells.map((cell) => rich && cell.textStyle ? this.generator.resolveTextLevel(cell.textStyle.fontSize) : rowLevel);
+        const cellBolds = cells.map((cell) => rich && cell.textStyle ? isBold(extractTextStyle(cell.textStyle)) : rowBold);
+        const capacities = widths.map((width, i) => Math.max(1, Math.floor((width * FONT_LEVEL_COLUMN_UNITS[rowLevel]) / FONT_LEVEL_COLUMN_UNITS[cellLevels[i]])));
+        const perCellStyles = rich && cellLevels.some((level, i) => level !== rowLevel || cellBolds[i] !== rowBold);
+        // A cell wider than its column wraps onto the next row line — it used to be
+        // silently truncated, which lost the end of long product names.
+        const columnLines = cells.map((cell, i) => cell.content
+            .split("\n")
+            .flatMap((line) => (usesColumnGrid ? wrapText(line, capacities[i]) : [line])));
+        const maxLines = Math.max(...columnLines.map((lines) => lines.length));
         for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
-            let rowText = "";
-            if (isSpaceBetween && columns.length === 2 && !hasExplicitWidths) {
-                const left = (columnLines[0][lineIdx] || "");
-                const right = (columnLines[1][lineIdx] || "");
-                const usedSpace = left.length + right.length;
-                const gap = Math.max(1, paperWidth - usedSpace);
-                rowText = left + " ".repeat(gap) + right;
+            if (usesColumnGrid) {
+                this.emitGridLine(columnLines, capacities, cells, lineIdx, {
+                    perCellStyles,
+                    cellLevels,
+                    cellBolds,
+                    rowLevel,
+                    rowBold,
+                });
             }
-            else if (isCentered && !hasExplicitWidths) {
-                const parts = [];
-                for (let i = 0; i < columns.length; i++) {
-                    parts.push(columnLines[i][lineIdx] || "");
+            else if (isSpaceBetween) {
+                const parts = columnLines.map((lines) => lines[lineIdx] || "");
+                const used = parts.reduce((sum, part) => sum + part.length, 0);
+                const gaps = distributeGaps(used, paperWidth, parts.length - 1);
+                let rowText = parts[0];
+                for (let i = 1; i < parts.length; i++) {
+                    rowText += " ".repeat(gaps[i - 1]) + parts[i];
                 }
-                const spacingBetweenColumns = Math.max(0, columns.length - 1);
-                const totalContentWidth = parts.reduce((sum, p) => sum + p.length, 0) + spacingBetweenColumns;
-                const leadingSpaces = Math.max(0, Math.floor((paperWidth - totalContentWidth) / 2));
-                rowText = " ".repeat(leadingSpaces) + parts.join(" ");
+                this.generator.addTextLine(rowText);
             }
             else {
-                for (let i = 0; i < columns.length; i++) {
-                    const cellContent = columnLines[i][lineIdx] || "";
-                    const cellText = alignTextInColumn(cellContent, columns[i].width, columns[i].align);
-                    rowText += cellText;
-                }
+                const parts = columnLines.map((lines) => lines[lineIdx] || "");
+                const spacingBetweenColumns = Math.max(0, parts.length - 1);
+                const totalContentWidth = parts.reduce((sum, part) => sum + part.length, 0) + spacingBetweenColumns;
+                const leadingSpaces = Math.max(0, Math.floor((paperWidth - totalContentWidth) / 2));
+                this.generator.addTextLine(" ".repeat(leadingSpaces) + parts.join(" "));
             }
-            this.generator.addText(rowText);
             this.generator.addNewline();
         }
         // Reset formatting after the row
-        if (rowTextStyle) {
+        if (rowTextStyle || rich) {
             this.generator.resetFormatting();
         }
     }
+    /**
+     * Emits one line of a column-grid row, padding every cell to its capacity.
+     * With per-cell styling the cells are printed one by one so each can carry
+     * its own print mode; otherwise the whole line goes out as a single string.
+     */
+    emitGridLine(columnLines, capacities, cells, lineIdx, style) {
+        if (!style.perCellStyles) {
+            let rowText = "";
+            for (let i = 0; i < cells.length; i++) {
+                rowText += alignTextInColumn(columnLines[i][lineIdx] || "", capacities[i], cells[i].align);
+            }
+            this.generator.addTextLine(rowText);
+            return;
+        }
+        for (let i = 0; i < cells.length; i++) {
+            this.generator.setPrintState(style.cellLevels[i], style.cellBolds[i]);
+            this.generator.addText(alignTextInColumn(columnLines[i][lineIdx] || "", capacities[i], cells[i].align));
+        }
+        // Back to the row font BEFORE closing the line, so the right inset is
+        // measured in the same characters the row was laid out in.
+        this.generator.setPrintState(style.rowLevel, style.rowBold);
+        this.generator.endTextLine();
+    }
     /**
      * Find the first Text node in a tree
      */
@@ -244,18 +327,20 @@ export class TreeTraverser {
      * Collects ALL text (props + nested children) then applies word wrap
      */
     async handleText(node) {
-        // Merge styles from parent if needed
         const style = mergeStyles(node.style);
-        // Apply text styling (sets alignment, bold, size)
-        this.generator.applyTextStyle(style);
-        // Collect ALL text content from this node and all nested children
+        // Collect ALL text content before styling: in "rico" the text decides
+        // whether a 2x2 size actually fits on the line.
         const fullText = await this.collectTextContent(node);
-        // Word wrap the full text to fit paper width
+        this.generator.applyTextStyle(style, {
+            inheritedAlign: this.alignmentContext,
+            text: fullText,
+        });
+        // Word wrap the full text to fit the line at the size just selected
         if (fullText) {
             const paperWidth = this.generator.getPaperWidth();
             const lines = wrapText(fullText, paperWidth);
             for (let i = 0; i < lines.length; i++) {
-                this.generator.addText(lines[i]);
+                this.generator.addTextLine(lines[i]);
                 if (i < lines.length - 1) {
                     this.generator.addNewline();
                 }
@@ -280,24 +365,28 @@ export class TreeTraverser {
     async handleImage(node) {
         const source = node.props.source || node.props.src;
         if (source) {
-            // Apply alignment from style (check both node style and parent style)
             const style = mergeStyles(node.style);
             const viewStyle = extractViewStyle(style);
-            const textStyle = extractTextStyle(style);
-            // Determine alignment from textAlign or justifyContent
-            let align = "left";
-            if (textStyle.textAlign) {
-                align = mapTextAlign(textStyle.textAlign);
+            // Own textAlign wins, then the image's own flex props, then the parent's
+            // alignItems. `extractTextStyle` defaults textAlign to "left", so reading
+            // it here used to make the justifyContent branches dead code.
+            let align = this.alignmentContext;
+            if (style?.textAlign) {
+                align = mapTextAlign(style.textAlign);
             }
             else if (viewStyle.justifyContent === "center" || viewStyle.alignItems === "center") {
                 align = "center";
             }
-            else if (viewStyle.justifyContent === "flex-end" || viewStyle.alignItems === "flex-end") {
+            else if (viewStyle.justifyContent === "flex-end" ||
+                viewStyle.alignItems === "flex-end") {
                 align = "right";
             }
-            // Set alignment before adding image
             this.generator.setAlign(align);
-            await this.generator.addImage(source);
+            // A percentage width on the parent View caps the image, like in the PDF
+            const maxWidthColumns = this.widthFraction !== undefined
+                ? Math.max(1, Math.floor(this.generator.getPaperWidth() * this.widthFraction))
+                : undefined;
+            await this.generator.addImage(source, maxWidthColumns);
             // Reset alignment
             this.generator.setAlign("left");
         }

package/dist/types.d.ts

@@ -4,20 +4,23 @@
 export interface ESCPOSCommand {
     type: 'raw' | 'text' | 'feed' | 'cut' | 'image' | 'qr';
     data?: any;
-    buffer?: Buffer;
+    buffer?: Uint8Array;
 }
 export interface ConversionContext {
+    /** Characters that fit on a line at the CURRENT font level, minus horizontal padding. */
     paperWidth: number;
+    /** Characters that fit on a line at the document's base font level, with no padding. */
     basePaperWidth: number;
     currentAlign: 'left' | 'center' | 'right';
     currentSize: {
         width: number;
         height: number;
     };
+    /** ESC ! bit 0: 0 = Font A (12x24), 1 = Font B (9x17). */
     currentFont: 0 | 1;
     currentBold: boolean;
     encoding: string;
     debug: boolean;
-    buffer: Buffer[];
+    buffer: Uint8Array[];
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC;IACvD,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC;IACvD,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,0DAA0D;IAC1D,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thermal-print/escpos",
-  "version": "0.3.1-beta.6",
+  "version": "0.4.0-beta.0",
   "type": "module",
   "description": "ESC/POS command generation and thermal printer control",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "jimp": "1.6.0",
-    "@thermal-print/core": "0.3.1-beta.6"
+    "@thermal-print/core": "0.3.1-beta.7"
   },
   "devDependencies": {
     "typescript": "5.0.0"
@@ -36,6 +36,8 @@
   ],
   "scripts": {
     "build": "tsc --build",
-    "build:watch": "tsc --build --watch"
+    "build:watch": "tsc --build --watch",
+    "test": "tsx --test test/*.test.ts",
+    "typecheck": "tsc -p tsconfig.test.json"
   }
 }