mce 0.20.0 → 0.22.0

package/dist/index.css

@@ -1686,6 +1686,15 @@
 .m-workflow__menu-item:hover {
   background: #f3f4f6;
 }
+.m-workflow__menu-item-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.m-workflow__menu-item-main .m-icon {
+  font-size: 18px;
+  color: #6b7280;
+}
 .m-workflow__menu-kbd {
   font-size: 12px;
   color: #9ca3af;

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";
@@ -6057,6 +6057,9 @@ var en_default = {
 	"collapse": "Collapse",
 	"statusbar": "Statusbar",
 	"creator": "Create node",
+	"workflow:text": "Text",
+	"workflow:image": "Image",
+	"workflow:video": "Video",
 	"memoryManager": "Manage memory",
 	"toolbelt": "Toolbelt",
 	"msaa": "MSAA",
@@ -6189,6 +6192,9 @@ var zh_Hans_default = {
 	"stepForward": "前进一帧",
 	"collapse": "折叠",
 	"creator": "创建节点",
+	"workflow:text": "文字生成",
+	"workflow:image": "图片生成",
+	"workflow:video": "视频生成",
 	"memoryManager": "管理内存",
 	"toolbelt": "工具腰带",
 	"msaa": "抗锯齿",
@@ -8163,6 +8169,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;
@@ -8776,6 +8892,8 @@ function useNode(nodeRef, editor = useEditor()) {
 			const node = nodeRef.value;
 			let value = node.name;
 			if (!value || value[0] === "@") {
+				const inEditor = node.meta?.inEditorIs;
+				if (typeof inEditor === "string" && inEditor.startsWith("Workflow")) return t(`workflow:${inEditor.slice(8).toLowerCase()}`);
 				if (inEditorIs(node, "Frame")) return t("frame");
 				else if (node.children.filter(isElement).length) value = t("group");
 				else if (node instanceof Lottie2D) value = t("lottie");
@@ -9850,7 +9968,7 @@ var _hoisted_6$5 = {
 	key: 2,
 	class: "m-list-item__kbd"
 };
-var _hoisted_7$4 = {
+var _hoisted_7$5 = {
 	key: 3,
 	class: "m-list-item__append"
 };
@@ -9969,7 +10087,7 @@ var Menu_default = /* @__PURE__ */ defineComponent({
 						_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_4$8, [renderSlot(_ctx.$slots, "prepend", { item })])) : createCommentVNode("", true),
 						createElementVNode("div", _hoisted_5$6, [renderSlot(_ctx.$slots, "title", { item }, () => [createTextVNode(toDisplayString(item.key), 1)])]),
 						_ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_6$5, [renderSlot(_ctx.$slots, "kbd", { item })])) : createCommentVNode("", true),
-						item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$4, [renderSlot(_ctx.$slots, "append", { item }), item.children?.length ? (openBlock(), createBlock(unref(Icon_default), {
+						item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$5, [renderSlot(_ctx.$slots, "append", { item }), item.children?.length ? (openBlock(), createBlock(unref(Icon_default), {
 							key: 0,
 							icon: "$arrowRight"
 						})) : createCommentVNode("", true)])) : createCommentVNode("", true)
@@ -11541,8 +11659,8 @@ var _hoisted_5$5 = [
 	"ry"
 ];
 var _hoisted_6$4 = ["transform"];
-var _hoisted_7$3 = { "pointer-events": "all" };
-var _hoisted_8$3 = [
+var _hoisted_7$4 = { "pointer-events": "all" };
+var _hoisted_8$4 = [
 	"x",
 	"y",
 	"width",
@@ -12187,7 +12305,7 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 							transform: `matrix(1, 0, 0, 1, -32, ${model.value.height}) rotate(270 16 16)`,
 							class: "m-transform__rotator"
 						}, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" }, null, -1)])], 8, _hoisted_6$4)) : createCommentVNode("", true)]),
-						createElementVNode("g", _hoisted_7$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+						createElementVNode("g", _hoisted_7$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
 							return openBlock(), createElementBlock("rect", {
 								key: index,
 								ref_for: true,
@@ -12201,7 +12319,7 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 								class: "m-transform__handle-rect",
 								cursor: transforming.value ? "auto" : getCursor(handle.type),
 								onPointerdown: (event) => onPointerDown(event, index)
-							}, null, 40, _hoisted_8$3);
+							}, null, 40, _hoisted_8$4);
 						}), 128))]),
 						createElementVNode("g", _hoisted_9$3, [renderSlot(_ctx.$slots, "svg", { box: model.value })])
 					], 4)),
@@ -13691,7 +13809,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 +15599,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 +15619,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":
@@ -15730,8 +15848,8 @@ var _hoisted_3$7 = { class: "m-statusbar__item" };
 var _hoisted_4$4 = { class: "m-statusbar__kbd" };
 var _hoisted_5$3 = { class: "m-statusbar__kbd" };
 var _hoisted_6$3 = { class: "m-statusbar__item" };
-var _hoisted_7$2 = { class: "m-statusbar__kbd" };
-var _hoisted_8$2 = { class: "m-statusbar__item" };
+var _hoisted_7$3 = { class: "m-statusbar__kbd" };
+var _hoisted_8$3 = { class: "m-statusbar__item" };
 var _hoisted_9$2 = { class: "m-statusbar__item" };
 var _hoisted_10$1 = { class: "m-statusbar__kbd" };
 var _hoisted_11$1 = { class: "m-statusbar__item" };
@@ -15756,9 +15874,9 @@ var Statusbar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 			return openBlock(), createElementBlock("div", _hoisted_1$12, [createElementVNode("div", _hoisted_2$7, [unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 				createElementVNode("div", _hoisted_3$7, [createElementVNode("span", _hoisted_4$4, toDisplayString(unref(getKbd)("Command")), 1), createElementVNode("span", _hoisted_5$3, toDisplayString(unref(getKbd)("Enter")), 1)]),
 				_cache[1] || (_cache[1] = createElementVNode("span", null, "/", -1)),
-				createElementVNode("div", _hoisted_6$3, [createElementVNode("span", _hoisted_7$2, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)])
+				createElementVNode("div", _hoisted_6$3, [createElementVNode("span", _hoisted_7$3, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)])
 			], 64)) : unref(state) === "transforming" || unref(state) === "moving" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-				createElementVNode("div", _hoisted_8$2, [createVNode(unref(Icon_default), { icon: "$mouseRightClick" })]),
+				createElementVNode("div", _hoisted_8$3, [createVNode(unref(Icon_default), { icon: "$mouseRightClick" })]),
 				_cache[3] || (_cache[3] = createElementVNode("span", null, "\xA0/\xA0", -1)),
 				createElementVNode("div", _hoisted_9$2, [createElementVNode("span", _hoisted_10$1, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("cancel")), 1)]),
 				unref(state) === "moving" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[2] || (_cache[2] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)), createElementVNode("div", _hoisted_11$1, [createElementVNode("span", _hoisted_12$1, toDisplayString(unref(getKbd)("Shift")), 1), createElementVNode("span", null, toDisplayString(unref(t)("constrainMovement")), 1)])], 64)) : createCommentVNode("", true)
@@ -16472,13 +16590,13 @@ var _hoisted_3$6 = ["onPointerdown"];
 var _hoisted_4$3 = ["onPointerdown"];
 var _hoisted_5$2 = ["onPointerdown"];
 var _hoisted_6$2 = ["onPointerdown"];
-var _hoisted_7$1 = [
+var _hoisted_7$2 = [
 	"onPointerdown",
 	"onPointerenter",
 	"onDblclick",
 	"onContextmenu"
 ];
-var _hoisted_8$1 = ["disabled"];
+var _hoisted_8$2 = ["disabled"];
 var _hoisted_9$1 = ["disabled"];
 var COL_H = 22;
 var ROW_W = 28;
@@ -17158,7 +17276,7 @@ var TableEditor_default = /* @__PURE__ */ defineComponent({
 							onPointerenter: ($event) => onCellPointerenter(cell),
 							onDblclick: ($event) => onCellDblclick($event, cell),
 							onContextmenu: ($event) => onCellContextmenu($event, cell)
-						}, null, 44, _hoisted_7$1);
+						}, null, 44, _hoisted_7$2);
 					}), 128)),
 					createElementVNode("div", {
 						class: normalizeClass(["m-table-editor__selection", { "m-table-editor__selection--range": !isSingleSelection.value }]),
@@ -17213,7 +17331,7 @@ var TableEditor_default = /* @__PURE__ */ defineComponent({
 						class: "m-table-editor__menu-item",
 						disabled: isSingleSelection.value,
 						onClick: _cache[9] || (_cache[9] = ($event) => doMerge())
-					}, toDisplayString(unref(t)("table:mergeCells")), 9, _hoisted_8$1),
+					}, toDisplayString(unref(t)("table:mergeCells")), 9, _hoisted_8$2),
 					createElementVNode("button", {
 						class: "m-table-editor__menu-item",
 						disabled: !selectedAnchorMerged.value,
@@ -17633,8 +17751,8 @@ var _hoisted_3$3 = { class: "m-timeline__time--muted" };
 var _hoisted_4$1 = { class: "m-timeline__controls" };
 var _hoisted_5$1 = ["title"];
 var _hoisted_6$1 = ["title"];
-var _hoisted_7 = ["title"];
-var _hoisted_8 = ["title"];
+var _hoisted_7$1 = ["title"];
+var _hoisted_8$1 = ["title"];
 var _hoisted_9 = ["title"];
 var _hoisted_10 = ["title"];
 var _hoisted_11 = { class: "m-timeline__main" };
@@ -17754,13 +17872,13 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 						type: "button",
 						title: unref(paused) ? unref(t)("play") : unref(t)("pause"),
 						onClick: _cache[2] || (_cache[2] = ($event) => unref(exec)("togglePlay"))
-					}, [createVNode(unref(Icon_default), { icon: unref(paused) ? "$play" : "$pause" }, null, 8, ["icon"])], 8, _hoisted_7),
+					}, [createVNode(unref(Icon_default), { icon: unref(paused) ? "$play" : "$pause" }, null, 8, ["icon"])], 8, _hoisted_7$1),
 					createElementVNode("button", {
 						class: "m-timeline__btn",
 						type: "button",
 						title: unref(t)("stepForward"),
 						onClick: _cache[3] || (_cache[3] = ($event) => unref(exec)("stepForward"))
-					}, [createVNode(unref(Icon_default), { icon: "$stepForward" })], 8, _hoisted_8),
+					}, [createVNode(unref(Icon_default), { icon: "$stepForward" })], 8, _hoisted_8$1),
 					createElementVNode("button", {
 						class: "m-timeline__btn",
 						type: "button",
@@ -18257,6 +18375,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);
@@ -19113,29 +19235,31 @@ var _hoisted_2$1 = {
 };
 var _hoisted_3$1 = ["d"];
 var _hoisted_4 = ["onPointerdown"];
-var _hoisted_5 = ["onClick"];
-var _hoisted_6 = { class: "m-workflow__menu-kbd" };
+var _hoisted_5 = { class: "m-workflow__menu-title" };
+var _hoisted_6 = ["onClick"];
+var _hoisted_7 = { class: "m-workflow__menu-item-main" };
+var _hoisted_8 = { class: "m-workflow__menu-kbd" };
 var PORT_GAP = 16;
 //#endregion
 //#region src/components/Workflow.vue
 var Workflow_default = /* @__PURE__ */ defineComponent({
 	__name: "Workflow",
 	setup(__props) {
-		const { mode, elementSelection, getAabb, camera, drawboardAabb, root, isElement, exec } = useEditor();
+		const { mode, elementSelection, getAabb, camera, drawboardAabb, root, isElement, exec, t } = useEditor();
 		const NODE_TYPES = [
 			{
 				type: "text",
-				label: "文字生成",
+				icon: "$text",
 				kbd: "⇧T"
 			},
 			{
 				type: "image",
-				label: "图片生成",
+				icon: "$image",
 				kbd: "⇧I"
 			},
 			{
 				type: "video",
-				label: "视频生成",
+				icon: "$video",
 				kbd: "⇧V"
 			}
 		];
@@ -19280,13 +19404,13 @@ var Workflow_default = /* @__PURE__ */ defineComponent({
 						left: `${menu.value.x}px`,
 						top: `${menu.value.y}px`
 					})
-				}, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "m-workflow__menu-title" }, " 新增节点 ", -1)), (openBlock(), createElementBlock(Fragment, null, renderList(NODE_TYPES, (n) => {
+				}, [createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("creator")), 1), (openBlock(), createElementBlock(Fragment, null, renderList(NODE_TYPES, (n) => {
 					return createElementVNode("button", {
 						key: n.type,
 						type: "button",
 						class: "m-workflow__menu-item",
 						onClick: ($event) => chooseNodeType(n.type)
-					}, [createElementVNode("span", null, toDisplayString(n.label), 1), createElementVNode("span", _hoisted_6, toDisplayString(n.kbd), 1)], 8, _hoisted_5);
+					}, [createElementVNode("span", _hoisted_7, [createVNode(unref(Icon_default), { icon: n.icon }, null, 8, ["icon"]), createTextVNode(" " + toDisplayString(unref(t)(`workflow:${n.type}`)), 1)]), createElementVNode("span", _hoisted_8, toDisplayString(n.kbd), 1)], 8, _hoisted_6);
 				}), 64))], 4)], 64)) : createCommentVNode("", true)
 			])) : createCommentVNode("", true);
 		};
@@ -19294,22 +19418,18 @@ var Workflow_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/plugins/workflow.ts
+function placeholderImage(svg) {
+	return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+var IMAGE_PLACEHOLDER = placeholderImage("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"380\" height=\"280\" viewBox=\"0 0 380 280\" fill=\"none\"><rect width=\"380\" height=\"280\" rx=\"20\" fill=\"#f3f4f6\"/><rect x=\"124\" y=\"92\" width=\"132\" height=\"96\" rx=\"12\" stroke=\"#c8ccd4\" stroke-width=\"6\" stroke-linejoin=\"round\"/><circle cx=\"156\" cy=\"124\" r=\"12\" fill=\"#c8ccd4\"/><path d=\"M132 184l40-40 26 26 22-22 36 36\" stroke=\"#c8ccd4\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
+var VIDEO_PLACEHOLDER = placeholderImage("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"380\" height=\"280\" viewBox=\"0 0 380 280\" fill=\"none\"><rect width=\"380\" height=\"280\" rx=\"20\" fill=\"#f3f4f6\"/><circle cx=\"190\" cy=\"140\" r=\"48\" stroke=\"#c8ccd4\" stroke-width=\"6\"/><path d=\"M178 116l40 24-40 24z\" fill=\"#c8ccd4\"/></svg>");
 var DEFAULT_NODES = {
 	text: {
-		label: "文字生成",
-		title: "✍️ 双击此处输入文字..",
-		body: ["可以在此输入提示词，比如画面描述、产品卖点、活动主题、场景描述、品牌 slogan 等内容。若暂时没有明确内容，也可先输入关键词或草稿，后续随时修改优化哦！", "也可以在底部输入框输入需求，让 AI 自动完成文字生成。"]
+		title: "✍️ Double-click to add text",
+		body: ["Or describe it below and let AI write for you."]
 	},
-	image: {
-		label: "图片生成",
-		title: "🖼️ 双击此处描述画面..",
-		body: ["输入画面描述、风格、主体等内容，让 AI 自动完成图片生成。"]
-	},
-	video: {
-		label: "视频生成",
-		title: "🎬 双击此处描述视频..",
-		body: ["输入分镜、动作、风格等内容，让 AI 自动完成视频生成。"]
-	}
+	image: { image: IMAGE_PLACEHOLDER },
+	video: { image: VIDEO_PLACEHOLDER }
 };
 //#endregion
 //#region src/plugins/index.ts
@@ -19319,6 +19439,7 @@ var plugins = [
 	clipboard_default,
 	doc_default,
 	edit_default,
+	flexLayout_default,
 	formatPaint_default,
 	frame_default,
 	history_default,
@@ -19372,26 +19493,32 @@ var plugins = [
 		}
 		function createWorkflowNode(type) {
 			const t = getTemplate(type);
-			return {
-				name: t.label ?? type,
+			const node = {
+				name: t.label,
 				style: {
 					width: 380,
 					height: 280,
 					borderRadius: 20,
-					padding: 28,
-					fontSize: 16,
-					lineHeight: 1.6,
-					backgroundColor: "#ffffff",
 					borderColor: "#ececf0",
 					borderWidth: 1
 				},
-				text: { content: buildContent(t) },
 				meta: {
 					inPptIs: "Shape",
 					inCanvasIs: "Element2D",
 					inEditorIs: `Workflow${type.charAt(0).toUpperCase()}${type.slice(1)}`
 				}
 			};
+			if (t.image) node.foreground = { image: t.image };
+			else {
+				Object.assign(node.style, {
+					padding: 28,
+					fontSize: 16,
+					lineHeight: 1.6,
+					backgroundColor: "#ffffff"
+				});
+				node.text = { content: buildContent(t) };
+			}
+			return node;
 		}
 		function addWorkflowNode(type, position) {
 			return addElement(createWorkflowNode(type), {

package/dist/locale/en.d.ts

@@ -91,6 +91,9 @@ declare const _default: {
     collapse: string;
     statusbar: string;
     creator: string;
+    'workflow:text': string;
+    'workflow:image': string;
+    'workflow:video': string;
     memoryManager: string;
     toolbelt: string;
     msaa: string;

package/dist/locale/zh-Hans.d.ts

@@ -91,6 +91,9 @@ declare const _default: {
     stepForward: string;
     collapse: string;
     creator: string;
+    'workflow:text': string;
+    'workflow:image': string;
+    'workflow:video': string;
     memoryManager: string;
     toolbelt: string;
     msaa: string;

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/plugins/workflow.d.ts

@@ -2,12 +2,20 @@ import type { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
         interface WorkflowNodeTemplate {
-            /** Layer-panel name (and header label). */
+            /**
+             * 覆盖节点名（写入 node.name）。不设时图层名走 i18n（key：workflow:<type>），
+             * 切换语言即时生效；菜单项始终走 i18n。
+             */
             label?: string;
             /** Bold first line shown inside the node. */
             title?: string;
             /** Gray hint paragraphs under the title. */
             body?: string[];
+            /**
+             * 默认占位图。设置后节点渲染这张图片而非 title/body 文字
+             * （图片/视频生成节点用它呈现一张默认图）。
+             */
+            image?: string;
         }
         interface Options {
             /** Override/extend the workflow node content templates, keyed by node type. */

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.22.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",
@@ -69,6 +69,7 @@
   },
   "peerDependencies": {
     "lottie-web": "^5",
+    "modern-gif": "^2",
     "typescript": ">=4.7",
     "vue": "^3.5.0",
     "yoga-layout": "^3"
@@ -77,6 +78,9 @@
     "lottie-web": {
       "optional": true
     },
+    "modern-gif": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     },