fabricjs-document-engine 1.1.0 → 1.3.0

package/dist/text/vertical-text.cjs

@@ -0,0 +1,336 @@
+const require_vertical_orientation = require("./vertical-orientation.cjs");
+let fabric = require("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 fabric.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 = require_vertical_orientation.orientationOf(line[index]);
+			kinds[index] = orientation === require_vertical_orientation.Orientation.Upright ? UPRIGHT : orientation === require_vertical_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 && !fabric.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(fabric.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 && !fabric.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 = fabric.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 = [...fabric.IText.textLayoutProperties, ...VERTICAL_PROPERTIES];
+VerticalText.cacheProperties = [...fabric.IText.cacheProperties, ...VERTICAL_PROPERTIES];
+VerticalText.verticalDefaults = {
+	textOrientation: "mixed",
+	combineUpright: "none",
+	keysMap: VERTICAL_KEYS,
+	keysMapRtl: VERTICAL_KEYS
+};
+//#endregion
+exports.VerticalText = VerticalText;

package/dist/text/vertical-text.d.cts

@@ -0,0 +1,54 @@
+import { IText, TPointerEvent } from "fabric";
+//#region src/text/vertical-text.d.ts
+export type TextOrientation = "mixed" | "upright";
+export type CombineUpright = "none" | "digits2";
+export interface VerticalTextProps {
+  textOrientation: TextOrientation;
+  combineUpright: CombineUpright;
+}
+type Box = {
+  left: number;
+  width: number;
+  kernedWidth: number;
+  height: number;
+  deltaY: number;
+};
+export declare class VerticalText extends IText {
+  static override type: string;
+  static override textLayoutProperties: string[];
+  static override cacheProperties: string[];
+  static verticalDefaults: VerticalTextProps & {
+    keysMap: Record<number, string>;
+    keysMapRtl: Record<number, string>;
+  };
+  static override getDefaults(): Record<string, unknown>;
+  textOrientation: TextOrientation;
+  combineUpright: CombineUpright;
+  private glyphKinds;
+  constructor(text: string, options?: Partial<VerticalTextProps> & ConstructorParameters<typeof IText>[1]);
+  private self;
+  private kindsOf;
+  private kindAt;
+  override _measureLine(lineIndex: number): {
+    width: number;
+    numOfSpaces: number;
+  };
+  override _getGraphemeBox(grapheme: string, lineIndex: number, charIndex: number, previous?: string, skipLeft?: boolean): Box;
+  override initDimensions(): void;
+  override _getLineLeftOffset(lineIndex: number): number;
+  private column;
+  override _render(ctx: CanvasRenderingContext2D): void;
+  private drawGlyphs;
+  private drawBackgroundAndLines;
+  private cursorPoint;
+  override _getCursorBoundaries(index?: number): ReturnType<IText["_getCursorBoundaries"]>;
+  override _renderCursor(ctx: CanvasRenderingContext2D, _boundaries: unknown, selectionStart: number): void;
+  override _renderSelection(ctx: CanvasRenderingContext2D, selection: {
+    selectionStart: number;
+    selectionEnd: number;
+  }): void;
+  override getSelectionStartFromPointer(event: TPointerEvent): number;
+  override _toSVG(): string[];
+  override toObject(propertiesToInclude?: PropertyKey[]): any;
+}
+//#endregion

package/dist/text/vertical-text.d.ts

@@ -0,0 +1,54 @@
+import { IText, TPointerEvent } from "fabric";
+//#region src/text/vertical-text.d.ts
+export type TextOrientation = "mixed" | "upright";
+export type CombineUpright = "none" | "digits2";
+export interface VerticalTextProps {
+  textOrientation: TextOrientation;
+  combineUpright: CombineUpright;
+}
+type Box = {
+  left: number;
+  width: number;
+  kernedWidth: number;
+  height: number;
+  deltaY: number;
+};
+export declare class VerticalText extends IText {
+  static override type: string;
+  static override textLayoutProperties: string[];
+  static override cacheProperties: string[];
+  static verticalDefaults: VerticalTextProps & {
+    keysMap: Record<number, string>;
+    keysMapRtl: Record<number, string>;
+  };
+  static override getDefaults(): Record<string, unknown>;
+  textOrientation: TextOrientation;
+  combineUpright: CombineUpright;
+  private glyphKinds;
+  constructor(text: string, options?: Partial<VerticalTextProps> & ConstructorParameters<typeof IText>[1]);
+  private self;
+  private kindsOf;
+  private kindAt;
+  override _measureLine(lineIndex: number): {
+    width: number;
+    numOfSpaces: number;
+  };
+  override _getGraphemeBox(grapheme: string, lineIndex: number, charIndex: number, previous?: string, skipLeft?: boolean): Box;
+  override initDimensions(): void;
+  override _getLineLeftOffset(lineIndex: number): number;
+  private column;
+  override _render(ctx: CanvasRenderingContext2D): void;
+  private drawGlyphs;
+  private drawBackgroundAndLines;
+  private cursorPoint;
+  override _getCursorBoundaries(index?: number): ReturnType<IText["_getCursorBoundaries"]>;
+  override _renderCursor(ctx: CanvasRenderingContext2D, _boundaries: unknown, selectionStart: number): void;
+  override _renderSelection(ctx: CanvasRenderingContext2D, selection: {
+    selectionStart: number;
+    selectionEnd: number;
+  }): void;
+  override getSelectionStartFromPointer(event: TPointerEvent): number;
+  override _toSVG(): string[];
+  override toObject(propertiesToInclude?: PropertyKey[]): any;
+}
+//#endregion