html2canvas-pro 2.3.5 → 2.3.7

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.5 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.3.7 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -7037,14 +7037,19 @@
 				}
 				if (clone.loading === "lazy") clone.loading = "eager";
 			}
-			if (isCustomElement(clone) && !isSVGElementNode(clone)) return this.createCustomElementClone(clone);
+			if (isCustomElement(clone) && !isSVGElementNode(clone)) return this.createCustomElementClone(node, clone);
 			return clone;
 		}
-		createCustomElementClone(node) {
+		createCustomElementClone(originalNode, clonedNode) {
 			const clone = document.createElement("div");
-			clone.className = node.className;
-			copyCSSStyles(node.style, clone);
-			if (node.shadowRoot) try {
+			clone.className = clonedNode.className;
+			copyCSSStyles(clonedNode.style, clone);
+			const attributes = clonedNode.attributes;
+			for (let i = 0; i < attributes.length; i++) {
+				const attr = attributes[i];
+				if (attr.name !== "class" && attr.name !== "style") clone.setAttribute(attr.name, attr.value);
+			}
+			if (originalNode.shadowRoot) try {
 				clone.attachShadow({ mode: "open" });
 			} catch (e) {
 				this.context.logger.error("Failed to attach shadow root to custom element clone:", e);
@@ -7445,6 +7450,15 @@
 				this.originalElement = element;
 			}
 			this.bounds = parseBounds(this.context, element);
+			if (element.tagName === "FIELDSET") {
+				const legend = element.querySelector(":scope > legend");
+				if (legend) {
+					const legendBounds = parseBounds(this.context, legend);
+					this.legendBounds = legendBounds;
+					const borderBoxTop = legendBounds.top + legendBounds.height / 2 - this.styles.borderTopWidth / 2;
+					this.bounds = new Bounds(this.bounds.left, borderBoxTop, this.bounds.width, this.bounds.height - (borderBoxTop - this.bounds.top));
+				}
+			}
 			if (isDebugging(element, 4)) this.debugRender = true;
 		}
 		/**
@@ -9081,6 +9095,7 @@
 	//#endregion
 	//#region src/render/canvas/text-renderer.ts
 	const iOSBrokenFonts = ["-apple-system", "system-ui"];
+	const TEXT_OVERFLOW_EPSILON = 1;
 	/**
 	* Detect CJK (Chinese, Japanese, Korean) characters in a string.
 	* CJK characters use the ideographic baseline in browsers, which differs
@@ -9383,7 +9398,7 @@
 			const firstTop = text.textBounds[0].bounds.top;
 			if (!text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * .5)) return false;
 			let fullText = text.textBounds.map((tb) => tb.text).join("").replace(/\s+/g, " ").trim();
-			if (this.ctx.measureText(fullText).width <= containerBounds.width) return false;
+			if (this.ctx.measureText(fullText).width <= containerBounds.width + TEXT_OVERFLOW_EPSILON) return false;
 			const bounds = new TextBounds(this.truncateTextWithEllipsis(fullText, containerBounds.width, styles.letterSpacing), text.textBounds[0].bounds);
 			for (const layer of paintOrder) if (layer === 0) this.renderTextFillWithShadows(bounds, styles, baseline);
 			else if (layer === 1) this.renderTextStrokeWithStyle(bounds, styles, baseline);
@@ -10621,10 +10636,38 @@
 			}
 			let side = 0;
 			for (const border of borders) {
-				if (border.style !== 0 && !isTransparent(border.color) && border.width > 0) if (border.style === 2) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2);
-				else if (border.style === 3) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3);
-				else if (border.style === 4) await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
-				else await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
+				if (border.style !== 0 && !isTransparent(border.color) && border.width > 0) {
+					const renderBorderSide = async () => {
+						if (border.style === 2) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2);
+						else if (border.style === 3) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3);
+						else if (border.style === 4) await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
+						else await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
+					};
+					const legend = paint.container.legendBounds;
+					if (side === 0 && legend) {
+						const bounds = paint.container.bounds;
+						const legendLeft = legend.left - bounds.left;
+						const legendRight = legend.left + legend.width - bounds.left;
+						if (legendLeft > 0) {
+							this.ctx.save();
+							this.ctx.beginPath();
+							this.ctx.rect(bounds.left, bounds.top, legendLeft, bounds.height);
+							this.ctx.clip();
+							await renderBorderSide();
+							this.ctx.restore();
+						}
+						const rightStart = bounds.left + legendRight;
+						const rightWidth = bounds.width - legendRight;
+						if (rightWidth > 0) {
+							this.ctx.save();
+							this.ctx.beginPath();
+							this.ctx.rect(rightStart, bounds.top, rightWidth, bounds.height);
+							this.ctx.clip();
+							await renderBorderSide();
+							this.ctx.restore();
+						}
+					} else await renderBorderSide();
+				}
 				side++;
 			}
 		}