Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@react-pdf/render

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-pdf/render - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

CHANGELOG.md

		# @react-pdf/render

		## 2.1.0
		### Minor Changes
		## 3.0.0

		### Major Changes

		- [#1834](https://github.com/diegomura/react-pdf/pull/1834) [`7e97bb5`](https://github.com/diegomura/react-pdf/commit/7e97bb579aaa847e5a2de650b5b327ac90a465c7) Thanks [@diegomura](https://github.com/diegomura)! - refactor: remove ramda from render package

		- [#1654](https://github.com/diegomura/react-pdf/pull/1654) [`ccf3bf2`](https://github.com/diegomura/react-pdf/commit/ccf3bf22867a9bd49668cdd3543ec32492a40e4b) Thanks [@jeetiss](https://github.com/jeetiss)! - added `@babel/runtime` to dependencies
		### Patch Changes

		- [#1827](https://github.com/diegomura/react-pdf/pull/1827) [`7c1d373`](https://github.com/diegomura/react-pdf/commit/7c1d373a06b04369e762069be4b96d4e40371ecc) Thanks [@diegomura](https://github.com/diegomura)! - refactor: remove ramda from layout package

		### Patch Changes
		* [#1838](https://github.com/diegomura/react-pdf/pull/1838) [`9bdb5c9`](https://github.com/diegomura/react-pdf/commit/9bdb5c934a822340754cd4c892d399f91f6218de) Thanks [@diegomura](https://github.com/diegomura)! - feat: create fns package

		* Updated dependencies [[`e938df0`](https://github.com/diegomura/react-pdf/commit/e938df0857642707b10b7f65f17ed22dc394ac1b), [`9bdb5c9`](https://github.com/diegomura/react-pdf/commit/9bdb5c934a822340754cd4c892d399f91f6218de), [`fe0f214`](https://github.com/diegomura/react-pdf/commit/fe0f214dbbf2f632b852ebfe65f886ecc4dd6953), [`9a2b935`](https://github.com/diegomura/react-pdf/commit/9a2b935cfe173f80425ed87d9f474da271c050d2)]:
		- @react-pdf/primitives@3.0.0
		- @react-pdf/fns@1.0.0
		- @react-pdf/textkit@3.0.0
		- @react-pdf/types@2.0.9

		## 2.1.0

		- [#1648](https://github.com/diegomura/react-pdf/pull/1648) [`46a4b0c`](https://github.com/diegomura/react-pdf/commit/46a4b0c88836e0653db0c8bae6f71f969882277c) Thanks [@jeetiss](https://github.com/jeetiss)! - fixed render crush when a node has `debug` prop and `margin: auto`
		### Minor Changes

		- [#1654](https://github.com/diegomura/react-pdf/pull/1654) [`ccf3bf2`](https://github.com/diegomura/react-pdf/commit/ccf3bf22867a9bd49668cdd3543ec32492a40e4b) Thanks [@jeetiss](https://github.com/jeetiss)! - added `@babel/runtime` to dependencies

		### Patch Changes

		- [#1581](https://github.com/diegomura/react-pdf/pull/1581) [`04449ab`](https://github.com/diegomura/react-pdf/commit/04449ab352db0cca2155024dd3e8c690e42193ca) Thanks [@jeetiss](https://github.com/jeetiss)! - added changelog with changesets
		- [#1648](https://github.com/diegomura/react-pdf/pull/1648) [`46a4b0c`](https://github.com/diegomura/react-pdf/commit/46a4b0c88836e0653db0c8bae6f71f969882277c) Thanks [@jeetiss](https://github.com/jeetiss)! - fixed render crush when a node has `debug` prop and `margin: auto`

		- Updated dependencies [[`04449ab`](https://github.com/diegomura/react-pdf/commit/04449ab352db0cca2155024dd3e8c690e42193ca), [`5d2d688`](https://github.com/diegomura/react-pdf/commit/5d2d688e18c830bb96c6e08446437d29f9f9c65f), [`ccf3bf2`](https://github.com/diegomura/react-pdf/commit/ccf3bf22867a9bd49668cdd3543ec32492a40e4b)]:
		* [#1581](https://github.com/diegomura/react-pdf/pull/1581) [`04449ab`](https://github.com/diegomura/react-pdf/commit/04449ab352db0cca2155024dd3e8c690e42193ca) Thanks [@jeetiss](https://github.com/jeetiss)! - added changelog with changesets

		* Updated dependencies [[`04449ab`](https://github.com/diegomura/react-pdf/commit/04449ab352db0cca2155024dd3e8c690e42193ca), [`5d2d688`](https://github.com/diegomura/react-pdf/commit/5d2d688e18c830bb96c6e08446437d29f9f9c65f), [`ccf3bf2`](https://github.com/diegomura/react-pdf/commit/ccf3bf22867a9bd49668cdd3543ec32492a40e4b)]:
		- @react-pdf/primitives@2.0.2
		- @react-pdf/textkit@2.1.0
		- @react-pdf/types@2.0.8

lib/index.js

		@@ -12,12 +12,8 @@ "use strict";

		var renderDocument = function renderDocument(ctx) {
		return function (doc) {
		var pages = doc.children \|\| [];
		pages.forEach((0, _renderNode.default)(ctx));
		};
		};

		var render = function render(ctx, doc) {
		(0, _addMetadata.default)(ctx)(doc);
		renderDocument(ctx)(doc);
		var pages = doc.children \|\| [];
		(0, _addMetadata.default)(ctx, doc);
		pages.forEach(function (page) {
		return (0, _renderNode.default)(ctx, page);
		});
		ctx.end();
		@@ -24,0 +20,0 @@ return ctx;

lib/operations/addMetadata.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		/* eslint-disable no-param-reassign */
		var getDocumentProp = function getDocumentProp(target) {
		return function (or, prop) {
		return R.pathOr(or, ['props', prop], target);
		};
		};

		var setPDFMetadata = function setPDFMetadata(target) {
		@@ -31,10 +21,10 @@ return function (key, value) {
		var addMetadata = function addMetadata(ctx, doc) {
		var getProp = getDocumentProp(doc);
		var setProp = setPDFMetadata(ctx);
		var title = getProp(null, 'title');
		var author = getProp(null, 'author');
		var subject = getProp(null, 'subject');
		var keywords = getProp(null, 'keywords');
		var creator = getProp('react-pdf', 'creator');
		var producer = getProp('react-pdf', 'producer');
		var props = doc.props \|\| {};
		var title = props.title \|\| null;
		var author = props.author \|\| null;
		var subject = props.subject \|\| null;
		var keywords = props.keywords \|\| null;
		var creator = props.creator \|\| 'react-pdf';
		var producer = props.producer \|\| 'react-pdf';
		setProp('Title', title);
		@@ -46,7 +36,5 @@ setProp('Author', author);
		setProp('Producer', producer);
		return doc;
		};

		var _default = R.curryN(2, addMetadata);

		var _default = addMetadata;
		exports.default = _default;

lib/operations/clipNode.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		// This constant is used to approximate a symmetrical arc using a cubic
		@@ -15,3 +10,3 @@ // Bezier curve.
		var clipNode = function clipNode(ctx, node) {
		if (!node.style) return node;
		if (!node.style) return;
		var _node$box = node.box,
		@@ -54,7 +49,5 @@ top = _node$box.top,
		ctx.clip();
		return node;
		};

		var _default = R.curryN(2, clipNode);

		var _default = clipNode;
		exports.default = _default;

lib/operations/setDestination.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var setDestination = function setDestination(ctx, node) {
		@@ -16,8 +12,5 @@ var _node$props;
		}

		return node;
		};

		var _default = R.curryN(2, setDestination);

		var _default = setDestination;
		exports.default = _default;

lib/operations/setLink.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var DEST_REGEXP = /^#.+/;
		var isSrcId = R.test(DEST_REGEXP);

		var getSource = function getSource(node) {
		var props = node.props \|\| {};
		return props.src \|\| props.href;
		var isSrcId = function isSrcId(value) {
		return /^#.+/.test(value);
		};

		var setLink = function setLink(ctx, node) {
		var props = node.props \|\| {};
		var _node$box = node.box,
		@@ -24,3 +17,3 @@ top = _node$box.top,
		height = _node$box.height;
		var src = getSource(node);
		var src = props.src \|\| props.href;

		@@ -33,8 +26,5 @@ if (src) {
		}

		return node;
		};

		var _default = R.curryN(2, setLink);

		var _default = setLink;
		exports.default = _default;

lib/operations/transform.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		// TODO: Implement using only matrices to support skew and even more operations than css.
		@@ -61,3 +57,3 @@ var applySingleTransformation = function applySingleTransformation(ctx, transform, origin) {

		if (!node.origin) return node;
		if (!node.origin) return;
		var origin = [node.origin.left, node.origin.top];
		@@ -68,7 +64,5 @@ var operations = ((_node$style = node.style) === null \|\| _node$style === void 0 ? void 0 : _node$style.transform) \|\| ((_node$props = node.props) === null \|\| _node$props === void 0 ? void 0 : _node$props.transform) \|\| [];
		});
		return node;
		};

		var _default = R.curryN(2, applyTransformations);

		var _default = applyTransformations;
		exports.default = _default;

lib/primitives/renderBackground.js

		@@ -5,13 +5,7 @@ "use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var _fns = require("@react-pdf/fns");

		var _save = _interopRequireDefault(require("../operations/save"));

		var _restore = _interopRequireDefault(require("../operations/restore"));

		var _clipNode = _interopRequireDefault(require("../operations/clipNode"));
		@@ -22,17 +16,13 @@
		var drawBackground = function drawBackground(ctx, node) {
		if (node.box && node.style.backgroundColor) {
		var _node$style;
		var _node$style;

		var _node$box = node.box,
		top = _node$box.top,
		left = _node$box.left,
		width = _node$box.width,
		height = _node$box.height;
		var color = (0, _parseColor.default)(node.style.backgroundColor);
		var nodeOpacity = R.isNil((_node$style = node.style) === null \|\| _node$style === void 0 ? void 0 : _node$style.opacity) ? 1 : node.style.opacity;
		var opacity = Math.min(color.opacity, nodeOpacity);
		ctx.fillOpacity(opacity).fillColor(color.value).rect(left, top, width, height).fill();
		}

		return node;
		var _node$box = node.box,
		top = _node$box.top,
		left = _node$box.left,
		width = _node$box.width,
		height = _node$box.height;
		var color = (0, _parseColor.default)(node.style.backgroundColor);
		var nodeOpacity = (0, _fns.isNil)((_node$style = node.style) === null \|\| _node$style === void 0 ? void 0 : _node$style.opacity) ? 1 : node.style.opacity;
		var opacity = Math.min(color.opacity, nodeOpacity);
		ctx.fillOpacity(opacity).fillColor(color.value).rect(left, top, width, height).fill();
		};
		@@ -46,13 +36,10 @@
		if (hasBackground) {
		(0, _save.default)(ctx, node);
		ctx.save();
		(0, _clipNode.default)(ctx, node);
		drawBackground(ctx, node);
		(0, _restore.default)(ctx, node);
		ctx.restore();
		}

		return node;
		};

		var _default = R.curryN(2, renderBackground);

		var _default = renderBackground;
		exports.default = _default;

lib/primitives/renderBorders.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		// Ref: https://www.w3.org/TR/css-backgrounds-3/#borders
		@@ -423,3 +418,3 @@ // This constant is used to approximate a symmetrical arc using a cubic Bezier curve.
		var renderBorders = function renderBorders(ctx, node) {
		if (!shouldRenderBorders(node)) return node;
		if (!shouldRenderBorders(node)) return;
		var _node$box = node.box,
		@@ -512,7 +507,5 @@ width = _node$box.width,
		ctx.restore();
		return node;
		};

		var _default = R.curryN(2, renderBorders);

		var _default = renderBorders;
		exports.default = _default;

lib/primitives/renderCanvas.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
		@@ -12,4 +10,2 @@

		var R = _interopRequireWildcard(require("ramda"));

		var availableMethods = ['dash', 'clip', 'save', 'path', 'fill', 'font', 'text', 'rect', 'scale', 'moveTo', 'lineTo', 'stroke', 'rotate', 'circle', 'lineCap', 'opacity', 'ellipse', 'polygon', 'restore', 'lineJoin', 'fontSize', 'fillColor', 'lineWidth', 'translate', 'miterLimit', 'strokeColor', 'fillOpacity', 'roundedRect', 'fillAndStroke', 'strokeOpacity', 'bezierCurveTo', 'quadraticCurveTo', 'linearGradient', 'radialGradient'];
		@@ -29,4 +25,2 @@

		var defaultsZero = R.propOr(0);

		var renderCanvas = function renderCanvas(ctx, node) {
		@@ -38,6 +32,6 @@ var _node$box = node.box,
		height = _node$box.height;
		var paddingTop = defaultsZero('paddingTop', node.box);
		var paddingLeft = defaultsZero('paddingLeft', node.box);
		var paddingRight = defaultsZero('paddingRight', node.box);
		var paddingBottom = defaultsZero('paddingBottom', node.box);
		var paddingTop = node.box.paddingTop \|\| 0;
		var paddingLeft = node.box.paddingLeft \|\| 0;
		var paddingRight = node.box.paddingRight \|\| 0;
		var paddingBottom = node.box.paddingBottom \|\| 0;
		var availableWidth = width - paddingLeft - paddingRight;
		@@ -57,7 +51,5 @@ var availableHeight = height - paddingTop - paddingBottom;
		ctx.restore();
		return node;
		};

		var _default = R.curryN(2, renderCanvas);

		var _default = renderCanvas;
		exports.default = _default;

lib/primitives/renderCircle.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var _renderEllipse = require("./renderEllipse");

		var getProp = function getProp(p, v) {
		return R.path(['props', p], v);
		};
		var renderCircle = function renderCircle(ctx, node) {
		var _node$props, _node$props2, _node$props3;

		var renderCircle = function renderCircle(ctx, node) {
		var cx = getProp('cx', node);
		var cy = getProp('cy', node);
		var r = getProp('r', node);
		var cx = (_node$props = node.props) === null \|\| _node$props === void 0 ? void 0 : _node$props.cx;
		var cy = (_node$props2 = node.props) === null \|\| _node$props2 === void 0 ? void 0 : _node$props2.cy;
		var r = (_node$props3 = node.props) === null \|\| _node$props3 === void 0 ? void 0 : _node$props3.r;
		(0, _renderEllipse.drawEllipse)(ctx, cx, cy, r, r);
		return node;
		};

		var _default = R.curryN(2, renderCircle);

		var _default = renderCircle;
		exports.default = _default;

225

lib/primitives/renderDebug.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var _save = _interopRequireDefault(require("../operations/save"));

		var _restore = _interopRequireDefault(require("../operations/restore"));

		var CONTENT_COLOR = '#a1c6e7';
		var PADDING_COLOR = '#c4deb9';
		var MARGIN_COLOR = '#f8cca1';
		var shouldDebug = R.pathEq(['props', 'debug'], true); // TODO: Draw debug boxes using clipping to enhance quality
		var MARGIN_COLOR = '#f8cca1'; // TODO: Draw debug boxes using clipping to enhance quality

		var debugContent = function debugContent(ctx) {
		return function (node) {
		var _node$box = node.box,
		left = _node$box.left,
		top = _node$box.top,
		width = _node$box.width,
		height = _node$box.height,
		_node$box$paddingLeft = _node$box.paddingLeft,
		paddingLeft = _node$box$paddingLeft === void 0 ? 0 : _node$box$paddingLeft,
		_node$box$paddingTop = _node$box.paddingTop,
		paddingTop = _node$box$paddingTop === void 0 ? 0 : _node$box$paddingTop,
		_node$box$paddingRigh = _node$box.paddingRight,
		paddingRight = _node$box$paddingRigh === void 0 ? 0 : _node$box$paddingRigh,
		_node$box$paddingBott = _node$box.paddingBottom,
		paddingBottom = _node$box$paddingBott === void 0 ? 0 : _node$box$paddingBott,
		_node$box$borderLeftW = _node$box.borderLeftWidth,
		borderLeftWidth = _node$box$borderLeftW === void 0 ? 0 : _node$box$borderLeftW,
		_node$box$borderTopWi = _node$box.borderTopWidth,
		borderTopWidth = _node$box$borderTopWi === void 0 ? 0 : _node$box$borderTopWi,
		_node$box$borderRight = _node$box.borderRightWidth,
		borderRightWidth = _node$box$borderRight === void 0 ? 0 : _node$box$borderRight,
		_node$box$borderBotto = _node$box.borderBottomWidth,
		borderBottomWidth = _node$box$borderBotto === void 0 ? 0 : _node$box$borderBotto;
		ctx.fillColor(CONTENT_COLOR).opacity(0.5).rect(left + paddingLeft + borderLeftWidth, top + paddingTop + borderTopWidth, width - paddingLeft - paddingRight - borderRightWidth - borderLeftWidth, height - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth).fill();
		return node;
		};
		var debugContent = function debugContent(ctx, node) {
		var _node$box = node.box,
		left = _node$box.left,
		top = _node$box.top,
		width = _node$box.width,
		height = _node$box.height,
		_node$box$paddingLeft = _node$box.paddingLeft,
		paddingLeft = _node$box$paddingLeft === void 0 ? 0 : _node$box$paddingLeft,
		_node$box$paddingTop = _node$box.paddingTop,
		paddingTop = _node$box$paddingTop === void 0 ? 0 : _node$box$paddingTop,
		_node$box$paddingRigh = _node$box.paddingRight,
		paddingRight = _node$box$paddingRigh === void 0 ? 0 : _node$box$paddingRigh,
		_node$box$paddingBott = _node$box.paddingBottom,
		paddingBottom = _node$box$paddingBott === void 0 ? 0 : _node$box$paddingBott,
		_node$box$borderLeftW = _node$box.borderLeftWidth,
		borderLeftWidth = _node$box$borderLeftW === void 0 ? 0 : _node$box$borderLeftW,
		_node$box$borderTopWi = _node$box.borderTopWidth,
		borderTopWidth = _node$box$borderTopWi === void 0 ? 0 : _node$box$borderTopWi,
		_node$box$borderRight = _node$box.borderRightWidth,
		borderRightWidth = _node$box$borderRight === void 0 ? 0 : _node$box$borderRight,
		_node$box$borderBotto = _node$box.borderBottomWidth,
		borderBottomWidth = _node$box$borderBotto === void 0 ? 0 : _node$box$borderBotto;
		ctx.fillColor(CONTENT_COLOR).opacity(0.5).rect(left + paddingLeft + borderLeftWidth, top + paddingTop + borderTopWidth, width - paddingLeft - paddingRight - borderRightWidth - borderLeftWidth, height - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth).fill();
		};

		var debugPadding = function debugPadding(ctx) {
		return function (node) {
		var _node$box2 = node.box,
		left = _node$box2.left,
		top = _node$box2.top,
		width = _node$box2.width,
		height = _node$box2.height,
		_node$box2$paddingLef = _node$box2.paddingLeft,
		paddingLeft = _node$box2$paddingLef === void 0 ? 0 : _node$box2$paddingLef,
		_node$box2$paddingTop = _node$box2.paddingTop,
		paddingTop = _node$box2$paddingTop === void 0 ? 0 : _node$box2$paddingTop,
		_node$box2$paddingRig = _node$box2.paddingRight,
		paddingRight = _node$box2$paddingRig === void 0 ? 0 : _node$box2$paddingRig,
		_node$box2$paddingBot = _node$box2.paddingBottom,
		paddingBottom = _node$box2$paddingBot === void 0 ? 0 : _node$box2$paddingBot,
		_node$box2$borderLeft = _node$box2.borderLeftWidth,
		borderLeftWidth = _node$box2$borderLeft === void 0 ? 0 : _node$box2$borderLeft,
		_node$box2$borderTopW = _node$box2.borderTopWidth,
		borderTopWidth = _node$box2$borderTopW === void 0 ? 0 : _node$box2$borderTopW,
		_node$box2$borderRigh = _node$box2.borderRightWidth,
		borderRightWidth = _node$box2$borderRigh === void 0 ? 0 : _node$box2$borderRigh,
		_node$box2$borderBott = _node$box2.borderBottomWidth,
		borderBottomWidth = _node$box2$borderBott === void 0 ? 0 : _node$box2$borderBott;
		ctx.fillColor(PADDING_COLOR).opacity(0.5); // Padding top
		var debugPadding = function debugPadding(ctx, node) {
		var _node$box2 = node.box,
		left = _node$box2.left,
		top = _node$box2.top,
		width = _node$box2.width,
		height = _node$box2.height,
		_node$box2$paddingLef = _node$box2.paddingLeft,
		paddingLeft = _node$box2$paddingLef === void 0 ? 0 : _node$box2$paddingLef,
		_node$box2$paddingTop = _node$box2.paddingTop,
		paddingTop = _node$box2$paddingTop === void 0 ? 0 : _node$box2$paddingTop,
		_node$box2$paddingRig = _node$box2.paddingRight,
		paddingRight = _node$box2$paddingRig === void 0 ? 0 : _node$box2$paddingRig,
		_node$box2$paddingBot = _node$box2.paddingBottom,
		paddingBottom = _node$box2$paddingBot === void 0 ? 0 : _node$box2$paddingBot,
		_node$box2$borderLeft = _node$box2.borderLeftWidth,
		borderLeftWidth = _node$box2$borderLeft === void 0 ? 0 : _node$box2$borderLeft,
		_node$box2$borderTopW = _node$box2.borderTopWidth,
		borderTopWidth = _node$box2$borderTopW === void 0 ? 0 : _node$box2$borderTopW,
		_node$box2$borderRigh = _node$box2.borderRightWidth,
		borderRightWidth = _node$box2$borderRigh === void 0 ? 0 : _node$box2$borderRigh,
		_node$box2$borderBott = _node$box2.borderBottomWidth,
		borderBottomWidth = _node$box2$borderBott === void 0 ? 0 : _node$box2$borderBott;
		ctx.fillColor(PADDING_COLOR).opacity(0.5); // Padding top

		ctx.rect(left + paddingLeft + borderLeftWidth, top + borderTopWidth, width - paddingRight - paddingLeft - borderLeftWidth - borderRightWidth, paddingTop).fill(); // Padding left
		ctx.rect(left + paddingLeft + borderLeftWidth, top + borderTopWidth, width - paddingRight - paddingLeft - borderLeftWidth - borderRightWidth, paddingTop).fill(); // Padding left

		ctx.rect(left + borderLeftWidth, top + borderTopWidth, paddingLeft, height - borderTopWidth - borderBottomWidth).fill(); // Padding right
		ctx.rect(left + borderLeftWidth, top + borderTopWidth, paddingLeft, height - borderTopWidth - borderBottomWidth).fill(); // Padding right

		ctx.rect(left + width - paddingRight - borderRightWidth, top + borderTopWidth, paddingRight, height - borderTopWidth - borderBottomWidth).fill(); // Padding bottom
		ctx.rect(left + width - paddingRight - borderRightWidth, top + borderTopWidth, paddingRight, height - borderTopWidth - borderBottomWidth).fill(); // Padding bottom

		ctx.rect(left + paddingLeft + borderLeftWidth, top + height - paddingBottom - borderBottomWidth, width - paddingRight - paddingLeft - borderLeftWidth - borderRightWidth, paddingBottom).fill();
		return node;
		};
		ctx.rect(left + paddingLeft + borderLeftWidth, top + height - paddingBottom - borderBottomWidth, width - paddingRight - paddingLeft - borderLeftWidth - borderRightWidth, paddingBottom).fill();
		};
		@@ -98,70 +80,67 @@

		var debugMargin = function debugMargin(ctx) {
		return function (node) {
		var _node$box3 = node.box,
		left = _node$box3.left,
		top = _node$box3.top,
		width = _node$box3.width,
		height = _node$box3.height;
		var debugMargin = function debugMargin(ctx, node) {
		var _node$box3 = node.box,
		left = _node$box3.left,
		top = _node$box3.top,
		width = _node$box3.width,
		height = _node$box3.height;

		var _getMargin = getMargin(node.box),
		_getMargin$marginLeft = _getMargin.marginLeft,
		marginLeft = _getMargin$marginLeft === void 0 ? 0 : _getMargin$marginLeft,
		_getMargin$marginTop = _getMargin.marginTop,
		marginTop = _getMargin$marginTop === void 0 ? 0 : _getMargin$marginTop,
		_getMargin$marginRigh = _getMargin.marginRight,
		marginRight = _getMargin$marginRigh === void 0 ? 0 : _getMargin$marginRigh,
		_getMargin$marginBott = _getMargin.marginBottom,
		marginBottom = _getMargin$marginBott === void 0 ? 0 : _getMargin$marginBott;
		var _getMargin = getMargin(node.box),
		_getMargin$marginLeft = _getMargin.marginLeft,
		marginLeft = _getMargin$marginLeft === void 0 ? 0 : _getMargin$marginLeft,
		_getMargin$marginTop = _getMargin.marginTop,
		marginTop = _getMargin$marginTop === void 0 ? 0 : _getMargin$marginTop,
		_getMargin$marginRigh = _getMargin.marginRight,
		marginRight = _getMargin$marginRigh === void 0 ? 0 : _getMargin$marginRigh,
		_getMargin$marginBott = _getMargin.marginBottom,
		marginBottom = _getMargin$marginBott === void 0 ? 0 : _getMargin$marginBott;

		ctx.fillColor(MARGIN_COLOR).opacity(0.5); // Margin top
		ctx.fillColor(MARGIN_COLOR).opacity(0.5); // Margin top

		ctx.rect(left, top - marginTop, width, marginTop).fill(); // Margin left
		ctx.rect(left, top - marginTop, width, marginTop).fill(); // Margin left

		ctx.rect(left - marginLeft, top - marginTop, marginLeft, height + marginTop + marginBottom).fill(); // Margin right
		ctx.rect(left - marginLeft, top - marginTop, marginLeft, height + marginTop + marginBottom).fill(); // Margin right

		ctx.rect(left + width, top - marginTop, marginRight, height + marginTop + marginBottom).fill(); // Margin bottom
		ctx.rect(left + width, top - marginTop, marginRight, height + marginTop + marginBottom).fill(); // Margin bottom

		ctx.rect(left, top + height, width, marginBottom).fill();
		return node;
		};
		ctx.rect(left, top + height, width, marginBottom).fill();
		};

		var debugText = function debugText(ctx) {
		return function (node) {
		var _node$box4 = node.box,
		left = _node$box4.left,
		top = _node$box4.top,
		width = _node$box4.width,
		height = _node$box4.height;
		var debugText = function debugText(ctx, node) {
		var _node$box4 = node.box,
		left = _node$box4.left,
		top = _node$box4.top,
		width = _node$box4.width,
		height = _node$box4.height;

		var _getMargin2 = getMargin(node.box),
		_getMargin2$marginLef = _getMargin2.marginLeft,
		marginLeft = _getMargin2$marginLef === void 0 ? 0 : _getMargin2$marginLef,
		_getMargin2$marginTop = _getMargin2.marginTop,
		marginTop = _getMargin2$marginTop === void 0 ? 0 : _getMargin2$marginTop,
		_getMargin2$marginRig = _getMargin2.marginRight,
		marginRight = _getMargin2$marginRig === void 0 ? 0 : _getMargin2$marginRig,
		_getMargin2$marginBot = _getMargin2.marginBottom,
		marginBottom = _getMargin2$marginBot === void 0 ? 0 : _getMargin2$marginBot;
		var _getMargin2 = getMargin(node.box),
		_getMargin2$marginLef = _getMargin2.marginLeft,
		marginLeft = _getMargin2$marginLef === void 0 ? 0 : _getMargin2$marginLef,
		_getMargin2$marginTop = _getMargin2.marginTop,
		marginTop = _getMargin2$marginTop === void 0 ? 0 : _getMargin2$marginTop,
		_getMargin2$marginRig = _getMargin2.marginRight,
		marginRight = _getMargin2$marginRig === void 0 ? 0 : _getMargin2$marginRig,
		_getMargin2$marginBot = _getMargin2.marginBottom,
		marginBottom = _getMargin2$marginBot === void 0 ? 0 : _getMargin2$marginBot;

		var roundedWidth = Math.round(width + marginLeft + marginRight);
		var roundedHeight = Math.round(height + marginTop + marginBottom);
		ctx.fontSize(6).opacity(1).fillColor('black').text(roundedWidth + " x " + roundedHeight, left - marginLeft, Math.max(top - marginTop - 4, 1));
		return node;
		};
		var roundedWidth = Math.round(width + marginLeft + marginRight);
		var roundedHeight = Math.round(height + marginTop + marginBottom);
		ctx.fontSize(6).opacity(1).fillColor('black').text(roundedWidth + " x " + roundedHeight, left - marginLeft, Math.max(top - marginTop - 4, 1));
		};

		var debugOrigin = function debugOrigin(ctx) {
		return function (node) {
		if (node.origin) {
		ctx.circle(node.origin.left, node.origin.top, 3).fill('red').circle(node.origin.left, node.origin.top, 5).stroke('red');
		}

		return node;
		};
		var debugOrigin = function debugOrigin(ctx, node) {
		if (node.origin) {
		ctx.circle(node.origin.left, node.origin.top, 3).fill('red').circle(node.origin.left, node.origin.top, 5).stroke('red');
		}
		};

		var renderDebug = function renderDebug(ctx) {
		return R.tap(R.when(shouldDebug, R.compose((0, _restore.default)(ctx), debugOrigin(ctx), debugText(ctx), debugMargin(ctx), debugPadding(ctx), debugContent(ctx), (0, _save.default)(ctx))));
		var renderDebug = function renderDebug(ctx, node) {
		if (!node.props.debug) return;
		ctx.save();
		debugContent(ctx, node);
		debugPadding(ctx, node);
		debugMargin(ctx, node);
		debugText(ctx, node);
		debugOrigin(ctx, node);
		ctx.restore();
		};
		@@ -168,0 +147,0 @@

lib/primitives/renderEllipse.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.drawEllipse = exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var KAPPA = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);

		var getProp = function getProp(p, v) {
		return R.path(['props', p], v);
		};

		var drawEllipse = function drawEllipse(ctx, cx, cy, rx, ry) {
		@@ -36,12 +27,12 @@ var x = cx - rx;
		var renderEllipse = function renderEllipse(ctx, node) {
		var cx = getProp('cx', node);
		var cy = getProp('cy', node);
		var rx = getProp('rx', node);
		var ry = getProp('ry', node);
		var _ref = node.props \|\| {},
		cx = _ref.cx,
		cy = _ref.cy,
		rx = _ref.rx,
		ry = _ref.ry;

		drawEllipse(ctx, cx, cy, rx, ry);
		return node;
		};

		var _default = R.curryN(2, renderEllipse);

		var _default = renderEllipse;
		exports.default = _default;

lib/primitives/renderGroup.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var renderGroup = function renderGroup() {
		return R.identity;
		var renderGroup = function renderGroup() {// noop
		};
		@@ -13,0 +8,0 @@

lib/primitives/renderImage.js

		@@ -5,13 +5,5 @@ "use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var _save = _interopRequireDefault(require("../operations/save"));

		var _restore = _interopRequireDefault(require("../operations/restore"));

		var _clipNode = _interopRequireDefault(require("../operations/clipNode"));
		@@ -21,46 +13,43 @@

		var drawImage = function drawImage(ctx) {
		return function (node) {
		var _node$style, _node$style2, _node$style3, _node$style4;
		var drawImage = function drawImage(ctx, node) {
		var _node$style, _node$style2, _node$style3, _node$style4;

		var _node$box = node.box,
		left = _node$box.left,
		top = _node$box.top;
		var opacity = (_node$style = node.style) === null \|\| _node$style === void 0 ? void 0 : _node$style.opacity;
		var objectFit = (_node$style2 = node.style) === null \|\| _node$style2 === void 0 ? void 0 : _node$style2.objectFit;
		var objectPositionX = (_node$style3 = node.style) === null \|\| _node$style3 === void 0 ? void 0 : _node$style3.objectPositionX;
		var objectPositionY = (_node$style4 = node.style) === null \|\| _node$style4 === void 0 ? void 0 : _node$style4.objectPositionY;
		var paddingTop = node.box.paddingTop \|\| 0;
		var paddingRight = node.box.paddingRight \|\| 0;
		var paddingBottom = node.box.paddingBottom \|\| 0;
		var paddingLeft = node.box.paddingLeft \|\| 0;
		var _node$box = node.box,
		left = _node$box.left,
		top = _node$box.top;
		var opacity = (_node$style = node.style) === null \|\| _node$style === void 0 ? void 0 : _node$style.opacity;
		var objectFit = (_node$style2 = node.style) === null \|\| _node$style2 === void 0 ? void 0 : _node$style2.objectFit;
		var objectPositionX = (_node$style3 = node.style) === null \|\| _node$style3 === void 0 ? void 0 : _node$style3.objectPositionX;
		var objectPositionY = (_node$style4 = node.style) === null \|\| _node$style4 === void 0 ? void 0 : _node$style4.objectPositionY;
		var paddingTop = node.box.paddingTop \|\| 0;
		var paddingRight = node.box.paddingRight \|\| 0;
		var paddingBottom = node.box.paddingBottom \|\| 0;
		var paddingLeft = node.box.paddingLeft \|\| 0;

		var _resolveObjectFit = (0, _resolveObjectFit2.default)(objectFit, node.box.width - paddingLeft - paddingRight, node.box.height - paddingTop - paddingBottom, node.image.width, node.image.height, objectPositionX, objectPositionY),
		width = _resolveObjectFit.width,
		height = _resolveObjectFit.height,
		xOffset = _resolveObjectFit.xOffset,
		yOffset = _resolveObjectFit.yOffset;
		var _resolveObjectFit = (0, _resolveObjectFit2.default)(objectFit, node.box.width - paddingLeft - paddingRight, node.box.height - paddingTop - paddingBottom, node.image.width, node.image.height, objectPositionX, objectPositionY),
		width = _resolveObjectFit.width,
		height = _resolveObjectFit.height,
		xOffset = _resolveObjectFit.xOffset,
		yOffset = _resolveObjectFit.yOffset;

		if (node.image.data) {
		if (width !== 0 && height !== 0) {
		ctx.fillOpacity(opacity \|\| 1).image(node.image.data, left + paddingLeft + xOffset, top + paddingTop + yOffset, {
		width: width,
		height: height
		});
		} else {
		console.warn("Image with src '" + node.props.src + "' skipped due to invalid dimensions");
		}
		if (node.image.data) {
		if (width !== 0 && height !== 0) {
		ctx.fillOpacity(opacity \|\| 1).image(node.image.data, left + paddingLeft + xOffset, top + paddingTop + yOffset, {
		width: width,
		height: height
		});
		} else {
		console.warn("Image with src '" + node.props.src + "' skipped due to invalid dimensions");
		}

		return node;
		};
		}
		};

		var renderImage = function renderImage(ctx, node) {
		R.compose((0, _restore.default)(ctx), drawImage(ctx), (0, _clipNode.default)(ctx), (0, _save.default)(ctx))(node);
		return node;
		ctx.save();
		(0, _clipNode.default)(ctx, node);
		drawImage(ctx, node);
		ctx.restore();
		};

		var _default = R.curryN(2, renderImage);

		var _default = renderImage;
		exports.default = _default;

lib/primitives/renderLine.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var renderLine = function renderLine(ctx, node) {
		var _ref = node.props \|\| {},
		x1 = _ref.x1,
		x2 = _ref.x2,
		y1 = _ref.y1,
		y2 = _ref.y2;

		var getProp = function getProp(p, v) {
		return R.path(['props', p], v);
		ctx.moveTo(x1, y1);
		ctx.lineTo(x2, y2);
		};

		var renderLine = function renderLine(ctx) {
		return function (node) {
		var x1 = getProp('x1', node);
		var y1 = getProp('y1', node);
		var x2 = getProp('x2', node);
		var y2 = getProp('y2', node);
		ctx.moveTo(x1, y1);
		ctx.lineTo(x2, y2);
		return node;
		};
		};

		var _default = renderLine;
		exports.default = _default;

lib/primitives/renderNode.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var P = _interopRequireWildcard(require("@react-pdf/primitives"));

		@@ -30,22 +30,4 @@ var _renderSvg = _interopRequireDefault(require("./renderSvg"));

		var _isSvg = _interopRequireDefault(require("../utils/isSvg"));

		var _isLink = _interopRequireDefault(require("../utils/isLink"));

		var _isPage = _interopRequireDefault(require("../utils/isPage"));

		var _isNote = _interopRequireDefault(require("../utils/isNote"));

		var _isText = _interopRequireDefault(require("../utils/isText"));

		var _isImage = _interopRequireDefault(require("../utils/isImage"));

		var _isCanvas = _interopRequireDefault(require("../utils/isCanvas"));

		var _save = _interopRequireDefault(require("../operations/save"));

		var _setLink = _interopRequireDefault(require("../operations/setLink"));

		var _restore = _interopRequireDefault(require("../operations/restore"));

		var _clipNode = _interopRequireDefault(require("../operations/clipNode"));
		@@ -57,28 +39,44 @@

		var shouldRenderChildren = function shouldRenderChildren(v) {
		return !(0, _isText.default)(v) && !(0, _isSvg.default)(v);
		var _renderFns;

		var isRecursiveNode = function isRecursiveNode(node) {
		return node.type !== P.Text && node.type !== P.Svg;
		};

		var isOverflowHidden = R.pathEq(['style', 'overflow'], 'hidden');
		var renderChildren = function renderChildren(ctx, node) {
		ctx.save();

		var renderChildren = function renderChildren(ctx) {
		return function (node) {
		(0, _save.default)(ctx, node);
		if (node.box) {
		ctx.translate(node.box.left, node.box.top);
		}

		if (node.box) {
		ctx.translate(node.box.left, node.box.top);
		}
		var children = node.children \|\| [];

		var children = node.children \|\| [];
		var renderChild = renderNode(ctx);
		children.forEach(renderChild);
		(0, _restore.default)(ctx, node);
		return node;
		var renderChild = function renderChild(child) {
		return renderNode(ctx, child);
		};

		children.forEach(renderChild);
		ctx.restore();
		};

		var renderNode = function renderNode(ctx) {
		return function (node) {
		return R.compose((0, _restore.default)(ctx), (0, _renderDebug.default)(ctx), (0, _setDestination.default)(ctx), R.when(shouldRenderChildren, renderChildren(ctx)), R.when(_isLink.default, (0, _setLink.default)(ctx)), R.cond([[_isText.default, (0, _renderText.default)(ctx)], [_isNote.default, (0, _renderNote.default)(ctx)], [_isImage.default, (0, _renderImage.default)(ctx)], [_isCanvas.default, (0, _renderCanvas.default)(ctx)], [_isSvg.default, (0, _renderSvg.default)(ctx)], [R.T, R.identity]]), (0, _renderBorders.default)(ctx), (0, _renderBackground.default)(ctx), (0, _transform.default)(ctx), R.when(isOverflowHidden, (0, _clipNode.default)(ctx)), (0, _save.default)(ctx), R.when(_isPage.default, (0, _renderPage.default)(ctx)))(node);
		};
		var renderFns = (_renderFns = {}, _renderFns[P.Text] = _renderText.default, _renderFns[P.Note] = _renderNote.default, _renderFns[P.Image] = _renderImage.default, _renderFns[P.Canvas] = _renderCanvas.default, _renderFns[P.Svg] = _renderSvg.default, _renderFns[P.Link] = _setLink.default, _renderFns);

		var renderNode = function renderNode(ctx, node) {
		var _node$style;

		var overflowHidden = ((_node$style = node.style) === null \|\| _node$style === void 0 ? void 0 : _node$style.overflow) === 'hidden';
		var shouldRenderChildren = isRecursiveNode(node);
		if (node.type === P.Page) (0, _renderPage.default)(ctx, node);
		ctx.save();
		if (overflowHidden) (0, _clipNode.default)(ctx, node);
		(0, _transform.default)(ctx, node);
		(0, _renderBackground.default)(ctx, node);
		(0, _renderBorders.default)(ctx, node);
		var renderFn = renderFns[node.type];
		if (renderFn) renderFn(ctx, node);
		if (shouldRenderChildren) renderChildren(ctx, node);
		(0, _setDestination.default)(ctx, node);
		(0, _renderDebug.default)(ctx, node);
		ctx.restore();
		};
		@@ -85,0 +83,0 @@

lib/primitives/renderNote.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var renderNote = function renderNote(ctx, node) {
		@@ -18,7 +14,5 @@ var _node$children;
		ctx.note(left, top, 0, 0, value);
		return node;
		};

		var _default = R.curryN(2, renderNote);

		var _default = renderNote;
		exports.default = _default;

lib/primitives/renderPage.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var renderPage = function renderPage(ctx, node) {
		@@ -18,7 +14,5 @@ var _node$box = node.box,
		});
		return node;
		};

		var _default = R.curryN(2, renderPage);

		var _default = renderPage;
		exports.default = _default;

lib/primitives/renderPath.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var renderPath = function renderPath(ctx, node) {
		var _node$props;

		var renderPath = function renderPath(ctx) {
		return R.tap(function (node) {
		var d = R.path(['props', 'd'], node);
		if (d) ctx.path(node.props.d);
		});
		var d = (_node$props = node.props) === null \|\| _node$props === void 0 ? void 0 : _node$props.d;
		if (d) ctx.path(node.props.d);
		};
		@@ -16,0 +12,0 @@

lib/primitives/renderPolygon.js

		@@ -5,22 +5,13 @@ "use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var _renderPolyline = _interopRequireDefault(require("./renderPolyline"));

		var closePath = function closePath(ctx) {
		return R.tap(function () {
		return ctx.closePath();
		});
		var renderPolygon = function renderPolygon(ctx, node) {
		(0, _renderPolyline.default)(ctx, node);
		ctx.closePath();
		};

		var renderPolygon = function renderPolygon(ctx) {
		return R.compose(closePath(ctx), (0, _renderPolyline.default)(ctx));
		};

		var _default = renderPolygon;
		exports.default = _default;

lib/primitives/renderPolyline.js

		@@ -5,20 +5,14 @@ "use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.drawPolyline = exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var _parsePoints = _interopRequireDefault(require("../svg/parsePoints"));

		var drawPolyline = function drawPolyline(ctx) {
		return function (points) {
		if (points.length > 0) {
		ctx.moveTo(points[0][0], points[0][1]);
		points.slice(1).forEach(function (p) {
		return ctx.lineTo(p[0], p[1]);
		});
		}
		};
		var drawPolyline = function drawPolyline(ctx, points) {
		if (points.length > 0) {
		ctx.moveTo(points[0][0], points[0][1]);
		points.slice(1).forEach(function (p) {
		return ctx.lineTo(p[0], p[1]);
		});
		}
		};
		@@ -28,4 +22,5 @@

		var renderPolyline = function renderPolyline(ctx) {
		return R.tap(R.compose(drawPolyline(ctx), _parsePoints.default, R.pathOr('', ['props', 'points'])));
		var renderPolyline = function renderPolyline(ctx, node) {
		var points = (0, _parsePoints.default)(node.props.points \|\| '');
		drawPolyline(ctx, points);
		};
		@@ -32,0 +27,0 @@

lib/primitives/renderRect.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var KAPPA = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);

		var getProp = function getProp(d, p, v) {
		return R.pathOr(d, ['props', p], v);
		};
		var renderRect = function renderRect(ctx, node) {
		var _node$props, _node$props2, _node$props3, _node$props4, _node$props5, _node$props6;

		var renderRect = function renderRect(ctx) {
		return function (node) {
		var x = getProp(0, 'x', node);
		var y = getProp(0, 'y', node);
		var rx = getProp(0, 'rx', node);
		var ry = getProp(0, 'ry', node);
		var width = getProp(0, 'width', node);
		var height = getProp(0, 'height', node);
		if (!width \|\| !height) return node;
		var x = ((_node$props = node.props) === null \|\| _node$props === void 0 ? void 0 : _node$props.x) \|\| 0;
		var y = ((_node$props2 = node.props) === null \|\| _node$props2 === void 0 ? void 0 : _node$props2.y) \|\| 0;
		var rx = ((_node$props3 = node.props) === null \|\| _node$props3 === void 0 ? void 0 : _node$props3.rx) \|\| 0;
		var ry = ((_node$props4 = node.props) === null \|\| _node$props4 === void 0 ? void 0 : _node$props4.ry) \|\| 0;
		var width = ((_node$props5 = node.props) === null \|\| _node$props5 === void 0 ? void 0 : _node$props5.width) \|\| 0;
		var height = ((_node$props6 = node.props) === null \|\| _node$props6 === void 0 ? void 0 : _node$props6.height) \|\| 0;
		if (!width \|\| !height) return;

		if (rx && ry) {
		var krx = rx * KAPPA;
		var kry = ry * KAPPA;
		ctx.moveTo(x + rx, y);
		ctx.lineTo(x - rx + width, y);
		ctx.bezierCurveTo(x - rx + width + krx, y, x + width, y + ry - kry, x + width, y + ry);
		ctx.lineTo(x + width, y + height - ry);
		ctx.bezierCurveTo(x + width, y + height - ry + kry, x - rx + width + krx, y + height, x - rx + width, y + height);
		ctx.lineTo(x + rx, y + height);
		ctx.bezierCurveTo(x + rx - krx, y + height, x, y + height - ry + kry, x, y + height - ry);
		ctx.lineTo(x, y + ry);
		ctx.bezierCurveTo(x, y + ry - kry, x + rx - krx, y, x + rx, y);
		} else {
		ctx.moveTo(x, y);
		ctx.lineTo(x + width, y);
		ctx.lineTo(x + width, y + height);
		ctx.lineTo(x, y + height);
		}
		if (rx && ry) {
		var krx = rx * KAPPA;
		var kry = ry * KAPPA;
		ctx.moveTo(x + rx, y);
		ctx.lineTo(x - rx + width, y);
		ctx.bezierCurveTo(x - rx + width + krx, y, x + width, y + ry - kry, x + width, y + ry);
		ctx.lineTo(x + width, y + height - ry);
		ctx.bezierCurveTo(x + width, y + height - ry + kry, x - rx + width + krx, y + height, x - rx + width, y + height);
		ctx.lineTo(x + rx, y + height);
		ctx.bezierCurveTo(x + rx - krx, y + height, x, y + height - ry + kry, x, y + height - ry);
		ctx.lineTo(x, y + ry);
		ctx.bezierCurveTo(x, y + ry - kry, x + rx - krx, y, x + rx, y);
		} else {
		ctx.moveTo(x, y);
		ctx.lineTo(x + width, y);
		ctx.lineTo(x + width, y + height);
		ctx.lineTo(x, y + height);
		}

		ctx.closePath();
		return node;
		};
		ctx.closePath();
		};
		@@ -49,0 +39,0 @@

484

lib/primitives/renderSvg.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var P = _interopRequireWildcard(require("@react-pdf/primitives"));

		var _fns = require("@react-pdf/fns");

		var _renderPath = _interopRequireDefault(require("./renderPath"));
		@@ -34,316 +34,302 @@

		var _isPath = _interopRequireDefault(require("../utils/isPath"));
		var _clipNode = _interopRequireDefault(require("../operations/clipNode"));

		var _isText = _interopRequireDefault(require("../utils/isText"));
		var _transform = _interopRequireDefault(require("../operations/transform"));

		var _isRect = _interopRequireDefault(require("../utils/isRect"));
		var _getBoundingBox = _interopRequireDefault(require("../svg/getBoundingBox"));

		var _isLine = _interopRequireDefault(require("../utils/isLine"));
		var _renderFns;

		var _isTspan = _interopRequireDefault(require("../utils/isTspan"));
		var setStrokeWidth = function setStrokeWidth(ctx, node) {
		var _node$props;

		var _isImage = _interopRequireDefault(require("../utils/isImage"));
		var lineWidth = ((_node$props = node.props) === null \|\| _node$props === void 0 ? void 0 : _node$props.strokeWidth) \|\| 0;
		if (lineWidth) ctx.lineWidth(lineWidth);
		};

		var _isGroup = _interopRequireDefault(require("../utils/isGroup"));
		var setStrokeColor = function setStrokeColor(ctx, node) {
		var _node$props2;

		var _isCircle = _interopRequireDefault(require("../utils/isCircle"));
		var strokeColor = ((_node$props2 = node.props) === null \|\| _node$props2 === void 0 ? void 0 : _node$props2.stroke) \|\| null;
		if (strokeColor) ctx.strokeColor(strokeColor);
		};

		var _isEllipse = _interopRequireDefault(require("../utils/isEllipse"));
		var setOpacity = function setOpacity(ctx, node) {
		var _node$props3;

		var _isPolygon = _interopRequireDefault(require("../utils/isPolygon"));
		var opacity = ((_node$props3 = node.props) === null \|\| _node$props3 === void 0 ? void 0 : _node$props3.opacity) \|\| null;
		if (!(0, _fns.isNil)(opacity)) ctx.opacity(opacity);
		};

		var _isPolyline = _interopRequireDefault(require("../utils/isPolyline"));
		var setFillOpacity = function setFillOpacity(ctx, node) {
		var _node$props4;

		var _isTextInstance = _interopRequireDefault(require("../utils/isTextInstance"));
		var fillOpacity = ((_node$props4 = node.props) === null \|\| _node$props4 === void 0 ? void 0 : _node$props4.fillOpacity) \|\| null;
		if (!(0, _fns.isNil)(fillOpacity)) ctx.fillOpacity(fillOpacity);
		};

		var _save = _interopRequireDefault(require("../operations/save"));
		var setStrokeOpacity = function setStrokeOpacity(ctx, node) {
		var _node$props5;

		var _restore = _interopRequireDefault(require("../operations/restore"));
		var strokeOpacity = ((_node$props5 = node.props) === null \|\| _node$props5 === void 0 ? void 0 : _node$props5.strokeOpacity) \|\| null;
		if (!(0, _fns.isNil)(strokeOpacity)) ctx.strokeOpacity(strokeOpacity);
		};

		var _clipNode = _interopRequireDefault(require("../operations/clipNode"));
		var setLineJoin = function setLineJoin(ctx, node) {
		var _node$props6;

		var _transform = _interopRequireDefault(require("../operations/transform"));
		var lineJoin = ((_node$props6 = node.props) === null \|\| _node$props6 === void 0 ? void 0 : _node$props6.strokeLinejoin) \|\| null;
		if (lineJoin) ctx.lineJoin(lineJoin);
		};

		var _getBoundingBox = _interopRequireDefault(require("../svg/getBoundingBox"));
		var setLineCap = function setLineCap(ctx, node) {
		var _node$props7;

		var warnUnsupportedNode = R.tap(function (node) {
		console.warn("SVG node of type " + node.type + " is not currenty supported");
		});

		var getProp = function getProp(d, p, v) {
		return R.pathOr(d, ['props', p], v);
		var lineCap = ((_node$props7 = node.props) === null \|\| _node$props7 === void 0 ? void 0 : _node$props7.strokeLinecap) \|\| null;
		if (lineCap) ctx.lineCap(lineCap);
		};

		var setStrokeWidth = function setStrokeWidth(ctx) {
		return function (node) {
		var lineWidth = getProp(0, 'strokeWidth', node);
		if (lineWidth) ctx.lineWidth(lineWidth);
		return node;
		};
		};
		var setLineDash = function setLineDash(ctx, node) {
		var _node$props8;

		var setStrokeColor = function setStrokeColor(ctx) {
		return function (node) {
		var strokeColor = getProp(null, 'stroke', node);
		if (strokeColor) ctx.strokeColor(strokeColor);
		return node;
		};
		var value = ((_node$props8 = node.props) === null \|\| _node$props8 === void 0 ? void 0 : _node$props8.strokeDasharray) \|\| null;
		if (value) ctx.dash(value.split(','));
		};

		var setOpacity = function setOpacity(ctx) {
		return function (node) {
		var opacity = getProp(null, 'opacity', node);
		if (!R.isNil(opacity)) ctx.opacity(opacity);
		return node;
		};
		};
		var hasLinearGradientFill = function hasLinearGradientFill(node) {
		var _node$props9, _node$props9$fill;

		var setFillOpacity = function setFillOpacity(ctx) {
		return function (node) {
		var fillOpacity = getProp(null, 'fillOpacity', node);
		if (!R.isNil(fillOpacity)) ctx.fillOpacity(fillOpacity);
		return node;
		};
		return ((_node$props9 = node.props) === null \|\| _node$props9 === void 0 ? void 0 : (_node$props9$fill = _node$props9.fill) === null \|\| _node$props9$fill === void 0 ? void 0 : _node$props9$fill.type) === P.LinearGradient;
		};

		var setStrokeOpacity = function setStrokeOpacity(ctx) {
		return function (node) {
		var strokeOpacity = getProp(null, 'strokeOpacity', node);
		if (!R.isNil(strokeOpacity)) ctx.strokeOpacity(strokeOpacity);
		return node;
		};
		};
		var hasRadialGradientFill = function hasRadialGradientFill(node) {
		var _node$props10, _node$props10$fill;

		var setLineJoin = function setLineJoin(ctx) {
		return function (node) {
		var lineJoin = getProp(null, 'strokeLinejoin', node);
		if (lineJoin) ctx.lineJoin(lineJoin);
		return node;
		};
		};
		return ((_node$props10 = node.props) === null \|\| _node$props10 === void 0 ? void 0 : (_node$props10$fill = _node$props10.fill) === null \|\| _node$props10$fill === void 0 ? void 0 : _node$props10$fill.type) === P.RadialGradient;
		}; // Math simplified from https://github.com/devongovett/svgkit/blob/master/src/elements/SVGGradient.js#L104

		var setLineCap = function setLineCap(ctx) {
		return function (node) {
		var lineCap = getProp(null, 'strokeLinecap', node);
		if (lineCap) ctx.lineCap(lineCap);
		return node;
		};
		};

		var setLineDash = function setLineDash(ctx) {
		return function (node) {
		var value = getProp(null, 'strokeDasharray', node);
		if (value) ctx.dash(R.split(',', value));
		return node;
		};
		};
		var setLinearGradientFill = function setLinearGradientFill(ctx, node) {
		var _node$props11;

		var hasLinearGradientFill = R.pathEq(['props', 'fill', 'type'], P.LinearGradient);
		var hasRadialGradientFill = R.pathEq(['props', 'fill', 'type'], P.RadialGradient); // Math simplified from https://github.com/devongovett/svgkit/blob/master/src/elements/SVGGradient.js#L104

		var setLinearGradientFill = function setLinearGradientFill(ctx) {
		return R.tap(function (node) {
		var bbox = (0, _getBoundingBox.default)(node);
		var gradient = getProp(null, 'fill', node);
		var x1 = R.pathOr(0, ['props', 'x1'], gradient);
		var y1 = R.pathOr(0, ['props', 'y1'], gradient);
		var x2 = R.pathOr(1, ['props', 'x2'], gradient);
		var y2 = R.pathOr(0, ['props', 'y2'], gradient);
		var m0 = bbox[2] - bbox[0];
		var m3 = bbox[3] - bbox[1];
		var m4 = bbox[0];
		var m5 = bbox[1];
		var gx1 = m0 * x1 + m4;
		var gy1 = m3 * y1 + m5;
		var gx2 = m0 * x2 + m4;
		var gy2 = m3 * y2 + m5;
		var grad = ctx.linearGradient(gx1, gy1, gx2, gy2);
		gradient.children.forEach(function (stop) {
		grad.stop(stop.props.offset, stop.props.stopColor, stop.props.stopOpacity);
		});
		ctx.fill(grad);
		var bbox = (0, _getBoundingBox.default)(node);
		var gradient = ((_node$props11 = node.props) === null \|\| _node$props11 === void 0 ? void 0 : _node$props11.fill) \|\| null;
		var x1 = gradient.props.x1 \|\| 0;
		var y1 = gradient.props.y1 \|\| 0;
		var x2 = gradient.props.x2 \|\| 1;
		var y2 = gradient.props.y2 \|\| 0;
		var m0 = bbox[2] - bbox[0];
		var m3 = bbox[3] - bbox[1];
		var m4 = bbox[0];
		var m5 = bbox[1];
		var gx1 = m0 * x1 + m4;
		var gy1 = m3 * y1 + m5;
		var gx2 = m0 * x2 + m4;
		var gy2 = m3 * y2 + m5;
		var grad = ctx.linearGradient(gx1, gy1, gx2, gy2);
		gradient.children.forEach(function (stop) {
		grad.stop(stop.props.offset, stop.props.stopColor, stop.props.stopOpacity);
		});
		ctx.fill(grad);
		}; // Math simplified from https://github.com/devongovett/svgkit/blob/master/src/elements/SVGGradient.js#L155


		var setRadialGradientFill = function setRadialGradientFill(ctx) {
		return R.tap(function (node) {
		var bbox = (0, _getBoundingBox.default)(node);
		var gradient = getProp(null, 'fill', node);
		var cx = R.pathOr(0.5, ['props', 'cx'], gradient);
		var cy = R.pathOr(0.5, ['props', 'cy'], gradient);
		var fx = R.pathOr(cx, ['props', 'fx'], gradient);
		var fy = R.pathOr(cy, ['props', 'fy'], gradient);
		var r = R.pathOr(0.5, ['props', 'r'], gradient);
		var m0 = bbox[2] - bbox[0];
		var m3 = bbox[3] - bbox[1];
		var m4 = bbox[0];
		var m5 = bbox[1];
		var gr = r * m0;
		var gcx = m0 * cx + m4;
		var gcy = m3 * cy + m5;
		var gfx = m0 * fx + m4;
		var gfy = m3 * fy + m5;
		var grad = ctx.radialGradient(gfx, gfy, 0, gcx, gcy, gr);
		gradient.children.forEach(function (stop) {
		grad.stop(stop.props.offset, stop.props.stopColor, stop.props.stopOpacity);
		});
		ctx.fill(grad);
		var setRadialGradientFill = function setRadialGradientFill(ctx, node) {
		var _node$props12;

		var bbox = (0, _getBoundingBox.default)(node);
		var gradient = ((_node$props12 = node.props) === null \|\| _node$props12 === void 0 ? void 0 : _node$props12.fill) \|\| null;
		var cx = gradient.props.cx \|\| 0.5;
		var cy = gradient.props.cy \|\| 0.5;
		var fx = gradient.props.fx \|\| cx;
		var fy = gradient.props.fy \|\| cy;
		var r = gradient.props.r \|\| 0.5;
		var m0 = bbox[2] - bbox[0];
		var m3 = bbox[3] - bbox[1];
		var m4 = bbox[0];
		var m5 = bbox[1];
		var gr = r * m0;
		var gcx = m0 * cx + m4;
		var gcy = m3 * cy + m5;
		var gfx = m0 * fx + m4;
		var gfy = m3 * fy + m5;
		var grad = ctx.radialGradient(gfx, gfy, 0, gcx, gcy, gr);
		gradient.children.forEach(function (stop) {
		grad.stop(stop.props.offset, stop.props.stopColor, stop.props.stopOpacity);
		});
		ctx.fill(grad);
		};

		var setFillColor = function setFillColor(ctx) {
		return R.tap(function (node) {
		var fillColor = getProp(null, 'fill', node);
		if (fillColor) ctx.fillColor(fillColor);
		});
		var setFillColor = function setFillColor(ctx, node) {
		var _node$props13;

		var fillColor = ((_node$props13 = node.props) === null \|\| _node$props13 === void 0 ? void 0 : _node$props13.fill) \|\| null;
		if (fillColor) ctx.fillColor(fillColor);
		};

		var setFill = function setFill(ctx) {
		return R.cond([[hasLinearGradientFill, setLinearGradientFill(ctx)], [hasRadialGradientFill, setRadialGradientFill(ctx)], [R.T, setFillColor(ctx)]]);
		var setFill = function setFill(ctx, node) {
		if (hasLinearGradientFill(node)) return setLinearGradientFill(ctx, node);
		if (hasRadialGradientFill(node)) return setRadialGradientFill(ctx, node);
		return setFillColor(ctx, node);
		};

		var draw = function draw(ctx) {
		return function (node) {
		var props = R.propOr({}, 'props', node);
		var draw = function draw(ctx, node) {
		var props = node.props \|\| {};

		if (props.fill && props.stroke) {
		ctx.fillAndStroke(props.fillRule);
		} else if (props.fill) {
		ctx.fill(props.fillRule);
		} else if (props.stroke) {
		ctx.stroke();
		} else {
		ctx.save();
		ctx.opacity(0);
		ctx.fill(null);
		ctx.restore();
		}

		return node;
		};
		if (props.fill && props.stroke) {
		ctx.fillAndStroke(props.fillRule);
		} else if (props.fill) {
		ctx.fill(props.fillRule);
		} else if (props.stroke) {
		ctx.stroke();
		} else {
		ctx.save();
		ctx.opacity(0);
		ctx.fill(null);
		ctx.restore();
		}
		};

		var renderNode = function renderNode(ctx) {
		return R.cond([[_isTspan.default, R.identity], [_isTextInstance.default, R.identity], [_isPath.default, (0, _renderPath.default)(ctx)], [_isRect.default, (0, _renderRect.default)(ctx)], [_isLine.default, (0, _renderLine.default)(ctx)], [_isGroup.default, (0, _renderGroup.default)(ctx)], [_isText.default, (0, _renderSvgText.default)(ctx)], [_isCircle.default, (0, _renderCircle.default)(ctx)], [_isImage.default, (0, _renderSvgImage.default)(ctx)], [_isEllipse.default, (0, _renderEllipse.default)(ctx)], [_isPolygon.default, (0, _renderPolygon.default)(ctx)], [_isPolyline.default, (0, _renderPolyline.default)(ctx)], [R.T, warnUnsupportedNode]]);
		var noop = function noop() {};

		var renderFns = (_renderFns = {}, _renderFns[P.Tspan] = noop, _renderFns[P.TextInstance] = noop, _renderFns[P.Path] = _renderPath.default, _renderFns[P.Rect] = _renderRect.default, _renderFns[P.Line] = _renderLine.default, _renderFns[P.G] = _renderGroup.default, _renderFns[P.Text] = _renderSvgText.default, _renderFns[P.Circle] = _renderCircle.default, _renderFns[P.Image] = _renderSvgImage.default, _renderFns[P.Ellipse] = _renderEllipse.default, _renderFns[P.Polygon] = _renderPolygon.default, _renderFns[P.Polyline] = _renderPolyline.default, _renderFns);

		var renderNode = function renderNode(ctx, node) {
		var renderFn = renderFns[node.type];

		if (renderFns) {
		renderFn(ctx, node);
		} else {
		console.warn("SVG node of type " + node.type + " is not currenty supported");
		}
		};

		var drawNode = function drawNode(ctx) {
		return R.compose(draw(ctx), renderNode(ctx), (0, _transform.default)(ctx), setOpacity(ctx), setFillOpacity(ctx), setStrokeOpacity(ctx), setFill(ctx), setStrokeColor(ctx), setStrokeWidth(ctx), setLineJoin(ctx), setLineDash(ctx), setLineCap(ctx));
		var drawNode = function drawNode(ctx, node) {
		setLineCap(ctx, node);
		setLineDash(ctx, node);
		setLineJoin(ctx, node);
		setStrokeWidth(ctx, node);
		setStrokeColor(ctx, node);
		setFill(ctx, node);
		setStrokeOpacity(ctx, node);
		setFillOpacity(ctx, node);
		setOpacity(ctx, node);
		(0, _transform.default)(ctx, node);
		renderNode(ctx, node);
		draw(ctx, node);
		};

		var clipPath = function clipPath(ctx) {
		return function (node) {
		var value = R.path(['props', 'clipPath'], node);
		var clipPath = function clipPath(ctx, node) {
		var _node$props14;

		if (value) {
		R.compose(function () {
		return ctx.clip();
		}, R.forEach(renderNode(ctx)), R.propOr([], 'children'))(value);
		}
		var value = (_node$props14 = node.props) === null \|\| _node$props14 === void 0 ? void 0 : _node$props14.clipPath;

		return node;
		};
		if (value) {
		var children = value.children \|\| [];
		children.forEach(function (child) {
		return renderNode(ctx, child);
		});
		ctx.clip();
		}
		};

		var drawChildren = function drawChildren(ctx) {
		return function (node) {
		return R.compose(R.map(R.compose((0, _restore.default)(ctx), drawChildren(ctx), drawNode(ctx), clipPath(ctx), (0, _save.default)(ctx))), R.propOr([], 'children'))(node);
		};
		var drawChildren = function drawChildren(ctx, node) {
		var children = node.children \|\| [];
		children.forEach(function (child) {
		ctx.save();
		clipPath(ctx, child);
		drawNode(ctx, child);
		drawChildren(ctx, child);
		ctx.restore();
		});
		};

		var defaultsZero = R.pathOr(0);
		var resolveAspectRatio = function resolveAspectRatio(ctx, node) {
		var _node$box = node.box,
		width = _node$box.width,
		height = _node$box.height;
		var _node$props15 = node.props,
		viewBox = _node$props15.viewBox,
		_node$props15$preserv = _node$props15.preserveAspectRatio,
		preserveAspectRatio = _node$props15$preserv === void 0 ? {} : _node$props15$preserv;
		var _preserveAspectRatio$ = preserveAspectRatio.meetOrSlice,
		meetOrSlice = _preserveAspectRatio$ === void 0 ? 'meet' : _preserveAspectRatio$,
		_preserveAspectRatio$2 = preserveAspectRatio.align,
		align = _preserveAspectRatio$2 === void 0 ? 'xMidYMid' : _preserveAspectRatio$2;
		if (viewBox == null \|\| width == null \|\| height == null) return;
		var x = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.minX) \|\| 0;
		var y = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.minY) \|\| 0;
		var logicalWidth = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.maxX) \|\| width;
		var logicalHeight = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.maxY) \|\| height;
		var logicalRatio = logicalWidth / logicalHeight;
		var physicalRatio = width / height;
		var scaleX = width / logicalWidth;
		var scaleY = height / logicalHeight;

		var resolveAspectRatio = function resolveAspectRatio(ctx) {
		return function (node) {
		var _node$box = node.box,
		width = _node$box.width,
		height = _node$box.height;
		var _node$props = node.props,
		viewBox = _node$props.viewBox,
		_node$props$preserveA = _node$props.preserveAspectRatio,
		preserveAspectRatio = _node$props$preserveA === void 0 ? {} : _node$props$preserveA;
		var _preserveAspectRatio$ = preserveAspectRatio.meetOrSlice,
		meetOrSlice = _preserveAspectRatio$ === void 0 ? 'meet' : _preserveAspectRatio$,
		_preserveAspectRatio$2 = preserveAspectRatio.align,
		align = _preserveAspectRatio$2 === void 0 ? 'xMidYMid' : _preserveAspectRatio$2;
		if (viewBox == null \|\| width == null \|\| height == null) return node;
		var x = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.minX) \|\| 0;
		var y = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.minY) \|\| 0;
		var logicalWidth = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.maxX) \|\| width;
		var logicalHeight = (viewBox === null \|\| viewBox === void 0 ? void 0 : viewBox.maxY) \|\| height;
		var logicalRatio = logicalWidth / logicalHeight;
		var physicalRatio = width / height;
		var scaleX = width / logicalWidth;
		var scaleY = height / logicalHeight;
		if (align === 'none') {
		ctx.scale(scaleX, scaleY);
		ctx.translate(-x, -y);
		return;
		}

		if (align === 'none') {
		ctx.scale(scaleX, scaleY);
		ctx.translate(-x, -y);
		return node;
		}
		if (logicalRatio < physicalRatio && meetOrSlice === 'meet' \|\| logicalRatio >= physicalRatio && meetOrSlice === 'slice') {
		ctx.scale(scaleY, scaleY);

		if (logicalRatio < physicalRatio && meetOrSlice === 'meet' \|\| logicalRatio >= physicalRatio && meetOrSlice === 'slice') {
		ctx.scale(scaleY, scaleY);
		switch (align) {
		case 'xMinYMin':
		case 'xMinYMid':
		case 'xMinYMax':
		ctx.translate(-x, -y);
		break;

		switch (align) {
		case 'xMinYMin':
		case 'xMinYMid':
		case 'xMinYMax':
		ctx.translate(-x, -y);
		break;
		case 'xMidYMin':
		case 'xMidYMid':
		case 'xMidYMax':
		ctx.translate(-x - (logicalWidth - width * logicalHeight / height) / 2, -y);
		break;

		case 'xMidYMin':
		case 'xMidYMid':
		case 'xMidYMax':
		ctx.translate(-x - (logicalWidth - width * logicalHeight / height) / 2, -y);
		break;
		default:
		ctx.translate(-x - (logicalWidth - width * logicalHeight / height), -y);
		}
		} else {
		ctx.scale(scaleX, scaleX);

		default:
		ctx.translate(-x - (logicalWidth - width * logicalHeight / height), -y);
		}
		} else {
		ctx.scale(scaleX, scaleX);
		switch (align) {
		case 'xMinYMin':
		case 'xMidYMin':
		case 'xMaxYMin':
		ctx.translate(-x, -y);
		break;

		switch (align) {
		case 'xMinYMin':
		case 'xMidYMin':
		case 'xMaxYMin':
		ctx.translate(-x, -y);
		break;
		case 'xMinYMid':
		case 'xMidYMid':
		case 'xMaxYMid':
		ctx.translate(-x, -y - (logicalHeight - height * logicalWidth / width) / 2);
		break;

		case 'xMinYMid':
		case 'xMidYMid':
		case 'xMaxYMid':
		ctx.translate(-x, -y - (logicalHeight - height * logicalWidth / width) / 2);
		break;

		default:
		ctx.translate(-x, -y - (logicalHeight - height * logicalWidth / width));
		}
		default:
		ctx.translate(-x, -y - (logicalHeight - height * logicalWidth / width));
		}

		return node;
		};
		}
		};

		var moveToOrigin = function moveToOrigin(ctx) {
		return function (node) {
		var _node$box2 = node.box,
		top = _node$box2.top,
		left = _node$box2.left;
		var paddingLeft = defaultsZero('paddingLeft', node.box);
		var paddingTop = defaultsZero('paddingTop', node.box);
		ctx.translate(left + paddingLeft, top + paddingTop);
		return node;
		};
		var moveToOrigin = function moveToOrigin(ctx, node) {
		var _node$box2 = node.box,
		top = _node$box2.top,
		left = _node$box2.left;
		var paddingLeft = node.box.paddingLeft \|\| 0;
		var paddingTop = node.box.paddingTop \|\| 0;
		ctx.translate(left + paddingLeft, top + paddingTop);
		};

		var renderSvg = function renderSvg(ctx, node) {
		R.compose((0, _restore.default)(ctx), drawChildren(ctx), resolveAspectRatio(ctx), moveToOrigin(ctx), (0, _clipNode.default)(ctx), (0, _save.default)(ctx))(node);
		return node;
		ctx.save();
		(0, _clipNode.default)(ctx, node);
		moveToOrigin(ctx, node);
		resolveAspectRatio(ctx, node);
		drawChildren(ctx, node);
		ctx.restore();
		};

		var _default = R.curryN(2, renderSvg);

		var _default = renderSvg;
		exports.default = _default;

lib/primitives/renderSvgImage.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var renderImage = function renderImage(ctx, node) {
		if (!node.image.data) return;
		var _node$props = node.props,
		x = _node$props.x,
		y = _node$props.y;
		var _node$style = node.style,
		width = _node$style.width,
		height = _node$style.height,
		opacity = _node$style.opacity;
		var paddingTop = node.box.paddingLeft \|\| 0;
		var paddingLeft = node.box.paddingLeft \|\| 0;

		var _save = _interopRequireDefault(require("../operations/save"));
		if (width === 0 \|\| height === 0) {
		console.warn("Image with src '" + node.props.href + "' skipped due to invalid dimensions");
		return;
		}

		var _restore = _interopRequireDefault(require("../operations/restore"));

		var drawImage = function drawImage(ctx) {
		return function (node) {
		var _node$props = node.props,
		x = _node$props.x,
		y = _node$props.y;
		var _node$style = node.style,
		width = _node$style.width,
		height = _node$style.height,
		opacity = _node$style.opacity;
		var paddingTop = node.box.paddingLeft \|\| 0;
		var paddingLeft = node.box.paddingLeft \|\| 0;

		if (node.image.data) {
		if (width !== 0 && height !== 0) {
		ctx.fillOpacity(opacity \|\| 1).image(node.image.data, x + paddingLeft, y + paddingTop, {
		width: width,
		height: height
		});
		} else {
		console.warn("Image with src '" + node.props.href + "' skipped due to invalid dimensions");
		}
		}

		return node;
		};
		ctx.save();
		ctx.fillOpacity(opacity \|\| 1).image(node.image.data, x + paddingLeft, y + paddingTop, {
		width: width,
		height: height
		});
		ctx.restore();
		};

		var renderImage = function renderImage(ctx, node) {
		R.compose((0, _restore.default)(ctx), drawImage(ctx), (0, _save.default)(ctx))(node);
		return node;
		};

		var _default = R.curryN(2, renderImage);

		var _default = renderImage;
		exports.default = _default;

lib/primitives/renderSvgText.js

		@@ -5,9 +5,5 @@ "use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));

		var _advanceWidth = _interopRequireDefault(require("@react-pdf/textkit/lib/run/advanceWidth"));
		@@ -58,7 +54,9 @@
		var renderSpan = function renderSpan(ctx, line, textAnchor, dominantBaseline) {
		var _line$box, _line$box2, _line$runs$, _line$runs$2, _line$runs$2$attribut;

		ctx.save();
		var x = R.pathOr(0, ['box', 'x'], line);
		var y = R.pathOr(0, ['box', 'y'], line);
		var font = R.pathOr(1, ['runs', 0, 'attributes', 'font'], line);
		var scale = R.pathOr(1, ['runs', 0, 'attributes', 'scale'], line);
		var x = ((_line$box = line.box) === null \|\| _line$box === void 0 ? void 0 : _line$box.x) \|\| 0;
		var y = ((_line$box2 = line.box) === null \|\| _line$box2 === void 0 ? void 0 : _line$box2.y) \|\| 0;
		var font = (_line$runs$ = line.runs[0]) === null \|\| _line$runs$ === void 0 ? void 0 : _line$runs$.attributes.font;
		var scale = ((_line$runs$2 = line.runs[0]) === null \|\| _line$runs$2 === void 0 ? void 0 : (_line$runs$2$attribut = _line$runs$2.attributes) === null \|\| _line$runs$2$attribut === void 0 ? void 0 : _line$runs$2$attribut.scale) \|\| 1;
		var width = (0, _advanceWidth2.default)(line);
		@@ -120,9 +118,6 @@ var ascent = font.ascent * scale;

		var renderSvgText = function renderSvgText(ctx) {
		return function (node) {
		node.children.forEach(function (span) {
		return renderSpan(ctx, span.lines[0], span.props.textAnchor, span.props.dominantBaseline);
		});
		return node;
		};
		var renderSvgText = function renderSvgText(ctx, node) {
		node.children.forEach(function (span) {
		return renderSpan(ctx, span.lines[0], span.props.textAnchor, span.props.dominantBaseline);
		});
		};
		@@ -129,0 +124,0 @@

lib/primitives/renderText.js

		@@ -5,8 +5,6 @@ "use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var _fns = require("@react-pdf/fns");

		@@ -77,3 +75,3 @@ var _height = _interopRequireDefault(require("@react-pdf/textkit/lib/run/height"));
		var color = (0, _parseColor.default)(run.attributes.color);
		var opacity = R.defaultTo(color.opacity, run.attributes.opacity);
		var opacity = (0, _fns.isNil)(run.attributes.opacity) ? color.opacity : run.attributes.opacity;
		var height = (0, _height.default)(run);
		@@ -226,2 +224,4 @@ var descent = (0, _descent.default)(run);
		var renderText = function renderText(ctx, node) {
		var _node$box2, _node$box3;

		var _node$box = node.box,
		@@ -231,4 +231,4 @@ top = _node$box.top,
		var blocks = [node.lines];
		var paddingTop = R.pathOr(0, ['box', 'paddingTop'], node);
		var paddingLeft = R.pathOr(0, ['box', 'paddingLeft'], node);
		var paddingTop = ((_node$box2 = node.box) === null \|\| _node$box2 === void 0 ? void 0 : _node$box2.paddingTop) \|\| 0;
		var paddingLeft = ((_node$box3 = node.box) === null \|\| _node$box3 === void 0 ? void 0 : _node$box3.paddingLeft) \|\| 0;
		var initialY = node.lines[0] ? node.lines[0].box.y : 0;
		@@ -242,7 +242,5 @@ var offsetX = node.alignOffset \|\| 0;
		ctx.restore();
		return node;
		};

		var _default = R.curryN(2, renderText);

		var _default = renderText;
		exports.default = _default;

lib/svg/getBoundingBox.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var P = _interopRequireWildcard(require("@react-pdf/primitives"));

		@@ -18,21 +18,11 @@ var _absSvgPath = _interopRequireDefault(require("abs-svg-path"));

		var _isRect = _interopRequireDefault(require("../utils/isRect"));
		var _parsePoints = _interopRequireDefault(require("./parsePoints"));

		var _isLine = _interopRequireDefault(require("../utils/isLine"));
		var _boundingBoxFns;

		var _isPath = _interopRequireDefault(require("../utils/isPath"));

		var _isCircle = _interopRequireDefault(require("../utils/isCircle"));

		var _isPolygon = _interopRequireDefault(require("../utils/isPolygon"));

		var _isEllipse = _interopRequireDefault(require("../utils/isEllipse"));

		var _isPolyline = _interopRequireDefault(require("../utils/isPolyline"));

		var _parsePoints = _interopRequireDefault(require("./parsePoints"));

		// From https://github.com/dy/svg-path-bounds/blob/master/index.js
		var getPathBoundingBox = function getPathBoundingBox(node) {
		var path = R.compose(_normalizeSvgPath.default, _absSvgPath.default, _parseSvgPath.default, R.pathOr('', ['props', 'd']))(node);
		var _node$props;

		var path = (0, _normalizeSvgPath.default)((0, _absSvgPath.default)((0, _parseSvgPath.default)(((_node$props = node.props) === null \|\| _node$props === void 0 ? void 0 : _node$props.d) \|\| '')));
		if (!path.length) return [0, 0, 0, 0];
		@@ -56,5 +46,7 @@ var bounds = [Infinity, Infinity, -Infinity, -Infinity];
		var getCircleBoundingBox = function getCircleBoundingBox(node) {
		var r = R.pathOr(0, ['props', 'r'], node);
		var cx = R.pathOr(0, ['props', 'cx'], node);
		var cy = R.pathOr(0, ['props', 'cy'], node);
		var _node$props2, _node$props3, _node$props4;

		var r = ((_node$props2 = node.props) === null \|\| _node$props2 === void 0 ? void 0 : _node$props2.r) \|\| 0;
		var cx = ((_node$props3 = node.props) === null \|\| _node$props3 === void 0 ? void 0 : _node$props3.cx) \|\| 0;
		var cy = ((_node$props4 = node.props) === null \|\| _node$props4 === void 0 ? void 0 : _node$props4.cy) \|\| 0;
		return [cx - r, cy - r, cx + r, cy + r];
		@@ -64,6 +56,8 @@ };
		var getEllipseBoundingBox = function getEllipseBoundingBox(node) {
		var cx = R.pathOr(0, ['props', 'cx'], node);
		var cy = R.pathOr(0, ['props', 'cy'], node);
		var rx = R.pathOr(0, ['props', 'rx'], node);
		var ry = R.pathOr(0, ['props', 'ry'], node);
		var _node$props5, _node$props6, _node$props7, _node$props8;

		var cx = ((_node$props5 = node.props) === null \|\| _node$props5 === void 0 ? void 0 : _node$props5.cx) \|\| 0;
		var cy = ((_node$props6 = node.props) === null \|\| _node$props6 === void 0 ? void 0 : _node$props6.cy) \|\| 0;
		var rx = ((_node$props7 = node.props) === null \|\| _node$props7 === void 0 ? void 0 : _node$props7.rx) \|\| 0;
		var ry = ((_node$props8 = node.props) === null \|\| _node$props8 === void 0 ? void 0 : _node$props8.ry) \|\| 0;
		return [cx - rx, cy - ry, cx + rx, cy + ry];
		@@ -73,29 +67,50 @@ };
		var getLineBoundingBox = function getLineBoundingBox(node) {
		var x1 = R.pathOr(0, ['props', 'x1'], node);
		var y1 = R.pathOr(0, ['props', 'y1'], node);
		var x2 = R.pathOr(0, ['props', 'x2'], node);
		var y2 = R.pathOr(0, ['props', 'y2'], node);
		return [R.min(x1, x2), R.min(y1, y2), R.max(x1, x2), R.max(y1, y2)];
		var _node$props9, _node$props10, _node$props11, _node$props12;

		var x1 = ((_node$props9 = node.props) === null \|\| _node$props9 === void 0 ? void 0 : _node$props9.x1) \|\| 0;
		var y1 = ((_node$props10 = node.props) === null \|\| _node$props10 === void 0 ? void 0 : _node$props10.y1) \|\| 0;
		var x2 = ((_node$props11 = node.props) === null \|\| _node$props11 === void 0 ? void 0 : _node$props11.x2) \|\| 0;
		var y2 = ((_node$props12 = node.props) === null \|\| _node$props12 === void 0 ? void 0 : _node$props12.y2) \|\| 0;
		return [Math.min(x1, x2), Math.min(y1, y2), Math.max(x1, x2), Math.max(y1, y2)];
		};

		var getRectBoundingBox = function getRectBoundingBox(node) {
		var x = R.pathOr(0, ['props', 'x'], node);
		var y = R.pathOr(0, ['props', 'y'], node);
		var width = R.pathOr(0, ['props', 'width'], node);
		var height = R.pathOr(0, ['props', 'height'], node);
		var _node$props13, _node$props14, _node$props15, _node$props16;

		var x = ((_node$props13 = node.props) === null \|\| _node$props13 === void 0 ? void 0 : _node$props13.x) \|\| 0;
		var y = ((_node$props14 = node.props) === null \|\| _node$props14 === void 0 ? void 0 : _node$props14.y) \|\| 0;
		var width = ((_node$props15 = node.props) === null \|\| _node$props15 === void 0 ? void 0 : _node$props15.width) \|\| 0;
		var height = ((_node$props16 = node.props) === null \|\| _node$props16 === void 0 ? void 0 : _node$props16.height) \|\| 0;
		return [x, y, x + width, y + height];
		};

		var max = R.reduce(R.max, -Infinity);
		var min = R.reduce(R.min, Infinity);
		var max = function max(values) {
		return Math.max.apply(Math, [-Infinity].concat(values));
		};

		var min = function min(values) {
		return Math.min.apply(Math, [Infinity].concat(values));
		};

		var getPolylineBoundingBox = function getPolylineBoundingBox(node) {
		var points = R.compose(_parsePoints.default, R.pathOr([], ['props', 'points']))(node);
		var xValues = R.pluck(0, points);
		var yValues = R.pluck(1, points);
		var _node$props17;

		var points = (0, _parsePoints.default)(((_node$props17 = node.props) === null \|\| _node$props17 === void 0 ? void 0 : _node$props17.points) \|\| []);
		var xValues = points.map(function (p) {
		return p[0];
		});
		var yValues = points.map(function (p) {
		return p[1];
		});
		return [min(xValues), min(yValues), max(xValues), max(yValues)];
		};

		var getBoundingBox = R.cond([[_isRect.default, getRectBoundingBox], [_isLine.default, getLineBoundingBox], [_isPath.default, getPathBoundingBox], [_isCircle.default, getCircleBoundingBox], [_isEllipse.default, getEllipseBoundingBox], [_isPolygon.default, getPolylineBoundingBox], [_isPolyline.default, getPolylineBoundingBox], [R.T, R.always([0, 0, 0, 0])]]);
		var boundingBoxFns = (_boundingBoxFns = {}, _boundingBoxFns[P.Rect] = getRectBoundingBox, _boundingBoxFns[P.Line] = getLineBoundingBox, _boundingBoxFns[P.Path] = getPathBoundingBox, _boundingBoxFns[P.Circle] = getCircleBoundingBox, _boundingBoxFns[P.Ellipse] = getEllipseBoundingBox, _boundingBoxFns[P.Polygon] = getPolylineBoundingBox, _boundingBoxFns[P.Polyline] = getPolylineBoundingBox, _boundingBoxFns);

		var getBoundingBox = function getBoundingBox(node) {
		var boundingBoxFn = boundingBoxFns[node.type];
		return boundingBoxFn ? boundingBoxFn(node) : [0, 0, 0, 0];
		};

		var _default = getBoundingBox;
		exports.default = _default;

lib/svg/parsePoints.js

		"use strict";

		var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

		exports.__esModule = true;
		exports.default = void 0;

		var R = _interopRequireWildcard(require("ramda"));
		var pairs = function pairs(values) {
		var result = [];

		var isOdd = function isOdd(x) {
		return x % 2 !== 0;
		for (var i = 0; i < values.length; i += 2) {
		result.push([values[i], values[i + 1]]);
		}

		return result;
		};

		var lengthIsOdd = R.o(isOdd, R.prop('length'));
		/**
		@@ -22,4 +22,15 @@ * Parse svg-like points into number arrays

		var parsePoints = R.compose(R.splitEvery(2), R.map(parseFloat), R.when(lengthIsOdd, R.slice(0, -1)), R.split(/\s+/), R.replace(/(\d)-(\d)/g, '$1 -$2'), R.replace(/,/g, ' '), R.trim, R.defaultTo(''));

		var parsePoints = function parsePoints(points) {
		var values = (points \|\| '').trim().replace(/,/g, ' ').replace(/(\d)-(\d)/g, '$1 -$2').split(/\s+/);

		if (values.length % 2 !== 0) {
		values = values.slice(0, -1);
		}

		values = values.map(parseFloat);
		return pairs(values);
		};

		var _default = parsePoints;
		exports.default = _default;

lib/utils/resolveObjectFit.js

		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

		exports.__esModule = true;
		exports.default = void 0;

		var _matchPercent = _interopRequireDefault(require("./matchPercent"));
		var _fns = require("@react-pdf/fns");

		@@ -17,4 +15,4 @@ var isNumeric = function isNumeric(n) {
		var ir = iw / ih;
		var pxp = (0, _matchPercent.default)(px);
		var pyp = (0, _matchPercent.default)(py);
		var pxp = (0, _fns.matchPercent)(px);
		var pyp = (0, _fns.matchPercent)(py);
		var pxv = pxp ? pxp.percent : 0.5;
		@@ -55,4 +53,4 @@ var pyv = pyp ? pyp.percent : 0.5;
		var height = ih;
		var pxp = (0, _matchPercent.default)(px);
		var pyp = (0, _matchPercent.default)(py);
		var pxp = (0, _fns.matchPercent)(px);
		var pyp = (0, _fns.matchPercent)(py);
		var pxv = pxp ? pxp.percent : 0.5;
		@@ -73,4 +71,4 @@ var pyv = pyp ? pyp.percent : 0.5;
		var cr = cw / ch;
		var pxp = (0, _matchPercent.default)(px);
		var pyp = (0, _matchPercent.default)(py);
		var pxp = (0, _fns.matchPercent)(px);
		var pyp = (0, _fns.matchPercent)(py);
		var pxv = pxp ? pxp.percent : 0.5;
		@@ -118,4 +116,4 @@ var pyv = pyp ? pyp.percent : 0.5;
		height: ch,
		xOffset: (0, _matchPercent.default)(px) ? 0 : px \|\| 0,
		yOffset: (0, _matchPercent.default)(py) ? 0 : py \|\| 0
		xOffset: (0, _fns.matchPercent)(px) ? 0 : px \|\| 0,
		yOffset: (0, _fns.matchPercent)(py) ? 0 : py \|\| 0
		};
		@@ -122,0 +120,0 @@ };

package.json

		{
		"name": "@react-pdf/render",
		"version": "2.1.0",
		"version": "3.0.0",
		"license": "MIT",
		@@ -21,5 +21,6 @@ "description": "A render engine for Node and the browser",
		"@babel/runtime": "^7.16.4",
		"@react-pdf/primitives": "^2.0.2",
		"@react-pdf/textkit": "^2.1.0",
		"@react-pdf/types": "^2.0.8",
		"@react-pdf/fns": "1.0.0",
		"@react-pdf/primitives": "^3.0.0",
		"@react-pdf/textkit": "^3.0.0",
		"@react-pdf/types": "^2.0.9",
		"abs-svg-path": "^0.1.1",
		@@ -29,3 +30,2 @@ "color-string": "^1.5.3",
		"parse-svg-path": "^0.1.2",
		"ramda": "^0.26.1",
		"svg-arc-to-cubic-bezier": "^3.2.0"
		@@ -32,0 +32,0 @@ },

lib/operations/restore.js

lib/operations/save.js

lib/utils/isCanvas.js

lib/utils/isCircle.js

lib/utils/isEllipse.js

lib/utils/isGroup.js

lib/utils/isImage.js

lib/utils/isLine.js

lib/utils/isLink.js

lib/utils/isNote.js

lib/utils/isPage.js

lib/utils/isPath.js

lib/utils/isPolygon.js

lib/utils/isPolyline.js

lib/utils/isRadialGradient.js

lib/utils/isRect.js

lib/utils/isSvg.js

lib/utils/isText.js

lib/utils/isTextInstance.js

lib/utils/isTspan.js

lib/utils/matchPercent.js

@react-pdf/render - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics

Dependency changes