@tmagic/editor 1.7.7 → 1.7.8-beta.2

package/dist/es/layouts/workspace/viewer/ViewerMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,132 @@
+import { LayerOffset, Layout } from "../../../type.js";
+import { useServices } from "../../../hooks/use-services.js";
+import ContentMenu_default from "../../../components/ContentMenu.js";
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from "../../../utils/content-menu.js";
+import CenterIcon_default from "../../../icons/CenterIcon.js";
+import { isPage, isPageFragment } from "@tmagic/utils";
+import { NodeType } from "@tmagic/core";
+import { computed, createBlock, defineComponent, markRaw, openBlock, ref, useTemplateRef, watch } from "vue";
+import { Bottom, Top } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue?vue&type=script&setup=true&lang.ts
+var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorViewerMenu",
+	__name: "ViewerMenu",
+	props: {
+		isMultiSelect: {
+			type: Boolean,
+			default: false
+		},
+		stageContentMenu: {},
+		customContentMenu: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const services = useServices();
+		const { editorService } = services;
+		const menuRef = useTemplateRef("menu");
+		const canCenter = ref(false);
+		const node = computed(() => editorService.get("node"));
+		const nodes = computed(() => editorService.get("nodes"));
+		const parent = computed(() => editorService.get("parent"));
+		const menuData = computed(() => props.customContentMenu([
+			{
+				type: "button",
+				text: "水平居中",
+				icon: markRaw(CenterIcon_default),
+				display: () => canCenter.value,
+				handler: () => {
+					if (!nodes.value) return;
+					editorService.alignCenter(nodes.value);
+				}
+			},
+			useCopyMenu(),
+			usePasteMenu(menuRef),
+			{
+				type: "divider",
+				direction: "horizontal",
+				display: () => {
+					if (!node.value) return false;
+					return !isPage(node.value) && !isPageFragment(node.value);
+				}
+			},
+			{
+				type: "button",
+				text: "上移一层",
+				icon: markRaw(Top),
+				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				handler: () => {
+					editorService.moveLayer(1);
+				}
+			},
+			{
+				type: "button",
+				text: "下移一层",
+				icon: markRaw(Bottom),
+				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				handler: () => {
+					editorService.moveLayer(-1);
+				}
+			},
+			{
+				type: "button",
+				text: "置顶",
+				icon: markRaw(Top),
+				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				handler: () => {
+					editorService.moveLayer(LayerOffset.TOP);
+				}
+			},
+			{
+				type: "button",
+				text: "置底",
+				icon: markRaw(Bottom),
+				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				handler: () => {
+					editorService.moveLayer(LayerOffset.BOTTOM);
+				}
+			},
+			useMoveToMenu(services),
+			{
+				type: "divider",
+				direction: "horizontal",
+				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect
+			},
+			useDeleteMenu(),
+			{
+				type: "divider",
+				direction: "horizontal"
+			},
+			{
+				type: "button",
+				text: "清空参考线",
+				handler: () => {
+					editorService.get("stage")?.clearGuides();
+				}
+			},
+			...props.stageContentMenu
+		], "viewer"));
+		watch(parent, async () => {
+			if (!parent.value) return canCenter.value = false;
+			const layout = await editorService.getLayout(parent.value);
+			const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+			const isTypeConform = nodes.value?.every((selectedNode) => ![
+				NodeType.ROOT,
+				NodeType.PAGE,
+				"pop"
+			].includes(`${selectedNode?.type}`));
+			canCenter.value = isLayoutConform && !!isTypeConform;
+		}, { immediate: true });
+		const show = (e) => {
+			menuRef.value?.show(e);
+		};
+		__expose({ show });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ContentMenu_default, {
+				"menu-data": menuData.value,
+				ref: "menu"
+			}, null, 8, ["menu-data"]);
+		};
+	}
+});
+//#endregion
+export { ViewerMenu_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/plugin.js

@@ -0,0 +1,61 @@
+import { setEditorConfig } from "./utils/config.js";
+import CodeEditor_default from "./layouts/CodeEditor.js";
+import Editor_default from "./Editor.js";
+import CodeSelect_default from "./fields/CodeSelect.js";
+import CodeSelectCol_default from "./fields/CodeSelectCol.js";
+import DataSourceFields_default from "./fields/DataSourceFields.js";
+import DataSourceMocks_default from "./fields/DataSourceMocks.js";
+import DataSourceMethods_default from "./fields/DataSourceMethods.js";
+import DataSourceInput_default from "./fields/DataSourceInput.js";
+import DataSourceSelect_default from "./fields/DataSourceSelect.js";
+import DataSourceMethodSelect_default from "./fields/DataSourceMethodSelect.js";
+import Index_default from "./fields/DataSourceFieldSelect/Index.js";
+import EventSelect_default from "./fields/EventSelect.js";
+import KeyValue_default from "./fields/KeyValue.js";
+import PageFragmentSelect_default from "./fields/PageFragmentSelect.js";
+import DisplayConds_default from "./fields/DisplayConds.js";
+import CondOpSelect_default from "./fields/CondOpSelect.js";
+import Index_default$1 from "./fields/StyleSetter/Index.js";
+import Code_default from "./fields/Code.js";
+import CodeLink_default from "./fields/CodeLink.js";
+import UISelect_default from "./fields/UISelect.js";
+/* empty css            */
+import formPlugin from "@tmagic/form";
+import tablePlugin from "@tmagic/table";
+import designPlugin from "@tmagic/design";
+//#region packages/editor/src/plugin.ts
+var defaultInstallOpt = {
+	parseDSL: (dsl) => eval(dsl),
+	customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
+	customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options)
+};
+var plugin_default = { install: (app, opt) => {
+	const option = Object.assign(defaultInstallOpt, opt || {});
+	app.use(designPlugin, opt || {});
+	app.use(formPlugin, opt || {});
+	app.use(tablePlugin);
+	app.config.globalProperties.$TMAGIC_EDITOR = option;
+	setEditorConfig(option);
+	app.component(`${Editor_default.name || "MEditor"}`, Editor_default);
+	app.component("magic-code-editor", CodeEditor_default);
+	app.component("m-fields-ui-select", UISelect_default);
+	app.component("m-fields-code-link", CodeLink_default);
+	app.component("m-fields-vs-code", Code_default);
+	app.component("m-fields-code-select", CodeSelect_default);
+	app.component("m-fields-code-select-col", CodeSelectCol_default);
+	app.component("m-fields-event-select", EventSelect_default);
+	app.component("m-fields-data-source-fields", DataSourceFields_default);
+	app.component("m-fields-data-source-mocks", DataSourceMocks_default);
+	app.component("m-fields-key-value", KeyValue_default);
+	app.component("m-fields-data-source-input", DataSourceInput_default);
+	app.component("m-fields-data-source-select", DataSourceSelect_default);
+	app.component("m-fields-data-source-methods", DataSourceMethods_default);
+	app.component("m-fields-data-source-method-select", DataSourceMethodSelect_default);
+	app.component("m-fields-data-source-field-select", Index_default);
+	app.component("m-fields-page-fragment-select", PageFragmentSelect_default);
+	app.component("m-fields-display-conds", DisplayConds_default);
+	app.component("m-fields-cond-op-select", CondOpSelect_default);
+	app.component("m-form-style-setter", Index_default$1);
+} };
+//#endregion
+export { plugin_default as default };

package/dist/es/services/BaseService.js

@@ -0,0 +1,148 @@
+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 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;
+	}
+};
+/**
+* 提供两种方式对Class进行扩展
+* 方法1：
+* 给Class中的每个方法都添加before after两个钩子
+* 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+*
+* 例如：
+*   Class EditorService extends BaseService {
+*     constructor() {
+*       super([ { name: 'add', isAsync: true },]);
+*     }
+*     add(value) { return result; }
+*   };
+*
+*   const editorService = new EditorService();
+*
+*   editorService.usePlugin({
+*     beforeAdd(value) { return [value] },
+*     afterAdd(result, value) { return result },
+*   });
+*
+*   editorService.add(); 最终会变成  () => {
+*    editorService.beforeAdd();
+*    editorService.add();
+*    editorService.afterAdd();
+*   }
+*
+* 调用时的参数会透传到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 {
+	pluginOptionsList = {};
+	middleware = {};
+	taskList = [];
+	doingTask = false;
+	constructor(methods = [], serialMethods = []) {
+		super();
+		methods.forEach(({ name: propertyName, isAsync }) => {
+			const scope = this;
+			const sourceMethod = scope[propertyName];
+			const beforeMethodName = methodName("before", propertyName);
+			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);
+				const promise = new Promise((resolve, reject) => {
+					this.taskList.push(async () => {
+						try {
+							resolve(await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn));
+						} catch (e) {
+							reject(e);
+						}
+					});
+				});
+				if (!this.doingTask) this.doTask();
+				return promise;
+			} : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) });
+		});
+	}
+	/**
+	* @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);
+	}
+	removePlugin(options) {
+		for (const [methodName, method] of Object.entries(options)) if (Array.isArray(this.pluginOptionsList[methodName])) this.pluginOptionsList[methodName] = this.pluginOptionsList[methodName].filter((item) => item !== method);
+	}
+	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;
+		let task = this.taskList.shift();
+		while (task) {
+			await task();
+			task = this.taskList.shift();
+		}
+		this.doingTask = false;
+	}
+};
+//#endregion
+export { BaseService_default as default };

package/dist/es/services/codeBlock.js

@@ -0,0 +1,251 @@
+import { CODE_DRAFT_STORAGE_KEY } from "../type.js";
+import BaseService_default from "./BaseService.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 { Target, Watcher } from "@tmagic/core";
+import { reactive } from "vue";
+import { cloneDeep, get, keys, pick } from "lodash-es";
+//#region packages/editor/src/services/codeBlock.ts
+var canUsePluginMethods = {
+	async: [
+		"setCodeDslById",
+		"setEditStatus",
+		"setCombineIds",
+		"setUndeleteableList",
+		"deleteCodeDslByIds"
+	],
+	sync: ["setCodeDslByIdSync"]
+};
+var CodeBlock = class extends BaseService_default {
+	state = reactive({
+		codeDsl: null,
+		editable: true,
+		combineIds: [],
+		undeletableList: [],
+		paramsColConfig: void 0
+	});
+	constructor() {
+		super([...canUsePluginMethods.async.map((methodName) => ({
+			name: methodName,
+			isAsync: true
+		})), ...canUsePluginMethods.sync.map((methodName) => ({
+			name: methodName,
+			isAsync: false
+		}))]);
+	}
+	/**
+	* 设置活动的代码块dsl数据源
+	* @param {CodeBlockDSL} codeDsl 代码DSL
+	* @returns {void}
+	*/
+	async setCodeDsl(codeDsl) {
+		this.state.codeDsl = codeDsl;
+		this.emit("code-dsl-change", this.state.codeDsl);
+	}
+	/**
+	* 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
+	* 方法要支持钩子添加扩展，会被重写为异步方法,因此这里显示写为异步以提醒调用者需以异步形式调用
+	* @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
+	* @returns {CodeBlockDSL | null}
+	*/
+	getCodeDsl() {
+		return this.state.codeDsl;
+	}
+	/**
+	* 根据代码块id获取代码块内容
+	* @param {Id} id 代码块id
+	* @returns {CodeBlockContent | null}
+	*/
+	getCodeContentById(id) {
+		if (!id) return null;
+		const totalCodeDsl = this.getCodeDsl();
+		if (!totalCodeDsl) return null;
+		return totalCodeDsl[id] ?? null;
+	}
+	/**
+	* 设置代码块ID和代码内容到源dsl
+	* @param {Id} id 代码块id
+	* @param {CodeBlockContent} codeConfig 代码块内容配置信息
+	* @returns {void}
+	*/
+	async setCodeDslById(id, codeConfig) {
+		this.setCodeDslByIdSync(id, codeConfig, true);
+	}
+	/**
+	* 为了兼容历史原因
+	* 设置代码块ID和代码内容到源dsl
+	* @param {Id} id 代码块id
+	* @param {CodeBlockContent} codeConfig 代码块内容配置信息
+	* @param {boolean} force 是否强制写入，默认true
+	* @returns {void}
+	*/
+	setCodeDslByIdSync(id, codeConfig, force = true) {
+		const codeDsl = this.getCodeDsl();
+		if (!codeDsl) throw new Error("dsl中没有codeBlocks");
+		if (codeDsl[id] && !force) return;
+		const codeConfigProcessed = cloneDeep(codeConfig);
+		if (codeConfigProcessed.content) {
+			const parseDSL = getEditorConfig("parseDSL");
+			if (typeof codeConfigProcessed.content === "string") codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
+		}
+		codeDsl[id] = {
+			...codeDsl[id] || {},
+			...codeConfigProcessed
+		};
+		this.emit("addOrUpdate", id, codeDsl[id]);
+	}
+	/**
+	* 根据代码块id数组获取代码dsl
+	* @param {string[]} ids 代码块id数组
+	* @returns {CodeBlockDSL}
+	*/
+	getCodeDslByIds(ids) {
+		return pick(this.getCodeDsl(), ids);
+	}
+	/**
+	* 获取编辑状态
+	* @returns {boolean} 是否可编辑
+	*/
+	getEditStatus() {
+		return this.state.editable;
+	}
+	/**
+	* 设置编辑状态
+	* @param {boolean} status 是否可编辑
+	* @returns {void}
+	*/
+	async setEditStatus(status) {
+		this.state.editable = status;
+	}
+	/**
+	* 设置当前选中组件已关联绑定的代码块id数组
+	* @param {string[]} ids 代码块id数组
+	* @returns {void}
+	*/
+	async setCombineIds(ids) {
+		this.state.combineIds = ids;
+	}
+	/**
+	* 获取当前选中组件已关联绑定的代码块id数组
+	* @returns {string[]}
+	*/
+	getCombineIds() {
+		return this.state.combineIds;
+	}
+	/**
+	* 获取不可删除列表
+	* @returns {Id[]}
+	*/
+	getUndeletableList() {
+		return this.state.undeletableList;
+	}
+	/**
+	* 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
+	* @param {Id[]} codeIds 代码块id数组
+	* @returns {void}
+	*/
+	async setUndeleteableList(codeIds) {
+		this.state.undeletableList = codeIds;
+	}
+	/**
+	* 设置代码草稿
+	*/
+	setCodeDraft(codeId, content) {
+		globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
+	}
+	/**
+	* 获取代码草稿
+	*/
+	getCodeDraft(codeId) {
+		return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+	}
+	/**
+	* 删除代码草稿
+	*/
+	removeCodeDraft(codeId) {
+		globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
+	}
+	/**
+	* 在dsl数据源中删除指定id的代码块
+	* @param {Id[]} codeIds 需要删除的代码块id数组
+	*/
+	async deleteCodeDslByIds(codeIds) {
+		const currentDsl = await this.getCodeDsl();
+		if (!currentDsl) return;
+		codeIds.forEach((id) => {
+			delete currentDsl[id];
+			this.emit("remove", id);
+		});
+	}
+	setParamsColConfig(config) {
+		this.state.paramsColConfig = config;
+	}
+	getParamsColConfig() {
+		return this.state.paramsColConfig;
+	}
+	/**
+	* 生成代码块唯一id
+	* @returns {Id} 代码块唯一id
+	*/
+	async getUniqueId() {
+		const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
+		if (!keys(await this.getCodeDsl()).includes(newId)) return newId;
+		return await this.getUniqueId();
+	}
+	/**
+	* 复制时会带上组件关联的代码块
+	* @param config 组件节点配置
+	* @returns
+	*/
+	copyWithRelated(config, collectorOptions) {
+		const copyNodes = Array.isArray(config) ? config : [config];
+		const copyData = {};
+		if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+			const customTarget = new Target({ ...collectorOptions });
+			const coperWatcher = new Watcher();
+			coperWatcher.addTarget(customTarget);
+			coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+			Object.keys(customTarget.deps).forEach((nodeId) => {
+				const node = editor_default.getNodeById(nodeId);
+				if (!node) return;
+				customTarget.deps[nodeId].keys.forEach((key) => {
+					const relateCodeId = get(node, key);
+					if (!Object.keys(copyData).find((codeId) => codeId === relateCodeId)) {
+						const relateCode = this.getCodeContentById(relateCodeId);
+						if (relateCode) copyData[relateCodeId] = relateCode;
+					}
+				});
+			});
+		}
+		storage_default.setItem(COPY_CODE_STORAGE_KEY, copyData, { protocol: Protocol.OBJECT });
+	}
+	/**
+	* 粘贴代码块
+	* @returns
+	*/
+	paste() {
+		const codeDsl = storage_default.getItem(COPY_CODE_STORAGE_KEY);
+		Object.keys(codeDsl).forEach((codeId) => {
+			this.setCodeDslByIdSync(codeId, codeDsl[codeId], false);
+		});
+	}
+	resetState() {
+		this.state.codeDsl = null;
+		this.state.editable = true;
+		this.state.combineIds = [];
+		this.state.undeletableList = [];
+	}
+	destroy() {
+		this.resetState();
+		this.removeAllListeners();
+		this.removeAllPlugins();
+	}
+	usePlugin(options) {
+		super.usePlugin(options);
+	}
+};
+var codeBlock_default = new CodeBlock();
+//#endregion
+export { codeBlock_default as default };

package/dist/es/services/componentList.js

@@ -0,0 +1,29 @@
+import BaseService_default from "./BaseService.js";
+import { shallowReactive } from "vue";
+//#region packages/editor/src/services/componentList.ts
+var ComponentList = class extends BaseService_default {
+	state = shallowReactive({ list: [] });
+	constructor() {
+		super([]);
+	}
+	/**
+	* @param componentGroupList 组件列表配置
+	*/
+	setList(componentGroupList) {
+		this.state.list = componentGroupList;
+	}
+	getList() {
+		return this.state.list;
+	}
+	resetState() {
+		this.state.list = [];
+	}
+	destroy() {
+		this.resetState();
+		this.removeAllListeners();
+		this.removeAllPlugins();
+	}
+};
+var componentList_default = new ComponentList();
+//#endregion
+export { componentList_default as default };