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

package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js

@@ -74,7 +74,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				createVNode(unref(TMagicScrollbar), null, {
 					default: withCtx(() => [createVNode(unref(MForm), {
 						ref: "configForm",
-						class: normalizeClass(propsPanelSize.value),
+						class: normalizeClass([propsPanelSize.value, "m-editor-props-form-panel-form"]),
 						"popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
 						"label-width": __props.labelWidth,
 						"label-position": __props.labelPosition,

package/dist/es/services/editor.js

@@ -12,6 +12,23 @@ import { NodeType } from "@tmagic/core";
 import { reactive, toRaw } from "vue";
 import { cloneDeep, isObject, mergeWith, uniq } from "lodash-es";
 //#region packages/editor/src/services/editor.ts
+/**
+* 经过 BaseService 的插件 / 中间件包装后，源方法的最后一个形参可能被注入为 dispatch 函数
+* 当 options 形参位置被注入为函数（或为 null）时，将其归一为空对象，避免后续逻辑误读
+*/
+var safeOptions = (options) => {
+	const empty = {};
+	if (!options || typeof options === "function") return empty;
+	return options;
+};
+/**
+* 经过 BaseService 的插件 / 中间件包装后，源方法的形参可能被注入为 dispatch 函数
+* 当 parent 形参位置被注入为函数（或为空值）时，归一为 null，由调用方继续走默认 parent 逻辑
+*/
+var safeParent = (parent) => {
+	if (!parent || typeof parent === "function") return null;
+	return parent;
+};
 var Editor = class extends BaseService_default {
 	state = reactive({
 		root: null,
@@ -104,6 +121,19 @@ var Editor = class extends BaseService_default {
 		return parent;
 	}
 	/**
+	* 判断给定节点是否位于非当前页面（即选中该节点将会引起当前页面切换）
+	* @param node 节点
+	* @returns true 表示该节点位于非当前页面
+	*/
+	isOnDifferentPage(node) {
+		const currentPageId = this.get("page")?.id;
+		if (currentPageId === void 0 || currentPageId === null) return false;
+		if (isPage(node) || isPageFragment(node)) return `${node.id}` !== `${currentPageId}`;
+		const nodePage = this.getNodeInfo(node.id, false).page;
+		if (!nodePage) return false;
+		return `${nodePage.id}` !== `${currentPageId}`;
+	}
+	/**
 	* 只有容器拥有布局
 	*/
 	async getLayout(parent, node) {
@@ -222,9 +252,14 @@ var Editor = class extends BaseService_default {
 	* 向指点容器添加组件节点
 	* @param addConfig 将要添加的组件节点配置
 	* @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+	* @param options 可选配置
+	* @param options.doNotSelect 添加后是否不更新当前选中节点（默认 false，添加后会选中新增的节点）
+	* @param options.doNotSwitchPage 添加后是否不切换当前页面（默认 false；新增页面 / 跨页新增时为 true 会跳过会引发页面切换的选中操作）
 	* @returns 添加后的节点
 	*/
-	async add(addNode, parent) {
+	async add(addNode, parent, options) {
+		const safeParentNode = safeParent(parent);
+		const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 		this.captureSelectionBeforeOp();
 		const stage = this.get("stage");
 		const addNodes = [];
@@ -236,19 +271,24 @@ var Editor = class extends BaseService_default {
 		const newNodes = await Promise.all(addNodes.map((node) => {
 			const root = this.get("root");
 			if ((isPage(node) || isPageFragment(node)) && root) return this.doAdd(node, root);
-			const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
+			const parentNode = safeParentNode ?? getAddParent(node);
 			if (!parentNode) throw new Error("未找到父元素");
 			return this.doAdd(node, parentNode);
 		}));
 		if (newNodes.length > 1) {
-			const newNodeIds = newNodes.map((node) => node.id);
-			stage?.multiSelect(newNodeIds);
-			await this.multiSelect(newNodeIds);
+			const wouldSwitchPage = newNodes.some((n) => this.isOnDifferentPage(n));
+			if (!doNotSelect && !(doNotSwitchPage && wouldSwitchPage)) {
+				const newNodeIds = newNodes.map((node) => node.id);
+				stage?.multiSelect(newNodeIds);
+				await this.multiSelect(newNodeIds);
+			}
 		} else {
-			await this.select(newNodes[0]);
+			const wouldSwitchPage = this.isOnDifferentPage(newNodes[0]);
+			const skipSelect = doNotSelect || doNotSwitchPage && wouldSwitchPage;
+			if (!skipSelect) await this.select(newNodes[0]);
 			if (isPage(newNodes[0])) this.state.pageLength += 1;
 			else if (isPageFragment(newNodes[0])) this.state.pageFragmentLength += 1;
-			else stage?.select(newNodes[0].id);
+			else if (!skipSelect) stage?.select(newNodes[0].id);
 		}
 		if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
 			const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
@@ -267,7 +307,8 @@ var Editor = class extends BaseService_default {
 		this.emit("add", newNodes);
 		return Array.isArray(addNode) ? newNodes : newNodes[0];
 	}
-	async doRemove(node) {
+	async doRemove(node, options) {
+		const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 		const root = this.get("root");
 		if (!root) throw new Error("root不能为空");
 		const { parent, node: curNode } = this.getNodeInfo(node.id, false);
@@ -281,6 +322,17 @@ var Editor = class extends BaseService_default {
 			parentId: parent.id,
 			root: cloneDeep(root)
 		});
+		const selectedNodes = this.get("nodes");
+		const removedSelectedIndex = selectedNodes.findIndex((n) => `${n.id}` === `${node.id}`);
+		if (removedSelectedIndex !== -1) {
+			const nextSelected = [...selectedNodes];
+			nextSelected.splice(removedSelectedIndex, 1);
+			this.set("nodes", nextSelected);
+		}
+		if (isPage(node) || isPageFragment(node)) {
+			const currentPage = this.get("page");
+			if (currentPage && `${currentPage.id}` === `${node.id}`) this.set("page", null);
+		}
 		const selectDefault = async (pages) => {
 			if (pages[0]) {
 				await this.select(pages[0]);
@@ -293,13 +345,15 @@ var Editor = class extends BaseService_default {
 		const rootItems = root.items || [];
 		if (isPage(node)) {
 			this.state.pageLength -= 1;
-			await selectDefault(rootItems);
+			if (!doNotSelect && !doNotSwitchPage) await selectDefault(rootItems);
 		} else if (isPageFragment(node)) {
 			this.state.pageFragmentLength -= 1;
-			await selectDefault(rootItems);
+			if (!doNotSelect && !doNotSwitchPage) await selectDefault(rootItems);
 		} else {
-			await this.select(parent);
-			stage?.select(parent.id);
+			if (!doNotSelect) {
+				await this.select(parent);
+				stage?.select(parent.id);
+			}
 			this.addModifiedNodeId(parent.id);
 		}
 		if (!rootItems.length) {
@@ -309,9 +363,13 @@ var Editor = class extends BaseService_default {
 	}
 	/**
 	* 删除组件
-	* @param {Object} node
+	* @param {Object} node 要删除的节点或节点集合
+	* @param options 可选配置
+	* @param options.doNotSelect 删除后是否不更新当前选中节点（默认 false，删除后会选中父节点或首个页面）
+	* @param options.doNotSwitchPage 删除后是否不切换当前页面（默认 false；删除页面 / 页面片段时为 true 会跳过自动切换到首个剩余页面）
 	*/
-	async remove(nodeOrNodeList) {
+	async remove(nodeOrNodeList, options) {
+		const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 		this.captureSelectionBeforeOp();
 		const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 		const removedItems = [];
@@ -331,11 +389,14 @@ var Editor = class extends BaseService_default {
 				});
 			}
 		}
-		await Promise.all(nodes.map((node) => this.doRemove(node)));
+		await Promise.all(nodes.map((node) => this.doRemove(node, {
+			doNotSelect,
+			doNotSwitchPage
+		})));
 		if (removedItems.length > 0 && pageForOp) this.pushOpHistory("remove", { removedItems }, pageForOp);
 		this.emit("remove", nodes);
 	}
-	async doUpdate(config, { changeRecords = [], selectedAfterUpdate = true } = {}) {
+	async doUpdate(config, { changeRecords = [] } = {}) {
 		const root = this.get("root");
 		if (!root) throw new Error("root为空");
 		if (!config?.id) throw new Error("没有配置或者配置缺少id值");
@@ -362,13 +423,16 @@ var Editor = class extends BaseService_default {
 		const layout = await this.getLayout(node);
 		if (Array.isArray(newConfig.items) && newLayout !== layout) newConfig = setChildrenLayout(newConfig, newLayout);
 		parentNodeItems[index] = newConfig;
-		if (selectedAfterUpdate) {
-			const nodes = this.get("nodes");
-			const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
-			nodes.splice(targetIndex, 1, newConfig);
-			this.set("nodes", [...nodes]);
+		const selectedNodes = this.get("nodes");
+		const targetIndex = selectedNodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
+		if (targetIndex !== -1) {
+			selectedNodes.splice(targetIndex, 1, newConfig);
+			this.set("nodes", [...selectedNodes]);
+		}
+		if (isPage(newConfig) || isPageFragment(newConfig)) {
+			const currentPage = this.get("page");
+			if (currentPage && `${currentPage.id}` === `${newConfig.id}`) this.set("page", newConfig);
 		}
-		if (isPage(newConfig) || isPageFragment(newConfig)) this.set("page", newConfig);
 		this.addModifiedNodeId(newConfig.id);
 		return {
 			oldNode: node,
@@ -407,9 +471,13 @@ var Editor = class extends BaseService_default {
 	* 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
 	* @param id1 组件ID
 	* @param id2 组件ID
+	* @param options 可选配置
+	* @param options.doNotSelect 排序后是否不更新当前选中节点（默认 false）
+	* @param options.doNotSwitchPage 排序后是否不切换当前页面（排序只发生在同一父节点内，方法内为空操作；保留以与其它 DSL 操作 API 一致）
 	* @returns void
 	*/
-	async sort(id1, id2) {
+	async sort(id1, id2, options) {
+		const { doNotSelect = false } = safeOptions(options);
 		this.captureSelectionBeforeOp();
 		const root = this.get("root");
 		if (!root) throw new Error("root为空");
@@ -422,7 +490,7 @@ var Editor = class extends BaseService_default {
 		const index1 = parent.items.findIndex((node) => `${node.id}` === `${id1}`);
 		parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
 		await this.update(parent);
-		await this.select(node);
+		if (!doNotSelect) await this.select(node);
 		this.get("stage")?.update({
 			config: cloneDeep(node),
 			parentId: parent.id,
@@ -450,9 +518,14 @@ var Editor = class extends BaseService_default {
 	/**
 	* 从localStorage中获取节点，然后添加到当前容器中
 	* @param position 粘贴的坐标
+	* @param collectorOptions 可选的依赖收集器配置
+	* @param options 可选配置
+	* @param options.doNotSelect 粘贴后是否不更新当前选中节点（默认 false）
+	* @param options.doNotSwitchPage 粘贴后是否不切换当前页面（默认 false；跨页粘贴时为 true 会跳过页面切换）
 	* @returns 添加后的组件节点配置
 	*/
-	async paste(position = {}, collectorOptions) {
+	async paste(position = {}, collectorOptions, options) {
+		const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 		const config = storage_default.getItem(COPY_STORAGE_KEY);
 		if (!Array.isArray(config)) return;
 		const node = this.get("node");
@@ -463,7 +536,10 @@ var Editor = class extends BaseService_default {
 		}
 		const pasteConfigs = await this.doPaste(config, position);
 		if (collectorOptions && typeof collectorOptions.isTarget === "function") props_default.replaceRelateId(config, pasteConfigs, collectorOptions);
-		return this.add(pasteConfigs, parent);
+		return this.add(pasteConfigs, parent, {
+			doNotSelect,
+			doNotSwitchPage
+		});
 	}
 	async doPaste(config, position = {}) {
 		props_default.clearRelateId();
@@ -484,14 +560,18 @@ var Editor = class extends BaseService_default {
 	/**
 	* 将指点节点设置居中
 	* @param config 组件节点配置
+	* @param options 可选配置
+	* @param options.doNotSelect 居中后是否不更新当前选中节点（默认 false）
+	* @param options.doNotSwitchPage 居中后是否不切换当前页面（居中只更新节点 style，方法内为空操作；保留以与其它 DSL 操作 API 一致）
 	* @returns 当前组件节点配置
 	*/
-	async alignCenter(config) {
+	async alignCenter(config, options) {
+		const { doNotSelect = false } = safeOptions(options);
 		const nodes = Array.isArray(config) ? config : [config];
 		const stage = this.get("stage");
 		const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
 		const newNode = await this.update(newNodes);
-		if (newNodes.length > 1) await stage?.multiSelect(newNodes.map((node) => node.id));
+		if (!doNotSelect) if (newNodes.length > 1) await stage?.multiSelect(newNodes.map((node) => node.id));
 		else await stage?.select(newNodes[0].id);
 		return newNode;
 	}
@@ -536,8 +616,12 @@ var Editor = class extends BaseService_default {
 	* 移动到指定容器中
 	* @param config 需要移动的节点
 	* @param targetId 容器ID
+	* @param options 可选配置
+	* @param options.doNotSelect 移动后是否不更新当前选中节点（默认 false）
+	* @param options.doNotSwitchPage 移动后是否不切换当前页面（默认 false；目标容器位于其它页面时为 true 会跳过自动选中以避免页面切换）
 	*/
-	async moveToContainer(config, targetId) {
+	async moveToContainer(config, targetId, options) {
+		const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 		this.captureSelectionBeforeOp();
 		const root = this.get("root");
 		const { node, parent, page: pageForOp } = this.getNodeInfo(config.id, false);
@@ -559,15 +643,19 @@ var Editor = class extends BaseService_default {
 			});
 			newConfig.style = getInitPositionStyle(newConfig.style, layout);
 			target.items.push(newConfig);
-			await stage.select(targetId);
+			const targetWouldSwitchPage = this.isOnDifferentPage(target);
+			const skipSelect = doNotSelect || doNotSwitchPage && targetWouldSwitchPage;
+			if (!skipSelect) await stage.select(targetId);
 			const targetParent = this.getParentById(target.id);
 			await stage.update({
 				config: cloneDeep(target),
 				parentId: targetParent?.id,
 				root: cloneDeep(root)
 			});
-			await this.select(newConfig);
-			stage.select(newConfig.id);
+			if (!skipSelect) {
+				await this.select(newConfig);
+				stage.select(newConfig.id);
+			}
 			this.addModifiedNodeId(target.id);
 			this.addModifiedNodeId(parent.id);
 			this.pushOpHistory("update", { updatedItems: [{

package/dist/es/style.css

@@ -1048,20 +1048,6 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-props-panel .m-editor-props-property-panel.show-style-panel .m-editor-props-panel-src-icon {
   right: calc(15px + var(--props-style-panel-width));
 }
-.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form {
-  padding-right: 10px;
-  padding-left: 10px;
-}
-.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
-  padding-top: 55px;
-}
-.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  background: #fff;
-  z-index: 3;
-}
 .m-editor-props-panel .m-editor-props-style-panel {
   position: absolute;
   width: var(--props-style-panel-width);
@@ -1133,6 +1119,21 @@ fieldset.m-fieldset .m-form-tip {
   font-size: 12px;
 }
 
+.m-editor-props-form-panel-form {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+.m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
+  padding-top: 55px;
+}
+.m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background: #fff;
+  z-index: 3;
+}
+
 .m-editor-props-panel-popper.small span,
 .m-editor-props-panel-popper.small a,
 .m-editor-props-panel-popper.small p {

package/dist/style.css

@@ -1048,20 +1048,6 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-props-panel .m-editor-props-property-panel.show-style-panel .m-editor-props-panel-src-icon {
   right: calc(15px + var(--props-style-panel-width));
 }
-.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form {
-  padding-right: 10px;
-  padding-left: 10px;
-}
-.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
-  padding-top: 55px;
-}
-.m-editor-props-panel .m-editor-props-property-panel .tmagic-design-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  background: #fff;
-  z-index: 3;
-}
 .m-editor-props-panel .m-editor-props-style-panel {
   position: absolute;
   width: var(--props-style-panel-width);
@@ -1133,6 +1119,21 @@ fieldset.m-fieldset .m-form-tip {
   font-size: 12px;
 }
 
+.m-editor-props-form-panel-form {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+.m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__content {
+  padding-top: 55px;
+}
+.m-editor-props-form-panel-form > .m-container-tab > .tmagic-design-tabs > .el-tabs__header.is-top {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background: #fff;
+  z-index: 3;
+}
+
 .m-editor-props-panel-popper.small span,
 .m-editor-props-panel-popper.small a,
 .m-editor-props-panel-popper.small p {