mce 0.20.0 → 0.21.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Aabb2D, Animation, Camera2D, DEG_TO_RAD, DrawboardEffect, Element2D, Engine, IN_BROWSER, IN_MAC_OS, Lottie2D, Node as Node$1, Obb2D, Timeline, TimelineNode, Video2D, assets, clamp, customNodes, render } from "modern-canvas";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, effectScope, getCurrentInstance, guardReactiveProps, h, inject, isReactive, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, onScopeDispose, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRef, toValue, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, vModelText, vShow, warn, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, effectScope, getCurrentInstance, guardReactiveProps, h, inject, isReactive, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, onScopeDispose, openBlock, provide, reactive, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, toRef, toValue, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, vModelText, vShow, warn, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { isClient, onClickOutside, useDebounceFn, useEventListener, useFileDialog, useImage, useLocalStorage, useResizeObserver } from "@vueuse/core";
 import { Observable, getObjectValueByPath, idGenerator, isCRLF, isEqualObject, normalizeCRLF, normalizeTextContent, property, setObjectValueByPath, textContentToString } from "modern-idoc";
 import { Text, measureText } from "modern-text";
@@ -8163,6 +8163,116 @@ var edit_default = definePlugin((editor, options) => {
 	};
 });
 //#endregion
+//#region src/plugins/flexLayout.ts
+/**
+* Drag-to-reorder for children of a flex/auto-layout container.
+*
+* `transform.ts` skips the absolute move for such a child; here we make it
+* follow the cursor (a temporary left/top offset over its flow slot), swap
+* order with its siblings as its centre crosses theirs, and on release drop
+* the offset so it snaps back into its (new) slot.
+*
+* The sibling layout is derived analytically from sizes/gap captured once at
+* drag start + the current children order (the order array updates
+* synchronously on `moveChild`, but the rendered transforms only catch up on
+* the next tick — so reading them back with `getObb` mid-drag is stale and
+* makes the swap oscillate at the boundary). Structural changes run on the raw
+* (non-reactive) nodes, else the canvas hands a Proxy to yoga's embind which
+* throws a Proxy-invariant error and drops the child.
+*/
+var flexLayout_default = definePlugin((editor) => {
+	const { isElement, elementSelection, getObb } = editor;
+	let drag;
+	function flexParentOf(el) {
+		const parent = el?.getParent();
+		return parent && isElement(parent) && parent.style?.display === "flex" ? parent : void 0;
+	}
+	function elementChildren(parent) {
+		return parent.children.filter((c) => isElement(c));
+	}
+	/** el's slot main-start and the siblings' main-axis centres, for one order. */
+	function layout(d, order) {
+		let pos = d.contentStart;
+		let elStart = pos;
+		const centers = [];
+		for (const c of order) {
+			const s = d.size.get(c.instanceId) ?? 0;
+			if (c.equal(d.el)) elStart = pos;
+			else centers.push(pos + s / 2);
+			pos += s + d.gap;
+		}
+		return {
+			elStart,
+			centers
+		};
+	}
+	function start() {
+		drag = void 0;
+		const el = elementSelection.value[0];
+		if (elementSelection.value.length !== 1 || !el) return;
+		const parent = flexParentOf(el);
+		if (!parent) return;
+		const dir = parent.style.flexDirection ?? "row";
+		const horizontal = dir === "row" || dir === "row-reverse";
+		const children = elementChildren(parent);
+		const main = (o) => horizontal ? o.left : o.top;
+		const mainSize = (o) => horizontal ? o.width : o.height;
+		const size = /* @__PURE__ */ new Map();
+		children.forEach((c) => size.set(c.instanceId, mainSize(getObb(c))));
+		const first = getObb(children[0]);
+		const gap = children[1] ? main(getObb(children[1])) - (main(first) + mainSize(first)) : 0;
+		const elObb = getObb(el);
+		drag = {
+			el,
+			parent,
+			horizontal,
+			reverse: typeof dir === "string" && dir.endsWith("-reverse"),
+			gap,
+			contentStart: main(first),
+			crossSlot: horizontal ? elObb.top : elObb.left,
+			size
+		};
+	}
+	function move(value) {
+		if (!drag) return;
+		const d = drag;
+		const dragMain = d.horizontal ? value.left + value.width / 2 : value.top + value.height / 2;
+		let order = elementChildren(d.parent);
+		let { elStart, centers } = layout(d, order);
+		const before = centers.filter((c) => c < dragMain).length;
+		const index = d.reverse ? centers.length - before : before;
+		if (index !== order.findIndex((c) => c.equal(d.el))) {
+			toRaw(d.parent).moveChild(toRaw(d.el), index);
+			order = elementChildren(d.parent);
+			({elStart} = layout(d, order));
+		}
+		if (d.horizontal) {
+			d.el.style.left = value.left - elStart;
+			d.el.style.top = value.top - d.crossSlot;
+		} else {
+			d.el.style.top = value.top - elStart;
+			d.el.style.left = value.left - d.crossSlot;
+		}
+	}
+	function end() {
+		if (drag) {
+			drag.el.style.left = 0;
+			drag.el.style.top = 0;
+			drag = void 0;
+		}
+	}
+	return {
+		name: "mce:flexLayout",
+		events: {
+			selectionTransformStarted: start,
+			selectionTransformed: (ctx) => {
+				if (ctx.handle === "move") move(ctx.value);
+			},
+			selectionTransformEnded: end
+		}
+	};
+});
+//#endregion
 //#region src/plugins/formatPaint.ts
 var formatPaint_default = definePlugin((editor) => {
 	const { elementSelection, exec, state } = editor;
@@ -13691,7 +13801,7 @@ var selection_default = definePlugin((editor) => {
 			selectionTransformed: () => {
 				elementSelection.value.forEach((el) => {
 					el.findAncestor((ancestor) => {
-						if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) obbToFit(ancestor);
+						if (isElement(ancestor) && !inEditorIs(ancestor, "Frame") && ancestor.style.display !== "flex") obbToFit(ancestor);
 						return false;
 					});
 				});
@@ -15481,6 +15591,16 @@ var SmartSelection_default = /* @__PURE__ */ defineComponent({
 					switch (direction) {
 						case "horizontal":
 							if (center.x < min) {
+								if (prev) {
+									let left = elAabb.right - prev.globalAabb.width;
+									elAabb.x = prev.globalAabb.left;
+									const parentAabb = prev.getParent()?.globalAabb;
+									if (parentAabb) left -= parentAabb.x;
+									prev.style.left = left;
+									prev.updateGlobalTransform();
+									update();
+								}
+							} else if (center.x > max) {
 								if (next) {
 									const left = next.globalAabb.right - elAabb.width;
 									let _left = elAabb.left;
@@ -15491,16 +15611,6 @@ var SmartSelection_default = /* @__PURE__ */ defineComponent({
 									next.updateGlobalTransform();
 									update();
 								}
-							} else if (center.x > max) {
-								if (prev) {
-									let left = elAabb.right - prev.globalAabb.width;
-									elAabb.x = prev.globalAabb.left;
-									const parentAabb = prev.getParent()?.globalAabb;
-									if (parentAabb) left -= parentAabb.x;
-									prev.style.left = left;
-									prev.updateGlobalTransform();
-									update();
-								}
 							}
 							break;
 						case "vertical":
@@ -18257,6 +18367,10 @@ var transform_default = definePlugin((editor) => {
 		};
 		const els = elementSelection.value;
 		const isMultiple = els.length > 1;
+		if (type === "move" && els.length === 1) {
+			const parent = els[0].getParent();
+			if (parent && parent.style?.display === "flex") return;
+		}
 		if (type === "move") {
 			transform.left = Math.round(transform.left);
 			transform.top = Math.round(transform.top);
@@ -19319,6 +19433,7 @@ var plugins = [
 	clipboard_default,
 	doc_default,
 	edit_default,
+	flexLayout_default,
 	formatPaint_default,
 	frame_default,
 	history_default,

package/dist/plugins/flexLayout.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Drag-to-reorder for children of a flex/auto-layout container.
+ *
+ * `transform.ts` skips the absolute move for such a child; here we make it
+ * follow the cursor (a temporary left/top offset over its flow slot), swap
+ * order with its siblings as its centre crosses theirs, and on release drop
+ * the offset so it snaps back into its (new) slot.
+ *
+ * The sibling layout is derived analytically from sizes/gap captured once at
+ * drag start + the current children order (the order array updates
+ * synchronously on `moveChild`, but the rendered transforms only catch up on
+ * the next tick — so reading them back with `getObb` mid-drag is stale and
+ * makes the swap oscillate at the boundary). Structural changes run on the raw
+ * (non-reactive) nodes, else the canvas hands a Proxy to yoga's embind which
+ * throws a Proxy-invariant error and drops the child.
+ */
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/typed-plugins.d.ts

@@ -29,6 +29,7 @@ import './plugins/autoNest'
 import './plugins/clipboard'
 import './plugins/doc'
 import './plugins/edit'
+import './plugins/flexLayout'
 import './plugins/formatPaint'
 import './plugins/frame'
 import './plugins/history'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.20.0",
+  "version": "0.21.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",