@tmagic/editor 1.7.13 → 1.7.14-beta.1

package/dist/tmagic-editor.umd.cjs

@@ -4787,6 +4787,9 @@
 			});
 			this.emit("props-configs-change");
 		}
+		getPropsConfigs() {
+			return this.state.propsConfigMap;
+		}
 		async fillConfig(config, labelWidth) {
 			return fillConfig(config, {
 				labelWidth: typeof labelWidth !== "function" ? labelWidth : "80px",
@@ -4805,15 +4808,21 @@
 		* @param type 组件类型
 		* @returns 组件属性表单配置
 		*/
-		async getPropsConfig(type) {
-			if (type === "area") return await this.getPropsConfig("button");
+		async getPropsConfig(type, data) {
+			if (type === "area") return await this.getPropsConfig("button", data);
 			return cloneDeep(this.state.propsConfigMap[(0, _tmagic_utils.toLine)(type)] || await this.fillConfig([]));
 		}
+		hasPropsConfig(type) {
+			return !!this.state.propsConfigMap[(0, _tmagic_utils.toLine)(type)];
+		}
 		setPropsValues(values) {
 			Object.keys(values).forEach((type) => {
 				this.setPropsValue((0, _tmagic_utils.toLine)(type), values[type]);
 			});
 		}
+		getPropsValues() {
+			return this.state.propsValueMap;
+		}
 		/**
 		* 为指点类型组件设置组件初始值
 		* @param type 组件类型
@@ -4850,6 +4859,9 @@
 				...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
 			};
 		}
+		hasPropsValue(type) {
+			return !!this.state.propsValueMap[(0, _tmagic_utils.toLine)(type)];
+		}
 		createId(type) {
 			return `${type}_${(0, _tmagic_utils.guid)()}`;
 		}
@@ -5794,7 +5806,8 @@
 			modifiedNodeIds: /* @__PURE__ */ new Map(),
 			pageLength: 0,
 			pageFragmentLength: 0,
-			disabledMultiSelect: false
+			disabledMultiSelect: false,
+			alwaysMultiSelect: false
 		});
 		isHistoryStateChange = false;
 		selectionBeforeOp = null;
@@ -6670,6 +6683,7 @@
 			zoom: stageOptions.zoom ?? zoom.value,
 			autoScrollIntoView: stageOptions.autoScrollIntoView,
 			isContainer: stageOptions.isContainer,
+			canDropIn: stageOptions.canDropIn,
 			containerHighlightClassName: stageOptions.containerHighlightClassName,
 			containerHighlightDuration: stageOptions.containerHighlightDuration,
 			containerHighlightType: stageOptions.containerHighlightType,
@@ -6688,12 +6702,16 @@
 			updateDragEl: stageOptions.updateDragEl,
 			guidesOptions: stageOptions.guidesOptions,
 			disabledMultiSelect: stageOptions.disabledMultiSelect,
+			alwaysMultiSelect: stageOptions.alwaysMultiSelect,
 			disabledRule: stageOptions.disabledRule
 		});
 		(0, vue.watch)(() => editor_default.get("disabledMultiSelect"), (disabledMultiSelect) => {
 			if (disabledMultiSelect) stage.disableMultiSelect();
 			else stage.enableMultiSelect();
 		});
+		(0, vue.watch)(() => editor_default.get("alwaysMultiSelect"), (alwaysMultiSelect) => {
+			stage.setAlwaysMultiSelect(Boolean(alwaysMultiSelect));
+		});
 		const hGuidesCache = getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY));
 		const vGuidesCache = getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY));
 		stage.mask?.setGuides([hGuidesCache, vGuidesCache]);
@@ -6879,6 +6897,8 @@
 			if (nodeStatus[key] !== void 0 && status[key] !== void 0) nodeStatus[key] = Boolean(status[key]);
 		});
 	};
+	/** 默认的组件树节点是否可展开的判断函数：当节点的子项中至少存在一个可见节点时认为可展开 */
+	var defaultIsExpandable = (data, nodeStatusMap) => Array.isArray(data.items) && data.items.some((item) => nodeStatusMap.get(item.id)?.visible);
 	//#endregion
 	//#region packages/editor/src/hooks/use-filter.ts
 	var useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
@@ -9020,7 +9040,7 @@
 					return;
 				}
 				const type = node.value.type || (node.value.items ? "container" : "text");
-				curFormConfig.value = await propsService.getPropsConfig(type);
+				curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
 				values.value = node.value;
 			};
 			(0, vue.watchEffect)(init);
@@ -9860,7 +9880,11 @@
 			parentsId: { default: () => [] },
 			nodeStatusMap: {},
 			indent: { default: 0 },
-			nextLevelIndentIncrement: { default: 11 }
+			nextLevelIndentIncrement: { default: 11 },
+			isExpandable: {
+				type: Function,
+				default: defaultIsExpandable
+			}
 		},
 		emits: [
 			"node-dragstart",
@@ -9868,7 +9892,8 @@
 			"node-dragend",
 			"node-contextmenu",
 			"node-mouseenter",
-			"node-click"
+			"node-click",
+			"node-dblclick"
 		],
 		setup(__props, { emit: __emit }) {
 			const treeEmit = (0, vue.inject)("treeEmit");
@@ -9883,7 +9908,6 @@
 			const selected = (0, vue.computed)(() => nodeStatus.value.selected);
 			const visible = (0, vue.computed)(() => nodeStatus.value.visible);
 			const draggable = (0, vue.computed)(() => nodeStatus.value.draggable);
-			const hasChildren = (0, vue.computed)(() => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible));
 			const handleDragStart = (event) => {
 				treeEmit?.("node-dragstart", event, props.data);
 			};
@@ -9905,6 +9929,9 @@
 			const nodeClickHandler = (event) => {
 				treeEmit?.("node-click", event, props.data);
 			};
+			const nodeDblclickHandler = (event) => {
+				treeEmit?.("node-dblclick", event, props.data);
+			};
 			return (_ctx, _cache) => {
 				const _component_TreeNode = (0, vue.resolveComponent)("TreeNode", true);
 				return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -9927,20 +9954,22 @@
 					onMouseenter: mouseenterHandler
 				}, [(0, vue.createVNode)(Icon_default, {
 					class: "expand-icon",
-					style: (0, vue.normalizeStyle)(hasChildren.value ? "" : "color: transparent; cursor: default"),
+					style: (0, vue.normalizeStyle)(__props.isExpandable(__props.data, __props.nodeStatusMap) ? "" : "color: transparent; cursor: default"),
 					icon: expanded.value ? (0, vue.unref)(_element_plus_icons_vue.ArrowDown) : (0, vue.unref)(_element_plus_icons_vue.ArrowRight),
 					onClick: expandHandler
 				}, null, 8, ["style", "icon"]), (0, vue.createElementVNode)("div", {
 					class: "tree-node-content",
-					onClick: nodeClickHandler
-				}, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [(0, vue.createElementVNode)("div", _hoisted_2$15, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(`${__props.data.name} (${__props.data.id})`), 1)])]), (0, vue.createElementVNode)("div", _hoisted_3$4, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-tool", { data: __props.data })])])])], 38), hasChildren.value && expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.data.items, (item) => {
+					onClick: nodeClickHandler,
+					onDblclick: nodeDblclickHandler
+				}, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [(0, vue.createElementVNode)("div", _hoisted_2$15, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(`${__props.data.name} (${__props.data.id})`), 1)])]), (0, vue.createElementVNode)("div", _hoisted_3$4, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-tool", { data: __props.data })])])], 32)], 38), __props.isExpandable(__props.data, __props.nodeStatusMap) && expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.data.items, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(_component_TreeNode, {
 						key: item.id,
 						data: item,
 						parent: __props.data,
 						parentsId: [...__props.parentsId, __props.data.id],
 						"node-status-map": __props.nodeStatusMap,
-						indent: __props.indent + __props.nextLevelIndentIncrement
+						indent: __props.indent + __props.nextLevelIndentIncrement,
+						"is-expandable": __props.isExpandable
 					}, {
 						"tree-node-content": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: nodeData })]),
 						"tree-node-label": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -9951,7 +9980,8 @@
 						"parent",
 						"parentsId",
 						"node-status-map",
-						"indent"
+						"indent",
+						"is-expandable"
 					]);
 				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 40, _hoisted_1$49)), [[vue.vShow, visible.value]]);
 			};
@@ -9974,7 +10004,8 @@
 			nodeStatusMap: {},
 			indent: { default: 0 },
 			nextLevelIndentIncrement: {},
-			emptyText: { default: "暂无数据" }
+			emptyText: { default: "暂无数据" },
+			isExpandable: {}
 		},
 		emits: [
 			"node-dragover",
@@ -9983,7 +10014,8 @@
 			"node-dragend",
 			"node-contextmenu",
 			"node-mouseenter",
-			"node-click"
+			"node-click",
+			"node-dblclick"
 		],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
@@ -10001,7 +10033,8 @@
 						data: item,
 						indent: __props.indent,
 						"next-level-indent-increment": __props.nextLevelIndentIncrement,
-						"node-status-map": __props.nodeStatusMap
+						"node-status-map": __props.nodeStatusMap,
+						"is-expandable": __props.isExpandable
 					}, {
 						"tree-node-content": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: nodeData })]),
 						"tree-node-label": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -10011,7 +10044,8 @@
 						"data",
 						"indent",
 						"next-level-indent-increment",
-						"node-status-map"
+						"node-status-map",
+						"is-expandable"
 					]);
 				}), 128)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$48, [(0, vue.createElementVNode)("p", null, (0, vue.toDisplayString)(__props.emptyText), 1)]))], 32);
 			};
@@ -11056,7 +11090,7 @@
 	//#endregion
 	//#region packages/editor/src/layouts/sidebar/layer/use-click.ts
 	var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown, nodeStatusMap, menuRef) => {
-		const isMultiSelect = (0, vue.computed)(() => isCtrlKeyDown.value && !editorService.get("disabledMultiSelect"));
+		const isMultiSelect = (0, vue.computed)(() => !editorService.get("disabledMultiSelect") && (isCtrlKeyDown.value || editorService.get("alwaysMultiSelect")));
 		const select = async (data) => {
 			if (!data.id) throw new Error("没有id");
 			if (isMultiSelect.value) multiSelect(data);
@@ -11092,6 +11126,15 @@
 			editorService.get("stage")?.highlight(data.id);
 			stageOverlayService.get("stage")?.highlight(data.id);
 		};
+		const isNodeCanSelect = async (data) => {
+			const canSelect = stageOverlayService.get("stageOptions")?.canSelect;
+			if (!canSelect) return true;
+			const doc = editorService.get("stage")?.renderer?.contentWindow?.document;
+			if (!doc) return true;
+			const el = (0, _tmagic_utils.getElById)()(doc, data.id);
+			if (!el) return true;
+			return Boolean(await canSelect(el));
+		};
 		const nodeClickHandler = (event, data) => {
 			if (!nodeStatusMap?.value) return;
 			if (uiService.get("uiSelectMode")) {
@@ -11099,13 +11142,23 @@
 				return;
 			}
 			if (data.items && data.items.length > 0 && !isMultiSelect.value) updateStatus(nodeStatusMap.value, data.id, { expand: true });
-			(0, vue.nextTick)(() => {
+			(0, vue.nextTick)(async () => {
+				if (!await isNodeCanSelect(data)) return;
 				select(data);
 			});
 		};
+		const nodeDblclickHandler = (event, data) => {
+			if (!nodeStatusMap?.value) return;
+			if (uiService.get("uiSelectMode")) return;
+			if (data.items && data.items.length > 0) {
+				const status = nodeStatusMap.value.get(data.id);
+				updateStatus(nodeStatusMap.value, data.id, { expand: !status?.expand });
+			}
+		};
 		return {
 			menuRef,
 			nodeClickHandler,
+			nodeDblclickHandler,
 			nodeContentMenuHandler(event, data) {
 				event.preventDefault();
 				const nodes = editorService.get("nodes") || [];
@@ -11143,7 +11196,7 @@
 	* dragover 属于目标节点
 	* 这些方法并不是同一个dom事件触发的
 	*/
-	var useDrag = ({ editorService }) => {
+	var useDrag = ({ editorService }, options = {}) => {
 		const handleDragStart = (event) => {
 			if (!event.dataTransfer || !event.target || !event.currentTarget) return;
 			const targetEl = getNodeEl(event.target);
@@ -11175,19 +11228,34 @@
 					if (parentsId.includes(`${nodeId}`) && i >= targetIdIndex) return;
 				}
 			}
-			if (distance < targetHeight / 3) {
+			let canDropInTarget = isContainer;
+			let redirectedTargetId;
+			if (canDropInTarget && options.canDropIn && nodeId && targetNodeId !== nodeId) {
+				const result = options.canDropIn([nodeId], targetNodeId);
+				if (result === false) canDropInTarget = false;
+				else if (typeof result === "string" || typeof result === "number") redirectedTargetId = result;
+			}
+			let canDropAsSibling = true;
+			const directParentId = parentsId?.[parentsId.length - 1];
+			if (options.canDropIn && nodeId && directParentId && directParentId !== nodeId) {
+				const siblingResult = options.canDropIn([nodeId], directParentId);
+				if (siblingResult === false || typeof siblingResult === "string" || typeof siblingResult === "number") canDropAsSibling = false;
+			}
+			dragState.dropType = "";
+			if (distance < targetHeight / 3 && canDropAsSibling) {
 				dragState.dropType = "before";
 				(0, _tmagic_utils.addClassName)(labelEl, globalThis.document, "drag-before");
-			} else if (distance > targetHeight * 2 / 3) {
+			} else if (distance > targetHeight * 2 / 3 && canDropAsSibling) {
 				dragState.dropType = "after";
 				(0, _tmagic_utils.addClassName)(labelEl, globalThis.document, "drag-after");
-			} else if (isContainer) {
+			} else if (canDropInTarget) {
 				dragState.dropType = "inner";
 				(0, _tmagic_utils.addClassName)(labelEl, globalThis.document, "drag-inner");
 			}
 			if (!dragState.dropType) return;
 			dragState.dragOverNodeId = targetNodeId;
 			dragState.container = event.currentTarget;
+			dragState.redirectedTargetId = dragState.dropType === "inner" ? redirectedTargetId : void 0;
 			event.preventDefault();
 		};
 		const handleDragLeave = (event) => {
@@ -11209,10 +11277,16 @@
 				let targetParent = targetInfo.parent;
 				if (!targetParent || !targetNode) return;
 				let targetIndex = -1;
-				if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
+				if (Array.isArray(targetNode.items) && dragState.dropType === "inner") if (dragState.redirectedTargetId !== void 0) {
+					const redirectedNode = editorService.getNodeInfo(dragState.redirectedTargetId, false).node;
+					if (!redirectedNode || !Array.isArray(redirectedNode.items)) return;
+					targetParent = redirectedNode;
+					targetIndex = redirectedNode.items.length;
+				} else {
 					targetIndex = targetNode.items.length;
 					targetParent = targetNode;
-				} else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
+				}
+				else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
 				if (dragState.dropType === "after") targetIndex += 1;
 				const selectedNodes = editorService.get("nodes");
 				if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) editorService.dragTo(selectedNodes, targetParent, targetIndex);
@@ -11221,6 +11295,7 @@
 			dragState.dragOverNodeId = "";
 			dragState.dropType = "";
 			dragState.container = null;
+			dragState.redirectedTargetId = void 0;
 		};
 		return {
 			handleDragStart,
@@ -11446,9 +11521,15 @@
 			layerContentMenu: {},
 			indent: {},
 			nextLevelIndentIncrement: {},
-			customContentMenu: { type: Function }
+			customContentMenu: { type: Function },
+			isExpandable: { type: Function },
+			canDropIn: { type: Function },
+			beforeNodeDblclick: { type: Function }
 		},
-		setup(__props) {
+		emits: ["node-dblclick"],
+		setup(__props, { emit: __emit }) {
+			const props = __props;
+			const emit = __emit;
 			const services = useServices();
 			const { editorService } = services;
 			const treeRef = (0, vue.useTemplateRef)("tree");
@@ -11471,8 +11552,15 @@
 					status.expand = false;
 				}
 			};
-			const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
-			const { nodeClickHandler, nodeContentMenuHandler, highlightHandler: mouseenterHandler } = useClick(services, isCtrlKeyDown, nodeStatusMap, (0, vue.useTemplateRef)("menu"));
+			const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services, { canDropIn: (sourceIds, targetId) => props.canDropIn?.(sourceIds, targetId, "layer") });
+			const { nodeClickHandler, nodeDblclickHandler, nodeContentMenuHandler, highlightHandler: mouseenterHandler } = useClick(services, isCtrlKeyDown, nodeStatusMap, (0, vue.useTemplateRef)("menu"));
+			const dblclickHandler = async (event, data) => {
+				if (props.beforeNodeDblclick) {
+					if (await props.beforeNodeDblclick(event, data) === false) return;
+				}
+				nodeDblclickHandler(event, data);
+				emit("node-dblclick", event, data);
+			};
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
 					default: (0, vue.withCtx)(() => [
@@ -11486,13 +11574,15 @@
 							"node-status-map": (0, vue.unref)(nodeStatusMap),
 							indent: __props.indent,
 							"next-level-indent-increment": __props.nextLevelIndentIncrement,
+							"is-expandable": __props.isExpandable,
 							onNodeDragover: (0, vue.unref)(handleDragOver),
 							onNodeDragstart: (0, vue.unref)(handleDragStart),
 							onNodeDragleave: (0, vue.unref)(handleDragLeave),
 							onNodeDragend: (0, vue.unref)(handleDragEnd),
 							onNodeContextmenu: (0, vue.unref)(nodeContentMenuHandler),
 							onNodeMouseenter: (0, vue.unref)(mouseenterHandler),
-							onNodeClick: (0, vue.unref)(nodeClickHandler)
+							onNodeClick: (0, vue.unref)(nodeClickHandler),
+							onNodeDblclick: dblclickHandler
 						}, {
 							"tree-node-content": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "layer-node-content", { data: nodeData })]),
 							"tree-node-tool": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [(0, vue.createVNode)(LayerNodeTool_default, { data: nodeData }, null, 8, ["data"])])]),
@@ -11503,6 +11593,7 @@
 							"node-status-map",
 							"indent",
 							"next-level-indent-increment",
+							"is-expandable",
 							"onNodeDragover",
 							"onNodeDragstart",
 							"onNodeDragleave",
@@ -11678,9 +11769,14 @@
 			layerContentMenu: {},
 			indent: {},
 			nextLevelIndentIncrement: {},
-			customContentMenu: {}
+			customContentMenu: {},
+			layerNodeIsExpandable: {},
+			canDropIn: {},
+			beforeLayerNodeDblclick: {}
 		},
-		setup(__props, { expose: __expose }) {
+		emits: ["layer-node-dblclick"],
+		setup(__props, { expose: __expose, emit: __emit }) {
+			const emit = __emit;
 			const props = __props;
 			const { depService, uiService, propsService } = useServices();
 			const collecting = (0, vue.computed)(() => depService.get("collecting"));
@@ -11717,8 +11813,12 @@
 							layerContentMenu: props.layerContentMenu,
 							customContentMenu: props.customContentMenu,
 							indent: props.indent,
-							nextLevelIndentIncrement: props.nextLevelIndentIncrement
+							nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+							isExpandable: props.layerNodeIsExpandable,
+							canDropIn: props.canDropIn,
+							beforeNodeDblclick: props.beforeLayerNodeDblclick
 						},
+						listeners: { "node-dblclick": (event, nodeData) => emit("layer-node-dblclick", event, nodeData) },
 						component: LayerPanel_default,
 						slots: {}
 					},
@@ -12086,7 +12186,7 @@
 					(0, vue.createElementVNode)("div", {
 						ref: "target",
 						style: (0, vue.normalizeStyle)(style.value)
-					}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 4),
+					}, [(0, vue.renderSlot)(_ctx.$slots, "before"), (0, vue.renderSlot)(_ctx.$slots, "default")], 4),
 					(0, vue.renderSlot)(_ctx.$slots, "content"),
 					scrollHeight.value > __props.wrapHeight ? ((0, vue.openBlock)(), (0, vue.createBlock)(ScrollBar_default, {
 						key: 0,
@@ -12623,9 +12723,20 @@
 				const doc = stage?.renderer?.contentWindow?.document;
 				const parentEl = doc?.querySelector(`.${props.stageOptions?.containerHighlightClassName}`);
 				let parent = page.value;
+				let resolvedParentEl = parentEl;
 				const parentId = (0, _tmagic_utils.getIdFromEl)()(parentEl);
 				if (parentId) parent = editorService.getNodeById(parentId, false);
 				if (parent && stageContainerEl.value && stage) {
+					if (props.stageOptions.canDropIn) {
+						const result = props.stageOptions.canDropIn([], parent.id);
+						if (result === false) return;
+						if (typeof result === "string" || typeof result === "number") {
+							const redirectedNode = editorService.getNodeById(result, false);
+							if (!redirectedNode) return;
+							parent = redirectedNode;
+							resolvedParentEl = stage.renderer?.getTargetElement(result) ?? null;
+						}
+					}
 					const layout = await editorService.getLayout(parent);
 					const containerRect = stageContainerEl.value.getBoundingClientRect();
 					const { scrollTop, scrollLeft } = stage.mask;
@@ -12641,8 +12752,8 @@
 						position = "absolute";
 						top = e.clientY - containerRect.top + scrollTop;
 						left = e.clientX - containerRect.left + scrollLeft;
-						if (parentEl) {
-							const { left: parentLeft, top: parentTop } = (0, _tmagic_stage.getOffset)(parentEl);
+						if (resolvedParentEl) {
+							const { left: parentLeft, top: parentTop } = (0, _tmagic_stage.getOffset)(resolvedParentEl);
 							left = left - parentLeft * zoom.value;
 							top = top - parentTop * zoom.value;
 						}
@@ -12675,6 +12786,7 @@
 					},
 					onClick: _cache[0] || (_cache[0] = ($event) => stageWrapRef.value?.container?.focus())
 				}, {
+					before: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage-top")]),
 					content: (0, vue.withCtx)(() => [!__props.disabledStageOverlay ? ((0, vue.openBlock)(), (0, vue.createBlock)(StageOverlay_default, { key: 0 })) : (0, vue.createCommentVNode)("v-if", true), ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, { to: "body" }, [(0, vue.createVNode)(ViewerMenu_default, {
 						ref: "menu",
 						"is-multi-select": isMultiSelect.value,
@@ -12693,7 +12805,7 @@
 						onDrop: dropHandler,
 						onDragover: dragoverHandler
 					}, null, 36), (0, vue.createVNode)(NodeListMenu_default)]),
-					_: 1
+					_: 3
 				}, 8, [
 					"width",
 					"height",
@@ -12711,9 +12823,13 @@
 	//#region packages/editor/src/layouts/workspace/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$39 = {
 		key: 0,
-		class: "m-editor-breadcrumb"
+		class: "m-editor-breadcrumb-ellipsis"
 	};
-	var _hoisted_2$12 = { key: 0 };
+	var _hoisted_2$12 = {
+		key: 2,
+		class: "m-editor-breadcrumb-separator"
+	};
+	var COLLAPSE_RATIO = .8;
 	var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorBreadcrumb",
 		__name: "Breadcrumb",
@@ -12723,21 +12839,92 @@
 			const nodes = (0, vue.computed)(() => editorService.get("nodes"));
 			const root = (0, vue.computed)(() => editorService.get("root"));
 			const path = (0, vue.computed)(() => (0, _tmagic_utils.getNodePath)(node.value?.id || "", root.value?.items || []));
+			const containerRef = (0, vue.ref)(null);
+			const collapsed = (0, vue.ref)(false);
+			const displayPath = (0, vue.computed)(() => {
+				const list = path.value;
+				if (!collapsed.value || list.length <= 3) return list;
+				return [
+					list[0],
+					{
+						isEllipsis: true,
+						id: "__ellipsis__",
+						name: "..."
+					},
+					list[list.length - 2],
+					list[list.length - 1]
+				];
+			});
+			const measureOverflow = async () => {
+				if (collapsed.value) {
+					collapsed.value = false;
+					await (0, vue.nextTick)();
+				}
+				const el = containerRef.value;
+				const parent = el?.parentElement;
+				if (!el || !parent) return;
+				const contentWidth = el.scrollWidth;
+				const parentWidth = parent.clientWidth;
+				if (parentWidth <= 0) return;
+				collapsed.value = contentWidth > parentWidth * COLLAPSE_RATIO;
+			};
+			let resizeObserver = null;
+			const observe = () => {
+				resizeObserver?.disconnect();
+				const el = containerRef.value;
+				if (!el || typeof ResizeObserver === "undefined") return;
+				resizeObserver = new ResizeObserver(() => {
+					measureOverflow();
+				});
+				resizeObserver.observe(el);
+				if (el.parentElement) resizeObserver.observe(el.parentElement);
+			};
+			(0, vue.onMounted)(() => {
+				observe();
+				measureOverflow();
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				resizeObserver?.disconnect();
+				resizeObserver = null;
+			});
+			(0, vue.watch)(() => nodes.value.length, async () => {
+				await (0, vue.nextTick)();
+				observe();
+				measureOverflow();
+			});
+			(0, vue.watch)(path, async () => {
+				await (0, vue.nextTick)();
+				measureOverflow();
+			});
 			const select = async (node) => {
 				await editorService.select(node);
 				editorService.get("stage")?.select(node.id);
 			};
 			return (_ctx, _cache) => {
-				return nodes.value.length === 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$39, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(path.value, (item, index) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.id }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
-						link: "",
-						disabled: item.id === node.value?.id,
-						onClick: ($event) => select(item)
+				return nodes.value.length === 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					ref_key: "containerRef",
+					ref: containerRef,
+					class: "m-editor-breadcrumb"
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(displayPath.value, (item, index) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.isEllipsis ? `ellipsis-${index}` : item.id }, [item.isEllipsis ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$39, "...")) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+						key: 1,
+						content: item.name,
+						placement: "top",
+						"show-after": 500
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.name), 1)]),
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+							class: "m-editor-breadcrumb-item",
+							link: "",
+							disabled: item.id === node.value?.id,
+							onClick: ($event) => select(item)
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.name), 1)]),
+							_: 2
+						}, 1032, ["disabled", "onClick"])]),
 						_: 2
-					}, 1032, ["disabled", "onClick"]), index < path.value.length - 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$12, "/")) : (0, vue.createCommentVNode)("v-if", true)], 64);
-				}), 128))])) : (0, vue.createCommentVNode)("v-if", true);
+					}, 1032, ["content"])), index < displayPath.value.length - 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$12, "/")) : (0, vue.createCommentVNode)("v-if", true)], 64);
+				}), 128))], 512)) : (0, vue.createCommentVNode)("v-if", true);
 			};
 		}
 	});
@@ -12771,7 +12958,10 @@
 						"disabled-stage-overlay": __props.disabledStageOverlay,
 						"stage-content-menu": __props.stageContentMenu,
 						"custom-content-menu": __props.customContentMenu
-					}, null, 8, [
+					}, {
+						"stage-top": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage-top")]),
+						_: 3
+					}, 8, [
 						"stage-options",
 						"disabled-stage-overlay",
 						"stage-content-menu",
@@ -13201,7 +13391,7 @@
 	var dataSource_default = new DataSource();
 	//#endregion
 	//#region packages/editor/src/utils/dep/worker.ts?worker&inline
-	var jsContent = "(function() {\n	//#region packages/schema/src/index.ts\n	const NODE_CONDS_KEY = \"displayConds\";\n	const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n	const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n	let HookType = /* @__PURE__ */ function(HookType) {\n		/** 代码块钩子标识 */\n		HookType[\"CODE\"] = \"code\";\n		return HookType;\n	}({});\n	//#endregion\n	//#region packages/utils/src/const.ts\n	const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n	//#endregion\n	//#region packages/utils/src/index.ts\n	const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n	const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n	const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n	//#endregion\n	//#region packages/dep/src/types.ts\n	/** 依赖收集的目标类型 */\n	let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n		DepTargetType[\"DEFAULT\"] = \"default\";\n		/** 代码块 */\n		DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n		/** 数据源 */\n		DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n		/** 数据源方法 */\n		DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n		/** 数据源条件 */\n		DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n		return DepTargetType;\n	}({});\n	//#endregion\n	//#region packages/dep/src/Target.ts\n	/**\n	* 需要收集依赖的目标\n	* 例如：一个代码块可以为一个目标\n	*/\n	var Target = class {\n		/**\n		* 如何识别目标\n		*/\n		isTarget;\n		/**\n		* 目标id，不可重复\n		* 例如目标是代码块，则为代码块id\n		*/\n		id;\n		/**\n		* 目标名称，用于显示在依赖列表中\n		*/\n		name;\n		/**\n		* 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type\n		*/\n		type = DepTargetType.DEFAULT;\n		/**\n		* 依赖详情\n		* 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n		*/\n		deps = {};\n		/**\n		* 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集\n		*/\n		isCollectByDefault;\n		constructor(options) {\n			this.isTarget = options.isTarget;\n			this.id = options.id;\n			this.name = options.name;\n			this.isCollectByDefault = options.isCollectByDefault ?? true;\n			if (options.type) this.type = options.type;\n			if (options.initialDeps) this.deps = options.initialDeps;\n		}\n		/**\n		* 更新依赖\n		* @param option 节点配置\n		* @param key 哪个key配置了这个目标的id\n		*/\n		updateDep({ id, name, key, data }) {\n			const dep = this.deps[id] || {\n				name,\n				keys: []\n			};\n			dep.name = name;\n			dep.data = data;\n			this.deps[id] = dep;\n			if (!dep.keys.includes(key)) dep.keys.push(key);\n		}\n		/**\n		* 删除依赖\n		* @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖\n		* @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key\n		* @returns void\n		*/\n		removeDep(id, key) {\n			if (typeof id === \"undefined\") {\n				Object.keys(this.deps).forEach((depKey) => {\n					delete this.deps[depKey];\n				});\n				return;\n			}\n			const dep = this.deps[id];\n			if (!dep) return;\n			if (key) {\n				const index = dep.keys.indexOf(key);\n				dep.keys.splice(index, 1);\n				if (dep.keys.length === 0) delete this.deps[id];\n			} else delete this.deps[id];\n		}\n		/**\n		* 判断指定节点下的指定key是否存在在依赖列表中\n		* @param node 哪个节点\n		* @param key 哪个key\n		* @returns boolean\n		*/\n		hasDep(id, key) {\n			return this.deps[id]?.keys.includes(key) ?? false;\n		}\n		destroy() {\n			this.deps = {};\n		}\n	};\n	//#endregion\n	//#region packages/dep/src/utils.ts\n	const INTEGER_REGEXP = /^\\d+$/;\n	const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n		type: DepTargetType.CODE_BLOCK,\n		id,\n		initialDeps,\n		name: codeBlock.name,\n		isTarget: (_key, value) => {\n			if (id === value) return true;\n			if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n			return false;\n		}\n	});\n	/**\n	* ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n	* ['array', 'a'] 这种返回true\n	* @param keys\n	* @param fields\n	* @returns boolean\n	*/\n	const isIncludeArrayField = (keys, fields) => {\n		let f = fields;\n		return keys.some((key, index) => {\n			const field = f.find(({ name }) => name === key);\n			f = field?.fields || [];\n			return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n		});\n	};\n	/**\n	* 判断模板(value)是不是使用数据源Id(dsId)，如：`xxx${dsId.field}xxx${dsId.field}`\n	* @param value any\n	* @param dsId string | number\n	* @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n	* @returns boolean\n	*/\n	const isDataSourceTemplate = (value, ds, hasArray = false) => {\n		const templates = value.match(dataSourceTemplateRegExp) || [];\n		if (templates.length <= 0) return false;\n		for (const tpl of templates) {\n			const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n			const dsId = keys.shift();\n			if (!dsId || dsId !== ds.id) continue;\n			if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n		}\n		return false;\n	};\n	/**\n	* 指定数据源的字符串模板,如：{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n	* @param value any\n	* @param dsId string | number\n	* @returns boolean\n	*/\n	const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n	/**\n	* 关联数据源字段，格式为 [前缀+数据源ID, 字段名]\n	* 使用data-source-field-select value: 'value' 可以配置出来\n	* @param value any[]\n	* @param id string | number\n	* @returns boolean\n	*/\n	const isUseDataSourceField = (value, id) => {\n		if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n		const [prefixId] = value;\n		const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n		if (prefixIndex === -1) return false;\n		return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n	};\n	const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n		if (!value) return false;\n		const valueType = typeof value;\n		if (valueType !== \"string\" && valueType !== \"object\") return false;\n		if (`${key}`.startsWith(\"displayConds\")) return false;\n		if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n		if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n		if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n		if (isUseDataSourceField(value, ds.id)) {\n			const [, ...keys] = value;\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n		if (!Array.isArray(value) || !ds) return false;\n		const [dsId, ...keys] = value;\n		if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n		if (ds.fields?.some((field) => field.name === keys[0])) {\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n	});\n	const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_COND,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n	});\n	const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_METHOD,\n		id: ds.id,\n		initialDeps,\n		isTarget: (_key, value) => {\n			if (!Array.isArray(value)) return false;\n			const [dsId, methodName] = value;\n			if (!methodName || dsId !== ds.id) return false;\n			if (ds.methods?.some((method) => method.name === methodName)) return true;\n			if (ds.fields?.some((field) => field.name === methodName)) return false;\n			return true;\n		}\n	});\n	const traverseTarget = (targetsList, cb, type) => {\n		if (type) {\n			const targets = targetsList[type];\n			if (targets) for (const target of Object.values(targets)) cb(target);\n			return;\n		}\n		for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n	};\n	//#endregion\n	//#region packages/dep/src/Watcher.ts\n	const DATA_SOURCE_TARGET_TYPES = new Set([\n		DepTargetType.DATA_SOURCE,\n		DepTargetType.DATA_SOURCE_COND,\n		DepTargetType.DATA_SOURCE_METHOD\n	]);\n	var Watcher = class {\n		targetsList = {};\n		childrenProp = \"items\";\n		idProp = \"id\";\n		nameProp = \"name\";\n		constructor(options) {\n			if (options?.initialTargets) this.targetsList = options.initialTargets;\n			if (options?.childrenProp) this.childrenProp = options.childrenProp;\n		}\n		getTargetsList() {\n			return this.targetsList;\n		}\n		/**\n		* 获取指定类型中的所有target\n		* @param type 分类\n		* @returns Target[]\n		*/\n		getTargets(type = DepTargetType.DEFAULT) {\n			return this.targetsList[type] || {};\n		}\n		/**\n		* 添加新的目标\n		* @param target Target\n		*/\n		addTarget(target) {\n			const targets = this.getTargets(target.type) || {};\n			this.targetsList[target.type] = targets;\n			targets[target.id] = target;\n		}\n		/**\n		* 获取指定id的target\n		* @param id target id\n		* @returns Target\n		*/\n		getTarget(id, type = DepTargetType.DEFAULT) {\n			return this.getTargets(type)[id];\n		}\n		/**\n		* 判断是否存在指定id的target\n		* @param id target id\n		* @returns boolean\n		*/\n		hasTarget(id, type = DepTargetType.DEFAULT) {\n			return Boolean(this.getTarget(id, type));\n		}\n		/**\n		* 判断是否存在指定类型的target\n		* @param type target type\n		* @returns boolean\n		*/\n		hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n			return Object.keys(this.getTargets(type)).length > 0;\n		}\n		/**\n		* 删除指定id的target\n		* @param id target id\n		*/\n		removeTarget(id, type = DepTargetType.DEFAULT) {\n			const targets = this.getTargets(type);\n			if (targets[id]) {\n				targets[id].destroy();\n				delete targets[id];\n			}\n		}\n		/**\n		* 删除指定分类的所有target\n		* @param type 分类\n		* @returns void\n		*/\n		removeTargets(type = DepTargetType.DEFAULT) {\n			const targets = this.targetsList[type];\n			if (!targets) return;\n			for (const target of Object.values(targets)) target.destroy();\n			delete this.targetsList[type];\n		}\n		/**\n		* 删除所有target\n		*/\n		clearTargets() {\n			for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n		}\n		/**\n		* 收集依赖\n		* @param nodes 需要收集的节点\n		* @param deep 是否需要收集子节点\n		* @param type 强制收集指定类型的依赖\n		*/\n		collect(nodes, depExtendedData = {}, deep = false, type) {\n			this.collectByCallback(nodes, type, ({ node, target }) => {\n				this.removeTargetDep(target, node);\n				this.collectItem(node, target, depExtendedData, deep);\n			});\n		}\n		collectByCallback(nodes, type, cb) {\n			traverseTarget(this.targetsList, (target) => {\n				if (!type && !target.isCollectByDefault) return;\n				for (const node of nodes) cb({\n					node,\n					target\n				});\n			}, type);\n		}\n		/**\n		* 清除所有目标的依赖\n		* @param nodes 需要清除依赖的节点\n		*/\n		clear(nodes, type) {\n			let { targetsList } = this;\n			if (type) targetsList = { [type]: this.getTargets(type) };\n			const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n			traverseTarget(targetsList, (target) => {\n				if (nodes) for (const node of nodes) {\n					target.removeDep(node[this.idProp]);\n					if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n						clearedItemsNodeIds.add(node[this.idProp]);\n						this.clear(node[this.childrenProp]);\n					}\n				}\n				else target.removeDep();\n			});\n		}\n		/**\n		* 清除指定类型的依赖\n		* @param type 类型\n		* @param nodes 需要清除依赖的节点\n		*/\n		clearByType(type, nodes) {\n			this.clear(nodes, type);\n		}\n		collectItem(node, target, depExtendedData = {}, deep = false) {\n			if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n			if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n			const collectTarget = (config, prop = \"\") => {\n				const doCollect = (key, value) => {\n					const keyIsItems = key === this.childrenProp;\n					const fullKey = prop ? `${prop}.${key}` : key;\n					if (target.isTarget(fullKey, value)) target.updateDep({\n						id: node[this.idProp],\n						name: `${node[this.nameProp] || node[this.idProp]}`,\n						data: depExtendedData,\n						key: fullKey\n					});\n					else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n						const item = value[i];\n						if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n					}\n					else if (isObject(value)) collectTarget(value, fullKey);\n					if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n				};\n				for (const [key, value] of Object.entries(config)) {\n					if (typeof value === \"undefined\" || value === \"\") continue;\n					doCollect(key, value);\n				}\n			};\n			collectTarget(node);\n		}\n		removeTargetDep(target, node, key) {\n			target.removeDep(node[this.idProp], key);\n			if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n		}\n	};\n	//#endregion\n	//#region packages/editor/src/utils/logger.ts\n	const error = (...args) => {\n		console.error(\"magic editor: \", ...args);\n	};\n	//#endregion\n	//#region packages/editor/src/utils/dep/worker.ts\n	onmessage = (e) => {\n		const watcher = new Watcher({ initialTargets: {} });\n		const { dsl } = e.data;\n		try {\n			const mApp = eval(`(${dsl})`);\n			if (!mApp) postMessage({});\n			watcher.clearTargets();\n			if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n			if (mApp.dataSources) for (const ds of mApp.dataSources) {\n				watcher.addTarget(createDataSourceTarget(ds, {}));\n				watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n				watcher.addTarget(createDataSourceCondTarget(ds, {}));\n			}\n			watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n				watcher.collectItem(node, target, { pageId: node.id }, true);\n			});\n			const data = {\n				[DepTargetType.DATA_SOURCE]: {},\n				[DepTargetType.DATA_SOURCE_METHOD]: {},\n				[DepTargetType.DATA_SOURCE_COND]: {},\n				[DepTargetType.CODE_BLOCK]: {}\n			};\n			traverseTarget(watcher.getTargetsList(), (target) => {\n				data[target.type][target.id] = target.deps;\n			});\n			postMessage(data);\n		} catch (e) {\n			error(e);\n			postMessage({});\n		}\n	};\n	//#endregion\n})();\n";
+	var jsContent = "(function() {\n	//#region packages/schema/src/index.ts\n	const NODE_CONDS_KEY = \"displayConds\";\n	const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n	const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n	let HookType = /* @__PURE__ */ function(HookType) {\n		/** 代码块钩子标识 */\n		HookType[\"CODE\"] = \"code\";\n		return HookType;\n	}({});\n	//#endregion\n	//#region packages/utils/src/const.ts\n	const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n	//#endregion\n	//#region packages/utils/src/index.ts\n	const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n	const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n	const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n	//#endregion\n	//#region packages/dep/src/types.ts\n	/** 依赖收集的目标类型 */\n	let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n		DepTargetType[\"DEFAULT\"] = \"default\";\n		/** 代码块 */\n		DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n		/** 数据源 */\n		DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n		/** 数据源方法 */\n		DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n		/** 数据源条件 */\n		DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n		return DepTargetType;\n	}({});\n	//#endregion\n	//#region packages/dep/src/Target.ts\n	/**\n	* 需要收集依赖的目标\n	* 例如：一个代码块可以为一个目标\n	*/\n	var Target = class {\n		/**\n		* 如何识别目标\n		*/\n		isTarget;\n		/**\n		* 目标id，不可重复\n		* 例如目标是代码块，则为代码块id\n		*/\n		id;\n		/**\n		* 目标名称，用于显示在依赖列表中\n		*/\n		name;\n		/**\n		* 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type\n		*/\n		type = DepTargetType.DEFAULT;\n		/**\n		* 依赖详情\n		* 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n		*/\n		deps = {};\n		/**\n		* 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集\n		*/\n		isCollectByDefault;\n		constructor(options) {\n			this.isTarget = options.isTarget;\n			this.id = options.id;\n			this.name = options.name;\n			this.isCollectByDefault = options.isCollectByDefault ?? true;\n			if (options.type) this.type = options.type;\n			if (options.initialDeps) this.deps = options.initialDeps;\n		}\n		/**\n		* 更新依赖\n		* @param option 节点配置\n		* @param key 哪个key配置了这个目标的id\n		*/\n		updateDep({ id, name, key, data }) {\n			const dep = this.deps[id] || {\n				name,\n				keys: []\n			};\n			dep.name = name;\n			dep.data = data;\n			this.deps[id] = dep;\n			if (!dep.keys.includes(key)) dep.keys.push(key);\n		}\n		/**\n		* 删除依赖\n		* @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖\n		* @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key\n		* @returns void\n		*/\n		removeDep(id, key) {\n			if (typeof id === \"undefined\") {\n				Object.keys(this.deps).forEach((depKey) => {\n					delete this.deps[depKey];\n				});\n				return;\n			}\n			const dep = this.deps[id];\n			if (!dep) return;\n			if (key) {\n				const index = dep.keys.indexOf(key);\n				dep.keys.splice(index, 1);\n				if (dep.keys.length === 0) delete this.deps[id];\n			} else delete this.deps[id];\n		}\n		/**\n		* 判断指定节点下的指定key是否存在在依赖列表中\n		* @param node 哪个节点\n		* @param key 哪个key\n		* @returns boolean\n		*/\n		hasDep(id, key) {\n			return this.deps[id]?.keys.includes(key) ?? false;\n		}\n		destroy() {\n			this.deps = {};\n		}\n	};\n	//#endregion\n	//#region packages/dep/src/utils.ts\n	const INTEGER_REGEXP = /^\\d+$/;\n	const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n		type: DepTargetType.CODE_BLOCK,\n		id,\n		initialDeps,\n		name: codeBlock.name,\n		isTarget: (_key, value) => {\n			if (id === value) return true;\n			if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n			return false;\n		}\n	});\n	/**\n	* ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n	* ['array', 'a'] 这种返回true\n	* @param keys\n	* @param fields\n	* @returns boolean\n	*/\n	const isIncludeArrayField = (keys, fields) => {\n		let f = fields;\n		return keys.some((key, index) => {\n			const field = f.find(({ name }) => name === key);\n			f = field?.fields || [];\n			return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n		});\n	};\n	/**\n	* 判断模板(value)是不是使用数据源Id(dsId)，如：`xxx${dsId.field}xxx${dsId.field}`\n	* @param value any\n	* @param dsId string | number\n	* @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n	* @returns boolean\n	*/\n	const isDataSourceTemplate = (value, ds, hasArray = false) => {\n		const templates = value.match(dataSourceTemplateRegExp) || [];\n		if (templates.length <= 0) return false;\n		for (const tpl of templates) {\n			const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n			const dsId = keys.shift();\n			if (!dsId || dsId !== ds.id) continue;\n			if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n		}\n		return false;\n	};\n	/**\n	* 指定数据源的字符串模板,如：{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n	* @param value any\n	* @param dsId string | number\n	* @returns boolean\n	*/\n	const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n	/**\n	* 关联数据源字段，格式为 [前缀+数据源ID, 字段名]\n	* 使用data-source-field-select value: 'value' 可以配置出来\n	* @param value any[]\n	* @param id string | number\n	* @returns boolean\n	*/\n	const isUseDataSourceField = (value, id) => {\n		if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n		const [prefixId] = value;\n		const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n		if (prefixIndex === -1) return false;\n		return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n	};\n	const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n		if (!value) return false;\n		const valueType = typeof value;\n		if (valueType !== \"string\" && valueType !== \"object\") return false;\n		if (`${key}`.startsWith(\"displayConds\")) return false;\n		if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n		if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n		if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n		if (isUseDataSourceField(value, ds.id)) {\n			const [, ...keys] = value;\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n		if (!Array.isArray(value) || !ds) return false;\n		const [dsId, ...keys] = value;\n		if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n		if (ds.fields?.some((field) => field.name === keys[0])) {\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n	});\n	const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_COND,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n	});\n	const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_METHOD,\n		id: ds.id,\n		initialDeps,\n		isTarget: (_key, value) => {\n			if (!Array.isArray(value)) return false;\n			const [dsId, methodName] = value;\n			if (!methodName || dsId !== ds.id) return false;\n			if (ds.methods?.some((method) => method.name === methodName)) return true;\n			if (ds.fields?.some((field) => field.name === methodName)) return false;\n			return true;\n		}\n	});\n	const traverseTarget = (targetsList, cb, type) => {\n		if (type) {\n			const targets = targetsList[type];\n			if (targets) for (const target of Object.values(targets)) cb(target);\n			return;\n		}\n		for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n	};\n	//#endregion\n	//#region packages/dep/src/Watcher.ts\n	const DATA_SOURCE_TARGET_TYPES = new Set([\n		DepTargetType.DATA_SOURCE,\n		DepTargetType.DATA_SOURCE_COND,\n		DepTargetType.DATA_SOURCE_METHOD\n	]);\n	var Watcher = class {\n		targetsList = {};\n		childrenProp = \"items\";\n		idProp = \"id\";\n		nameProp = \"name\";\n		constructor(options) {\n			if (options?.initialTargets) this.targetsList = options.initialTargets;\n			if (options?.childrenProp) this.childrenProp = options.childrenProp;\n		}\n		getTargetsList() {\n			return this.targetsList;\n		}\n		/**\n		* 获取指定类型中的所有target\n		* @param type 分类\n		* @returns Target[]\n		*/\n		getTargets(type = DepTargetType.DEFAULT) {\n			return this.targetsList[type] || {};\n		}\n		/**\n		* 添加新的目标\n		* @param target Target\n		*/\n		addTarget(target) {\n			const targets = this.getTargets(target.type) || {};\n			this.targetsList[target.type] = targets;\n			targets[target.id] = target;\n		}\n		/**\n		* 获取指定id的target\n		* @param id target id\n		* @returns Target\n		*/\n		getTarget(id, type = DepTargetType.DEFAULT) {\n			return this.getTargets(type)[id];\n		}\n		/**\n		* 判断是否存在指定id的target\n		* @param id target id\n		* @returns boolean\n		*/\n		hasTarget(id, type = DepTargetType.DEFAULT) {\n			return Boolean(this.getTarget(id, type));\n		}\n		/**\n		* 判断是否存在指定类型的target\n		* @param type target type\n		* @returns boolean\n		*/\n		hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n			return Object.keys(this.getTargets(type)).length > 0;\n		}\n		/**\n		* 删除指定id的target\n		* @param id target id\n		*/\n		removeTarget(id, type = DepTargetType.DEFAULT) {\n			const targets = this.getTargets(type);\n			if (targets[id]) {\n				targets[id].destroy();\n				delete targets[id];\n			}\n		}\n		/**\n		* 删除指定分类的所有target\n		* @param type 分类\n		* @returns void\n		*/\n		removeTargets(type = DepTargetType.DEFAULT) {\n			const targets = this.targetsList[type];\n			if (!targets) return;\n			for (const target of Object.values(targets)) target.destroy();\n			delete this.targetsList[type];\n		}\n		/**\n		* 删除所有target\n		*/\n		clearTargets() {\n			for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n		}\n		/**\n		* 收集依赖\n		* @param nodes 需要收集的节点\n		* @param deep 是否需要收集子节点\n		* @param type 强制收集指定类型的依赖\n		*/\n		collect(nodes, depExtendedData = {}, deep = false, type) {\n			this.collectByCallback(nodes, type, ({ node, target }) => {\n				this.removeTargetDep(target, node);\n				this.collectItem(node, target, depExtendedData, deep);\n			});\n		}\n		collectByCallback(nodes, type, cb) {\n			traverseTarget(this.targetsList, (target) => {\n				if (!type && !target.isCollectByDefault) return;\n				for (const node of nodes) cb({\n					node,\n					target\n				});\n			}, type);\n		}\n		/**\n		* 清除所有目标的依赖\n		* @param nodes 需要清除依赖的节点\n		*/\n		clear(nodes, type) {\n			let { targetsList } = this;\n			if (type) targetsList = { [type]: this.getTargets(type) };\n			const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n			traverseTarget(targetsList, (target) => {\n				if (nodes) for (const node of nodes) {\n					target.removeDep(node[this.idProp]);\n					if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n						clearedItemsNodeIds.add(node[this.idProp]);\n						this.clear(node[this.childrenProp]);\n					}\n				}\n				else target.removeDep();\n			});\n		}\n		/**\n		* 清除指定类型的依赖\n		* @param type 类型\n		* @param nodes 需要清除依赖的节点\n		*/\n		clearByType(type, nodes) {\n			this.clear(nodes, type);\n		}\n		collectItem(node, target, depExtendedData = {}, deep = false) {\n			if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n			if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n			const collectTarget = (config, prop = \"\") => {\n				const doCollect = (key, value) => {\n					const keyIsItems = key === this.childrenProp;\n					const fullKey = prop ? `${prop}.${key}` : key;\n					if (target.isTarget(fullKey, value)) target.updateDep({\n						id: node[this.idProp],\n						name: `${node[this.nameProp] || node[this.idProp]}`,\n						data: depExtendedData,\n						key: fullKey\n					});\n					else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n						const item = value[i];\n						if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n					}\n					else if (isObject(value)) collectTarget(value, fullKey);\n					if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n				};\n				for (const [key, value] of Object.entries(config)) {\n					if (typeof value === \"undefined\" || value === \"\") continue;\n					doCollect(key, value);\n				}\n			};\n			collectTarget(node);\n		}\n		removeTargetDep(target, node, key) {\n			target.removeDep(node[this.idProp], key);\n			if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n		}\n	};\n	//#endregion\n	//#region packages/editor/src/utils/logger.ts\n	const error = (...args) => {\n		if (process.env.NODE_ENV === \"development\") console.error(\"magic editor: \", ...args);\n	};\n	//#endregion\n	//#region packages/editor/src/utils/dep/worker.ts\n	onmessage = (e) => {\n		const watcher = new Watcher({ initialTargets: {} });\n		const { dsl } = e.data;\n		try {\n			const mApp = eval(`(${dsl})`);\n			if (!mApp) postMessage({});\n			watcher.clearTargets();\n			if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n			if (mApp.dataSources) for (const ds of mApp.dataSources) {\n				watcher.addTarget(createDataSourceTarget(ds, {}));\n				watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n				watcher.addTarget(createDataSourceCondTarget(ds, {}));\n			}\n			watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n				watcher.collectItem(node, target, { pageId: node.id }, true);\n			});\n			const data = {\n				[DepTargetType.DATA_SOURCE]: {},\n				[DepTargetType.DATA_SOURCE_METHOD]: {},\n				[DepTargetType.DATA_SOURCE_COND]: {},\n				[DepTargetType.CODE_BLOCK]: {}\n			};\n			traverseTarget(watcher.getTargetsList(), (target) => {\n				data[target.type][target.id] = target.deps;\n			});\n			postMessage(data);\n		} catch (e) {\n			error(e);\n			postMessage({});\n		}\n	};\n	//#endregion\n})();\n";
 	var blob = typeof self !== "undefined" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", jsContent], { type: "text/javascript;charset=utf-8" });
 	function WorkerWrapper(options) {
 		let objURL;
@@ -13775,6 +13965,7 @@
 	var defaultEditorProps = {
 		renderType: _tmagic_stage.RenderType.IFRAME,
 		disabledMultiSelect: false,
+		alwaysMultiSelect: false,
 		disabledPageFragment: false,
 		disabledStageOverlay: false,
 		containerHighlightClassName: _tmagic_stage.CONTAINER_HIGHLIGHT_CLASS_NAME,
@@ -13810,6 +14001,9 @@
 		(0, vue.watch)(() => props.disabledMultiSelect, (disabledMultiSelect) => {
 			editorService.set("disabledMultiSelect", disabledMultiSelect || false);
 		}, { immediate: true });
+		(0, vue.watch)(() => props.alwaysMultiSelect, (alwaysMultiSelect) => {
+			editorService.set("alwaysMultiSelect", alwaysMultiSelect || false);
+		}, { immediate: true });
 		(0, vue.watch)(() => props.componentGroupList, (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList), { immediate: true });
 		(0, vue.watch)(() => props.datasourceList, (datasourceList) => datasourceList && dataSourceService.set("datasourceTypeList", datasourceList), { immediate: true });
 		(0, vue.watch)(() => props.propsConfigs, (configs) => configs && propsService.setPropsConfigs(configs), { immediate: true });
@@ -14219,6 +14413,7 @@
 			disabledDragStart: { type: Boolean },
 			guidesOptions: {},
 			disabledMultiSelect: { type: Boolean },
+			alwaysMultiSelect: { type: Boolean },
 			disabledPageFragment: { type: Boolean },
 			disabledStageOverlay: { type: Boolean },
 			disabledShowSrc: { type: Boolean },
@@ -14231,7 +14426,10 @@
 			canSelect: { type: Function },
 			isContainer: { type: Function },
 			customContentMenu: { type: Function },
+			layerNodeIsExpandable: { type: Function },
+			canDropIn: { type: Function },
 			beforeDblclick: { type: Function },
+			beforeLayerNodeDblclick: { type: Function },
 			extendFormState: { type: Function },
 			pageBarSortOptions: {},
 			pageFilterFunction: { type: Function }
@@ -14241,7 +14439,8 @@
 			"props-panel-unmounted",
 			"update:modelValue",
 			"props-form-error",
-			"props-submit-error"
+			"props-submit-error",
+			"layer-node-dblclick"
 		],
 		setup(__props, { expose: __expose, emit: __emit }) {
 			const emit = __emit;
@@ -14272,6 +14471,7 @@
 				canSelect: props.canSelect,
 				updateDragEl: props.updateDragEl,
 				isContainer: props.isContainer,
+				canDropIn: props.canDropIn ? (sourceIds, targetId) => props.canDropIn(sourceIds, targetId, sourceIds.length === 0 ? "stage-add" : "stage-drag") : void 0,
 				containerHighlightClassName: props.containerHighlightClassName,
 				containerHighlightDuration: props.containerHighlightDuration,
 				containerHighlightType: props.containerHighlightType,
@@ -14279,6 +14479,7 @@
 				renderType: props.renderType,
 				guidesOptions: props.guidesOptions,
 				disabledMultiSelect: props.disabledMultiSelect,
+				alwaysMultiSelect: props.alwaysMultiSelect,
 				beforeDblclick: props.beforeDblclick
 			};
 			stageOverlay_default.set("stageOptions", stageOptions);
@@ -14298,6 +14499,9 @@
 			const propsPanelFormErrorHandler = (e) => {
 				emit("props-form-error", e);
 			};
+			const layerNodeDblclickHandler = (event, data) => {
+				emit("layer-node-dblclick", event, data);
+			};
 			__expose(services);
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Framework_default, {
@@ -14314,7 +14518,11 @@
 						"layer-content-menu": __props.layerContentMenu,
 						"custom-content-menu": __props.customContentMenu,
 						indent: __props.treeIndent,
-						"next-level-indent-increment": __props.treeNextLevelIndentIncrement
+						"next-level-indent-increment": __props.treeNextLevelIndentIncrement,
+						"layer-node-is-expandable": __props.layerNodeIsExpandable,
+						"can-drop-in": __props.canDropIn,
+						"before-layer-node-dblclick": __props.beforeLayerNodeDblclick,
+						onLayerNodeDblclick: layerNodeDblclickHandler
 					}, {
 						"layer-panel-header": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "layer-panel-header")]),
 						"layer-node-content": (0, vue.withCtx)(({ data }) => [(0, vue.renderSlot)(_ctx.$slots, "layer-node-content", { data })]),
@@ -14337,13 +14545,17 @@
 						"layer-content-menu",
 						"custom-content-menu",
 						"indent",
-						"next-level-indent-increment"
+						"next-level-indent-increment",
+						"layer-node-is-expandable",
+						"can-drop-in",
+						"before-layer-node-dblclick"
 					])])]),
 					workspace: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "workspace", { editorService: (0, vue.unref)(editor_default) }, () => [(0, vue.createVNode)(Workspace_default, {
 						"disabled-stage-overlay": __props.disabledStageOverlay,
 						"stage-content-menu": __props.stageContentMenu,
 						"custom-content-menu": __props.customContentMenu
 					}, {
+						"stage-top": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage-top")]),
 						stage: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage")]),
 						"workspace-content": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "workspace-content", { editorService: (0, vue.unref)(editor_default) })]),
 						_: 3
@@ -18415,7 +18627,8 @@
 			const collapseValue = (0, vue.shallowRef)(Array(list.length).fill(1).map((x, i) => `${i}`));
 			const change = (v, eventData) => {
 				eventData.changeRecords?.forEach((record) => {
-					record.propPath = `${props.name}.${record.propPath}`;
+					if (props.prop) record.propPath = `${props.prop}.${record.propPath}`;
+					else if (props.name) record.propPath = `${props.name}.${record.propPath}`;
 				});
 				emit("change", v, eventData);
 			};
@@ -18856,6 +19069,7 @@
 	exports.dataSourceService = dataSource_default;
 	exports.debug = debug;
 	exports.default = plugin_default;
+	exports.defaultIsExpandable = defaultIsExpandable;
 	exports.depService = dep_default;
 	Object.defineProperty(exports, "designPlugin", {
 		enumerable: true,