@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.4

package/dist/tmagic-editor.umd.js

@@ -1,12 +1,31 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@tmagic/utils'), require('@element-plus/icons'), require('lodash-es'), require('events'), require('@tmagic/core'), require('element-plus'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@tmagic/utils', '@element-plus/icons', 'lodash-es', 'events', '@tmagic/core', 'element-plus', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.utils, global.icons, global.lodashEs, global.events, global.core, global.elementPlus, global.StageCore));
-})(this, (function (exports, vue, serialize, utils, icons, lodashEs, events, core, elementPlus, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.StageCore));
+})(this, (function (exports, vue, serialize, monaco, icons, lodashEs, utils, events, core, elementPlus, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = {__proto__: null, [Symbol.toStringTag]: 'Module'};
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
+  var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
   var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
   var _export_sfc = (sfc, props) => {
@@ -17,7 +36,7 @@
     return target;
   };
 
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "m-fields-vs-code",
     props: ["model", "name", "config", "prop"],
     emits: ["change"],
@@ -34,7 +53,7 @@
       };
     }
   });
-  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
       style: vue.normalizeStyle(`height: ${_ctx.height}`),
@@ -43,9 +62,9 @@
       onSave: _ctx.save
     }, null, 8, ["style", "init-values", "language", "onSave"]);
   }
-  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "m-fields-code-link",
     props: {
       config: {
@@ -100,7 +119,7 @@
       };
     }
   });
-  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_link = vue.resolveComponent("m-fields-link");
     return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
       config: _ctx.formConfig,
@@ -109,11 +128,11 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["config", "model", "onChange"]);
   }
-  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
   var UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$i = vue.defineComponent({
     name: "m-fields-ui-select",
     props: {
       labelWidth: String,
@@ -183,7 +202,7 @@
     _hoisted_1$d
   ];
   const _hoisted_3$5 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
-  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     return _ctx.uiSelectMode ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "m-fields-ui-select",
@@ -202,23 +221,8 @@
       })) : vue.createCommentVNode("", true)
     ]));
   }
-  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
 
-  const initEditor = () => {
-    if (globalThis.monaco) {
-      Promise.resolve(globalThis.monaco);
-    }
-    return utils.asyncLoadJs(`https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js`).then(() => {
-      globalThis.require.config({
-        paths: { vs: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs` }
-      });
-      return new Promise((resolve) => {
-        globalThis.require(["vs/editor/editor.main"], () => {
-          resolve(globalThis.monaco);
-        });
-      });
-    });
-  };
   const toString = (v, language) => {
     let value = "";
     if (typeof v !== "string") {
@@ -234,7 +238,7 @@
     }
     return value;
   };
-  const _sfc_main$g = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     name: "magic-code-editor",
     props: {
       initValues: {
@@ -252,32 +256,34 @@
         default: () => "javascript"
       }
     },
-    emits: ["inited", "save"],
+    emits: ["initd", "save"],
     setup(props, { emit }) {
       let vsEditor = null;
+      let vsDiffEditor = null;
       const values = vue.ref("");
       const loading = vue.ref(false);
       const codeEditor = vue.ref();
       const setEditorValue = (v, m) => {
         values.value = toString(v, props.language);
         if (props.type === "diff") {
-          const originalModel = globalThis.monaco.editor.createModel(values.value, "text/javascript");
-          const modifiedModel = globalThis.monaco.editor.createModel(toString(m, props.language), "text/javascript");
-          return vsEditor.setModel({
+          const originalModel = monaco__namespace.editor.createModel(values.value, "text/javascript");
+          const modifiedModel = monaco__namespace.editor.createModel(toString(m, props.language), "text/javascript");
+          return vsDiffEditor?.setModel({
             original: originalModel,
             modified: modifiedModel
           });
         }
-        return vsEditor.setValue?.(values.value);
+        return vsEditor?.setValue(values.value);
       };
       const resizeHandler = () => {
         vsEditor?.layout();
+        vsDiffEditor?.layout();
       };
-      const getEditorValue = () => vsEditor.getValue?.() || "";
+      const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
       const init = async () => {
         if (!codeEditor.value)
           return;
-        vsEditor = globalThis.monaco.editor[props.type === "diff" ? "createDiffEditor" : "create"](codeEditor.value, {
+        const options = {
           value: values.value,
           language: props.language,
           tabSize: 2,
@@ -285,10 +291,15 @@
           fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
           fontSize: 15,
           formatOnPaste: true
-        });
+        };
+        if (props.type === "diff") {
+          vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditor.value, options);
+        } else {
+          vsEditor = monaco__namespace.editor.create(codeEditor.value, options);
+        }
         setEditorValue(props.initValues, props.modifiedValues);
         loading.value = false;
-        emit("inited", vsEditor);
+        emit("initd", vsEditor);
         codeEditor.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
             e.preventDefault();
@@ -296,14 +307,14 @@
           }
         });
         if (props.type !== "diff") {
-          vsEditor.onDidBlurEditorWidget(() => {
+          vsEditor?.onDidBlurEditorWidget(() => {
             emit("save", getEditorValue());
           });
         }
         globalThis.addEventListener("resize", resizeHandler);
       };
       vue.watch(() => props.initValues, (v, preV) => {
-        if (vsEditor && v !== preV) {
+        if (v !== preV) {
           setEditorValue(props.initValues, props.modifiedValues);
         }
       }, {
@@ -312,17 +323,7 @@
       });
       vue.onMounted(async () => {
         loading.value = true;
-        await initEditor();
-        if (!globalThis.monaco) {
-          const interval = setInterval(() => {
-            if (globalThis.monaco) {
-              clearInterval(interval);
-              init();
-            }
-          }, 300);
-        } else {
-          init();
-        }
+        init();
       });
       vue.onUnmounted(() => {
         globalThis.removeEventListener("resize", resizeHandler);
@@ -332,11 +333,12 @@
         loading,
         codeEditor,
         getEditor() {
-          return vsEditor;
+          return vsEditor || vsDiffEditor;
         },
         setEditorValue,
         focus() {
-          vsEditor.focus();
+          vsEditor?.focus();
+          vsDiffEditor?.focus();
         }
       };
     }
@@ -345,10 +347,10 @@
     ref: "codeEditor",
     class: "magic-code-editor"
   };
-  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
   }
-  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
+  var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
@@ -621,6 +623,10 @@
     Layout2["ABSOLUTE"] = "absolute";
     return Layout2;
   })(Layout || {});
+  var Keys = /* @__PURE__ */ ((Keys2) => {
+    Keys2["ESCAPE"] = "Space";
+    return Keys2;
+  })(Keys || {});
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const generateId = (type) => `${type}_${lodashEs.random(1e4, false)}`;
@@ -938,9 +944,6 @@
       if (!info.node)
         throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config2.id}\u7684\u8282\u70B9`);
       const node = lodashEs.cloneDeep(vue.toRaw(info.node));
-      const { parent } = info;
-      if (!parent)
-        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config2), node, this.get("root"));
       defaults(newConfig, node);
       if (!newConfig.type)
@@ -949,6 +952,9 @@
         this.set("root", newConfig);
         return newConfig;
       }
+      const { parent } = info;
+      if (!parent)
+        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
       const parentNodeItems = parent.items;
       const index = getNodeIndex(newConfig, parent);
       if (!parentNodeItems || typeof index === "undefined" || index === -1)
@@ -1316,7 +1322,7 @@
     name: type
   });
 
-  const _sfc_main$f = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     components: { Plus: icons.Plus },
     setup() {
       const services = vue.inject("services");
@@ -1336,7 +1342,7 @@
   const _hoisted_1$b = { class: "m-editor-empty-panel" };
   const _hoisted_2$6 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
@@ -1358,7 +1364,7 @@
       ])
     ]);
   }
-  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
 
   /*
   Copyright (c) 2018 Daybrush
@@ -2527,7 +2533,7 @@
 
   var Gesto$1 = Gesto;
 
-  const _sfc_main$e = vue.defineComponent({
+  const _sfc_main$f = vue.defineComponent({
     name: "m-editor-resize",
     props: {
       type: {
@@ -2573,14 +2579,14 @@
     ref: "target",
     class: "m-editor-resizer"
   };
-  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
-  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+  var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$e = vue.defineComponent({
     components: {
       AddPageBox,
       Resizer
@@ -2608,7 +2614,7 @@
     key: 1,
     class: "m-editor-content"
   };
-  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
@@ -2653,9 +2659,9 @@
       ]))
     ]);
   }
-  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
 
-  const _sfc_main$c = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "m-icon",
     components: { Edit: icons.Edit },
     props: {
@@ -2670,7 +2676,7 @@
     }
   });
   const _hoisted_1$8 = ["src"];
-  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_edit = vue.resolveComponent("edit");
     const _component_el_icon = vue.resolveComponent("el-icon");
     return !_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -2691,9 +2697,9 @@
       _: 1
     }));
   }
-  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$c = vue.defineComponent({
     components: { MIcon, ArrowDown: icons.ArrowDown },
     props: {
       data: {
@@ -2841,7 +2847,7 @@
     style: { "margin": "0 5px" }
   };
   const _hoisted_4$3 = { class: "el-dropdown-link menubar-menu-button" };
-  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_divider = vue.resolveComponent("el-divider");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_button = vue.resolveComponent("el-button");
@@ -2927,9 +2933,9 @@
       }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.item.component), vue.normalizeProps(vue.mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : vue.createCommentVNode("", true)
     ])) : vue.createCommentVNode("", true);
   }
-  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+  var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
-  const _sfc_main$a = vue.defineComponent({
+  const _sfc_main$b = vue.defineComponent({
     name: "nav-menu",
     components: { ToolButton },
     props: {
@@ -2947,7 +2953,7 @@
       };
     }
   });
-  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: "m-editor-nav-menu",
@@ -2968,9 +2974,9 @@
       }), 128))
     ], 4);
   }
-  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
 
-  const _sfc_main$9 = vue.defineComponent({
+  const _sfc_main$a = vue.defineComponent({
     name: "m-editor-props-panel",
     emits: ["mounted"],
     setup(props, { emit }) {
@@ -3019,7 +3025,7 @@
       };
     }
   });
-  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form = vue.resolveComponent("m-form");
     return vue.openBlock(), vue.createBlock(_component_m_form, {
       class: "m-editor-props-panel",
@@ -3030,9 +3036,9 @@
       onChange: _ctx.submit
     }, null, 8, ["init-values", "config", "onChange"]);
   }
-  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
-  const _sfc_main$8 = vue.defineComponent({
+  const _sfc_main$9 = vue.defineComponent({
     name: "ui-component-panel",
     components: { MIcon },
     setup() {
@@ -3059,7 +3065,7 @@
   });
   const _hoisted_1$6 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
   const _hoisted_2$3 = ["onClick"];
-  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -3126,9 +3132,9 @@
       _: 1
     });
   }
-  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
 
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$8 = vue.defineComponent({
     name: "magic-editor-content-menu",
     props: {
       componentGroupList: {
@@ -3177,7 +3183,7 @@
   const _hoisted_2$2 = ["onClick"];
   const _hoisted_3$2 = ["onClick"];
   const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
-  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     return _ctx.node ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
       _ctx.node.items ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -3239,7 +3245,7 @@
       ])
     ])) : vue.createCommentVNode("", true);
   }
-  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
   const select = (data, editorService) => {
     if (!data.id) {
@@ -3346,7 +3352,7 @@
       }
     };
   };
-  const _sfc_main$6 = vue.defineComponent({
+  const _sfc_main$7 = vue.defineComponent({
     name: "magic-editor-layer-panel",
     components: { LayerMenu },
     setup() {
@@ -3369,7 +3375,7 @@
       };
     }
   });
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
     const _component_layer_menu = vue.resolveComponent("layer-menu");
@@ -3423,9 +3429,9 @@
       _: 3
     });
   }
-  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
 
-  const _sfc_main$5 = vue.defineComponent({
+  const _sfc_main$6 = vue.defineComponent({
     name: "m-sidebar",
     components: { MIcon },
     props: {
@@ -3473,7 +3479,7 @@
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_icon = vue.resolveComponent("m-icon");
     const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
     const _component_el_tabs = vue.resolveComponent("el-tabs");
@@ -3520,9 +3526,9 @@
       _: 1
     }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
   }
-  var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+  var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
 
-  const _sfc_main$4 = vue.defineComponent({
+  const _sfc_main$5 = vue.defineComponent({
     components: { CaretBottom: icons.CaretBottom, Plus: icons.Plus },
     setup() {
       const services = vue.inject("services");
@@ -3559,7 +3565,7 @@
   const _hoisted_2$1 = ["onClick"];
   const _hoisted_3$1 = ["onClick"];
   const _hoisted_4$1 = ["onClick"];
-  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_caret_bottom = vue.resolveComponent("caret-bottom");
@@ -3618,7 +3624,223 @@
       }), 128)) : vue.createCommentVNode("", true)
     ]);
   }
-  var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+  var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+
+  class ScrollViewer$1 {
+    enter = false;
+    targetEnter = false;
+    keydown = false;
+    container;
+    target;
+    zoom = 1;
+    scrollLeft = 0;
+    scrollTop = 0;
+    x = 0;
+    y = 0;
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        const { width, height } = contentRect;
+        const targetRect = this.target.getBoundingClientRect();
+        const targetWidth = targetRect.width * this.zoom;
+        const targetHeight = targetRect.height * this.zoom;
+        if (targetWidth < width) {
+          this.target._left = 0;
+        }
+        if (targetHeight < height) {
+          this.target._top = 0;
+        }
+        this.scroll();
+      }
+    });
+    constructor(options) {
+      this.container = options.container;
+      this.target = options.target;
+      this.zoom = options.zoom;
+      globalThis.addEventListener("keydown", this.keydownHandler);
+      globalThis.addEventListener("keyup", this.keyupHandler);
+      this.container.addEventListener("mouseenter", this.mouseEnterHandler);
+      this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
+      this.target.addEventListener("mouseenter", this.targetMouseEnterHandler);
+      this.target.addEventListener("mouseleave", this.targetMouseLeaveHandler);
+      this.container.addEventListener("wheel", this.wheelHandler);
+      this.resizeObserver.observe(this.container);
+    }
+    destroy() {
+      this.resizeObserver.disconnect();
+      this.container.removeEventListener("mouseenter", this.mouseEnterHandler);
+      this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
+      this.target.removeEventListener("mouseenter", this.targetMouseEnterHandler);
+      this.target.removeEventListener("mouseleave", this.targetMouseLeaveHandler);
+      globalThis.removeEventListener("keydown", this.keydownHandler);
+      globalThis.removeEventListener("keyup", this.keyupHandler);
+    }
+    setZoom(zoom) {
+      this.zoom = zoom;
+    }
+    scroll() {
+      const scrollLeft = this.target._left;
+      const scrollTop = this.target._top;
+      this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
+    }
+    removeHandler() {
+      this.target.style.cursor = "";
+      this.target.removeEventListener("mousedown", this.mousedownHandler);
+      document.removeEventListener("mousemove", this.mousemoveHandler);
+      document.removeEventListener("mouseup", this.mouseupHandler);
+    }
+    wheelHandler = (event) => {
+      if (this.targetEnter)
+        return;
+      const { deltaX, deltaY, currentTarget } = event;
+      if (currentTarget !== this.container)
+        return;
+      this.setScrollOffset(deltaX, deltaY);
+      this.scroll();
+      this.scrollLeft = this.target._left;
+      this.scrollTop = this.target._top;
+    };
+    mouseEnterHandler = () => {
+      this.enter = true;
+    };
+    mouseLeaveHandler = () => {
+      this.enter = false;
+    };
+    targetMouseEnterHandler = () => {
+      this.targetEnter = true;
+    };
+    targetMouseLeaveHandler = () => {
+      this.targetEnter = false;
+    };
+    mousedownHandler = (event) => {
+      if (!this.keydown)
+        return;
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      this.target.style.cursor = "grabbing";
+      this.x = event.clientX;
+      this.y = event.clientY;
+      document.addEventListener("mousemove", this.mousemoveHandler);
+      document.addEventListener("mouseup", this.mouseupHandler);
+    };
+    mouseupHandler = () => {
+      this.x = 0;
+      this.y = 0;
+      this.scrollLeft = this.target._left;
+      this.scrollTop = this.target._top;
+      this.removeHandler();
+    };
+    mousemoveHandler = (event) => {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      const deltaX = event.clientX - this.x;
+      const deltaY = event.clientY - this.y;
+      this.setScrollOffset(deltaX, deltaY);
+      this.scroll();
+    };
+    keydownHandler = (event) => {
+      if (event.code === Keys.ESCAPE && this.enter) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+      } else if (this.keydown)
+        return;
+      this.keydown = true;
+      event.preventDefault();
+      this.target.style.cursor = "grab";
+      this.container.addEventListener("mousedown", this.mousedownHandler);
+    };
+    keyupHandler = (event) => {
+      if (event.code !== Keys.ESCAPE || !this.keydown) {
+        return;
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      this.keydown = false;
+      event.preventDefault();
+      this.removeHandler();
+    };
+    setScrollOffset(deltaX, deltaY) {
+      const { width, height } = this.container.getBoundingClientRect();
+      const targetRect = this.target.getBoundingClientRect();
+      const targetWidth = targetRect.width * this.zoom;
+      const targetHeight = targetRect.height * this.zoom;
+      let y = 0;
+      if (targetHeight > height) {
+        if (deltaY > 0) {
+          y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
+        } else {
+          y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
+        }
+      }
+      let x = 0;
+      if (targetWidth > width) {
+        if (deltaX > 0) {
+          x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
+        } else {
+          x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
+        }
+      }
+      this.target._left = x;
+      this.target._top = y;
+    }
+  }
+
+  const _sfc_main$4 = vue.defineComponent({
+    name: "m-editor-scroll-viewer",
+    props: {
+      width: Number,
+      height: Number,
+      zoom: {
+        type: Number,
+        default: 1
+      }
+    },
+    setup(props) {
+      const container = vue.ref();
+      const el = vue.ref();
+      let scrollViewer;
+      vue.onMounted(() => {
+        if (!container.value || !el.value)
+          return;
+        scrollViewer = new ScrollViewer$1({
+          container: container.value,
+          target: el.value,
+          zoom: props.zoom
+        });
+      });
+      vue.onUnmounted(() => {
+        scrollViewer.destroy();
+      });
+      vue.watch(() => props.zoom, () => {
+        scrollViewer.setZoom(props.zoom);
+      });
+      return {
+        container,
+        el,
+        style: vue.computed(() => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+      `)
+      };
+    }
+  });
+  const _hoisted_1$2 = {
+    class: "m-editor-scroll-viewer-container",
+    ref: "container"
+  };
+  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+      vue.createElementVNode("div", {
+        ref: "el",
+        style: vue.normalizeStyle(_ctx.style)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 4)
+    ], 512);
+  }
+  var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
   const _sfc_main$3 = vue.defineComponent({
     name: "magic-editor-ui-viewer-menu",
@@ -3679,7 +3901,7 @@
       };
     }
   });
-  const _hoisted_1$2 = {
+  const _hoisted_1$1 = {
     class: "magic-editor-content-menu",
     ref: "menu"
   };
@@ -3687,7 +3909,7 @@
   const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
   const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
   function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
       vue.createElementVNode("div", null, [
         _ctx.canCenter ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
@@ -3772,28 +3994,14 @@
   const _sfc_main$2 = vue.defineComponent({
     name: "magic-stage",
     components: {
-      ViewerMenu
+      ViewerMenu,
+      ScrollViewer
     },
     props: {
       render: {
         type: Function
       },
       runtimeUrl: String,
-      root: {
-        type: Object
-      },
-      page: {
-        type: Object
-      },
-      node: {
-        type: Object
-      },
-      uiSelectMode: {
-        type: Boolean
-      },
-      zoom: {
-        type: Number
-      },
       canSelect: {
         type: Function,
         default: (el) => Boolean(el.id)
@@ -3808,11 +4016,14 @@
     emits: ["select", "update", "sort"],
     setup(props, { emit }) {
       const services = vue.inject("services");
+      const stageWrap = vue.ref();
       const stageContainer = vue.ref();
-      const stageStyle = vue.computed(() => ({
-        ...services?.uiService.get("stageStyle"),
-        transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`
-      }));
+      const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
+      const uiSelectMode = vue.computed(() => services?.uiService.get("uiSelectMode"));
+      const root = vue.computed(() => services?.editorService.get("root"));
+      const page = vue.computed(() => services?.editorService.get("page"));
+      const zoom = vue.computed(() => services?.uiService.get("zoom"));
+      const node = vue.computed(() => services?.editorService.get("node"));
       let stage = null;
       let runtime = null;
       vue.watchEffect(() => {
@@ -3820,15 +4031,15 @@
           return;
         if (!stageContainer.value)
           return;
-        if (!(props.runtimeUrl || props.render) || !props.root)
+        if (!(props.runtimeUrl || props.render) || !root.value)
           return;
         stage = new StageCore__default["default"]({
           render: props.render,
           runtimeUrl: props.runtimeUrl,
-          zoom: props.zoom,
+          zoom: zoom.value,
           canSelect: (el, stop) => {
             const elCanSelect = props.canSelect(el);
-            if (props.uiSelectMode && elCanSelect) {
+            if (uiSelectMode.value && elCanSelect) {
               document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
               return stop();
             }
@@ -3848,55 +4059,83 @@
         stage?.on("changeGuides", () => {
           services?.uiService.set("showGuides", true);
         });
-        if (!props.node?.id)
+        if (!node.value?.id)
           return;
         stage?.on("runtime-ready", (rt) => {
           runtime = rt;
-          props.root && runtime?.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(props.root)));
-          props.page?.id && runtime?.updatePageId?.(props.page.id);
+          root.value && runtime?.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root.value)));
+          page.value?.id && runtime?.updatePageId?.(page.value.id);
           setTimeout(() => {
-            props.node && stage?.select(vue.toRaw(props.node.id));
+            node.value && stage?.select(vue.toRaw(node.value.id));
           });
         });
       });
-      vue.watch(() => props.zoom, (zoom) => {
-        if (!stage || !zoom)
+      vue.watch(zoom, (zoom2) => {
+        if (!stage || !zoom2)
           return;
-        stage?.setZoom(zoom);
+        stage.setZoom(zoom2);
+      });
+      vue.watch(root, (root2) => {
+        if (runtime && root2) {
+          runtime.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root2)));
+        }
+      });
+      vue.watch(() => node.value?.id, (id) => {
+        vue.nextTick(() => {
+          id && stage?.select(id);
+        });
       });
-      vue.watch(() => props.root, (root) => {
-        if (runtime && root) {
-          runtime.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root)));
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const { contentRect } of entries) {
+          services?.uiService.set("stageContainerRect", {
+            width: contentRect.width,
+            height: contentRect.height
+          });
         }
       });
+      vue.onMounted(() => {
+        stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+      });
       vue.onUnmounted(() => {
         stage?.destroy();
+        resizeObserver.disconnect();
         services?.editorService.set("stage", null);
       });
       return {
-        stageStyle,
-        ...useMenu(),
-        stageContainer
+        stageWrap,
+        stageContainer,
+        stageRect,
+        zoom,
+        ...useMenu()
       };
     }
   });
-  const _hoisted_1$1 = { class: "m-editor-stage" };
   function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_viewer_menu = vue.resolveComponent("viewer-menu");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-      vue.createElementVNode("div", {
-        class: "m-editor-stage-container",
-        ref: "stageContainer",
-        style: vue.normalizeStyle(_ctx.stageStyle),
-        onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args))
-      }, null, 36),
-      (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-        vue.createVNode(_component_viewer_menu, {
-          ref: "menu",
-          style: vue.normalizeStyle(_ctx.menuStyle)
-        }, null, 8, ["style"])
-      ]))
-    ]);
+    const _component_scroll_viewer = vue.resolveComponent("scroll-viewer");
+    return vue.openBlock(), vue.createBlock(_component_scroll_viewer, {
+      class: "m-editor-stage",
+      ref: "stageWrap",
+      width: _ctx.stageRect?.width,
+      height: _ctx.stageRect?.height,
+      zoom: _ctx.zoom
+    }, {
+      default: vue.withCtx(() => [
+        vue.createElementVNode("div", {
+          class: "m-editor-stage-container",
+          ref: "stageContainer",
+          onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
+          style: vue.normalizeStyle(`transform: scale(${_ctx.zoom})`)
+        }, null, 36),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+          vue.createVNode(_component_viewer_menu, {
+            ref: "menu",
+            style: vue.normalizeStyle(_ctx.menuStyle)
+          }, null, 8, ["style"])
+        ]))
+      ]),
+      _: 1
+    }, 8, ["width", "height", "zoom"]);
   }
   var MagicStage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
@@ -3920,24 +4159,13 @@
     },
     setup() {
       const services = vue.inject("services");
-      const node = vue.computed(() => services?.editorService.get("node"));
-      const stage = vue.computed(() => services?.editorService.get("stage"));
-      vue.watch([() => node.value?.id, stage], ([id, stage2]) => {
-        vue.nextTick(() => {
-          id && stage2?.select(id);
-        });
-      });
       return {
-        uiSelectMode: vue.computed(() => services?.uiService.get("uiSelectMode")),
-        root: vue.computed(() => services?.editorService.get("root")),
         page: vue.computed(() => services?.editorService.get("page")),
-        zoom: vue.computed(() => services?.uiService.get("zoom")),
-        node,
         selectHandler(el) {
           services?.editorService.select(el.id);
         },
-        updateNodeHandler(node2) {
-          services?.editorService.update(node2);
+        updateNodeHandler(node) {
+          services?.editorService.update(node);
         },
         sortNodeHandler(ev) {
           services?.editorService.sort(ev.src, ev.dist);
@@ -3954,17 +4182,12 @@
         key: _ctx.page?.id,
         "runtime-url": _ctx.runtimeUrl,
         render: _ctx.render,
-        "ui-select-mode": _ctx.uiSelectMode,
-        root: _ctx.root,
-        page: _ctx.page,
-        node: _ctx.node,
-        zoom: _ctx.zoom,
         "moveable-options": _ctx.moveableOptions,
         "can-select": _ctx.canSelect,
         onSelect: _ctx.selectHandler,
         onUpdate: _ctx.updateNodeHandler,
         onSort: _ctx.sortNodeHandler
-      }, null, 8, ["runtime-url", "render", "ui-select-mode", "root", "page", "node", "zoom", "moveable-options", "can-select", "onSelect", "onUpdate", "onSort"])),
+      }, null, 8, ["runtime-url", "render", "moveable-options", "can-select", "onSelect", "onUpdate", "onSort"])),
       vue.renderSlot(_ctx.$slots, "workspace-content"),
       vue.createVNode(_component_page_bar, null, {
         "page-bar-title": vue.withCtx(({ page }) => [
@@ -3999,7 +4222,14 @@
     uiSelectMode: false,
     showSrc: false,
     zoom: 1,
-    stageStyle: {},
+    stageContainerRect: {
+      width: 0,
+      height: 0
+    },
+    stageRect: {
+      width: 375,
+      height: 817
+    },
     columnWidth: {
       left: 310,
       center: globalThis.document.body.clientWidth - 310 - 400,
@@ -4023,6 +4253,10 @@
         this.setColumnWidth(value);
         return;
       }
+      if (name === "stageRect") {
+        this.setStageRect(value);
+        return;
+      }
       if (name === "showGuides") {
         mask?.showGuides(value);
       }
@@ -4030,6 +4264,9 @@
         mask?.showRule(value);
       }
       state[name] = value;
+      if (name === "stageContainerRect") {
+        state.zoom = this.calcZoom();
+      }
     }
     get(name) {
       return state[name];
@@ -4052,6 +4289,23 @@
       }
       state.columnWidth = columnWidth;
     }
+    setStageRect(value) {
+      state.stageRect = {
+        ...state.stageRect,
+        ...value
+      };
+      state.zoom = this.calcZoom();
+    }
+    calcZoom() {
+      const { stageRect, stageContainerRect } = state;
+      const { height, width } = stageContainerRect;
+      if (!width || !height)
+        return 1;
+      if (width > stageRect.width && height > stageRect.height) {
+        return 1;
+      }
+      return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+    }
   }
   var uiService = new Ui();
 
@@ -4106,7 +4360,7 @@
       canSelect: {
         type: Function
       },
-      stageStyle: {
+      stageRect: {
         type: [String, Object]
       }
     },
@@ -4144,7 +4398,7 @@
       vue.watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
         immediate: true
       });
-      vue.watch(() => props.stageStyle, (stageStyle) => uiService.set("stageStyle", stageStyle), {
+      vue.watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
         immediate: true
       });
       vue.onUnmounted(() => editorService.destroy());
@@ -4234,6 +4488,7 @@
   exports.ComponentListPanel = ComponentListPanel;
   exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
   exports.Fixed2Other = Fixed2Other;
+  exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = LayerPanel;
   exports.Layout = Layout;