@tmagic/editor 1.7.7 → 1.7.8-beta.2

package/dist/es/layouts/sidebar/layer/use-node-status.js

@@ -0,0 +1,75 @@
+import { updateStatus } from "../../../utils/tree.js";
+import { getNodePath, isPage, isPageFragment, traverseNode } from "@tmagic/utils";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+//#region packages/editor/src/layouts/sidebar/layer/use-node-status.ts
+var createPageNodeStatus = (page, initialLayerNodeStatus) => {
+	const map = /* @__PURE__ */ new Map();
+	map.set(page.id, {
+		visible: true,
+		expand: true,
+		selected: true,
+		draggable: false
+	});
+	page.items.forEach((node) => traverseNode(node, (node) => {
+		map.set(node.id, initialLayerNodeStatus?.get(node.id) || {
+			visible: true,
+			expand: false,
+			selected: false,
+			draggable: true
+		});
+	}));
+	return map;
+};
+var useNodeStatus = ({ editorService }) => {
+	const page = computed(() => editorService.get("page"));
+	const nodes = computed(() => editorService.get("nodes"));
+	/** 所有页面的节点状态 */
+	const nodeStatusMaps = ref(/* @__PURE__ */ new Map());
+	/** 当前页面的节点状态 */
+	const nodeStatusMap = computed(() => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map());
+	watch(() => page.value?.id, (pageId) => {
+		if (!pageId) return;
+		nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
+	}, { immediate: true });
+	watch(nodes, (nodes) => {
+		if (!nodeStatusMap.value) return;
+		for (const [id, status] of nodeStatusMap.value.entries()) {
+			status.selected = nodes.some((node) => node.id === id);
+			if (status.selected) getNodePath(id, page.value?.items).forEach((node) => {
+				updateStatus(nodeStatusMap.value, node.id, { expand: true });
+			});
+		}
+	}, { immediate: true });
+	const addHandler = (newNodes) => {
+		newNodes.forEach((node) => {
+			if (isPage(node) || isPageFragment(node)) return;
+			traverseNode(node, (node) => {
+				nodeStatusMap.value?.set(node.id, {
+					visible: true,
+					expand: Array.isArray(node.items),
+					selected: true,
+					draggable: true
+				});
+			});
+		});
+	};
+	editorService.on("add", addHandler);
+	const removeHandler = (nodes) => {
+		nodes.forEach((node) => {
+			traverseNode(node, (node) => {
+				nodeStatusMap.value?.delete(node.id);
+			});
+		});
+	};
+	editorService.on("remove", removeHandler);
+	onBeforeUnmount(() => {
+		editorService.off("remove", removeHandler);
+		editorService.off("add", addHandler);
+	});
+	return {
+		nodeStatusMaps,
+		nodeStatusMap
+	};
+};
+//#endregion
+export { useNodeStatus };

package/dist/es/layouts/workspace/Breadcrumb.js

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

package/dist/es/layouts/workspace/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+import { useServices } from "../../hooks/use-services.js";
+import { TMagicButton } from "@tmagic/design";
+import { getNodePath } from "@tmagic/utils";
+import { Fragment, computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+//#region packages/editor/src/layouts/workspace/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "m-editor-breadcrumb"
+};
+var _hoisted_2 = { key: 0 };
+var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorBreadcrumb",
+	__name: "Breadcrumb",
+	setup(__props) {
+		const { editorService } = useServices();
+		const node = computed(() => editorService.get("node"));
+		const nodes = computed(() => editorService.get("nodes"));
+		const root = computed(() => editorService.get("root"));
+		const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
+		const select = async (node) => {
+			await editorService.select(node);
+			editorService.get("stage")?.select(node.id);
+		};
+		return (_ctx, _cache) => {
+			return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.id }, [createVNode(unref(TMagicButton), {
+					link: "",
+					disabled: item.id === node.value?.id,
+					onClick: ($event) => select(item)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(item.name), 1)]),
+					_: 2
+				}, 1032, ["disabled", "onClick"]), index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2, "/")) : createCommentVNode("v-if", true)], 64);
+			}), 128))])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { Breadcrumb_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/workspace/Workspace.js

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

package/dist/es/layouts/workspace/Workspace.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,43 @@
+import { useServices } from "../../hooks/use-services.js";
+import Stage_default from "./viewer/Stage.js";
+import Breadcrumb_default from "./Breadcrumb.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, renderSlot, unref } from "vue";
+//#region packages/editor/src/layouts/workspace/Workspace.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-workspace" };
+var Workspace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorWorkspace",
+	__name: "Workspace",
+	props: {
+		stageContentMenu: {},
+		disabledStageOverlay: {
+			type: Boolean,
+			default: false
+		},
+		customContentMenu: {}
+	},
+	setup(__props) {
+		const stageOptions = inject("stageOptions");
+		const { editorService } = useServices();
+		const page = computed(() => editorService.get("page"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(Breadcrumb_default),
+				renderSlot(_ctx.$slots, "stage", {}, () => [page.value && (unref(stageOptions)?.render || unref(stageOptions)?.runtimeUrl) ? (openBlock(), createBlock(Stage_default, {
+					key: 0,
+					"stage-options": unref(stageOptions),
+					"disabled-stage-overlay": __props.disabledStageOverlay,
+					"stage-content-menu": __props.stageContentMenu,
+					"custom-content-menu": __props.customContentMenu
+				}, null, 8, [
+					"stage-options",
+					"disabled-stage-overlay",
+					"stage-content-menu",
+					"custom-content-menu"
+				])) : createCommentVNode("v-if", true)]),
+				renderSlot(_ctx.$slots, "workspace-content")
+			]);
+		};
+	}
+});
+//#endregion
+export { Workspace_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/workspace/viewer/NodeListMenu.js

@@ -0,0 +1,5 @@
+import NodeListMenu_vue_vue_type_script_setup_true_lang_default from "./NodeListMenu.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
+var NodeListMenu_default = NodeListMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { NodeListMenu_default as default };

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

@@ -0,0 +1,88 @@
+import { useServices } from "../../../hooks/use-services.js";
+import { useFilter } from "../../../hooks/use-filter.js";
+import FloatingBox_default from "../../../components/FloatingBox.js";
+import Tree_default from "../../../components/Tree.js";
+import { useNodeStatus } from "../../sidebar/layer/use-node-status.js";
+import { TMagicTooltip } from "@tmagic/design";
+import { getIdFromEl } from "@tmagic/utils";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue?vue&type=script&setup=true&lang.ts
+var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "NodeListMenu",
+	setup(__props) {
+		const services = useServices();
+		const { editorService } = services;
+		const visible = ref(false);
+		const buttonVisible = ref(false);
+		const buttonEl = useTemplateRef("button");
+		const boxRef = useTemplateRef("box");
+		const stage = computed(() => editorService.get("stage"));
+		const page = computed(() => editorService.get("page"));
+		const nodes = computed(() => editorService.get("nodes"));
+		const nodeData = computed(() => !page.value ? [] : [page.value]);
+		const { nodeStatusMap } = useNodeStatus(services);
+		const filterNodeMethod = (value, data) => data.id === value;
+		const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
+		const unWatch = watch(stage, (stage) => {
+			if (!stage) return;
+			nextTick(() => unWatch());
+			stage.on("select", (el, event) => {
+				const ids = (stage.renderer?.getElementsFromPoint(event) || []).map((el) => getIdFromEl()(el)).filter((id) => Boolean(id));
+				buttonVisible.value = ids.length > 3;
+				filterTextChangeHandler(ids);
+			});
+		}, { immediate: true });
+		watch(nodes, (nodes) => {
+			if (!nodeStatusMap.value) return;
+			for (const [id, status] of nodeStatusMap.value.entries()) status.selected = nodes.some((node) => node.id === id);
+		}, { immediate: true });
+		const clickHandler = async (event, data) => {
+			await editorService.select(data.id);
+			stage.value?.select(data.id);
+		};
+		const menuPosition = ref({
+			left: 0,
+			top: 0
+		});
+		watch(visible, async (visible) => {
+			if (!buttonEl.value || !visible) return;
+			await nextTick();
+			const rect = buttonEl.value.getBoundingClientRect();
+			const height = boxRef.value?.target?.clientHeight || 0;
+			menuPosition.value = {
+				left: rect.left + rect.width + 5,
+				top: rect.top - height / 2 + rect.height / 2
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [page.value && buttonVisible.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+				key: 0,
+				content: "点击查看当前位置下的组件"
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref: "button",
+					class: "m-editor-stage-float-button",
+					onClick: _cache[0] || (_cache[0] = ($event) => visible.value = true)
+				}, "可选组件", 512)]),
+				_: 1
+			})) : createCommentVNode("v-if", true), page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(FloatingBox_default, {
+				key: 1,
+				ref: "box",
+				visible: visible.value,
+				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+				title: "当前位置下的组件",
+				position: menuPosition.value
+			}, {
+				body: withCtx(() => [createVNode(Tree_default, {
+					class: "m-editor-node-list-menu magic-editor-layer-tree",
+					data: nodeData.value,
+					"node-status-map": unref(nodeStatusMap),
+					onNodeClick: clickHandler
+				}, null, 8, ["data", "node-status-map"])]),
+				_: 1
+			}, 8, ["visible", "position"])) : createCommentVNode("v-if", true)], 64);
+		};
+	}
+});
+//#endregion
+export { NodeListMenu_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/workspace/viewer/Stage.js

@@ -0,0 +1,5 @@
+import Stage_vue_vue_type_script_setup_true_lang_default from "./Stage.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/workspace/viewer/Stage.vue
+var Stage_default = Stage_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Stage_default as default };

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

@@ -0,0 +1,206 @@
+import { DragType, Layout } from "../../../type.js";
+import { getEditorConfig } from "../../../utils/config.js";
+import { useStage } from "../../../hooks/use-stage.js";
+import { useServices } from "../../../hooks/use-services.js";
+import { KeyBindingContainerKey } from "../../../utils/keybinding-config.js";
+import ScrollViewer_default from "../../../components/ScrollViewer.js";
+import NodeListMenu_default from "./NodeListMenu.js";
+import StageOverlay_default from "./StageOverlay.js";
+import ViewerMenu_default from "./ViewerMenu.js";
+import { getOffset } from "@tmagic/stage";
+import { calcValueByFontsize, getIdFromEl } from "@tmagic/utils";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeStyle, onBeforeUnmount, onMounted, openBlock, resolveDirective, useTemplateRef, watch, watchEffect, withCtx, withDirectives } from "vue";
+//#region packages/editor/src/layouts/workspace/viewer/Stage.vue?vue&type=script&setup=true&lang.ts
+var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorStage",
+	__name: "Stage",
+	props: {
+		stageOptions: {},
+		stageContentMenu: {},
+		disabledStageOverlay: {
+			type: Boolean,
+			default: false
+		},
+		customContentMenu: {}
+	},
+	setup(__props) {
+		const props = __props;
+		let stage = null;
+		let runtime = null;
+		const { editorService, uiService, keybindingService } = useServices();
+		const stageLoading = computed(() => editorService.get("stageLoading"));
+		const stageWrapRef = useTemplateRef("stageWrap");
+		const stageContainerEl = useTemplateRef("stageContainer");
+		const menuRef = useTemplateRef("menu");
+		const nodes = computed(() => editorService.get("nodes"));
+		const isMultiSelect = computed(() => nodes.value.length > 1);
+		const stageRect = computed(() => uiService.get("stageRect"));
+		const stageContainerRect = computed(() => uiService.get("stageContainerRect"));
+		const root = computed(() => editorService.get("root"));
+		const page = computed(() => editorService.get("page"));
+		const zoom = computed(() => uiService.get("zoom"));
+		const node = computed(() => editorService.get("node"));
+		watchEffect(() => {
+			if (stage || !page.value) return;
+			if (!stageContainerEl.value) return;
+			if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
+			stage = useStage(props.stageOptions);
+			stage.on("select", () => {
+				stageWrapRef.value?.container?.focus();
+			});
+			editorService.set("stage", markRaw(stage));
+			stage.mount(stageContainerEl.value);
+			if (!node.value?.id) return;
+			stage.on("runtime-ready", (rt) => {
+				runtime = rt;
+			});
+		});
+		onBeforeUnmount(() => {
+			stage?.destroy();
+			editorService.set("stage", null);
+		});
+		watch(zoom, (zoom) => {
+			if (!stage || !zoom) return;
+			stage.setZoom(zoom);
+		});
+		let timeoutId = null;
+		watch(page, (page) => {
+			if (runtime && page) {
+				editorService.set("stageLoading", true);
+				if (timeoutId) globalThis.clearTimeout(timeoutId);
+				timeoutId = globalThis.setTimeout(() => {
+					editorService.set("stageLoading", false);
+					timeoutId = null;
+				}, 3e3);
+				runtime.updatePageId?.(page.id);
+				const unWatch = watch(stageLoading, () => {
+					if (stageLoading.value) return;
+					nextTick(() => {
+						stage?.select(page.id);
+						unWatch();
+					});
+				}, { immediate: true });
+			}
+		});
+		const resizeObserver = new globalThis.ResizeObserver((entries) => {
+			for (const { contentRect } of entries) uiService.set("stageContainerRect", {
+				width: contentRect.width,
+				height: contentRect.height
+			});
+		});
+		onMounted(() => {
+			if (stageWrapRef.value?.container) {
+				resizeObserver.observe(stageWrapRef.value.container);
+				keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
+			}
+		});
+		onBeforeUnmount(() => {
+			stage?.destroy();
+			stage = null;
+			resizeObserver.disconnect();
+			editorService.set("stage", null);
+			keybindingService.unregisterEl("stage");
+		});
+		const parseDSL = getEditorConfig("parseDSL");
+		const contextmenuHandler = (e) => {
+			e.preventDefault();
+			menuRef.value?.show(e);
+		};
+		const dragoverHandler = (e) => {
+			if (!e.dataTransfer) return;
+			e.preventDefault();
+			e.dataTransfer.dropEffect = "move";
+		};
+		const dropHandler = async (e) => {
+			if (!e.dataTransfer) return;
+			const data = e.dataTransfer.getData("text/json");
+			if (!data) return;
+			const config = parseDSL(`(${data})`);
+			if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
+			e.preventDefault();
+			const doc = stage?.renderer?.contentWindow?.document;
+			const parentEl = doc?.querySelector(`.${props.stageOptions?.containerHighlightClassName}`);
+			let parent = page.value;
+			const parentId = getIdFromEl()(parentEl);
+			if (parentId) parent = editorService.getNodeById(parentId, false);
+			if (parent && stageContainerEl.value && stage) {
+				const layout = await editorService.getLayout(parent);
+				const containerRect = stageContainerEl.value.getBoundingClientRect();
+				const { scrollTop, scrollLeft } = stage.mask;
+				const { style = {} } = config.data;
+				let top = 0;
+				let left = 0;
+				let position = "relative";
+				if (style.position === "fixed") {
+					position = "fixed";
+					top = e.clientY - containerRect.top;
+					left = e.clientX - containerRect.left;
+				} else if (layout === Layout.ABSOLUTE) {
+					position = "absolute";
+					top = e.clientY - containerRect.top + scrollTop;
+					left = e.clientX - containerRect.left + scrollLeft;
+					if (parentEl) {
+						const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+						left = left - parentLeft * zoom.value;
+						top = top - parentTop * zoom.value;
+					}
+				}
+				config.data.style = {
+					...style,
+					position,
+					top: calcValueByFontsize(doc, top / zoom.value),
+					left: calcValueByFontsize(doc, left / zoom.value)
+				};
+				config.data.inputEvent = e;
+				editorService.add(config.data, parent);
+			}
+		};
+		return (_ctx, _cache) => {
+			const _directive_loading = resolveDirective("loading");
+			return withDirectives((openBlock(), createBlock(ScrollViewer_default, {
+				class: "m-editor-stage",
+				ref: "stageWrap",
+				tabindex: "-1",
+				"element-loading-text": "Runtime 加载中...",
+				width: stageRect.value?.width,
+				height: stageRect.value?.height,
+				"wrap-width": stageContainerRect.value?.width,
+				"wrap-height": stageContainerRect.value?.height,
+				zoom: zoom.value,
+				"correction-scroll-size": {
+					width: 60,
+					height: 50
+				},
+				onClick: _cache[0] || (_cache[0] = ($event) => stageWrapRef.value?.container?.focus())
+			}, {
+				content: withCtx(() => [!__props.disabledStageOverlay ? (openBlock(), createBlock(StageOverlay_default, { key: 0 })) : createCommentVNode("v-if", true), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(ViewerMenu_default, {
+					ref: "menu",
+					"is-multi-select": isMultiSelect.value,
+					"stage-content-menu": __props.stageContentMenu,
+					"custom-content-menu": __props.customContentMenu
+				}, null, 8, [
+					"is-multi-select",
+					"stage-content-menu",
+					"custom-content-menu"
+				])]))]),
+				default: withCtx(() => [createElementVNode("div", {
+					class: "m-editor-stage-container",
+					ref: "stageContainer",
+					style: normalizeStyle(`transform: scale(${zoom.value});`),
+					onContextmenu: contextmenuHandler,
+					onDrop: dropHandler,
+					onDragover: dragoverHandler
+				}, null, 36), createVNode(NodeListMenu_default)]),
+				_: 1
+			}, 8, [
+				"width",
+				"height",
+				"wrap-width",
+				"wrap-height",
+				"zoom"
+			])), [[_directive_loading, stageLoading.value]]);
+		};
+	}
+});
+//#endregion
+export { Stage_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/workspace/viewer/StageOverlay.js

@@ -0,0 +1,5 @@
+import StageOverlay_vue_vue_type_script_setup_true_lang_default from "./StageOverlay.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/workspace/viewer/StageOverlay.vue
+var StageOverlay_default = StageOverlay_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StageOverlay_default as default };

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

@@ -0,0 +1,89 @@
+import { useServices } from "../../../hooks/use-services.js";
+import ScrollViewer_default from "../../../components/ScrollViewer.js";
+import { TMagicIcon } from "@tmagic/design";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeStyle, onBeforeUnmount, openBlock, unref, useTemplateRef, watch, withCtx } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/workspace/viewer/StageOverlay.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "m-editor-stage-overlay"
+};
+var StageOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "StageOverlay",
+	setup(__props) {
+		const { stageOverlayService, editorService, uiService } = useServices();
+		const stageOptions = inject("stageOptions");
+		const stageOverlayEl = useTemplateRef("stageOverlay");
+		const stageOverlayVisible = computed(() => stageOverlayService.get("stageOverlayVisible"));
+		const wrapWidth = computed(() => stageOverlayService.get("wrapWidth"));
+		const wrapHeight = computed(() => stageOverlayService.get("wrapHeight"));
+		const stage = computed(() => editorService.get("stage"));
+		const zoom = computed(() => uiService.get("zoom"));
+		const columnWidth = computed(() => uiService.get("columnWidth"));
+		const frameworkRect = computed(() => uiService.get("frameworkRect"));
+		const style = computed(() => ({ transform: `scale(${zoom.value})` }));
+		watch(stage, (stage) => {
+			if (stage) stage.on("dblclick", async (event) => {
+				const el = await stage.actionManager?.getElementFromPoint(event) || null;
+				stageOverlayService.openOverlay(el);
+			});
+			else stageOverlayService.closeOverlay();
+		});
+		watch(zoom, (zoom) => {
+			const stage = stageOverlayService.get("stage");
+			if (!stage || !zoom) return;
+			stage.setZoom(zoom);
+		});
+		watch(stageOverlayEl, (stageOverlay) => {
+			const subStage = stageOverlayService.createStage(stageOptions);
+			stageOverlayService.set("stage", subStage);
+			if (stageOverlay && subStage) {
+				subStage.mount(stageOverlay);
+				const { mask, renderer } = subStage;
+				const { contentWindow } = renderer;
+				mask?.showRule(false);
+				stageOverlayService.updateOverlay();
+				contentWindow?.magic.onRuntimeReady({});
+			}
+		});
+		onBeforeUnmount(() => {
+			stageOverlayService.get("stage")?.destroy();
+			stageOverlayService.set("stage", null);
+		});
+		const closeOverlayHandler = () => {
+			stageOverlayService.closeOverlay();
+		};
+		return (_ctx, _cache) => {
+			return stageOverlayVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(TMagicIcon), {
+				class: "m-editor-stage-overlay-close",
+				size: "30",
+				onClick: closeOverlayHandler
+			}, {
+				default: withCtx(() => [createVNode(unref(CloseBold))]),
+				_: 1
+			}), createVNode(ScrollViewer_default, {
+				class: "m-editor-stage",
+				width: wrapWidth.value,
+				height: wrapHeight.value,
+				"wrap-width": columnWidth.value.center,
+				"wrap-height": frameworkRect.value.height,
+				zoom: zoom.value
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref: "stageOverlay",
+					class: "m-editor-stage-container",
+					style: normalizeStyle(style.value)
+				}, null, 4)]),
+				_: 1
+			}, 8, [
+				"width",
+				"height",
+				"wrap-width",
+				"wrap-height",
+				"zoom"
+			])])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { StageOverlay_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import ViewerMenu_vue_vue_type_script_setup_true_lang_default from "./ViewerMenu.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
+var ViewerMenu_default = ViewerMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ViewerMenu_default as default };