fabricjs-document-engine 1.2.0 → 1.3.0

package/dist/text/vertical-text.js

@@ -0,0 +1,336 @@
+import { Orientation, orientationOf } from "./vertical-orientation.js";
+import { IText, util } from "fabric";
+//#region src/text/vertical-text.ts
+const VERTICAL_PROPERTIES = ["textOrientation", "combineUpright"];
+const UPRIGHT = 0;
+const ROTATED = 1;
+const SHIFTED = 2;
+const COMBINED = 3;
+const COMBINED_REST = 4;
+const VERTICAL_KEYS = {
+	9: "exitEditing",
+	27: "exitEditing",
+	33: "moveCursorLeft",
+	34: "moveCursorRight",
+	35: "moveCursorRight",
+	36: "moveCursorLeft",
+	37: "moveCursorDown",
+	38: "moveCursorLeft",
+	39: "moveCursorUp",
+	40: "moveCursorRight"
+};
+const escapeXml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+const isDigit = (grapheme) => grapheme !== void 0 && /^[0-9]$/.test(grapheme);
+function paint(value, ctx) {
+	if (typeof value === "string") return value;
+	return value?.toLive?.(ctx) ?? "#000";
+}
+var VerticalText = class VerticalText extends IText {
+	static getDefaults() {
+		return {
+			...super.getDefaults(),
+			...VerticalText.verticalDefaults
+		};
+	}
+	constructor(text, options = {}) {
+		super(text, {
+			...VerticalText.verticalDefaults,
+			...options
+		});
+	}
+	self() {
+		return this;
+	}
+	kindsOf(lineIndex) {
+		const line = this.self()._textLines[lineIndex] ?? [];
+		const kinds = new Uint8Array(line.length);
+		for (let index = 0; index < line.length; index += 1) {
+			if (this.textOrientation === "upright") {
+				kinds[index] = UPRIGHT;
+				continue;
+			}
+			const orientation = orientationOf(line[index]);
+			kinds[index] = orientation === Orientation.Upright ? UPRIGHT : orientation === Orientation.UprightShifted ? SHIFTED : ROTATED;
+		}
+		if (this.combineUpright === "digits2") for (let index = 0; index < line.length;) {
+			if (!isDigit(line[index])) {
+				index += 1;
+				continue;
+			}
+			let end = index;
+			while (isDigit(line[end])) end += 1;
+			if (end - index <= 2) {
+				kinds[index] = COMBINED;
+				for (let rest = index + 1; rest < end; rest += 1) kinds[rest] = COMBINED_REST;
+			}
+			index = end;
+		}
+		return kinds;
+	}
+	kindAt(lineIndex, charIndex) {
+		return this.glyphKinds?.[lineIndex]?.[charIndex] ?? ROTATED;
+	}
+	_measureLine(lineIndex) {
+		this.glyphKinds ?? (this.glyphKinds = []);
+		this.glyphKinds[lineIndex] = this.kindsOf(lineIndex);
+		return super._measureLine(lineIndex);
+	}
+	_getGraphemeBox(grapheme, lineIndex, charIndex, previous, skipLeft) {
+		const kind = this.kindAt(lineIndex, charIndex);
+		const previousTurns = charIndex > 0 && this.kindAt(lineIndex, charIndex - 1) === ROTATED;
+		const box = super._getGraphemeBox(grapheme, lineIndex, charIndex, kind === ROTATED && previousTurns ? previous : void 0, true);
+		if (kind !== ROTATED) {
+			const spacing = this.self().charSpacing !== 0 ? this.self()._getWidthOfCharSpacing() : 0;
+			box.width = box.kernedWidth = kind === COMBINED_REST ? 0 : box.height + spacing;
+		}
+		if (!skipLeft && charIndex > 0) {
+			const before = this.self().__charBounds[lineIndex][charIndex - 1];
+			box.left = before.left + before.width + box.kernedWidth - box.width;
+		}
+		return box;
+	}
+	initDimensions() {
+		super.initDimensions();
+		const along = this.height;
+		this.height = this.width;
+		this.width = along;
+	}
+	_getLineLeftOffset(lineIndex) {
+		const free = this.height - this.getLineWidth(lineIndex);
+		if (this.textAlign.includes("center")) return free / 2;
+		if (this.textAlign.endsWith("right")) return free;
+		return 0;
+	}
+	column(lineIndex) {
+		let right = this.width / 2;
+		for (let index = 0; index < lineIndex; index += 1) right -= this.getHeightOfLine(index);
+		const thickness = this.getHeightOfLine(lineIndex);
+		return {
+			right,
+			em: thickness / this.lineHeight,
+			thickness,
+			top: -this.height / 2 + this._getLineLeftOffset(lineIndex)
+		};
+	}
+	_render(ctx) {
+		const self = this.self();
+		const fraction = self._fontSizeFraction;
+		ctx.save();
+		for (let line = 0; line < self._textLines.length; line += 1) {
+			const graphemes = self._textLines[line];
+			const bounds = self.__charBounds[line] ?? [];
+			const { right, em, top } = this.column(line);
+			const center = right - em / 2;
+			let index = 0;
+			while (index < graphemes.length) {
+				const kind = this.kindAt(line, index);
+				const style = this.getCompleteStyleDeclaration(line, index);
+				const y = top + bounds[index].left;
+				let end = index + 1;
+				if (kind === ROTATED) while (end < graphemes.length && this.kindAt(line, end) === ROTATED && !util.hasStyleChanged(style, this.getCompleteStyleDeclaration(line, end), false)) end += 1;
+				else if (kind === COMBINED) while (end < graphemes.length && this.kindAt(line, end) === COMBINED_REST) end += 1;
+				const text = graphemes.slice(index, end).join("");
+				const advance = top + bounds[end - 1].left + bounds[end - 1].width - y;
+				this.drawBackgroundAndLines(ctx, style, right, em, y, advance);
+				if (text.trim() !== "") {
+					ctx.font = self._getFontDeclaration(style);
+					ctx.fillStyle = paint(style.fill, ctx);
+					ctx.textBaseline = "alphabetic";
+					const baseline = (.5 - fraction) * style.fontSize;
+					ctx.save();
+					if (kind === ROTATED) {
+						ctx.textAlign = "left";
+						ctx.translate(center, y);
+						ctx.rotate(Math.PI / 2);
+						this.drawGlyphs(ctx, style, text, 0, baseline);
+					} else {
+						ctx.textAlign = "center";
+						let x = center;
+						let glyphY = y + style.fontSize / 2 + baseline;
+						if (kind === SHIFTED) {
+							x += style.fontSize / 2;
+							glyphY -= style.fontSize / 2;
+						}
+						if (kind === COMBINED) {
+							const width = ctx.measureText(text).width;
+							const squeeze = Math.min(1, style.fontSize * .95 / width);
+							ctx.translate(x, glyphY);
+							ctx.scale(squeeze, 1);
+							x = 0;
+							glyphY = 0;
+						}
+						this.drawGlyphs(ctx, style, text, x, glyphY);
+					}
+					ctx.restore();
+				}
+				index = end;
+			}
+		}
+		ctx.restore();
+	}
+	drawGlyphs(ctx, style, text, x, y) {
+		ctx.fillText(text, x, y);
+		if (style.stroke && style.strokeWidth) {
+			ctx.strokeStyle = paint(style.stroke, ctx);
+			ctx.lineWidth = style.strokeWidth;
+			ctx.strokeText(text, x, y);
+		}
+	}
+	drawBackgroundAndLines(ctx, style, right, em, y, advance) {
+		if (style.textBackgroundColor) {
+			ctx.fillStyle = paint(style.textBackgroundColor, ctx);
+			ctx.fillRect(right - em, y, em, advance);
+		}
+		const thickness = style.fontSize / 15;
+		ctx.fillStyle = paint(style.textDecorationColor || style.fill, ctx);
+		if (style.underline) ctx.fillRect(right - thickness, y, thickness, advance);
+		if (style.overline) ctx.fillRect(right - em, y, thickness, advance);
+		if (style.linethrough) ctx.fillRect(right - em / 2 - thickness / 2, y, thickness, advance);
+	}
+	cursorPoint(index) {
+		const { lineIndex, charIndex } = this.get2DCursorLocation(index);
+		const { right, em, top } = this.column(lineIndex);
+		const bounds = this.self().__charBounds[lineIndex] ?? [];
+		return {
+			x: right - em,
+			y: top + (bounds[charIndex]?.left ?? 0),
+			width: em,
+			line: lineIndex,
+			char: charIndex
+		};
+	}
+	_getCursorBoundaries(index = this.selectionStart) {
+		const point = this.cursorPoint(index);
+		const charHeight = this.getValueOfPropertyAt(point.line, Math.max(0, point.char - 1), "fontSize") * this.lineHeight;
+		return {
+			left: point.x,
+			top: point.y - charHeight,
+			leftOffset: 0,
+			topOffset: 0
+		};
+	}
+	_renderCursor(ctx, _boundaries, selectionStart) {
+		const point = this.cursorPoint(selectionStart);
+		const scale = this.getObjectScaling().y * (this.canvas?.getZoom() ?? 1);
+		const thickness = this.cursorWidth / scale;
+		ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(point.line, Math.max(0, point.char - 1), "fill");
+		ctx.globalAlpha = this.self()._currentCursorOpacity;
+		ctx.fillRect(point.x, point.y - thickness / 2, point.width, thickness);
+	}
+	_renderSelection(ctx, selection) {
+		const start = this.get2DCursorLocation(selection.selectionStart);
+		const end = this.get2DCursorLocation(selection.selectionEnd);
+		const charBounds = this.self().__charBounds;
+		const composing = Boolean(this.inCompositionMode);
+		ctx.fillStyle = composing ? this.cursorColor || "#000" : this.selectionColor;
+		for (let line = start.lineIndex; line <= end.lineIndex; line += 1) {
+			const { right, em, thickness, top } = this.column(line);
+			const from = line === start.lineIndex ? charBounds[line]?.[start.charIndex]?.left ?? 0 : 0;
+			const to = line === end.lineIndex ? charBounds[line]?.[end.charIndex]?.left ?? 0 : this.getLineWidth(line) || em / 4;
+			if (composing) ctx.fillRect(right - 1, top + from, 1, to - from);
+			else ctx.fillRect(right - (line === end.lineIndex ? em : thickness), top + from, line === end.lineIndex ? em : thickness, to - from);
+		}
+	}
+	getSelectionStartFromPointer(event) {
+		const point = this.canvas.getScenePoint(event).transform(util.invertTransform(this.calcTransformMatrix()));
+		const lines = this.self()._textLines;
+		let fromRight = this.width / 2 - point.x;
+		let line = 0;
+		while (line < lines.length - 1 && fromRight > this.getHeightOfLine(line)) {
+			fromRight -= this.getHeightOfLine(line);
+			line += 1;
+		}
+		const bounds = this.self().__charBounds[line] ?? [];
+		const length = lines[line].length;
+		const y = point.y - this.column(line).top;
+		let low = 0;
+		let high = length;
+		while (low < high) {
+			const middle = low + high + 1 >> 1;
+			const box = bounds[middle - 1];
+			if (box.left + box.width / 2 <= y) low = middle;
+			else high = middle - 1;
+		}
+		let index = low;
+		for (let previous = 0; previous < line; previous += 1) index += lines[previous].length + 1;
+		return Math.min(index, this._text.length);
+	}
+	_toSVG() {
+		const self = this.self();
+		const fraction = self._fontSizeFraction;
+		const parts = [];
+		const number = (value) => String(Math.round(value * 1e3) / 1e3);
+		for (let line = 0; line < self._textLines.length; line += 1) {
+			const graphemes = self._textLines[line];
+			const bounds = self.__charBounds[line] ?? [];
+			const { right, em, top } = this.column(line);
+			const center = right - em / 2;
+			let index = 0;
+			while (index < graphemes.length) {
+				const kind = this.kindAt(line, index);
+				const style = this.getCompleteStyleDeclaration(line, index);
+				const y = top + bounds[index].left;
+				let end = index + 1;
+				if (kind === ROTATED) while (end < graphemes.length && this.kindAt(line, end) === ROTATED && !util.hasStyleChanged(style, this.getCompleteStyleDeclaration(line, end), false)) end += 1;
+				else if (kind === COMBINED) while (end < graphemes.length && this.kindAt(line, end) === COMBINED_REST) end += 1;
+				const text = graphemes.slice(index, end).join("");
+				const advance = top + bounds[end - 1].left + bounds[end - 1].width - y;
+				const fill = typeof style.fill === "string" ? style.fill : "#000";
+				if (typeof style.textBackgroundColor === "string" && style.textBackgroundColor) parts.push(`<rect x="${number(right - em)}" y="${number(y)}" width="${number(em)}" height="${number(advance)}" fill="${escapeXml(style.textBackgroundColor)}" />\n`);
+				const thickness = style.fontSize / 15;
+				const lineColor = typeof (style.textDecorationColor || style.fill) === "string" ? style.textDecorationColor || style.fill : "#000";
+				for (const [on, x] of [
+					[style.underline, right - thickness],
+					[style.overline, right - em],
+					[style.linethrough, right - em / 2 - thickness / 2]
+				]) if (on) parts.push(`<rect x="${number(x)}" y="${number(y)}" width="${number(thickness)}" height="${number(advance)}" fill="${escapeXml(lineColor)}" />\n`);
+				if (text.trim() !== "") {
+					const family = String(style.fontFamily ?? this.fontFamily);
+					const quoted = /^['"]|,/.test(family) ? family : `'${family}'`;
+					const stroke = style.stroke && style.strokeWidth && typeof style.stroke === "string" ? ` stroke="${escapeXml(style.stroke)}" stroke-width="${style.strokeWidth}"` : "";
+					const font = `font-family="${escapeXml(quoted)}" font-size="${number(style.fontSize)}" font-style="${style.fontStyle ?? "normal"}" font-weight="${style.fontWeight ?? "normal"}" fill="${escapeXml(fill)}"${stroke}`;
+					const baseline = (.5 - fraction) * style.fontSize;
+					if (kind === ROTATED) parts.push(`<text xml:space="preserve" transform="translate(${number(center)} ${number(y)}) rotate(90)" x="0" y="${number(baseline)}" ${font}>${escapeXml(text)}</text>\n`);
+					else {
+						let x = center;
+						let glyphY = y + style.fontSize / 2 + baseline;
+						if (kind === SHIFTED) {
+							x += style.fontSize / 2;
+							glyphY -= style.fontSize / 2;
+						}
+						let transform = "";
+						if (kind === COMBINED) {
+							const context = util.createCanvasElement().getContext("2d");
+							context.font = self._getFontDeclaration(style);
+							const squeeze = Math.min(1, style.fontSize * .95 / context.measureText(text).width);
+							transform = ` transform="translate(${number(x)} ${number(glyphY)}) scale(${number(squeeze)} 1)"`;
+							x = 0;
+							glyphY = 0;
+						}
+						parts.push(`<text xml:space="preserve"${transform} x="${number(x)}" y="${number(glyphY)}" text-anchor="middle" ${font}>${escapeXml(text)}</text>\n`);
+					}
+				}
+				index = end;
+			}
+		}
+		return [
+			"<g>\n",
+			...parts,
+			"</g>\n"
+		];
+	}
+	toObject(propertiesToInclude = []) {
+		return super.toObject([...VERTICAL_PROPERTIES, ...propertiesToInclude]);
+	}
+};
+VerticalText.type = "VerticalText";
+VerticalText.textLayoutProperties = [...IText.textLayoutProperties, ...VERTICAL_PROPERTIES];
+VerticalText.cacheProperties = [...IText.cacheProperties, ...VERTICAL_PROPERTIES];
+VerticalText.verticalDefaults = {
+	textOrientation: "mixed",
+	combineUpright: "none",
+	keysMap: VERTICAL_KEYS,
+	keysMapRtl: VERTICAL_KEYS
+};
+//#endregion
+export { VerticalText };

package/dist/text.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_shaping = require("./text/shaping.cjs");
+const require_bounded_textbox = require("./text/bounded-textbox.cjs");
+const require_vertical_orientation = require("./text/vertical-orientation.cjs");
+const require_vertical_text = require("./text/vertical-text.cjs");
+const require_register = require("./text/register.cjs");
+const require_mobile_input = require("./text/mobile-input.cjs");
+exports.BoundedTextbox = require_bounded_textbox.BoundedTextbox;
+exports.Orientation = require_vertical_orientation.Orientation;
+exports.ShapedIText = require_shaping.ShapedIText;
+exports.ShapedTextbox = require_shaping.ShapedTextbox;
+exports.VerticalText = require_vertical_text.VerticalText;
+exports.attachMobileTextInput = require_mobile_input.attachMobileTextInput;
+exports.drawsJoinedRuns = require_shaping.drawsJoinedRuns;
+exports.findTextEdit = require_mobile_input.findTextEdit;
+exports.orientationOf = require_vertical_orientation.orientationOf;
+exports.orientationOfCodePoint = require_vertical_orientation.orientationOfCodePoint;
+exports.registerTextObjects = require_register.registerTextObjects;
+exports.shapeLine = require_shaping.shapeLine;
+exports.shapeWord = require_shaping.shapeWord;
+exports.textObjects = require_register.textObjects;

package/dist/text.d.cts

@@ -0,0 +1,7 @@
+import { BoundedTextbox, BoundedTextboxProps, BreakWords, TextFit, TextOverflow } from "./text/bounded-textbox.cjs";
+import { registerTextObjects, textObjects } from "./text/register.cjs";
+import { AnyText, ShapedIText, ShapedTextbox, drawsJoinedRuns, shapeLine, shapeWord } from "./text/shaping.cjs";
+import { MobileTextInput, MobileTextInputOptions, attachMobileTextInput, findTextEdit } from "./text/mobile-input.cjs";
+import { CombineUpright, TextOrientation, VerticalText, VerticalTextProps } from "./text/vertical-text.cjs";
+import { Orientation, orientationOf, orientationOfCodePoint } from "./text/vertical-orientation.cjs";
+export { type AnyText, BoundedTextbox, type BoundedTextboxProps, type BreakWords, type CombineUpright, type MobileTextInput, type MobileTextInputOptions, Orientation, ShapedIText, ShapedTextbox, type TextFit, type TextOrientation, type TextOverflow, VerticalText, type VerticalTextProps, attachMobileTextInput, drawsJoinedRuns, findTextEdit, orientationOf, orientationOfCodePoint, registerTextObjects, shapeLine, shapeWord, textObjects };

package/dist/text.d.ts

@@ -0,0 +1,7 @@
+import { BoundedTextbox, BoundedTextboxProps, BreakWords, TextFit, TextOverflow } from "./text/bounded-textbox.js";
+import { registerTextObjects, textObjects } from "./text/register.js";
+import { AnyText, ShapedIText, ShapedTextbox, drawsJoinedRuns, shapeLine, shapeWord } from "./text/shaping.js";
+import { MobileTextInput, MobileTextInputOptions, attachMobileTextInput, findTextEdit } from "./text/mobile-input.js";
+import { CombineUpright, TextOrientation, VerticalText, VerticalTextProps } from "./text/vertical-text.js";
+import { Orientation, orientationOf, orientationOfCodePoint } from "./text/vertical-orientation.js";
+export { type AnyText, BoundedTextbox, type BoundedTextboxProps, type BreakWords, type CombineUpright, type MobileTextInput, type MobileTextInputOptions, Orientation, ShapedIText, ShapedTextbox, type TextFit, type TextOrientation, type TextOverflow, VerticalText, type VerticalTextProps, attachMobileTextInput, drawsJoinedRuns, findTextEdit, orientationOf, orientationOfCodePoint, registerTextObjects, shapeLine, shapeWord, textObjects };

package/dist/text.js

@@ -0,0 +1,7 @@
+import { ShapedIText, ShapedTextbox, drawsJoinedRuns, shapeLine, shapeWord } from "./text/shaping.js";
+import { BoundedTextbox } from "./text/bounded-textbox.js";
+import { Orientation, orientationOf, orientationOfCodePoint } from "./text/vertical-orientation.js";
+import { VerticalText } from "./text/vertical-text.js";
+import { registerTextObjects, textObjects } from "./text/register.js";
+import { attachMobileTextInput, findTextEdit } from "./text/mobile-input.js";
+export { BoundedTextbox, Orientation, ShapedIText, ShapedTextbox, VerticalText, attachMobileTextInput, drawsJoinedRuns, findTextEdit, orientationOf, orientationOfCodePoint, registerTextObjects, shapeLine, shapeWord, textObjects };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Fabric.js save and load, undo and redo, and autosave for an existing canvas: stable object ids, custom objects, copy and paste, SVG import, PNG, SVG and PDF export, and recovery.",
   "keywords": [
     "fabricjs",
@@ -107,6 +107,36 @@
         "default": "./dist/pdf.cjs"
       }
     },
+    "./text": {
+      "import": {
+        "types": "./dist/text.d.ts",
+        "default": "./dist/text.js"
+      },
+      "require": {
+        "types": "./dist/text.d.cts",
+        "default": "./dist/text.cjs"
+      }
+    },
+    "./performance": {
+      "import": {
+        "types": "./dist/performance.d.ts",
+        "default": "./dist/performance.js"
+      },
+      "require": {
+        "types": "./dist/performance.d.cts",
+        "default": "./dist/performance.cjs"
+      }
+    },
+    "./filters": {
+      "import": {
+        "types": "./dist/filters.d.ts",
+        "default": "./dist/filters.js"
+      },
+      "require": {
+        "types": "./dist/filters.d.cts",
+        "default": "./dist/filters.cjs"
+      }
+    },
     "./schema/document-v1.json": "./schema/document-v1.schema.json",
     "./package.json": "./package.json"
   },