mce 0.21.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

@@ -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": "抗锯齿",
@@ -8886,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");
@@ -9960,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"
 };
@@ -10079,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)
@@ -11651,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",
@@ -12297,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,
@@ -12311,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)),
@@ -15840,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" };
@@ -15866,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)
@@ -16582,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;
@@ -17268,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 }]),
@@ -17323,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,
@@ -17743,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" };
@@ -17864,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",
@@ -19227,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"
 			}
 		];
@@ -19394,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);
 		};
@@ -19408,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 自动完成文字生成。"]
-	},
-	image: {
-		label: "图片生成",
-		title: "🖼️ 双击此处描述画面..",
-		body: ["输入画面描述、风格、主体等内容，让 AI 自动完成图片生成。"]
+		title: "✍️ Double-click to add text",
+		body: ["Or describe it below and let AI write for you."]
 	},
-	video: {
-		label: "视频生成",
-		title: "🎬 双击此处描述视频..",
-		body: ["输入分镜、动作、风格等内容，让 AI 自动完成视频生成。"]
-	}
+	image: { image: IMAGE_PLACEHOLDER },
+	video: { image: VIDEO_PLACEHOLDER }
 };
 //#endregion
 //#region src/plugins/index.ts
@@ -19487,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/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/package.json

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