fabricjs-document-engine 1.0.1 → 1.1.0

package/dist/pdf/page-layout.cjs

@@ -0,0 +1,79 @@
+//#region src/pdf/page-layout.ts
+/** Page sizes in PDF points (1/72 inch), portrait. */
+const PAGE_SIZES = {
+	A3: [841.89, 1190.55],
+	A4: [595.28, 841.89],
+	A5: [419.53, 595.28],
+	Letter: [612, 792],
+	Legal: [612, 1008],
+	Tabloid: [792, 1224]
+};
+/** One CSS pixel is 1/96 inch, and a PDF point 1/72 inch. */
+const POINTS_PER_PIXEL = .75;
+function normalizeMargin(margin) {
+	if (margin === void 0) return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	if (typeof margin === "number") return {
+		top: margin,
+		right: margin,
+		bottom: margin,
+		left: margin
+	};
+	return {
+		top: margin.top ?? 0,
+		right: margin.right ?? 0,
+		bottom: margin.bottom ?? 0,
+		left: margin.left ?? 0
+	};
+}
+function pageSizeFor(page, content, margin) {
+	if (page === "canvas") return [content.width * POINTS_PER_PIXEL + margin.left + margin.right, content.height * POINTS_PER_PIXEL + margin.top + margin.bottom];
+	if (Array.isArray(page)) return [page[0], page[1]];
+	return [...PAGE_SIZES[page]];
+}
+/**
+* Where a canvas of `content` pixels goes on the page. `contain` shows all of
+* it as large as fits, `cover` fills the box and crops, and `none` prints it
+* at its real size (96 pixels to the inch) from the top-left of the box.
+*/
+function layoutPage(content, options = {}) {
+	const margin = normalizeMargin(options.margin);
+	const page = options.page ?? "canvas";
+	let [pageWidth, pageHeight] = pageSizeFor(page, content, margin);
+	const wantsLandscape = options.orientation === "landscape" || options.orientation !== "portrait" && page !== "canvas" && !Array.isArray(page) && content.width > content.height;
+	if (page !== "canvas" && !Array.isArray(page) && wantsLandscape !== pageWidth > pageHeight) [pageWidth, pageHeight] = [pageHeight, pageWidth];
+	const box = {
+		x: margin.left,
+		y: margin.top,
+		width: Math.max(0, pageWidth - margin.left - margin.right),
+		height: Math.max(0, pageHeight - margin.top - margin.bottom)
+	};
+	const fit = options.fit ?? "contain";
+	const scaleX = content.width > 0 ? box.width / content.width : 1;
+	const scaleY = content.height > 0 ? box.height / content.height : 1;
+	const scale = fit === "none" ? POINTS_PER_PIXEL : fit === "cover" ? Math.max(scaleX, scaleY) : Math.min(scaleX, scaleY);
+	const width = content.width * scale;
+	const height = content.height * scale;
+	const centered = fit !== "none";
+	const layout = {
+		pageWidth,
+		pageHeight,
+		orientation: pageWidth > pageHeight ? "landscape" : "portrait",
+		x: centered ? box.x + (box.width - width) / 2 : box.x,
+		y: centered ? box.y + (box.height - height) / 2 : box.y,
+		width,
+		height,
+		scale
+	};
+	if (width > box.width + .01 || height > box.height + .01) layout.clip = box;
+	return layout;
+}
+//#endregion
+exports.PAGE_SIZES = PAGE_SIZES;
+exports.POINTS_PER_PIXEL = POINTS_PER_PIXEL;
+exports.layoutPage = layoutPage;
+exports.normalizeMargin = normalizeMargin;

package/dist/pdf/page-layout.d.cts

@@ -0,0 +1,51 @@
+//#region src/pdf/page-layout.d.ts
+/** Page sizes in PDF points (1/72 inch), portrait. */
+export declare const PAGE_SIZES: Readonly<Record<NamedPageSize, readonly [number, number]>>;
+export type NamedPageSize = "A3" | "A4" | "A5" | "Letter" | "Legal" | "Tabloid";
+/** A named size, `canvas` for a page the size of the canvas, or `[width, height]` in points. */
+export type PdfPageSize = NamedPageSize | "canvas" | readonly [number, number];
+export type PdfOrientation = "portrait" | "landscape" | "auto";
+export type PdfFit = "contain" | "cover" | "none";
+export interface PdfMargin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+/** One CSS pixel is 1/96 inch, and a PDF point 1/72 inch. */
+export declare const POINTS_PER_PIXEL = .75;
+export interface PageLayoutOptions {
+  page?: PdfPageSize;
+  orientation?: PdfOrientation;
+  margin?: number | Partial<PdfMargin>;
+  fit?: PdfFit;
+}
+export interface PageLayout {
+  pageWidth: number;
+  pageHeight: number;
+  orientation: "portrait" | "landscape";
+  /** Where the canvas is drawn, in points. It can be larger than the page with `cover`. */
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  /** Points per canvas pixel. */
+  scale: number;
+  /** The box inside the margins, set when the drawing must be clipped to it. */
+  clip?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}
+/**
+ * Where a canvas of `content` pixels goes on the page. `contain` shows all of
+ * it as large as fits, `cover` fills the box and crops, and `none` prints it
+ * at its real size (96 pixels to the inch) from the top-left of the box.
+ */
+export declare function layoutPage(content: {
+  width: number;
+  height: number;
+}, options?: PageLayoutOptions): PageLayout;
+//#endregion

package/dist/pdf/page-layout.d.ts

@@ -0,0 +1,51 @@
+//#region src/pdf/page-layout.d.ts
+/** Page sizes in PDF points (1/72 inch), portrait. */
+export declare const PAGE_SIZES: Readonly<Record<NamedPageSize, readonly [number, number]>>;
+export type NamedPageSize = "A3" | "A4" | "A5" | "Letter" | "Legal" | "Tabloid";
+/** A named size, `canvas` for a page the size of the canvas, or `[width, height]` in points. */
+export type PdfPageSize = NamedPageSize | "canvas" | readonly [number, number];
+export type PdfOrientation = "portrait" | "landscape" | "auto";
+export type PdfFit = "contain" | "cover" | "none";
+export interface PdfMargin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+/** One CSS pixel is 1/96 inch, and a PDF point 1/72 inch. */
+export declare const POINTS_PER_PIXEL = .75;
+export interface PageLayoutOptions {
+  page?: PdfPageSize;
+  orientation?: PdfOrientation;
+  margin?: number | Partial<PdfMargin>;
+  fit?: PdfFit;
+}
+export interface PageLayout {
+  pageWidth: number;
+  pageHeight: number;
+  orientation: "portrait" | "landscape";
+  /** Where the canvas is drawn, in points. It can be larger than the page with `cover`. */
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  /** Points per canvas pixel. */
+  scale: number;
+  /** The box inside the margins, set when the drawing must be clipped to it. */
+  clip?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}
+/**
+ * Where a canvas of `content` pixels goes on the page. `contain` shows all of
+ * it as large as fits, `cover` fills the box and crops, and `none` prints it
+ * at its real size (96 pixels to the inch) from the top-left of the box.
+ */
+export declare function layoutPage(content: {
+  width: number;
+  height: number;
+}, options?: PageLayoutOptions): PageLayout;
+//#endregion

package/dist/pdf/page-layout.js

@@ -0,0 +1,76 @@
+//#region src/pdf/page-layout.ts
+/** Page sizes in PDF points (1/72 inch), portrait. */
+const PAGE_SIZES = {
+	A3: [841.89, 1190.55],
+	A4: [595.28, 841.89],
+	A5: [419.53, 595.28],
+	Letter: [612, 792],
+	Legal: [612, 1008],
+	Tabloid: [792, 1224]
+};
+/** One CSS pixel is 1/96 inch, and a PDF point 1/72 inch. */
+const POINTS_PER_PIXEL = .75;
+function normalizeMargin(margin) {
+	if (margin === void 0) return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	if (typeof margin === "number") return {
+		top: margin,
+		right: margin,
+		bottom: margin,
+		left: margin
+	};
+	return {
+		top: margin.top ?? 0,
+		right: margin.right ?? 0,
+		bottom: margin.bottom ?? 0,
+		left: margin.left ?? 0
+	};
+}
+function pageSizeFor(page, content, margin) {
+	if (page === "canvas") return [content.width * POINTS_PER_PIXEL + margin.left + margin.right, content.height * POINTS_PER_PIXEL + margin.top + margin.bottom];
+	if (Array.isArray(page)) return [page[0], page[1]];
+	return [...PAGE_SIZES[page]];
+}
+/**
+* Where a canvas of `content` pixels goes on the page. `contain` shows all of
+* it as large as fits, `cover` fills the box and crops, and `none` prints it
+* at its real size (96 pixels to the inch) from the top-left of the box.
+*/
+function layoutPage(content, options = {}) {
+	const margin = normalizeMargin(options.margin);
+	const page = options.page ?? "canvas";
+	let [pageWidth, pageHeight] = pageSizeFor(page, content, margin);
+	const wantsLandscape = options.orientation === "landscape" || options.orientation !== "portrait" && page !== "canvas" && !Array.isArray(page) && content.width > content.height;
+	if (page !== "canvas" && !Array.isArray(page) && wantsLandscape !== pageWidth > pageHeight) [pageWidth, pageHeight] = [pageHeight, pageWidth];
+	const box = {
+		x: margin.left,
+		y: margin.top,
+		width: Math.max(0, pageWidth - margin.left - margin.right),
+		height: Math.max(0, pageHeight - margin.top - margin.bottom)
+	};
+	const fit = options.fit ?? "contain";
+	const scaleX = content.width > 0 ? box.width / content.width : 1;
+	const scaleY = content.height > 0 ? box.height / content.height : 1;
+	const scale = fit === "none" ? POINTS_PER_PIXEL : fit === "cover" ? Math.max(scaleX, scaleY) : Math.min(scaleX, scaleY);
+	const width = content.width * scale;
+	const height = content.height * scale;
+	const centered = fit !== "none";
+	const layout = {
+		pageWidth,
+		pageHeight,
+		orientation: pageWidth > pageHeight ? "landscape" : "portrait",
+		x: centered ? box.x + (box.width - width) / 2 : box.x,
+		y: centered ? box.y + (box.height - height) / 2 : box.y,
+		width,
+		height,
+		scale
+	};
+	if (width > box.width + .01 || height > box.height + .01) layout.clip = box;
+	return layout;
+}
+//#endregion
+export { PAGE_SIZES, POINTS_PER_PIXEL, layoutPage, normalizeMargin };

package/dist/pdf/text-decorations.cjs

@@ -0,0 +1,108 @@
+//#region src/pdf/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));
+}
+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, "");
+	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/pdf/text-decorations.js

@@ -0,0 +1,107 @@
+//#region src/pdf/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));
+}
+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, "");
+	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/pdf.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_page_layout = require("./pdf/page-layout.cjs");
+const require_export_pdf = require("./pdf/export-pdf.cjs");
+exports.PAGE_SIZES = require_page_layout.PAGE_SIZES;
+exports.POINTS_PER_PIXEL = require_page_layout.POINTS_PER_PIXEL;
+exports.exportPdf = require_export_pdf.exportPdf;
+exports.layoutPage = require_page_layout.layoutPage;

package/dist/pdf.d.cts

@@ -0,0 +1,4 @@
+import { PdfFont, PdfFontStyle } from "./pdf/fonts.cjs";
+import { NamedPageSize, PAGE_SIZES, POINTS_PER_PIXEL, PageLayout, PageLayoutOptions, PdfFit, PdfMargin, PdfOrientation, PdfPageSize, layoutPage } from "./pdf/page-layout.cjs";
+import { PdfExportOptions, PdfExportResult, PdfMode, PdfSource, PdfWarning, PdfWarningCode, exportPdf } from "./pdf/export-pdf.cjs";
+export { type NamedPageSize, PAGE_SIZES, POINTS_PER_PIXEL, type PageLayout, type PageLayoutOptions, type PdfExportOptions, type PdfExportResult, type PdfFit, type PdfFont, type PdfFontStyle, type PdfMargin, type PdfMode, type PdfOrientation, type PdfPageSize, type PdfSource, type PdfWarning, type PdfWarningCode, exportPdf, layoutPage };

package/dist/pdf.d.ts

@@ -0,0 +1,4 @@
+import { PdfFont, PdfFontStyle } from "./pdf/fonts.js";
+import { NamedPageSize, PAGE_SIZES, POINTS_PER_PIXEL, PageLayout, PageLayoutOptions, PdfFit, PdfMargin, PdfOrientation, PdfPageSize, layoutPage } from "./pdf/page-layout.js";
+import { PdfExportOptions, PdfExportResult, PdfMode, PdfSource, PdfWarning, PdfWarningCode, exportPdf } from "./pdf/export-pdf.js";
+export { type NamedPageSize, PAGE_SIZES, POINTS_PER_PIXEL, type PageLayout, type PageLayoutOptions, type PdfExportOptions, type PdfExportResult, type PdfFit, type PdfFont, type PdfFontStyle, type PdfMargin, type PdfMode, type PdfOrientation, type PdfPageSize, type PdfSource, type PdfWarning, type PdfWarningCode, exportPdf, layoutPage };

package/dist/pdf.js

@@ -0,0 +1,3 @@
+import { PAGE_SIZES, POINTS_PER_PIXEL, layoutPage } from "./pdf/page-layout.js";
+import { exportPdf } from "./pdf/export-pdf.js";
+export { PAGE_SIZES, POINTS_PER_PIXEL, exportPdf, layoutPage };

package/dist/react/use-layers.cjs

@@ -0,0 +1,53 @@
+const require_layers = require("../commands/layers.cjs");
+let react = require("react");
+//#region src/react/use-layers.ts
+const noLayers = [];
+const subscribeToNothing = () => () => void 0;
+const nothing = () => noLayers;
+function sameLayers(first, second) {
+	return first.length === second.length && first.every((layer, index) => {
+		const other = second[index];
+		return layer.id === other.id && layer.type === other.type && layer.name === other.name && layer.index === other.index && layer.visible === other.visible && layer.locked === other.locked;
+	});
+}
+function createLayerStore(engine) {
+	let snapshot = require_layers.getLayers(engine);
+	const refresh = () => {
+		const next = require_layers.getLayers(engine);
+		if (sameLayers(next, snapshot)) return false;
+		snapshot = next;
+		return true;
+	};
+	return {
+		subscribe(onChange) {
+			const update = () => {
+				if (refresh()) onChange();
+			};
+			const stops = [
+				engine.on("history:change", update),
+				engine.on("document:change", update),
+				engine.on("load:success", update)
+			];
+			engine.canvas.on("object:added", update);
+			engine.canvas.on("object:removed", update);
+			update();
+			return () => {
+				stops.forEach((stop) => stop());
+				engine.canvas.off("object:added", update);
+				engine.canvas.off("object:removed", update);
+			};
+		},
+		getSnapshot: () => snapshot
+	};
+}
+/**
+* The layers of the canvas from top to bottom. It updates after every undo
+* step, load and add or remove. A change that is not recorded, such as
+* `object.set('visible', false)` alone, shows after `engine.commit()`.
+*/
+function useLayers(engine) {
+	const store = (0, react.useMemo)(() => engine ? createLayerStore(engine) : null, [engine]);
+	return (0, react.useSyncExternalStore)(store ? store.subscribe : subscribeToNothing, store ? store.getSnapshot : nothing, nothing);
+}
+//#endregion
+exports.useLayers = useLayers;

package/dist/react/use-layers.d.cts

@@ -0,0 +1,10 @@
+import { DocumentEngine } from "../engine/create-document-engine.cjs";
+import { LayerInfo } from "../commands/layers.cjs";
+//#region src/react/use-layers.d.ts
+/**
+ * The layers of the canvas from top to bottom. It updates after every undo
+ * step, load and add or remove. A change that is not recorded, such as
+ * `object.set('visible', false)` alone, shows after `engine.commit()`.
+ */
+export declare function useLayers(engine: DocumentEngine | null | undefined): LayerInfo[];
+//#endregion

package/dist/react/use-layers.d.ts

@@ -0,0 +1,10 @@
+import { DocumentEngine } from "../engine/create-document-engine.js";
+import { LayerInfo } from "../commands/layers.js";
+//#region src/react/use-layers.d.ts
+/**
+ * The layers of the canvas from top to bottom. It updates after every undo
+ * step, load and add or remove. A change that is not recorded, such as
+ * `object.set('visible', false)` alone, shows after `engine.commit()`.
+ */
+export declare function useLayers(engine: DocumentEngine | null | undefined): LayerInfo[];
+//#endregion

package/dist/react/use-layers.js

@@ -0,0 +1,53 @@
+import { getLayers } from "../commands/layers.js";
+import { useMemo, useSyncExternalStore } from "react";
+//#region src/react/use-layers.ts
+const noLayers = [];
+const subscribeToNothing = () => () => void 0;
+const nothing = () => noLayers;
+function sameLayers(first, second) {
+	return first.length === second.length && first.every((layer, index) => {
+		const other = second[index];
+		return layer.id === other.id && layer.type === other.type && layer.name === other.name && layer.index === other.index && layer.visible === other.visible && layer.locked === other.locked;
+	});
+}
+function createLayerStore(engine) {
+	let snapshot = getLayers(engine);
+	const refresh = () => {
+		const next = getLayers(engine);
+		if (sameLayers(next, snapshot)) return false;
+		snapshot = next;
+		return true;
+	};
+	return {
+		subscribe(onChange) {
+			const update = () => {
+				if (refresh()) onChange();
+			};
+			const stops = [
+				engine.on("history:change", update),
+				engine.on("document:change", update),
+				engine.on("load:success", update)
+			];
+			engine.canvas.on("object:added", update);
+			engine.canvas.on("object:removed", update);
+			update();
+			return () => {
+				stops.forEach((stop) => stop());
+				engine.canvas.off("object:added", update);
+				engine.canvas.off("object:removed", update);
+			};
+		},
+		getSnapshot: () => snapshot
+	};
+}
+/**
+* The layers of the canvas from top to bottom. It updates after every undo
+* step, load and add or remove. A change that is not recorded, such as
+* `object.set('visible', false)` alone, shows after `engine.commit()`.
+*/
+function useLayers(engine) {
+	const store = useMemo(() => engine ? createLayerStore(engine) : null, [engine]);
+	return useSyncExternalStore(store ? store.subscribe : subscribeToNothing, store ? store.getSnapshot : nothing, nothing);
+}
+//#endregion
+export { useLayers };

package/dist/react.cjs

@@ -3,9 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_use_document_engine = require("./react/use-document-engine.cjs");
 const require_use_document_state = require("./react/use-document-state.cjs");
 const require_use_document_event = require("./react/use-document-event.cjs");
+const require_use_layers = require("./react/use-layers.cjs");
 const require_engine_context = require("./react/engine-context.cjs");
 exports.DocumentEngineProvider = require_engine_context.DocumentEngineProvider;
 exports.useDocumentEngine = require_use_document_engine.useDocumentEngine;
 exports.useDocumentEvent = require_use_document_event.useDocumentEvent;
 exports.useDocumentState = require_use_document_state.useDocumentState;
 exports.useEngine = require_engine_context.useEngine;
+exports.useLayers = require_use_layers.useLayers;

package/dist/react.d.cts

@@ -1,6 +1,8 @@
 import { DocumentState } from "./state/document-state-store.cjs";
+import { LayerInfo } from "./commands/layers.cjs";
 import { ReactEngineOptions, useDocumentEngine } from "./react/use-document-engine.cjs";
 import { useDocumentState } from "./react/use-document-state.cjs";
 import { useDocumentEvent } from "./react/use-document-event.cjs";
+import { useLayers } from "./react/use-layers.cjs";
 import { DocumentEngineProvider, DocumentEngineProviderProps, useEngine } from "./react/engine-context.cjs";
-export { DocumentEngineProvider, type DocumentEngineProviderProps, type DocumentState, type ReactEngineOptions, useDocumentEngine, useDocumentEvent, useDocumentState, useEngine };
+export { DocumentEngineProvider, type DocumentEngineProviderProps, type DocumentState, type LayerInfo, type ReactEngineOptions, useDocumentEngine, useDocumentEvent, useDocumentState, useEngine, useLayers };

package/dist/react.d.ts

@@ -1,6 +1,8 @@
 import { DocumentState } from "./state/document-state-store.js";
+import { LayerInfo } from "./commands/layers.js";
 import { ReactEngineOptions, useDocumentEngine } from "./react/use-document-engine.js";
 import { useDocumentState } from "./react/use-document-state.js";
 import { useDocumentEvent } from "./react/use-document-event.js";
+import { useLayers } from "./react/use-layers.js";
 import { DocumentEngineProvider, DocumentEngineProviderProps, useEngine } from "./react/engine-context.js";
-export { DocumentEngineProvider, type DocumentEngineProviderProps, type DocumentState, type ReactEngineOptions, useDocumentEngine, useDocumentEvent, useDocumentState, useEngine };
+export { DocumentEngineProvider, type DocumentEngineProviderProps, type DocumentState, type LayerInfo, type ReactEngineOptions, useDocumentEngine, useDocumentEvent, useDocumentState, useEngine, useLayers };