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

package/dist/tmagic-editor.umd.cjs

@@ -5793,6 +5793,23 @@
 	};
 	//#endregion
 	//#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 = (0, vue.reactive)({
 			root: null,
@@ -5885,6 +5902,19 @@
 			return parent;
 		}
 		/**
+		* 判断给定节点是否位于非当前页面（即选中该节点将会引起当前页面切换）
+		* @param node 节点
+		* @returns true 表示该节点位于非当前页面
+		*/
+		isOnDifferentPage(node) {
+			const currentPageId = this.get("page")?.id;
+			if (currentPageId === void 0 || currentPageId === null) return false;
+			if ((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.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) {
@@ -6003,9 +6033,14 @@
 		* 向指点容器添加组件节点
 		* @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 = [];
@@ -6017,19 +6052,24 @@
 			const newNodes = await Promise.all(addNodes.map((node) => {
 				const root = this.get("root");
 				if (((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.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 ((0, _tmagic_utils.isPage)(newNodes[0])) this.state.pageLength += 1;
 				else if ((0, _tmagic_utils.isPageFragment)(newNodes[0])) this.state.pageFragmentLength += 1;
-				else stage?.select(newNodes[0].id);
+				else if (!skipSelect) stage?.select(newNodes[0].id);
 			}
 			if (!((0, _tmagic_utils.isPage)(newNodes[0]) || (0, _tmagic_utils.isPageFragment)(newNodes[0]))) {
 				const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
@@ -6048,7 +6088,8 @@
 			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);
@@ -6062,6 +6103,17 @@
 				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 ((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.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]);
@@ -6074,13 +6126,15 @@
 			const rootItems = root.items || [];
 			if ((0, _tmagic_utils.isPage)(node)) {
 				this.state.pageLength -= 1;
-				await selectDefault(rootItems);
+				if (!doNotSelect && !doNotSwitchPage) await selectDefault(rootItems);
 			} else if ((0, _tmagic_utils.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) {
@@ -6090,9 +6144,13 @@
 		}
 		/**
 		* 删除组件
-		* @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 = [];
@@ -6112,11 +6170,14 @@
 					});
 				}
 			}
-			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值");
@@ -6143,13 +6204,16 @@
 			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 ((0, _tmagic_utils.isPage)(newConfig) || (0, _tmagic_utils.isPageFragment)(newConfig)) {
+				const currentPage = this.get("page");
+				if (currentPage && `${currentPage.id}` === `${newConfig.id}`) this.set("page", newConfig);
 			}
-			if ((0, _tmagic_utils.isPage)(newConfig) || (0, _tmagic_utils.isPageFragment)(newConfig)) this.set("page", newConfig);
 			this.addModifiedNodeId(newConfig.id);
 			return {
 				oldNode: node,
@@ -6188,9 +6252,13 @@
 		* 将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为空");
@@ -6203,7 +6271,7 @@
 			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,
@@ -6231,9 +6299,14 @@
 		/**
 		* 从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");
@@ -6244,7 +6317,10 @@
 			}
 			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();
@@ -6265,14 +6341,18 @@
 		/**
 		* 将指点节点设置居中
 		* @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;
 		}
@@ -6317,8 +6397,12 @@
 		* 移动到指定容器中
 		* @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);
@@ -6340,15 +6424,19 @@
 				});
 				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: [{
@@ -9116,7 +9204,7 @@
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), null, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MForm), {
 							ref: "configForm",
-							class: (0, vue.normalizeClass)(propsPanelSize.value),
+							class: (0, vue.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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.14-beta.2",
+  "version": "1.8.0-beta.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.14-beta.2",
-    "@tmagic/form": "1.7.14-beta.2",
-    "@tmagic/stage": "1.7.14-beta.2",
-    "@tmagic/table": "1.7.14-beta.2",
-    "@tmagic/utils": "1.7.14-beta.2"
+    "@tmagic/design": "1.8.0-beta.0",
+    "@tmagic/form": "1.8.0-beta.0",
+    "@tmagic/stage": "1.8.0-beta.0",
+    "@tmagic/utils": "1.8.0-beta.0",
+    "@tmagic/table": "1.8.0-beta.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.34",
-    "@tmagic/core": "1.7.14-beta.2"
+    "@tmagic/core": "1.8.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/layouts/props-panel/FormPanel.vue

@@ -5,7 +5,7 @@
     <TMagicScrollbar>
       <MForm
         ref="configForm"
-        :class="propsPanelSize"
+        :class="[propsPanelSize, 'm-editor-props-form-panel-form']"
         :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
         :label-width="labelWidth"
         :label-position="labelPosition"