fabricjs-document-engine 1.2.0 → 1.3.0

package/dist/performance/spatial-index.js

@@ -0,0 +1,78 @@
+//#region src/performance/spatial-index.ts
+const OFFSET = 1 << 20;
+const keyOf = (column, row) => (column + OFFSET) * 2 ** 21 + (row + OFFSET);
+function createSpatialIndex(options = {}) {
+	const cellSize = options.cellSize ?? 256;
+	const maxCells = options.maxCellsPerItem ?? 64;
+	const cells = /* @__PURE__ */ new Map();
+	const placed = /* @__PURE__ */ new Map();
+	const large = /* @__PURE__ */ new Set();
+	const span = (bounds) => [
+		Math.floor(bounds.left / cellSize),
+		Math.floor(bounds.top / cellSize),
+		Math.floor((bounds.left + Math.max(0, bounds.width)) / cellSize),
+		Math.floor((bounds.top + Math.max(0, bounds.height)) / cellSize)
+	];
+	function remove(item) {
+		const where = placed.get(item);
+		if (where === void 0) return false;
+		placed.delete(item);
+		if (where === "large") {
+			large.delete(item);
+			return true;
+		}
+		for (const key of where) {
+			const bucket = cells.get(key);
+			bucket.delete(item);
+			if (bucket.size === 0) cells.delete(key);
+		}
+		return true;
+	}
+	return {
+		set(item, bounds) {
+			remove(item);
+			const [left, top, right, bottom] = span(bounds);
+			const count = (right - left + 1) * (bottom - top + 1);
+			if (!Number.isFinite(count) || count > maxCells) {
+				large.add(item);
+				placed.set(item, "large");
+				return;
+			}
+			const keys = [];
+			for (let column = left; column <= right; column += 1) for (let row = top; row <= bottom; row += 1) {
+				const key = keyOf(column, row);
+				let bucket = cells.get(key);
+				if (!bucket) cells.set(key, bucket = /* @__PURE__ */ new Set());
+				bucket.add(item);
+				keys.push(key);
+			}
+			placed.set(item, keys);
+		},
+		delete: remove,
+		has: (item) => placed.has(item),
+		query(bounds) {
+			const found = new Set(large);
+			const [left, top, right, bottom] = span(bounds);
+			if ((right - left + 1) * (bottom - top + 1) > cells.size) {
+				for (const [key, bucket] of cells) {
+					const column = Math.floor(key / 2 ** 21) - OFFSET;
+					const row = key % 2 ** 21 - OFFSET;
+					if (column >= left && column <= right && row >= top && row <= bottom) bucket.forEach((item) => found.add(item));
+				}
+				return found;
+			}
+			for (let column = left; column <= right; column += 1) for (let row = top; row <= bottom; row += 1) cells.get(keyOf(column, row))?.forEach((item) => found.add(item));
+			return found;
+		},
+		clear() {
+			cells.clear();
+			placed.clear();
+			large.clear();
+		},
+		get size() {
+			return placed.size;
+		}
+	};
+}
+//#endregion
+export { createSpatialIndex };

package/dist/performance.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_batch = require("./performance/batch.cjs");
+const require_spatial_index = require("./performance/spatial-index.cjs");
+const require_dirty_regions = require("./performance/dirty-regions.cjs");
+const require_monitor = require("./performance/monitor.cjs");
+exports.batchCanvasUpdates = require_batch.batchCanvasUpdates;
+exports.createPerformanceMonitor = require_monitor.createPerformanceMonitor;
+exports.createSpatialIndex = require_spatial_index.createSpatialIndex;
+exports.enableDirtyRegionRendering = require_dirty_regions.enableDirtyRegionRendering;

package/dist/performance.d.cts

@@ -0,0 +1,5 @@
+import { batchCanvasUpdates } from "./performance/batch.cjs";
+import { Rect, SpatialIndex, SpatialIndexOptions, createSpatialIndex } from "./performance/spatial-index.cjs";
+import { DirtyRegionOptions, DirtyRegionRenderer, DirtyRegionStats, enableDirtyRegionRendering } from "./performance/dirty-regions.cjs";
+import { FrameStats, PerformanceMonitor, PerformanceMonitorOptions, createPerformanceMonitor } from "./performance/monitor.cjs";
+export { type DirtyRegionOptions, type DirtyRegionRenderer, type DirtyRegionStats, type FrameStats, type PerformanceMonitor, type PerformanceMonitorOptions, type Rect, type SpatialIndex, type SpatialIndexOptions, batchCanvasUpdates, createPerformanceMonitor, createSpatialIndex, enableDirtyRegionRendering };

package/dist/performance.d.ts

@@ -0,0 +1,5 @@
+import { batchCanvasUpdates } from "./performance/batch.js";
+import { Rect, SpatialIndex, SpatialIndexOptions, createSpatialIndex } from "./performance/spatial-index.js";
+import { DirtyRegionOptions, DirtyRegionRenderer, DirtyRegionStats, enableDirtyRegionRendering } from "./performance/dirty-regions.js";
+import { FrameStats, PerformanceMonitor, PerformanceMonitorOptions, createPerformanceMonitor } from "./performance/monitor.js";
+export { type DirtyRegionOptions, type DirtyRegionRenderer, type DirtyRegionStats, type FrameStats, type PerformanceMonitor, type PerformanceMonitorOptions, type Rect, type SpatialIndex, type SpatialIndexOptions, batchCanvasUpdates, createPerformanceMonitor, createSpatialIndex, enableDirtyRegionRendering };

package/dist/performance.js

@@ -0,0 +1,5 @@
+import { batchCanvasUpdates } from "./performance/batch.js";
+import { createSpatialIndex } from "./performance/spatial-index.js";
+import { enableDirtyRegionRendering } from "./performance/dirty-regions.js";
+import { createPerformanceMonitor } from "./performance/monitor.js";
+export { batchCanvasUpdates, createPerformanceMonitor, createSpatialIndex, enableDirtyRegionRendering };

package/dist/text/bounded-textbox.cjs

@@ -0,0 +1,306 @@
+const require_shaping = require("./shaping.cjs");
+let fabric = require("fabric");
+//#region src/text/bounded-textbox.ts
+const BOUNDED_PROPERTIES = [
+	"breakWords",
+	"maxHeight",
+	"overflow",
+	"fit",
+	"minFontSize",
+	"shaping"
+];
+const ELLIPSIS = "…";
+let clipCounter = 0;
+function internals(text) {
+	return text;
+}
+var BoundedTextbox = class BoundedTextbox extends fabric.Textbox {
+	static getDefaults() {
+		return {
+			...super.getDefaults(),
+			...BoundedTextbox.boundedDefaults
+		};
+	}
+	constructor(text, options = {}) {
+		super(text, {
+			...BoundedTextbox.boundedDefaults,
+			...options
+		});
+	}
+	getBaseFontSize() {
+		return this.baseFontSize;
+	}
+	initDimensions() {
+		if (!internals(this).initialized) return;
+		this.midWordBreaks ?? (this.midWordBreaks = /* @__PURE__ */ new Set());
+		this.overflowCache = void 0;
+		this.fitScale = 1;
+		super.initDimensions();
+		if (this.fit === "shrink" && this.maxHeight !== void 0 && this.calcTextHeight() > this.maxHeight) this.shrinkToFit();
+		if (this.maxHeight !== void 0 && this.overflow !== "visible") this.height = Math.min(this.height, this.maxHeight);
+	}
+	shrinkToFit() {
+		const base = this.baseFontSize;
+		const maxHeight = this.maxHeight;
+		let low = Math.max(1, Math.ceil(Math.min(this.minFontSize, base) * 2));
+		let high = Math.floor(base * 2) - 1;
+		let best = low;
+		const layOut = (halfPoints) => {
+			this.fitScale = halfPoints / 2 / base;
+			fabric.Textbox.prototype.initDimensions.call(this);
+			return this.calcTextHeight();
+		};
+		while (low <= high) {
+			const middle = low + high >> 1;
+			if (layOut(middle) <= maxHeight) {
+				best = middle;
+				low = middle + 1;
+			} else high = middle - 1;
+		}
+		if (this.fitScale !== best / 2 / base) layOut(best);
+	}
+	getValueOfPropertyAt(lineIndex, charIndex, property) {
+		const value = super.getValueOfPropertyAt(lineIndex, charIndex, property);
+		if (property === "fontSize" && this.fitScale !== 1 && this.hasOwnFontSize(lineIndex, charIndex)) return value * this.fitScale;
+		return value;
+	}
+	getCompleteStyleDeclaration(lineIndex, charIndex) {
+		const style = super.getCompleteStyleDeclaration(lineIndex, charIndex);
+		if (this.fitScale !== 1 && this.hasOwnFontSize(lineIndex, charIndex)) style.fontSize *= this.fitScale;
+		return style;
+	}
+	hasOwnFontSize(lineIndex, charIndex) {
+		return internals(this)._getStyleDeclaration(lineIndex, charIndex)?.fontSize !== void 0;
+	}
+	_wrapText(lines, desiredWidth) {
+		const self = internals(this);
+		this.midWordBreaks = /* @__PURE__ */ new Set();
+		self.isWrapping = true;
+		const data = self.getGraphemeDataForRender(lines);
+		const wrapped = [];
+		for (let index = 0; index < data.wordsData.length; index += 1) {
+			this.lineBase = wrapped.length;
+			wrapped.push(...this._wrapLine(index, desiredWidth, data));
+		}
+		self.isWrapping = false;
+		return wrapped;
+	}
+	_wrapLine(lineIndex, desiredWidth, data, reservedSpace = 0) {
+		if (this.breakWords === "never" || this.splitByGrapheme) return super._wrapLine(lineIndex, desiredWidth, data, reservedSpace);
+		const self = internals(this);
+		const { wordsData } = data;
+		const additionalSpace = self._getWidthOfCharSpacing();
+		const available = desiredWidth - reservedSpace;
+		const lines = [];
+		let line = [];
+		let lineWidth = 0;
+		let offset = 0;
+		let infixWidth = 0;
+		let lineJustStarted = true;
+		let widestGrapheme = 0;
+		const words = wordsData[lineIndex] ?? [];
+		for (const { word, width: wordWidth } of words) {
+			const wordStart = offset;
+			offset += word.length;
+			if (wordWidth - additionalSpace > available && word.length > 1) {
+				if (!lineJustStarted) lines.push(line);
+				line = [];
+				lineWidth = 0;
+				let previous;
+				for (let index = 0; index < word.length; index += 1) {
+					const grapheme = word[index];
+					const graphemeWidth = self._getGraphemeBox(grapheme, lineIndex, wordStart + index, previous, true).kernedWidth;
+					widestGrapheme = Math.max(widestGrapheme, graphemeWidth - additionalSpace);
+					if (line.length > 0 && lineWidth + graphemeWidth - additionalSpace > available) {
+						this.midWordBreaks.add(this.lineBase + lines.length);
+						lines.push(line);
+						line = [];
+						lineWidth = 0;
+					}
+					line.push(grapheme);
+					lineWidth += graphemeWidth;
+					previous = grapheme;
+				}
+			} else {
+				if (word.length === 1) widestGrapheme = Math.max(widestGrapheme, wordWidth - additionalSpace);
+				lineWidth += infixWidth + wordWidth - additionalSpace;
+				if (lineWidth > available && !lineJustStarted) {
+					lines.push(line);
+					line = [];
+					lineWidth = wordWidth;
+					lineJustStarted = true;
+				} else lineWidth += additionalSpace;
+				if (!lineJustStarted) line.push(" ");
+				line = line.concat(word);
+			}
+			infixWidth = self._measureWord([" "], lineIndex, offset);
+			offset += 1;
+			lineJustStarted = false;
+		}
+		if (words.length > 0) lines.push(line);
+		self.dynamicMinWidth = Math.max(self.dynamicMinWidth, widestGrapheme);
+		return lines;
+	}
+	_measureLine(lineIndex) {
+		const measured = super._measureLine(lineIndex);
+		return this.shaping ? require_shaping.shapeLine(this, lineIndex, measured) : measured;
+	}
+	_measureWord(word, lineIndex, charOffset = 0) {
+		const width = super._measureWord(word, lineIndex, charOffset);
+		return this.shaping ? require_shaping.shapeWord(this, word, lineIndex, charOffset, width) : width;
+	}
+	missingNewlineOffset(lineIndex, skipWrapping) {
+		if (!skipWrapping && this.midWordBreaks?.has(lineIndex)) return 0;
+		return super.missingNewlineOffset(lineIndex, skipWrapping);
+	}
+	overflowLayout() {
+		if (this.overflowCache !== void 0) return this.overflowCache;
+		const maxHeight = this.maxHeight;
+		if (maxHeight === void 0 || this.overflow === "visible") return this.overflowCache = null;
+		const lineCount = internals(this)._textLines.length;
+		let visibleLines = 0;
+		let top = 0;
+		for (let index = 0; index < lineCount; index += 1) {
+			const lineHeight = this.getHeightOfLine(index);
+			if (top + lineHeight / this.lineHeight > maxHeight + .5) break;
+			visibleLines = index + 1;
+			top += lineHeight;
+		}
+		const clipped = visibleLines < lineCount;
+		const layout = {
+			visibleLines,
+			clipped,
+			visibleHeight: top
+		};
+		if (clipped && visibleLines > 0 && this.overflow === "ellipsis" && !this.isEditing && this.direction !== "rtl") layout.ellipsis = this.placeEllipsis(visibleLines - 1, top - this.getHeightOfLine(visibleLines - 1));
+		return this.overflowCache = layout;
+	}
+	placeEllipsis(line, lineTop) {
+		const self = internals(this);
+		this.getLineWidth(line);
+		const bounds = self.__charBounds[line] ?? [];
+		const graphemes = self._textLines[line] ?? [];
+		const lineLeft = self._getLineLeftOffset(line);
+		const styleAt = (index) => this.getCompleteStyleDeclaration(line, Math.max(0, Math.min(index, graphemes.length - 1)));
+		const ellipsisWidth = self._measureChar(ELLIPSIS, styleAt(graphemes.length - 1)).width;
+		let low = 0;
+		let high = graphemes.length;
+		while (low < high) {
+			const middle = low + high + 1 >> 1;
+			if (lineLeft + (bounds[middle]?.left ?? 0) + ellipsisWidth <= this.width) low = middle;
+			else high = middle - 1;
+		}
+		let cut = low;
+		while (cut > 0 && /\s/.test(graphemes[cut - 1])) cut -= 1;
+		const lineHeight = this.getHeightOfLine(line) / this.lineHeight;
+		return {
+			line,
+			cut,
+			x: self._getLeftOffset() + lineLeft + (bounds[cut]?.left ?? 0),
+			baseline: self._getTopOffset() + lineTop + lineHeight * (1 - self._fontSizeFraction),
+			style: styleAt(cut - 1)
+		};
+	}
+	clipRects(layout) {
+		const self = internals(this);
+		const left = self._getLeftOffset();
+		const top = self._getTopOffset();
+		const wide = this.width + this.fontSize * 2;
+		const x = left - this.fontSize;
+		if (!layout.ellipsis) {
+			const bottom = this.overflow === "clip" || this.isEditing ? this.maxHeight : layout.visibleHeight;
+			return [[
+				x,
+				top - this.fontSize,
+				wide,
+				bottom + this.fontSize
+			]];
+		}
+		const { line, x: cutX } = layout.ellipsis;
+		const lineTop = layout.visibleHeight - this.getHeightOfLine(line);
+		const rects = [];
+		if (lineTop > 0) rects.push([
+			x,
+			top - this.fontSize,
+			wide,
+			lineTop + this.fontSize
+		]);
+		rects.push([
+			x,
+			top + lineTop,
+			cutX - x,
+			this.getHeightOfLine(line)
+		]);
+		return rects;
+	}
+	_render(ctx) {
+		const layout = this.overflowLayout();
+		if (!layout || !layout.clipped && this.overflow !== "clip") {
+			super._render(ctx);
+			return;
+		}
+		ctx.save();
+		ctx.beginPath();
+		for (const [x, y, width, height] of this.clipRects(layout)) ctx.rect(x, y, width, height);
+		ctx.clip();
+		super._render(ctx);
+		ctx.restore();
+		const ellipsis = layout.ellipsis;
+		if (!ellipsis) return;
+		ctx.save();
+		ctx.font = internals(this)._getFontDeclaration(ellipsis.style);
+		ctx.textBaseline = "alphabetic";
+		ctx.textAlign = "left";
+		ctx.fillStyle = typeof ellipsis.style.fill === "string" ? ellipsis.style.fill : typeof this.fill === "string" ? this.fill : "#000";
+		ctx.fillText(ELLIPSIS, ellipsis.x, ellipsis.baseline - (ellipsis.style.deltaY ?? 0));
+		ctx.restore();
+	}
+	_toSVG() {
+		const markup = super._toSVG();
+		const layout = this.overflowLayout();
+		if (!layout || !layout.clipped && this.overflow !== "clip") return markup;
+		clipCounter += 1;
+		const id = `fde-bounded-text-${clipCounter}`;
+		const result = [
+			`<clipPath id="${id}">${this.clipRects(layout).map(([x, y, width, height]) => `<rect x="${x}" y="${y}" width="${width}" height="${height}" />`).join("")}</clipPath>\n<g clip-path="url(#${id})">\n`,
+			...markup,
+			"</g>\n"
+		];
+		const ellipsis = layout.ellipsis;
+		if (ellipsis) {
+			const style = ellipsis.style;
+			const fill = typeof style.fill === "string" ? style.fill : typeof this.fill === "string" ? this.fill : "#000";
+			const family = String(style.fontFamily ?? this.fontFamily).replace(/"/g, "'");
+			result.push(`<text xml:space="preserve" x="${ellipsis.x}" y="${ellipsis.baseline - (style.deltaY ?? 0)}" font-family="${family}" font-size="${style.fontSize}" font-style="${style.fontStyle ?? "normal"}" font-weight="${style.fontWeight ?? "normal"}" fill="${fill}">${ELLIPSIS}</text>\n`);
+		}
+		return result;
+	}
+	toObject(propertiesToInclude = []) {
+		const object = super.toObject([...BOUNDED_PROPERTIES, ...propertiesToInclude]);
+		if ("fontSize" in object) object.fontSize = this.baseFontSize;
+		return object;
+	}
+};
+BoundedTextbox.type = "BoundedTextbox";
+BoundedTextbox.textLayoutProperties = [...fabric.Textbox.textLayoutProperties, ...BOUNDED_PROPERTIES];
+BoundedTextbox.cacheProperties = [...fabric.Textbox.cacheProperties, ...BOUNDED_PROPERTIES];
+BoundedTextbox.boundedDefaults = {
+	breakWords: "anywhere",
+	maxHeight: void 0,
+	overflow: "visible",
+	fit: "none",
+	minFontSize: 6,
+	shaping: false
+};
+Object.defineProperty(BoundedTextbox.prototype, "fontSize", {
+	configurable: true,
+	enumerable: true,
+	get() {
+		return this.baseFontSize * (this.fitScale ?? 1);
+	},
+	set(value) {
+		this.baseFontSize = value;
+	}
+});
+//#endregion
+exports.BoundedTextbox = BoundedTextbox;

package/dist/text/bounded-textbox.d.cts

@@ -0,0 +1,53 @@
+import { TextStyleDeclaration, Textbox } from "fabric";
+//#region src/text/bounded-textbox.d.ts
+export type BreakWords = "anywhere" | "never";
+export type TextOverflow = "visible" | "clip" | "ellipsis";
+export type TextFit = "none" | "shrink";
+export interface BoundedTextboxProps {
+  breakWords: BreakWords;
+  maxHeight: number | undefined;
+  overflow: TextOverflow;
+  fit: TextFit;
+  minFontSize: number;
+  shaping: boolean;
+}
+export declare class BoundedTextbox extends Textbox {
+  static override type: string;
+  static override textLayoutProperties: string[];
+  static override cacheProperties: string[];
+  static boundedDefaults: BoundedTextboxProps;
+  static override getDefaults(): Record<string, unknown>;
+  breakWords: BreakWords;
+  maxHeight: number | undefined;
+  overflow: TextOverflow;
+  fit: TextFit;
+  minFontSize: number;
+  shaping: boolean;
+  fitScale: number;
+  private baseFontSize;
+  private midWordBreaks;
+  private lineBase;
+  private overflowCache;
+  constructor(text: string, options?: Partial<BoundedTextboxProps> & ConstructorParameters<typeof Textbox>[1]);
+  getBaseFontSize(): number;
+  override initDimensions(): void;
+  private shrinkToFit;
+  override getValueOfPropertyAt<T extends keyof TextStyleDeclaration>(lineIndex: number, charIndex: number, property: T): this[T];
+  override getCompleteStyleDeclaration(lineIndex: number, charIndex: number): ReturnType<Textbox["getCompleteStyleDeclaration"]>;
+  private hasOwnFontSize;
+  override _wrapText(lines: string[], desiredWidth: number): string[][];
+  override _wrapLine(lineIndex: number, desiredWidth: number, data: never, reservedSpace?: number): string[][];
+  override _measureLine(lineIndex: number): {
+    width: number;
+    numOfSpaces: number;
+  };
+  override _measureWord(word: string[], lineIndex: number, charOffset?: number): number;
+  override missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1;
+  private overflowLayout;
+  private placeEllipsis;
+  private clipRects;
+  override _render(ctx: CanvasRenderingContext2D): void;
+  override _toSVG(): string[];
+  override toObject(propertiesToInclude?: PropertyKey[]): any;
+}
+//#endregion

package/dist/text/bounded-textbox.d.ts

@@ -0,0 +1,53 @@
+import { TextStyleDeclaration, Textbox } from "fabric";
+//#region src/text/bounded-textbox.d.ts
+export type BreakWords = "anywhere" | "never";
+export type TextOverflow = "visible" | "clip" | "ellipsis";
+export type TextFit = "none" | "shrink";
+export interface BoundedTextboxProps {
+  breakWords: BreakWords;
+  maxHeight: number | undefined;
+  overflow: TextOverflow;
+  fit: TextFit;
+  minFontSize: number;
+  shaping: boolean;
+}
+export declare class BoundedTextbox extends Textbox {
+  static override type: string;
+  static override textLayoutProperties: string[];
+  static override cacheProperties: string[];
+  static boundedDefaults: BoundedTextboxProps;
+  static override getDefaults(): Record<string, unknown>;
+  breakWords: BreakWords;
+  maxHeight: number | undefined;
+  overflow: TextOverflow;
+  fit: TextFit;
+  minFontSize: number;
+  shaping: boolean;
+  fitScale: number;
+  private baseFontSize;
+  private midWordBreaks;
+  private lineBase;
+  private overflowCache;
+  constructor(text: string, options?: Partial<BoundedTextboxProps> & ConstructorParameters<typeof Textbox>[1]);
+  getBaseFontSize(): number;
+  override initDimensions(): void;
+  private shrinkToFit;
+  override getValueOfPropertyAt<T extends keyof TextStyleDeclaration>(lineIndex: number, charIndex: number, property: T): this[T];
+  override getCompleteStyleDeclaration(lineIndex: number, charIndex: number): ReturnType<Textbox["getCompleteStyleDeclaration"]>;
+  private hasOwnFontSize;
+  override _wrapText(lines: string[], desiredWidth: number): string[][];
+  override _wrapLine(lineIndex: number, desiredWidth: number, data: never, reservedSpace?: number): string[][];
+  override _measureLine(lineIndex: number): {
+    width: number;
+    numOfSpaces: number;
+  };
+  override _measureWord(word: string[], lineIndex: number, charOffset?: number): number;
+  override missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1;
+  private overflowLayout;
+  private placeEllipsis;
+  private clipRects;
+  override _render(ctx: CanvasRenderingContext2D): void;
+  override _toSVG(): string[];
+  override toObject(propertiesToInclude?: PropertyKey[]): any;
+}
+//#endregion