fabricjs-document-engine 1.0.2 → 1.2.0

package/dist/export/svg/overrides.js

@@ -0,0 +1,32 @@
+import { walkObjects } from "../../fabric/walk-objects.js";
+//#region src/export/svg/overrides.ts
+/**
+* Runs `work` while chosen objects on the canvas, including objects in
+* groups, write their SVG with `writerFor`. Any toSVG an app set on an
+* object itself is put back afterwards. Returns how many objects were
+* handled.
+*/
+function withSvgOverrides(canvas, writerFor, work) {
+	const patched = [];
+	walkObjects(canvas.getObjects(), (object) => {
+		const writer = writerFor(object);
+		if (!writer) return;
+		patched.push([object, Object.getOwnPropertyDescriptor(object, "toSVG")]);
+		Object.defineProperty(object, "toSVG", {
+			configurable: true,
+			writable: true,
+			value: writer
+		});
+	});
+	try {
+		return {
+			result: work(),
+			count: patched.length
+		};
+	} finally {
+		for (const [object, own] of patched) if (own) Object.defineProperty(object, "toSVG", own);
+		else delete object.toSVG;
+	}
+}
+//#endregion
+export { withSvgOverrides };

package/dist/export/svg/raster-object.cjs

@@ -0,0 +1,82 @@
+require("../../security/content-limits.cjs");
+const require_walk_objects = require("../../fabric/walk-objects.cjs");
+//#region src/export/svg/raster-object.ts
+/**
+* The largest multiplier that keeps a `width × height` area within the
+* canvas limits. A picture over the browser's limit would fail, so a large
+* page is drawn at a lower resolution instead: O(1) arithmetic.
+*/
+function safeMultiplier(multiplier, width, height, limits) {
+	const maxPixels = limits?.maxCanvasPixels ?? 67108864;
+	const maxSide = limits?.maxCanvasSide ?? 16384;
+	const byArea = Math.sqrt(maxPixels / Math.max(1, width * height));
+	const bySide = maxSide / Math.max(1, width, height);
+	return Math.min(multiplier, byArea, bySide);
+}
+function shadowPadding(object) {
+	let padding = 0;
+	require_walk_objects.walkObjects([object], (child) => {
+		const shadow = child.shadow;
+		if (shadow) padding = Math.max(padding, shadow.blur + Math.max(Math.abs(shadow.offsetX), Math.abs(shadow.offsetY)));
+	});
+	return padding + 2;
+}
+function usesBlendMode(object) {
+	let blends = false;
+	require_walk_objects.walkObjects([object], (child) => {
+		if (child.globalCompositeOperation && child.globalCompositeOperation !== "source-over") blends = true;
+	});
+	return blends;
+}
+/**
+* An object as a picture placed where it sits on the canvas. Usually the
+* object alone, so the vectors underneath show through. An object with a
+* blend mode mixes with what lies below it, so its picture includes
+* everything below it within its bounds, which covers those vectors exactly.
+*/
+function rasterMarkup(canvas, object, multiplier, limits) {
+	object.setCoords();
+	const bounds = object.getBoundingRect();
+	const padding = shadowPadding(object);
+	const left = Math.max(0, Math.floor(bounds.left - padding));
+	const top = Math.max(0, Math.floor(bounds.top - padding));
+	const right = Math.min(canvas.getWidth(), Math.ceil(bounds.left + bounds.width + padding));
+	const bottom = Math.min(canvas.getHeight(), Math.ceil(bounds.top + bounds.height + padding));
+	if (right <= left || bottom <= top) return "";
+	const blends = usesBlendMode(object);
+	const stack = canvas.getObjects();
+	const position = stack.indexOf(object);
+	const saved = {
+		backgroundColor: canvas.backgroundColor,
+		backgroundImage: canvas.backgroundImage,
+		overlayColor: canvas.overlayColor,
+		overlayImage: canvas.overlayImage
+	};
+	if (!blends) {
+		canvas.backgroundColor = "";
+		canvas.backgroundImage = void 0;
+	}
+	canvas.overlayColor = "";
+	canvas.overlayImage = void 0;
+	let element;
+	try {
+		const filter = (candidate) => blends ? stack.indexOf(candidate) <= position : candidate === object;
+		const safe = safeMultiplier(multiplier, right - left, bottom - top, limits);
+		element = canvas.toCanvasElement(safe, {
+			left,
+			top,
+			width: right - left,
+			height: bottom - top,
+			filter
+		});
+	} finally {
+		Object.assign(canvas, saved);
+	}
+	const url = element.toDataURL("image/png");
+	element.width = 0;
+	element.height = 0;
+	return `<image x="${left}" y="${top}" width="${right - left}" height="${bottom - top}" preserveAspectRatio="none" xlink:href="${url}" />\n`;
+}
+//#endregion
+exports.rasterMarkup = rasterMarkup;
+exports.safeMultiplier = safeMultiplier;

package/dist/export/svg/raster-object.js

@@ -0,0 +1,81 @@
+import "../../security/content-limits.js";
+import { walkObjects } from "../../fabric/walk-objects.js";
+//#region src/export/svg/raster-object.ts
+/**
+* The largest multiplier that keeps a `width × height` area within the
+* canvas limits. A picture over the browser's limit would fail, so a large
+* page is drawn at a lower resolution instead: O(1) arithmetic.
+*/
+function safeMultiplier(multiplier, width, height, limits) {
+	const maxPixels = limits?.maxCanvasPixels ?? 67108864;
+	const maxSide = limits?.maxCanvasSide ?? 16384;
+	const byArea = Math.sqrt(maxPixels / Math.max(1, width * height));
+	const bySide = maxSide / Math.max(1, width, height);
+	return Math.min(multiplier, byArea, bySide);
+}
+function shadowPadding(object) {
+	let padding = 0;
+	walkObjects([object], (child) => {
+		const shadow = child.shadow;
+		if (shadow) padding = Math.max(padding, shadow.blur + Math.max(Math.abs(shadow.offsetX), Math.abs(shadow.offsetY)));
+	});
+	return padding + 2;
+}
+function usesBlendMode(object) {
+	let blends = false;
+	walkObjects([object], (child) => {
+		if (child.globalCompositeOperation && child.globalCompositeOperation !== "source-over") blends = true;
+	});
+	return blends;
+}
+/**
+* An object as a picture placed where it sits on the canvas. Usually the
+* object alone, so the vectors underneath show through. An object with a
+* blend mode mixes with what lies below it, so its picture includes
+* everything below it within its bounds, which covers those vectors exactly.
+*/
+function rasterMarkup(canvas, object, multiplier, limits) {
+	object.setCoords();
+	const bounds = object.getBoundingRect();
+	const padding = shadowPadding(object);
+	const left = Math.max(0, Math.floor(bounds.left - padding));
+	const top = Math.max(0, Math.floor(bounds.top - padding));
+	const right = Math.min(canvas.getWidth(), Math.ceil(bounds.left + bounds.width + padding));
+	const bottom = Math.min(canvas.getHeight(), Math.ceil(bounds.top + bounds.height + padding));
+	if (right <= left || bottom <= top) return "";
+	const blends = usesBlendMode(object);
+	const stack = canvas.getObjects();
+	const position = stack.indexOf(object);
+	const saved = {
+		backgroundColor: canvas.backgroundColor,
+		backgroundImage: canvas.backgroundImage,
+		overlayColor: canvas.overlayColor,
+		overlayImage: canvas.overlayImage
+	};
+	if (!blends) {
+		canvas.backgroundColor = "";
+		canvas.backgroundImage = void 0;
+	}
+	canvas.overlayColor = "";
+	canvas.overlayImage = void 0;
+	let element;
+	try {
+		const filter = (candidate) => blends ? stack.indexOf(candidate) <= position : candidate === object;
+		const safe = safeMultiplier(multiplier, right - left, bottom - top, limits);
+		element = canvas.toCanvasElement(safe, {
+			left,
+			top,
+			width: right - left,
+			height: bottom - top,
+			filter
+		});
+	} finally {
+		Object.assign(canvas, saved);
+	}
+	const url = element.toDataURL("image/png");
+	element.width = 0;
+	element.height = 0;
+	return `<image x="${left}" y="${top}" width="${right - left}" height="${bottom - top}" preserveAspectRatio="none" xlink:href="${url}" />\n`;
+}
+//#endregion
+export { rasterMarkup, safeMultiplier };

package/dist/export/svg/text-decorations.cjs

@@ -0,0 +1,108 @@
+//#region src/export/svg/text-decorations.ts
+const DECORATIONS = [
+	"underline",
+	"overline",
+	"linethrough"
+];
+function num(value) {
+	return Number.isFinite(value) ? String(Math.round(value * 1e4) / 1e4) : "0";
+}
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function isText(object) {
+	const candidate = object;
+	return Array.isArray(candidate._textLines) && typeof candidate.getValueOfPropertyAt === "function" && !candidate.path;
+}
+function hasStraightDecorations(object) {
+	if (!isText(object)) return false;
+	return DECORATIONS.some((type) => object[type] || object.styleHas(type)) || object.styleHas("deltaY");
+}
+function rect(x, y, width, height, color) {
+	if (typeof color !== "string" || width <= 0 || height <= 0) return "";
+	return `\t\t<rect x="${num(x)}" y="${num(y)}" width="${num(width)}" height="${num(height)}" fill="${escapeAttribute(color)}" />\n`;
+}
+/** The same boxes as Fabric's `_renderTextDecoration` for text that is not on a path. */
+function decorationRects(text, type) {
+	if (!text[type] && !text.styleHas(type)) return "";
+	let markup = "";
+	let topOffset = text._getTopOffset();
+	const leftOffset = text._getLeftOffset();
+	const charSpacing = text._getWidthOfCharSpacing();
+	const aligner = type === "linethrough" ? .5 : type === "overline" ? 1 : 0;
+	const offsetY = text.offsets[type];
+	const at = (line, char, property) => text.getValueOfPropertyAt(line, char, property);
+	const colorAt = (line, char) => at(line, char, "textDecorationColor") || at(line, char, "fill");
+	const thicknessAt = (line, char) => Number(at(line, char, "textDecorationThickness") ?? 66.667);
+	for (let lineIndex = 0; lineIndex < text._textLines.length; lineIndex += 1) {
+		const heightOfLine = text.getHeightOfLine(lineIndex);
+		if (!text[type] && !text.styleHas(type, lineIndex)) {
+			topOffset += heightOfLine;
+			continue;
+		}
+		if (!text.__charBounds[lineIndex]) text.getLineWidth(lineIndex);
+		const line = text._textLines[lineIndex];
+		const maxHeight = heightOfLine / text.lineHeight;
+		const lineLeftOffset = text._getLineLeftOffset(lineIndex);
+		const top = topOffset + maxHeight * (1 - text._fontSizeFraction);
+		let boxStart = 0;
+		let boxWidth = 0;
+		let lastDecoration = at(lineIndex, 0, type);
+		let lastFill = at(lineIndex, 0, "fill");
+		let lastColor = colorAt(lineIndex, 0);
+		let lastThickness = thicknessAt(lineIndex, 0);
+		let size = text.getHeightOfChar(lineIndex, 0);
+		let dy = Number(at(lineIndex, 0, "deltaY") ?? 0);
+		let currentDecoration = lastDecoration;
+		let currentColor = lastColor;
+		let currentThickness = lastThickness;
+		const startOf = (start, width) => {
+			const drawStart = leftOffset + lineLeftOffset + start;
+			return text.direction === "rtl" ? text.width - drawStart - width : drawStart;
+		};
+		for (let charIndex = 0; charIndex < line.length; charIndex += 1) {
+			const box = text.__charBounds[lineIndex][charIndex];
+			currentDecoration = at(lineIndex, charIndex, type);
+			const currentFill = at(lineIndex, charIndex, "fill");
+			currentColor = colorAt(lineIndex, charIndex);
+			currentThickness = thicknessAt(lineIndex, charIndex);
+			const currentSize = text.getHeightOfChar(lineIndex, charIndex);
+			const currentDy = Number(at(lineIndex, charIndex, "deltaY") ?? 0);
+			if ((currentDecoration !== lastDecoration || currentFill !== lastFill || currentColor !== lastColor || currentSize !== size || currentThickness !== lastThickness || currentDy !== dy) && boxWidth > 0) {
+				const thickness = text.fontSize * lastThickness / 1e3;
+				if (lastDecoration && lastColor && lastThickness) markup += rect(startOf(boxStart, boxWidth), top + offsetY * size + dy - aligner * thickness, boxWidth, thickness, lastColor);
+				boxStart = box.left;
+				boxWidth = box.width;
+				lastDecoration = currentDecoration;
+				lastColor = currentColor;
+				lastThickness = currentThickness;
+				lastFill = currentFill;
+				size = currentSize;
+				dy = currentDy;
+			} else boxWidth += box.kernedWidth;
+		}
+		const thickness = text.fontSize * currentThickness / 1e3;
+		if (currentDecoration && currentColor && currentThickness) markup += rect(startOf(boxStart, boxWidth), top + offsetY * size + dy - aligner * thickness, boxWidth - charSpacing, thickness, currentColor);
+		topOffset += heightOfLine;
+	}
+	return markup;
+}
+/** SVG for straight text with its decorations as boxes instead of CSS. */
+function decoratedTextToSVG(object, reviver) {
+	const text = object;
+	const inner = text._toSVG().join("").replace(/\stext-decoration="[^"]*"/g, "").replace(/text-decoration:[^;"]*;?\s*/g, "").replace(/baseline-shift:[^;"]*;?\s*/g, "");
+	const markup = [
+		decorationRects(text, "underline"),
+		inner,
+		decorationRects(text, "overline"),
+		decorationRects(text, "linethrough")
+	];
+	return text._createBaseSVGMarkup(markup, {
+		reviver,
+		noStyle: true,
+		withShadow: true
+	});
+}
+//#endregion
+exports.decoratedTextToSVG = decoratedTextToSVG;
+exports.hasStraightDecorations = hasStraightDecorations;

package/dist/export/svg/text-decorations.js

@@ -0,0 +1,107 @@
+//#region src/export/svg/text-decorations.ts
+const DECORATIONS = [
+	"underline",
+	"overline",
+	"linethrough"
+];
+function num(value) {
+	return Number.isFinite(value) ? String(Math.round(value * 1e4) / 1e4) : "0";
+}
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function isText(object) {
+	const candidate = object;
+	return Array.isArray(candidate._textLines) && typeof candidate.getValueOfPropertyAt === "function" && !candidate.path;
+}
+function hasStraightDecorations(object) {
+	if (!isText(object)) return false;
+	return DECORATIONS.some((type) => object[type] || object.styleHas(type)) || object.styleHas("deltaY");
+}
+function rect(x, y, width, height, color) {
+	if (typeof color !== "string" || width <= 0 || height <= 0) return "";
+	return `\t\t<rect x="${num(x)}" y="${num(y)}" width="${num(width)}" height="${num(height)}" fill="${escapeAttribute(color)}" />\n`;
+}
+/** The same boxes as Fabric's `_renderTextDecoration` for text that is not on a path. */
+function decorationRects(text, type) {
+	if (!text[type] && !text.styleHas(type)) return "";
+	let markup = "";
+	let topOffset = text._getTopOffset();
+	const leftOffset = text._getLeftOffset();
+	const charSpacing = text._getWidthOfCharSpacing();
+	const aligner = type === "linethrough" ? .5 : type === "overline" ? 1 : 0;
+	const offsetY = text.offsets[type];
+	const at = (line, char, property) => text.getValueOfPropertyAt(line, char, property);
+	const colorAt = (line, char) => at(line, char, "textDecorationColor") || at(line, char, "fill");
+	const thicknessAt = (line, char) => Number(at(line, char, "textDecorationThickness") ?? 66.667);
+	for (let lineIndex = 0; lineIndex < text._textLines.length; lineIndex += 1) {
+		const heightOfLine = text.getHeightOfLine(lineIndex);
+		if (!text[type] && !text.styleHas(type, lineIndex)) {
+			topOffset += heightOfLine;
+			continue;
+		}
+		if (!text.__charBounds[lineIndex]) text.getLineWidth(lineIndex);
+		const line = text._textLines[lineIndex];
+		const maxHeight = heightOfLine / text.lineHeight;
+		const lineLeftOffset = text._getLineLeftOffset(lineIndex);
+		const top = topOffset + maxHeight * (1 - text._fontSizeFraction);
+		let boxStart = 0;
+		let boxWidth = 0;
+		let lastDecoration = at(lineIndex, 0, type);
+		let lastFill = at(lineIndex, 0, "fill");
+		let lastColor = colorAt(lineIndex, 0);
+		let lastThickness = thicknessAt(lineIndex, 0);
+		let size = text.getHeightOfChar(lineIndex, 0);
+		let dy = Number(at(lineIndex, 0, "deltaY") ?? 0);
+		let currentDecoration = lastDecoration;
+		let currentColor = lastColor;
+		let currentThickness = lastThickness;
+		const startOf = (start, width) => {
+			const drawStart = leftOffset + lineLeftOffset + start;
+			return text.direction === "rtl" ? text.width - drawStart - width : drawStart;
+		};
+		for (let charIndex = 0; charIndex < line.length; charIndex += 1) {
+			const box = text.__charBounds[lineIndex][charIndex];
+			currentDecoration = at(lineIndex, charIndex, type);
+			const currentFill = at(lineIndex, charIndex, "fill");
+			currentColor = colorAt(lineIndex, charIndex);
+			currentThickness = thicknessAt(lineIndex, charIndex);
+			const currentSize = text.getHeightOfChar(lineIndex, charIndex);
+			const currentDy = Number(at(lineIndex, charIndex, "deltaY") ?? 0);
+			if ((currentDecoration !== lastDecoration || currentFill !== lastFill || currentColor !== lastColor || currentSize !== size || currentThickness !== lastThickness || currentDy !== dy) && boxWidth > 0) {
+				const thickness = text.fontSize * lastThickness / 1e3;
+				if (lastDecoration && lastColor && lastThickness) markup += rect(startOf(boxStart, boxWidth), top + offsetY * size + dy - aligner * thickness, boxWidth, thickness, lastColor);
+				boxStart = box.left;
+				boxWidth = box.width;
+				lastDecoration = currentDecoration;
+				lastColor = currentColor;
+				lastThickness = currentThickness;
+				lastFill = currentFill;
+				size = currentSize;
+				dy = currentDy;
+			} else boxWidth += box.kernedWidth;
+		}
+		const thickness = text.fontSize * currentThickness / 1e3;
+		if (currentDecoration && currentColor && currentThickness) markup += rect(startOf(boxStart, boxWidth), top + offsetY * size + dy - aligner * thickness, boxWidth - charSpacing, thickness, currentColor);
+		topOffset += heightOfLine;
+	}
+	return markup;
+}
+/** SVG for straight text with its decorations as boxes instead of CSS. */
+function decoratedTextToSVG(object, reviver) {
+	const text = object;
+	const inner = text._toSVG().join("").replace(/\stext-decoration="[^"]*"/g, "").replace(/text-decoration:[^;"]*;?\s*/g, "").replace(/baseline-shift:[^;"]*;?\s*/g, "");
+	const markup = [
+		decorationRects(text, "underline"),
+		inner,
+		decorationRects(text, "overline"),
+		decorationRects(text, "linethrough")
+	];
+	return text._createBaseSVGMarkup(markup, {
+		reviver,
+		noStyle: true,
+		withShadow: true
+	});
+}
+//#endregion
+export { decoratedTextToSVG, hasStraightDecorations };

package/dist/export/svg/text-on-path.cjs

@@ -0,0 +1,242 @@
+const require_walk_objects = require("../../fabric/walk-objects.cjs");
+let fabric = require("fabric");
+//#region src/export/svg/text-on-path.ts
+function isTextOnPath(object) {
+	const candidate = object;
+	return Boolean(candidate.path) && Array.isArray(candidate._textLines) && typeof candidate.getCompleteStyleDeclaration === "function";
+}
+const DIGITS = 4;
+function num(value) {
+	if (!Number.isFinite(value)) return "0";
+	const fixed = value.toFixed(DIGITS);
+	return fixed.includes(".") ? fixed.replace(/\.?0+$/, "") || "0" : fixed;
+}
+function escapeXml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+/** CSS values that could break out of a style attribute are dropped, as Fabric 7 does. */
+function safeToken(value) {
+	if (value === void 0 || value === null) return void 0;
+	const text = String(value).trim();
+	if (text.length === 0 || /[;<>{}\\]|url\(|expression\(|javascript:|data:/i.test(text)) return void 0;
+	return text;
+}
+function isFiller(value) {
+	return typeof value === "object" && value !== null && typeof value.toSVG === "function";
+}
+/** `fill: rgb(...); fill-opacity: a` for a color, `url(#SVGID_id)` for a gradient or pattern. */
+function paint(property, value) {
+	if (isFiller(value)) return `${property}: url(#SVGID_${value.id}); `;
+	const token = typeof value === "string" ? safeToken(value) : void 0;
+	if (token === void 0 || token === "none" || token === "transparent") return `${property}: none; `;
+	const color = new fabric.Color(token);
+	const alpha = color.getAlpha();
+	const rgb = color.toRgb();
+	return alpha === 1 ? `${property}: ${rgb}; ` : `${property}: ${rgb}; ${property}-opacity: ${num(alpha)}; `;
+}
+function strokeDetails(text, strokeWidth) {
+	let style = `stroke-width: ${num(strokeWidth)}; `;
+	if (text.strokeDashArray && text.strokeDashArray.length > 0) style += `stroke-dasharray: ${text.strokeDashArray.map(num).join(" ")}; `;
+	const cap = safeToken(text.strokeLineCap);
+	const join = safeToken(text.strokeLineJoin);
+	if (cap) style += `stroke-linecap: ${cap}; `;
+	if (join) style += `stroke-linejoin: ${join}; `;
+	if (text.strokeMiterLimit !== void 0) style += `stroke-miterlimit: ${num(text.strokeMiterLimit)}; `;
+	return style;
+}
+function fontStyle(style) {
+	const family = safeToken(String(style.fontFamily ?? "").replace(/"/g, "'"));
+	const weight = safeToken(style.fontWeight);
+	const slant = safeToken(style.fontStyle);
+	let css = "";
+	if (family) css += `font-family: ${family}; `;
+	css += `font-size: ${num(style.fontSize ?? 0)}px; `;
+	if (weight) css += `font-weight: ${weight}; `;
+	if (slant) css += `font-style: ${slant}; `;
+	return css;
+}
+function frame(box) {
+	const angle = box.angle ?? 0;
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return `matrix(${num(cos)} ${num(sin)} ${num(-sin)} ${num(cos)} ${num(box.renderLeft ?? 0)} ${num(box.renderTop ?? 0)})`;
+}
+let measuringContext;
+function measuring() {
+	if (measuringContext === void 0) measuringContext = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+	return measuringContext;
+}
+const baselineShifts = /* @__PURE__ */ new Map();
+/**
+* How far below the path the alphabetic baseline sits when Fabric draws with
+* `pathAlign` (the canvas `textBaseline`). SVG has no portable way to say
+* this, so the shift is measured and written as a plain offset.
+*/
+function baselineShift(font, pathAlign) {
+	const baseline = pathAlign === "center" ? "middle" : pathAlign === "ascender" ? "top" : pathAlign === "descender" ? "bottom" : void 0;
+	if (baseline === void 0) return 0;
+	const key = `${baseline}|${font}`;
+	const known = baselineShifts.get(key);
+	if (known !== void 0) return known;
+	const context = measuring();
+	let shift = 0;
+	if (context) {
+		context.font = font;
+		context.textBaseline = baseline;
+		shift = -context.measureText("M").alphabeticBaseline;
+		if (!Number.isFinite(shift)) shift = 0;
+	}
+	baselineShifts.set(key, shift);
+	return shift;
+}
+function guidePath(text) {
+	const path = text.path;
+	if (!path || !path.visible || path.opacity === 0) return "";
+	const pathData = fabric.util.joinPath(path.path, DIGITS);
+	const strokeWidth = path.strokeWidth ?? 1;
+	let style = paint("fill", path.fill);
+	if (path.fillRule === "evenodd") style += "fill-rule: evenodd; ";
+	style += paint("stroke", path.stroke);
+	if (path.stroke) style += strokeDetails(path, strokeWidth);
+	return `\t\t<path d="${escapeXml(pathData)}" transform="translate(${num(-path.pathOffset.x)} ${num(-path.pathOffset.y)})" style="${style}" />\n`;
+}
+function fillerDefinitions(text) {
+	const seen = /* @__PURE__ */ new Set();
+	if (isFiller(text.fill)) seen.add(text.fill.id);
+	if (isFiller(text.stroke)) seen.add(text.stroke.id);
+	const path = text.path;
+	let markup = "";
+	const add = (value, owner) => {
+		if (!isFiller(value) || seen.has(value.id)) return;
+		seen.add(value.id);
+		markup += value.toSVG(owner);
+	};
+	if (path && path.visible && path.opacity !== 0) {
+		add(path.fill, path);
+		add(path.stroke, path);
+	}
+	text._textLines.forEach((line, lineIndex) => line.forEach((_, charIndex) => {
+		const style = text.getCompleteStyleDeclaration(lineIndex, charIndex);
+		add(style.fill, text);
+		add(style.stroke, text);
+	}));
+	return markup;
+}
+function decorationRects(text, type) {
+	const aligner = type === "linethrough" ? .5 : type === "overline" ? 1 : 0;
+	let markup = "";
+	text._textLines.forEach((line, lineIndex) => {
+		line.forEach((_, charIndex) => {
+			const style = text.getCompleteStyleDeclaration(lineIndex, charIndex);
+			if (!style[type] || !style.fill) return;
+			const box = text.__charBounds[lineIndex][charIndex];
+			const thickness = text.fontSize * (style.textDecorationThickness ?? 66.667) / 1e3;
+			const size = text.getHeightOfChar(lineIndex, charIndex);
+			const top = text.offsets[type] * size + (style.deltaY ?? 0) - aligner * thickness;
+			const color = style.textDecorationColor || style.fill;
+			markup += `\t\t<rect transform="${frame(box)}" x="${num(-box.kernedWidth / 2)}" y="${num(top)}" width="${num(box.kernedWidth)}" height="${num(thickness)}" style="${paint("fill", color)}" />\n`;
+		});
+	});
+	return markup;
+}
+function textBackgrounds(text) {
+	let markup = "";
+	text._textLines.forEach((line, lineIndex) => {
+		const height = text.getHeightOfLineImpl(lineIndex);
+		line.forEach((_, charIndex) => {
+			const color = text.getCompleteStyleDeclaration(lineIndex, charIndex).textBackgroundColor;
+			if (!color) return;
+			const box = text.__charBounds[lineIndex][charIndex];
+			markup += `\t\t<rect transform="${frame(box)}" x="${num(-box.width / 2)}" y="${num(-height * (1 - text._fontSizeFraction))}" width="${num(box.width)}" height="${num(height)}" style="${paint("fill", color)}" />\n`;
+		});
+	});
+	return markup;
+}
+/** One pass of characters: Fabric fills every character, then strokes every character (or the reverse). */
+function glyphs(text, pass) {
+	const rtl = text.direction === "rtl";
+	const nonScaling = text.strokeUniform ? " vector-effect=\"non-scaling-stroke\"" : "";
+	let markup = "";
+	text._textLines.forEach((line, lineIndex) => {
+		line.forEach((grapheme, charIndex) => {
+			if (grapheme.trim().length === 0) return;
+			const style = text.getCompleteStyleDeclaration(lineIndex, charIndex);
+			const strokeWidth = style.strokeWidth ?? 0;
+			if (pass === "fill" && !style.fill) return;
+			if (pass === "stroke" && (!style.stroke || strokeWidth === 0)) return;
+			const box = text.__charBounds[lineIndex][charIndex];
+			const y = baselineShift(text._getFontDeclaration(style), text.pathAlign) + (style.deltaY ?? 0);
+			const paintStyle = pass === "fill" ? `${paint("fill", style.fill)}stroke: none; ` : `fill: none; ${paint("stroke", style.stroke)}${strokeDetails(text, strokeWidth)}`;
+			const anchor = rtl ? " text-anchor=\"end\"" : "";
+			markup += `\t\t<text xml:space="preserve" transform="${frame(box)}" x="${num(-box.width / 2)}" y="${num(y)}"${anchor}${nonScaling} style="${fontStyle(style)}${paintStyle}white-space: pre;">${escapeXml(grapheme)}</text>\n`;
+		});
+	});
+	return markup;
+}
+function objectStyle(text) {
+	const parts = [];
+	if (text.opacity !== 1) parts.push(`opacity: ${num(text.opacity)};`);
+	if (!text.visible) parts.push("visibility: hidden;");
+	return parts.length > 0 ? ` style="${parts.join(" ")}"` : "";
+}
+function boxBackground(text) {
+	const color = text.backgroundColor;
+	if (!color) return "";
+	const { x, y } = text._getNonTransformedDimensions();
+	return `\t\t<rect x="${num(-x / 2)}" y="${num(-y / 2)}" width="${num(x)}" height="${num(y)}" style="${paint("fill", color)}" />\n`;
+}
+/**
+* Makes sure every character has its place on the path. Fabric measures
+* characters when it first draws them, and not at all when `path` was
+* assigned directly instead of through `set` or the constructor.
+*/
+function layOut(text) {
+	const measured = () => text._textLines.every((line, index) => line.length === 0 || text.__charBounds?.[index]?.[0]?.renderLeft !== void 0);
+	if (!text.path?.segmentsInfo) {
+		text.setPathInfo();
+		text.initDimensions();
+	}
+	text._textLines.forEach((_, index) => {
+		if (text.__charBounds?.[index]?.[0]?.renderLeft === void 0) text.getLineWidth(index);
+	});
+	if (!measured()) {
+		text.setPathInfo();
+		text.initDimensions();
+		text._textLines.forEach((_, index) => text.getLineWidth(index));
+	}
+}
+/** The SVG for one text on a path, in the same order Fabric draws it on the canvas. */
+function textOnPathToSVG(object, reviver) {
+	const text = object;
+	layOut(text);
+	const strokeFirst = text.paintFirst === "stroke";
+	const body = [
+		fillerDefinitions(text),
+		`\t<g${objectStyle(text)}>\n`,
+		boxBackground(text),
+		guidePath(text),
+		textBackgrounds(text),
+		decorationRects(text, "underline"),
+		strokeFirst ? glyphs(text, "stroke") : glyphs(text, "fill"),
+		strokeFirst ? glyphs(text, "fill") : glyphs(text, "stroke"),
+		decorationRects(text, "overline"),
+		decorationRects(text, "linethrough"),
+		"	</g>\n"
+	];
+	return text._createBaseSVGMarkup(body, {
+		reviver,
+		noStyle: true,
+		withShadow: true
+	});
+}
+function findTextOnPath(canvas) {
+	const found = [];
+	require_walk_objects.walkObjects(canvas.getObjects(), (object) => {
+		if (isTextOnPath(object)) found.push(object);
+	});
+	return found;
+}
+//#endregion
+exports.findTextOnPath = findTextOnPath;
+exports.isTextOnPath = isTextOnPath;
+exports.textOnPathToSVG = textOnPathToSVG;