fabricjs-document-engine 1.0.1 → 1.1.0

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

@@ -0,0 +1,252 @@
+const require_walk_objects = require("../../fabric/walk-objects.cjs");
+const require_overrides = require("./overrides.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
+	});
+}
+/**
+* Runs `work` while every text on a path on the canvas, including text in
+* groups, writes the SVG from this module. Everything else keeps Fabric's
+* SVG. Returns how many objects were handled.
+*/
+function withTextOnPathSVG(canvas, work) {
+	return require_overrides.withSvgOverrides(canvas, (object) => isTextOnPath(object) ? (reviver) => textOnPathToSVG(object, reviver) : void 0, work);
+}
+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;
+exports.withTextOnPathSVG = withTextOnPathSVG;

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

@@ -0,0 +1,249 @@
+import { walkObjects } from "../../fabric/walk-objects.js";
+import { withSvgOverrides } from "./overrides.js";
+import { Color, util } from "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 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 = 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
+	});
+}
+/**
+* Runs `work` while every text on a path on the canvas, including text in
+* groups, writes the SVG from this module. Everything else keeps Fabric's
+* SVG. Returns how many objects were handled.
+*/
+function withTextOnPathSVG(canvas, work) {
+	return withSvgOverrides(canvas, (object) => isTextOnPath(object) ? (reviver) => textOnPathToSVG(object, reviver) : void 0, work);
+}
+function findTextOnPath(canvas) {
+	const found = [];
+	walkObjects(canvas.getObjects(), (object) => {
+		if (isTextOnPath(object)) found.push(object);
+	});
+	return found;
+}
+//#endregion
+export { findTextOnPath, isTextOnPath, textOnPathToSVG, withTextOnPathSVG };

package/dist/fabric/fabric-adapter.cjs

@@ -1,3 +1,4 @@
+const require_concurrency = require("../util/concurrency.cjs");
 const require_walk_objects = require("./walk-objects.cjs");
 let fabric = require("fabric");
 //#region src/fabric/fabric-adapter.ts
@@ -61,11 +62,51 @@ const strictReviver = refuseMissingObjects;
 function createObjects(serializedObjects) {
 	return fabric.util.enlivenObjects(serializedObjects, { reviver: strictReviver });
 }
-async function loadIntoCanvas(canvas, content, signal) {
-	const json = { objects: content.objects };
-	if (content.version !== void 0) json.version = content.version;
-	if (content.background !== void 0) json.background = content.background;
-	await canvas.loadFromJSON(json, strictReviver, { signal });
+function abortError() {
+	const error = /* @__PURE__ */ new Error("aborted");
+	error.name = "AbortError";
+	return error;
+}
+/**
+* Loads content like `canvas.loadFromJSON`, but creates the objects a chunk at
+* a time and yields to the browser in between, so big documents do not
+* freeze the page. Like Fabric, every object is created before the canvas is
+* cleared: a failure or cancel leaves the old content in place.
+*/
+async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObjects }) {
+	const total = content.objects.length;
+	const size = Math.max(1, Math.floor(chunkSize));
+	const created = [];
+	const background = fabric.util.enlivenObjectEnlivables({ backgroundColor: content.background }, { signal });
+	background.catch(() => void 0);
+	try {
+		onObjects?.(0, total);
+		for (let start = 0; start < total; start += size) {
+			if (signal.aborted) throw abortError();
+			const chunk = content.objects.slice(start, start + size);
+			created.push(...await fabric.util.enlivenObjects(chunk, {
+				reviver: strictReviver,
+				signal
+			}));
+			onObjects?.(created.length, total);
+			if (start + size < total) await require_concurrency.yieldToEventLoop();
+		}
+		const enlivenedBackground = await background;
+		if (signal.aborted) throw abortError();
+		const renderOnAddRemove = canvas.renderOnAddRemove;
+		canvas.renderOnAddRemove = false;
+		try {
+			canvas.clear();
+			canvas.add(...created);
+			if (content.version !== void 0) canvas.set({ version: content.version });
+			canvas.set(enlivenedBackground);
+		} finally {
+			canvas.renderOnAddRemove = renderOnAddRemove;
+		}
+	} catch (error) {
+		if (!created.some((object) => object.canvas === canvas)) created.forEach((object) => object.dispose?.());
+		throw error;
+	}
 }
 //#endregion
 exports.createObjects = createObjects;

package/dist/fabric/fabric-adapter.js

@@ -1,3 +1,4 @@
+import { yieldToEventLoop } from "../util/concurrency.js";
 import { childrenOf, walkObjects } from "./walk-objects.js";
 import { util } from "fabric";
 //#region src/fabric/fabric-adapter.ts
@@ -61,11 +62,51 @@ const strictReviver = refuseMissingObjects;
 function createObjects(serializedObjects) {
 	return util.enlivenObjects(serializedObjects, { reviver: strictReviver });
 }
-async function loadIntoCanvas(canvas, content, signal) {
-	const json = { objects: content.objects };
-	if (content.version !== void 0) json.version = content.version;
-	if (content.background !== void 0) json.background = content.background;
-	await canvas.loadFromJSON(json, strictReviver, { signal });
+function abortError() {
+	const error = /* @__PURE__ */ new Error("aborted");
+	error.name = "AbortError";
+	return error;
+}
+/**
+* Loads content like `canvas.loadFromJSON`, but creates the objects a chunk at
+* a time and yields to the browser in between, so big documents do not
+* freeze the page. Like Fabric, every object is created before the canvas is
+* cleared: a failure or cancel leaves the old content in place.
+*/
+async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObjects }) {
+	const total = content.objects.length;
+	const size = Math.max(1, Math.floor(chunkSize));
+	const created = [];
+	const background = util.enlivenObjectEnlivables({ backgroundColor: content.background }, { signal });
+	background.catch(() => void 0);
+	try {
+		onObjects?.(0, total);
+		for (let start = 0; start < total; start += size) {
+			if (signal.aborted) throw abortError();
+			const chunk = content.objects.slice(start, start + size);
+			created.push(...await util.enlivenObjects(chunk, {
+				reviver: strictReviver,
+				signal
+			}));
+			onObjects?.(created.length, total);
+			if (start + size < total) await yieldToEventLoop();
+		}
+		const enlivenedBackground = await background;
+		if (signal.aborted) throw abortError();
+		const renderOnAddRemove = canvas.renderOnAddRemove;
+		canvas.renderOnAddRemove = false;
+		try {
+			canvas.clear();
+			canvas.add(...created);
+			if (content.version !== void 0) canvas.set({ version: content.version });
+			canvas.set(enlivenedBackground);
+		} finally {
+			canvas.renderOnAddRemove = renderOnAddRemove;
+		}
+	} catch (error) {
+		if (!created.some((object) => object.canvas === canvas)) created.forEach((object) => object.dispose?.());
+		throw error;
+	}
 }
 //#endregion
 export { createObjects, loadIntoCanvas, serializeCanvas };

package/dist/fabric/object-registry.cjs

@@ -2,7 +2,7 @@ const require_errors = require("../engine/errors.cjs");
 let fabric = require("fabric");
 //#region src/fabric/object-registry.ts
 function createObjectRegistry(initialDefinitions = []) {
-	const extraProperties = /* @__PURE__ */ new Set(["id"]);
+	const extraProperties = /* @__PURE__ */ new Set(["id", "name"]);
 	function register(definition) {
 		const { fabricClass } = definition;
 		if (typeof fabricClass?.type !== "string" || fabricClass.type.length === 0) throw new require_errors.DocumentEngineError("INVALID_CUSTOM_OBJECT", "A custom object class needs a static \"type\" string, for example: static type = \"Sticker\"");

package/dist/fabric/object-registry.js

@@ -2,7 +2,7 @@ import { DocumentEngineError } from "../engine/errors.js";
 import { classRegistry } from "fabric";
 //#region src/fabric/object-registry.ts
 function createObjectRegistry(initialDefinitions = []) {
-	const extraProperties = /* @__PURE__ */ new Set(["id"]);
+	const extraProperties = /* @__PURE__ */ new Set(["id", "name"]);
 	function register(definition) {
 		const { fabricClass } = definition;
 		if (typeof fabricClass?.type !== "string" || fabricClass.type.length === 0) throw new DocumentEngineError("INVALID_CUSTOM_OBJECT", "A custom object class needs a static \"type\" string, for example: static type = \"Sticker\"");