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

package/dist/tmagic-editor.es.js

@@ -1,8 +1,9 @@
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createElementVNode, toDisplayString, withModifiers, createCommentVNode, watch, onMounted, onUnmounted, reactive, toRaw, createVNode, withCtx, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, createTextVNode, normalizeProps, mergeProps, getCurrentInstance, withDirectives, vShow, Teleport, toHandlers, createSlots, nextTick, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { asyncLoadJs, toLine, isPop, getNodePath } from '@tmagic/utils';
+import * as monaco from 'monaco-editor';
 import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, Coin, CaretBottom } from '@element-plus/icons';
 import { cloneDeep, random } from 'lodash-es';
+import { toLine, isPop, getNodePath } from '@tmagic/utils';
 import { EventEmitter as EventEmitter$2 } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import { ElMessage } from 'element-plus';
@@ -16,7 +17,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$j = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
   emits: ["change"],
@@ -33,7 +34,7 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-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 = resolveComponent("magic-code-editor");
   return openBlock(), createBlock(_component_magic_code_editor, {
     style: normalizeStyle(`height: ${_ctx.height}`),
@@ -42,9 +43,9 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "m-fields-code-link",
   props: {
     config: {
@@ -99,7 +100,7 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-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 = resolveComponent("m-fields-link");
   return openBlock(), createBlock(_component_m_fields_link, {
     config: _ctx.formConfig,
@@ -108,11 +109,11 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "m-fields-ui-select",
   props: {
     labelWidth: String,
@@ -182,7 +183,7 @@ const _hoisted_2$7 = [
   _hoisted_1$d
 ];
 const _hoisted_3$5 = /* @__PURE__ */ 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 ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "m-fields-ui-select",
@@ -201,23 +202,8 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     })) : 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 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") {
@@ -233,7 +219,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$g = defineComponent({
+const _sfc_main$h = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -251,32 +237,34 @@ const _sfc_main$g = defineComponent({
       default: () => "javascript"
     }
   },
-  emits: ["inited", "save"],
+  emits: ["initd", "save"],
   setup(props, { emit }) {
     let vsEditor = null;
+    let vsDiffEditor = null;
     const values = ref("");
     const loading = ref(false);
     const codeEditor = 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.editor.createModel(values.value, "text/javascript");
+        const modifiedModel = monaco.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,
@@ -284,10 +272,15 @@ const _sfc_main$g = defineComponent({
         fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
         fontSize: 15,
         formatOnPaste: true
-      });
+      };
+      if (props.type === "diff") {
+        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+      } else {
+        vsEditor = monaco.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();
@@ -295,14 +288,14 @@ const _sfc_main$g = defineComponent({
         }
       });
       if (props.type !== "diff") {
-        vsEditor.onDidBlurEditorWidget(() => {
+        vsEditor?.onDidBlurEditorWidget(() => {
           emit("save", getEditorValue());
         });
       }
       globalThis.addEventListener("resize", resizeHandler);
     };
     watch(() => props.initValues, (v, preV) => {
-      if (vsEditor && v !== preV) {
+      if (v !== preV) {
         setEditorValue(props.initValues, props.modifiedValues);
       }
     }, {
@@ -311,17 +304,7 @@ const _sfc_main$g = defineComponent({
     });
     onMounted(async () => {
       loading.value = true;
-      await initEditor();
-      if (!globalThis.monaco) {
-        const interval = setInterval(() => {
-          if (globalThis.monaco) {
-            clearInterval(interval);
-            init();
-          }
-        }, 300);
-      } else {
-        init();
-      }
+      init();
     });
     onUnmounted(() => {
       globalThis.removeEventListener("resize", resizeHandler);
@@ -331,11 +314,12 @@ const _sfc_main$g = defineComponent({
       loading,
       codeEditor,
       getEditor() {
-        return vsEditor;
+        return vsEditor || vsDiffEditor;
       },
       setEditorValue,
       focus() {
-        vsEditor.focus();
+        vsEditor?.focus();
+        vsDiffEditor?.focus();
       }
     };
   }
@@ -344,10 +328,10 @@ const _hoisted_1$c = {
   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 openBlock(), 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) => {
@@ -620,6 +604,10 @@ var Layout = /* @__PURE__ */ ((Layout2) => {
   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}_${random(1e4, false)}`;
@@ -937,9 +925,6 @@ class Editor$1 extends BaseService {
     if (!info.node)
       throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config2.id}\u7684\u8282\u70B9`);
     const node = cloneDeep(toRaw(info.node));
-    const { parent } = info;
-    if (!parent)
-      throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
     let newConfig = await this.toggleFixedPosition(toRaw(config2), node, this.get("root"));
     defaults(newConfig, node);
     if (!newConfig.type)
@@ -948,6 +933,9 @@ class Editor$1 extends BaseService {
       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)
@@ -1315,7 +1303,7 @@ const getDefaultPropsValue = (type) => ({
   name: type
 });
 
-const _sfc_main$f = defineComponent({
+const _sfc_main$g = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -1335,7 +1323,7 @@ const _sfc_main$f = defineComponent({
 const _hoisted_1$b = { class: "m-editor-empty-panel" };
 const _hoisted_2$6 = { class: "m-editor-empty-content" };
 const _hoisted_3$4 = /* @__PURE__ */ 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 = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$b, [
@@ -1357,7 +1345,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-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
@@ -2526,7 +2514,7 @@ function (_super) {
 
 var Gesto$1 = Gesto;
 
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "m-editor-resize",
   props: {
     type: {
@@ -2572,14 +2560,14 @@ const _hoisted_1$a = {
   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 openBlock(), createElementBlock("span", _hoisted_1$a, [
     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 = defineComponent({
+const _sfc_main$e = defineComponent({
   components: {
     AddPageBox,
     Resizer
@@ -2607,7 +2595,7 @@ const _hoisted_2$5 = {
   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 = resolveComponent("magic-code-editor");
   const _component_resizer = resolveComponent("resizer");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
@@ -2652,9 +2640,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-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 = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "m-icon",
   components: { Edit },
   props: {
@@ -2669,7 +2657,7 @@ const _sfc_main$c = defineComponent({
   }
 });
 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 = resolveComponent("edit");
   const _component_el_icon = resolveComponent("el-icon");
   return !_ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
@@ -2690,9 +2678,9 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$c = defineComponent({
   components: { MIcon, ArrowDown },
   props: {
     data: {
@@ -2840,7 +2828,7 @@ const _hoisted_3$3 = {
   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 = resolveComponent("el-divider");
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_button = resolveComponent("el-button");
@@ -2926,9 +2914,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.item.component), normalizeProps(mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : createCommentVNode("", true)
   ])) : 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 = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "nav-menu",
   components: { ToolButton },
   props: {
@@ -2946,7 +2934,7 @@ const _sfc_main$a = defineComponent({
     };
   }
 });
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   return openBlock(), createElementBlock("div", {
     class: "m-editor-nav-menu",
@@ -2967,9 +2955,9 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     }), 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 = defineComponent({
+const _sfc_main$a = defineComponent({
   name: "m-editor-props-panel",
   emits: ["mounted"],
   setup(props, { emit }) {
@@ -3018,7 +3006,7 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createBlock(_component_m_form, {
     class: "m-editor-props-panel",
@@ -3029,9 +3017,9 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "ui-component-panel",
   components: { MIcon },
   setup() {
@@ -3058,7 +3046,7 @@ const _sfc_main$8 = defineComponent({
 });
 const _hoisted_1$6 = /* @__PURE__ */ 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 = resolveComponent("el-input");
   const _component_m_icon = resolveComponent("m-icon");
   const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -3125,9 +3113,9 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$8 = defineComponent({
   name: "magic-editor-content-menu",
   props: {
     componentGroupList: {
@@ -3176,7 +3164,7 @@ const _hoisted_1$5 = {
 const _hoisted_2$2 = ["onClick"];
 const _hoisted_3$2 = ["onClick"];
 const _hoisted_4$2 = /* @__PURE__ */ 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 = resolveComponent("el-scrollbar");
   return _ctx.node ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
     _ctx.node.items ? (openBlock(), createElementBlock("div", {
@@ -3238,7 +3226,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ])) : 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) {
@@ -3345,7 +3333,7 @@ const useContentMenu = (editorService) => {
     }
   };
 };
-const _sfc_main$6 = defineComponent({
+const _sfc_main$7 = defineComponent({
   name: "magic-editor-layer-panel",
   components: { LayerMenu },
   setup() {
@@ -3368,7 +3356,7 @@ const _sfc_main$6 = defineComponent({
     };
   }
 });
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
   const _component_layer_menu = resolveComponent("layer-menu");
@@ -3422,9 +3410,9 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$6 = defineComponent({
   name: "m-sidebar",
   components: { MIcon },
   props: {
@@ -3472,7 +3460,7 @@ const _hoisted_1$4 = {
   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 = resolveComponent("m-icon");
   const _component_el_tab_pane = resolveComponent("el-tab-pane");
   const _component_el_tabs = resolveComponent("el-tabs");
@@ -3519,9 +3507,9 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["modelValue"])) : 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 = defineComponent({
+const _sfc_main$5 = defineComponent({
   components: { CaretBottom, Plus },
   setup() {
     const services = inject("services");
@@ -3558,7 +3546,7 @@ const _hoisted_1$3 = { class: "m-editor-page-bar" };
 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 = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
   const _component_caret_bottom = resolveComponent("caret-bottom");
@@ -3617,7 +3605,223 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128)) : 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 = defineComponent({
+  name: "m-editor-scroll-viewer",
+  props: {
+    width: Number,
+    height: Number,
+    zoom: {
+      type: Number,
+      default: 1
+    }
+  },
+  setup(props) {
+    const container = ref();
+    const el = ref();
+    let scrollViewer;
+    onMounted(() => {
+      if (!container.value || !el.value)
+        return;
+      scrollViewer = new ScrollViewer$1({
+        container: container.value,
+        target: el.value,
+        zoom: props.zoom
+      });
+    });
+    onUnmounted(() => {
+      scrollViewer.destroy();
+    });
+    watch(() => props.zoom, () => {
+      scrollViewer.setZoom(props.zoom);
+    });
+    return {
+      container,
+      el,
+      style: 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 openBlock(), createElementBlock("div", _hoisted_1$2, [
+    createElementVNode("div", {
+      ref: "el",
+      style: normalizeStyle(_ctx.style)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 4)
+  ], 512);
+}
+var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
 const _sfc_main$3 = defineComponent({
   name: "magic-editor-ui-viewer-menu",
@@ -3678,7 +3882,7 @@ const _sfc_main$3 = defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
   class: "magic-editor-content-menu",
   ref: "menu"
 };
@@ -3686,7 +3890,7 @@ const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "separatio
 const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
 const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
     createElementVNode("div", null, [
       _ctx.canCenter ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -3771,28 +3975,14 @@ const useMenu = () => {
 const _sfc_main$2 = 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)
@@ -3807,11 +3997,14 @@ const _sfc_main$2 = defineComponent({
   emits: ["select", "update", "sort"],
   setup(props, { emit }) {
     const services = inject("services");
+    const stageWrap = ref();
     const stageContainer = ref();
-    const stageStyle = computed(() => ({
-      ...services?.uiService.get("stageStyle"),
-      transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`
-    }));
+    const stageRect = computed(() => services?.uiService.get("stageRect"));
+    const uiSelectMode = computed(() => services?.uiService.get("uiSelectMode"));
+    const root = computed(() => services?.editorService.get("root"));
+    const page = computed(() => services?.editorService.get("page"));
+    const zoom = computed(() => services?.uiService.get("zoom"));
+    const node = computed(() => services?.editorService.get("node"));
     let stage = null;
     let runtime = null;
     watchEffect(() => {
@@ -3819,15 +4012,15 @@ const _sfc_main$2 = defineComponent({
         return;
       if (!stageContainer.value)
         return;
-      if (!(props.runtimeUrl || props.render) || !props.root)
+      if (!(props.runtimeUrl || props.render) || !root.value)
         return;
       stage = new StageCore({
         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();
           }
@@ -3847,55 +4040,83 @@ const _sfc_main$2 = defineComponent({
       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(cloneDeep(toRaw(props.root)));
-        props.page?.id && runtime?.updatePageId?.(props.page.id);
+        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
-          props.node && stage?.select(toRaw(props.node.id));
+          node.value && stage?.select(toRaw(node.value.id));
         });
       });
     });
-    watch(() => props.zoom, (zoom) => {
-      if (!stage || !zoom)
+    watch(zoom, (zoom2) => {
+      if (!stage || !zoom2)
         return;
-      stage?.setZoom(zoom);
+      stage.setZoom(zoom2);
     });
-    watch(() => props.root, (root) => {
-      if (runtime && root) {
-        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+    watch(root, (root2) => {
+      if (runtime && root2) {
+        runtime.updateRootConfig(cloneDeep(toRaw(root2)));
       }
     });
+    watch(() => node.value?.id, (id) => {
+      nextTick(() => {
+        id && stage?.select(id);
+      });
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        services?.uiService.set("stageContainerRect", {
+          width: contentRect.width,
+          height: contentRect.height
+        });
+      }
+    });
+    onMounted(() => {
+      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+    });
     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 = resolveComponent("viewer-menu");
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
-    createElementVNode("div", {
-      class: "m-editor-stage-container",
-      ref: "stageContainer",
-      style: normalizeStyle(_ctx.stageStyle),
-      onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args))
-    }, null, 36),
-    (openBlock(), createBlock(Teleport, { to: "body" }, [
-      createVNode(_component_viewer_menu, {
-        ref: "menu",
-        style: normalizeStyle(_ctx.menuStyle)
-      }, null, 8, ["style"])
-    ]))
-  ]);
+  const _component_scroll_viewer = resolveComponent("scroll-viewer");
+  return openBlock(), createBlock(_component_scroll_viewer, {
+    class: "m-editor-stage",
+    ref: "stageWrap",
+    width: _ctx.stageRect?.width,
+    height: _ctx.stageRect?.height,
+    zoom: _ctx.zoom
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "m-editor-stage-container",
+        ref: "stageContainer",
+        onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
+        style: normalizeStyle(`transform: scale(${_ctx.zoom})`)
+      }, null, 36),
+      (openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(_component_viewer_menu, {
+          ref: "menu",
+          style: normalizeStyle(_ctx.menuStyle)
+        }, null, 8, ["style"])
+      ]))
+    ]),
+    _: 1
+  }, 8, ["width", "height", "zoom"]);
 }
 var MagicStage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
@@ -3919,24 +4140,13 @@ const _sfc_main$1 = defineComponent({
   },
   setup() {
     const services = inject("services");
-    const node = computed(() => services?.editorService.get("node"));
-    const stage = computed(() => services?.editorService.get("stage"));
-    watch([() => node.value?.id, stage], ([id, stage2]) => {
-      nextTick(() => {
-        id && stage2?.select(id);
-      });
-    });
     return {
-      uiSelectMode: computed(() => services?.uiService.get("uiSelectMode")),
-      root: computed(() => services?.editorService.get("root")),
       page: computed(() => services?.editorService.get("page")),
-      zoom: 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);
@@ -3953,17 +4163,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       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"])),
     renderSlot(_ctx.$slots, "workspace-content"),
     createVNode(_component_page_bar, null, {
       "page-bar-title": withCtx(({ page }) => [
@@ -3998,7 +4203,14 @@ const state = reactive({
   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,
@@ -4022,6 +4234,10 @@ class Ui extends BaseService {
       this.setColumnWidth(value);
       return;
     }
+    if (name === "stageRect") {
+      this.setStageRect(value);
+      return;
+    }
     if (name === "showGuides") {
       mask?.showGuides(value);
     }
@@ -4029,6 +4245,9 @@ class Ui extends BaseService {
       mask?.showRule(value);
     }
     state[name] = value;
+    if (name === "stageContainerRect") {
+      state.zoom = this.calcZoom();
+    }
   }
   get(name) {
     return state[name];
@@ -4051,6 +4270,23 @@ class Ui extends BaseService {
     }
     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();
 
@@ -4105,7 +4341,7 @@ const _sfc_main = defineComponent({
     canSelect: {
       type: Function
     },
-    stageStyle: {
+    stageRect: {
       type: [String, Object]
     }
   },
@@ -4143,7 +4379,7 @@ const _sfc_main = defineComponent({
     watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
       immediate: true
     });
-    watch(() => props.stageStyle, (stageStyle) => uiService.set("stageStyle", stageStyle), {
+    watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
       immediate: true
     });
     onUnmounted(() => editorService.destroy());
@@ -4229,5 +4465,5 @@ var index = {
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, change2Fixed, debug, index as default, defaults, editorService, error, eventsService, fillConfig, generateId, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, setNewItemId, toRelative, uiService, warn };
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, change2Fixed, debug, index as default, defaults, editorService, error, eventsService, fillConfig, generateId, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, setNewItemId, toRelative, uiService, warn };
 //# sourceMappingURL=tmagic-editor.es.js.map