@tmagic/editor 1.7.6 → 1.7.8-beta.1

package/dist/es/initService.js

@@ -0,0 +1,392 @@
+import { isIncludeDataSource } from "./utils/editor.js";
+import { getDepNodeIds, getNodes, isPage, isValueIncludeDataSource } from "@tmagic/utils";
+import { DepTargetType, NODE_CONDS_KEY, NodeType, createCodeBlockTarget, createDataSourceCondTarget, createDataSourceMethodTarget, createDataSourceTarget, updateNode } from "@tmagic/core";
+import { nextTick, onBeforeUnmount, reactive, toRaw, watch } from "vue";
+import { cloneDeep } from "lodash-es";
+//#region packages/editor/src/initService.ts
+var initServiceState = (props, { editorService, historyService, componentListService, propsService, eventsService, uiService, codeBlockService, keybindingService, dataSourceService, depService }) => {
+	watch(() => props.modelValue, (modelValue) => {
+		editorService.set("root", modelValue || null);
+	}, { immediate: true });
+	watch(() => props.disabledMultiSelect, (disabledMultiSelect) => {
+		editorService.set("disabledMultiSelect", disabledMultiSelect || false);
+	}, { immediate: true });
+	watch(() => props.componentGroupList, (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList), { immediate: true });
+	watch(() => props.datasourceList, (datasourceList) => datasourceList && dataSourceService.set("datasourceTypeList", datasourceList), { immediate: true });
+	watch(() => props.propsConfigs, (configs) => configs && propsService.setPropsConfigs(configs), { immediate: true });
+	watch(() => props.propsValues, (values) => values && propsService.setPropsValues(values), { immediate: true });
+	watch(() => props.eventMethodList, (eventMethodList) => {
+		const eventsList = {};
+		const methodsList = {};
+		if (eventMethodList) for (const type of Object.keys(eventMethodList)) {
+			eventsList[type] = eventMethodList[type].events;
+			methodsList[type] = eventMethodList[type].methods;
+		}
+		eventsService.setEvents(eventsList);
+		eventsService.setMethods(methodsList);
+	}, { immediate: true });
+	watch(() => props.datasourceConfigs, (configs) => {
+		if (!configs) return;
+		for (const [key, value] of Object.entries(configs)) dataSourceService.setFormConfig(key, value);
+	}, { immediate: true });
+	watch(() => props.datasourceValues, (values) => {
+		if (!values) return;
+		for (const [key, value] of Object.entries(values)) dataSourceService.setFormValue(key, value);
+	}, { immediate: true });
+	watch(() => props.datasourceEventMethodList, (eventMethodList) => {
+		const eventsList = {};
+		const methodsList = {};
+		if (eventMethodList) for (const type of Object.keys(eventMethodList)) {
+			eventsList[type] = eventMethodList[type].events;
+			methodsList[type] = eventMethodList[type].methods;
+		}
+		for (const [key, value] of Object.entries(eventsList)) dataSourceService.setFormEvent(key, value);
+		for (const [key, value] of Object.entries(methodsList)) dataSourceService.setFormMethod(key, value);
+	}, { immediate: true });
+	watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), { immediate: true });
+	watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), { immediate: true });
+	watch(() => props.disabledCodeBlock, (disabledCodeBlock) => propsService.setDisabledCodeBlock(disabledCodeBlock ?? false), { immediate: true });
+	watch(() => props.disabledDataSource, (disabledDataSource) => propsService.setDisabledDataSource(disabledDataSource ?? false), { immediate: true });
+	onBeforeUnmount(() => {
+		editorService.resetState();
+		historyService.resetState();
+		propsService.resetState();
+		uiService.resetState();
+		componentListService.resetState();
+		codeBlockService.resetState();
+		keybindingService.reset();
+		depService.reset();
+	});
+};
+var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
+	let getTMagicAppPrimise = null;
+	const getTMagicApp = async () => {
+		const { renderer } = await getStage();
+		if (!renderer) return;
+		if (renderer.runtime) return renderer.runtime.getApp?.();
+		if (getTMagicAppPrimise) return getTMagicAppPrimise;
+		getTMagicAppPrimise = new Promise((resolve) => {
+			const timeout = globalThis.setTimeout(() => {
+				resolve(void 0);
+			}, 1e4);
+			renderer.once("runtime-ready", () => {
+				if (timeout) globalThis.clearTimeout(timeout);
+				resolve(renderer.runtime?.getApp?.());
+			});
+		});
+		return getTMagicAppPrimise;
+	};
+	const updateStageNodes = (nodes) => {
+		for (const node of nodes) updateStageNode(node);
+	};
+	const updateStageNode = (node) => {
+		const root = editorService.get("root");
+		if (!root) return;
+		return editorService.get("stage")?.update({
+			config: cloneDeep(node),
+			parentId: editorService.getParentById(node.id)?.id,
+			root: cloneDeep(root)
+		});
+	};
+	const updateDataSourceSchema = async () => {
+		const root = editorService.get("root");
+		const app = await getTMagicApp();
+		if (!app || !root) return;
+		if (app.dsl) app.dsl.dataSources = root.dataSources;
+	};
+	const dsDepCollectedHandler = () => {
+		const root = editorService.get("root");
+		getTMagicApp()?.then((app) => {
+			if (root && app?.dsl) app.dsl.dataSourceDeps = root.dataSourceDeps;
+		});
+	};
+	const getPageIdByNode = (node) => {
+		let pageId;
+		if (isPage(node)) pageId = node.id;
+		else pageId = editorService.getNodeInfo(node.id).page?.id;
+		return pageId;
+	};
+	const collectIdle = (nodes, deep, type) => Promise.all(nodes.map((node) => {
+		if (node.type === NodeType.ROOT) return Promise.resolve();
+		return depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type);
+	}));
+	watch(() => editorService.get("stage"), (stage) => {
+		if (!stage) return;
+		stage.on("rerender", async () => {
+			const node = editorService.get("node");
+			if (!node) return;
+			await collectIdle([node], true, DepTargetType.DATA_SOURCE);
+			updateStageNode(node);
+		});
+	});
+	watch(() => props.runtimeUrl, (url) => {
+		if (!url) return;
+		const stage = editorService.get("stage");
+		if (!stage) return;
+		stage.reloadIframe(url);
+		stage.renderer?.once("runtime-ready", (runtime) => {
+			runtime.updateRootConfig?.(cloneDeep(toRaw(editorService.get("root"))));
+			const page = editorService.get("page");
+			const node = editorService.get("node");
+			page?.id && runtime?.updatePageId?.(page.id);
+			setTimeout(() => {
+				node && stage?.select(toRaw(node.id));
+			});
+		});
+	});
+	const getStage = () => {
+		const stage = editorService.get("stage");
+		if (stage) return Promise.resolve(stage);
+		return new Promise((resolve) => {
+			const unWatch = watch(() => editorService.get("stage"), (stage) => {
+				if (stage) {
+					resolve(stage);
+					nextTick(() => {
+						unWatch();
+					});
+				}
+			});
+		});
+	};
+	const updateStageDsl = async (value) => {
+		const stage = await getStage();
+		const runtime = await stage.renderer?.getRuntime();
+		const app = await getTMagicApp();
+		if (!app?.dataSourceManager) runtime?.updateRootConfig?.(cloneDeep(toRaw(value)));
+		const page = editorService.get("page");
+		const node = editorService.get("node");
+		page?.id && runtime?.updatePageId?.(page.id);
+		setTimeout(() => {
+			node && stage?.select(toRaw(node.id));
+		});
+		if (value) {
+			depService.clearIdleTasks();
+			await (typeof Worker === "undefined" ? collectIdle(value.items, true) : depService.collectByWorker(value));
+			const dsl = cloneDeep(toRaw(value));
+			if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) updateNode(app.dataSourceManager.compiledNode(node), dsl);
+			runtime?.updateRootConfig?.(dsl);
+		}
+	};
+	const initDataSourceDepTarget = (ds) => {
+		depService.addTarget(createDataSourceTarget(ds, reactive({})));
+		depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
+		depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
+	};
+	const rootChangeHandler = (value, preValue) => {
+		if (!value) return;
+		value.codeBlocks = value.codeBlocks || {};
+		value.dataSources = value.dataSources || [];
+		codeBlockService.setCodeDsl(value.codeBlocks);
+		dataSourceService.set("dataSources", value.dataSources);
+		depService.clearTargets();
+		for (const [id, code] of Object.entries(value.codeBlocks)) depService.addTarget(createCodeBlockTarget(id, code));
+		for (const ds of dataSourceService.get("dataSources")) initDataSourceDepTarget(ds);
+		if (Array.isArray(value.items)) updateStageDsl(value);
+		else {
+			depService.clear();
+			delete value.dataSourceDeps;
+			delete value.dataSourceCondDeps;
+		}
+		(async () => {
+			const nodeId = editorService.get("node")?.id || props.defaultSelected;
+			let node;
+			if (nodeId) node = editorService.getNodeById(nodeId);
+			if (node && node !== value) await editorService.select(node.id);
+			else if (value.items?.length) await editorService.select(value.items[0]);
+			else if (value.id) {
+				editorService.set("nodes", [value]);
+				editorService.set("parent", null);
+				editorService.set("page", null);
+			}
+			if (toRaw(value) !== toRaw(preValue)) emit("update:modelValue", value);
+		})();
+	};
+	const nodeAddHandler = (nodes) => {
+		collectIdle(nodes, true).then(() => {
+			updateStageNodes(nodes);
+		});
+	};
+	const nodeUpdateHandler = (data) => {
+		const needRecollectNodes = [];
+		const normalNodes = [];
+		for (const { newNode, oldNode, changeRecords } of data) if (newNode.type === NodeType.ROOT) normalNodes.push(newNode);
+		else if (changeRecords?.length) forChangeRecords: for (const record of changeRecords) {
+			if (!record.propPath) {
+				needRecollectNodes.push(newNode);
+				break forChangeRecords;
+			}
+			if (new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === NODE_CONDS_KEY || isValueIncludeDataSource(record.value)) {
+				needRecollectNodes.push(newNode);
+				break forChangeRecords;
+			}
+			for (const target of Object.values(depService.getTargets(DepTargetType.DATA_SOURCE))) {
+				if (!target.deps[newNode.id]) continue;
+				if (target.deps[newNode.id].keys.includes(record.propPath)) {
+					needRecollectNodes.push(newNode);
+					break forChangeRecords;
+				}
+			}
+			normalNodes.push(newNode);
+		}
+		else if (isIncludeDataSource(newNode, oldNode)) needRecollectNodes.push(newNode);
+		else normalNodes.push(newNode);
+		if (needRecollectNodes.length) {
+			const handler = async () => {
+				await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
+				await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+				updateStageNodes(needRecollectNodes);
+			};
+			handler();
+		} else {
+			updateStageNodes(normalNodes);
+			Promise.all([collectIdle(normalNodes, true, DepTargetType.CODE_BLOCK), collectIdle(normalNodes, true, DepTargetType.DATA_SOURCE_METHOD)]);
+		}
+	};
+	const nodeRemoveHandler = (nodes) => {
+		depService.clear(nodes);
+	};
+	const historyChangeHandler = (page) => {
+		collectIdle([page], true).then(() => {
+			updateStageNode(page);
+		});
+	};
+	editorService.on("history-change", historyChangeHandler);
+	editorService.on("root-change", rootChangeHandler);
+	editorService.on("add", nodeAddHandler);
+	editorService.on("remove", nodeRemoveHandler);
+	editorService.on("update", nodeUpdateHandler);
+	const dataSourceAddHandler = (config) => {
+		const handler = async () => {
+			initDataSourceDepTarget(config);
+			const app = await getTMagicApp();
+			if (!app?.dataSourceManager) return;
+			app.dataSourceManager.addDataSource(config);
+			const newDs = app.dataSourceManager.get(config.id);
+			if (newDs) app.dataSourceManager.init(newDs);
+		};
+		handler();
+	};
+	const dataSourceUpdateHandler = (config, { changeRecords }) => {
+		const updateDsData = async () => {
+			const app = await getTMagicApp();
+			if (!app?.dataSourceManager) return;
+			const ds = app.dataSourceManager.get(config.id);
+			if (!ds) return;
+			ds.setFields(config.fields);
+			ds.setData(config.mocks?.find((mock) => mock.useInEditor)?.data || ds.getDefaultData());
+		};
+		let needRecollectDep = false;
+		let isModifyField = false;
+		let isModifyMock = false;
+		let isModifyMethod = false;
+		for (const changeRecord of changeRecords) {
+			if (!changeRecord.propPath) continue;
+			isModifyField = changeRecord.propPath === "fields" || /fields.(\d)+.name/.test(changeRecord.propPath) || /fields.(\d)+.defaultValue/.test(changeRecord.propPath) || /fields.(\d)+$/.test(changeRecord.propPath);
+			isModifyMock = changeRecord.propPath === "mocks";
+			isModifyMethod = changeRecord.propPath === "methods" || /methods.(\d)+.name/.test(changeRecord.propPath) || /methods.(\d)+$/.test(changeRecord.propPath);
+			needRecollectDep = isModifyField || isModifyMock || isModifyMethod;
+			if (needRecollectDep) break;
+		}
+		const root = editorService.get("root");
+		if (needRecollectDep) {
+			if (Array.isArray(root?.items)) {
+				depService.clearIdleTasks();
+				let collectIdlePromises = [];
+				if (isModifyField) {
+					depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
+					depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_COND);
+					depService.addTarget(createDataSourceTarget(config, reactive({})));
+					depService.addTarget(createDataSourceCondTarget(config, reactive({})));
+					collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE), collectIdle(root.items, true, DepTargetType.DATA_SOURCE_COND)];
+				} else if (isModifyMock) {
+					depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
+					depService.addTarget(createDataSourceTarget(config, reactive({})));
+					collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE)];
+				} else if (isModifyMethod) {
+					depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_METHOD);
+					depService.addTarget(createDataSourceMethodTarget(config, reactive({})));
+					collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE_METHOD)];
+				}
+				Promise.all(collectIdlePromises).then(() => updateDataSourceSchema()).then(() => updateDsData()).then(() => updateStageNodes(root.items));
+			}
+		} else if (root?.dataSources) updateDsData();
+	};
+	const removeDataSourceTarget = (id) => {
+		depService.removeTarget(id, DepTargetType.DATA_SOURCE);
+		depService.removeTarget(id, DepTargetType.DATA_SOURCE_COND);
+		depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
+	};
+	const dataSourceRemoveHandler = (id) => {
+		const root = editorService.get("root");
+		if (!root) return;
+		const handler = async () => {
+			const nodes = getNodes(Object.keys(root.dataSourceDeps?.[id] || {}), root.items);
+			await Promise.all([
+				collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
+				collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
+				collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD)
+			]);
+			updateDataSourceSchema();
+			(await getTMagicApp())?.dataSourceManager?.removeDataSource(id);
+			updateStageNodes(nodes);
+			removeDataSourceTarget(id);
+		};
+		handler();
+	};
+	dataSourceService.on("add", dataSourceAddHandler);
+	dataSourceService.on("update", dataSourceUpdateHandler);
+	dataSourceService.on("remove", dataSourceRemoveHandler);
+	const codeBlockAddOrUpdateHandler = (id, codeBlock) => {
+		if (depService.hasTarget(id, DepTargetType.CODE_BLOCK)) {
+			depService.getTarget(id, DepTargetType.CODE_BLOCK).name = codeBlock.name;
+			return;
+		}
+		depService.addTarget(createCodeBlockTarget(id, codeBlock));
+	};
+	const codeBlockRemoveHandler = (id) => {
+		depService.removeTarget(id, DepTargetType.CODE_BLOCK);
+	};
+	codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
+	codeBlockService.on("remove", codeBlockRemoveHandler);
+	const targetAddHandler = (target) => {
+		const root = editorService.get("root");
+		if (!root) return;
+		if (target.type === DepTargetType.DATA_SOURCE) {
+			if (!root.dataSourceDeps) root.dataSourceDeps = {};
+			root.dataSourceDeps[target.id] = target.deps;
+		} else if (target.type === DepTargetType.DATA_SOURCE_COND) {
+			if (!root.dataSourceCondDeps) root.dataSourceCondDeps = {};
+			root.dataSourceCondDeps[target.id] = target.deps;
+		} else if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+			if (!root.dataSourceMethodDeps) root.dataSourceMethodDeps = {};
+			root.dataSourceMethodDeps[target.id] = target.deps;
+		}
+	};
+	const targetRemoveHandler = (id, type) => {
+		const root = editorService.get("root");
+		if (!root) return;
+		if (root.dataSourceDeps && type === DepTargetType.DATA_SOURCE) delete root.dataSourceDeps[id];
+		if (root.dataSourceCondDeps && type === DepTargetType.DATA_SOURCE_COND) delete root.dataSourceCondDeps[id];
+		if (root.dataSourceMethodDeps && type === DepTargetType.DATA_SOURCE_METHOD) delete root.dataSourceMethodDeps[id];
+	};
+	depService.on("add-target", targetAddHandler);
+	depService.on("remove-target", targetRemoveHandler);
+	depService.on("ds-collected", dsDepCollectedHandler);
+	onBeforeUnmount(() => {
+		depService.off("add-target", targetAddHandler);
+		depService.off("remove-target", targetRemoveHandler);
+		depService.off("ds-collected", dsDepCollectedHandler);
+		editorService.off("history-change", historyChangeHandler);
+		editorService.off("root-change", rootChangeHandler);
+		editorService.off("add", nodeAddHandler);
+		editorService.off("remove", nodeRemoveHandler);
+		editorService.off("update", nodeUpdateHandler);
+		codeBlockService.off("addOrUpdate", codeBlockAddOrUpdateHandler);
+		codeBlockService.off("remove", codeBlockRemoveHandler);
+		dataSourceService.off("add", dataSourceAddHandler);
+		dataSourceService.off("update", dataSourceUpdateHandler);
+		dataSourceService.off("remove", dataSourceRemoveHandler);
+	});
+};
+//#endregion
+export { initServiceEvents, initServiceState };

package/dist/es/layouts/AddPageBox.js

@@ -0,0 +1,5 @@
+import AddPageBox_vue_vue_type_script_setup_true_lang_default from "./AddPageBox.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/AddPageBox.vue
+var AddPageBox_default = AddPageBox_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { AddPageBox_default as default };

package/dist/es/layouts/AddPageBox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { generatePageNameByApp } from "../utils/editor.js";
+import { useServices } from "../hooks/use-services.js";
+import Icon_default from "../components/Icon.js";
+import { NodeType } from "@tmagic/core";
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, toRaw, unref } from "vue";
+import { Plus } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/AddPageBox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-empty-panel" };
+var _hoisted_2 = { class: "m-editor-empty-content" };
+var AddPageBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorAddPageBox",
+	__name: "AddPageBox",
+	props: { disabledPageFragment: { type: Boolean } },
+	setup(__props) {
+		const { editorService } = useServices();
+		const clickHandler = (type) => {
+			const root = toRaw(editorService.get("root"));
+			if (!root) throw new Error("root 不能为空");
+			editorService.add({
+				type,
+				name: generatePageNameByApp(root, type),
+				items: []
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", {
+				class: "m-editor-empty-button",
+				onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
+			}, [createElementVNode("div", null, [createVNode(Icon_default, { icon: unref(Plus) }, null, 8, ["icon"])]), _cache[2] || (_cache[2] = createElementVNode("p", null, "新增页面", -1))]), !__props.disabledPageFragment ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "m-editor-empty-button",
+				onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
+			}, [createElementVNode("div", null, [createVNode(Icon_default, { icon: unref(Plus) }, null, 8, ["icon"])]), _cache[3] || (_cache[3] = createElementVNode("p", null, "新增页面片", -1))])) : createCommentVNode("v-if", true)])]);
+		};
+	}
+});
+//#endregion
+export { AddPageBox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/CodeEditor.js

@@ -0,0 +1,5 @@
+import CodeEditor_vue_vue_type_script_setup_true_lang_default from "./CodeEditor.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/CodeEditor.vue
+var CodeEditor_default = CodeEditor_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CodeEditor_default as default };