mce 0.23.0 → 0.24.0

package/dist/index.css

@@ -842,6 +842,13 @@
   height: 1px;
   width: 1px;
 }
+.m-smart-guides__dashed {
+  position: absolute;
+  background-image: repeating-linear-gradient(to right, rgba(var(--m-theme-secondary), 0.6) 0 4px, transparent 4px 7px);
+}
+.m-smart-guides__dashed--vertical {
+  background-image: repeating-linear-gradient(to bottom, rgba(var(--m-theme-secondary), 0.6) 0 4px, transparent 4px 7px);
+}
 .m-smart-guides__distance {
   position: absolute;
   display: flex;

package/dist/index.js

@@ -5767,7 +5767,7 @@ var _0_context_default = defineMixin((editor, options) => {
 	const textSelection = ref();
 	const hoverElement = ref();
 	const state = ref();
-	const mode = ref("canvas");
+	const mode = ref(options.mode ?? "canvas");
 	function setCursor(mode) {
 		renderEngine.value.input.setCursor(mode);
 	}
@@ -15332,7 +15332,7 @@ var smartGuides_default = definePlugin((editor) => {
 		const { zoom, position } = camera.value;
 		const scaleX = (v) => v * zoom.x;
 		const scaleY = (v) => v * zoom.y;
-		return linePairs.value.map((linePair) => {
+		return linePairs.value.flatMap((linePair) => {
 			const { target, source, type } = linePair;
 			const boxSource = source.box;
 			const boxTarget = target.box;
@@ -15342,6 +15342,7 @@ var smartGuides_default = definePlugin((editor) => {
 				"vb"
 			].includes(target.type);
 			const itemProps = {};
+			const extra = [];
 			switch (type) {
 				case "alignment":
 					itemProps.class = ["alignment"];
@@ -15404,16 +15405,40 @@ var smartGuides_default = definePlugin((editor) => {
 							width: 1,
 							height: scaleY(linePair.distance)
 						};
-					} else itemProps.style = {
-						left: scaleX(Math.min(source.pos, target.pos)) - position.left,
-						top: scaleY(boxSource.vm.pos) - position.top,
-						width: scaleX(linePair.distance),
-						height: 1
-					};
+						const auxLeft = Math.min(boxSource.hl.pos, boxTarget.hl.pos);
+						const auxRight = Math.max(boxSource.hr.pos, boxTarget.hr.pos);
+						extra.push({
+							class: ["dashed"],
+							style: {
+								left: scaleX(auxLeft) - position.left,
+								top: scaleY(target.pos) - position.top,
+								width: scaleX(auxRight - auxLeft),
+								height: 1
+							}
+						});
+					} else {
+						itemProps.style = {
+							left: scaleX(Math.min(source.pos, target.pos)) - position.left,
+							top: scaleY(boxSource.vm.pos) - position.top,
+							width: scaleX(linePair.distance),
+							height: 1
+						};
+						const auxTop = Math.min(boxSource.vt.pos, boxTarget.vt.pos);
+						const auxBottom = Math.max(boxSource.vb.pos, boxTarget.vb.pos);
+						extra.push({
+							class: ["dashed", "dashed--vertical"],
+							style: {
+								left: scaleX(target.pos) - position.left,
+								top: scaleY(auxTop) - position.top,
+								width: 1,
+								height: scaleY(auxBottom - auxTop)
+							}
+						});
+					}
 					itemProps.label = String(Math.round(linePair.distance));
 					break;
 			}
-			return itemProps;
+			return [itemProps, ...extra];
 		});
 	});
 	function getSnapPoints() {

package/dist/typed-global.d.ts

@@ -28,7 +28,8 @@ declare global {
     interface Exporters {}
     interface Config {}
     interface Options extends DeepMaybe<Config> {
-      //
+      /** 编辑器初始模式，默认 'canvas'。见 {@link Mode}。 */
+      mode?: Mode
     }
 
     // Persistent editor mode, orthogonal to the transient `State`. 'canvas' is

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "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,7 +60,7 @@
     "@vueuse/core": "^14.3.0",
     "diff": "^9.0.0",
     "lodash-es": "^4.18.1",
-    "modern-canvas": "^0.21.3",
+    "modern-canvas": "^0.22.0",
     "modern-font": "^0.6.0",
     "modern-idoc": "^0.11.8",
     "modern-text": "^2.0.3",