@pdfme/pdf-lib 1.17.3 → 1.18.3

package/es/api/operations.js

@@ -1,67 +1,76 @@
-import { __spreadArrays } from "tslib";
-import { setFillingColor, setStrokingColor } from "./colors";
-import { beginText, closePath, drawObject, endText, fill, fillAndStroke, lineTo, moveTo, nextLine, popGraphicsState, pushGraphicsState, rotateAndSkewTextRadiansAndTranslate, rotateRadians, scale, setFontAndSize, setLineHeight, setLineWidth, showText, skewRadians, stroke, translate, setLineCap, rotateDegrees, setGraphicsState, setDashPattern, beginMarkedContent, endMarkedContent, clip, endPath, appendBezierCurve, } from "./operators";
-import { degrees, toRadians } from "./rotations";
-import { svgPathToOperators } from "./svgPath";
-import { asNumber } from "./objects";
-export var drawText = function (line, options) {
-    return [
-        pushGraphicsState(),
-        options.graphicsState && setGraphicsState(options.graphicsState),
-        beginText(),
-        setFillingColor(options.color),
-        setFontAndSize(options.font, options.size),
-        rotateAndSkewTextRadiansAndTranslate(toRadians(options.rotate), toRadians(options.xSkew), toRadians(options.ySkew), options.x, options.y),
-        showText(line),
-        endText(),
-        popGraphicsState(),
-    ].filter(Boolean);
-};
-export var drawLinesOfText = function (lines, options) {
-    var operators = [
+import { setFillingColor, setStrokingColor } from './colors.js';
+import { beginText, closePath, drawObject, endText, fill, fillAndStroke, lineTo, moveTo, nextLine, popGraphicsState, pushGraphicsState, rotateAndSkewTextRadiansAndTranslate, rotateRadians, scale, setFontAndSize, setLineHeight, setLineWidth, showText, skewRadians, stroke, translate, setLineCap, rotateDegrees, setGraphicsState, setDashPattern, beginMarkedContent, endMarkedContent, clip, endPath, appendBezierCurve, FillRule, fillEvenOdd, concatTransformationMatrix, } from './operators.js';
+import { degrees, toRadians } from './rotations.js';
+import { svgPathToOperators } from './svgPath.js';
+import { asNumber } from './objects.js';
+const clipSpace = ({ topLeft, topRight, bottomRight, bottomLeft }) => [
+    moveTo(topLeft.x, topLeft.y),
+    lineTo(topRight.x, topRight.y),
+    lineTo(bottomRight.x, bottomRight.y),
+    lineTo(bottomLeft.x, bottomLeft.y),
+    closePath(),
+    clip(),
+    endPath(),
+];
+const clipSpaces = (spaces) => spaces.flatMap(clipSpace);
+export const drawText = (line, options) => [
+    pushGraphicsState(),
+    options.graphicsState && setGraphicsState(options.graphicsState),
+    beginText(),
+    setFillingColor(options.color),
+    setFontAndSize(options.font, options.size),
+    rotateAndSkewTextRadiansAndTranslate(toRadians(options.rotate), toRadians(options.xSkew), toRadians(options.ySkew), options.x, options.y),
+    showText(line),
+    endText(),
+    popGraphicsState(),
+].filter(Boolean);
+export const drawLinesOfText = (lines, options) => {
+    const operators = [
         pushGraphicsState(),
         options.graphicsState && setGraphicsState(options.graphicsState),
+        ...(options.clipSpaces ? clipSpaces(options.clipSpaces) : []),
+        options.matrix && concatTransformationMatrix(...options.matrix),
         beginText(),
         setFillingColor(options.color),
         setFontAndSize(options.font, options.size),
         setLineHeight(options.lineHeight),
         rotateAndSkewTextRadiansAndTranslate(toRadians(options.rotate), toRadians(options.xSkew), toRadians(options.ySkew), options.x, options.y),
     ].filter(Boolean);
-    for (var idx = 0, len = lines.length; idx < len; idx++) {
+    for (let idx = 0, len = lines.length; idx < len; idx++) {
         operators.push(showText(lines[idx]), nextLine());
     }
     operators.push(endText(), popGraphicsState());
     return operators;
 };
-export var drawImage = function (name, options) {
-    return [
-        pushGraphicsState(),
-        options.graphicsState && setGraphicsState(options.graphicsState),
-        translate(options.x, options.y),
-        rotateRadians(toRadians(options.rotate)),
-        scale(options.width, options.height),
-        skewRadians(toRadians(options.xSkew), toRadians(options.ySkew)),
-        drawObject(name),
-        popGraphicsState(),
-    ].filter(Boolean);
-};
-export var drawPage = function (name, options) {
-    return [
-        pushGraphicsState(),
-        options.graphicsState && setGraphicsState(options.graphicsState),
-        translate(options.x, options.y),
-        rotateRadians(toRadians(options.rotate)),
-        scale(options.xScale, options.yScale),
-        skewRadians(toRadians(options.xSkew), toRadians(options.ySkew)),
-        drawObject(name),
-        popGraphicsState(),
-    ].filter(Boolean);
-};
-export var drawLine = function (options) {
+export const drawImage = (name, options) => [
+    pushGraphicsState(),
+    options.graphicsState && setGraphicsState(options.graphicsState),
+    ...(options.clipSpaces ? clipSpaces(options.clipSpaces) : []),
+    options.matrix && concatTransformationMatrix(...options.matrix),
+    translate(options.x, options.y),
+    rotateRadians(toRadians(options.rotate)),
+    scale(options.width, options.height),
+    skewRadians(toRadians(options.xSkew), toRadians(options.ySkew)),
+    drawObject(name),
+    popGraphicsState(),
+].filter(Boolean);
+export const drawPage = (name, options) => [
+    pushGraphicsState(),
+    options.graphicsState && setGraphicsState(options.graphicsState),
+    translate(options.x, options.y),
+    rotateRadians(toRadians(options.rotate)),
+    scale(options.xScale, options.yScale),
+    skewRadians(toRadians(options.xSkew), toRadians(options.ySkew)),
+    drawObject(name),
+    popGraphicsState(),
+].filter(Boolean);
+export const drawLine = (options) => {
     var _a, _b;
     return [
         pushGraphicsState(),
         options.graphicsState && setGraphicsState(options.graphicsState),
+        ...(options.clipSpaces ? clipSpaces(options.clipSpaces) : []),
+        options.matrix && concatTransformationMatrix(...options.matrix),
         options.color && setStrokingColor(options.color),
         setLineWidth(options.thickness),
         setDashPattern((_a = options.dashArray) !== null && _a !== void 0 ? _a : [], (_b = options.dashPhase) !== null && _b !== void 0 ? _b : 0),
@@ -73,7 +82,7 @@ export var drawLine = function (options) {
         popGraphicsState(),
     ].filter(Boolean);
 };
-export var drawRectangle = function (options) {
+export const drawRectangle = (options) => {
     var _a, _b;
     return [
         pushGraphicsState(),
@@ -83,6 +92,8 @@ export var drawRectangle = function (options) {
         setLineWidth(options.borderWidth),
         options.borderLineCap && setLineCap(options.borderLineCap),
         setDashPattern((_a = options.borderDashArray) !== null && _a !== void 0 ? _a : [], (_b = options.borderDashPhase) !== null && _b !== void 0 ? _b : 0),
+        ...(options.clipSpaces ? clipSpaces(options.clipSpaces) : []),
+        options.matrix && concatTransformationMatrix(...options.matrix),
         translate(options.x, options.y),
         rotateRadians(toRadians(options.rotate)),
         skewRadians(toRadians(options.xSkew), toRadians(options.ySkew)),
@@ -99,21 +110,21 @@ export var drawRectangle = function (options) {
         popGraphicsState(),
     ].filter(Boolean);
 };
-var KAPPA = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);
+const KAPPA = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);
 /** @deprecated */
-export var drawEllipsePath = function (config) {
-    var x = asNumber(config.x);
-    var y = asNumber(config.y);
-    var xScale = asNumber(config.xScale);
-    var yScale = asNumber(config.yScale);
+export const drawEllipsePath = (config) => {
+    let x = asNumber(config.x);
+    let y = asNumber(config.y);
+    const xScale = asNumber(config.xScale);
+    const yScale = asNumber(config.yScale);
     x -= xScale;
     y -= yScale;
-    var ox = xScale * KAPPA;
-    var oy = yScale * KAPPA;
-    var xe = x + xScale * 2;
-    var ye = y + yScale * 2;
-    var xm = x + xScale;
-    var ym = y + yScale;
+    const ox = xScale * KAPPA;
+    const oy = yScale * KAPPA;
+    const xe = x + xScale * 2;
+    const ye = y + yScale * 2;
+    const xm = x + xScale;
+    const ym = y + yScale;
     return [
         pushGraphicsState(),
         moveTo(x, ym),
@@ -124,19 +135,19 @@ export var drawEllipsePath = function (config) {
         popGraphicsState(),
     ];
 };
-var drawEllipseCurves = function (config) {
-    var centerX = asNumber(config.x);
-    var centerY = asNumber(config.y);
-    var xScale = asNumber(config.xScale);
-    var yScale = asNumber(config.yScale);
-    var x = -xScale;
-    var y = -yScale;
-    var ox = xScale * KAPPA;
-    var oy = yScale * KAPPA;
-    var xe = x + xScale * 2;
-    var ye = y + yScale * 2;
-    var xm = x + xScale;
-    var ym = y + yScale;
+const drawEllipseCurves = (config) => {
+    const centerX = asNumber(config.x);
+    const centerY = asNumber(config.y);
+    const xScale = asNumber(config.xScale);
+    const yScale = asNumber(config.yScale);
+    const x = -xScale;
+    const y = -yScale;
+    const ox = xScale * KAPPA;
+    const oy = yScale * KAPPA;
+    const xe = x + xScale * 2;
+    const ye = y + yScale * 2;
+    const xm = x + xScale;
+    const ym = y + yScale;
     return [
         translate(centerX, centerY),
         rotateRadians(toRadians(config.rotate)),
@@ -147,63 +158,68 @@ var drawEllipseCurves = function (config) {
         appendBezierCurve(xm - ox, ye, x, ym + oy, x, ym),
     ];
 };
-export var drawEllipse = function (options) {
+export const drawEllipse = (options) => {
     var _a, _b, _c;
-    return __spreadArrays([
+    return [
         pushGraphicsState(),
         options.graphicsState && setGraphicsState(options.graphicsState),
         options.color && setFillingColor(options.color),
         options.borderColor && setStrokingColor(options.borderColor),
+        ...(options.clipSpaces ? clipSpaces(options.clipSpaces) : []),
+        options.matrix && concatTransformationMatrix(...options.matrix),
         setLineWidth(options.borderWidth),
         options.borderLineCap && setLineCap(options.borderLineCap),
-        setDashPattern((_a = options.borderDashArray) !== null && _a !== void 0 ? _a : [], (_b = options.borderDashPhase) !== null && _b !== void 0 ? _b : 0)
-    ], (options.rotate === undefined
-        ? drawEllipsePath({
-            x: options.x,
-            y: options.y,
-            xScale: options.xScale,
-            yScale: options.yScale,
-        })
-        : drawEllipseCurves({
-            x: options.x,
-            y: options.y,
-            xScale: options.xScale,
-            yScale: options.yScale,
-            rotate: (_c = options.rotate) !== null && _c !== void 0 ? _c : degrees(0),
-        })), [
+        setDashPattern((_a = options.borderDashArray) !== null && _a !== void 0 ? _a : [], (_b = options.borderDashPhase) !== null && _b !== void 0 ? _b : 0),
+        // The `drawEllipsePath` branch is only here for backwards compatibility.
+        // See https://github.com/Hopding/pdf-lib/pull/511#issuecomment-667685655.
+        ...(options.rotate === undefined
+            ? drawEllipsePath({
+                x: options.x,
+                y: options.y,
+                xScale: options.xScale,
+                yScale: options.yScale,
+            })
+            : drawEllipseCurves({
+                x: options.x,
+                y: options.y,
+                xScale: options.xScale,
+                yScale: options.yScale,
+                rotate: (_c = options.rotate) !== null && _c !== void 0 ? _c : degrees(0),
+            })),
         // prettier-ignore
         options.color && options.borderWidth ? fillAndStroke()
             : options.color ? fill()
                 : options.borderColor ? stroke()
                     : closePath(),
         popGraphicsState(),
-    ]).filter(Boolean);
+    ].filter(Boolean);
 };
-export var drawSvgPath = function (path, options) {
+export const drawSvgPath = (path, options) => {
     var _a, _b, _c;
-    return __spreadArrays([
+    return [
         pushGraphicsState(),
         options.graphicsState && setGraphicsState(options.graphicsState),
+        ...(options.clipSpaces ? clipSpaces(options.clipSpaces) : []),
+        options.matrix && concatTransformationMatrix(...options.matrix),
         translate(options.x, options.y),
         rotateRadians(toRadians((_a = options.rotate) !== null && _a !== void 0 ? _a : degrees(0))),
-        // SVG path Y axis is opposite pdf-lib's
-        options.scale ? scale(options.scale, -options.scale) : scale(1, -1),
+        options.scale && scale(options.scale, options.scale),
         options.color && setFillingColor(options.color),
         options.borderColor && setStrokingColor(options.borderColor),
         options.borderWidth && setLineWidth(options.borderWidth),
         options.borderLineCap && setLineCap(options.borderLineCap),
-        setDashPattern((_b = options.borderDashArray) !== null && _b !== void 0 ? _b : [], (_c = options.borderDashPhase) !== null && _c !== void 0 ? _c : 0)
-    ], svgPathToOperators(path), [
+        setDashPattern((_b = options.borderDashArray) !== null && _b !== void 0 ? _b : [], (_c = options.borderDashPhase) !== null && _c !== void 0 ? _c : 0),
+        ...svgPathToOperators(path),
         // prettier-ignore
         options.color && options.borderWidth ? fillAndStroke()
-            : options.color ? fill()
+            : options.color ? options.fillRule === FillRule.EvenOdd ? fillEvenOdd() : fill()
                 : options.borderColor ? stroke()
                     : closePath(),
         popGraphicsState(),
-    ]).filter(Boolean);
+    ].filter(Boolean);
 };
-export var drawCheckMark = function (options) {
-    var size = asNumber(options.size);
+export const drawCheckMark = (options) => {
+    const size = asNumber(options.size);
     /*********************** Define Check Mark Points ***************************/
     // A check mark is defined by three points in some coordinate space. Here, we
     // define these points in a unit coordinate system, where the range of the x
@@ -225,14 +241,14 @@ export var drawCheckMark = function (options) {
     // Thanks to my friend Joel Walker (https://github.com/JWalker1995) for
     // devising the above equation and unit coordinate system approach!
     // (x, y) coords of the check mark's bottommost point
-    var p2x = -1 + 0.75;
-    var p2y = -1 + 0.51;
+    const p2x = -1 + 0.75;
+    const p2y = -1 + 0.51;
     // (x, y) coords of the check mark's topmost point
-    var p3y = 1 - 0.525;
-    var p3x = 1 - 0.31;
+    const p3y = 1 - 0.525;
+    const p3x = 1 - 0.31;
     // (x, y) coords of the check mark's center (vertically) point
-    var p1x = -1 + 0.325;
-    var p1y = -((p1x - p2x) * (p3x - p2x)) / (p3y - p2y) + p2y;
+    const p1x = -1 + 0.325;
+    const p1y = -((p1x - p2x) * (p3x - p2x)) / (p3y - p2y) + p2y;
     /****************************************************************************/
     return [
         pushGraphicsState(),
@@ -247,27 +263,25 @@ export var drawCheckMark = function (options) {
     ].filter(Boolean);
 };
 // prettier-ignore
-export var rotateInPlace = function (options) {
-    return options.rotation === 0 ? [
-        translate(0, 0),
-        rotateDegrees(0)
+export const rotateInPlace = (options) => options.rotation === 0 ? [
+    translate(0, 0),
+    rotateDegrees(0)
+]
+    : options.rotation === 90 ? [
+        translate(options.width, 0),
+        rotateDegrees(90)
     ]
-        : options.rotation === 90 ? [
-            translate(options.width, 0),
-            rotateDegrees(90)
+        : options.rotation === 180 ? [
+            translate(options.width, options.height),
+            rotateDegrees(180)
         ]
-            : options.rotation === 180 ? [
-                translate(options.width, options.height),
-                rotateDegrees(180)
+            : options.rotation === 270 ? [
+                translate(0, options.height),
+                rotateDegrees(270)
             ]
-                : options.rotation === 270 ? [
-                    translate(0, options.height),
-                    rotateDegrees(270)
-                ]
-                    : [];
-}; // Invalid rotation - noop
-export var drawCheckBox = function (options) {
-    var outline = drawRectangle({
+                : []; // Invalid rotation - noop
+export const drawCheckBox = (options) => {
+    const outline = drawRectangle({
         x: options.x,
         y: options.y,
         width: options.width,
@@ -281,23 +295,23 @@ export var drawCheckBox = function (options) {
     });
     if (!options.filled)
         return outline;
-    var width = asNumber(options.width);
-    var height = asNumber(options.height);
-    var checkMarkSize = Math.min(width, height) / 2;
-    var checkMark = drawCheckMark({
+    const width = asNumber(options.width);
+    const height = asNumber(options.height);
+    const checkMarkSize = Math.min(width, height) / 2;
+    const checkMark = drawCheckMark({
         x: width / 2,
         y: height / 2,
         size: checkMarkSize,
         thickness: options.thickness,
         color: options.markColor,
     });
-    return __spreadArrays([pushGraphicsState()], outline, checkMark, [popGraphicsState()]);
+    return [pushGraphicsState(), ...outline, ...checkMark, popGraphicsState()];
 };
-export var drawRadioButton = function (options) {
-    var width = asNumber(options.width);
-    var height = asNumber(options.height);
-    var outlineScale = Math.min(width, height) / 2;
-    var outline = drawEllipse({
+export const drawRadioButton = (options) => {
+    const width = asNumber(options.width);
+    const height = asNumber(options.height);
+    const outlineScale = Math.min(width, height) / 2;
+    const outline = drawEllipse({
         x: options.x,
         y: options.y,
         xScale: outlineScale,
@@ -308,7 +322,7 @@ export var drawRadioButton = function (options) {
     });
     if (!options.filled)
         return outline;
-    var dot = drawEllipse({
+    const dot = drawEllipse({
         x: options.x,
         y: options.y,
         xScale: outlineScale * 0.45,
@@ -317,18 +331,18 @@ export var drawRadioButton = function (options) {
         borderColor: undefined,
         borderWidth: 0,
     });
-    return __spreadArrays([pushGraphicsState()], outline, dot, [popGraphicsState()]);
+    return [pushGraphicsState(), ...outline, ...dot, popGraphicsState()];
 };
-export var drawButton = function (options) {
-    var x = asNumber(options.x);
-    var y = asNumber(options.y);
-    var width = asNumber(options.width);
-    var height = asNumber(options.height);
-    var background = drawRectangle({
-        x: x,
-        y: y,
-        width: width,
-        height: height,
+export const drawButton = (options) => {
+    const x = asNumber(options.x);
+    const y = asNumber(options.y);
+    const width = asNumber(options.width);
+    const height = asNumber(options.height);
+    const background = drawRectangle({
+        x,
+        y,
+        width,
+        height,
         borderWidth: options.borderWidth,
         color: options.color,
         borderColor: options.borderColor,
@@ -336,7 +350,7 @@ export var drawButton = function (options) {
         xSkew: degrees(0),
         ySkew: degrees(0),
     });
-    var lines = drawTextLines(options.textLines, {
+    const lines = drawTextLines(options.textLines, {
         color: options.textColor,
         font: options.font,
         size: options.fontSize,
@@ -344,33 +358,33 @@ export var drawButton = function (options) {
         xSkew: degrees(0),
         ySkew: degrees(0),
     });
-    return __spreadArrays([pushGraphicsState()], background, lines, [popGraphicsState()]);
+    return [pushGraphicsState(), ...background, ...lines, popGraphicsState()];
 };
-export var drawTextLines = function (lines, options) {
-    var operators = [
+export const drawTextLines = (lines, options) => {
+    const operators = [
         beginText(),
         setFillingColor(options.color),
         setFontAndSize(options.font, options.size),
     ];
-    for (var idx = 0, len = lines.length; idx < len; idx++) {
-        var _a = lines[idx], encoded = _a.encoded, x = _a.x, y = _a.y;
+    for (let idx = 0, len = lines.length; idx < len; idx++) {
+        const { encoded, x, y } = lines[idx];
         operators.push(rotateAndSkewTextRadiansAndTranslate(toRadians(options.rotate), toRadians(options.xSkew), toRadians(options.ySkew), x, y), showText(encoded));
     }
     operators.push(endText());
     return operators;
 };
-export var drawTextField = function (options) {
-    var x = asNumber(options.x);
-    var y = asNumber(options.y);
-    var width = asNumber(options.width);
-    var height = asNumber(options.height);
-    var borderWidth = asNumber(options.borderWidth);
-    var padding = asNumber(options.padding);
-    var clipX = x + borderWidth / 2 + padding;
-    var clipY = y + borderWidth / 2 + padding;
-    var clipWidth = width - (borderWidth / 2 + padding) * 2;
-    var clipHeight = height - (borderWidth / 2 + padding) * 2;
-    var clippingArea = [
+export const drawTextField = (options) => {
+    const x = asNumber(options.x);
+    const y = asNumber(options.y);
+    const width = asNumber(options.width);
+    const height = asNumber(options.height);
+    const borderWidth = asNumber(options.borderWidth);
+    const padding = asNumber(options.padding);
+    const clipX = x + borderWidth / 2 + padding;
+    const clipY = y + borderWidth / 2 + padding;
+    const clipWidth = width - (borderWidth / 2 + padding) * 2;
+    const clipHeight = height - (borderWidth / 2 + padding) * 2;
+    const clippingArea = [
         moveTo(clipX, clipY),
         lineTo(clipX, clipY + clipHeight),
         lineTo(clipX + clipWidth, clipY + clipHeight),
@@ -379,11 +393,11 @@ export var drawTextField = function (options) {
         clip(),
         endPath(),
     ];
-    var background = drawRectangle({
-        x: x,
-        y: y,
-        width: width,
-        height: height,
+    const background = drawRectangle({
+        x,
+        y,
+        width,
+        height,
         borderWidth: options.borderWidth,
         color: options.color,
         borderColor: options.borderColor,
@@ -391,7 +405,7 @@ export var drawTextField = function (options) {
         xSkew: degrees(0),
         ySkew: degrees(0),
     });
-    var lines = drawTextLines(options.textLines, {
+    const lines = drawTextLines(options.textLines, {
         color: options.textColor,
         font: options.font,
         size: options.fontSize,
@@ -399,32 +413,34 @@ export var drawTextField = function (options) {
         xSkew: degrees(0),
         ySkew: degrees(0),
     });
-    var markedContent = __spreadArrays([
+    const markedContent = [
         beginMarkedContent('Tx'),
-        pushGraphicsState()
-    ], lines, [
+        pushGraphicsState(),
+        ...lines,
         popGraphicsState(),
         endMarkedContent(),
-    ]);
-    return __spreadArrays([
-        pushGraphicsState()
-    ], background, clippingArea, markedContent, [
+    ];
+    return [
+        pushGraphicsState(),
+        ...background,
+        ...clippingArea,
+        ...markedContent,
         popGraphicsState(),
-    ]);
+    ];
 };
-export var drawOptionList = function (options) {
-    var x = asNumber(options.x);
-    var y = asNumber(options.y);
-    var width = asNumber(options.width);
-    var height = asNumber(options.height);
-    var lineHeight = asNumber(options.lineHeight);
-    var borderWidth = asNumber(options.borderWidth);
-    var padding = asNumber(options.padding);
-    var clipX = x + borderWidth / 2 + padding;
-    var clipY = y + borderWidth / 2 + padding;
-    var clipWidth = width - (borderWidth / 2 + padding) * 2;
-    var clipHeight = height - (borderWidth / 2 + padding) * 2;
-    var clippingArea = [
+export const drawOptionList = (options) => {
+    const x = asNumber(options.x);
+    const y = asNumber(options.y);
+    const width = asNumber(options.width);
+    const height = asNumber(options.height);
+    const lineHeight = asNumber(options.lineHeight);
+    const borderWidth = asNumber(options.borderWidth);
+    const padding = asNumber(options.padding);
+    const clipX = x + borderWidth / 2 + padding;
+    const clipY = y + borderWidth / 2 + padding;
+    const clipWidth = width - (borderWidth / 2 + padding) * 2;
+    const clipHeight = height - (borderWidth / 2 + padding) * 2;
+    const clippingArea = [
         moveTo(clipX, clipY),
         lineTo(clipX, clipY + clipHeight),
         lineTo(clipX + clipWidth, clipY + clipHeight),
@@ -433,11 +449,11 @@ export var drawOptionList = function (options) {
         clip(),
         endPath(),
     ];
-    var background = drawRectangle({
-        x: x,
-        y: y,
-        width: width,
-        height: height,
+    const background = drawRectangle({
+        x,
+        y,
+        width,
+        height,
         borderWidth: options.borderWidth,
         color: options.color,
         borderColor: options.borderColor,
@@ -445,10 +461,10 @@ export var drawOptionList = function (options) {
         xSkew: degrees(0),
         ySkew: degrees(0),
     });
-    var highlights = [];
-    for (var idx = 0, len = options.selectedLines.length; idx < len; idx++) {
-        var line = options.textLines[options.selectedLines[idx]];
-        highlights.push.apply(highlights, drawRectangle({
+    const highlights = [];
+    for (let idx = 0, len = options.selectedLines.length; idx < len; idx++) {
+        const line = options.textLines[options.selectedLines[idx]];
+        highlights.push(...drawRectangle({
             x: line.x - padding,
             y: line.y - (lineHeight - line.height) / 2,
             width: width - borderWidth,
@@ -461,7 +477,7 @@ export var drawOptionList = function (options) {
             ySkew: degrees(0),
         }));
     }
-    var lines = drawTextLines(options.textLines, {
+    const lines = drawTextLines(options.textLines, {
         color: options.textColor,
         font: options.font,
         size: options.fontSize,
@@ -469,17 +485,20 @@ export var drawOptionList = function (options) {
         xSkew: degrees(0),
         ySkew: degrees(0),
     });
-    var markedContent = __spreadArrays([
+    const markedContent = [
         beginMarkedContent('Tx'),
-        pushGraphicsState()
-    ], lines, [
+        pushGraphicsState(),
+        ...lines,
         popGraphicsState(),
         endMarkedContent(),
-    ]);
-    return __spreadArrays([
-        pushGraphicsState()
-    ], background, highlights, clippingArea, markedContent, [
+    ];
+    return [
+        pushGraphicsState(),
+        ...background,
+        ...highlights,
+        ...clippingArea,
+        ...markedContent,
         popGraphicsState(),
-    ]);
+    ];
 };
 //# sourceMappingURL=operations.js.map