fabricjs-document-engine 1.1.0 → 1.3.0

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/{pdf → export/svg}/text-decorations.cjs

@@ -1,4 +1,4 @@
-//#region src/pdf/text-decorations.ts
+//#region src/export/svg/text-decorations.ts
 const DECORATIONS = [
 	"underline",
 	"overline",
@@ -16,7 +16,7 @@ function isText(object) {
 }
 function hasStraightDecorations(object) {
 	if (!isText(object)) return false;
-	return DECORATIONS.some((type) => object[type] || object.styleHas(type));
+	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 "";
@@ -90,7 +90,7 @@ function decorationRects(text, type) {
 /** 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, "");
+	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,

package/dist/{pdf → export/svg}/text-decorations.js

@@ -1,4 +1,4 @@
-//#region src/pdf/text-decorations.ts
+//#region src/export/svg/text-decorations.ts
 const DECORATIONS = [
 	"underline",
 	"overline",
@@ -16,7 +16,7 @@ function isText(object) {
 }
 function hasStraightDecorations(object) {
 	if (!isText(object)) return false;
-	return DECORATIONS.some((type) => object[type] || object.styleHas(type));
+	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 "";
@@ -90,7 +90,7 @@ function decorationRects(text, type) {
 /** 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, "");
+	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,

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

@@ -1,5 +1,4 @@
 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) {
@@ -230,14 +229,6 @@ function textOnPathToSVG(object, reviver) {
 		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) => {
@@ -249,4 +240,3 @@ function findTextOnPath(canvas) {
 exports.findTextOnPath = findTextOnPath;
 exports.isTextOnPath = isTextOnPath;
 exports.textOnPathToSVG = textOnPathToSVG;
-exports.withTextOnPathSVG = withTextOnPathSVG;

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

@@ -1,5 +1,4 @@
 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) {
@@ -230,14 +229,6 @@ function textOnPathToSVG(object, reviver) {
 		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) => {
@@ -246,4 +237,4 @@ function findTextOnPath(canvas) {
 	return found;
 }
 //#endregion
-export { findTextOnPath, isTextOnPath, textOnPathToSVG, withTextOnPathSVG };
+export { findTextOnPath, isTextOnPath, textOnPathToSVG };

package/dist/fabric/fabric-adapter.cjs

@@ -1,3 +1,4 @@
+const require_page_state = require("./page-state.cjs");
 const require_concurrency = require("../util/concurrency.cjs");
 const require_walk_objects = require("./walk-objects.cjs");
 let fabric = require("fabric");
@@ -25,7 +26,7 @@ function serializeCanvas(canvas, propertiesToInclude) {
 	keepOriginExplicit(canvas.getObjects(), objects);
 	return {
 		version: serialized.version,
-		background: serialized.background,
+		...require_page_state.pickPageFields(serialized),
 		objects
 	};
 }
@@ -73,11 +74,11 @@ function abortError() {
 * 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 }) {
+async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObjects, beforeSwap }) {
 	const total = content.objects.length;
 	const size = Math.max(1, Math.floor(chunkSize));
 	const created = [];
-	const background = fabric.util.enlivenObjectEnlivables({ backgroundColor: content.background }, { signal });
+	const background = require_page_state.enlivenPage(content, signal);
 	background.catch(() => void 0);
 	try {
 		onObjects?.(0, total);
@@ -93,6 +94,7 @@ async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObje
 		}
 		const enlivenedBackground = await background;
 		if (signal.aborted) throw abortError();
+		beforeSwap?.();
 		const renderOnAddRemove = canvas.renderOnAddRemove;
 		canvas.renderOnAddRemove = false;
 		try {

package/dist/fabric/fabric-adapter.js

@@ -1,3 +1,4 @@
+import { enlivenPage, pickPageFields } from "./page-state.js";
 import { yieldToEventLoop } from "../util/concurrency.js";
 import { childrenOf, walkObjects } from "./walk-objects.js";
 import { util } from "fabric";
@@ -25,7 +26,7 @@ function serializeCanvas(canvas, propertiesToInclude) {
 	keepOriginExplicit(canvas.getObjects(), objects);
 	return {
 		version: serialized.version,
-		background: serialized.background,
+		...pickPageFields(serialized),
 		objects
 	};
 }
@@ -73,11 +74,11 @@ function abortError() {
 * 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 }) {
+async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObjects, beforeSwap }) {
 	const total = content.objects.length;
 	const size = Math.max(1, Math.floor(chunkSize));
 	const created = [];
-	const background = util.enlivenObjectEnlivables({ backgroundColor: content.background }, { signal });
+	const background = enlivenPage(content, signal);
 	background.catch(() => void 0);
 	try {
 		onObjects?.(0, total);
@@ -93,6 +94,7 @@ async function loadIntoCanvas(canvas, content, { signal, chunkSize = 100, onObje
 		}
 		const enlivenedBackground = await background;
 		if (signal.aborted) throw abortError();
+		beforeSwap?.();
 		const renderOnAddRemove = canvas.renderOnAddRemove;
 		canvas.renderOnAddRemove = false;
 		try {

package/dist/fabric/object-registry.cjs

@@ -2,7 +2,13 @@ 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", "name"]);
+	const extraProperties = /* @__PURE__ */ new Set([
+		"id",
+		"name",
+		"svgId",
+		"svgClass",
+		"svgData"
+	]);
 	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,13 @@ 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", "name"]);
+	const extraProperties = /* @__PURE__ */ new Set([
+		"id",
+		"name",
+		"svgId",
+		"svgClass",
+		"svgData"
+	]);
 	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\"");

package/dist/fabric/page-state.cjs

@@ -0,0 +1,69 @@
+let fabric = require("fabric");
+//#region src/fabric/page-state.ts
+/** The page fields saved with a document, besides its size. */
+const PAGE_FIELDS = [
+	"background",
+	"backgroundImage",
+	"overlay",
+	"overlayImage",
+	"clipPath"
+];
+/** Copies the page fields that are set from serialized canvas output. */
+function pickPageFields(source) {
+	const picked = {};
+	for (const field of PAGE_FIELDS) if (source[field] !== void 0 && source[field] !== null) picked[field] = source[field];
+	return picked;
+}
+/** The canvas-level objects that can hold images or other objects: background and overlay images and the mask. */
+function pageObjects(page) {
+	const objects = [];
+	for (const field of [
+		"backgroundImage",
+		"overlayImage",
+		"clipPath"
+	]) {
+		const value = page[field];
+		if (typeof value === "object" && value !== null && typeof value.type === "string") objects.push(value);
+	}
+	return objects;
+}
+/**
+* Creates the live values for `canvas.set`: Fabric objects for the images
+* and mask, gradients and patterns for colors. Missing fields become
+* `undefined`, which clears them on the canvas.
+*/
+function enlivenPage(page, signal) {
+	return fabric.util.enlivenObjectEnlivables({
+		backgroundColor: page.background,
+		backgroundImage: page.backgroundImage,
+		overlayColor: page.overlay,
+		overlayImage: page.overlayImage,
+		clipPath: page.clipPath
+	}, signal ? { signal } : {});
+}
+/** Applies a page state: the size first, then the enlivened fields. */
+async function applyPage(canvas, page) {
+	const live = await enlivenPage(page);
+	if (canvas.getWidth() !== page.width || canvas.getHeight() !== page.height) canvas.setDimensions({
+		width: page.width,
+		height: page.height
+	});
+	canvas.set(live);
+	canvas.requestRenderAll();
+}
+/**
+* Every top-level object a document holds: the objects on the page, then its
+* background image, overlay image and mask. Asset checks, address checks and
+* type checks walk this list, so they cover the page as well.
+*/
+function documentObjects(document) {
+	const page = document.canvas ? pageObjects(document.canvas) : [];
+	return page.length === 0 ? [...document.objects] : [...document.objects, ...page];
+}
+//#endregion
+exports.PAGE_FIELDS = PAGE_FIELDS;
+exports.applyPage = applyPage;
+exports.documentObjects = documentObjects;
+exports.enlivenPage = enlivenPage;
+exports.pageObjects = pageObjects;
+exports.pickPageFields = pickPageFields;

package/dist/fabric/page-state.js

@@ -0,0 +1,64 @@
+import { util } from "fabric";
+//#region src/fabric/page-state.ts
+/** The page fields saved with a document, besides its size. */
+const PAGE_FIELDS = [
+	"background",
+	"backgroundImage",
+	"overlay",
+	"overlayImage",
+	"clipPath"
+];
+/** Copies the page fields that are set from serialized canvas output. */
+function pickPageFields(source) {
+	const picked = {};
+	for (const field of PAGE_FIELDS) if (source[field] !== void 0 && source[field] !== null) picked[field] = source[field];
+	return picked;
+}
+/** The canvas-level objects that can hold images or other objects: background and overlay images and the mask. */
+function pageObjects(page) {
+	const objects = [];
+	for (const field of [
+		"backgroundImage",
+		"overlayImage",
+		"clipPath"
+	]) {
+		const value = page[field];
+		if (typeof value === "object" && value !== null && typeof value.type === "string") objects.push(value);
+	}
+	return objects;
+}
+/**
+* Creates the live values for `canvas.set`: Fabric objects for the images
+* and mask, gradients and patterns for colors. Missing fields become
+* `undefined`, which clears them on the canvas.
+*/
+function enlivenPage(page, signal) {
+	return util.enlivenObjectEnlivables({
+		backgroundColor: page.background,
+		backgroundImage: page.backgroundImage,
+		overlayColor: page.overlay,
+		overlayImage: page.overlayImage,
+		clipPath: page.clipPath
+	}, signal ? { signal } : {});
+}
+/** Applies a page state: the size first, then the enlivened fields. */
+async function applyPage(canvas, page) {
+	const live = await enlivenPage(page);
+	if (canvas.getWidth() !== page.width || canvas.getHeight() !== page.height) canvas.setDimensions({
+		width: page.width,
+		height: page.height
+	});
+	canvas.set(live);
+	canvas.requestRenderAll();
+}
+/**
+* Every top-level object a document holds: the objects on the page, then its
+* background image, overlay image and mask. Asset checks, address checks and
+* type checks walk this list, so they cover the page as well.
+*/
+function documentObjects(document) {
+	const page = document.canvas ? pageObjects(document.canvas) : [];
+	return page.length === 0 ? [...document.objects] : [...document.objects, ...page];
+}
+//#endregion
+export { PAGE_FIELDS, applyPage, documentObjects, enlivenPage, pageObjects, pickPageFields };