fabricjs-document-engine 1.1.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/dist/util/concurrency.cjs

@@ -17,10 +17,23 @@ async function mapWithConcurrency(items, limit, work) {
 	await Promise.all(Array.from({ length: workers }, runWorker));
 	return results;
 }
-/** Lets the browser paint and handle input before the next piece of work. */
+/**
+* Lets the browser paint, handle input and run other queued work, such as a
+* framework's re-render after a progress update, before the next piece of
+* work. A message-channel task runs after the tasks already queued and,
+* unlike `setTimeout`, is not delayed by timer clamping. `scheduler.yield()`
+* is not used: it resumes ahead of other queued tasks, so a UI waiting to
+* show progress would not render until the work had finished.
+*/
 function yieldToEventLoop() {
-	const scheduler = globalThis.scheduler;
-	if (typeof scheduler?.yield === "function") return scheduler.yield();
+	if (typeof MessageChannel === "function") return new Promise((resolve) => {
+		const channel = new MessageChannel();
+		channel.port1.onmessage = () => {
+			channel.port1.close();
+			resolve();
+		};
+		channel.port2.postMessage(void 0);
+	});
 	return new Promise((resolve) => setTimeout(resolve, 0));
 }
 //#endregion

package/dist/util/concurrency.js

@@ -17,10 +17,23 @@ async function mapWithConcurrency(items, limit, work) {
 	await Promise.all(Array.from({ length: workers }, runWorker));
 	return results;
 }
-/** Lets the browser paint and handle input before the next piece of work. */
+/**
+* Lets the browser paint, handle input and run other queued work, such as a
+* framework's re-render after a progress update, before the next piece of
+* work. A message-channel task runs after the tasks already queued and,
+* unlike `setTimeout`, is not delayed by timer clamping. `scheduler.yield()`
+* is not used: it resumes ahead of other queued tasks, so a UI waiting to
+* show progress would not render until the work had finished.
+*/
 function yieldToEventLoop() {
-	const scheduler = globalThis.scheduler;
-	if (typeof scheduler?.yield === "function") return scheduler.yield();
+	if (typeof MessageChannel === "function") return new Promise((resolve) => {
+		const channel = new MessageChannel();
+		channel.port1.onmessage = () => {
+			channel.port1.close();
+			resolve();
+		};
+		channel.port2.postMessage(void 0);
+	});
 	return new Promise((resolve) => setTimeout(resolve, 0));
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "1.1.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"
   },

package/schema/document-v1.schema.json

@@ -18,7 +18,11 @@
       "properties": {
         "width": { "type": "number", "exclusiveMinimum": 0 },
         "height": { "type": "number", "exclusiveMinimum": 0 },
-        "background": {}
+        "background": {},
+        "backgroundImage": { "$ref": "#/$defs/fabricObject" },
+        "overlay": {},
+        "overlayImage": { "$ref": "#/$defs/fabricObject" },
+        "clipPath": { "$ref": "#/$defs/fabricObject" }
       }
     },
     "objects": { "type": "array", "items": { "$ref": "#/$defs/fabricObject" } },