@thermal-print/escpos 0.3.1-beta.6 → 0.3.1-beta.7

package/dist/styles.js

@@ -32,6 +32,7 @@ export function extractViewStyle(style) {
         borderBottom: style?.borderBottom,
         borderTop: style?.borderTop,
         width: style?.width,
+        height: style?.height,
     };
 }
 /**
@@ -43,32 +44,67 @@ export function isBold(style) {
         style.fontWeight === "Helvetica-Bold" ||
         style.fontFamily === "Helvetica-Bold");
 }
+export const FONT_LEVEL_SIZES = {
+    0: { font: 1, width: 1, height: 1 },
+    1: { font: 0, width: 1, height: 1 },
+    2: { font: 0, width: 2, height: 2 },
+};
 /**
- * Maps fontSize to ESC/POS font selection + character size multipliers
- *
- * Three visual levels using standard ESC/POS fonts:
- * - Condensada: Font B 1x1 (9x17, 64 cols) — fontSize <= 10
- * - Normal:     Font A 1x1 (12x24, 48 cols) — fontSize 11-19
- * - Expandida:  Font A 2x2 (12x24, 24 cols) — fontSize >= 20
+ * How many Font A 1x1 columns one character of each level occupies.
+ * Font B fits 4/3 of the characters Font A does (56 vs 42 on the MP-4200 TH),
+ * so one Font B character is 3/4 of a column.
+ */
+export const FONT_LEVEL_COLUMN_UNITS = {
+    0: 0.75,
+    1: 1,
+    2: 2,
+};
+/** The level a document sits at before any per-element fontSize is applied. */
+export function baseFontLevel(fontMode) {
+    return fontMode === "small" ? 0 : 1;
+}
+/**
+ * How many levels a fontSize moves relative to the document's base level.
  *
- * Note: ESC ! command only supports up to 2x2 character size.
+ * fontSize is RELATIVE, not absolute: the same `fontSize: 22` means "one step
+ * bigger than this document's body text", so a receipt printed in `fontMode:
+ * "small"` does not suddenly jump to double size.
  */
-export function mapFontSizeToESCPOS(fontSize) {
-    // Default: Font A normal (48 cols)
-    if (!fontSize)
-        return { font: 0, width: 1, height: 1 };
-    // Parse fontSize if it's a string (e.g., "8.28px")
+export function fontSizeLevelDelta(fontSize) {
+    if (fontSize === undefined || fontSize === null || fontSize === "")
+        return 0;
     const size = typeof fontSize === "string" ? parseFloat(fontSize) : fontSize;
-    if (isNaN(size))
-        return { font: 0, width: 1, height: 1 };
-    // Condensada: Font B (64 cols) — fontSize <= 10
+    if (typeof size !== "number" || Number.isNaN(size))
+        return 0;
     if (size <= 10)
-        return { font: 1, width: 1, height: 1 };
-    // Normal: Font A (48 cols) — fontSize 11-19
+        return -1;
     if (size <= 19)
-        return { font: 0, width: 1, height: 1 };
-    // Expandida: Font A 2x2 (24 cols) — fontSize >= 20
-    return { font: 0, width: 2, height: 2 };
+        return 0;
+    return 1;
+}
+/** Clamps base level + fontSize delta into the three levels ESC ! can express. */
+export function resolveFontLevel(baseLevel, fontSize) {
+    const level = baseLevel + fontSizeLevelDelta(fontSize);
+    return Math.max(0, Math.min(2, level));
+}
+/**
+ * Maps fontSize to the ESC/POS font + character size multipliers of its level.
+ *
+ * @param fontSize - fontSize from the component style (relative to baseLevel)
+ * @param baseLevel - the document's base level (see baseFontLevel)
+ */
+export function mapFontSizeToESCPOS(fontSize, baseLevel = 1) {
+    return FONT_LEVEL_SIZES[resolveFontLevel(baseLevel, fontSize)];
+}
+/**
+ * Characters that fit on one line at `level`, on a paper that fits
+ * `baseColumns` characters at `baseLevel`.
+ *
+ * @param reservedColumns - columns taken by horizontal padding, in Font A units
+ */
+export function columnsForLevel(baseColumns, baseLevel, level, reservedColumns = 0) {
+    const fontAColumns = baseColumns * FONT_LEVEL_COLUMN_UNITS[baseLevel] - reservedColumns;
+    return Math.max(1, Math.floor(fontAColumns / FONT_LEVEL_COLUMN_UNITS[level]));
 }
 /**
  * Maps textAlign to ESC/POS alignment
@@ -81,14 +117,51 @@ export function mapTextAlign(textAlign) {
     return "left";
 }
 /**
- * Calculates spacing (margin/padding) in lines
- * Approximates pixels to line feeds
+ * Points per printed line, and per character column.
+ *
+ * margin/padding/height arrive in POINTS, the same unit @react-pdf/renderer
+ * and @thermal-print/pdf use — a 10pt body line is 12pt tall with the default
+ * 1.2 line height, and an 80mm page is 226pt wide for 42 Font A columns.
+ * Converting with those two constants is what makes a `marginTop: 12` produce
+ * the same visual gap in the PDF preview and on the thermal printer.
+ */
+export const POINTS_PER_LINE = 12;
+export const POINTS_PER_COLUMN = 226 / 42;
+/** Parses a size that may arrive as a number or as "12px" / "12pt". */
+export function parseSize(value) {
+    if (typeof value === "number")
+        return Number.isFinite(value) ? value : 0;
+    if (typeof value === "string") {
+        const parsed = parseFloat(value);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    }
+    return 0;
+}
+/**
+ * Converts a vertical spacing (margin/padding/height) in points to line feeds.
+ * Capped at 6 lines so a stray `marginTop: 400` cannot eject a page of paper.
  */
 export function calculateSpacing(value) {
-    if (!value)
+    const points = parseSize(value);
+    if (points <= 0)
         return 0;
-    // Rough approximation: ~20 pixels = 1 line feed
-    return Math.round(value / 20);
+    return Math.min(6, Math.round(points / POINTS_PER_LINE));
+}
+/** Converts a horizontal spacing (padding left/right) in points to columns. */
+export function calculateHorizontalSpacing(value) {
+    const points = parseSize(value);
+    if (points <= 0)
+        return 0;
+    return Math.round(points / POINTS_PER_COLUMN);
+}
+/** Parses a percentage width ("30%") into a fraction (0.3). Returns undefined otherwise. */
+export function parsePercentageWidth(width) {
+    if (typeof width === "string" && width.includes("%")) {
+        const percentage = parseFloat(width);
+        if (!Number.isNaN(percentage))
+            return percentage / 100;
+    }
+    return undefined;
 }
 /**
  * Determines if a border is dashed
@@ -126,6 +199,69 @@ export function parseWidth(width, totalWidth) {
     }
     return totalWidth;
 }
+/**
+ * Splits the row width across its columns.
+ *
+ * Columns with an explicit width (fixed or percentage) take it; whatever is
+ * left over is shared evenly by the columns that declared none. Before
+ * DEV-2390 a column without a width got `parseWidth(undefined) === totalWidth`,
+ * so a three-column row asked for three full paper widths and printed each
+ * cell padded to the whole line.
+ */
+export function distributeColumnWidths(widths, totalWidth) {
+    if (widths.length === 0)
+        return [];
+    const resolved = widths.map((width) => width === undefined ? undefined : Math.max(0, parseWidth(width, totalWidth)));
+    const explicitTotal = resolved.reduce((sum, width) => sum + (width ?? 0), 0);
+    const autoColumns = resolved.filter((width) => width === undefined).length;
+    // A row whose declared widths do not fit the paper — three cells of "50%", or
+    // a `width: "100%"` cell with a second cell beside it — cannot be honoured.
+    // Splitting it evenly is the only bounded answer: keeping the declared widths
+    // leaves the leftover columns at zero, their capacity floors at one character,
+    // and a product name then prints one letter per line, metres of paper for one
+    // row. Every column also needs at least one character, hence the +autoColumns.
+    if (explicitTotal + autoColumns > totalWidth) {
+        return evenColumnWidths(resolved.length, totalWidth);
+    }
+    if (autoColumns === 0)
+        return resolved;
+    const remaining = Math.max(autoColumns, totalWidth - explicitTotal);
+    const share = Math.floor(remaining / autoColumns);
+    let leftover = remaining - share * autoColumns;
+    return resolved.map((width) => {
+        if (width !== undefined)
+            return width;
+        const extra = leftover > 0 ? 1 : 0;
+        leftover -= extra;
+        return share + extra;
+    });
+}
+/** Splits a row width evenly, giving the remainder to the leftmost columns. */
+function evenColumnWidths(columns, totalWidth) {
+    const share = Math.max(1, Math.floor(totalWidth / columns));
+    let leftover = Math.max(0, totalWidth - share * columns);
+    return Array.from({ length: columns }, () => {
+        const extra = leftover > 0 ? 1 : 0;
+        leftover -= extra;
+        return share + extra;
+    });
+}
+/**
+ * Splits the free space of a space-between row across its gaps.
+ * Every gap gets at least one space; the remainder goes to the leftmost gaps.
+ */
+export function distributeGaps(contentWidth, totalWidth, gapCount) {
+    if (gapCount <= 0)
+        return [];
+    const free = Math.max(gapCount, totalWidth - contentWidth);
+    const share = Math.floor(free / gapCount);
+    let leftover = free - share * gapCount;
+    return Array.from({ length: gapCount }, () => {
+        const extra = leftover > 0 ? 1 : 0;
+        leftover -= extra;
+        return share + extra;
+    });
+}
 /**
  * Aligns text within a column width (using CP860 byte length for accurate padding)
  */
@@ -162,25 +298,34 @@ export function alignTextInColumn(text, width, align) {
  * Splits text into multiple lines if it exceeds width
  */
 export function wrapText(text, width) {
+    if (width <= 0)
+        return [text];
     if (text.length <= width) {
         return [text];
     }
     const lines = [];
     let currentLine = "";
-    const words = text.split(" ");
-    for (const word of words) {
+    const pushCurrent = () => {
+        if (currentLine) {
+            lines.push(currentLine);
+            currentLine = "";
+        }
+    };
+    for (const word of text.split(" ")) {
         if ((currentLine + " " + word).trim().length <= width) {
             currentLine = (currentLine + " " + word).trim();
+            continue;
         }
-        else {
-            if (currentLine) {
-                lines.push(currentLine);
-            }
-            currentLine = word;
+        pushCurrent();
+        // A single word wider than the column has to be broken, otherwise the
+        // printer wraps it wherever it likes and the column grid falls apart.
+        let rest = word;
+        while (rest.length > width) {
+            lines.push(rest.slice(0, width));
+            rest = rest.slice(width);
         }
+        currentLine = rest;
     }
-    if (currentLine) {
-        lines.push(currentLine);
-    }
+    pushCurrent();
     return lines.length > 0 ? lines : [text.substring(0, width)];
 }

package/dist/traverser.d.ts

@@ -6,6 +6,14 @@ import { ESCPOSGenerator } from "./generator";
  */
 export declare class TreeTraverser {
     private generator;
+    /**
+     * Alignment inherited from an ancestor View's `alignItems`, mirroring
+     * PDFTraverser.alignmentContext. A Text or Image without its own textAlign
+     * follows it.
+     */
+    private alignmentContext;
+    /** Fraction of the line an ancestor View's percentage width allows (0.3 for "30%"). */
+    private widthFraction;
     constructor(generator: ESCPOSGenerator);
     /**
      * Traverse the entire tree starting from root
@@ -16,7 +24,11 @@ export declare class TreeTraverser {
      */
     private handleDocument;
     /**
-     * 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.
      */
     private handlePage;
     /**
@@ -25,13 +37,18 @@ export declare class TreeTraverser {
     private handleView;
     /**
      * Handle column layout (stacked vertically)
-     * Adds newlines between sibling elements for proper spacing
      */
     private handleColumnLayout;
     /**
      * Handle row layout (side-by-side columns)
      */
     private handleRowLayout;
+    /**
+     * 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.
+     */
+    private emitGridLine;
     /**
      * Find the first Text node in a tree
      */

package/dist/traverser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"traverser.d.ts","sourceRoot":"","sources":["../src/traverser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG9C;;;GAGG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,SAAS,CAAkB;gBAEvB,SAAS,EAAE,eAAe;IAItC;;OAEG;IACG,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IA+BvD;;OAEG;YACW,cAAc;IAO5B;;OAEG;YACW,UAAU;IAIxB;;OAEG;YACW,UAAU;IAkBxB;;;OAGG;YACW,kBAAkB;IAchC;;OAEG;YACW,eAAe;IA4G7B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAczB;;;OAGG;YACW,kBAAkB;IAyChC;;;OAGG;YACW,UAAU;IA6BxB;;OAEG;YACW,cAAc;IAM5B;;OAEG;YACW,WAAW;IA+BzB;;OAEG;YACW,gBAAgB;CAK/B"}
+{"version":3,"file":"traverser.d.ts","sourceRoot":"","sources":["../src/traverser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA6B9C;;;GAGG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB,CAAiB;IAEzC,uFAAuF;IACvF,OAAO,CAAC,aAAa,CAAqB;gBAE9B,SAAS,EAAE,eAAe;IAItC;;OAEG;IACG,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IA+BvD;;OAEG;YACW,cAAc;IAO5B;;;;;;OAMG;YACW,UAAU;IAyBxB;;OAEG;YACW,UAAU;IAyDxB;;OAEG;YACW,kBAAkB;IAMhC;;OAEG;YACW,eAAe;IA+H7B;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAkCpB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAczB;;;OAGG;YACW,kBAAkB;IAyChC;;;OAGG;YACW,UAAU;IA+BxB;;OAEG;YACW,cAAc;IAM5B;;OAEG;YACW,WAAW;IAuCzB;;OAEG;YACW,gBAAgB;CAK/B"}