mce 0.18.0 → 0.18.2

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './mixin';
 export * from './mixins';
 export * from './plugin';
 export * from './plugins';
+export * from './scene';
 export * from './types';
 export type { Camera2D, Element2D, Engine } from 'modern-canvas';
 export type { Document, Element, NormalizedElement } from 'modern-idoc';

package/dist/index.js

@@ -393,10 +393,10 @@ var _0_config_default = defineMixin((editor) => {
 			});
 			onChange(async (files) => {
 				const file = files?.[0];
-				if (file) {
+				if (file) try {
 					config.value = JSON.parse(await file.text());
 					resolve(config.value);
-				}
+				} catch {}
 			});
 			open();
 		});
@@ -858,7 +858,7 @@ function signedArea(data, start, end, dim) {
 	return sum;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/modern-path2d@1.5.6/node_modules/modern-path2d/dist/index.mjs
+//#region ../../node_modules/.pnpm/modern-path2d@1.6.0/node_modules/modern-path2d/dist/index.mjs
 function drawPoint(ctx, x, y, options = {}) {
 	const { radius = 1 } = options;
 	ctx.moveTo(x, y);
@@ -1027,9 +1027,7 @@ var Vector2 = class Vector2 {
 		x: 0,
 		y: 0
 	}) {
-		const x = sx < 0 ? origin.x - this._x + origin.x : this._x;
-		const y = sy < 0 ? origin.y - this._y + origin.y : this._y;
-		return this.set(x * Math.abs(sx), y * Math.abs(sy));
+		return this.set(origin.x + (this._x - origin.x) * sx, origin.y + (this._y - origin.y) * sy);
 	}
 	skew(ax, ay = 0, origin = {
 		x: 0,
@@ -2342,8 +2340,11 @@ function getReflection(a, b) {
 function svgPathCommandsAddToPath2D(commands, path) {
 	const current = new Vector2();
 	const control = new Vector2();
+	let prevType = "";
 	for (let i = 0, l = commands.length; i < l; i++) {
 		const cmd = commands[i];
+		if ((cmd.type === "s" || cmd.type === "S") && !"CcSs".includes(prevType)) control.copyFrom(current);
+		else if ((cmd.type === "t" || cmd.type === "T") && !"QqTt".includes(prevType)) control.copyFrom(current);
 		if (cmd.type === "m" || cmd.type === "M") {
 			if (cmd.type === "m") current.add(cmd);
 			else current.copyFrom(cmd);
@@ -2424,6 +2425,7 @@ function svgPathCommandsAddToPath2D(commands, path) {
 			if (path.startPoint) current.copyFrom(path.startPoint);
 			path.closePath();
 		} else console.warn("Unsupported commands", cmd);
+		prevType = cmd.type;
 	}
 }
 function svgPathCommandsToData(commands) {
@@ -3194,8 +3196,11 @@ function eigenDecomposition(A, B, C) {
 		rt1 = .5 * (sm + rt);
 		t = 1 / rt1;
 		rt2 = A * t * C - B * t * B;
-	} else if (sm < 0) rt2 = .5 * (sm - rt);
-	else {
+	} else if (sm < 0) {
+		rt2 = .5 * (sm - rt);
+		t = 1 / rt2;
+		rt1 = A * t * C - B * t * B;
+	} else {
 		rt1 = .5 * rt;
 		rt2 = -.5 * rt;
 	}
@@ -3339,17 +3344,19 @@ var CompositeCurve = class CompositeCurve extends Curve {
 	getPoint(t, output = new Vector2()) {
 		const d = t * this.getLength();
 		const lengths = this.getLengths();
-		let i = 0;
-		while (i < lengths.length) {
-			if (lengths[i] >= d) {
-				const diff = lengths[i] - d;
-				const curve = this.curves[i];
-				const length = curve.getLength();
-				return curve.getPointAt(length === 0 ? 0 : 1 - diff / length, output);
-			}
-			i++;
-		}
-		return output;
+		const n = lengths.length;
+		if (n === 0) return output;
+		let lo = 0;
+		let hi = n - 1;
+		while (lo < hi) {
+			const mid = lo + hi >>> 1;
+			if (lengths[mid] < d) lo = mid + 1;
+			else hi = mid;
+		}
+		const diff = lengths[lo] - d;
+		const curve = this.curves[lo];
+		const length = curve.getLength();
+		return curve.getPointAt(length === 0 ? 0 : 1 - diff / length, output);
 	}
 	getLengths() {
 		if (this._lengths.length !== this.curves.length) this.updateLengths();
@@ -3467,6 +3474,11 @@ var CubicBezierCurve = class CubicBezierCurve extends Curve {
 		];
 	}
 	_solveQuadratic(a, b, c) {
+		if (Math.abs(a) < 1e-12) {
+			if (Math.abs(b) < 1e-12) return [];
+			const t = -c / b;
+			return t >= 0 && t <= 1 ? [t] : [];
+		}
 		const discriminant = b * b - 4 * a * c;
 		if (discriminant < 0) return [];
 		const sqrtDiscriminant = Math.sqrt(discriminant);
@@ -3474,26 +3486,21 @@ var CubicBezierCurve = class CubicBezierCurve extends Curve {
 	}
 	getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
 		const { p1, cp1, cp2, p2 } = this;
-		const dxRoots = this._solveQuadratic(3 * (cp1.x - p1.x), 6 * (cp2.x - cp1.x), 3 * (p2.x - cp2.x));
-		const dyRoots = this._solveQuadratic(3 * (cp1.y - p1.y), 6 * (cp2.y - cp1.y), 3 * (p2.y - cp2.y));
+		const dxRoots = this._solveQuadratic(3 * (-p1.x + 3 * cp1.x - 3 * cp2.x + p2.x), 6 * (p1.x - 2 * cp1.x + cp2.x), 3 * (cp1.x - p1.x));
+		const dyRoots = this._solveQuadratic(3 * (-p1.y + 3 * cp1.y - 3 * cp2.y + p2.y), 6 * (p1.y - 2 * cp1.y + cp2.y), 3 * (cp1.y - p1.y));
 		const tValues = [
 			0,
 			1,
 			...dxRoots,
 			...dyRoots
 		];
-		const samplePoints = (tValues2, precision) => {
-			for (const t of tValues2) for (let i = 0; i <= precision; i++) {
-				const delta = i / precision - .5;
-				const refinedT = Math.min(1, Math.max(0, t + delta));
-				const point = this.getPoint(refinedT);
-				min.x = Math.min(min.x, point.x);
-				min.y = Math.min(min.y, point.y);
-				max.x = Math.max(max.x, point.x);
-				max.y = Math.max(max.y, point.y);
-			}
-		};
-		samplePoints(tValues, 10);
+		for (const t of tValues) {
+			const point = this.getPoint(t);
+			min.x = Math.min(min.x, point.x);
+			min.y = Math.min(min.y, point.y);
+			max.x = Math.max(max.x, point.x);
+			max.y = Math.max(max.y, point.y);
+		}
 		return {
 			min: min.finite(),
 			max: max.finite()
@@ -3539,7 +3546,7 @@ var EllipseCurve = class extends RoundCurve {
 		return this;
 	}
 };
-var PloygonCurve = class extends CompositeCurve {};
+var PolygonCurve = class extends CompositeCurve {};
 var QuadraticBezierCurve = class QuadraticBezierCurve extends Curve {
 	constructor(p1 = new Vector2(), cp = new Vector2(), p2 = new Vector2()) {
 		super();
@@ -3567,14 +3574,22 @@ var QuadraticBezierCurve = class QuadraticBezierCurve extends Curve {
 	}
 	getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
 		const { p1, cp, p2 } = this;
-		const x1 = .5 * (p1.x + cp.x);
-		const y1 = .5 * (p1.y + cp.y);
-		const x2 = .5 * (p1.x + p2.x);
-		const y2 = .5 * (p1.y + p2.y);
-		min.x = Math.min(min.x, p1.x, p2.x, x1, x2);
-		min.y = Math.min(min.y, p1.y, p2.y, y1, y2);
-		max.x = Math.max(max.x, p1.x, p2.x, x1, x2);
-		max.y = Math.max(max.y, p1.y, p2.y, y1, y2);
+		const extrema = (a, b, c) => {
+			const denom = a - 2 * b + c;
+			if (Math.abs(denom) < 1e-12) return null;
+			const t = (a - b) / denom;
+			return t > 0 && t < 1 ? t : null;
+		};
+		const tx = extrema(p1.x, cp.x, p2.x);
+		const ty = extrema(p1.y, cp.y, p2.y);
+		const xs = [p1.x, p2.x];
+		const ys = [p1.y, p2.y];
+		if (tx !== null) xs.push(quadraticBezier(tx, p1.x, cp.x, p2.x));
+		if (ty !== null) ys.push(quadraticBezier(ty, p1.y, cp.y, p2.y));
+		min.x = Math.min(min.x, ...xs);
+		min.y = Math.min(min.y, ...ys);
+		max.x = Math.max(max.x, ...xs);
+		max.y = Math.max(max.y, ...ys);
 		return {
 			min: min.finite(),
 			max: max.finite()
@@ -3608,7 +3623,7 @@ var QuadraticBezierCurve = class QuadraticBezierCurve extends Curve {
 		return this;
 	}
 };
-var RectangleCurve = class extends PloygonCurve {
+var RectangleCurve = class extends PolygonCurve {
 	constructor(x = 0, y = 0, width = 0, height = 0) {
 		super();
 		this.x = x;
@@ -3950,16 +3965,11 @@ var Path2D = class Path2D extends CompositeCurve {
 		return this;
 	}
 	moveTo(x, y) {
-		if (!this.currentCurve.currentPoint?.equals({
-			x,
-			y
-		})) {
-			if (this.currentCurve.curves.length) {
-				this.currentCurve = new CurvePath();
-				this.curves.push(this.currentCurve);
-			}
-			this.currentCurve.moveTo(x, y);
+		if (this.currentCurve.curves.length) {
+			this.currentCurve = new CurvePath();
+			this.curves.push(this.currentCurve);
 		}
+		this.currentCurve.moveTo(x, y);
 		return this;
 	}
 	lineTo(x, y) {
@@ -4366,6 +4376,8 @@ function storeState(idbPersistence, forceStore = true) {
 	});
 }
 var IndexeddbProvider = class extends Observable {
+	name;
+	doc;
 	db = null;
 	synced = false;
 	whenSynced;
@@ -4383,7 +4395,10 @@ var IndexeddbProvider = class extends Observable {
 		this._db = openDB(name, (db) => {
 			createStores(db, [["updates", { autoIncrement: true }], ["custom"]]);
 		});
-		this.whenSynced = new Promise((resolve) => this.on("synced", () => resolve(this)));
+		this.whenSynced = new Promise((resolve, reject) => {
+			this.on("synced", () => resolve(this));
+			this._db.catch(reject);
+		});
 		this._db.then((db) => {
 			this.db = db;
 			fetchUpdates(this, (updatesStore) => {
@@ -4393,7 +4408,7 @@ var IndexeddbProvider = class extends Observable {
 				this.synced = true;
 				this.emit("synced", this);
 			});
-		});
+		}).catch(() => {});
 		this._storeUpdate = (update, origin) => {
 			if (this.db && origin !== this) {
 				const [updatesStore] = transact(this.db, [updatesStoreName]);
@@ -4447,6 +4462,7 @@ var IndexeddbProvider = class extends Observable {
 //#endregion
 //#region src/crdt/YDoc.ts
 var YDoc = class extends Observable {
+	id;
 	_transacting;
 	_yDoc;
 	_yProps;
@@ -6701,7 +6717,11 @@ var clipboard_default = definePlugin(() => {
 			},
 			load: async (doc) => {
 				const mce = doc.querySelector("mce-clipboard");
-				if (mce) return JSON.parse(mce.textContent);
+				if (mce) try {
+					return JSON.parse(mce.textContent);
+				} catch {
+					return [];
+				}
 				return [];
 			}
 		}]
@@ -7932,7 +7952,9 @@ var frame_default = definePlugin((editor) => {
 		}],
 		setup: () => {
 			const { on, off, inEditorIs, snapshot, captureFrameScreenshot, frames, frameThumbs } = editor;
+			let cleanupDoc = null;
 			function onSetDoc(doc) {
+				cleanupDoc?.();
 				if (config.value.thumbnail) snapshot();
 				function onAddChild(node, _newIndex) {
 					if (config.value.thumbnail && inEditorIs(node, "Frame")) {
@@ -7951,12 +7973,17 @@ var frame_default = definePlugin((editor) => {
 				}
 				doc.on("addChild", onAddChild);
 				doc.on("removeChild", onRemoveChild);
+				cleanupDoc = () => {
+					doc.off("addChild", onAddChild);
+					doc.off("removeChild", onRemoveChild);
+				};
 			}
 			onBeforeMount(() => {
 				on("docSet", onSetDoc);
 			});
 			onScopeDispose(() => {
 				off("docSet", onSetDoc);
+				cleanupDoc?.();
 			});
 		}
 	};
@@ -8062,8 +8089,8 @@ var html_default = definePlugin((editor) => {
 				const dom = new DOMParser().parseFromString(await source.text(), "text/html");
 				try {
 					return await load(dom);
-				} catch (_err) {
-					console.log(dom);
+				} catch (err) {
+					console.error(err);
 					return [];
 				}
 			}
@@ -9554,42 +9581,46 @@ var pen_default = definePlugin((editor) => {
 						currentPath.currentCurve.addCurve(currentLine);
 						update();
 					}
-				} else {
-					el = addElement({
-						name: "pen",
-						style: {
-							width: 1,
-							height: 1
-						},
-						outline: {
-							color: "#d9d9d9",
-							width: 5,
-							lineCap: "round",
-							lineJoin: "round"
-						},
-						meta: { inPptIs: "Shape" }
-					}, { position: start });
-					currentPath = new Path2D();
-					currentLine = new LineCurve(new Vector2(start.x, start.y), new Vector2(start.x, start.y));
-					currentPath.currentCurve.addCurve(currentLine);
-					update();
-					const onMove = () => {
-						const move = getGlobalPointer();
-						if (currentLine && move) {
-							currentLine.p2.x = move.x;
-							currentLine.p2.y = move.y;
-							update();
-						}
-					};
-					renderEngine.value.on("pointermove", onMove);
-					const stop = watch([state, activeTool], () => {
-						renderEngine.value.off("pointermove", onMove);
-						stop();
-						el = void 0;
-						currentPath = void 0;
-						currentLine = void 0;
-					});
+					return;
 				}
+				el = addElement({
+					name: "pen",
+					style: {
+						width: 1,
+						height: 1
+					},
+					outline: {
+						color: "#d9d9d9",
+						width: 5,
+						lineCap: "round",
+						lineJoin: "round"
+					},
+					meta: { inPptIs: "Shape" }
+				}, { position: start });
+				currentPath = new Path2D();
+				currentLine = new LineCurve(new Vector2(start.x, start.y), new Vector2(start.x, start.y));
+				currentPath.currentCurve.addCurve(currentLine);
+				update();
+				const onMove = () => {
+					const move = getGlobalPointer();
+					if (currentLine && move) {
+						currentLine.p2.x = move.x;
+						currentLine.p2.y = move.y;
+						update();
+					}
+				};
+				renderEngine.value.on("pointermove", onMove);
+				let stopWatch;
+				const cleanup = () => {
+					renderEngine.value.off("pointermove", onMove);
+					stopWatch?.();
+					stopWatch = void 0;
+					el = void 0;
+					currentPath = void 0;
+					currentLine = void 0;
+				};
+				stopWatch = watch([state, activeTool], cleanup);
+				return { end: cleanup };
 			}
 		}, {
 			name: "pencil",
@@ -14828,12 +14859,12 @@ var TextEditor_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region \0@oxc-project+runtime@0.128.0/helpers/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.130.0/helpers/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.128.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -15221,7 +15252,10 @@ var TextEditor = class extends HTMLElement {
 	}
 	_findNearest(options) {
 		const isVertical = this.text.isVertical;
-		const { x, y, xWeight = 1, yWeight = 1 } = options;
+		const { boundingBox } = this.text;
+		const { xWeight = 1, yWeight = 1 } = options;
+		const x = options.x + boundingBox.left;
+		const y = options.y + boundingBox.top;
 		const char = this._chars.reduce((prev, current, index) => {
 			const diff = Math.abs(current.left + current.width / 2 - x) * xWeight + Math.abs(current.top + current.height / 2 - y) * yWeight;
 			if (diff < prev.diff) return {
@@ -17041,4 +17075,4 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { Cropper_default as Cropper, Dialog_default as Dialog, Editor, Layers_default as EditorLayers, EditorLayout_default as EditorLayout, LayoutItem_default as EditorLayoutItem, Toolbelt_default as EditorToolbelt, Menu_default as Menu, Ruler_default as Ruler, Scrollbar_default as Scrollbar, Transform_default as Transform, defineMixin, definePlugin, mixins, plugins, useEditor };
+export { Cropper_default as Cropper, Dialog_default as Dialog, Doc, Editor, Layers_default as EditorLayers, EditorLayout_default as EditorLayout, LayoutItem_default as EditorLayoutItem, Toolbelt_default as EditorToolbelt, Menu_default as Menu, Ruler_default as Ruler, Scrollbar_default as Scrollbar, Transform_default as Transform, defineMixin, definePlugin, mixins, plugins, useEditor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -60,10 +60,10 @@
     "@vueuse/core": "^14.3.0",
     "diff": "^9.0.0",
     "lodash-es": "^4.18.1",
-    "modern-canvas": "^0.17.1",
+    "modern-canvas": "^0.17.2",
     "modern-font": "^0.5.0",
-    "modern-idoc": "^0.11.3",
-    "modern-text": "^1.11.0",
+    "modern-idoc": "^0.11.4",
+    "modern-text": "^1.11.1",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.30"
   },
@@ -86,7 +86,7 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue": "^6.0.7",
     "jiti": "^2.7.0",
     "sass-embedded": "^1.99.0",
     "typedoc": "^0.28.19",