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

package/dist/es/services/BaseService.js

@@ -1,49 +1,39 @@
-import { compose } from "../utils/compose.js";
 import { EventEmitter } from "events";
 //#region packages/editor/src/services/BaseService.ts
 var methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 var isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
-var doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-	try {
-		let beforeArgs = args;
-		for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-			beforeArgs = beforeMethod(...beforeArgs) || [];
-			if (isError(beforeArgs)) throw beforeArgs;
-			if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
-		}
-		let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
-		for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-			returnValue = afterMethod(returnValue, ...beforeArgs);
-			if (isError(returnValue)) throw returnValue;
-		}
-		return returnValue;
-	} catch (error) {
-		throw error;
+var doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName) => {
+	let beforeArgs = args;
+	for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+		beforeArgs = beforeMethod(...beforeArgs) || [];
+		if (isError(beforeArgs)) throw beforeArgs;
+		if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
+	}
+	let returnValue = sourceMethod.apply(scope, beforeArgs);
+	for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+		returnValue = afterMethod(returnValue, ...beforeArgs);
+		if (isError(returnValue)) throw returnValue;
 	}
+	return returnValue;
 };
-var doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-	try {
-		let beforeArgs = args;
-		for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-			beforeArgs = await beforeMethod(...beforeArgs) || [];
-			if (isError(beforeArgs)) throw beforeArgs;
-			if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
-		}
-		let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-		for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-			returnValue = await afterMethod(returnValue, ...beforeArgs);
-			if (isError(returnValue)) throw returnValue;
-		}
-		return returnValue;
-	} catch (error) {
-		throw error;
+var doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName) => {
+	let beforeArgs = args;
+	for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+		beforeArgs = await beforeMethod(...beforeArgs) || [];
+		if (isError(beforeArgs)) throw beforeArgs;
+		if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
 	}
+	let returnValue = await sourceMethod.apply(scope, beforeArgs);
+	for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+		returnValue = await afterMethod(returnValue, ...beforeArgs);
+		if (isError(returnValue)) throw returnValue;
+	}
+	return returnValue;
 };
 /**
-* 提供两种方式对Class进行扩展
-* 方法1：
+* 对Class进行扩展
 * 给Class中的每个方法都添加before after两个钩子
-* 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+* 给Class添加一个usePlugin方法，usePlugin方法可以传入一个包含before或者after方法的对象
 *
 * 例如：
 *   Class EditorService extends BaseService {
@@ -68,27 +58,9 @@ var doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMet
 *
 * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
 * 如需终止后续方法调用可以return new Error();
-*
-* 方法2：
-* 给Class中的每个方法都添加中间件
-* 给Class添加一个use方法，use方法可以传入一个包含源对象方法名作为key值的对象
-*
-* 例如：
-*   Class EditorService extends BaseService {
-*     constructor() {
-*       super([ { name: 'add', isAsync: true },]);
-*     }
-*     add(value) { return result; }
-*   };
-*
-*  const editorService = new EditorService();
-*  editorService.use({
-*    add(value, next) { console.log(value); next() },
-*  });
 */
-var BaseService_default = class extends EventEmitter {
+var BaseService = class extends EventEmitter {
 	pluginOptionsList = {};
-	middleware = {};
 	taskList = [];
 	doingTask = false;
 	constructor(methods = [], serialMethods = []) {
@@ -100,14 +72,12 @@ var BaseService_default = class extends EventEmitter {
 			const afterMethodName = methodName("after", propertyName);
 			this.pluginOptionsList[beforeMethodName] = [];
 			this.pluginOptionsList[afterMethodName] = [];
-			this.middleware[propertyName] = [];
-			const fn = compose(this.middleware[propertyName], isAsync);
 			Object.defineProperty(scope, propertyName, { value: isAsync ? async (...args) => {
-				if (!serialMethods.includes(propertyName)) return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+				if (!serialMethods.includes(propertyName)) return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName);
 				const promise = new Promise((resolve, reject) => {
 					this.taskList.push(async () => {
 						try {
-							resolve(await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn));
+							resolve(await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName));
 						} catch (e) {
 							reject(e);
 						}
@@ -115,15 +85,9 @@ var BaseService_default = class extends EventEmitter {
 				});
 				if (!this.doingTask) this.doTask();
 				return promise;
-			} : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) });
+			} : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName) });
 		});
 	}
-	/**
-	* @deprecated 请使用usePlugin代替
-	*/
-	use(options) {
-		for (const [methodName, method] of Object.entries(options)) if (typeof method === "function") this.middleware[methodName].push(method);
-	}
 	usePlugin(options) {
 		for (const [methodName, method] of Object.entries(options)) if (typeof method === "function" && !this.pluginOptionsList[methodName].includes(method)) this.pluginOptionsList[methodName].push(method);
 	}
@@ -132,7 +96,6 @@ var BaseService_default = class extends EventEmitter {
 	}
 	removeAllPlugins() {
 		for (const key of Object.keys(this.pluginOptionsList)) this.pluginOptionsList[key] = [];
-		for (const key of Object.keys(this.middleware)) this.middleware[key] = [];
 	}
 	async doTask() {
 		this.doingTask = true;
@@ -145,4 +108,4 @@ var BaseService_default = class extends EventEmitter {
 	}
 };
 //#endregion
-export { BaseService_default as default };
+export { BaseService as default };

package/dist/es/services/codeBlock.js

@@ -1,12 +1,14 @@
 import { CODE_DRAFT_STORAGE_KEY } from "../type.js";
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
+import history_default from "./history.js";
 import { getEditorConfig } from "../utils/config.js";
 import storage_default, { Protocol } from "./storage.js";
 import { COPY_CODE_STORAGE_KEY } from "../utils/editor.js";
 import editor_default from "./editor.js";
+import { getValueByKeyPath, setValueByKeyPath } from "@tmagic/utils";
 import { Target, Watcher } from "@tmagic/core";
 import { reactive } from "vue";
-import { cloneDeep, get, keys, pick } from "lodash-es";
+import { cloneDeep as cloneDeep$1, get, keys, pick } from "lodash-es";
 //#region packages/editor/src/services/codeBlock.ts
 var canUsePluginMethods = {
 	async: [
@@ -18,7 +20,18 @@ var canUsePluginMethods = {
 	],
 	sync: ["setCodeDslByIdSync"]
 };
-var CodeBlock = class extends BaseService_default {
+/**
+* 「回滚」生成的新 step 简短描述。仅 service 层使用。
+*/
+var describeRevertCodeBlockStep = (step) => {
+	const { oldContent, newContent, changeRecords, id } = step;
+	if (oldContent === null && newContent) return `撤回新增 ${newContent.name || newContent.id || id}`;
+	if (oldContent && newContent === null) return `还原已删除的 ${oldContent.name || oldContent.id || id}`;
+	const name = newContent?.name || oldContent?.name || `${id}`;
+	const propPath = changeRecords?.[0]?.propPath;
+	return propPath ? `还原 ${name} · ${propPath}` : `还原 ${name}`;
+};
+var CodeBlock = class extends BaseService {
 	state = reactive({
 		codeDsl: null,
 		editable: true,
@@ -68,10 +81,16 @@ var CodeBlock = class extends BaseService_default {
 	* 设置代码块ID和代码内容到源dsl
 	* @param {Id} id 代码块id
 	* @param {CodeBlockContent} codeConfig 代码块内容配置信息
+	* @param options 可选配置
+	* @param options.changeRecords form 端 propPath/value 列表，用于历史记录的精细化撤销/重做
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
 	* @returns {void}
 	*/
-	async setCodeDslById(id, codeConfig) {
-		this.setCodeDslByIdSync(id, codeConfig, true);
+	async setCodeDslById(id, codeConfig, { changeRecords, doNotPushHistory = false } = {}) {
+		this.setCodeDslByIdSync(id, codeConfig, true, {
+			changeRecords,
+			doNotPushHistory
+		});
 	}
 	/**
 	* 为了兼容历史原因
@@ -79,21 +98,33 @@ var CodeBlock = class extends BaseService_default {
 	* @param {Id} id 代码块id
 	* @param {CodeBlockContent} codeConfig 代码块内容配置信息
 	* @param {boolean} force 是否强制写入，默认true
+	* @param options 可选配置
+	* @param options.changeRecords form 端 propPath/value 列表，用于历史记录的精细化撤销/重做
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+	* @param options.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
 	* @returns {void}
 	*/
-	setCodeDslByIdSync(id, codeConfig, force = true) {
+	setCodeDslByIdSync(id, codeConfig, force = true, { changeRecords, doNotPushHistory = false, historyDescription } = {}) {
 		const codeDsl = this.getCodeDsl();
 		if (!codeDsl) throw new Error("dsl中没有codeBlocks");
 		if (codeDsl[id] && !force) return;
-		const codeConfigProcessed = cloneDeep(codeConfig);
+		const codeConfigProcessed = cloneDeep$1(codeConfig);
 		if (codeConfigProcessed.content) {
 			const parseDSL = getEditorConfig("parseDSL");
 			if (typeof codeConfigProcessed.content === "string") codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
 		}
+		const oldContent = codeDsl[id] ? cloneDeep$1(codeDsl[id]) : null;
 		codeDsl[id] = {
 			...codeDsl[id] || {},
 			...codeConfigProcessed
 		};
+		const newContent = cloneDeep$1(codeDsl[id]);
+		if (!doNotPushHistory) history_default.pushCodeBlock(id, {
+			oldContent,
+			newContent,
+			changeRecords,
+			historyDescription
+		});
 		this.emit("addOrUpdate", id, codeDsl[id]);
 	}
 	/**
@@ -170,12 +201,20 @@ var CodeBlock = class extends BaseService_default {
 	/**
 	* 在dsl数据源中删除指定id的代码块
 	* @param {Id[]} codeIds 需要删除的代码块id数组
+	* @param options 可选配置
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
 	*/
-	async deleteCodeDslByIds(codeIds) {
+	async deleteCodeDslByIds(codeIds, { doNotPushHistory = false, historyDescription } = {}) {
 		const currentDsl = await this.getCodeDsl();
 		if (!currentDsl) return;
 		codeIds.forEach((id) => {
+			const oldContent = currentDsl[id] ? cloneDeep$1(currentDsl[id]) : null;
 			delete currentDsl[id];
+			if (oldContent && !doNotPushHistory) history_default.pushCodeBlock(id, {
+				oldContent,
+				newContent: null,
+				historyDescription
+			});
 			this.emit("remove", id);
 		});
 	}
@@ -186,6 +225,78 @@ var CodeBlock = class extends BaseService_default {
 		return this.state.paramsColConfig;
 	}
 	/**
+	* 撤销指定代码块的最近一次变更。
+	*
+	* 内部走 setCodeDslByIdSync / deleteCodeDslByIds，因此会自动触发 codeBlockService 的
+	* `addOrUpdate` / `remove` 事件，由 initService 中的 handler 重新维护 dep target
+	* （DepTargetType.CODE_BLOCK 的 add / remove）。所有写回都带 `doNotPushHistory: true`，
+	* 确保不会在历史栈里产生新的记录。
+	*
+	* @param id 代码块 id
+	* @returns 撤销的 step；栈不存在或已无可撤销时返回 null
+	*/
+	async undo(id) {
+		const step = history_default.undoCodeBlock(id);
+		if (!step) return null;
+		await this.applyHistoryStep(step, true);
+		return step;
+	}
+	/**
+	* 重做指定代码块的下一次变更。
+	* @param id 代码块 id
+	* @returns 重做的 step；栈不存在或已无可重做时返回 null
+	*/
+	async redo(id) {
+		const step = history_default.redoCodeBlock(id);
+		if (!step) return null;
+		await this.applyHistoryStep(step, false);
+		return step;
+	}
+	/** 是否可对指定代码块撤销。 */
+	canUndo(id) {
+		return history_default.canUndoCodeBlock(id);
+	}
+	/** 是否可对指定代码块重做。 */
+	canRedo(id) {
+		return history_default.canRedoCodeBlock(id);
+	}
+	/**
+	* 跳转指定代码块的历史栈到目标游标。语义同 editor.gotoPageStep。
+	*
+	* @param id          代码块 id
+	* @param targetCursor 目标游标位置（已应用步骤数量）
+	* @returns 实际移动到的最终游标位置
+	*/
+	async goto(id, targetCursor) {
+		let cursor = history_default.getCodeBlockCursor(id);
+		const target = Math.max(0, targetCursor);
+		while (cursor > target) {
+			if (!await this.undo(id)) break;
+			cursor -= 1;
+		}
+		while (cursor < target) {
+			if (!await this.redo(id)) break;
+			cursor += 1;
+		}
+		return cursor;
+	}
+	/**
+	* 「回滚」指定代码块历史步骤（类 git revert 语义）：
+	* - 不动原始栈结构（不移动 cursor、不丢弃任何步骤）；
+	* - 把目标 step 的修改**反向应用**一次，并作为**新步骤**追加到栈顶；
+	* - 仅对已应用的步骤生效。
+	*
+	* @param id    代码块 id
+	* @param index 目标 step 在该栈中的索引（0 为最早），通常由历史面板传入
+	* @returns 反向后产生的新 step；目标不存在 / 未应用时返回 null
+	*/
+	async revert(id, index) {
+		const entry = history_default.getCodeBlockStepList(id)[index];
+		if (!entry?.applied) return null;
+		const description = `回滚 #${index + 1}: ${describeRevertCodeBlockStep(entry.step)}`;
+		return await this.applyRevertStep(entry.step, description);
+	}
+	/**
 	* 生成代码块唯一id
 	* @returns {Id} 代码块唯一id
 	*/
@@ -245,6 +356,92 @@ var CodeBlock = class extends BaseService_default {
 	usePlugin(options) {
 		super.usePlugin(options);
 	}
+	/**
+	* 反向应用一个 step 并以新 step 入栈。逻辑与 applyHistoryStep(reverse=true) 同构，
+	* 差异仅在于通过公开的 setCodeDslByIdSync / deleteCodeDslByIds 触发 push。
+	*/
+	async applyRevertStep(step, historyDescription) {
+		const { id, oldContent, newContent, changeRecords } = step;
+		if (oldContent === null && newContent) {
+			await this.deleteCodeDslByIds([id], { historyDescription });
+			return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		if (oldContent && newContent === null) {
+			this.setCodeDslByIdSync(id, cloneDeep$1(oldContent), true, { historyDescription });
+			return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		if (!oldContent || !newContent) return null;
+		if (changeRecords?.length) {
+			const current = this.getCodeContentById(id);
+			if (!current) return null;
+			const patched = cloneDeep$1(current);
+			let fallbackToFullReplace = false;
+			for (const record of changeRecords) {
+				if (!record.propPath) {
+					fallbackToFullReplace = true;
+					break;
+				}
+				const value = cloneDeep$1(getValueByKeyPath(record.propPath, oldContent));
+				setValueByKeyPath(record.propPath, value, patched);
+			}
+			this.setCodeDslByIdSync(id, fallbackToFullReplace ? cloneDeep$1(oldContent) : patched, true, {
+				changeRecords,
+				historyDescription
+			});
+			return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		this.setCodeDslByIdSync(id, cloneDeep$1(oldContent), true, { historyDescription });
+		return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+	}
+	/**
+	* 把一条历史 step 应用到当前代码块服务上。
+	*
+	* 复用现有的 setCodeDslByIdSync / deleteCodeDslByIds，目的是借助它们发出的事件
+	* 触发 initService 中的 dep target 维护（CODE_BLOCK 的 add / remove）。
+	* 所有写回都带 `doNotPushHistory: true`，确保不会在历史栈里产生新的记录。
+	*
+	* - oldContent=null, newContent≠null：原始为新增 → undo 删除；redo 再次 setCodeDslByIdSync
+	* - oldContent≠null, newContent=null：原始为删除 → undo 还原写入；redo 再次删除
+	* - 两侧都有：原始为更新 → 按 changeRecords 局部 patch；缺省退化为整内容替换
+	*
+	* @param step 历史 step
+	* @param reverse true=撤销，false=重做
+	*/
+	async applyHistoryStep(step, reverse) {
+		const { id, oldContent, newContent, changeRecords } = step;
+		if (oldContent === null && newContent) {
+			if (reverse) await this.deleteCodeDslByIds([id], { doNotPushHistory: true });
+			else this.setCodeDslByIdSync(id, cloneDeep$1(newContent), true, { doNotPushHistory: true });
+			return;
+		}
+		if (oldContent && newContent === null) {
+			if (reverse) this.setCodeDslByIdSync(id, cloneDeep$1(oldContent), true, { doNotPushHistory: true });
+			else await this.deleteCodeDslByIds([id], { doNotPushHistory: true });
+			return;
+		}
+		if (!oldContent || !newContent) return;
+		const sourceForValues = reverse ? oldContent : newContent;
+		if (changeRecords?.length) {
+			const current = this.getCodeContentById(id);
+			if (!current) return;
+			const patched = cloneDeep$1(current);
+			let fallbackToFullReplace = false;
+			for (const record of changeRecords) {
+				if (!record.propPath) {
+					fallbackToFullReplace = true;
+					break;
+				}
+				const value = cloneDeep$1(getValueByKeyPath(record.propPath, sourceForValues));
+				setValueByKeyPath(record.propPath, value, patched);
+			}
+			this.setCodeDslByIdSync(id, fallbackToFullReplace ? cloneDeep$1(sourceForValues) : patched, true, {
+				changeRecords,
+				doNotPushHistory: true
+			});
+			return;
+		}
+		this.setCodeDslByIdSync(id, cloneDeep$1(sourceForValues), true, { doNotPushHistory: true });
+	}
 };
 var codeBlock_default = new CodeBlock();
 //#endregion

package/dist/es/services/componentList.js

@@ -1,7 +1,7 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { shallowReactive } from "vue";
 //#region packages/editor/src/services/componentList.ts
-var ComponentList = class extends BaseService_default {
+var ComponentList = class extends BaseService {
 	state = shallowReactive({ list: [] });
 	constructor() {
 		super([]);