@tmagic/editor 1.0.0-beta.1

package/dist/tmagic-editor.umd.js

@@ -0,0 +1,4276 @@
+(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';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
+  var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
+
+  var _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+
+  const _sfc_main$j = vue.defineComponent({
+    name: "m-fields-vs-code",
+    props: ["model", "name", "config", "prop"],
+    emits: ["change"],
+    setup(props, { emit }) {
+      const language = vue.computed(() => props.config.language || "javascript");
+      const height = vue.computed(() => `${document.body.clientHeight - 168}px`);
+      return {
+        height,
+        language,
+        save(v) {
+          props.model[props.name] = v;
+          emit("change", v);
+        }
+      };
+    }
+  });
+  function _sfc_render$j(_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}`),
+      "init-values": _ctx.model[_ctx.name],
+      language: _ctx.language,
+      onSave: _ctx.save
+    }, null, 8, ["style", "init-values", "language", "onSave"]);
+  }
+  var Code = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+
+  const _sfc_main$i = vue.defineComponent({
+    name: "m-fields-code-link",
+    props: {
+      config: {
+        type: Object
+      },
+      model: {
+        type: Object
+      },
+      name: {
+        type: String
+      },
+      prop: {
+        type: String
+      }
+    },
+    emits: ["change"],
+    setup(props, { emit }) {
+      const modelValue = vue.ref({
+        form: {}
+      });
+      vue.watchEffect(() => {
+        if (!props.model || !props.name)
+          return;
+        modelValue.value.form[props.name] = serialize__default["default"](props.model[props.name], {
+          space: 2,
+          unsafe: true
+        }).replace(/"(\w+)":\s/g, "$1: ");
+      });
+      return {
+        modelValue,
+        formConfig: vue.computed(() => ({
+          ...props.config,
+          text: "",
+          type: "link",
+          form: [
+            {
+              name: props.name,
+              type: "vs-code"
+            }
+          ]
+        })),
+        changeHandler(v) {
+          if (!props.name || !props.model)
+            return;
+          try {
+            props.model[props.name] = eval(`${v[props.name]}`);
+            emit("change", props.model[props.name]);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      };
+    }
+  });
+  function _sfc_render$i(_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,
+      model: _ctx.modelValue,
+      name: "form",
+      onChange: _ctx.changeHandler
+    }, null, 8, ["config", "model", "onChange"]);
+  }
+  var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+
+  var UISelect_vue_vue_type_style_index_0_lang = '';
+
+  const _sfc_main$h = vue.defineComponent({
+    name: "m-fields-ui-select",
+    props: {
+      labelWidth: String,
+      config: Object,
+      model: Object,
+      prop: {
+        type: String,
+        default() {
+          return "";
+        }
+      },
+      name: String
+    },
+    emits: ["change"],
+    setup(props, { emit }) {
+      const services = vue.inject("services");
+      const mForm = vue.inject("mForm");
+      const val = vue.computed(() => props.model[props.name]);
+      const uiSelectMode = vue.ref(false);
+      const cancelHandler = () => {
+        if (!services?.uiService)
+          return;
+        services.uiService.set("uiSelectMode", false);
+        uiSelectMode.value = false;
+        globalThis.document.removeEventListener("ui-select", clickHandler);
+      };
+      const clickHandler = ({ detail }) => {
+        if (detail.id) {
+          props.model[props.name] = detail.id;
+          emit("change", detail.id);
+          mForm?.$emit("field-change", props.prop, detail.id);
+        }
+        if (cancelHandler) {
+          cancelHandler();
+        }
+      };
+      return {
+        val,
+        uiSelectMode,
+        toName: vue.computed(() => {
+          const config = services?.editorService.getNodeById(val.value);
+          return config?.name || "";
+        }),
+        startSelect() {
+          if (!services?.uiService)
+            return;
+          services.uiService.set("uiSelectMode", true);
+          uiSelectMode.value = true;
+          globalThis.document.addEventListener("ui-select", clickHandler);
+        },
+        cancelHandler,
+        deleteHandler() {
+          if (props.model) {
+            props.model[props.name] = "";
+            emit("change", "");
+            mForm?.$emit("field-change", props.prop, "");
+          }
+        }
+      };
+    }
+  });
+  const _hoisted_1$d = /* @__PURE__ */ vue.createElementVNode("i", {
+    class: "el-icon-delete",
+    style: { "color": "rgb(221, 75, 57)" }
+  }, "\u53D6\u6D88", -1);
+  const _hoisted_2$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) {
+    return _ctx.uiSelectMode ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: "m-fields-ui-select",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
+    }, _hoisted_2$7)) : (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: "m-fields-ui-select",
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.startSelect && _ctx.startSelect(...args))
+    }, [
+      _hoisted_3$5,
+      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1),
+      _ctx.val ? (vue.openBlock(), vue.createElementBlock("i", {
+        key: 0,
+        class: "el-icon-delete",
+        onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.deleteHandler && _ctx.deleteHandler(...args), ["stop"]))
+      })) : vue.createCommentVNode("", true)
+    ]));
+  }
+  var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+
+  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") {
+      value = serialize__default["default"](v, {
+        space: 2,
+        unsafe: true
+      }).replace(/"(\w+)":\s/g, "$1: ");
+    } else {
+      value = v;
+    }
+    if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) {
+      value = `(${value})`;
+    }
+    return value;
+  };
+  const _sfc_main$g = vue.defineComponent({
+    name: "magic-code-editor",
+    props: {
+      initValues: {
+        type: [String, Object]
+      },
+      modifiedValues: {
+        type: [String, Object]
+      },
+      type: {
+        type: [String],
+        default: () => ""
+      },
+      language: {
+        type: [String],
+        default: () => "javascript"
+      }
+    },
+    emits: ["inited", "save"],
+    setup(props, { emit }) {
+      let vsEditor = 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({
+            original: originalModel,
+            modified: modifiedModel
+          });
+        }
+        return vsEditor.setValue?.(values.value);
+      };
+      const resizeHandler = () => {
+        vsEditor?.layout();
+      };
+      const getEditorValue = () => vsEditor.getValue?.() || "";
+      const init = async () => {
+        if (!codeEditor.value)
+          return;
+        vsEditor = globalThis.monaco.editor[props.type === "diff" ? "createDiffEditor" : "create"](codeEditor.value, {
+          value: values.value,
+          language: props.language,
+          tabSize: 2,
+          theme: "vs-dark",
+          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
+          fontSize: 15,
+          formatOnPaste: true
+        });
+        setEditorValue(props.initValues, props.modifiedValues);
+        loading.value = false;
+        emit("inited", vsEditor);
+        codeEditor.value.addEventListener("keydown", (e) => {
+          if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+            e.preventDefault();
+            emit("save", getEditorValue());
+          }
+        });
+        if (props.type !== "diff") {
+          vsEditor.onDidBlurEditorWidget(() => {
+            emit("save", getEditorValue());
+          });
+        }
+        globalThis.addEventListener("resize", resizeHandler);
+      };
+      vue.watch(() => props.initValues, (v, preV) => {
+        if (vsEditor && v !== preV) {
+          setEditorValue(props.initValues, props.modifiedValues);
+        }
+      }, {
+        deep: true,
+        immediate: true
+      });
+      vue.onMounted(async () => {
+        loading.value = true;
+        await initEditor();
+        if (!globalThis.monaco) {
+          const interval = setInterval(() => {
+            if (globalThis.monaco) {
+              clearInterval(interval);
+              init();
+            }
+          }, 300);
+        } else {
+          init();
+        }
+      });
+      vue.onUnmounted(() => {
+        globalThis.removeEventListener("resize", resizeHandler);
+      });
+      return {
+        values,
+        loading,
+        codeEditor,
+        getEditor() {
+          return vsEditor;
+        },
+        setEditorValue,
+        focus() {
+          vsEditor.focus();
+        }
+      };
+    }
+  });
+  const _hoisted_1$c = {
+    ref: "codeEditor",
+    class: "magic-code-editor"
+  };
+  function _sfc_render$g(_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]]);
+
+  let $TMAGIC_EDITOR = {};
+  const setConfig = (option) => {
+    $TMAGIC_EDITOR = option;
+  };
+  const getConfig = (key) => $TMAGIC_EDITOR[key];
+
+  class UndoRedo {
+    elementList;
+    listCursor;
+    listMaxSize;
+    constructor(listMaxSize = 200) {
+      const minListMaxSize = 2;
+      this.elementList = [];
+      this.listCursor = 0;
+      this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
+    }
+    pushElement(element) {
+      this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, lodashEs.cloneDeep(element));
+      this.listCursor += 1;
+      if (this.elementList.length > this.listMaxSize) {
+        this.elementList.shift();
+        this.listCursor -= 1;
+      }
+    }
+    canUndo() {
+      return this.listCursor > 1;
+    }
+    undo() {
+      if (!this.canUndo()) {
+        return null;
+      }
+      this.listCursor -= 1;
+      return this.getCurrentElement();
+    }
+    canRedo() {
+      return this.elementList.length > this.listCursor;
+    }
+    redo() {
+      if (!this.canRedo()) {
+        return null;
+      }
+      this.listCursor += 1;
+      return this.getCurrentElement();
+    }
+    getCurrentElement() {
+      if (this.listCursor < 1) {
+        return null;
+      }
+      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
+    }
+  }
+
+  const compose = (middleware) => {
+    if (!Array.isArray(middleware))
+      throw new TypeError("Middleware \u5FC5\u987B\u662F\u4E00\u4E2A\u6570\u7EC4!");
+    for (const fn of middleware) {
+      if (typeof fn !== "function")
+        throw new TypeError("Middleware \u5FC5\u987B\u7531\u51FD\u6570\u7EC4\u6210!");
+    }
+    return (args, next) => {
+      let index = -1;
+      return dispatch(0);
+      function dispatch(i) {
+        if (i <= index)
+          return Promise.reject(new Error("next() \u88AB\u591A\u6B21\u8C03\u7528"));
+        index = i;
+        let fn = middleware[i];
+        if (i === middleware.length && next)
+          fn = next;
+        if (!fn)
+          return Promise.resolve();
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
+    };
+  };
+
+  const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
+  const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
+  class BaseService extends events.EventEmitter {
+    pluginOptionsList = {};
+    middleware = {};
+    constructor(methods) {
+      super();
+      methods.forEach((propertyName) => {
+        const scope = this;
+        const sourceMethod = scope[propertyName];
+        const beforeMethodName = methodName("before", propertyName);
+        const afterMethodName = methodName("after", propertyName);
+        this.pluginOptionsList[beforeMethodName] = [];
+        this.pluginOptionsList[afterMethodName] = [];
+        this.middleware[propertyName] = [];
+        const fn = compose(this.middleware[propertyName]);
+        Object.defineProperty(scope, propertyName, {
+          value: async (...args) => {
+            let beforeArgs = args;
+            for (const beforeMethod of this.pluginOptionsList[beforeMethodName]) {
+              let beforeReturnValue = await beforeMethod(...beforeArgs) || [];
+              if (isError(beforeReturnValue))
+                throw beforeReturnValue;
+              if (!Array.isArray(beforeReturnValue)) {
+                beforeReturnValue = [beforeReturnValue];
+              }
+              beforeArgs = beforeArgs.map((v, index) => {
+                if (typeof beforeReturnValue[index] === "undefined")
+                  return v;
+                return beforeReturnValue[index];
+              });
+            }
+            let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
+            for (const afterMethod of this.pluginOptionsList[afterMethodName]) {
+              returnValue = await afterMethod(...beforeArgs, returnValue);
+              if (isError(returnValue))
+                throw returnValue;
+            }
+            return returnValue;
+          }
+        });
+      });
+    }
+    use(options) {
+      Object.entries(options).forEach(([methodName2, method]) => {
+        if (typeof method === "function")
+          this.middleware[methodName2].push(method);
+      });
+    }
+    usePlugin(options) {
+      Object.entries(options).forEach(([methodName2, method]) => {
+        if (typeof method === "function")
+          this.pluginOptionsList[methodName2].push(method);
+      });
+    }
+  }
+
+  class History extends BaseService {
+    state = vue.reactive({
+      pageSteps: {},
+      pageId: void 0,
+      canRedo: false,
+      canUndo: false
+    });
+    constructor() {
+      super([]);
+      this.on("change", this.setCanUndoRedo);
+    }
+    changePage(page) {
+      if (!page)
+        return;
+      this.state.pageId = page.id;
+      if (!this.state.pageSteps[this.state.pageId]) {
+        const undoRedo = new UndoRedo();
+        undoRedo.pushElement({
+          data: page,
+          modifiedNodeIds: /* @__PURE__ */ new Map(),
+          nodeId: page.id
+        });
+        this.state.pageSteps[this.state.pageId] = undoRedo;
+      }
+      this.setCanUndoRedo();
+    }
+    empty() {
+      this.state.pageId = void 0;
+      this.state.pageSteps = {};
+      this.state.canRedo = false;
+      this.state.canUndo = false;
+    }
+    push(state) {
+      const undoRedo = this.getUndoRedo();
+      if (!undoRedo)
+        return null;
+      undoRedo.pushElement(state);
+      this.emit("change", state);
+      return state;
+    }
+    undo() {
+      const undoRedo = this.getUndoRedo();
+      if (!undoRedo)
+        return null;
+      const state = undoRedo.undo();
+      this.emit("change", state);
+      return state;
+    }
+    redo() {
+      const undoRedo = this.getUndoRedo();
+      if (!undoRedo)
+        return null;
+      const state = undoRedo.redo();
+      this.emit("change", state);
+      return state;
+    }
+    destroy() {
+      this.empty();
+      this.removeAllListeners();
+    }
+    getUndoRedo() {
+      if (!this.state.pageId)
+        return null;
+      return this.state.pageSteps[this.state.pageId];
+    }
+    setCanUndoRedo() {
+      const undoRedo = this.getUndoRedo();
+      this.state.canRedo = undoRedo?.canRedo() || false;
+      this.state.canUndo = undoRedo?.canUndo() || false;
+    }
+  }
+  var historyService = new History();
+
+  class Props extends BaseService {
+    state = vue.reactive({
+      propsConfigMap: {},
+      propsValueMap: {}
+    });
+    constructor() {
+      super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+    }
+    setPropsConfigs(configs) {
+      Object.keys(configs).forEach((type) => {
+        this.setPropsConfig(utils.toLine(type), configs[type]);
+      });
+      this.emit("props-configs-change");
+    }
+    setPropsConfig(type, config) {
+      this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+    }
+    async getPropsConfig(type) {
+      if (type === "area") {
+        return await this.getPropsConfig("button");
+      }
+      return lodashEs.cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+    }
+    setPropsValues(values) {
+      Object.keys(values).forEach((type) => {
+        this.setPropsValue(utils.toLine(type), values[type]);
+      });
+    }
+    setPropsValue(type, value) {
+      this.state.propsValueMap[type] = value;
+    }
+    async getPropsValue(type) {
+      if (type === "area") {
+        const value = await this.getPropsValue("button");
+        value.className = "action-area";
+        value.text = "";
+        if (value.style) {
+          value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+        }
+        return value;
+      }
+      return lodashEs.cloneDeep({
+        ...getDefaultPropsValue(type),
+        ...this.state.propsValueMap[type] || {}
+      });
+    }
+  }
+  var propsService = new Props();
+
+  var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
+    LayerOffset2["TOP"] = "top";
+    LayerOffset2["BOTTOM"] = "bottom";
+    return LayerOffset2;
+  })(LayerOffset || {});
+  var Layout = /* @__PURE__ */ ((Layout2) => {
+    Layout2["FLEX"] = "flex";
+    Layout2["FIXED"] = "fixed";
+    Layout2["RELATIVE"] = "relative";
+    Layout2["ABSOLUTE"] = "absolute";
+    return Layout2;
+  })(Layout || {});
+
+  const COPY_STORAGE_KEY = "$MagicEditorCopyData";
+  const generateId = (type) => `${type}_${lodashEs.random(1e4, false)}`;
+  const getPageList = (app) => {
+    if (app.items && Array.isArray(app.items)) {
+      return app.items.filter((item) => item.type === "page");
+    }
+    return [];
+  };
+  const getPageNameList = (pages) => pages.map((page) => page.name || "index");
+  const generatePageName = (pageNameList) => {
+    let pageLength = pageNameList.length;
+    if (!pageLength)
+      return "index";
+    let pageName = `page_${pageLength}`;
+    while (pageNameList.includes(pageName)) {
+      pageLength += 1;
+      pageName = `page_${pageLength}`;
+    }
+    return pageName;
+  };
+  const generatePageNameByApp = (app) => generatePageName(getPageNameList(getPageList(app)));
+  const updatePopId = (oldId, popId, pageConfig) => {
+    pageConfig.items?.forEach((config) => {
+      if (config.pop === oldId) {
+        config.pop = popId;
+        return;
+      }
+      if (config.popId === oldId) {
+        config.popId = popId;
+        return;
+      }
+      if (Array.isArray(config.items)) {
+        updatePopId(oldId, popId, config);
+      }
+    });
+  };
+  const setNewItemId = (config, parent) => {
+    const oldId = config.id;
+    config.id = generateId(config.type);
+    config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
+    if (utils.isPop(config) && parent?.type === "page") {
+      updatePopId(oldId, config.id, parent);
+    }
+    if (config.items && Array.isArray(config.items)) {
+      config.items.forEach((item) => setNewItemId(item, config));
+    }
+  };
+  const isFixed = (node) => node.style?.position === "fixed";
+  const getNodeIndex = (node, parent) => {
+    const items = parent?.items || [];
+    return items.findIndex((item) => `${item.id}` === `${node.id}`);
+  };
+  const toRelative = (node) => {
+    node.style = {
+      ...node.style || {},
+      position: "relative",
+      top: 0,
+      left: 0
+    };
+    return node;
+  };
+  const initPosition = (node, layout) => {
+    if (layout === Layout.ABSOLUTE) {
+      node.style = {
+        position: "absolute",
+        ...node.style || {}
+      };
+      return node;
+    }
+    if (layout === Layout.RELATIVE) {
+      return toRelative(node);
+    }
+    return node;
+  };
+  const setLayout = (node, layout) => {
+    node.items?.forEach((child) => {
+      if (utils.isPop(child))
+        return;
+      child.style = child.style || {};
+      if (child.style.position === "fixed")
+        return;
+      if (layout !== Layout.RELATIVE) {
+        child.style.position = "absolute";
+      } else {
+        toRelative(child);
+        child.style.right = "auto";
+        child.style.bottom = "auto";
+      }
+    });
+    return node;
+  };
+  const change2Fixed = (node, root) => {
+    const path = utils.getNodePath(node.id, root.items);
+    const offset = {
+      left: 0,
+      top: 0
+    };
+    path.forEach((value) => {
+      offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
+      offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
+    });
+    node.style = {
+      ...node.style || {},
+      ...offset
+    };
+    return node;
+  };
+  const Fixed2Other = async (node, root, getLayout) => {
+    const path = utils.getNodePath(node.id, root.items);
+    const cur = path.pop();
+    const offset = {
+      left: cur?.style?.left || 0,
+      top: cur?.style?.top || 0
+    };
+    path.forEach((value) => {
+      offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
+      offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
+    });
+    const parent = path.pop();
+    if (!parent) {
+      return toRelative(node);
+    }
+    const layout = await getLayout(parent);
+    if (layout !== Layout.RELATIVE) {
+      node.style = {
+        ...node.style || {},
+        ...offset,
+        position: "absolute"
+      };
+      return node;
+    }
+    return toRelative(node);
+  };
+  const defaults = (object, source) => {
+    let o = source;
+    if (Array.isArray(object)) {
+      o = object;
+    }
+    Object.entries(o).forEach(([key, value]) => {
+      if (typeof object[key] === "undefined") {
+        object[key] = value;
+        return;
+      }
+      if (value && typeof value !== "string" && Object.keys(value).length) {
+        object[key] = defaults(lodashEs.cloneDeep(object[key]), value);
+      }
+    });
+    return object;
+  };
+
+  const log = (...args) => {
+  };
+  const info = (...args) => {
+  };
+  const warn = (...args) => {
+  };
+  const debug = (...args) => {
+  };
+  const error = (...args) => {
+  };
+
+  class Editor$1 extends BaseService {
+    isHistoryStateChange = false;
+    state = vue.reactive({
+      root: null,
+      page: null,
+      parent: null,
+      node: null,
+      stage: null,
+      modifiedNodeIds: /* @__PURE__ */ new Map()
+    });
+    constructor() {
+      super([
+        "getLayout",
+        "select",
+        "add",
+        "remove",
+        "update",
+        "sort",
+        "copy",
+        "paste",
+        "alignCenter",
+        "moveLayer",
+        "undo",
+        "redo"
+      ]);
+    }
+    set(name, value) {
+      this.state[name] = value;
+      if (name === "root") {
+        this.emit("root-change", value);
+      }
+    }
+    get(name) {
+      return this.state[name];
+    }
+    getNodeInfo(id) {
+      const root = this.get("root");
+      if (!root)
+        return {};
+      if (id === root.id) {
+        return { node: root };
+      }
+      const path = utils.getNodePath(id, root.items);
+      if (!path.length)
+        return {};
+      path.unshift(root);
+      const info = {};
+      info.node = path[path.length - 1];
+      info.parent = path[path.length - 2];
+      path.forEach((item) => {
+        if (item.type === "page") {
+          info.page = item;
+          return;
+        }
+      });
+      return info;
+    }
+    getNodeById(id) {
+      const { node } = this.getNodeInfo(id);
+      return node;
+    }
+    getParentById(id) {
+      if (!this.get("root"))
+        return;
+      const { parent } = this.getNodeInfo(id);
+      return parent;
+    }
+    async getLayout(node) {
+      if (node.layout) {
+        return node.layout;
+      }
+      if (!node.style?.position) {
+        return Layout.RELATIVE;
+      }
+      return Layout.ABSOLUTE;
+    }
+    async select(config2) {
+      let id;
+      if (typeof config2 === "string" || typeof config2 === "number") {
+        id = config2;
+      } else {
+        id = config2.id;
+      }
+      if (!id) {
+        throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
+      }
+      const { node, parent, page } = this.getNodeInfo(id);
+      if (!node)
+        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
+      this.set("node", node);
+      this.set("page", page || null);
+      this.set("parent", parent || null);
+      if (page) {
+        historyService.changePage(vue.toRaw(page));
+      } else {
+        historyService.empty();
+      }
+      return node;
+    }
+    async add({ type, ...config2 }, parent) {
+      const curNode = this.get("node");
+      let parentNode;
+      if (type === "page") {
+        parentNode = this.get("root");
+      } else if (parent && typeof parent !== "function") {
+        parentNode = parent;
+      } else if (curNode.items) {
+        parentNode = curNode;
+      } else {
+        parentNode = this.getParentById(curNode.id);
+      }
+      if (!parentNode)
+        throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
+      const layout = await this.getLayout(parentNode);
+      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type)), ...config2 }, layout);
+      if ((parentNode?.type === "app" || curNode.type === "app") && newNode.type !== "page") {
+        throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
+      }
+      parentNode?.items?.push(newNode);
+      await this.get("stage")?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
+      await this.select(newNode);
+      this.addModifiedNodeId(newNode.id);
+      this.pushHistoryState();
+      return newNode;
+    }
+    async remove(node) {
+      if (!node?.id)
+        return;
+      const root = this.get("root");
+      if (!root)
+        throw new Error("\u6CA1\u6709root");
+      const { parent, node: curNode } = this.getNodeInfo(node.id);
+      if (!parent || !curNode)
+        throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
+      const index = getNodeIndex(curNode, parent);
+      if (typeof index !== "number" || index === -1)
+        throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
+      parent.items?.splice(index, 1);
+      this.get("stage")?.remove({ id: node.id, root: this.get("root") });
+      if (node.type === "page") {
+        await this.select(root.items[0] || root);
+      } else {
+        await this.select(parent);
+      }
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+      return node;
+    }
+    async update(config2) {
+      if (!config2?.id)
+        throw new Error("\u6CA1\u6709\u914D\u7F6E\u6216\u8005\u914D\u7F6E\u7F3A\u5C11id\u503C");
+      const info = this.getNodeInfo(config2.id);
+      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)
+        throw new Error("\u914D\u7F6E\u7F3A\u5C11type\u503C");
+      if (newConfig.type === "app") {
+        this.set("root", newConfig);
+        return newConfig;
+      }
+      const parentNodeItems = parent.items;
+      const index = getNodeIndex(newConfig, parent);
+      if (!parentNodeItems || typeof index === "undefined" || index === -1)
+        throw new Error("\u66F4\u65B0\u7684\u8282\u70B9\u672A\u627E\u5230");
+      const newLayout = await this.getLayout(newConfig);
+      const layout = await this.getLayout(node);
+      if (newLayout !== layout) {
+        newConfig = setLayout(newConfig, newLayout);
+      }
+      parentNodeItems[index] = newConfig;
+      if (newConfig.id === this.get("node").id) {
+        this.set("node", newConfig);
+      }
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: this.get("root") });
+      if (newConfig.type === "page") {
+        this.set("page", newConfig);
+      }
+      this.addModifiedNodeId(newConfig.id);
+      this.pushHistoryState();
+      return newConfig;
+    }
+    async sort(id1, id2) {
+      const node = this.get("node");
+      const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
+      const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
+      if (index2 < 0)
+        return;
+      const index1 = parent.items.findIndex((node2) => `${node2.id}` === `${id1}`);
+      parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
+      await this.update(parent);
+      await this.select(node);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+    }
+    async copy(config2) {
+      globalThis.localStorage.setItem(COPY_STORAGE_KEY, serialize__default["default"](config2));
+    }
+    async paste(position = {}) {
+      const configStr = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
+      let config = {};
+      if (!configStr) {
+        return;
+      }
+      try {
+        eval(`config = ${configStr}`);
+      } catch (e) {
+        console.error(e);
+        return;
+      }
+      setNewItemId(config, this.get("root"));
+      if (config.style) {
+        config.style = {
+          ...config.style,
+          ...position
+        };
+      }
+      return await this.add(config);
+    }
+    async alignCenter(config2) {
+      const parent = this.get("parent");
+      const node = this.get("node");
+      const layout = await this.getLayout(parent);
+      if (layout === Layout.RELATIVE) {
+        return;
+      }
+      if (parent.style?.width && node.style?.width) {
+        node.style.left = (parent.style.width - node.style.width) / 2;
+      }
+      await this.update(node);
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(node)), root: this.get("root") });
+      this.addModifiedNodeId(config2.id);
+      this.pushHistoryState();
+      return config2;
+    }
+    async moveLayer(offset) {
+      const parent = this.get("parent");
+      const node = this.get("node");
+      const brothers = parent?.items || [];
+      const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
+      if (offset === LayerOffset.BOTTOM) {
+        brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
+      } else if (offset === LayerOffset.TOP) {
+        brothers.splice(0, 0, brothers.splice(index, 1)[0]);
+      } else {
+        brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
+      }
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(parent)), root: this.get("root") });
+    }
+    async undo() {
+      const value = historyService.undo();
+      await this.changeHistoryState(value);
+      return value;
+    }
+    async redo() {
+      const value = historyService.redo();
+      await this.changeHistoryState(value);
+      return value;
+    }
+    destroy() {
+      this.removeAllListeners();
+      this.set("root", null);
+      this.set("node", null);
+      this.set("page", null);
+      this.set("parent", null);
+    }
+    resetModifiedNodeId() {
+      this.get("modifiedNodeIds").clear();
+    }
+    addModifiedNodeId(id) {
+      if (!this.isHistoryStateChange) {
+        this.get("modifiedNodeIds").set(id, id);
+      }
+    }
+    pushHistoryState() {
+      const curNode = lodashEs.cloneDeep(vue.toRaw(this.get("node")));
+      if (!this.isHistoryStateChange) {
+        historyService.push({
+          data: lodashEs.cloneDeep(vue.toRaw(this.get("page"))),
+          modifiedNodeIds: this.get("modifiedNodeIds"),
+          nodeId: curNode.id
+        });
+      }
+      this.isHistoryStateChange = false;
+    }
+    async changeHistoryState(value) {
+      if (!value)
+        return;
+      this.isHistoryStateChange = true;
+      await this.update(value.data);
+      this.set("modifiedNodeIds", value.modifiedNodeIds);
+      setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+    }
+    async toggleFixedPosition(dist, src, root) {
+      let newConfig = lodashEs.cloneDeep(dist);
+      if (!utils.isPop(src) && newConfig.style?.position) {
+        if (isFixed(newConfig) && !isFixed(src)) {
+          newConfig = change2Fixed(newConfig, root);
+        } else if (!isFixed(newConfig) && isFixed(src)) {
+          newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+        }
+      }
+      return newConfig;
+    }
+  }
+  var editorService = new Editor$1();
+
+  const eventMap = vue.reactive({});
+  const methodMap = vue.reactive({});
+  class Events extends BaseService {
+    constructor() {
+      super([]);
+    }
+    init(componentGroupList) {
+      componentGroupList.forEach((group) => {
+        group.items.forEach((element) => {
+          const type = utils.toLine(element.type);
+          if (!this.getEvent(type)) {
+            this.setEvent(type, core.DEFAULT_EVENTS);
+          }
+          if (!this.getMethod(type)) {
+            this.setMethod(type, core.DEFAULT_METHODS);
+          }
+        });
+      });
+    }
+    setEvents(events) {
+      Object.keys(events).forEach((type) => {
+        this.setEvent(utils.toLine(type), events[type] || []);
+      });
+    }
+    setEvent(type, events) {
+      eventMap[type] = [...core.DEFAULT_EVENTS, ...events];
+    }
+    getEvent(type) {
+      return lodashEs.cloneDeep(eventMap[type] || core.DEFAULT_EVENTS);
+    }
+    setMethods(methods) {
+      Object.keys(methods).forEach((type) => {
+        this.setMethod(utils.toLine(type), methods[type] || []);
+      });
+    }
+    setMethod(type, method) {
+      methodMap[type] = [...core.DEFAULT_METHODS, ...method];
+    }
+    getMethod(type) {
+      return lodashEs.cloneDeep(methodMap[type] || core.DEFAULT_METHODS);
+    }
+  }
+  var eventsService = new Events();
+
+  const fillConfig = (config = []) => [
+    {
+      type: "tab",
+      items: [
+        {
+          title: "\u5C5E\u6027",
+          labelWidth: "80px",
+          items: [
+            {
+              text: "type",
+              name: "type",
+              type: "hidden"
+            },
+            {
+              name: "id",
+              type: "display",
+              text: "id"
+            },
+            {
+              name: "name",
+              text: "\u7EC4\u4EF6\u540D\u79F0"
+            },
+            ...config
+          ]
+        },
+        {
+          title: "\u6837\u5F0F",
+          labelWidth: "80px",
+          items: [
+            {
+              name: "style",
+              items: [
+                {
+                  type: "fieldset",
+                  legend: "\u4F4D\u7F6E",
+                  items: [
+                    {
+                      name: "position",
+                      type: "checkbox",
+                      activeValue: "fixed",
+                      inactiveValue: "absolute",
+                      defaultValue: "absolute",
+                      text: "\u56FA\u5B9A\u5B9A\u4F4D"
+                    },
+                    {
+                      name: "left",
+                      text: "left"
+                    },
+                    {
+                      name: "top",
+                      text: "top",
+                      disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
+                    },
+                    {
+                      name: "right",
+                      text: "right"
+                    },
+                    {
+                      name: "bottom",
+                      text: "bottom",
+                      disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+                    }
+                  ]
+                },
+                {
+                  type: "fieldset",
+                  legend: "\u76D2\u5B50",
+                  items: [
+                    {
+                      name: "width",
+                      text: "\u5BBD\u5EA6"
+                    },
+                    {
+                      name: "height",
+                      text: "\u9AD8\u5EA6"
+                    }
+                  ]
+                },
+                {
+                  type: "fieldset",
+                  legend: "\u80CC\u666F",
+                  items: [
+                    {
+                      name: "backgroundImage",
+                      text: "\u80CC\u666F\u56FE"
+                    },
+                    {
+                      name: "backgroundColor",
+                      text: "\u80CC\u666F\u989C\u8272",
+                      type: "colorPicker"
+                    },
+                    {
+                      name: "backgroundRepeat",
+                      text: "\u80CC\u666F\u56FE\u91CD\u590D",
+                      type: "select",
+                      defaultValue: "no-repeat",
+                      options: [
+                        { text: "repeat", value: "repeat" },
+                        { text: "repeat-x", value: "repeat-x" },
+                        { text: "repeat-y", value: "repeat-y" },
+                        { text: "no-repeat", value: "no-repeat" },
+                        { text: "inherit", value: "inherit" }
+                      ]
+                    },
+                    {
+                      name: "backgroundSize",
+                      text: "\u80CC\u666F\u56FE\u5927\u5C0F",
+                      defaultValue: "100% 100%"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: "\u4E8B\u4EF6",
+          items: [
+            {
+              type: "table",
+              name: "events",
+              items: [
+                {
+                  name: "name",
+                  label: "\u4E8B\u4EF6\u540D",
+                  type: "select",
+                  options: (mForm, { formValue }) => eventsService.getEvent(formValue.type).map((option) => ({
+                    text: option.label,
+                    value: option.value
+                  }))
+                },
+                {
+                  name: "to",
+                  label: "\u8054\u52A8\u7EC4\u4EF6",
+                  type: "ui-select"
+                },
+                {
+                  name: "method",
+                  label: "\u52A8\u4F5C",
+                  type: "select",
+                  options: (mForm, { model }) => {
+                    const node = editorService.getNodeById(model.to);
+                    if (!node)
+                      return [];
+                    return eventsService.getMethod(node.type).map((option) => ({
+                      text: option.label,
+                      value: option.value
+                    }));
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: "\u9AD8\u7EA7",
+          labelWidth: "80px",
+          items: [
+            {
+              type: "code-link",
+              name: "created",
+              text: "created",
+              formTitle: "created"
+            }
+          ]
+        }
+      ]
+    }
+  ];
+  const DEFAULT_CONFIG = fillConfig([]);
+  const getDefaultPropsValue = (type) => ({
+    type,
+    id: generateId(type),
+    style: {},
+    name: type
+  });
+
+  const _sfc_main$f = vue.defineComponent({
+    components: { Plus: icons.Plus },
+    setup() {
+      const services = vue.inject("services");
+      return {
+        clickHandler() {
+          const { editorService } = services || {};
+          if (!editorService)
+            return;
+          editorService.add({
+            type: "page",
+            name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+          });
+        }
+      };
+    }
+  });
+  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) {
+    const _component_plus = vue.resolveComponent("plus");
+    const _component_el_icon = vue.resolveComponent("el-icon");
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+      vue.createElementVNode("div", _hoisted_2$6, [
+        vue.createElementVNode("div", {
+          class: "m-editor-empty-button",
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
+        }, [
+          vue.createElementVNode("div", null, [
+            vue.createVNode(_component_el_icon, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_plus)
+              ]),
+              _: 1
+            })
+          ]),
+          _hoisted_3$4
+        ])
+      ])
+    ]);
+  }
+  var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+
+  /*
+  Copyright (c) 2018 Daybrush
+  @name: @daybrush/utils
+  license: MIT
+  author: Daybrush
+  repository: https://github.com/daybrush/utils
+  @version 1.6.0
+  */
+  /**
+  * get string "object"
+  * @memberof Consts
+  * @example
+  import {OBJECT} from "@daybrush/utils";
+
+  console.log(OBJECT); // "object"
+  */
+
+  var OBJECT = "object";
+  /**
+  * Check the type that the value is object.
+  * @memberof Utils
+  * @param {string} value - Value to check the type
+  * @return {} true if the type is correct, false otherwise
+  * @example
+  import {isObject} from "@daybrush/utils";
+
+  console.log(isObject({})); // true
+  console.log(isObject(undefined)); // false
+  console.log(isObject("")); // false
+  console.log(isObject(null)); // false
+  */
+
+  function isObject(value) {
+    return value && typeof value === OBJECT;
+  }
+  /**
+  * Date.now() method
+  * @memberof CrossBrowser
+  * @return {number} milliseconds
+  * @example
+  import {now} from "@daybrush/utils";
+
+  console.log(now()); // 12121324241(milliseconds)
+  */
+
+  function now() {
+    return Date.now ? Date.now() : new Date().getTime();
+  }
+  /**
+  * Returns the index of the first element in the array that satisfies the provided testing function.
+  * @function
+  * @memberof CrossBrowser
+  * @param - The array `findIndex` was called upon.
+  * @param - A function to execute on each value in the array until the function returns true, indicating that the satisfying element was found.
+  * @param - Returns defaultIndex if not found by the function.
+  * @example
+  import { findIndex } from "@daybrush/utils";
+
+  findIndex([{a: 1}, {a: 2}, {a: 3}, {a: 4}], ({ a }) => a === 2); // 1
+  */
+
+  function findIndex(arr, callback, defaultIndex) {
+    if (defaultIndex === void 0) {
+      defaultIndex = -1;
+    }
+
+    var length = arr.length;
+
+    for (var i = 0; i < length; ++i) {
+      if (callback(arr[i], i, arr)) {
+        return i;
+      }
+    }
+
+    return defaultIndex;
+  }
+  /**
+  * Sets up a function that will be called whenever the specified event is delivered to the target
+  * @memberof DOM
+  * @param - event target
+  * @param - A case-sensitive string representing the event type to listen for.
+  * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
+  * @param - An options object that specifies characteristics about the event listener.
+  * @example
+  import {addEvent} from "@daybrush/utils";
+
+  addEvent(el, "click", e => {
+    console.log(e);
+  });
+  */
+
+  function addEvent(el, type, listener, options) {
+    el.addEventListener(type, listener, options);
+  }
+  /**
+  * removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
+  * @memberof DOM
+  * @param - event target
+  * @param - A case-sensitive string representing the event type to listen for.
+  * @param - The EventListener function of the event handler to remove from the event target.
+  * @param - An options object that specifies characteristics about the event listener.
+  * @example
+  import {addEvent, removeEvent} from "@daybrush/utils";
+  const listener = e => {
+    console.log(e);
+  };
+  addEvent(el, "click", listener);
+  removeEvent(el, "click", listener);
+  */
+
+  function removeEvent(el, type, listener, options) {
+    el.removeEventListener(type, listener, options);
+  }
+
+  /*
+  Copyright (c) 2019 Daybrush
+  name: @scena/event-emitter
+  license: MIT
+  author: Daybrush
+  repository: git+https://github.com/daybrush/gesture.git
+  version: 1.0.5
+  */
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  var __assign$1 = function () {
+    __assign$1 = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+
+      return t;
+    };
+
+    return __assign$1.apply(this, arguments);
+  };
+  function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+
+    for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
+
+    return r;
+  }
+
+  /**
+   * Implement EventEmitter on object or component.
+   */
+
+  var EventEmitter =
+  /*#__PURE__*/
+  function () {
+    function EventEmitter() {
+      this._events = {};
+    }
+    /**
+     * Add a listener to the registered event.
+     * @param - Name of the event to be added
+     * @param - listener function of the event to be added
+     * @example
+     * import EventEmitter from "@scena/event-emitter";
+     * cosnt emitter = new EventEmitter();
+     *
+     * // Add listener in "a" event
+     * emitter.on("a", () => {
+     * });
+     * // Add listeners
+     * emitter.on({
+     *  a: () => {},
+     *  b: () => {},
+     * });
+     */
+
+
+    var __proto = EventEmitter.prototype;
+
+    __proto.on = function (eventName, listener) {
+      if (isObject(eventName)) {
+        for (var name in eventName) {
+          this.on(name, eventName[name]);
+        }
+      } else {
+        this._addEvent(eventName, listener, {});
+      }
+
+      return this;
+    };
+    /**
+     * Remove listeners registered in the event target.
+     * @param - Name of the event to be removed
+     * @param - listener function of the event to be removed
+     * @example
+     * import EventEmitter from "@scena/event-emitter";
+     * cosnt emitter = new EventEmitter();
+     *
+     * // Remove all listeners.
+     * emitter.off();
+     *
+     * // Remove all listeners in "A" event.
+     * emitter.off("a");
+     *
+     *
+     * // Remove "listener" listener in "a" event.
+     * emitter.off("a", listener);
+     */
+
+
+    __proto.off = function (eventName, listener) {
+      if (!eventName) {
+        this._events = {};
+      } else if (isObject(eventName)) {
+        for (var name in eventName) {
+          this.off(name);
+        }
+      } else if (!listener) {
+        this._events[eventName] = [];
+      } else {
+        var events = this._events[eventName];
+
+        if (events) {
+          var index = findIndex(events, function (e) {
+            return e.listener === listener;
+          });
+
+          if (index > -1) {
+            events.splice(index, 1);
+          }
+        }
+      }
+
+      return this;
+    };
+    /**
+     * Add a disposable listener and Use promise to the registered event.
+     * @param - Name of the event to be added
+     * @param - disposable listener function of the event to be added
+     * @example
+     * import EventEmitter from "@scena/event-emitter";
+     * cosnt emitter = new EventEmitter();
+     *
+     * // Add a disposable listener in "a" event
+     * emitter.once("a", () => {
+     * });
+     *
+     * // Use Promise
+     * emitter.once("a").then(e => {
+     * });
+     */
+
+
+    __proto.once = function (eventName, listener) {
+      var _this = this;
+
+      if (listener) {
+        this._addEvent(eventName, listener, {
+          once: true
+        });
+      }
+
+      return new Promise(function (resolve) {
+        _this._addEvent(eventName, resolve, {
+          once: true
+        });
+      });
+    };
+    /**
+     * Fires an event to call listeners.
+     * @param - Event name
+     * @param - Event parameter
+     * @return If false, stop the event.
+     * @example
+     *
+     * import EventEmitter from "@scena/event-emitter";
+     *
+     *
+     * const emitter = new EventEmitter();
+     *
+     * emitter.on("a", e => {
+     * });
+     *
+     *
+     * emitter.emit("a", {
+     *   a: 1,
+     * });
+     */
+
+
+    __proto.emit = function (eventName, param) {
+      var _this = this;
+
+      if (param === void 0) {
+        param = {};
+      }
+
+      var events = this._events[eventName];
+
+      if (!eventName || !events) {
+        return true;
+      }
+
+      var isStop = false;
+      param.eventType = eventName;
+
+      param.stop = function () {
+        isStop = true;
+      };
+
+      param.currentTarget = this;
+
+      __spreadArrays(events).forEach(function (info) {
+        info.listener(param);
+
+        if (info.once) {
+          _this.off(eventName, info.listener);
+        }
+      });
+
+      return !isStop;
+    };
+    /**
+     * Fires an event to call listeners.
+     * @param - Event name
+     * @param - Event parameter
+     * @return If false, stop the event.
+     * @example
+     *
+     * import EventEmitter from "@scena/event-emitter";
+     *
+     *
+     * const emitter = new EventEmitter();
+     *
+     * emitter.on("a", e => {
+     * });
+     *
+     *
+     * emitter.emit("a", {
+     *   a: 1,
+     * });
+     */
+
+    /**
+    * Fires an event to call listeners.
+    * @param - Event name
+    * @param - Event parameter
+    * @return If false, stop the event.
+    * @example
+    *
+    * import EventEmitter from "@scena/event-emitter";
+    *
+    *
+    * const emitter = new EventEmitter();
+    *
+    * emitter.on("a", e => {
+    * });
+    *
+    * // emit
+    * emitter.trigger("a", {
+    *   a: 1,
+    * });
+    */
+
+
+    __proto.trigger = function (eventName, param) {
+      if (param === void 0) {
+        param = {};
+      }
+
+      return this.emit(eventName, param);
+    };
+
+    __proto._addEvent = function (eventName, listener, options) {
+      var events = this._events;
+      events[eventName] = events[eventName] || [];
+      var listeners = events[eventName];
+      listeners.push(__assign$1({
+        listener: listener
+      }, options));
+    };
+
+    return EventEmitter;
+  }();
+
+  var EventEmitter$1 = EventEmitter;
+
+  /*
+  Copyright (c) 2019 Daybrush
+  name: gesto
+  license: MIT
+  author: Daybrush
+  repository: git+https://github.com/daybrush/gesture.git
+  version: 1.5.0
+  */
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+  this file except in compliance with the License. You may obtain a copy of the
+  License at http://www.apache.org/licenses/LICENSE-2.0
+
+  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+  MERCHANTABLITY OR NON-INFRINGEMENT.
+
+  See the Apache Version 2.0 License for specific language governing permissions
+  and limitations under the License.
+  ***************************************************************************** */
+
+  /* global Reflect, Promise */
+  var extendStatics = function (d, b) {
+    extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    };
+
+    return extendStatics(d, b);
+  };
+
+  function __extends(d, b) {
+    extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  }
+  var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+
+      return t;
+    };
+
+    return __assign.apply(this, arguments);
+  };
+
+  function getRad(pos1, pos2) {
+    var distX = pos2[0] - pos1[0];
+    var distY = pos2[1] - pos1[1];
+    var rad = Math.atan2(distY, distX);
+    return rad >= 0 ? rad : rad + Math.PI * 2;
+  }
+  function getRotatiion(touches) {
+    return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180;
+  }
+  function isMultiTouch(e) {
+    return e.touches && e.touches.length >= 2;
+  }
+  function getEventClients(e) {
+    if (e.touches) {
+      return getClients(e.touches);
+    } else {
+      return [getClient(e)];
+    }
+  }
+  function getPosition(clients, prevClients, startClients) {
+    var length = startClients.length;
+
+    var _a = getAverageClient(clients, length),
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        originalClientX = _a.originalClientX,
+        originalClientY = _a.originalClientY;
+
+    var _b = getAverageClient(prevClients, length),
+        prevX = _b.clientX,
+        prevY = _b.clientY;
+
+    var _c = getAverageClient(startClients, length),
+        startX = _c.clientX,
+        startY = _c.clientY;
+
+    var deltaX = clientX - prevX;
+    var deltaY = clientY - prevY;
+    var distX = clientX - startX;
+    var distY = clientY - startY;
+    return {
+      clientX: originalClientX,
+      clientY: originalClientY,
+      deltaX: deltaX,
+      deltaY: deltaY,
+      distX: distX,
+      distY: distY
+    };
+  }
+  function getDist(clients) {
+    return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2));
+  }
+  function getClients(touches) {
+    var length = Math.min(touches.length, 2);
+    var clients = [];
+
+    for (var i = 0; i < length; ++i) {
+      clients.push(getClient(touches[i]));
+    }
+
+    return clients;
+  }
+  function getClient(e) {
+    return {
+      clientX: e.clientX,
+      clientY: e.clientY
+    };
+  }
+  function getAverageClient(clients, length) {
+    if (length === void 0) {
+      length = clients.length;
+    }
+
+    var sumClient = {
+      clientX: 0,
+      clientY: 0,
+      originalClientX: 0,
+      originalClientY: 0
+    };
+
+    for (var i = 0; i < length; ++i) {
+      var client = clients[i];
+      sumClient.originalClientX += "originalClientX" in client ? client.originalClientX : client.clientX;
+      sumClient.originalClientY += "originalClientY" in client ? client.originalClientY : client.clientY;
+      sumClient.clientX += client.clientX;
+      sumClient.clientY += client.clientY;
+    }
+
+    if (!length) {
+      return sumClient;
+    }
+
+    return {
+      clientX: sumClient.clientX / length,
+      clientY: sumClient.clientY / length,
+      originalClientX: sumClient.originalClientX / length,
+      originalClientY: sumClient.originalClientY / length
+    };
+  }
+
+  var ClientStore =
+  /*#__PURE__*/
+  function () {
+    function ClientStore(clients) {
+      this.prevClients = [];
+      this.startClients = [];
+      this.movement = 0;
+      this.length = 0;
+      this.startClients = clients;
+      this.prevClients = clients;
+      this.length = clients.length;
+    }
+
+    var __proto = ClientStore.prototype;
+
+    __proto.addClients = function (clients) {
+      if (clients === void 0) {
+        clients = this.prevClients;
+      }
+
+      var position = this.getPosition(clients);
+      var deltaX = position.deltaX,
+          deltaY = position.deltaY;
+      this.movement += Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      this.prevClients = clients;
+      return position;
+    };
+
+    __proto.getAngle = function (clients) {
+      if (clients === void 0) {
+        clients = this.prevClients;
+      }
+
+      return getRotatiion(clients);
+    };
+
+    __proto.getRotation = function (clients) {
+      if (clients === void 0) {
+        clients = this.prevClients;
+      }
+
+      return getRotatiion(clients) - getRotatiion(this.startClients);
+    };
+
+    __proto.getPosition = function (clients) {
+      return getPosition(clients || this.prevClients, this.prevClients, this.startClients);
+    };
+
+    __proto.getPositions = function (clients) {
+      if (clients === void 0) {
+        clients = this.prevClients;
+      }
+
+      var prevClients = this.prevClients;
+      return this.startClients.map(function (startClient, i) {
+        return getPosition([clients[i]], [prevClients[i]], [startClient]);
+      });
+    };
+
+    __proto.getMovement = function (clients) {
+      var movement = this.movement;
+
+      if (!clients) {
+        return movement;
+      }
+
+      var currentClient = getAverageClient(clients, this.length);
+      var prevClient = getAverageClient(this.prevClients, this.length);
+      var deltaX = currentClient.clientX - prevClient.clientX;
+      var deltaY = currentClient.clientY - prevClient.clientY;
+      return Math.sqrt(deltaX * deltaX + deltaY * deltaY) + movement;
+    };
+
+    __proto.getDistance = function (clients) {
+      if (clients === void 0) {
+        clients = this.prevClients;
+      }
+
+      return getDist(clients);
+    };
+
+    __proto.getScale = function (clients) {
+      if (clients === void 0) {
+        clients = this.prevClients;
+      }
+
+      return getDist(clients) / getDist(this.startClients);
+    };
+
+    __proto.move = function (deltaX, deltaY) {
+      this.startClients.forEach(function (client) {
+        client.clientX -= deltaX;
+        client.clientY -= deltaY;
+      });
+      this.prevClients.forEach(function (client) {
+        client.clientX -= deltaX;
+        client.clientY -= deltaY;
+      });
+    };
+
+    return ClientStore;
+  }();
+
+  var INPUT_TAGNAMES = ["textarea", "input"];
+  /**
+   * You can set up drag, pinch events in any browser.
+   */
+
+  var Gesto =
+  /*#__PURE__*/
+  function (_super) {
+    __extends(Gesto, _super);
+    /**
+     *
+     */
+
+
+    function Gesto(targets, options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      var _this = _super.call(this) || this;
+
+      _this.options = {};
+      _this.flag = false;
+      _this.pinchFlag = false;
+      _this.datas = {};
+      _this.isDrag = false;
+      _this.isPinch = false;
+      _this.isMouse = false;
+      _this.isTouch = false;
+      _this.clientStores = [];
+      _this.targets = [];
+      _this.prevTime = 0;
+      _this.doubleFlag = false;
+
+      _this.onDragStart = function (e, isTrusted) {
+        if (isTrusted === void 0) {
+          isTrusted = true;
+        }
+
+        if (!_this.flag && e.cancelable === false) {
+          return;
+        }
+
+        var _a = _this.options,
+            container = _a.container,
+            pinchOutside = _a.pinchOutside,
+            preventRightClick = _a.preventRightClick,
+            preventDefault = _a.preventDefault,
+            checkInput = _a.checkInput;
+        var isTouch = _this.isTouch;
+        var isDragStart = !_this.flag;
+
+        if (isDragStart) {
+          var activeElement = document.activeElement;
+          var target = e.target;
+          var tagName = target.tagName.toLowerCase();
+          var hasInput = INPUT_TAGNAMES.indexOf(tagName) > -1;
+          var hasContentEditable = target.isContentEditable;
+
+          if (hasInput || hasContentEditable) {
+            if (checkInput || activeElement === target) {
+              // force false or already focused.
+              return false;
+            }
+
+            if (activeElement && hasContentEditable && activeElement.isContentEditable && activeElement.contains(target)) {
+              return false;
+            }
+          } else if ((preventDefault || e.type === "touchstart") && activeElement) {
+            var activeTagName = activeElement.tagName;
+
+            if (activeElement.isContentEditable || INPUT_TAGNAMES.indexOf(activeTagName) > -1) {
+              activeElement.blur();
+            }
+          }
+
+          _this.clientStores = [new ClientStore(getEventClients(e))];
+          _this.flag = true;
+          _this.isDrag = false;
+          _this.datas = {};
+
+          if (preventRightClick && (e.which === 3 || e.button === 2)) {
+            _this.initDrag();
+
+            return false;
+          }
+
+          _this.doubleFlag = now() - _this.prevTime < 200;
+
+          var result = _this.emit("dragStart", __assign({
+            datas: _this.datas,
+            inputEvent: e,
+            isTrusted: isTrusted,
+            isDouble: _this.doubleFlag
+          }, _this.getCurrentStore().getPosition()));
+
+          if (result === false) {
+            _this.initDrag();
+          }
+
+          _this.flag && preventDefault && e.preventDefault();
+        }
+
+        if (!_this.flag) {
+          return false;
+        }
+
+        var timer = 0;
+
+        if (isDragStart && isTouch && pinchOutside) {
+          timer = setTimeout(function () {
+            addEvent(container, "touchstart", _this.onDragStart, {
+              passive: false
+            });
+          });
+        }
+
+        if (!isDragStart && isTouch && pinchOutside) {
+          removeEvent(container, "touchstart", _this.onDragStart);
+        }
+
+        if (_this.flag && isMultiTouch(e)) {
+          clearTimeout(timer);
+
+          if (isDragStart && e.touches.length !== e.changedTouches.length) {
+            return;
+          }
+
+          if (!_this.pinchFlag) {
+            _this.onPinchStart(e);
+          }
+        }
+      };
+
+      _this.onDrag = function (e, isScroll) {
+        if (!_this.flag) {
+          return;
+        }
+
+        var clients = getEventClients(e);
+
+        var result = _this.moveClients(clients, e, false);
+
+        if (_this.pinchFlag || result.deltaX || result.deltaY) {
+          var dragResult = _this.emit("drag", __assign({}, result, {
+            isScroll: !!isScroll,
+            inputEvent: e
+          }));
+
+          if (dragResult === false) {
+            _this.stop();
+
+            return;
+          }
+        }
+
+        if (_this.pinchFlag) {
+          _this.onPinch(e, clients);
+        }
+
+        _this.getCurrentStore().addClients(clients);
+      };
+
+      _this.onDragEnd = function (e) {
+        if (!_this.flag) {
+          return;
+        }
+
+        var _a = _this.options,
+            pinchOutside = _a.pinchOutside,
+            container = _a.container;
+
+        if (_this.isTouch && pinchOutside) {
+          removeEvent(container, "touchstart", _this.onDragStart);
+        }
+
+        _this.flag = false;
+
+        var position = _this.getCurrentStore().getPosition();
+
+        var currentTime = now();
+        var isDouble = !_this.isDrag && _this.doubleFlag;
+        _this.prevTime = _this.isDrag || isDouble ? 0 : currentTime;
+
+        _this.emit("dragEnd", __assign({
+          datas: _this.datas,
+          isDouble: isDouble,
+          isDrag: _this.isDrag,
+          isClick: !_this.isDrag,
+          inputEvent: e
+        }, position));
+
+        if (_this.pinchFlag) {
+          _this.onPinchEnd(e);
+        }
+
+        _this.clientStores = [];
+      };
+
+      _this.onBlur = function () {
+        _this.onDragEnd();
+      };
+
+      var elements = [].concat(targets);
+      _this.options = __assign({
+        checkInput: false,
+        container: elements.length > 1 ? window : elements[0],
+        preventRightClick: true,
+        preventDefault: true,
+        checkWindowBlur: false,
+        pinchThreshold: 0,
+        events: ["touch", "mouse"]
+      }, options);
+      var _a = _this.options,
+          container = _a.container,
+          events = _a.events,
+          checkWindowBlur = _a.checkWindowBlur;
+      _this.isTouch = events.indexOf("touch") > -1;
+      _this.isMouse = events.indexOf("mouse") > -1;
+      _this.targets = elements;
+
+      if (_this.isMouse) {
+        elements.forEach(function (el) {
+          addEvent(el, "mousedown", _this.onDragStart);
+        });
+        addEvent(container, "mousemove", _this.onDrag);
+        addEvent(container, "mouseup", _this.onDragEnd);
+        addEvent(container, "contextmenu", _this.onDragEnd);
+      }
+
+      if (checkWindowBlur) {
+        addEvent(window, "blur", _this.onBlur);
+      }
+
+      if (_this.isTouch) {
+        var passive_1 = {
+          passive: false
+        };
+        elements.forEach(function (el) {
+          addEvent(el, "touchstart", _this.onDragStart, passive_1);
+        });
+        addEvent(container, "touchmove", _this.onDrag, passive_1);
+        addEvent(container, "touchend", _this.onDragEnd, passive_1);
+        addEvent(container, "touchcancel", _this.onDragEnd, passive_1);
+      }
+
+      return _this;
+    }
+    /**
+     * Stop Gesto's drag events.
+     */
+
+
+    var __proto = Gesto.prototype;
+
+    __proto.stop = function () {
+      this.isDrag = false;
+      this.flag = false;
+      this.clientStores = [];
+      this.datas = {};
+    };
+    /**
+     * The total moved distance
+     */
+
+
+    __proto.getMovement = function (clients) {
+      return this.getCurrentStore().getMovement(clients) + this.clientStores.slice(1).reduce(function (prev, cur) {
+        return prev + cur.movement;
+      }, 0);
+    };
+    /**
+     * Whether to drag
+     */
+
+
+    __proto.isDragging = function () {
+      return this.isDrag;
+    };
+    /**
+     * Whether to start drag
+     */
+
+
+    __proto.isFlag = function () {
+      return this.flag;
+    };
+    /**
+     * Whether to start pinch
+     */
+
+
+    __proto.isPinchFlag = function () {
+      return this.pinchFlag;
+    };
+    /**
+    * Whether to start double click
+    */
+
+
+    __proto.isDoubleFlag = function () {
+      return this.doubleFlag;
+    };
+    /**
+     * Whether to pinch
+     */
+
+
+    __proto.isPinching = function () {
+      return this.isPinch;
+    };
+    /**
+     * If a scroll event occurs, it is corrected by the scroll distance.
+     */
+
+
+    __proto.scrollBy = function (deltaX, deltaY, e, isCallDrag) {
+      if (isCallDrag === void 0) {
+        isCallDrag = true;
+      }
+
+      if (!this.flag) {
+        return;
+      }
+
+      this.clientStores[0].move(deltaX, deltaY);
+      isCallDrag && this.onDrag(e, true);
+    };
+    /**
+     * Create a virtual drag event.
+     */
+
+
+    __proto.move = function (_a, inputEvent) {
+      var deltaX = _a[0],
+          deltaY = _a[1];
+      var store = this.getCurrentStore();
+      var nextClients = store.prevClients;
+      return this.moveClients(nextClients.map(function (_a) {
+        var clientX = _a.clientX,
+            clientY = _a.clientY;
+        return {
+          clientX: clientX + deltaX,
+          clientY: clientY + deltaY,
+          originalClientX: clientX,
+          originalClientY: clientY
+        };
+      }), inputEvent, true);
+    };
+    /**
+     * The dragStart event is triggered by an external event.
+     */
+
+
+    __proto.triggerDragStart = function (e) {
+      this.onDragStart(e, false);
+    };
+    /**
+     * Set the event data while dragging.
+     */
+
+
+    __proto.setEventDatas = function (datas) {
+      var currentDatas = this.datas;
+
+      for (var name in datas) {
+        currentDatas[name] = datas[name];
+      }
+
+      return this;
+    };
+    /**
+     * Set the event data while dragging.
+     */
+
+
+    __proto.getEventDatas = function () {
+      return this.datas;
+    };
+    /**
+     * Unset Gesto
+     */
+
+
+    __proto.unset = function () {
+      var _this = this;
+
+      var targets = this.targets;
+      var container = this.options.container;
+      this.off();
+      removeEvent(window, "blur", this.onBlur);
+
+      if (this.isMouse) {
+        targets.forEach(function (target) {
+          removeEvent(target, "mousedown", _this.onDragStart);
+        });
+        removeEvent(container, "mousemove", this.onDrag);
+        removeEvent(container, "mouseup", this.onDragEnd);
+        removeEvent(container, "contextmenu", this.onDragEnd);
+      }
+
+      if (this.isTouch) {
+        targets.forEach(function (target) {
+          removeEvent(target, "touchstart", _this.onDragStart);
+        });
+        removeEvent(container, "touchstart", this.onDragStart);
+        removeEvent(container, "touchmove", this.onDrag);
+        removeEvent(container, "touchend", this.onDragEnd);
+        removeEvent(container, "touchcancel", this.onDragEnd);
+      }
+    };
+
+    __proto.onPinchStart = function (e) {
+      var pinchThreshold = this.options.pinchThreshold;
+
+      if (this.isDrag && this.getMovement() > pinchThreshold) {
+        return;
+      }
+
+      var store = new ClientStore(getEventClients(e));
+      this.pinchFlag = true;
+      this.clientStores.splice(0, 0, store);
+      var result = this.emit("pinchStart", __assign({
+        datas: this.datas,
+        angle: store.getAngle(),
+        touches: this.getCurrentStore().getPositions()
+      }, store.getPosition(), {
+        inputEvent: e
+      }));
+
+      if (result === false) {
+        this.pinchFlag = false;
+      }
+    };
+
+    __proto.onPinch = function (e, clients) {
+      if (!this.flag || !this.pinchFlag || clients.length < 2) {
+        return;
+      }
+
+      var store = this.getCurrentStore();
+      this.isPinch = true;
+      this.emit("pinch", __assign({
+        datas: this.datas,
+        movement: this.getMovement(clients),
+        angle: store.getAngle(clients),
+        rotation: store.getRotation(clients),
+        touches: store.getPositions(clients),
+        scale: store.getScale(clients),
+        distance: store.getDistance(clients)
+      }, store.getPosition(clients), {
+        inputEvent: e
+      }));
+    };
+
+    __proto.onPinchEnd = function (e) {
+      if (!this.pinchFlag) {
+        return;
+      }
+
+      var isPinch = this.isPinch;
+      this.isPinch = false;
+      this.pinchFlag = false;
+      var store = this.getCurrentStore();
+      this.emit("pinchEnd", __assign({
+        datas: this.datas,
+        isPinch: isPinch,
+        touches: store.getPositions()
+      }, store.getPosition(), {
+        inputEvent: e
+      }));
+      this.isPinch = false;
+      this.pinchFlag = false;
+    };
+
+    __proto.initDrag = function () {
+      this.clientStores = [];
+      this.pinchFlag = false;
+      this.doubleFlag = false;
+      this.prevTime = 0;
+      this.flag = false;
+    };
+
+    __proto.getCurrentStore = function () {
+      return this.clientStores[0];
+    };
+
+    __proto.moveClients = function (clients, inputEvent, isAdd) {
+      var store = this.getCurrentStore();
+      var position = store[isAdd ? "addClients" : "getPosition"](clients);
+      this.isDrag = true;
+      return __assign({
+        datas: this.datas
+      }, position, {
+        movement: this.getMovement(clients),
+        isDrag: this.isDrag,
+        isPinch: this.isPinch,
+        isScroll: false,
+        inputEvent: inputEvent
+      });
+    };
+
+    return Gesto;
+  }(EventEmitter$1);
+
+  var Gesto$1 = Gesto;
+
+  const _sfc_main$e = vue.defineComponent({
+    name: "m-editor-resize",
+    props: {
+      type: {
+        type: String
+      }
+    },
+    setup(props) {
+      const services = vue.inject("services");
+      const target = vue.ref();
+      let getso;
+      vue.onMounted(() => {
+        if (!target.value)
+          return;
+        getso = new Gesto$1(target.value, {
+          container: window,
+          pinchOutside: true
+        }).on("drag", (e) => {
+          if (!target.value || !services)
+            return;
+          let { left, right } = {
+            ...vue.toRaw(services.uiService.get("columnWidth"))
+          };
+          if (props.type === "left") {
+            left += e.deltaX;
+          } else if (props.type === "right") {
+            right -= e.deltaX;
+          }
+          services.uiService.set("columnWidth", {
+            left,
+            right
+          });
+        });
+      });
+      vue.onUnmounted(() => {
+        getso?.unset();
+      });
+      return {
+        target
+      };
+    }
+  });
+  const _hoisted_1$a = {
+    ref: "target",
+    class: "m-editor-resizer"
+  };
+  function _sfc_render$e(_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]]);
+
+  const _sfc_main$d = vue.defineComponent({
+    components: {
+      AddPageBox,
+      Resizer
+    },
+    setup() {
+      const services = vue.inject("services");
+      const root = vue.computed(() => services?.editorService.get("root"));
+      return {
+        root,
+        pageLength: vue.computed(() => root.value?.items?.length || 0),
+        showSrc: vue.computed(() => services?.uiService.get("showSrc")),
+        columnWidth: vue.computed(() => services?.uiService.get("columnWidth")),
+        saveCode(value) {
+          try {
+            services?.editorService.set("root", eval(value));
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      };
+    }
+  });
+  const _hoisted_1$9 = { class: "m-editor" };
+  const _hoisted_2$5 = {
+    key: 1,
+    class: "m-editor-content"
+  };
+  function _sfc_render$d(_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");
+    const _component_add_page_box = vue.resolveComponent("add-page-box");
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+      vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
+      _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
+        key: 0,
+        class: "m-editor-content",
+        "init-values": _ctx.root,
+        onSave: _ctx.saveCode
+      }, null, 8, ["init-values", "onSave"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
+        vue.createElementVNode("div", {
+          class: "m-editor-framework-left",
+          style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
+        }, [
+          vue.renderSlot(_ctx.$slots, "sidebar")
+        ], 4),
+        vue.createVNode(_component_resizer, { type: "left" }),
+        _ctx.pageLength > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          vue.createElementVNode("div", {
+            class: "m-editor-framework-center",
+            style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.center}px`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "workspace")
+          ], 4),
+          vue.createVNode(_component_resizer, { type: "right" }),
+          vue.createElementVNode("div", {
+            class: "m-editor-framework-right",
+            style: vue.normalizeStyle(`width: ${_ctx.columnWidth?.right}px`)
+          }, [
+            vue.createVNode(_component_el_scrollbar, null, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "propsPanel")
+              ]),
+              _: 3
+            })
+          ], 4)
+        ], 64)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+          vue.createVNode(_component_add_page_box)
+        ])
+      ]))
+    ]);
+  }
+  var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+
+  const _sfc_main$c = vue.defineComponent({
+    name: "m-icon",
+    components: { Edit: icons.Edit },
+    props: {
+      icon: {
+        type: [String, Object]
+      }
+    },
+    setup() {
+      return {
+        toRaw: vue.toRaw
+      };
+    }
+  });
+  const _hoisted_1$8 = ["src"];
+  function _sfc_render$c(_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 }, {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_edit)
+      ]),
+      _: 1
+    })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createElementBlock("img", {
+      key: 1,
+      src: _ctx.icon
+    }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+      key: 2,
+      class: vue.normalizeClass(_ctx.icon)
+    }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
+      default: vue.withCtx(() => [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.toRaw(_ctx.icon))))
+      ]),
+      _: 1
+    }));
+  }
+  var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+
+  const _sfc_main$b = vue.defineComponent({
+    components: { MIcon, ArrowDown: icons.ArrowDown },
+    props: {
+      data: {
+        type: [Object, String],
+        require: true,
+        default: () => ({
+          type: "text",
+          display: false
+        })
+      }
+    },
+    setup(props) {
+      const services = vue.inject("services");
+      const uiService = services?.uiService;
+      const zoomInHandler = () => uiService?.set("zoom", zoom.value + 0.1);
+      const zoomOutHandler = () => uiService?.set("zoom", zoom.value - 0.1);
+      const zoom = vue.computed(() => uiService?.get("zoom") ?? 1);
+      const showGuides = vue.computed(() => uiService?.get("showGuides") ?? true);
+      const showRule = vue.computed(() => uiService?.get("showRule") ?? true);
+      const item = vue.computed(() => {
+        if (typeof props.data !== "string") {
+          return props.data;
+        }
+        switch (props.data) {
+          case "/":
+            return {
+              type: "divider"
+            };
+          case "zoom":
+            return {
+              type: "zoom"
+            };
+          case "delete":
+            return {
+              type: "button",
+              icon: icons.Delete,
+              tooltip: "\u522A\u9664",
+              disabled: () => services?.editorService.get("node")?.type === "page",
+              handler: () => services?.editorService.remove(services?.editorService.get("node"))
+            };
+          case "undo":
+            return {
+              type: "button",
+              icon: icons.Back,
+              tooltip: "\u540E\u9000",
+              disabled: () => !services?.historyService.state.canUndo,
+              handler: () => services?.editorService.undo()
+            };
+          case "redo":
+            return {
+              type: "button",
+              icon: icons.Right,
+              tooltip: "\u524D\u8FDB",
+              disabled: () => !services?.historyService.state.canRedo,
+              handler: () => services?.editorService.redo()
+            };
+          case "zoom-in":
+            return {
+              type: "button",
+              icon: icons.ZoomIn,
+              tooltip: "\u653E\u5927",
+              handler: zoomInHandler
+            };
+          case "zoom-out":
+            return {
+              type: "button",
+              icon: icons.ZoomOut,
+              tooltip: "\u7E2E\u5C0F",
+              handler: zoomOutHandler
+            };
+          case "rule":
+            return {
+              type: "button",
+              icon: icons.ScaleToOriginal,
+              tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
+              handler: () => uiService?.set("showRule", !showRule.value)
+            };
+          case "guides":
+            return {
+              type: "button",
+              icon: icons.Grid,
+              tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
+              handler: () => uiService?.set("showGuides", !showGuides.value)
+            };
+          default:
+            return {
+              type: "text",
+              text: props.data
+            };
+        }
+      });
+      const disabled = vue.computed(() => {
+        if (typeof item.value === "string")
+          return false;
+        if (item.value.type === "component")
+          return false;
+        if (typeof item.value.disabled === "function") {
+          return item.value.disabled(services);
+        }
+        return item.value.disabled;
+      });
+      return {
+        ZoomIn: icons.ZoomIn,
+        ZoomOut: icons.ZoomOut,
+        item,
+        zoom,
+        disabled,
+        display: vue.computed(() => {
+          if (!item.value)
+            return false;
+          if (typeof item.value === "string")
+            return true;
+          if (typeof item.value.display === "function") {
+            return item.value.display(services);
+          }
+          return item.value.display ?? true;
+        }),
+        zoomInHandler,
+        zoomOutHandler,
+        dropdownHandler(command) {
+          if (command.item.handler) {
+            command.item.handler(services);
+          }
+        },
+        buttonHandler(item2) {
+          if (disabled.value)
+            return;
+          if (typeof item2.handler === "function") {
+            item2.handler?.(services);
+          }
+        }
+      };
+    }
+  });
+  const _hoisted_1$7 = {
+    key: 0,
+    class: "menu-item"
+  };
+  const _hoisted_2$4 = {
+    key: 1,
+    class: "menu-item-text"
+  };
+  const _hoisted_3$3 = {
+    class: "menu-item-text",
+    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) {
+    const _component_el_divider = vue.resolveComponent("el-divider");
+    const _component_m_icon = vue.resolveComponent("m-icon");
+    const _component_el_button = vue.resolveComponent("el-button");
+    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+    const _component_arrow_down = vue.resolveComponent("arrow-down");
+    const _component_el_icon = vue.resolveComponent("el-icon");
+    const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
+    const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
+    const _component_el_dropdown = vue.resolveComponent("el-dropdown");
+    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+      _ctx.item.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
+        key: 0,
+        direction: "vertical"
+      })) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+        vue.createVNode(_component_m_icon, {
+          icon: _ctx.ZoomIn,
+          onClick: _ctx.zoomInHandler
+        }, null, 8, ["icon", "onClick"]),
+        vue.createElementVNode("span", _hoisted_3$3, vue.toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
+        vue.createVNode(_component_m_icon, {
+          icon: _ctx.ZoomOut,
+          onClick: _ctx.zoomOutHandler
+        }, null, 8, ["icon", "onClick"])
+      ], 64)) : _ctx.item.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+        key: 3,
+        effect: "dark",
+        placement: "bottom-start",
+        content: _ctx.item.tooltip || _ctx.item.text
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_button, {
+            size: "small",
+            type: "text",
+            disabled: _ctx.disabled,
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.buttonHandler(_ctx.item))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_m_icon, {
+                icon: _ctx.item.icon
+              }, null, 8, ["icon"]),
+              vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.text), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        _: 1
+      }, 8, ["content"])) : _ctx.item.type === "dropdown" ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, {
+        key: 4,
+        trigger: "click",
+        disabled: _ctx.disabled,
+        onCommand: _ctx.dropdownHandler
+      }, {
+        dropdown: vue.withCtx(() => [
+          _ctx.item.items && _ctx.item.items.length ? (vue.openBlock(), vue.createBlock(_component_el_dropdown_menu, { key: 0 }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.item.items, (subItem, index) => {
+                return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
+                  key: index,
+                  command: { item: _ctx.item, subItem }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["command"]);
+              }), 128))
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true)
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("span", _hoisted_4$3, [
+            vue.createTextVNode(vue.toDisplayString(_ctx.item.text), 1),
+            vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_arrow_down)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 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]]);
+
+  const _sfc_main$a = vue.defineComponent({
+    name: "nav-menu",
+    components: { ToolButton },
+    props: {
+      data: {
+        type: Object,
+        default: () => ({})
+      },
+      height: {
+        type: Number
+      }
+    },
+    setup(props) {
+      return {
+        keys: vue.computed(() => Object.keys(props.data))
+      };
+    }
+  });
+  function _sfc_render$a(_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",
+      style: vue.normalizeStyle({ height: `${_ctx.height}px` })
+    }, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.keys, (key) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(`menu-${key}`),
+          key
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data[key], (item, index) => {
+            return vue.openBlock(), vue.createBlock(_component_tool_button, {
+              data: item,
+              key: index
+            }, null, 8, ["data"]);
+          }), 128))
+        ], 2);
+      }), 128))
+    ], 4);
+  }
+  var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+
+  const _sfc_main$9 = vue.defineComponent({
+    name: "m-editor-props-panel",
+    emits: ["mounted"],
+    setup(props, { emit }) {
+      const internalInstance = vue.getCurrentInstance();
+      const values = vue.ref({});
+      const configForm = vue.ref();
+      const curFormConfig = vue.ref([]);
+      const services = vue.inject("services");
+      const init = async () => {
+        const node = services?.editorService.get("node");
+        if (!node) {
+          curFormConfig.value = [];
+          return;
+        }
+        if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
+          node.devconfig.ratio = node.style.height / node.style.width || 1;
+        }
+        values.value = node;
+        const type = node.type || (node.items ? "container" : "text");
+        curFormConfig.value = await services?.propsService.getPropsConfig(type) || [];
+      };
+      vue.watchEffect(init);
+      services?.propsService.on("props-configs-change", init);
+      vue.onMounted(() => {
+        emit("mounted", internalInstance);
+      });
+      return {
+        values,
+        configForm,
+        curFormConfig,
+        async submit() {
+          try {
+            const values2 = await configForm.value?.submitForm();
+            services?.editorService.update(values2);
+          } catch (e) {
+            console.error(e);
+            elementPlus.ElMessage.closeAll();
+            elementPlus.ElMessage.error({
+              duration: 1e4,
+              showClose: true,
+              message: e.message,
+              dangerouslyUseHTMLString: true
+            });
+          }
+        }
+      };
+    }
+  });
+  function _sfc_render$9(_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",
+      ref: "configForm",
+      size: "small",
+      "init-values": _ctx.values,
+      config: _ctx.curFormConfig,
+      onChange: _ctx.submit
+    }, null, 8, ["init-values", "config", "onChange"]);
+  }
+  var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+
+  const _sfc_main$8 = vue.defineComponent({
+    name: "ui-component-panel",
+    components: { MIcon },
+    setup() {
+      const searchText = vue.ref("");
+      const services = vue.inject("services");
+      const list = vue.computed(() => services?.componentListService.getList().map((group) => ({
+        ...group,
+        items: group.items.filter((item) => item.text.includes(searchText.value))
+      })));
+      const collapseValue = vue.computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+      return {
+        searchText,
+        collapseValue,
+        list,
+        appendComponent({ text, type, ...config }) {
+          services?.editorService.add({
+            name: text,
+            type,
+            ...config
+          });
+        }
+      };
+    }
+  });
+  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) {
+    const _component_el_input = vue.resolveComponent("el-input");
+    const _component_m_icon = vue.resolveComponent("m-icon");
+    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+    const _component_el_collapse_item = vue.resolveComponent("el-collapse-item");
+    const _component_el_collapse = vue.resolveComponent("el-collapse");
+    const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
+    return vue.openBlock(), vue.createBlock(_component_el_scrollbar, null, {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_el_collapse, {
+          class: "ui-component-panel",
+          "model-value": _ctx.collapseValue
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_el_input, {
+              "prefix-icon": "el-icon-search",
+              placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+              class: "search-input",
+              size: "small",
+              clearable: "",
+              modelValue: _ctx.searchText,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.searchText = $event)
+            }, null, 8, ["modelValue"]),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.list, (group, index) => {
+              return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                group.items && group.items.length ? (vue.openBlock(), vue.createBlock(_component_el_collapse_item, {
+                  key: index,
+                  name: index
+                }, {
+                  title: vue.withCtx(() => [
+                    _hoisted_1$6,
+                    vue.createTextVNode(vue.toDisplayString(group.title), 1)
+                  ]),
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        class: "component-item",
+                        key: item.type,
+                        onClick: ($event) => _ctx.appendComponent(item)
+                      }, [
+                        vue.createVNode(_component_m_icon, {
+                          icon: item.icon
+                        }, null, 8, ["icon"]),
+                        vue.createVNode(_component_el_tooltip, {
+                          effect: "dark",
+                          placement: "bottom",
+                          content: item.text
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createElementVNode("span", null, vue.toDisplayString(item.text), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["content"])
+                      ], 8, _hoisted_2$3);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["name"])) : vue.createCommentVNode("", true)
+              ], 64);
+            }), 256))
+          ]),
+          _: 1
+        }, 8, ["model-value"])
+      ]),
+      _: 1
+    });
+  }
+  var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+
+  const _sfc_main$7 = vue.defineComponent({
+    name: "magic-editor-content-menu",
+    props: {
+      componentGroupList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    setup(props) {
+      const services = vue.inject("services");
+      const subVisible = vue.ref(false);
+      const node = vue.computed(() => services?.editorService.get("node"));
+      return {
+        subVisible,
+        node,
+        menu: vue.computed(() => ({
+          app: [
+            {
+              type: "page",
+              text: "\u9875\u9762"
+            }
+          ],
+          component: props.componentGroupList
+        })),
+        append(config) {
+          services?.editorService.add({
+            name: config.text,
+            type: config.type
+          });
+        },
+        remove() {
+          node.value && services?.editorService.remove(node.value);
+        },
+        copy(node2) {
+          services?.editorService.copy(node2);
+        },
+        setSubVisiable(v) {
+          subVisible.value = v;
+        }
+      };
+    }
+  });
+  const _hoisted_1$5 = {
+    key: 0,
+    class: "magic-editor-content-menu"
+  };
+  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) {
+    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", {
+        key: 0,
+        class: "magic-editor-content-menu-item",
+        onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.setSubVisiable(true)),
+        onMouseleave: _cache[1] || (_cache[1] = ($event) => _ctx.setSubVisiable(false))
+      }, " \u65B0\u589E ", 32)) : vue.createCommentVNode("", true),
+      _ctx.node.type !== "app" ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        class: "magic-editor-content-menu-item",
+        onClick: _cache[2] || (_cache[2] = () => _ctx.copy(_ctx.node))
+      }, "\u590D\u5236")) : vue.createCommentVNode("", true),
+      _ctx.node.type !== "app" && _ctx.node.type !== "page" ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 2,
+        class: "magic-editor-content-menu-item",
+        onClick: _cache[3] || (_cache[3] = () => _ctx.remove())
+      }, " \u5220\u9664 ")) : vue.createCommentVNode("", true),
+      vue.withDirectives(vue.createElementVNode("div", {
+        class: "subMenu",
+        onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.setSubVisiable(true)),
+        onMouseleave: _cache[6] || (_cache[6] = ($event) => _ctx.setSubVisiable(false))
+      }, [
+        vue.createVNode(_component_el_scrollbar, null, {
+          default: vue.withCtx(() => [
+            _ctx.node.type === "tabs" ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "magic-editor-content-menu-item",
+              onClick: _cache[4] || (_cache[4] = () => _ctx.append({
+                type: "tab-pane"
+              }))
+            }, " \u6807\u7B7E ")) : _ctx.node.type === "app" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.menu.app, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: "magic-editor-content-menu-item",
+                key: item.type,
+                onClick: () => _ctx.append(item)
+              }, vue.toDisplayString(item.text), 9, _hoisted_2$2);
+            }), 128)) : _ctx.node.items ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(_ctx.menu.component, (list) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: list.title
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.items, (item) => {
+                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                    item ? (vue.openBlock(), vue.createElementBlock("div", {
+                      class: "magic-editor-content-menu-item",
+                      key: item.type,
+                      onClick: () => _ctx.append(item)
+                    }, vue.toDisplayString(item.text), 9, _hoisted_3$2)) : vue.createCommentVNode("", true)
+                  ], 64);
+                }), 256)),
+                _hoisted_4$2
+              ]);
+            }), 128)) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 544), [
+        [vue.vShow, _ctx.subVisible]
+      ])
+    ])) : vue.createCommentVNode("", true);
+  }
+  var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+
+  const select = (data, editorService) => {
+    if (!data.id) {
+      throw new Error("\u6CA1\u6709id");
+    }
+    editorService?.select(data);
+  };
+  const useDrop = (tree, editorService) => ({
+    allowDrop: (draggingNode, dropNode, type) => {
+      const { data } = dropNode || {};
+      const { data: ingData } = draggingNode;
+      const { type: ingType } = ingData;
+      if (ingType !== "page" && data.type === "page")
+        return false;
+      if (ingType === "page" && data.type !== "page")
+        return false;
+      if (!data || !data.type)
+        return false;
+      if (["prev", "next"].includes(type))
+        return true;
+      if (data.items || data.type === "container")
+        return true;
+      return false;
+    },
+    handleDragEnd() {
+      if (!tree.value)
+        return;
+      const { data } = tree.value;
+      const [page] = data;
+      editorService?.update(page);
+    }
+  });
+  const useStatus = (tree, editorService) => {
+    const page = vue.computed(() => editorService?.get("page"));
+    vue.watchEffect(() => {
+      if (!tree.value)
+        return;
+      const node = editorService?.get("node");
+      node && tree.value.setCurrentKey(node.id, true);
+      const parent = editorService?.get("parent");
+      if (!parent?.id)
+        return;
+      const treeNode = tree.value.getNode(parent.id);
+      treeNode?.updateChildren();
+    });
+    return {
+      values: vue.computed(() => page.value ? [page.value] : []),
+      loadItems: (node, resolve) => {
+        if (Array.isArray(node.data)) {
+          return resolve(node.data);
+        }
+        if (Array.isArray(node.data?.items)) {
+          return resolve(node.data?.items);
+        }
+        resolve([]);
+      }
+    };
+  };
+  const useFilter = (tree) => ({
+    filterText: vue.ref(""),
+    filterNode: (value, data) => {
+      if (!value) {
+        return true;
+      }
+      let name = "";
+      if (data.name) {
+        name = data.name;
+      } else if (data.type) {
+        name = data.type;
+      } else if (data.items) {
+        name = "container";
+      }
+      return name.indexOf(value) !== -1;
+    },
+    filterTextChangeHandler(val) {
+      tree.value?.filter(val);
+    }
+  });
+  const useContentMenu = (editorService) => {
+    const menuStyle = vue.ref({
+      position: "absolute",
+      left: "0",
+      top: "0",
+      display: "none"
+    });
+    vue.onMounted(() => {
+      document.addEventListener("click", () => {
+        menuStyle.value.display = "none";
+      }, true);
+    });
+    return {
+      menuStyle,
+      contextmenu(event, data) {
+        const bodyHeight = globalThis.document.body.clientHeight;
+        const left = `${event.clientX + 20}px`;
+        let top = `${event.clientY - 10}px`;
+        if (event.clientY + 300 > bodyHeight) {
+          top = `${bodyHeight - 300}px`;
+        }
+        menuStyle.value.left = left;
+        menuStyle.value.top = top;
+        menuStyle.value.display = "";
+        select(data, editorService);
+      }
+    };
+  };
+  const _sfc_main$6 = vue.defineComponent({
+    name: "magic-editor-layer-panel",
+    components: { LayerMenu },
+    setup() {
+      const services = vue.inject("services");
+      const tree = vue.ref();
+      const editorService = services?.editorService;
+      return {
+        tree,
+        ...useDrop(tree, editorService),
+        ...useStatus(tree, editorService),
+        ...useFilter(tree),
+        ...useContentMenu(editorService),
+        clickHandler(data) {
+          if (services?.uiService.get("uiSelectMode")) {
+            document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
+            return;
+          }
+          select(data, editorService);
+        }
+      };
+    }
+  });
+  function _sfc_render$6(_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");
+    const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
+    return vue.openBlock(), vue.createBlock(_component_el_scrollbar, { class: "magic-editor-layer-panel" }, {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_el_input, {
+          class: "filterInput",
+          size: "small",
+          placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+          clearable: "",
+          modelValue: _ctx.filterText,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filterText = $event),
+          onChange: _ctx.filterTextChangeHandler
+        }, null, 8, ["modelValue", "onChange"]),
+        _ctx.values.length ? (vue.openBlock(), vue.createBlock(_component_el_tree, {
+          key: 0,
+          ref: "tree",
+          "node-key": "id",
+          draggable: "",
+          load: _ctx.loadItems,
+          data: _ctx.values,
+          "expand-on-click-node": false,
+          "highlight-current": true,
+          props: {
+            children: "items"
+          },
+          "filter-node-method": _ctx.filterNode,
+          "allow-drop": _ctx.allowDrop,
+          onNodeClick: _ctx.clickHandler,
+          onNodeContextmenu: _ctx.contextmenu,
+          onNodeDragEnd: _ctx.handleDragEnd,
+          "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684"
+        }, {
+          default: vue.withCtx(({ node, data }) => [
+            vue.renderSlot(_ctx.$slots, "layer-node-content", {
+              node,
+              data
+            }, () => [
+              vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
+            ])
+          ]),
+          _: 3
+        }, 8, ["load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : vue.createCommentVNode("", true),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+          vue.createVNode(_component_layer_menu, {
+            style: vue.normalizeStyle(_ctx.menuStyle)
+          }, null, 8, ["style"])
+        ]))
+      ]),
+      _: 3
+    });
+  }
+  var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+
+  const _sfc_main$5 = vue.defineComponent({
+    name: "m-sidebar",
+    components: { MIcon },
+    props: {
+      data: {
+        type: Object,
+        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+      }
+    },
+    setup(props) {
+      const activeTabName = vue.ref(props.data?.status);
+      vue.watch(() => props.data?.status, (status) => {
+        activeTabName.value = status || "0";
+      });
+      return {
+        activeTabName,
+        items: vue.computed(() => props.data?.items.map((item) => {
+          if (typeof item !== "string") {
+            return item;
+          }
+          switch (item) {
+            case "component-list":
+              return {
+                type: "component",
+                icon: icons.Coin,
+                text: "\u7EC4\u4EF6",
+                component: ComponentListPanel,
+                slots: {}
+              };
+            case "layer":
+              return {
+                type: "component",
+                icon: icons.Files,
+                text: "\u5DF2\u9009\u7EC4\u4EF6",
+                component: LayerPanel,
+                slots: {}
+              };
+            default:
+              return {};
+          }
+        }))
+      };
+    }
+  });
+  const _hoisted_1$4 = {
+    key: 1,
+    class: "magic-editor-tab-panel-title"
+  };
+  function _sfc_render$5(_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");
+    return _ctx.data.type === "tabs" ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
+      key: 0,
+      class: "m-editor-sidebar",
+      modelValue: _ctx.activeTabName,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.activeTabName = $event),
+      type: "card",
+      "tab-position": "left"
+    }, {
+      default: vue.withCtx(() => [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
+          return vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
+            key: item.text,
+            name: item.text
+          }, {
+            label: vue.withCtx(() => [
+              vue.createElementVNode("span", null, [
+                item.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
+                  key: 0,
+                  icon: item.icon
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                item.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            default: vue.withCtx(() => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.component), vue.mergeProps(item.props || {}, vue.toHandlers(item.listeners || {})), vue.createSlots({ _: 2 }, [
+                item.slots?.layerNodeContent ? {
+                  name: "layer-node-content",
+                  fn: vue.withCtx(({ data, node }) => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.slots.layerNodeContent), {
+                      data,
+                      node
+                    }, null, 8, ["data", "node"]))
+                  ])
+                } : void 0
+              ]), 1040))
+            ]),
+            _: 2
+          }, 1032, ["name"]);
+        }), 128))
+      ]),
+      _: 1
+    }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
+  }
+  var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+
+  const _sfc_main$4 = vue.defineComponent({
+    components: { CaretBottom: icons.CaretBottom, Plus: icons.Plus },
+    setup() {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      return {
+        root: vue.computed(() => editorService?.get("root")),
+        page: vue.computed(() => editorService?.get("page")),
+        switchPage(page) {
+          editorService?.select(page);
+        },
+        addPage() {
+          if (!editorService)
+            return;
+          const pageConfig = {
+            type: "page",
+            name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+          };
+          editorService.add(pageConfig);
+        },
+        copy(node) {
+          node && editorService?.copy(node);
+          editorService?.paste({
+            left: 0,
+            top: 0
+          });
+        },
+        remove(node) {
+          editorService?.remove(node);
+        }
+      };
+    }
+  });
+  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) {
+    const _component_plus = vue.resolveComponent("plus");
+    const _component_el_icon = vue.resolveComponent("el-icon");
+    const _component_caret_bottom = vue.resolveComponent("caret-bottom");
+    const _component_el_popover = vue.resolveComponent("el-popover");
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+      vue.createElementVNode("div", {
+        class: "m-editor-page-bar-item",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.addPage && _ctx.addPage(...args))
+      }, [
+        vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-add-icon" }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_plus)
+          ]),
+          _: 1
+        })
+      ]),
+      _ctx.root ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.root.items, (item) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          key: item.key,
+          class: vue.normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
+          onClick: ($event) => _ctx.switchPage(item)
+        }, [
+          vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+            vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
+          ]),
+          vue.createVNode(_component_el_popover, {
+            placement: "top",
+            width: 160,
+            trigger: "hover"
+          }, {
+            reference: vue.withCtx(() => [
+              vue.createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_caret_bottom)
+                ]),
+                _: 1
+              })
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", null, [
+                vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                  vue.createElementVNode("div", {
+                    class: "magic-editor-content-menu-item",
+                    onClick: () => _ctx.copy(item)
+                  }, "\u590D\u5236", 8, _hoisted_3$1),
+                  vue.createElementVNode("div", {
+                    class: "magic-editor-content-menu-item",
+                    onClick: () => _ctx.remove(item)
+                  }, "\u5220\u9664", 8, _hoisted_4$1)
+                ])
+              ])
+            ]),
+            _: 2
+          }, 1024)
+        ], 10, _hoisted_2$1);
+      }), 128)) : vue.createCommentVNode("", true)
+    ]);
+  }
+  var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+
+  const _sfc_main$3 = vue.defineComponent({
+    name: "magic-editor-ui-viewer-menu",
+    setup() {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const menu = vue.ref();
+      const canPaste = vue.ref(false);
+      const canCenter = vue.ref(false);
+      const node = vue.computed(() => editorService?.get("node"));
+      const parent = vue.computed(() => editorService?.get("parent"));
+      vue.onMounted(() => {
+        const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
+        canPaste.value = data !== "undefined" && !!data;
+      });
+      vue.watch(parent, async () => {
+        if (!parent.value || !editorService)
+          return canCenter.value = false;
+        const layout = await editorService.getLayout(parent.value);
+        canCenter.value = [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !["app", "page", "pop"].includes(`${node.value?.type}`);
+      }, { immediate: true });
+      return {
+        menu,
+        canPaste,
+        canDelete: vue.computed(() => node.value?.type !== "page"),
+        canMoveZPos: vue.computed(() => node.value?.type !== "page"),
+        canCenter,
+        center() {
+          node.value && editorService?.alignCenter(node.value);
+        },
+        copy() {
+          node.value && editorService?.copy(node.value);
+          canPaste.value = true;
+        },
+        paste() {
+          const top = menu.value?.offsetTop || 0;
+          const left = menu.value?.offsetLeft || 0;
+          editorService?.paste({ left, top });
+        },
+        remove() {
+          node.value && editorService?.remove(node.value);
+        },
+        top() {
+          editorService?.moveLayer(LayerOffset.TOP);
+        },
+        bottom() {
+          editorService?.moveLayer(LayerOffset.BOTTOM);
+        },
+        topItem() {
+          editorService?.moveLayer(1);
+        },
+        bottomItem() {
+          editorService?.moveLayer(-1);
+        },
+        clearGuides() {
+          editorService?.get("stage").clearGuides();
+        }
+      };
+    }
+  });
+  const _hoisted_1$2 = {
+    class: "magic-editor-content-menu",
+    ref: "menu"
+  };
+  const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
+  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, [
+      vue.createElementVNode("div", null, [
+        _ctx.canCenter ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[0] || (_cache[0] = () => _ctx.center())
+        }, "\u6C34\u5E73\u5C45\u4E2D")) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", {
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[1] || (_cache[1] = () => _ctx.copy())
+        }, "\u590D\u5236"),
+        _ctx.canPaste ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.paste && _ctx.paste(...args))
+        }, "\u7C98\u8D34")) : vue.createCommentVNode("", true),
+        _ctx.canMoveZPos ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          _hoisted_2,
+          vue.createElementVNode("div", {
+            class: "magic-editor-content-menu-item",
+            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.topItem && _ctx.topItem(...args))
+          }, "\u4E0A\u79FB\u4E00\u5C42"),
+          vue.createElementVNode("div", {
+            class: "magic-editor-content-menu-item",
+            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.bottomItem && _ctx.bottomItem(...args))
+          }, "\u4E0B\u79FB\u4E00\u5C42"),
+          vue.createElementVNode("div", {
+            class: "magic-editor-content-menu-item",
+            onClick: _cache[5] || (_cache[5] = (...args) => _ctx.top && _ctx.top(...args))
+          }, "\u7F6E\u9876"),
+          vue.createElementVNode("div", {
+            class: "magic-editor-content-menu-item",
+            onClick: _cache[6] || (_cache[6] = (...args) => _ctx.bottom && _ctx.bottom(...args))
+          }, "\u7F6E\u5E95")
+        ], 64)) : vue.createCommentVNode("", true),
+        _ctx.canDelete ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+          _hoisted_3,
+          vue.createElementVNode("div", {
+            class: "magic-editor-content-menu-item",
+            onClick: _cache[7] || (_cache[7] = () => _ctx.remove())
+          }, "\u5220\u9664")
+        ], 64)) : vue.createCommentVNode("", true),
+        _hoisted_4,
+        vue.createElementVNode("div", {
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[8] || (_cache[8] = (...args) => _ctx.clearGuides && _ctx.clearGuides(...args))
+        }, "\u6E05\u7A7A\u53C2\u8003\u7EBF")
+      ])
+    ], 512);
+  }
+  var ViewerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+
+  const useMenu = () => {
+    const menu = vue.ref();
+    const menuStyle = vue.ref({
+      display: "none",
+      left: "0",
+      top: "0"
+    });
+    vue.onMounted(() => {
+      document.addEventListener("click", () => {
+        menuStyle.value.display = "none";
+      }, true);
+    });
+    return {
+      menu,
+      menuStyle,
+      contextmenuHandler(e) {
+        e.preventDefault();
+        const menuHeight = menu.value?.$el.clientHeight;
+        let top = e.clientY;
+        if (menuHeight + e.clientY > document.body.clientHeight) {
+          top = document.body.clientHeight - menuHeight;
+        }
+        menuStyle.value = {
+          display: "block",
+          top: `${top}px`,
+          left: `${e.clientX}px`
+        };
+      }
+    };
+  };
+  const _sfc_main$2 = vue.defineComponent({
+    name: "magic-stage",
+    components: {
+      ViewerMenu
+    },
+    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)
+      },
+      moveableOptions: {
+        type: [Object, Function],
+        default: () => (core) => ({
+          container: core?.renderer?.contentWindow?.document.getElementById("app")
+        })
+      }
+    },
+    emits: ["select", "update", "sort"],
+    setup(props, { emit }) {
+      const services = vue.inject("services");
+      const stageContainer = vue.ref();
+      const stageStyle = vue.computed(() => ({
+        ...services?.uiService.get("stageStyle"),
+        transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`
+      }));
+      let stage = null;
+      let runtime = null;
+      vue.watchEffect(() => {
+        if (stage)
+          return;
+        if (!stageContainer.value)
+          return;
+        if (!(props.runtimeUrl || props.render) || !props.root)
+          return;
+        stage = new StageCore__default["default"]({
+          render: props.render,
+          runtimeUrl: props.runtimeUrl,
+          zoom: props.zoom,
+          canSelect: (el, stop) => {
+            const elCanSelect = props.canSelect(el);
+            if (props.uiSelectMode && elCanSelect) {
+              document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
+              return stop();
+            }
+            return elCanSelect;
+          },
+          moveableOptions: props.moveableOptions
+        });
+        services?.editorService.set("stage", stage);
+        stage?.mount(stageContainer.value);
+        stage?.on("select", (el) => emit("select", el));
+        stage?.on("update", (ev) => {
+          emit("update", { id: ev.el.id, style: ev.style });
+        });
+        stage?.on("sort", (ev) => {
+          emit("sort", ev);
+        });
+        stage?.on("changeGuides", () => {
+          services?.uiService.set("showGuides", true);
+        });
+        if (!props.node?.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);
+          setTimeout(() => {
+            props.node && stage?.select(vue.toRaw(props.node.id));
+          });
+        });
+      });
+      vue.watch(() => props.zoom, (zoom) => {
+        if (!stage || !zoom)
+          return;
+        stage?.setZoom(zoom);
+      });
+      vue.watch(() => props.root, (root) => {
+        if (runtime && root) {
+          runtime.updateRootConfig(lodashEs.cloneDeep(vue.toRaw(root)));
+        }
+      });
+      vue.onUnmounted(() => {
+        stage?.destroy();
+        services?.editorService.set("stage", null);
+      });
+      return {
+        stageStyle,
+        ...useMenu(),
+        stageContainer
+      };
+    }
+  });
+  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"])
+      ]))
+    ]);
+  }
+  var MagicStage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+
+  const _sfc_main$1 = vue.defineComponent({
+    name: "m-editor-workspace",
+    components: {
+      PageBar,
+      MagicStage
+    },
+    props: {
+      runtimeUrl: String,
+      render: {
+        type: Function
+      },
+      moveableOptions: {
+        type: [Object, Function]
+      },
+      canSelect: {
+        type: Function
+      }
+    },
+    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);
+        },
+        sortNodeHandler(ev) {
+          services?.editorService.sort(ev.src, ev.dist);
+        }
+      };
+    }
+  });
+  const _hoisted_1 = { class: "m-editor-workspace" };
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_magic_stage = vue.resolveComponent("magic-stage");
+    const _component_page_bar = vue.resolveComponent("page-bar");
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      (vue.openBlock(), vue.createBlock(_component_magic_stage, {
+        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"])),
+      vue.renderSlot(_ctx.$slots, "workspace-content"),
+      vue.createVNode(_component_page_bar, null, {
+        "page-bar-title": vue.withCtx(({ page }) => [
+          vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
+        ]),
+        "page-bar-popover": vue.withCtx(({ page }) => [
+          vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
+        ]),
+        _: 3
+      })
+    ]);
+  }
+  var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+
+  class ComponentList extends BaseService {
+    state = vue.reactive({
+      list: []
+    });
+    constructor() {
+      super([]);
+    }
+    setList(componentGroupList) {
+      this.state.list = componentGroupList;
+    }
+    getList() {
+      return this.state.list;
+    }
+  }
+  var componentListService = new ComponentList();
+
+  const state = vue.reactive({
+    uiSelectMode: false,
+    showSrc: false,
+    zoom: 1,
+    stageStyle: {},
+    columnWidth: {
+      left: 310,
+      center: globalThis.document.body.clientWidth - 310 - 400,
+      right: 400
+    },
+    showGuides: true,
+    showRule: true
+  });
+  class Ui extends BaseService {
+    constructor() {
+      super([]);
+      globalThis.addEventListener("resize", () => {
+        this.setColumnWidth({
+          center: "auto"
+        });
+      });
+    }
+    set(name, value) {
+      const mask = editorService.get("stage")?.mask;
+      if (name === "columnWidth") {
+        this.setColumnWidth(value);
+        return;
+      }
+      if (name === "showGuides") {
+        mask?.showGuides(value);
+      }
+      if (name === "showRule") {
+        mask?.showRule(value);
+      }
+      state[name] = value;
+    }
+    get(name) {
+      return state[name];
+    }
+    setColumnWidth({ left, center, right }) {
+      const columnWidth = {
+        ...vue.toRaw(this.get("columnWidth"))
+      };
+      if (left) {
+        columnWidth.left = left;
+      }
+      if (right) {
+        columnWidth.right = right;
+      }
+      if (!center || center === "auto") {
+        const bodyWidth = globalThis.document.body.clientWidth;
+        columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+      } else {
+        columnWidth.center = center;
+      }
+      state.columnWidth = columnWidth;
+    }
+  }
+  var uiService = new Ui();
+
+  const _sfc_main = vue.defineComponent({
+    name: "m-editor",
+    components: {
+      NavMenu,
+      Sidebar,
+      Workspace,
+      PropsPanel,
+      Framework
+    },
+    props: {
+      modelValue: {
+        type: Object,
+        default: () => ({}),
+        require: true
+      },
+      componentGroupList: {
+        type: Array,
+        default: () => []
+      },
+      sidebar: {
+        type: Object
+      },
+      menu: {
+        type: Object,
+        default: () => ({ left: [], right: [] })
+      },
+      render: {
+        type: Function
+      },
+      runtimeUrl: String,
+      propsConfigs: {
+        type: Object,
+        default: () => ({})
+      },
+      propsValues: {
+        type: Object,
+        default: () => ({})
+      },
+      eventMethodList: {
+        type: Object,
+        default: () => ({})
+      },
+      moveableOptions: {
+        type: [Object, Function]
+      },
+      defaultSelected: {
+        type: [Number, String]
+      },
+      canSelect: {
+        type: Function
+      },
+      stageStyle: {
+        type: [String, Object]
+      }
+    },
+    emits: ["props-panel-mounted", "update:modelValue"],
+    setup(props, { emit }) {
+      editorService.on("root-change", () => {
+        const node = editorService.get("node") || props.defaultSelected;
+        node && editorService.select(node);
+        emit("update:modelValue", vue.toRaw(editorService.get("root")));
+      });
+      vue.watch(() => props.modelValue, (modelValue) => editorService.set("root", modelValue), {
+        immediate: true
+      });
+      vue.watch(() => props.componentGroupList, (componentGroupList) => componentListService.setList(componentGroupList), {
+        immediate: true
+      });
+      vue.watch(() => props.propsConfigs, (configs) => propsService.setPropsConfigs(configs), {
+        immediate: true
+      });
+      vue.watch(() => props.propsValues, (values) => propsService.setPropsValues(values), {
+        immediate: true
+      });
+      vue.watch(() => props.eventMethodList, (eventMethodList) => {
+        const eventsList = {};
+        const methodsList = {};
+        Object.keys(eventMethodList).forEach((type) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+        eventsService.setEvents(eventsList);
+        eventsService.setMethods(methodsList);
+      }, {
+        immediate: true
+      });
+      vue.watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
+        immediate: true
+      });
+      vue.watch(() => props.stageStyle, (stageStyle) => uiService.set("stageStyle", stageStyle), {
+        immediate: true
+      });
+      vue.onUnmounted(() => editorService.destroy());
+      const services = {
+        componentListService,
+        eventsService,
+        historyService,
+        propsService,
+        editorService,
+        uiService
+      };
+      vue.provide("services", services);
+      return services;
+    }
+  });
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_nav_menu = vue.resolveComponent("nav-menu");
+    const _component_sidebar = vue.resolveComponent("sidebar");
+    const _component_workspace = vue.resolveComponent("workspace");
+    const _component_props_panel = vue.resolveComponent("props-panel");
+    const _component_framework = vue.resolveComponent("framework");
+    return vue.openBlock(), vue.createBlock(_component_framework, null, {
+      nav: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
+          vue.createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
+        ])
+      ]),
+      sidebar: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
+          vue.createVNode(_component_sidebar, { data: _ctx.sidebar }, null, 8, ["data"])
+        ])
+      ]),
+      workspace: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "workspace", {}, () => [
+          vue.createVNode(_component_workspace, {
+            "runtime-url": _ctx.runtimeUrl,
+            render: _ctx.render,
+            "moveable-options": _ctx.moveableOptions,
+            "can-select": _ctx.canSelect
+          }, {
+            "workspace-content": vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
+            ]),
+            "page-bar-title": vue.withCtx(({ page }) => [
+              vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
+            ]),
+            "page-bar-popover": vue.withCtx(({ page }) => [
+              vue.renderSlot(_ctx.$slots, "page-bar-popover", { page })
+            ]),
+            _: 3
+          }, 8, ["runtime-url", "render", "moveable-options", "can-select"])
+        ])
+      ]),
+      propsPanel: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "propsPanel", {}, () => [
+          vue.createVNode(_component_props_panel, {
+            ref: "propsPanel",
+            onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
+          }, null, 512)
+        ])
+      ]),
+      empty: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "empty", { editorService: _ctx.editorService })
+      ]),
+      _: 3
+    });
+  }
+  var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+  var index$1 = '';
+
+  const defaultInstallOpt = {};
+  var index = {
+    install: (app, opt) => {
+      const option = Object.assign(defaultInstallOpt, opt || {});
+      app.config.globalProperties.$TMAGIC_EDITOR = option;
+      setConfig(option);
+      app.component(Editor.name, Editor);
+      app.component(uiSelect.name, uiSelect);
+      app.component(CodeLink.name, CodeLink);
+      app.component(Code.name, Code);
+      app.component(CodeEditor.name, CodeEditor);
+    }
+  };
+
+  exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
+  exports.ComponentListPanel = ComponentListPanel;
+  exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
+  exports.Fixed2Other = Fixed2Other;
+  exports.LayerOffset = LayerOffset;
+  exports.LayerPanel = LayerPanel;
+  exports.Layout = Layout;
+  exports.PropsPanel = PropsPanel;
+  exports.TMagicCodeEditor = CodeEditor;
+  exports.TMagicEditor = Editor;
+  exports.change2Fixed = change2Fixed;
+  exports.debug = debug;
+  exports["default"] = index;
+  exports.defaults = defaults;
+  exports.editorService = editorService;
+  exports.error = error;
+  exports.eventsService = eventsService;
+  exports.fillConfig = fillConfig;
+  exports.generateId = generateId;
+  exports.generatePageName = generatePageName;
+  exports.generatePageNameByApp = generatePageNameByApp;
+  exports.getConfig = getConfig;
+  exports.getDefaultPropsValue = getDefaultPropsValue;
+  exports.getNodeIndex = getNodeIndex;
+  exports.getPageList = getPageList;
+  exports.getPageNameList = getPageNameList;
+  exports.historyService = historyService;
+  exports.info = info;
+  exports.initPosition = initPosition;
+  exports.isFixed = isFixed;
+  exports.log = log;
+  exports.propsService = propsService;
+  exports.setConfig = setConfig;
+  exports.setLayout = setLayout;
+  exports.setNewItemId = setNewItemId;
+  exports.toRelative = toRelative;
+  exports.uiService = uiService;
+  exports.warn = warn;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+  exports[Symbol.toStringTag] = 'Module';
+
+}));
+//# sourceMappingURL=tmagic-editor.umd.js.map