mce 0.22.2 → 0.24.0

package/dist/index.css

@@ -842,6 +842,61 @@
   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;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(var(--m-theme-primary));
+}
+.m-smart-guides__distance::before, .m-smart-guides__distance::after {
+  content: "";
+  position: absolute;
+  background-color: rgb(var(--m-theme-primary));
+}
+.m-smart-guides__distance::before {
+  inset: 50% auto auto 0;
+  width: 1px;
+  height: 8px;
+  transform: translateY(-50%);
+}
+.m-smart-guides__distance::after {
+  inset: 50% 0 auto auto;
+  width: 1px;
+  height: 8px;
+  transform: translateY(-50%);
+}
+.m-smart-guides__distance--vertical::before {
+  inset: 0 auto auto 50%;
+  width: 8px;
+  height: 1px;
+  transform: translateX(-50%);
+}
+.m-smart-guides__distance--vertical::after {
+  inset: auto auto 0 50%;
+  width: 8px;
+  height: 1px;
+  transform: translateX(-50%);
+}
+.m-smart-guides__label {
+  position: absolute;
+  padding: 1px 5px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  color: rgb(var(--m-theme-on-primary));
+  background-color: rgb(var(--m-theme-primary));
+  pointer-events: none;
+}
 .m-smart-guides__area {
   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);
 	}
@@ -7228,53 +7228,115 @@ var snapper_default = defineMixin((editor) => {
 	const unregisterSnapper = (key) => {
 		snappers.delete(key);
 	};
-	const snap = (box) => {
+	function getSnapAxes() {
 		const axisX = /* @__PURE__ */ new Set();
 		const axisY = /* @__PURE__ */ new Set();
+		const gutterX = /* @__PURE__ */ new Set();
+		const gutterY = /* @__PURE__ */ new Set();
 		snappers.forEach((snapper) => {
-			const { xLines, yLines } = snapper.getLines();
+			const { xLines, yLines, xGutters, yGutters } = snapper.getLines();
 			xLines?.forEach((v) => axisX.add(v));
 			yLines?.forEach((v) => axisY.add(v));
+			xGutters?.forEach((v) => gutterX.add(v));
+			yGutters?.forEach((v) => gutterY.add(v));
 		});
+		return {
+			axisX,
+			axisY,
+			gutterX,
+			gutterY
+		};
+	}
+	function closestLine(lines, position) {
+		let closest;
+		let minDist = Infinity;
+		for (const num of lines) {
+			const absDist = Math.abs(num - position);
+			if (absDist < minDist) {
+				minDist = absDist;
+				closest = num;
+			}
+		}
+		return minDist < snapThreshold.value ? closest : void 0;
+	}
+	const snap = (box) => {
+		const { axisX, axisY, gutterX, gutterY } = getSnapAxes();
 		const posList = [
-			[0, "x"],
-			[box.width / 2, "x"],
-			[box.width, "x"],
-			[0, "y"],
-			[box.height / 2, "y"],
-			[box.height, "y"]
+			[
+				0,
+				"x",
+				true
+			],
+			[
+				box.width / 2,
+				"x",
+				false
+			],
+			[
+				box.width,
+				"x",
+				true
+			],
+			[
+				0,
+				"y",
+				true
+			],
+			[
+				box.height / 2,
+				"y",
+				false
+			],
+			[
+				box.height,
+				"y",
+				true
+			]
 		];
 		for (let i = 0; i < posList.length; i++) {
-			const [offset, axis] = posList[i];
-			let position;
-			let numArray;
-			if (axis === "x") {
-				position = box.left + offset;
-				numArray = axisX;
-			} else {
-				position = box.top + offset;
-				numArray = axisY;
+			const [offset, axis, isEdge] = posList[i];
+			const position = (axis === "x" ? box.left : box.top) + offset;
+			let closest = closestLine(axis === "x" ? axisX : axisY, position);
+			if (closest === void 0 && isEdge) closest = closestLine(axis === "x" ? gutterX : gutterY, position);
+			if (closest === void 0) continue;
+			if (axis === "x") box.left = closest - offset;
+			else box.top = closest - offset;
+		}
+	};
+	const snapResize = (box, dir) => {
+		if (dir.length !== 1) return;
+		const { axisX, axisY, gutterX, gutterY } = getSnapAxes();
+		const snapEdge = (main, gutter, pos) => {
+			return closestLine(main, pos) ?? closestLine(gutter, pos);
+		};
+		const right = box.left + box.width;
+		const bottom = box.top + box.height;
+		if (dir === "l") {
+			const s = snapEdge(axisX, gutterX, box.left);
+			if (s !== void 0 && right - s >= 1) {
+				box.left = s;
+				box.width = right - s;
 			}
-			let closest;
-			let minDist = Infinity;
-			for (const num of numArray) {
-				const dist = num - position;
-				const absDist = Math.abs(dist);
-				if (absDist < minDist) {
-					minDist = absDist;
-					closest = num;
-				}
+		} else if (dir === "r") {
+			const s = snapEdge(axisX, gutterX, right);
+			if (s !== void 0 && s - box.left >= 1) box.width = s - box.left;
+		} else if (dir === "t") {
+			const s = snapEdge(axisY, gutterY, box.top);
+			if (s !== void 0 && bottom - s >= 1) {
+				box.top = s;
+				box.height = bottom - s;
 			}
-			if (minDist < snapThreshold.value) position = closest ?? position;
-			if (axis === "x") box.left = position - offset;
-			else box.top = position - offset;
+		} else if (dir === "b") {
+			const s = snapEdge(axisY, gutterY, bottom);
+			if (s !== void 0 && s - box.top >= 1) box.height = s - box.top;
 		}
 	};
 	Object.assign(editor, {
 		snappers,
 		registerSnapper,
 		unregisterSnapper,
-		snap
+		snap,
+		snapResize
 	});
 });
 //#endregion
@@ -9469,7 +9531,7 @@ var Btn_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/Layer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$30 = ["data-id"];
-var _hoisted_2$16 = { class: "m-layer__content" };
+var _hoisted_2$17 = { class: "m-layer__content" };
 var _hoisted_3$15 = { class: "m-layer__prepend" };
 var _hoisted_4$9 = {
 	key: 0,
@@ -9622,7 +9684,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 			}, [
 				_cache[5] || (_cache[5] = createElementVNode("span", { class: "m-layer__underlay" }, null, -1)),
 				_cache[6] || (_cache[6] = createElementVNode("span", { class: "m-layer__overlay" }, null, -1)),
-				createElementVNode("div", _hoisted_2$16, [
+				createElementVNode("div", _hoisted_2$17, [
 					createElementVNode("div", _hoisted_3$15, [childrenLength.value ? (openBlock(), createBlock(unref(Icon_default), {
 						key: 0,
 						class: "m-layer__arrow",
@@ -9699,7 +9761,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/Layers.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$29 = { class: "m-layers" };
-var _hoisted_2$15 = { class: "m-layers__wrapper" };
+var _hoisted_2$16 = { class: "m-layers__wrapper" };
 //#endregion
 //#region src/components/Layers.vue
 var Layers_default = /* @__PURE__ */ defineComponent({
@@ -9733,7 +9795,7 @@ var Layers_default = /* @__PURE__ */ defineComponent({
 			layerScrollIntoView();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$29, [createElementVNode("div", _hoisted_2$15, [createVNode(Layer_default, {
+			return openBlock(), createElementBlock("div", _hoisted_1$29, [createElementVNode("div", _hoisted_2$16, [createVNode(Layer_default, {
 				root: true,
 				node: unref(root),
 				opened: true
@@ -9954,7 +10016,7 @@ var Overlay_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/shared/Menu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$26 = ["onMouseenter"];
-var _hoisted_2$14 = ["onClick"];
+var _hoisted_2$15 = ["onClick"];
 var _hoisted_3$14 = {
 	key: 0,
 	class: "m-list-item__checked"
@@ -10091,7 +10153,7 @@ var Menu_default = /* @__PURE__ */ defineComponent({
 							key: 0,
 							icon: "$arrowRight"
 						})) : createCommentVNode("", true)])) : createCommentVNode("", true)
-					], 10, _hoisted_2$14)], 40, _hoisted_1$26))], 64);
+					], 10, _hoisted_2$15)], 40, _hoisted_1$26))], 64);
 				}), 128)), opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
 					key: 0,
 					"open-on-hover": "",
@@ -10616,7 +10678,7 @@ var menu_default = definePlugin((editor, options) => {
 //#endregion
 //#region src/components/Creator.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$25 = { class: "m-creator" };
-var _hoisted_2$13 = { class: "m-creator__tree" };
+var _hoisted_2$14 = { class: "m-creator__tree" };
 var _hoisted_3$13 = { class: "m-creator__actions" };
 //#endregion
 //#region src/components/Creator.vue
@@ -10688,7 +10750,7 @@ var Creator_default = /* @__PURE__ */ defineComponent({
 			})];
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$25, [createElementVNode("div", _hoisted_2$13, [(openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$25, [createElementVNode("div", _hoisted_2$14, [(openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
 				return openBlock(), createBlock(CreatorNode, {
 					key: index,
 					node
@@ -10872,7 +10934,7 @@ var _hoisted_1$24 = {
 	key: 0,
 	class: "m-tooltip__arrow"
 };
-var _hoisted_2$12 = { class: "m-tooltip__content" };
+var _hoisted_2$13 = { class: "m-tooltip__content" };
 var _hoisted_3$12 = {
 	key: 0,
 	class: "m-tooltip__kbd"
@@ -10916,7 +10978,7 @@ var Tooltip_default = /* @__PURE__ */ defineComponent({
 				target: props.target,
 				attach: props.attach
 			}, createSlots({
-				default: withCtx(() => [isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$24)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$12, [renderSlot(_ctx.$slots, "default"), _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$12, [renderSlot(_ctx.$slots, "kbd")])) : createCommentVNode("", true)])], 64)) : createCommentVNode("", true)]),
+				default: withCtx(() => [isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$24)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$13, [renderSlot(_ctx.$slots, "default"), _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$12, [renderSlot(_ctx.$slots, "kbd")])) : createCommentVNode("", true)])], 64)) : createCommentVNode("", true)]),
 				_: 2
 			}, [_ctx.$slots.activator ? {
 				name: "activator",
@@ -10940,7 +11002,7 @@ var Tooltip_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/shared/Ruler.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$23 = ["width", "height"];
-var _hoisted_2$11 = [
+var _hoisted_2$12 = [
 	"onDblclick",
 	"onMousedown",
 	"onMousemove"
@@ -11237,7 +11299,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 						onMousedown: ($event) => onReflineMousedown($event, index),
 						onMousemove: (e) => updateTip(e, item),
 						onMouseleave: onLeave
-					}, null, 46, _hoisted_2$11);
+					}, null, 46, _hoisted_2$12);
 				}), 128)),
 				createVNode(Tooltip_default, {
 					"model-value": !!tipText.value,
@@ -11635,7 +11697,7 @@ var ScrollToSelection_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/shared/Transform.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$19 = ["rx", "ry"];
-var _hoisted_2$10 = { "pointer-events": "none" };
+var _hoisted_2$11 = { "pointer-events": "none" };
 var _hoisted_3$10 = [
 	"x",
 	"y",
@@ -12273,7 +12335,7 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 							ry: model.value.borderRadius
 						}, null, 8, _hoisted_1$19),
 						createVNode(Diagonal),
-						createElementVNode("g", _hoisted_2$10, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+						createElementVNode("g", _hoisted_2$11, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
 							return openBlock(), createElementBlock(Fragment, { key: index }, [handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [handle.shape === "rect" ? (openBlock(), createElementBlock("rect", {
 								key: 0,
 								x: handle.x,
@@ -12610,7 +12672,7 @@ var _hoisted_1$17 = {
 	class: "m-path-editor",
 	style: { overflow: "visible" }
 };
-var _hoisted_2$9 = ["d"];
+var _hoisted_2$10 = ["d"];
 var _hoisted_3$9 = [
 	"x1",
 	"y1",
@@ -13315,7 +13377,7 @@ var PathEditor_default = /* @__PURE__ */ defineComponent({
 					class: "m-path-editor__hit",
 					d: screenPath.value,
 					onDblclick: onInsert
-				}, null, 40, _hoisted_2$9),
+				}, null, 40, _hoisted_2$10),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(controls.value, (c, i) => {
 					return openBlock(), createElementBlock("line", {
 						key: `l${i}`,
@@ -14084,6 +14146,10 @@ var _hoisted_1$15 = {
 	key: 0,
 	class: "m-smart-guides"
 };
+var _hoisted_2$9 = {
+	key: 0,
+	class: "m-smart-guides__label"
+};
 //#endregion
 //#region src/components/SmartGuides.vue
 var SmartGuides_default = /* @__PURE__ */ defineComponent({
@@ -14102,7 +14168,7 @@ var SmartGuides_default = /* @__PURE__ */ defineComponent({
 						width: `${item.style.width}px`,
 						height: `${item.style.height}px`
 					})
-				}, null, 6);
+				}, [item.label ? (openBlock(), createElementBlock("span", _hoisted_2$9, toDisplayString(item.label), 1)) : createCommentVNode("", true)], 6);
 			}), 128))])) : createCommentVNode("", true);
 		};
 	}
@@ -14960,7 +15026,7 @@ var BSTree = class extends BSTreeKV {};
 //#endregion
 //#region src/plugins/smartGuides.ts
 var smartGuides_default = definePlugin((editor) => {
-	const { isNode, isElement, elementSelection, selectionAabb, getAabb, root, camera, viewportAabb, registerSnapper } = editor;
+	const { isNode, isElement, isFrameNode, elementSelection, selectionAabb, getAabb, root, camera, viewportAabb, registerSnapper } = editor;
 	const snapThreshold = computed(() => Math.max(1, 5 / camera.value.zoom.x));
 	const parent = computed(() => elementSelection.value[0]?.parent ?? root.value);
 	const parentBox = computed(() => createBox(parent.value));
@@ -14988,6 +15054,13 @@ var smartGuides_default = definePlugin((editor) => {
 		box.hr = createLine(left + width, "hr", box);
 		return box;
 	}
+	function createCanvasBox() {
+		const p = parent.value;
+		if (!isNode(p) || !isFrameNode(p)) return void 0;
+		const box = createBox(p);
+		if (box) box.id = -1;
+		return box;
+	}
 	function isCanvasLine(line) {
 		return line.box?.id === -1;
 	}
@@ -15050,15 +15123,82 @@ var smartGuides_default = definePlugin((editor) => {
 		};
 		return areas;
 	}
+	function findDistancePairs(box, boxes) {
+		const moving = toBoundingBox(box);
+		let bestV;
+		let bestH;
+		for (const nb of boxes) {
+			if (nb.id === -1) continue;
+			const b = toBoundingBox(nb);
+			if (moving.overlap(b, "x")) {
+				const below = nb.vt.pos - box.vb.pos;
+				const above = box.vt.pos - nb.vb.pos;
+				if (below > 0 && (!bestV || below < bestV.gap)) bestV = {
+					gap: below,
+					below: true,
+					nb
+				};
+				if (above > 0 && (!bestV || above < bestV.gap)) bestV = {
+					gap: above,
+					below: false,
+					nb
+				};
+			}
+			if (moving.overlap(b, "y")) {
+				const after = nb.hl.pos - box.hr.pos;
+				const before = box.hl.pos - nb.hr.pos;
+				if (after > 0 && (!bestH || after < bestH.gap)) bestH = {
+					gap: after,
+					after: true,
+					nb
+				};
+				if (before > 0 && (!bestH || before < bestH.gap)) bestH = {
+					gap: before,
+					after: false,
+					nb
+				};
+			}
+		}
+		const pairs = [];
+		if (bestV) pairs.push({
+			source: bestV.below ? box.vb : box.vt,
+			target: bestV.below ? bestV.nb.vt : bestV.nb.vb,
+			type: "distance",
+			distance: bestV.gap
+		});
+		if (bestH) pairs.push({
+			source: bestH.after ? box.hr : box.hl,
+			target: bestH.after ? bestH.nb.hl : bestH.nb.hr,
+			type: "distance",
+			distance: bestH.gap
+		});
+		return pairs;
+	}
 	const linePairs = ref([]);
-	function updateSmartGuides() {
+	const gutterPoints = ref({
+		x: [],
+		y: []
+	});
+	const GUTTERS = [
+		4,
+		8,
+		12,
+		16
+	];
+	function updateSmartGuides(handle = "move") {
 		const _linePairs = [];
+		const _gutterX = [];
+		const _gutterY = [];
+		const resizeDir = handle.startsWith("resize") ? handle.split("-")[1] ?? "" : "";
 		const box = createBox(selectionAabb.value);
 		if (box) {
 			const excluded = new Set(elementSelection.value.map((el) => el.instanceId));
-			const { vLines, hLines } = parent.value.children.filter((node) => {
+			const boxes = parent.value.children.filter((node) => {
 				return !excluded.has(node.instanceId) && isElement(node) && !node.connection?.isValid() && viewportAabb.value.overlap(node.globalAabb);
-			}).map((node) => createBox(node)).filter(Boolean).reduce((store, box) => {
+			}).map((node) => createBox(node)).filter(Boolean);
+			const canvasBox = createCanvasBox();
+			if (canvasBox) boxes.push(canvasBox);
+			const { vLines, hLines } = boxes.reduce((store, box) => {
 				[
 					box.vt,
 					box.vm,
@@ -15074,6 +15214,14 @@ var smartGuides_default = definePlugin((editor) => {
 				vLines: new BSTree((a, b) => a.pos - b.pos),
 				hLines: new BSTree((a, b) => a.pos - b.pos)
 			});
+			hLines.inorderTraversal((line) => {
+				if (line.type === "hm") return;
+				for (const g of GUTTERS) _gutterX.push(line.pos + g, line.pos - g);
+			});
+			vLines.inorderTraversal((line) => {
+				if (line.type === "vm") return;
+				for (const g of GUTTERS) _gutterY.push(line.pos + g, line.pos - g);
+			});
 			const areaLine = {
 				vt: [],
 				vb: [],
@@ -15081,14 +15229,14 @@ var smartGuides_default = definePlugin((editor) => {
 				hr: []
 			};
 			[{
-				sources: [
+				sources: resizeDir ? [resizeDir.includes("t") && box.vt, resizeDir.includes("b") && box.vb].filter(Boolean) : [
 					box.vt,
 					box.vm,
 					box.vb
 				],
 				targets: vLines
 			}, {
-				sources: [
+				sources: resizeDir ? [resizeDir.includes("l") && box.hl, resizeDir.includes("r") && box.hr].filter(Boolean) : [
 					box.hl,
 					box.hm,
 					box.hr
@@ -15124,13 +15272,13 @@ var smartGuides_default = definePlugin((editor) => {
 			});
 			areaLine.vt = areaLine.vt.sort((a, b) => b.pos - a.pos);
 			areaLine.hl = areaLine.hl.sort((a, b) => b.pos - a.pos);
-			[{
+			(resizeDir ? [] : [{
 				targets: [areaLine.vt, areaLine.vb],
 				sources: [box.vt, box.vb]
 			}, {
 				targets: [areaLine.hl, areaLine.hr],
 				sources: [box.hl, box.hr]
-			}].forEach(({ sources, targets }) => {
+			}]).forEach(({ sources, targets }) => {
 				const targetA = targets[0][0];
 				const sourceA = sources[0];
 				const targetB = targets[1][0];
@@ -15167,14 +15315,24 @@ var smartGuides_default = definePlugin((editor) => {
 					}
 				}
 			});
+			if (!resizeDir) {
+				const isV = (t) => t === "vt" || t === "vm" || t === "vb";
+				const hasV = _linePairs.some((p) => isV(p.target.type));
+				const hasH = _linePairs.some((p) => !isV(p.target.type));
+				for (const pair of findDistancePairs(box, boxes)) if (isV(pair.target.type) ? !hasV : !hasH) _linePairs.push(pair);
+			}
 		}
 		linePairs.value = _linePairs;
+		gutterPoints.value = {
+			x: _gutterX,
+			y: _gutterY
+		};
 	}
 	const snapLines = computed(() => {
 		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;
@@ -15184,6 +15342,7 @@ var smartGuides_default = definePlugin((editor) => {
 				"vb"
 			].includes(target.type);
 			const itemProps = {};
+			const extra = [];
 			switch (type) {
 				case "alignment":
 					itemProps.class = ["alignment"];
@@ -15232,10 +15391,54 @@ var smartGuides_default = definePlugin((editor) => {
 							height: scaleY(bottom - top)
 						};
 					}
+					itemProps.label = String(Math.round(linePair.distance));
 					break;
 				}
+				case "distance":
+					itemProps.class = ["distance"];
+					if (vertical) {
+						itemProps.class.push("distance--vertical");
+						const top = Math.min(source.pos, target.pos);
+						itemProps.style = {
+							left: scaleX(boxSource.hm.pos) - position.left,
+							top: scaleY(top) - position.top,
+							width: 1,
+							height: scaleY(linePair.distance)
+						};
+						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() {
@@ -15269,17 +15472,23 @@ var smartGuides_default = definePlugin((editor) => {
 		const lines = getSnapPoints();
 		return {
 			xLines: lines.x,
-			yLines: lines.y
+			yLines: lines.y,
+			xGutters: gutterPoints.value.x,
+			yGutters: gutterPoints.value.y
 		};
 	} });
 	return {
 		name: "mce:smartGuides",
 		events: {
 			selectionTransformed: ({ handle }) => {
-				if (handle === "move") updateSmartGuides();
+				if (handle === "move" || /^resize-[tlrb]$/.test(handle)) updateSmartGuides(handle);
 			},
 			selectionTransformEnded: () => {
 				linePairs.value = [];
+				gutterPoints.value = {
+					x: [],
+					y: []
+				};
 			}
 		},
 		components: [{
@@ -18307,7 +18516,7 @@ var toolbelt_default = definePlugin((editor) => {
 //#endregion
 //#region src/plugins/transform.ts
 var transform_default = definePlugin((editor) => {
-	const { selectionObb, selectionAabb, elementSelection, exec, inEditorIs, resizeElement, state, registerConfig, snap } = editor;
+	const { selectionObb, selectionAabb, elementSelection, exec, inEditorIs, resizeElement, state, registerConfig, snap, snapResize } = editor;
 	registerConfig("interaction.transform", { default: {
 		handleShape: "rect",
 		handleStyle: "4-points",
@@ -18365,7 +18574,7 @@ var transform_default = definePlugin((editor) => {
 		return transform.value;
 	}
 	const setTransform = (type, value, options = {}) => {
-		const { event, isCorner } = options;
+		const { event, isCorner, direction = "" } = options;
 		if (!context) initContext();
 		const _context = context;
 		const oldTransform = getTransform();
@@ -18397,7 +18606,7 @@ var transform_default = definePlugin((editor) => {
 				else transform.left = ctx.startPoint.x;
 			}
 			if (!transform.rotate) snap(transform);
-		}
+		} else if (type === "resize" && !transform.rotate && !isMultiple) snapResize(transform, direction);
 		const offsetStyle = {
 			left: transform.left - oldTransform.left,
 			top: transform.top - oldTransform.top,
@@ -18624,7 +18833,8 @@ var transform_default = definePlugin((editor) => {
 				const [type, direction = ""] = handle.split("-");
 				setTransform(type, value, {
 					event,
-					isCorner: direction.length > 1
+					isCorner: direction.length > 1,
+					direction
 				});
 			},
 			selectionTransformEnded: () => {

package/dist/mixins/snapper.d.ts

@@ -6,6 +6,9 @@ declare global {
             xLines?: number[];
             yLines?: number[];
             points?: Vector2Like[];
+            /** 间距卡点候选位（如 4/8/12/16 间距）。仅当主吸附线(对齐/区域)未命中时作为次选。 */
+            xGutters?: number[];
+            yGutters?: number[];
         }
         interface Snapper {
             getLines: () => SnapperData;
@@ -20,6 +23,13 @@ declare global {
                 width: number;
                 height: number;
             }) => void;
+            /** 缩放吸附：按被拖动的边（dir 含 t/l/r/b）将该边对齐到最近的吸附线，调整对应宽高。 */
+            snapResize: (box: {
+                left: number;
+                top: number;
+                width: number;
+                height: number;
+            }, dir: string) => void;
         }
     }
 }

package/dist/plugins/transform.d.ts

@@ -32,6 +32,8 @@ declare global {
         interface TransformOptions {
             event?: MouseEvent;
             isCorner?: boolean;
+            /** resize 时被拖动的方向（t/l/r/b/tl/...），用于缩放吸附定位被拖动的边。 */
+            direction?: string;
         }
         interface Commands {
             enter: () => void;

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.22.2",
+  "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.2",
+    "modern-canvas": "^0.22.0",
     "modern-font": "^0.6.0",
     "modern-idoc": "^0.11.8",
     "modern-text": "^2.0.3",