qreator 9.7.2 → 9.9.0

package/README.md

@@ -4,7 +4,20 @@
 
 QR Code generator for browser and node.js with tree shaking and logo support
 
-![image](https://github.com/Short-io/qreator/assets/75169/02b84738-56f2-44d8-8d11-f40e263302ed)
+<table>
+<tr>
+<td align="center"><img src="showcase/classic.png" width="180" /><br /><b>Classic</b></td>
+<td align="center"><img src="showcase/rounded.png" width="180" /><br /><b>Rounded</b></td>
+<td align="center"><img src="showcase/drops.png" width="180" /><br /><b>Custom finders</b></td>
+<td align="center"><img src="showcase/logo.png" width="180" /><br /><b>Logo overlay</b></td>
+</tr>
+<tr>
+<td align="center"><img src="showcase/label-below.png" width="180" /><br /><b>Label: below</b></td>
+<td align="center"><img src="showcase/label-pill.png" width="180" /><br /><b>Label: pill</b></td>
+<td align="center"><img src="showcase/label-box.png" width="180" /><br /><b>Label: box</b></td>
+<td align="center"><img src="showcase/branded.png" width="180" /><br /><b>Branded</b></td>
+</tr>
+</table>
 
 ## Overview
 
@@ -14,6 +27,10 @@ QR Code generator for browser and node.js with tree shaking and logo support
 -   supports color customization
 -   supports logos
 -   supports border-radius
+-   supports corner mode (merged rounded corners)
+-   supports finder pattern customization (shape + color)
+-   supports text labels (below, pill, box styles)
+-   optional React component
 -   tree shaking support
 -   browser / node.js
 
@@ -47,6 +64,37 @@ const pngBuffer = await getPNG("I love QR", {
 });
 ```
 
+### Label
+
+```javascript
+const png = await getPNG("https://example.com", {
+    labelText: "SCAN ME",
+    labelStyle: "pill", // "below", "pill", or "box"
+});
+```
+
+### Finder pattern customization
+
+```javascript
+const svgString = await getSVG("I love QR", {
+    finderOuterShape: "drop",
+    finderInnerShape: "circle",
+    finderColor: "#ff0000",
+    borderRadius: 2,
+    cornerMode: "merge",
+});
+```
+
+### React
+
+```jsx
+import { QR } from "qreator/lib/react";
+
+function App() {
+    return <QR text="https://example.com" labelText="SCAN ME" labelStyle="pill" />;
+}
+```
+
 [More examples](./examples)
 
 ### Syntax
@@ -75,7 +123,17 @@ const pngBuffer = await getPNG("I love QR", {
 |    `color`     |         module color in rgba or hex format         |   number    | `#000000` - `#000000` | `#000000`<br />(black with 100% opacity) |
 |   `bgColor`    |       background color in rgba or hex format       |   number    | `#000000` - `#FFFFFF` | `#FFFFFF`<br />(white with 100% opacity) |
 | `borderRadius` |             border-radius (in pixels)              |   number    |    0 - `size / 2`     |                   `0`                    |
+| `cornerMode`   | how corners are rendered when borderRadius > 0     |   string    | `individual`, `merge` |              `individual`                |
+| `finderOuterShape` | shape of the outer ring of finder patterns     |   string    | `square`, `rounded`, `circle`, `drop` |          `undefined`           |
+| `finderInnerShape` | shape of the inner dot of finder patterns      |   string    | `square`, `rounded`, `circle`, `drop` |          `undefined`           |
+| `finderColor`  | color of finder patterns (overrides `color`)       |   number/string   | same as `color` |              `undefined`                |
 | `noExcavate`   |        don't remove partially covered modules      |   boolean   |    `true`, `false`    |                 `false`                  |
+| `labelText`    |              text label to display below QR        |   string    |           -           |               `undefined`                |
+| `labelStyle`   |              label presentation style              |   string    | `below`, `pill`, `box` |                `below`                  |
+| `labelColor`   |              label text color                      |   number/string   | same as `color` |  `color` (below) / `bgColor` (pill/box)  |
+| `labelBgColor` |       label background color (pill/box only)       |   number/string   | same as `color` |              same as `color`              |
+| `labelFontSize`|       font size as multiple of module size         |   number    |        `1` - n        |                   `5`                    |
+| `labelFontFamily`|              font family                         |   string    |           -           |              `sans-serif`                |
 
 
 ## Benchmarks

package/lib/browser/pdf.umd.js

@@ -761,7 +761,7 @@
     function requireCommon () {
     	if (hasRequiredCommon) return common;
     	hasRequiredCommon = 1;
-    	(function (exports) {
+    	(function (exports$1) {
 
 
     		var TYPED_OK =  (typeof Uint8Array !== 'undefined') &&
@@ -772,7 +772,7 @@
     		  return Object.prototype.hasOwnProperty.call(obj, key);
     		}
 
-    		exports.assign = function (obj /*from1, from2, from3, ...*/) {
+    		exports$1.assign = function (obj /*from1, from2, from3, ...*/) {
     		  var sources = Array.prototype.slice.call(arguments, 1);
     		  while (sources.length) {
     		    var source = sources.shift();
@@ -794,7 +794,7 @@
 
 
     		// reduce buffer size, avoiding mem copy
-    		exports.shrinkBuf = function (buf, size) {
+    		exports$1.shrinkBuf = function (buf, size) {
     		  if (buf.length === size) { return buf; }
     		  if (buf.subarray) { return buf.subarray(0, size); }
     		  buf.length = size;
@@ -851,21 +851,21 @@
 
     		// Enable/Disable typed arrays use, for testing
     		//
-    		exports.setTyped = function (on) {
+    		exports$1.setTyped = function (on) {
     		  if (on) {
-    		    exports.Buf8  = Uint8Array;
-    		    exports.Buf16 = Uint16Array;
-    		    exports.Buf32 = Int32Array;
-    		    exports.assign(exports, fnTyped);
+    		    exports$1.Buf8  = Uint8Array;
+    		    exports$1.Buf16 = Uint16Array;
+    		    exports$1.Buf32 = Int32Array;
+    		    exports$1.assign(exports$1, fnTyped);
     		  } else {
-    		    exports.Buf8  = Array;
-    		    exports.Buf16 = Array;
-    		    exports.Buf32 = Array;
-    		    exports.assign(exports, fnUntyped);
+    		    exports$1.Buf8  = Array;
+    		    exports$1.Buf16 = Array;
+    		    exports$1.Buf32 = Array;
+    		    exports$1.assign(exports$1, fnUntyped);
     		  }
     		};
 
-    		exports.setTyped(TYPED_OK); 
+    		exports$1.setTyped(TYPED_OK); 
     	} (common));
     	return common;
     }
@@ -25794,22 +25794,22 @@
     }
 
     function calculateEC(msg, ec_len) {
-        msg = [].slice.call(msg);
+        const len = msg.length;
+        const buf = new Array(len + ec_len);
+        for (let i = 0; i < len; i++)
+            buf[i] = msg[i];
+        for (let i = len; i < len + ec_len; i++)
+            buf[i] = 0;
         const poly = generatorPolynomial(ec_len);
-        for (let i = 0; i < ec_len; i++)
-            msg.push(0);
-        while (msg.length > ec_len) {
-            if (!msg[0]) {
-                msg.shift();
+        for (let offset = 0; offset < len; offset++) {
+            if (!buf[offset])
                 continue;
-            }
-            const log_k = log(msg[0]);
+            const log_k = log(buf[offset]);
             for (let i = 0; i <= ec_len; i++) {
-                msg[i] = msg[i] ^ exp(poly[i] + log_k);
+                buf[offset + i] = buf[offset + i] ^ exp(poly[i] + log_k);
             }
-            msg.shift();
         }
-        return new Uint8Array(msg);
+        return new Uint8Array(buf.slice(len));
     }
     const GF256_BASE = 285;
     const EXP_TABLE = [1];
@@ -25824,11 +25824,7 @@
         LOG_TABLE[EXP_TABLE[i]] = i;
     }
     function exp(k) {
-        while (k < 0)
-            k += 255;
-        while (k > 255)
-            k -= 255;
-        return EXP_TABLE[k];
+        return EXP_TABLE[((k % 255) + 255) % 255];
     }
     function log(k) {
         if (k < 1 || k > 255) {
@@ -26192,9 +26188,17 @@
                 bestMask = mask;
             }
         }
-        fillData(matrix, data, bestMask);
-        fillReserved(matrix, data.ec_level, bestMask);
-        return matrix.map((row) => row.map((cell) => (cell & 1)));
+        if (bestMask !== 7) {
+            fillData(matrix, data, bestMask);
+            fillReserved(matrix, data.ec_level, bestMask);
+        }
+        for (let i = 0; i < matrix.length; i++) {
+            const row = matrix[i];
+            for (let j = 0; j < row.length; j++) {
+                row[j] = (row[j] & 1);
+            }
+        }
+        return matrix;
     }
 
     const EC_LEVELS = ["L", "M", "Q", "H"];
@@ -26210,7 +26214,7 @@
         for (; i < 10; i++) {
             let version = mappedVersions[i][ec_level];
             if (version.data_len >= len) {
-                return deepCopy(version);
+                return copyTemplate(version);
             }
         }
         if (message.data10) {
@@ -26222,14 +26226,14 @@
         for (; i < 27; i++) {
             let version = mappedVersions[i][ec_level];
             if (version.data_len >= len) {
-                return deepCopy(version);
+                return copyTemplate(version);
             }
         }
         len = Math.ceil(message.data27.length / 8);
         for (; i < 41; i++) {
             let version = mappedVersions[i][ec_level];
             if (version.data_len >= len) {
-                return deepCopy(version);
+                return copyTemplate(version);
             }
         }
         throw new Error("Too much data");
@@ -26274,7 +26278,9 @@
         const data = fillTemplate(message, getTemplate(message, ec_level));
         return getMatrix(data);
     }
-    const deepCopy = typeof structuredClone !== "undefined" ? structuredClone : ((obj) => JSON.parse(JSON.stringify(obj)));
+    function copyTemplate(t) {
+        return { ...t, blocks: [...t.blocks], ec: [] };
+    }
     const versions = [
         [],
         [26, 7, 1, 10, 1, 13, 1, 17, 1],
@@ -26822,6 +26828,12 @@
         const defaults = type === "png" ? BITMAP_OPTIONS : VECTOR_OPTIONS;
         return { ...defaults, ...inOptions };
     }
+    function colorToHex(color) {
+        if (typeof color === "string") {
+            return colorString.to.hex(colorString.get.rgb(color));
+        }
+        return `#${(color >>> 8).toString(16).padStart(6, "0")}`;
+    }
     const svgMove = (left, top) => ['M', left, top];
     const svgReturn = () => ['z'];
     const svgDeltaArc = (borderRadius, dx, dy, sweep = 0) => borderRadius > 0 ? ['a', borderRadius, borderRadius, 0, 0, sweep, dx, dy] : [];
@@ -26857,7 +26869,22 @@
         }
         return rectangles.join(" ");
     }
-    function getDotsSVGPath(matrix, size, margin = 0, borderRadius = 0) {
+    function isActive(matrix, x, y) {
+        return x >= 0 && x < matrix.length && y >= 0 && y < (matrix[0]?.length ?? 0) && !!matrix[x][y];
+    }
+    function getExposedCorners(matrix, x, y) {
+        const left = isActive(matrix, x - 1, y);
+        const right = isActive(matrix, x + 1, y);
+        const top = isActive(matrix, x, y - 1);
+        const bottom = isActive(matrix, x, y + 1);
+        return [
+            !left && !top,
+            !right && !top,
+            !right && !bottom,
+            !left && !bottom,
+        ];
+    }
+    function getDotsSVGPath(matrix, size, margin = 0, borderRadius = 0, cornerMode = 'individual') {
         let rectangles = [];
         for (let x = 0; x < matrix.length; x++) {
             const column = matrix[x];
@@ -26865,17 +26892,27 @@
                 if (column[y]) {
                     const leftX = x * size + margin;
                     const topY = y * size + margin;
-                    const delta = size - 2 * borderRadius;
+                    let rTL, rTR, rBR, rBL;
+                    if (cornerMode === 'merge') {
+                        const [eTL, eTR, eBR, eBL] = getExposedCorners(matrix, x, y);
+                        rTL = eTL ? borderRadius : 0;
+                        rTR = eTR ? borderRadius : 0;
+                        rBR = eBR ? borderRadius : 0;
+                        rBL = eBL ? borderRadius : 0;
+                    }
+                    else {
+                        rTL = rTR = rBR = rBL = borderRadius;
+                    }
                     const rectangle = [
-                        svgMove(leftX, topY + borderRadius),
-                        svgVerticalDeltaLite(delta),
-                        svgDeltaArc(borderRadius, borderRadius, borderRadius),
-                        svgHorizontalDeltaLine(delta),
-                        svgDeltaArc(borderRadius, borderRadius, -borderRadius),
-                        svgVerticalDeltaLite(-delta),
-                        svgDeltaArc(borderRadius, -borderRadius, -borderRadius),
-                        svgHorizontalDeltaLine(-delta),
-                        svgDeltaArc(borderRadius, -borderRadius, borderRadius),
+                        svgMove(leftX, topY + rTL),
+                        svgVerticalDeltaLite(size - rTL - rBL),
+                        svgDeltaArc(rBL, rBL, rBL),
+                        svgHorizontalDeltaLine(size - rBL - rBR),
+                        svgDeltaArc(rBR, rBR, -rBR),
+                        svgVerticalDeltaLite(-(size - rBR - rTR)),
+                        svgDeltaArc(rTR, -rTR, -rTR),
+                        svgHorizontalDeltaLine(-(size - rTR - rTL)),
+                        svgDeltaArc(rTL, -rTL, rTL),
                         svgReturn(),
                     ];
                     rectangles.push(...rectangle.flat());
@@ -26884,6 +26921,62 @@
         }
         return rectangles.join(" ");
     }
+    const FINDER_SIDES = [[0, 0], [1, 0], [0, 1]];
+    const FINDER_END = 7;
+    function getCornerRadii(shape, sideLength, borderRadius) {
+        const maxR = sideLength / 2;
+        switch (shape) {
+            case 'square': return [0, 0, 0, 0];
+            case 'rounded': return [borderRadius, borderRadius, borderRadius, borderRadius];
+            case 'circle': return [maxR, maxR, maxR, maxR];
+            case 'drop': return [maxR, 0, maxR, maxR];
+        }
+    }
+    function drawFinderRect(xCorner, yCorner, sideLength, xSign, ySign, sweep, cornerRadii) {
+        const [r0, r1, r2, r3] = cornerRadii;
+        return [
+            svgMove(xCorner, yCorner + r3 * ySign),
+            svgVerticalDeltaLite(ySign * (sideLength - r3 - r0)),
+            svgDeltaArc(r0, r0 * xSign, r0 * ySign, sweep),
+            svgHorizontalDeltaLine(xSign * (sideLength - r0 - r1)),
+            svgDeltaArc(r1, r1 * xSign, -r1 * ySign, sweep),
+            svgVerticalDeltaLite(-ySign * (sideLength - r1 - r2)),
+            svgDeltaArc(r2, -r2 * xSign, -r2 * ySign, sweep),
+            svgHorizontalDeltaLine(-xSign * (sideLength - r2 - r3)),
+            svgDeltaArc(r3, -r3 * xSign, r3 * ySign, sweep),
+            svgReturn(),
+        ].flat();
+    }
+    function getFinderOuterSVGPath(matrix, size, margin, borderRadius, shape) {
+        const matrixSize = matrix.length * size + margin * 2;
+        const rectangles = [];
+        for (const side of FINDER_SIDES) {
+            const [xSign, ySign] = side.map(s => s === 0 ? 1 : -1);
+            const sweep = side[1] | side[0];
+            for (const offset of [0, 1]) {
+                const sideLength = size * (FINDER_END - 2 * offset);
+                const xCorner = matrixSize * side[0] + xSign * (margin + size * offset);
+                const yCorner = matrixSize * side[1] + ySign * (margin + size * offset);
+                const radii = getCornerRadii(shape, sideLength, borderRadius);
+                rectangles.push(...drawFinderRect(xCorner, yCorner, sideLength, xSign, ySign, sweep, radii));
+            }
+        }
+        return rectangles.join(" ");
+    }
+    function getFinderInnerSVGPath(matrix, size, margin, borderRadius, shape) {
+        const matrixSize = matrix.length * size + margin * 2;
+        const rectangles = [];
+        for (const side of FINDER_SIDES) {
+            const [xSign, ySign] = side.map(s => s === 0 ? 1 : -1);
+            const sweep = side[1] | side[0];
+            const sideLength = size * (FINDER_END - 2 * 2);
+            const xCorner = matrixSize * side[0] + xSign * (margin + size * 2);
+            const yCorner = matrixSize * side[1] + ySign * (margin + size * 2);
+            const radii = getCornerRadii(shape, sideLength, borderRadius);
+            rectangles.push(...drawFinderRect(xCorner, yCorner, sideLength, xSign, ySign, sweep, radii));
+        }
+        return rectangles.join(" ");
+    }
     const commonOptions = {
         type: "png",
         parse_url: false,
@@ -26904,6 +26997,83 @@
         margin: 1,
         size: 0,
     };
+    function computeLabelLayout(options, qrSizePx, marginPx, moduleSize) {
+        if (!options.labelText)
+            return null;
+        const style = options.labelStyle ?? "below";
+        const fontSize = (options.labelFontSize ?? 5) * moduleSize;
+        const fontFamily = options.labelFontFamily ?? "sans-serif";
+        const fgColor = colorToHex(options.color ?? 0x000000ff);
+        const bgColorHex = colorToHex(options.bgColor ?? 0xffffffff);
+        const textColor = options.labelColor
+            ? colorToHex(options.labelColor)
+            : style === "below" ? fgColor : bgColorHex;
+        const labelBgColor = options.labelBgColor
+            ? colorToHex(options.labelBgColor)
+            : fgColor;
+        if (style === "below") {
+            const stripHeight = fontSize * 2.5;
+            return {
+                totalWidth: qrSizePx,
+                totalHeight: qrSizePx + stripHeight,
+                qrSize: qrSizePx,
+                label: {
+                    text: options.labelText,
+                    x: qrSizePx / 2,
+                    y: qrSizePx + stripHeight / 2,
+                    width: qrSizePx,
+                    height: stripHeight,
+                    fontSize,
+                    fontFamily,
+                    textColor,
+                    bgColor: null,
+                    borderRadius: 0,
+                },
+            };
+        }
+        if (style === "pill") {
+            const pillHeight = fontSize * 2.2;
+            const estimatedTextWidth = options.labelText.length * fontSize * 0.7;
+            const pillWidth = Math.min(Math.max(estimatedTextWidth + fontSize * 2, qrSizePx * 0.3), qrSizePx * 0.95);
+            const stripHeight = pillHeight + fontSize * 0.6;
+            return {
+                totalWidth: qrSizePx,
+                totalHeight: qrSizePx + stripHeight,
+                qrSize: qrSizePx,
+                label: {
+                    text: options.labelText,
+                    x: qrSizePx / 2,
+                    y: qrSizePx + stripHeight / 2,
+                    width: pillWidth,
+                    height: pillHeight,
+                    fontSize,
+                    fontFamily,
+                    textColor,
+                    bgColor: labelBgColor,
+                    borderRadius: pillHeight / 2,
+                },
+            };
+        }
+        const boxHeight = fontSize * 2.2;
+        const stripHeight = boxHeight + fontSize * 0.4;
+        return {
+            totalWidth: qrSizePx,
+            totalHeight: qrSizePx + stripHeight,
+            qrSize: qrSizePx,
+            label: {
+                text: options.labelText,
+                x: qrSizePx / 2,
+                y: qrSizePx + stripHeight / 2,
+                width: qrSizePx,
+                height: boxHeight,
+                fontSize,
+                fontFamily,
+                textColor,
+                bgColor: labelBgColor,
+                borderRadius: 0,
+            },
+        };
+    }
 
     function zeroFillFinders(matrix) {
         matrix = structuredClone(matrix);
@@ -26951,7 +27121,11 @@
         if (options.logo && options.logoWidth && options.logoHeight && !options.noExcavate) {
             matrix = clearMatrixCenter(matrix, options.logoWidth, options.logoHeight);
         }
-        return PDF({ matrix, ...options });
+        const pdfSize = 9;
+        const marginPx = options.margin * pdfSize;
+        const imageSizePx = matrix.length * pdfSize + 2 * marginPx;
+        const layout = computeLabelLayout(options, imageSizePx, marginPx, pdfSize);
+        return PDF({ matrix, ...options, labelLayout: layout });
     }
     function colorToRGB(color) {
         if (typeof color === "string") {
@@ -26992,34 +27166,47 @@
         page.getContentStream = page.prevGetContentStream;
         page.contentStream.push = page.contentStream.prevPush;
     }
-    async function PDF({ matrix, margin, logo, logoWidth, logoHeight, color, bgColor, borderRadius, }) {
+    async function PDF({ matrix, margin, logo, logoWidth, logoHeight, color, bgColor, borderRadius, cornerMode, finderOuterShape, finderInnerShape, finderColor, labelLayout, }) {
         const size = 9;
         const marginPx = margin * size;
         const matrixSizePx = matrix.length * size;
         const imageSizePx = matrixSizePx + 2 * marginPx;
+        const totalWidth = labelLayout?.totalWidth ?? imageSizePx;
+        const totalHeight = labelLayout?.totalHeight ?? imageSizePx;
         const document = await PDFDocument.create();
-        const page = document.addPage([imageSizePx, imageSizePx]);
-        page.drawSquare({
-            size: imageSizePx,
+        const page = document.addPage([totalWidth, totalHeight]);
+        page.drawRectangle({
+            x: 0,
+            y: 0,
+            width: totalWidth,
+            height: totalHeight,
             color: rgb(...colorToRGB(bgColor)),
         });
         page.moveTo(0, page.getHeight());
-        const path = getDotsSVGPath(matrix, size, marginPx, borderRadius);
-        page.drawSvgPath(path, {
-            color: rgb(...colorToRGB(color)),
-            opacity: getOpacity(color),
-            borderColor: rgb(...colorToRGB(color)),
-            borderOpacity: getOpacity(color),
-        });
-        const findersPath = getFindersSVGPath(matrix, size, marginPx, borderRadius);
-        patchContentStream(page);
-        page.drawSvgPath(findersPath, {
-            color: rgb(...colorToRGB(color)),
-            opacity: getOpacity(color),
-            borderColor: rgb(...colorToRGB(color)),
-            borderOpacity: getOpacity(color),
-        });
-        revertContentStream(page);
+        const fgRGB = rgb(...colorToRGB(color));
+        const fgOpacity = getOpacity(color);
+        const fgStyle = { color: fgRGB, opacity: fgOpacity, borderColor: fgRGB, borderOpacity: fgOpacity };
+        const path = getDotsSVGPath(matrix, size, marginPx, borderRadius, cornerMode);
+        page.drawSvgPath(path, fgStyle);
+        const hasFinderOptions = finderOuterShape || finderInnerShape || finderColor;
+        if (hasFinderOptions) {
+            const fc = finderColor ?? color;
+            const fcRGB = rgb(...colorToRGB(fc));
+            const fcOpacity = getOpacity(fc);
+            const fcStyle = { color: fcRGB, opacity: fcOpacity, borderColor: fcRGB, borderOpacity: fcOpacity };
+            const outerPath = getFinderOuterSVGPath(matrix, size, marginPx, borderRadius, finderOuterShape ?? 'rounded');
+            patchContentStream(page);
+            page.drawSvgPath(outerPath, fcStyle);
+            revertContentStream(page);
+            const innerPath = getFinderInnerSVGPath(matrix, size, marginPx, borderRadius, finderInnerShape ?? 'rounded');
+            page.drawSvgPath(innerPath, fcStyle);
+        }
+        else {
+            const findersPath = getFindersSVGPath(matrix, size, marginPx, borderRadius);
+            patchContentStream(page);
+            page.drawSvgPath(findersPath, fgStyle);
+            revertContentStream(page);
+        }
         if (logo) {
             let logoData;
             const header = new Uint8Array(logo.slice(0, 4));
@@ -27038,8 +27225,50 @@
                 height: logoHeightPx,
             });
         }
+        if (labelLayout) {
+            await drawPDFLabel(document, page, labelLayout, totalHeight);
+        }
         return document.save();
     }
+    async function drawPDFLabel(document, page, layout, totalHeight) {
+        const { label } = layout;
+        const font = await document.embedFont(StandardFonts.Helvetica);
+        const pdfLabelCenterY = totalHeight - label.y;
+        if (label.bgColor) {
+            const [r, g, b] = colorToRGB(label.bgColor);
+            const rectX = label.x - label.width / 2;
+            const rectY = pdfLabelCenterY - label.height / 2;
+            if (label.borderRadius > 0) {
+                const w = label.width;
+                const h = label.height;
+                const rad = Math.min(label.borderRadius, w / 2, h / 2);
+                const pillPath = `M ${rectX + rad} 0 h ${w - 2 * rad} a ${rad} ${rad} 0 0 1 ${rad} ${-rad} v ${-(h - 2 * rad)} a ${rad} ${rad} 0 0 1 ${-rad} ${-rad} h ${-(w - 2 * rad)} a ${rad} ${rad} 0 0 1 ${-rad} ${rad} v ${h - 2 * rad} a ${rad} ${rad} 0 0 1 ${rad} ${rad} z`;
+                page.moveTo(0, rectY + label.height);
+                page.drawSvgPath(pillPath, {
+                    color: rgb(r, g, b),
+                });
+                page.moveTo(0, page.getHeight());
+            }
+            else {
+                page.drawRectangle({
+                    x: rectX,
+                    y: rectY,
+                    width: label.width,
+                    height: label.height,
+                    color: rgb(r, g, b),
+                });
+            }
+        }
+        const textWidth = font.widthOfTextAtSize(label.text, label.fontSize);
+        const [tr, tg, tb] = colorToRGB(label.textColor);
+        page.drawText(label.text, {
+            x: label.x - textWidth / 2,
+            y: pdfLabelCenterY - label.fontSize * 0.35,
+            size: label.fontSize,
+            font,
+            color: rgb(tr, tg, tb),
+        });
+    }
 
     exports.getPDF = getPDF;