@tmagic/editor 1.8.0-beta.0 → 1.8.0-beta.2

package/dist/es/services/events.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { toLine } from "@tmagic/utils";
 import { reactive } from "vue";
 import { cloneDeep } from "lodash-es";
@@ -14,7 +14,7 @@ var canUsePluginMethods = {
 };
 var eventMap = reactive({});
 var methodMap = reactive({});
-var Events = class extends BaseService_default {
+var Events = class extends BaseService {
 	constructor() {
 		super([...canUsePluginMethods.async.map((methodName) => ({
 			name: methodName,

package/dist/es/services/history.js

@@ -1,13 +1,179 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { UndoRedo } from "../utils/undo-redo.js";
 import { reactive } from "vue";
-//#region packages/editor/src/services/history.ts
-var History = class extends BaseService_default {
+import { cloneDeep } from "lodash-es";
+var history_default = new class History extends BaseService {
+	/**
+	* 把单个代码块栈拆成若干 group：
+	* - 把"新增/删除"独立成组（语义上属于一次性事件，不应与 update 合并）；
+	* - 连续 'update' 合并到同一组，组内 steps 顺序就是发生顺序。
+	*/
+	static mergeCodeBlockSteps(codeBlockId, list, cursor) {
+		const groups = [];
+		let current = null;
+		const currentIndex = cursor - 1;
+		list.forEach((step, index) => {
+			const opType = History.detectOpType(step.oldContent, step.newContent);
+			const applied = index < cursor;
+			const isCurrent = index === currentIndex;
+			if (opType === "update" && current?.opType === "update") {
+				current.steps.push({
+					step,
+					index,
+					applied,
+					isCurrent
+				});
+				current.applied = applied;
+				if (isCurrent) current.isCurrent = true;
+			} else {
+				current = {
+					kind: "code-block",
+					id: codeBlockId,
+					opType,
+					steps: [{
+						step,
+						index,
+						applied,
+						isCurrent
+					}],
+					applied,
+					isCurrent
+				};
+				groups.push(current);
+			}
+		});
+		return groups;
+	}
+	static mergeDataSourceSteps(dataSourceId, list, cursor) {
+		const groups = [];
+		let current = null;
+		const currentIndex = cursor - 1;
+		list.forEach((step, index) => {
+			const opType = History.detectOpType(step.oldSchema, step.newSchema);
+			const applied = index < cursor;
+			const isCurrent = index === currentIndex;
+			if (opType === "update" && current?.opType === "update") {
+				current.steps.push({
+					step,
+					index,
+					applied,
+					isCurrent
+				});
+				current.applied = applied;
+				if (isCurrent) current.isCurrent = true;
+			} else {
+				current = {
+					kind: "data-source",
+					id: dataSourceId,
+					opType,
+					steps: [{
+						step,
+						index,
+						applied,
+						isCurrent
+					}],
+					applied,
+					isCurrent
+				};
+				groups.push(current);
+			}
+		});
+		return groups;
+	}
+	/**
+	* 根据 old/new 是否为 null 推断 opType（与 push 时的约定一致）。
+	*/
+	static detectOpType(oldVal, newVal) {
+		if (oldVal === null && newVal !== null) return "add";
+		if (oldVal !== null && newVal === null) return "remove";
+		return "update";
+	}
+	/**
+	* 把页面栈拆成若干 group：
+	* - 单节点的 'update' 按 targetId 与相邻同 targetId 的 update 合并到一个 group；
+	* - 'add' / 'remove' 始终独立成组（语义上是结构变更，不应被收纳进单节点修改组）；
+	* - 多节点 'update'（如批量改属性）也独立成组（无明确单一目标，避免误合并）。
+	*/
+	static mergePageSteps(pageId, list, cursor) {
+		const groups = [];
+		let current = null;
+		const currentIndex = cursor - 1;
+		list.forEach((step, index) => {
+			const applied = index < cursor;
+			const isCurrent = index === currentIndex;
+			const targetId = History.detectPageTargetId(step);
+			const targetName = History.detectPageTargetName(step);
+			const entry = {
+				step,
+				index,
+				applied,
+				isCurrent
+			};
+			const mergeable = step.opType === "update" && targetId !== void 0;
+			if (mergeable && current?.opType === "update" && current.targetId === targetId) {
+				current.steps.push(entry);
+				current.applied = applied;
+				if (isCurrent) current.isCurrent = true;
+				if (targetName) current.targetName = targetName;
+			} else {
+				current = {
+					kind: "page",
+					pageId,
+					opType: step.opType,
+					targetId: mergeable ? targetId : void 0,
+					targetName,
+					steps: [entry],
+					applied,
+					isCurrent
+				};
+				groups.push(current);
+			}
+		});
+		return groups;
+	}
+	/**
+	* 解析 StepValue 中的"目标节点 id"用于合并：
+	* - 单节点 update：取唯一一项 updatedItems 的节点 id；
+	* - 其它情形（多节点 update / add / remove）：返回 undefined，表示不参与合并。
+	*/
+	static detectPageTargetId(step) {
+		if (step.opType !== "update") return void 0;
+		const items = step.updatedItems;
+		if (items?.length !== 1) return void 0;
+		return items[0].newNode?.id ?? items[0].oldNode?.id;
+	}
+	/** 解析 StepValue 中的目标节点可读名（用于 UI 展示）。 */
+	static detectPageTargetName(step) {
+		if (step.opType === "update") {
+			const items = step.updatedItems;
+			if (items?.length === 1) {
+				const node = items[0].newNode || items[0].oldNode;
+				return node?.name || node?.type || (node?.id !== void 0 ? `${node.id}` : void 0);
+			}
+			return items?.length ? `${items.length} 个节点` : void 0;
+		}
+		if (step.opType === "add") {
+			if (step.nodes?.length === 1) {
+				const n = step.nodes[0];
+				return n.name || n.type || `${n.id}`;
+			}
+			return step.nodes?.length ? `${step.nodes.length} 个节点` : void 0;
+		}
+		if (step.opType === "remove") {
+			if (step.removedItems?.length === 1) {
+				const n = step.removedItems[0].node;
+				return n.name || n.type || `${n.id}`;
+			}
+			return step.removedItems?.length ? `${step.removedItems.length} 个节点` : void 0;
+		}
+	}
 	state = reactive({
 		pageSteps: {},
 		pageId: void 0,
 		canRedo: false,
-		canUndo: false
+		canUndo: false,
+		codeBlockState: {},
+		dataSourceState: {}
 	});
 	constructor() {
 		super([]);
@@ -15,6 +181,8 @@ var History = class extends BaseService_default {
 	}
 	reset() {
 		this.state.pageSteps = {};
+		this.state.codeBlockState = {};
+		this.state.dataSourceState = {};
 		this.resetPage();
 	}
 	resetPage() {
@@ -34,14 +202,109 @@ var History = class extends BaseService_default {
 		this.state.pageSteps = {};
 		this.state.canRedo = false;
 		this.state.canUndo = false;
+		this.state.codeBlockState = {};
+		this.state.dataSourceState = {};
 	}
-	push(state) {
-		const undoRedo = this.getUndoRedo();
+	/**
+	* 把一条步骤推入指定页面的栈；不指定 pageId 时落到当前活动页。
+	*
+	* 跨页操作（例如 `moveToContainer` 把节点搬到其它页）必须显式传入 `pageId`，
+	* 否则会把记录错误地落到操作发起页 / 当前激活页，破坏目标页 / 源页的撤销栈语义。
+	*/
+	push(state, pageId) {
+		const undoRedo = this.getUndoRedo(pageId);
 		if (!undoRedo) return null;
 		undoRedo.pushElement(state);
-		this.emit("change", state);
+		if (pageId === void 0 || `${pageId}` === `${this.state.pageId}`) this.emit("change", state);
 		return state;
 	}
+	/**
+	* 推入一条代码块变更记录（与页面/节点完全无关），按 `codeBlockId` 维度独立一份 UndoRedo 栈。
+	*
+	* - 新增：oldContent = null，newContent = 新内容
+	* - 更新：oldContent / newContent 都为对应内容
+	* - 删除：newContent = null，oldContent = 删除前内容
+	* - `changeRecords` 来自 form 端，撤销/重做时若有则按 propPath 局部覆盖；缺省才退化为整内容替换。
+	* - 不直接驱动 codeBlockService，调用方负责实际写回。
+	*/
+	pushCodeBlock(codeBlockId, payload) {
+		if (!codeBlockId) return null;
+		const step = {
+			id: codeBlockId,
+			oldContent: payload.oldContent ? cloneDeep(payload.oldContent) : null,
+			newContent: payload.newContent ? cloneDeep(payload.newContent) : null,
+			changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0,
+			historyDescription: payload.historyDescription
+		};
+		this.getCodeBlockUndoRedo(codeBlockId).pushElement(step);
+		this.emit("code-block-history-change", codeBlockId, step);
+		return step;
+	}
+	/**
+	* 推入一条数据源变更记录（与页面/节点完全无关），按 `dataSourceId` 维度独立一份 UndoRedo 栈。
+	* 行为同 pushCodeBlock（新增 oldSchema=null；删除 newSchema=null）。
+	*/
+	pushDataSource(dataSourceId, payload) {
+		if (!dataSourceId) return null;
+		const step = {
+			id: dataSourceId,
+			oldSchema: payload.oldSchema ? cloneDeep(payload.oldSchema) : null,
+			newSchema: payload.newSchema ? cloneDeep(payload.newSchema) : null,
+			changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0,
+			historyDescription: payload.historyDescription
+		};
+		this.getDataSourceUndoRedo(dataSourceId).pushElement(step);
+		this.emit("data-source-history-change", dataSourceId, step);
+		return step;
+	}
+	/** 撤销指定代码块的最近一次变更。 */
+	undoCodeBlock(codeBlockId) {
+		const undoRedo = this.state.codeBlockState[codeBlockId];
+		if (!undoRedo) return null;
+		const step = undoRedo.undo();
+		if (step) this.emit("code-block-history-change", codeBlockId, step);
+		return step;
+	}
+	/** 重做指定代码块的下一次变更。 */
+	redoCodeBlock(codeBlockId) {
+		const undoRedo = this.state.codeBlockState[codeBlockId];
+		if (!undoRedo) return null;
+		const step = undoRedo.redo();
+		if (step) this.emit("code-block-history-change", codeBlockId, step);
+		return step;
+	}
+	/** 是否可对指定代码块撤销。 */
+	canUndoCodeBlock(codeBlockId) {
+		return this.state.codeBlockState[codeBlockId]?.canUndo() ?? false;
+	}
+	/** 是否可对指定代码块重做。 */
+	canRedoCodeBlock(codeBlockId) {
+		return this.state.codeBlockState[codeBlockId]?.canRedo() ?? false;
+	}
+	/** 撤销指定数据源的最近一次变更。 */
+	undoDataSource(dataSourceId) {
+		const undoRedo = this.state.dataSourceState[dataSourceId];
+		if (!undoRedo) return null;
+		const step = undoRedo.undo();
+		if (step) this.emit("data-source-history-change", dataSourceId, step);
+		return step;
+	}
+	/** 重做指定数据源的下一次变更。 */
+	redoDataSource(dataSourceId) {
+		const undoRedo = this.state.dataSourceState[dataSourceId];
+		if (!undoRedo) return null;
+		const step = undoRedo.redo();
+		if (step) this.emit("data-source-history-change", dataSourceId, step);
+		return step;
+	}
+	/** 是否可对指定数据源撤销。 */
+	canUndoDataSource(dataSourceId) {
+		return this.state.dataSourceState[dataSourceId]?.canUndo() ?? false;
+	}
+	/** 是否可对指定数据源重做。 */
+	canRedoDataSource(dataSourceId) {
+		return this.state.dataSourceState[dataSourceId]?.canRedo() ?? false;
+	}
 	undo() {
 		const undoRedo = this.getUndoRedo();
 		if (!undoRedo) return null;
@@ -61,16 +324,148 @@ var History = class extends BaseService_default {
 		this.removeAllListeners();
 		this.removeAllPlugins();
 	}
-	getUndoRedo() {
-		if (!this.state.pageId) return null;
-		return this.state.pageSteps[this.state.pageId];
+	/**
+	* 取出当前活动页的历史步骤平铺列表（包含已应用 + 已撤销）。
+	* 列表按时间正序，最早一步在最前面。
+	* 通常 UI 应使用 `getPageHistoryGroups` 取已合并分组的版本；本方法仅为兼容/调试保留。
+	*/
+	getPageStepList(pageId) {
+		const targetPageId = pageId ?? this.state.pageId;
+		if (!targetPageId) return [];
+		const undoRedo = this.state.pageSteps[targetPageId];
+		if (!undoRedo) return [];
+		const list = undoRedo.getElementList();
+		const cursor = undoRedo.getCursor();
+		return list.map((step, index) => ({
+			step,
+			index,
+			applied: index < cursor
+		}));
+	}
+	/**
+	* 取出当前活动页的历史栈，按"目标节点"做相邻合并：
+	* - 连续修改同一节点（单节点 update）的多步合并为一个 group，组内可展开查看每步；
+	* - add / remove / 多节点 update 始终独立成组。
+	* 用于历史面板的"页面"tab 展示。
+	*/
+	getPageHistoryGroups(pageId) {
+		const targetPageId = pageId ?? this.state.pageId;
+		if (!targetPageId) return [];
+		const undoRedo = this.state.pageSteps[targetPageId];
+		if (!undoRedo) return [];
+		const list = undoRedo.getElementList();
+		if (!list.length) return [];
+		const cursor = undoRedo.getCursor();
+		return History.mergePageSteps(targetPageId, list, cursor);
+	}
+	/**
+	* 取出全部代码块的历史栈，按 codeBlockId 分组。
+	* 同一栈内相邻、同 opType 且作用于同一 id 的多步会被合并为一个 group：
+	* - 这正是"代码块/数据源各自按 id 分栈"的天然表现，再叠加"连续修改同目标的相邻步骤合并展示"。
+	* - 合并后 group 暴露子步骤数组，UI 可展开查看每一步的 changeRecords。
+	* - applied 字段：组内最后一步是否处于已应用段。
+	*/
+	getCodeBlockHistoryGroups() {
+		const groups = [];
+		Object.entries(this.state.codeBlockState).forEach(([id, undoRedo]) => {
+			if (!undoRedo) return;
+			const list = undoRedo.getElementList();
+			if (!list.length) return;
+			const cursor = undoRedo.getCursor();
+			groups.push(...History.mergeCodeBlockSteps(id, list, cursor));
+		});
+		return groups;
+	}
+	/**
+	* 读取指定页面历史栈的当前游标（已应用步骤数量）。不传则取当前活动页。
+	* 没有对应栈时返回 0。
+	*/
+	getPageCursor(pageId) {
+		const targetPageId = pageId ?? this.state.pageId;
+		if (!targetPageId) return 0;
+		return this.state.pageSteps[targetPageId]?.getCursor() ?? 0;
+	}
+	/** 读取指定代码块历史栈的当前游标。 */
+	getCodeBlockCursor(codeBlockId) {
+		return this.state.codeBlockState[codeBlockId]?.getCursor() ?? 0;
+	}
+	/** 读取指定数据源历史栈的当前游标。 */
+	getDataSourceCursor(dataSourceId) {
+		return this.state.dataSourceState[dataSourceId]?.getCursor() ?? 0;
+	}
+	/**
+	* 取出指定代码块历史栈的平铺步骤列表（含 applied 标记）。供 revert 等按 index 索引步骤使用。
+	*/
+	getCodeBlockStepList(codeBlockId) {
+		const undoRedo = this.state.codeBlockState[codeBlockId];
+		if (!undoRedo) return [];
+		const list = undoRedo.getElementList();
+		const cursor = undoRedo.getCursor();
+		return list.map((step, index) => ({
+			step,
+			index,
+			applied: index < cursor
+		}));
+	}
+	/**
+	* 取出指定数据源历史栈的平铺步骤列表（含 applied 标记）。供 revert 等按 index 索引步骤使用。
+	*/
+	getDataSourceStepList(dataSourceId) {
+		const undoRedo = this.state.dataSourceState[dataSourceId];
+		if (!undoRedo) return [];
+		const list = undoRedo.getElementList();
+		const cursor = undoRedo.getCursor();
+		return list.map((step, index) => ({
+			step,
+			index,
+			applied: index < cursor
+		}));
+	}
+	/**
+	* 取出全部数据源的历史栈，按 dataSourceId 分组。同上。
+	*/
+	getDataSourceHistoryGroups() {
+		const groups = [];
+		Object.entries(this.state.dataSourceState).forEach(([id, undoRedo]) => {
+			if (!undoRedo) return;
+			const list = undoRedo.getElementList();
+			if (!list.length) return;
+			const cursor = undoRedo.getCursor();
+			groups.push(...History.mergeDataSourceSteps(id, list, cursor));
+		});
+		return groups;
+	}
+	/**
+	* 取出指定页面的栈；不传 pageId 时按当前活动页取。
+	*
+	* 跨页 push 时如果目标页的栈尚不存在（用户从未进入过该页），会按需创建一条空栈，
+	* 这样切到目标页时 Ctrl+Z 也能撤回该步骤。
+	*/
+	getUndoRedo(pageId) {
+		const targetPageId = pageId ?? this.state.pageId;
+		if (!targetPageId) return null;
+		if (!this.state.pageSteps[targetPageId]) this.state.pageSteps[targetPageId] = new UndoRedo();
+		return this.state.pageSteps[targetPageId];
 	}
 	setCanUndoRedo() {
 		const undoRedo = this.getUndoRedo();
 		this.state.canRedo = undoRedo?.canRedo() || false;
 		this.state.canUndo = undoRedo?.canUndo() || false;
 	}
-};
-var history_default = new History();
+	/**
+	* 按 id 获取（或创建）指定代码块的 UndoRedo 栈。
+	*/
+	getCodeBlockUndoRedo(codeBlockId) {
+		if (!this.state.codeBlockState[codeBlockId]) this.state.codeBlockState[codeBlockId] = new UndoRedo();
+		return this.state.codeBlockState[codeBlockId];
+	}
+	/**
+	* 按 id 获取（或创建）指定数据源的 UndoRedo 栈。
+	*/
+	getDataSourceUndoRedo(dataSourceId) {
+		if (!this.state.dataSourceState[dataSourceId]) this.state.dataSourceState[dataSourceId] = new UndoRedo();
+		return this.state.dataSourceState[dataSourceId];
+	}
+}();
 //#endregion
 export { history_default as default };

package/dist/es/services/keybinding.js

@@ -1,11 +1,11 @@
 import { KeyBindingCommand } from "../type.js";
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import editor_default from "./editor.js";
 import ui_default from "./ui.js";
 import { isPage, isPageFragment } from "@tmagic/utils";
 import KeyController from "keycon";
 //#region packages/editor/src/services/keybinding.ts
-var Keybinding = class extends BaseService_default {
+var Keybinding = class extends BaseService {
 	ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
 	controllers = /* @__PURE__ */ new Map();
 	bindingList = [];

package/dist/es/services/props.js

@@ -1,10 +1,10 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { fillConfig } from "../utils/props.js";
 import editor_default from "./editor.js";
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from "@tmagic/utils";
 import { Target, Watcher } from "@tmagic/core";
 import { reactive } from "vue";
-import { cloneDeep, mergeWith } from "lodash-es";
+import { cloneDeep as cloneDeep$1, mergeWith } from "lodash-es";
 //#region packages/editor/src/services/props.ts
 var canUsePluginMethods = {
 	async: [
@@ -17,7 +17,7 @@ var canUsePluginMethods = {
 	],
 	sync: ["createId", "setNewItemId"]
 };
-var Props = class extends BaseService_default {
+var Props = class extends BaseService {
 	state = reactive({
 		propsConfigMap: {},
 		propsValueMap: {},
@@ -57,9 +57,9 @@ var Props = class extends BaseService_default {
 	getPropsConfigs() {
 		return this.state.propsConfigMap;
 	}
-	async fillConfig(config, labelWidth) {
+	async fillConfig(config, labelWidth = "80px") {
 		return fillConfig(config, {
-			labelWidth: typeof labelWidth !== "function" ? labelWidth : "80px",
+			labelWidth,
 			disabledDataSource: this.getDisabledDataSource(),
 			disabledCodeBlock: this.getDisabledCodeBlock()
 		});
@@ -77,7 +77,7 @@ var Props = class extends BaseService_default {
 	*/
 	async getPropsConfig(type, data) {
 		if (type === "area") return await this.getPropsConfig("button", data);
-		return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
+		return cloneDeep$1(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
 	}
 	hasPropsConfig(type) {
 		return !!this.state.propsConfigMap[toLine(type)];
@@ -116,14 +116,14 @@ var Props = class extends BaseService_default {
 		}
 		const id = this.createId(type);
 		const defaultPropsValue = this.getDefaultPropsValue(type);
-		const data = this.setNewItemId(cloneDeep({
+		const data = this.setNewItemId(cloneDeep$1({
 			type,
 			...defaultValue
 		}));
 		return {
 			id,
 			...defaultPropsValue,
-			...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
+			...mergeWith({}, cloneDeep$1(this.state.propsValueMap[type] || {}), data)
 		};
 	}
 	hasPropsValue(type) {

package/dist/es/services/stageOverlay.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import editor_default from "./editor.js";
 import { useStage } from "../hooks/use-stage.js";
 import { getIdFromEl } from "@tmagic/utils";
@@ -13,7 +13,7 @@ var canUsePluginMethods = {
 		"createStage"
 	]
 };
-var StageOverlay = class extends BaseService_default {
+var StageOverlay = class extends BaseService {
 	state = shallowReactive({
 		wrapDiv: document.createElement("div"),
 		sourceEl: null,

package/dist/es/services/storage.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { getEditorConfig } from "../utils/config.js";
 import serialize from "serialize-javascript";
 //#region packages/editor/src/services/storage.ts
@@ -24,7 +24,7 @@ var canUsePluginMethods = {
 /**
 * 数据存储服务
 */
-var WebStorage = class extends BaseService_default {
+var WebStorage = class extends BaseService {
 	storage = globalThis.localStorage;
 	namespace = "tmagic";
 	constructor() {

package/dist/es/services/ui.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import storage_default, { Protocol } from "./storage.js";
 import editor_default from "./editor.js";
 import "../utils/const.js";
@@ -48,7 +48,7 @@ var canUsePluginMethods = {
 	async: ["zoom", "calcZoom"],
 	sync: []
 };
-var Ui = class extends BaseService_default {
+var Ui = class extends BaseService {
 	constructor() {
 		super(canUsePluginMethods.async.map((methodName) => ({
 			name: methodName,