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

package/dist/tmagic-editor.es.js

@@ -0,0 +1,4469 @@
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createElementVNode, toDisplayString, withModifiers, createCommentVNode, watch, onMounted, onUnmounted, reactive, toRaw, createVNode, withCtx, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, createTextVNode, normalizeProps, mergeProps, getCurrentInstance, withDirectives, vShow, Teleport, toHandlers, createSlots, nextTick, provide } from 'vue';
+import serialize from 'serialize-javascript';
+import * as monaco from 'monaco-editor';
+import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, Coin, CaretBottom } from '@element-plus/icons';
+import { cloneDeep, random } from 'lodash-es';
+import { toLine, isPop, getNodePath } from '@tmagic/utils';
+import { EventEmitter as EventEmitter$2 } from 'events';
+import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+import { ElMessage } from 'element-plus';
+import StageCore from '@tmagic/stage';
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main$k = defineComponent({
+  name: "m-fields-vs-code",
+  props: ["model", "name", "config", "prop"],
+  emits: ["change"],
+  setup(props, { emit }) {
+    const language = computed(() => props.config.language || "javascript");
+    const height = computed(() => `${document.body.clientHeight - 168}px`);
+    return {
+      height,
+      language,
+      save(v) {
+        props.model[props.name] = v;
+        emit("change", v);
+      }
+    };
+  }
+});
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_magic_code_editor = resolveComponent("magic-code-editor");
+  return openBlock(), createBlock(_component_magic_code_editor, {
+    style: normalizeStyle(`height: ${_ctx.height}`),
+    "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$k, [["render", _sfc_render$k]]);
+
+const _sfc_main$j = 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 = ref({
+      form: {}
+    });
+    watchEffect(() => {
+      if (!props.model || !props.name)
+        return;
+      modelValue.value.form[props.name] = serialize(props.model[props.name], {
+        space: 2,
+        unsafe: true
+      }).replace(/"(\w+)":\s/g, "$1: ");
+    });
+    return {
+      modelValue,
+      formConfig: 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$j(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_m_fields_link = resolveComponent("m-fields-link");
+  return openBlock(), createBlock(_component_m_fields_link, {
+    config: _ctx.formConfig,
+    model: _ctx.modelValue,
+    name: "form",
+    onChange: _ctx.changeHandler
+  }, null, 8, ["config", "model", "onChange"]);
+}
+var CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
+
+var UISelect_vue_vue_type_style_index_0_lang = '';
+
+const _sfc_main$i = 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 = inject("services");
+    const mForm = inject("mForm");
+    const val = computed(() => props.model[props.name]);
+    const uiSelectMode = 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: 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__ */ 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__ */ createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.uiSelectMode ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: "m-fields-ui-select",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelHandler && _ctx.cancelHandler(...args))
+  }, _hoisted_2$7)) : (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: "m-fields-ui-select",
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.startSelect && _ctx.startSelect(...args))
+  }, [
+    _hoisted_3$5,
+    createElementVNode("span", null, toDisplayString(_ctx.val ? _ctx.toName + "_" + _ctx.val : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1),
+    _ctx.val ? (openBlock(), createElementBlock("i", {
+      key: 0,
+      class: "el-icon-delete",
+      onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.deleteHandler && _ctx.deleteHandler(...args), ["stop"]))
+    })) : createCommentVNode("", true)
+  ]));
+}
+var uiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
+
+const toString = (v, language) => {
+  let value = "";
+  if (typeof v !== "string") {
+    value = serialize(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$h = defineComponent({
+  name: "magic-code-editor",
+  props: {
+    initValues: {
+      type: [String, Object]
+    },
+    modifiedValues: {
+      type: [String, Object]
+    },
+    type: {
+      type: [String],
+      default: () => ""
+    },
+    language: {
+      type: [String],
+      default: () => "javascript"
+    }
+  },
+  emits: ["initd", "save"],
+  setup(props, { emit }) {
+    let vsEditor = null;
+    let vsDiffEditor = null;
+    const values = ref("");
+    const loading = ref(false);
+    const codeEditor = ref();
+    const setEditorValue = (v, m) => {
+      values.value = toString(v, props.language);
+      if (props.type === "diff") {
+        const originalModel = monaco.editor.createModel(values.value, "text/javascript");
+        const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
+        return vsDiffEditor?.setModel({
+          original: originalModel,
+          modified: modifiedModel
+        });
+      }
+      return vsEditor?.setValue(values.value);
+    };
+    const resizeHandler = () => {
+      vsEditor?.layout();
+      vsDiffEditor?.layout();
+    };
+    const getEditorValue = () => props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+    const init = async () => {
+      if (!codeEditor.value)
+        return;
+      const options = {
+        value: values.value,
+        language: props.language,
+        tabSize: 2,
+        theme: "vs-dark",
+        fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
+        fontSize: 15,
+        formatOnPaste: true
+      };
+      if (props.type === "diff") {
+        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+      } else {
+        vsEditor = monaco.editor.create(codeEditor.value, options);
+      }
+      setEditorValue(props.initValues, props.modifiedValues);
+      loading.value = false;
+      emit("initd", 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);
+    };
+    watch(() => props.initValues, (v, preV) => {
+      if (v !== preV) {
+        setEditorValue(props.initValues, props.modifiedValues);
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
+    onMounted(async () => {
+      loading.value = true;
+      init();
+    });
+    onUnmounted(() => {
+      globalThis.removeEventListener("resize", resizeHandler);
+    });
+    return {
+      values,
+      loading,
+      codeEditor,
+      getEditor() {
+        return vsEditor || vsDiffEditor;
+      },
+      setEditorValue,
+      focus() {
+        vsEditor?.focus();
+        vsDiffEditor?.focus();
+      }
+    };
+  }
+});
+const _hoisted_1$c = {
+  ref: "codeEditor",
+  class: "magic-code-editor"
+};
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$c, null, 512);
+}
+var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
+
+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, 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 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 EventEmitter$2 {
+  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 = 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 = reactive({
+    propsConfigMap: {},
+    propsValueMap: {}
+  });
+  constructor() {
+    super(["setPropsConfig", "getPropsConfig", "setPropsValue", "getPropsValue"]);
+  }
+  setPropsConfigs(configs) {
+    Object.keys(configs).forEach((type) => {
+      this.setPropsConfig(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 cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+  }
+  setPropsValues(values) {
+    Object.keys(values).forEach((type) => {
+      this.setPropsValue(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 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 || {});
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["ESCAPE"] = "Space";
+  return Keys2;
+})(Keys || {});
+
+const COPY_STORAGE_KEY = "$MagicEditorCopyData";
+const generateId = (type) => `${type}_${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 (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 (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 = 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 = 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(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 = 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 = 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(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({ ...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: cloneDeep(newNode), root: 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 = cloneDeep(toRaw(info.node));
+    let newConfig = await this.toggleFixedPosition(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 { parent } = info;
+    if (!parent)
+      throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
+    const parentNodeItems = parent.items;
+    const index = getNodeIndex(newConfig, parent);
+    if (!parentNodeItems || typeof index === "undefined" || index === -1)
+      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: 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 = cloneDeep(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(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: cloneDeep(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: cloneDeep(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 = cloneDeep(toRaw(this.get("node")));
+    if (!this.isHistoryStateChange) {
+      historyService.push({
+        data: cloneDeep(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 = cloneDeep(dist);
+    if (!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 = reactive({});
+const methodMap = reactive({});
+class Events extends BaseService {
+  constructor() {
+    super([]);
+  }
+  init(componentGroupList) {
+    componentGroupList.forEach((group) => {
+      group.items.forEach((element) => {
+        const type = toLine(element.type);
+        if (!this.getEvent(type)) {
+          this.setEvent(type, DEFAULT_EVENTS);
+        }
+        if (!this.getMethod(type)) {
+          this.setMethod(type, DEFAULT_METHODS);
+        }
+      });
+    });
+  }
+  setEvents(events) {
+    Object.keys(events).forEach((type) => {
+      this.setEvent(toLine(type), events[type] || []);
+    });
+  }
+  setEvent(type, events) {
+    eventMap[type] = [...DEFAULT_EVENTS, ...events];
+  }
+  getEvent(type) {
+    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
+  }
+  setMethods(methods) {
+    Object.keys(methods).forEach((type) => {
+      this.setMethod(toLine(type), methods[type] || []);
+    });
+  }
+  setMethod(type, method) {
+    methodMap[type] = [...DEFAULT_METHODS, ...method];
+  }
+  getMethod(type) {
+    return cloneDeep(methodMap[type] || 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$g = defineComponent({
+  components: { Plus },
+  setup() {
+    const services = inject("services");
+    return {
+      clickHandler() {
+        const { editorService } = services || {};
+        if (!editorService)
+          return;
+        editorService.add({
+          type: "page",
+          name: generatePageNameByApp(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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_plus = resolveComponent("plus");
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("div", _hoisted_1$b, [
+    createElementVNode("div", _hoisted_2$6, [
+      createElementVNode("div", {
+        class: "m-editor-empty-button",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
+      }, [
+        createElementVNode("div", null, [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(_component_plus)
+            ]),
+            _: 1
+          })
+        ]),
+        _hoisted_3$4
+      ])
+    ])
+  ]);
+}
+var AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
+
+/*
+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$f = defineComponent({
+  name: "m-editor-resize",
+  props: {
+    type: {
+      type: String
+    }
+  },
+  setup(props) {
+    const services = inject("services");
+    const target = ref();
+    let getso;
+    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 } = {
+          ...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
+        });
+      });
+    });
+    onUnmounted(() => {
+      getso?.unset();
+    });
+    return {
+      target
+    };
+  }
+});
+const _hoisted_1$a = {
+  ref: "target",
+  class: "m-editor-resizer"
+};
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$a, [
+    renderSlot(_ctx.$slots, "default")
+  ], 512);
+}
+var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
+
+const _sfc_main$e = defineComponent({
+  components: {
+    AddPageBox,
+    Resizer
+  },
+  setup() {
+    const services = inject("services");
+    const root = computed(() => services?.editorService.get("root"));
+    return {
+      root,
+      pageLength: computed(() => root.value?.items?.length || 0),
+      showSrc: computed(() => services?.uiService.get("showSrc")),
+      columnWidth: 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$e(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_magic_code_editor = resolveComponent("magic-code-editor");
+  const _component_resizer = resolveComponent("resizer");
+  const _component_el_scrollbar = resolveComponent("el-scrollbar");
+  const _component_add_page_box = resolveComponent("add-page-box");
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+    renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
+    _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
+      key: 0,
+      class: "m-editor-content",
+      "init-values": _ctx.root,
+      onSave: _ctx.saveCode
+    }, null, 8, ["init-values", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$5, [
+      createElementVNode("div", {
+        class: "m-editor-framework-left",
+        style: normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
+      }, [
+        renderSlot(_ctx.$slots, "sidebar")
+      ], 4),
+      createVNode(_component_resizer, { type: "left" }),
+      _ctx.pageLength > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createElementVNode("div", {
+          class: "m-editor-framework-center",
+          style: normalizeStyle(`width: ${_ctx.columnWidth?.center}px`)
+        }, [
+          renderSlot(_ctx.$slots, "workspace")
+        ], 4),
+        createVNode(_component_resizer, { type: "right" }),
+        createElementVNode("div", {
+          class: "m-editor-framework-right",
+          style: normalizeStyle(`width: ${_ctx.columnWidth?.right}px`)
+        }, [
+          createVNode(_component_el_scrollbar, null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "propsPanel")
+            ]),
+            _: 3
+          })
+        ], 4)
+      ], 64)) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+        createVNode(_component_add_page_box)
+      ])
+    ]))
+  ]);
+}
+var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
+
+const _sfc_main$d = defineComponent({
+  name: "m-icon",
+  components: { Edit },
+  props: {
+    icon: {
+      type: [String, Object]
+    }
+  },
+  setup() {
+    return {
+      toRaw
+    };
+  }
+});
+const _hoisted_1$8 = ["src"];
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_edit = resolveComponent("edit");
+  const _component_el_icon = resolveComponent("el-icon");
+  return !_ctx.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
+    default: withCtx(() => [
+      createVNode(_component_edit)
+    ]),
+    _: 1
+  })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createElementBlock("img", {
+    key: 1,
+    src: _ctx.icon
+  }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+    key: 2,
+    class: normalizeClass(_ctx.icon)
+  }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
+    default: withCtx(() => [
+      (openBlock(), createBlock(resolveDynamicComponent(_ctx.toRaw(_ctx.icon))))
+    ]),
+    _: 1
+  }));
+}
+var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
+
+const _sfc_main$c = defineComponent({
+  components: { MIcon, ArrowDown },
+  props: {
+    data: {
+      type: [Object, String],
+      require: true,
+      default: () => ({
+        type: "text",
+        display: false
+      })
+    }
+  },
+  setup(props) {
+    const services = 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 = computed(() => uiService?.get("zoom") ?? 1);
+    const showGuides = computed(() => uiService?.get("showGuides") ?? true);
+    const showRule = computed(() => uiService?.get("showRule") ?? true);
+    const item = 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: 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: Back,
+            tooltip: "\u540E\u9000",
+            disabled: () => !services?.historyService.state.canUndo,
+            handler: () => services?.editorService.undo()
+          };
+        case "redo":
+          return {
+            type: "button",
+            icon: Right,
+            tooltip: "\u524D\u8FDB",
+            disabled: () => !services?.historyService.state.canRedo,
+            handler: () => services?.editorService.redo()
+          };
+        case "zoom-in":
+          return {
+            type: "button",
+            icon: ZoomIn,
+            tooltip: "\u653E\u5927",
+            handler: zoomInHandler
+          };
+        case "zoom-out":
+          return {
+            type: "button",
+            icon: ZoomOut,
+            tooltip: "\u7E2E\u5C0F",
+            handler: zoomOutHandler
+          };
+        case "rule":
+          return {
+            type: "button",
+            icon: ScaleToOriginal,
+            tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
+            handler: () => uiService?.set("showRule", !showRule.value)
+          };
+        case "guides":
+          return {
+            type: "button",
+            icon: 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 = 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,
+      ZoomOut,
+      item,
+      zoom,
+      disabled,
+      display: 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$c(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_divider = resolveComponent("el-divider");
+  const _component_m_icon = resolveComponent("m-icon");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  const _component_arrow_down = resolveComponent("arrow-down");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+  const _component_el_dropdown = resolveComponent("el-dropdown");
+  return _ctx.display ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+    _ctx.item.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
+      key: 0,
+      direction: "vertical"
+    })) : _ctx.item.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_2$4, toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+      createVNode(_component_m_icon, {
+        icon: _ctx.ZoomIn,
+        onClick: _ctx.zoomInHandler
+      }, null, 8, ["icon", "onClick"]),
+      createElementVNode("span", _hoisted_3$3, toDisplayString(parseInt(`${_ctx.zoom * 100}`, 10)) + "%", 1),
+      createVNode(_component_m_icon, {
+        icon: _ctx.ZoomOut,
+        onClick: _ctx.zoomOutHandler
+      }, null, 8, ["icon", "onClick"])
+    ], 64)) : _ctx.item.type === "button" ? (openBlock(), createBlock(_component_el_tooltip, {
+      key: 3,
+      effect: "dark",
+      placement: "bottom-start",
+      content: _ctx.item.tooltip || _ctx.item.text
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_el_button, {
+          size: "small",
+          type: "text",
+          disabled: _ctx.disabled,
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.buttonHandler(_ctx.item))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_m_icon, {
+              icon: _ctx.item.icon
+            }, null, 8, ["icon"]),
+            createElementVNode("span", null, toDisplayString(_ctx.item.text), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])
+      ]),
+      _: 1
+    }, 8, ["content"])) : _ctx.item.type === "dropdown" ? (openBlock(), createBlock(_component_el_dropdown, {
+      key: 4,
+      trigger: "click",
+      disabled: _ctx.disabled,
+      onCommand: _ctx.dropdownHandler
+    }, {
+      dropdown: withCtx(() => [
+        _ctx.item.items && _ctx.item.items.length ? (openBlock(), createBlock(_component_el_dropdown_menu, { key: 0 }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.item.items, (subItem, index) => {
+              return openBlock(), createBlock(_component_el_dropdown_item, {
+                key: index,
+                command: { item: _ctx.item, subItem }
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(subItem.text), 1)
+                ]),
+                _: 2
+              }, 1032, ["command"]);
+            }), 128))
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ]),
+      default: withCtx(() => [
+        createElementVNode("span", _hoisted_4$3, [
+          createTextVNode(toDisplayString(_ctx.item.text), 1),
+          createVNode(_component_el_icon, { class: "el-icon--right" }, {
+            default: withCtx(() => [
+              createVNode(_component_arrow_down)
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      _: 1
+    }, 8, ["disabled", "onCommand"])) : _ctx.item.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.item.component), normalizeProps(mergeProps({ key: 5 }, _ctx.item.props || {})), null, 16)) : createCommentVNode("", true)
+  ])) : createCommentVNode("", true);
+}
+var ToolButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+
+const _sfc_main$b = defineComponent({
+  name: "nav-menu",
+  components: { ToolButton },
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    height: {
+      type: Number
+    }
+  },
+  setup(props) {
+    return {
+      keys: computed(() => Object.keys(props.data))
+    };
+  }
+});
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_tool_button = resolveComponent("tool-button");
+  return openBlock(), createElementBlock("div", {
+    class: "m-editor-nav-menu",
+    style: normalizeStyle({ height: `${_ctx.height}px` })
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.keys, (key) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`menu-${key}`),
+        key
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data[key], (item, index) => {
+          return openBlock(), createBlock(_component_tool_button, {
+            data: item,
+            key: index
+          }, null, 8, ["data"]);
+        }), 128))
+      ], 2);
+    }), 128))
+  ], 4);
+}
+var NavMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+
+const _sfc_main$a = defineComponent({
+  name: "m-editor-props-panel",
+  emits: ["mounted"],
+  setup(props, { emit }) {
+    const internalInstance = getCurrentInstance();
+    const values = ref({});
+    const configForm = ref();
+    const curFormConfig = ref([]);
+    const services = 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) || [];
+    };
+    watchEffect(init);
+    services?.propsService.on("props-configs-change", init);
+    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);
+          ElMessage.closeAll();
+          ElMessage.error({
+            duration: 1e4,
+            showClose: true,
+            message: e.message,
+            dangerouslyUseHTMLString: true
+          });
+        }
+      }
+    };
+  }
+});
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_m_form = resolveComponent("m-form");
+  return openBlock(), createBlock(_component_m_form, {
+    class: "m-editor-props-panel",
+    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$a, [["render", _sfc_render$a]]);
+
+const _sfc_main$9 = defineComponent({
+  name: "ui-component-panel",
+  components: { MIcon },
+  setup() {
+    const searchText = ref("");
+    const services = inject("services");
+    const list = computed(() => services?.componentListService.getList().map((group) => ({
+      ...group,
+      items: group.items.filter((item) => item.text.includes(searchText.value))
+    })));
+    const collapseValue = 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__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+const _hoisted_2$3 = ["onClick"];
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_input = resolveComponent("el-input");
+  const _component_m_icon = resolveComponent("m-icon");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  const _component_el_collapse_item = resolveComponent("el-collapse-item");
+  const _component_el_collapse = resolveComponent("el-collapse");
+  const _component_el_scrollbar = resolveComponent("el-scrollbar");
+  return openBlock(), createBlock(_component_el_scrollbar, null, {
+    default: withCtx(() => [
+      createVNode(_component_el_collapse, {
+        class: "ui-component-panel",
+        "model-value": _ctx.collapseValue
+      }, {
+        default: withCtx(() => [
+          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"]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (group, index) => {
+            return openBlock(), createElementBlock(Fragment, null, [
+              group.items && group.items.length ? (openBlock(), createBlock(_component_el_collapse_item, {
+                key: index,
+                name: index
+              }, {
+                title: withCtx(() => [
+                  _hoisted_1$6,
+                  createTextVNode(toDisplayString(group.title), 1)
+                ]),
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+                    return openBlock(), createElementBlock("div", {
+                      class: "component-item",
+                      key: item.type,
+                      onClick: ($event) => _ctx.appendComponent(item)
+                    }, [
+                      createVNode(_component_m_icon, {
+                        icon: item.icon
+                      }, null, 8, ["icon"]),
+                      createVNode(_component_el_tooltip, {
+                        effect: "dark",
+                        placement: "bottom",
+                        content: item.text
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("span", null, toDisplayString(item.text), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["content"])
+                    ], 8, _hoisted_2$3);
+                  }), 128))
+                ]),
+                _: 2
+              }, 1032, ["name"])) : createCommentVNode("", true)
+            ], 64);
+          }), 256))
+        ]),
+        _: 1
+      }, 8, ["model-value"])
+    ]),
+    _: 1
+  });
+}
+var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+
+const _sfc_main$8 = defineComponent({
+  name: "magic-editor-content-menu",
+  props: {
+    componentGroupList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const services = inject("services");
+    const subVisible = ref(false);
+    const node = computed(() => services?.editorService.get("node"));
+    return {
+      subVisible,
+      node,
+      menu: 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__ */ createElementVNode("div", { class: "separation" }, null, -1);
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_scrollbar = resolveComponent("el-scrollbar");
+  return _ctx.node ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+    _ctx.node.items ? (openBlock(), createElementBlock("div", {
+      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)) : createCommentVNode("", true),
+    _ctx.node.type !== "app" ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: "magic-editor-content-menu-item",
+      onClick: _cache[2] || (_cache[2] = () => _ctx.copy(_ctx.node))
+    }, "\u590D\u5236")) : createCommentVNode("", true),
+    _ctx.node.type !== "app" && _ctx.node.type !== "page" ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      class: "magic-editor-content-menu-item",
+      onClick: _cache[3] || (_cache[3] = () => _ctx.remove())
+    }, " \u5220\u9664 ")) : createCommentVNode("", true),
+    withDirectives(createElementVNode("div", {
+      class: "subMenu",
+      onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.setSubVisiable(true)),
+      onMouseleave: _cache[6] || (_cache[6] = ($event) => _ctx.setSubVisiable(false))
+    }, [
+      createVNode(_component_el_scrollbar, null, {
+        default: withCtx(() => [
+          _ctx.node.type === "tabs" ? (openBlock(), 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" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.menu.app, (item) => {
+            return openBlock(), createElementBlock("div", {
+              class: "magic-editor-content-menu-item",
+              key: item.type,
+              onClick: () => _ctx.append(item)
+            }, toDisplayString(item.text), 9, _hoisted_2$2);
+          }), 128)) : _ctx.node.items ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.menu.component, (list) => {
+            return openBlock(), createElementBlock("div", {
+              key: list.title
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(list.items, (item) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  item ? (openBlock(), createElementBlock("div", {
+                    class: "magic-editor-content-menu-item",
+                    key: item.type,
+                    onClick: () => _ctx.append(item)
+                  }, toDisplayString(item.text), 9, _hoisted_3$2)) : createCommentVNode("", true)
+                ], 64);
+              }), 256)),
+              _hoisted_4$2
+            ]);
+          }), 128)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      })
+    ], 544), [
+      [vShow, _ctx.subVisible]
+    ])
+  ])) : createCommentVNode("", true);
+}
+var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+
+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 = computed(() => editorService?.get("page"));
+  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: 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: 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 = ref({
+    position: "absolute",
+    left: "0",
+    top: "0",
+    display: "none"
+  });
+  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$7 = defineComponent({
+  name: "magic-editor-layer-panel",
+  components: { LayerMenu },
+  setup() {
+    const services = inject("services");
+    const tree = 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$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_input = resolveComponent("el-input");
+  const _component_el_tree = resolveComponent("el-tree");
+  const _component_layer_menu = resolveComponent("layer-menu");
+  const _component_el_scrollbar = resolveComponent("el-scrollbar");
+  return openBlock(), createBlock(_component_el_scrollbar, { class: "magic-editor-layer-panel" }, {
+    default: withCtx(() => [
+      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 ? (openBlock(), 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: withCtx(({ node, data }) => [
+          renderSlot(_ctx.$slots, "layer-node-content", {
+            node,
+            data
+          }, () => [
+            createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : createCommentVNode("", true),
+      (openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(_component_layer_menu, {
+          style: normalizeStyle(_ctx.menuStyle)
+        }, null, 8, ["style"])
+      ]))
+    ]),
+    _: 3
+  });
+}
+var LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+
+const _sfc_main$6 = defineComponent({
+  name: "m-sidebar",
+  components: { MIcon },
+  props: {
+    data: {
+      type: Object,
+      default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
+    }
+  },
+  setup(props) {
+    const activeTabName = ref(props.data?.status);
+    watch(() => props.data?.status, (status) => {
+      activeTabName.value = status || "0";
+    });
+    return {
+      activeTabName,
+      items: computed(() => props.data?.items.map((item) => {
+        if (typeof item !== "string") {
+          return item;
+        }
+        switch (item) {
+          case "component-list":
+            return {
+              type: "component",
+              icon: Coin,
+              text: "\u7EC4\u4EF6",
+              component: ComponentListPanel,
+              slots: {}
+            };
+          case "layer":
+            return {
+              type: "component",
+              icon: 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$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_m_icon = resolveComponent("m-icon");
+  const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  const _component_el_tabs = resolveComponent("el-tabs");
+  return _ctx.data.type === "tabs" ? (openBlock(), 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: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+        return openBlock(), createBlock(_component_el_tab_pane, {
+          key: item.text,
+          name: item.text
+        }, {
+          label: withCtx(() => [
+            createElementVNode("span", null, [
+              item.icon ? (openBlock(), createBlock(_component_m_icon, {
+                key: 0,
+                icon: item.icon
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              item.text ? (openBlock(), createElementBlock("div", _hoisted_1$4, toDisplayString(item.text), 1)) : createCommentVNode("", true)
+            ])
+          ]),
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(item.component), mergeProps(item.props || {}, toHandlers(item.listeners || {})), createSlots({ _: 2 }, [
+              item.slots?.layerNodeContent ? {
+                name: "layer-node-content",
+                fn: withCtx(({ data, node }) => [
+                  (openBlock(), createBlock(resolveDynamicComponent(item.slots.layerNodeContent), {
+                    data,
+                    node
+                  }, null, 8, ["data", "node"]))
+                ])
+              } : void 0
+            ]), 1040))
+          ]),
+          _: 2
+        }, 1032, ["name"]);
+      }), 128))
+    ]),
+    _: 1
+  }, 8, ["modelValue"])) : createCommentVNode("", true);
+}
+var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+
+const _sfc_main$5 = defineComponent({
+  components: { CaretBottom, Plus },
+  setup() {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    return {
+      root: computed(() => editorService?.get("root")),
+      page: computed(() => editorService?.get("page")),
+      switchPage(page) {
+        editorService?.select(page);
+      },
+      addPage() {
+        if (!editorService)
+          return;
+        const pageConfig = {
+          type: "page",
+          name: generatePageNameByApp(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$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_plus = resolveComponent("plus");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_caret_bottom = resolveComponent("caret-bottom");
+  const _component_el_popover = resolveComponent("el-popover");
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
+    createElementVNode("div", {
+      class: "m-editor-page-bar-item",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.addPage && _ctx.addPage(...args))
+    }, [
+      createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-add-icon" }, {
+        default: withCtx(() => [
+          createVNode(_component_plus)
+        ]),
+        _: 1
+      })
+    ]),
+    _ctx.root ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.root.items, (item) => {
+      return openBlock(), createElementBlock("div", {
+        key: item.key,
+        class: normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
+        onClick: ($event) => _ctx.switchPage(item)
+      }, [
+        renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+          createElementVNode("span", null, toDisplayString(item.name), 1)
+        ]),
+        createVNode(_component_el_popover, {
+          placement: "top",
+          width: 160,
+          trigger: "hover"
+        }, {
+          reference: withCtx(() => [
+            createVNode(_component_el_icon, { class: "m-editor-page-bar-menu-icon" }, {
+              default: withCtx(() => [
+                createVNode(_component_caret_bottom)
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", null, [
+              renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                createElementVNode("div", {
+                  class: "magic-editor-content-menu-item",
+                  onClick: () => _ctx.copy(item)
+                }, "\u590D\u5236", 8, _hoisted_3$1),
+                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)) : createCommentVNode("", true)
+  ]);
+}
+var PageBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+
+class ScrollViewer$1 {
+  enter = false;
+  targetEnter = false;
+  keydown = false;
+  container;
+  target;
+  zoom = 1;
+  scrollLeft = 0;
+  scrollTop = 0;
+  x = 0;
+  y = 0;
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      const { width, height } = contentRect;
+      const targetRect = this.target.getBoundingClientRect();
+      const targetWidth = targetRect.width * this.zoom;
+      const targetHeight = targetRect.height * this.zoom;
+      if (targetWidth < width) {
+        this.target._left = 0;
+      }
+      if (targetHeight < height) {
+        this.target._top = 0;
+      }
+      this.scroll();
+    }
+  });
+  constructor(options) {
+    this.container = options.container;
+    this.target = options.target;
+    this.zoom = options.zoom;
+    globalThis.addEventListener("keydown", this.keydownHandler);
+    globalThis.addEventListener("keyup", this.keyupHandler);
+    this.container.addEventListener("mouseenter", this.mouseEnterHandler);
+    this.container.addEventListener("mouseleave", this.mouseLeaveHandler);
+    this.target.addEventListener("mouseenter", this.targetMouseEnterHandler);
+    this.target.addEventListener("mouseleave", this.targetMouseLeaveHandler);
+    this.container.addEventListener("wheel", this.wheelHandler);
+    this.resizeObserver.observe(this.container);
+  }
+  destroy() {
+    this.resizeObserver.disconnect();
+    this.container.removeEventListener("mouseenter", this.mouseEnterHandler);
+    this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
+    this.target.removeEventListener("mouseenter", this.targetMouseEnterHandler);
+    this.target.removeEventListener("mouseleave", this.targetMouseLeaveHandler);
+    globalThis.removeEventListener("keydown", this.keydownHandler);
+    globalThis.removeEventListener("keyup", this.keyupHandler);
+  }
+  setZoom(zoom) {
+    this.zoom = zoom;
+  }
+  scroll() {
+    const scrollLeft = this.target._left;
+    const scrollTop = this.target._top;
+    this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
+  }
+  removeHandler() {
+    this.target.style.cursor = "";
+    this.target.removeEventListener("mousedown", this.mousedownHandler);
+    document.removeEventListener("mousemove", this.mousemoveHandler);
+    document.removeEventListener("mouseup", this.mouseupHandler);
+  }
+  wheelHandler = (event) => {
+    if (this.targetEnter)
+      return;
+    const { deltaX, deltaY, currentTarget } = event;
+    if (currentTarget !== this.container)
+      return;
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+    this.scrollLeft = this.target._left;
+    this.scrollTop = this.target._top;
+  };
+  mouseEnterHandler = () => {
+    this.enter = true;
+  };
+  mouseLeaveHandler = () => {
+    this.enter = false;
+  };
+  targetMouseEnterHandler = () => {
+    this.targetEnter = true;
+  };
+  targetMouseLeaveHandler = () => {
+    this.targetEnter = false;
+  };
+  mousedownHandler = (event) => {
+    if (!this.keydown)
+      return;
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    this.target.style.cursor = "grabbing";
+    this.x = event.clientX;
+    this.y = event.clientY;
+    document.addEventListener("mousemove", this.mousemoveHandler);
+    document.addEventListener("mouseup", this.mouseupHandler);
+  };
+  mouseupHandler = () => {
+    this.x = 0;
+    this.y = 0;
+    this.scrollLeft = this.target._left;
+    this.scrollTop = this.target._top;
+    this.removeHandler();
+  };
+  mousemoveHandler = (event) => {
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    const deltaX = event.clientX - this.x;
+    const deltaY = event.clientY - this.y;
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+  };
+  keydownHandler = (event) => {
+    if (event.code === Keys.ESCAPE && this.enter) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+    } else if (this.keydown)
+      return;
+    this.keydown = true;
+    event.preventDefault();
+    this.target.style.cursor = "grab";
+    this.container.addEventListener("mousedown", this.mousedownHandler);
+  };
+  keyupHandler = (event) => {
+    if (event.code !== Keys.ESCAPE || !this.keydown) {
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    this.keydown = false;
+    event.preventDefault();
+    this.removeHandler();
+  };
+  setScrollOffset(deltaX, deltaY) {
+    const { width, height } = this.container.getBoundingClientRect();
+    const targetRect = this.target.getBoundingClientRect();
+    const targetWidth = targetRect.width * this.zoom;
+    const targetHeight = targetRect.height * this.zoom;
+    let y = 0;
+    if (targetHeight > height) {
+      if (deltaY > 0) {
+        y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
+      } else {
+        y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
+      }
+    }
+    let x = 0;
+    if (targetWidth > width) {
+      if (deltaX > 0) {
+        x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
+      } else {
+        x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
+      }
+    }
+    this.target._left = x;
+    this.target._top = y;
+  }
+}
+
+const _sfc_main$4 = defineComponent({
+  name: "m-editor-scroll-viewer",
+  props: {
+    width: Number,
+    height: Number,
+    zoom: {
+      type: Number,
+      default: 1
+    }
+  },
+  setup(props) {
+    const container = ref();
+    const el = ref();
+    let scrollViewer;
+    onMounted(() => {
+      if (!container.value || !el.value)
+        return;
+      scrollViewer = new ScrollViewer$1({
+        container: container.value,
+        target: el.value,
+        zoom: props.zoom
+      });
+    });
+    onUnmounted(() => {
+      scrollViewer.destroy();
+    });
+    watch(() => props.zoom, () => {
+      scrollViewer.setZoom(props.zoom);
+    });
+    return {
+      container,
+      el,
+      style: computed(() => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+      `)
+    };
+  }
+});
+const _hoisted_1$2 = {
+  class: "m-editor-scroll-viewer-container",
+  ref: "container"
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+    createElementVNode("div", {
+      ref: "el",
+      style: normalizeStyle(_ctx.style)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 4)
+  ], 512);
+}
+var ScrollViewer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+
+const _sfc_main$3 = defineComponent({
+  name: "magic-editor-ui-viewer-menu",
+  setup() {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const menu = ref();
+    const canPaste = ref(false);
+    const canCenter = ref(false);
+    const node = computed(() => editorService?.get("node"));
+    const parent = computed(() => editorService?.get("parent"));
+    onMounted(() => {
+      const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
+      canPaste.value = data !== "undefined" && !!data;
+    });
+    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: computed(() => node.value?.type !== "page"),
+      canMoveZPos: 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$1 = {
+  class: "magic-editor-content-menu",
+  ref: "menu"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+    createElementVNode("div", null, [
+      _ctx.canCenter ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "magic-editor-content-menu-item",
+        onClick: _cache[0] || (_cache[0] = () => _ctx.center())
+      }, "\u6C34\u5E73\u5C45\u4E2D")) : createCommentVNode("", true),
+      createElementVNode("div", {
+        class: "magic-editor-content-menu-item",
+        onClick: _cache[1] || (_cache[1] = () => _ctx.copy())
+      }, "\u590D\u5236"),
+      _ctx.canPaste ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: "magic-editor-content-menu-item",
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.paste && _ctx.paste(...args))
+      }, "\u7C98\u8D34")) : createCommentVNode("", true),
+      _ctx.canMoveZPos ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        _hoisted_2,
+        createElementVNode("div", {
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.topItem && _ctx.topItem(...args))
+        }, "\u4E0A\u79FB\u4E00\u5C42"),
+        createElementVNode("div", {
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[4] || (_cache[4] = (...args) => _ctx.bottomItem && _ctx.bottomItem(...args))
+        }, "\u4E0B\u79FB\u4E00\u5C42"),
+        createElementVNode("div", {
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[5] || (_cache[5] = (...args) => _ctx.top && _ctx.top(...args))
+        }, "\u7F6E\u9876"),
+        createElementVNode("div", {
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[6] || (_cache[6] = (...args) => _ctx.bottom && _ctx.bottom(...args))
+        }, "\u7F6E\u5E95")
+      ], 64)) : createCommentVNode("", true),
+      _ctx.canDelete ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+        _hoisted_3,
+        createElementVNode("div", {
+          class: "magic-editor-content-menu-item",
+          onClick: _cache[7] || (_cache[7] = () => _ctx.remove())
+        }, "\u5220\u9664")
+      ], 64)) : createCommentVNode("", true),
+      _hoisted_4,
+      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 = ref();
+  const menuStyle = ref({
+    display: "none",
+    left: "0",
+    top: "0"
+  });
+  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 = defineComponent({
+  name: "magic-stage",
+  components: {
+    ViewerMenu,
+    ScrollViewer
+  },
+  props: {
+    render: {
+      type: Function
+    },
+    runtimeUrl: String,
+    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 = inject("services");
+    const stageWrap = ref();
+    const stageContainer = ref();
+    const stageRect = computed(() => services?.uiService.get("stageRect"));
+    const uiSelectMode = computed(() => services?.uiService.get("uiSelectMode"));
+    const root = computed(() => services?.editorService.get("root"));
+    const page = computed(() => services?.editorService.get("page"));
+    const zoom = computed(() => services?.uiService.get("zoom"));
+    const node = computed(() => services?.editorService.get("node"));
+    let stage = null;
+    let runtime = null;
+    watchEffect(() => {
+      if (stage)
+        return;
+      if (!stageContainer.value)
+        return;
+      if (!(props.runtimeUrl || props.render) || !root.value)
+        return;
+      stage = new StageCore({
+        render: props.render,
+        runtimeUrl: props.runtimeUrl,
+        zoom: zoom.value,
+        canSelect: (el, stop) => {
+          const elCanSelect = props.canSelect(el);
+          if (uiSelectMode.value && 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 (!node.value?.id)
+        return;
+      stage?.on("runtime-ready", (rt) => {
+        runtime = rt;
+        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        page.value?.id && runtime?.updatePageId?.(page.value.id);
+        setTimeout(() => {
+          node.value && stage?.select(toRaw(node.value.id));
+        });
+      });
+    });
+    watch(zoom, (zoom2) => {
+      if (!stage || !zoom2)
+        return;
+      stage.setZoom(zoom2);
+    });
+    watch(root, (root2) => {
+      if (runtime && root2) {
+        runtime.updateRootConfig(cloneDeep(toRaw(root2)));
+      }
+    });
+    watch(() => node.value?.id, (id) => {
+      nextTick(() => {
+        id && stage?.select(id);
+      });
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        services?.uiService.set("stageContainerRect", {
+          width: contentRect.width,
+          height: contentRect.height
+        });
+      }
+    });
+    onMounted(() => {
+      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+    });
+    onUnmounted(() => {
+      stage?.destroy();
+      resizeObserver.disconnect();
+      services?.editorService.set("stage", null);
+    });
+    return {
+      stageWrap,
+      stageContainer,
+      stageRect,
+      zoom,
+      ...useMenu()
+    };
+  }
+});
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_viewer_menu = resolveComponent("viewer-menu");
+  const _component_scroll_viewer = resolveComponent("scroll-viewer");
+  return openBlock(), createBlock(_component_scroll_viewer, {
+    class: "m-editor-stage",
+    ref: "stageWrap",
+    width: _ctx.stageRect?.width,
+    height: _ctx.stageRect?.height,
+    zoom: _ctx.zoom
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "m-editor-stage-container",
+        ref: "stageContainer",
+        onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.contextmenuHandler && _ctx.contextmenuHandler(...args)),
+        style: normalizeStyle(`transform: scale(${_ctx.zoom})`)
+      }, null, 36),
+      (openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(_component_viewer_menu, {
+          ref: "menu",
+          style: normalizeStyle(_ctx.menuStyle)
+        }, null, 8, ["style"])
+      ]))
+    ]),
+    _: 1
+  }, 8, ["width", "height", "zoom"]);
+}
+var MagicStage = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+
+const _sfc_main$1 = defineComponent({
+  name: "m-editor-workspace",
+  components: {
+    PageBar,
+    MagicStage
+  },
+  props: {
+    runtimeUrl: String,
+    render: {
+      type: Function
+    },
+    moveableOptions: {
+      type: [Object, Function]
+    },
+    canSelect: {
+      type: Function
+    }
+  },
+  setup() {
+    const services = inject("services");
+    return {
+      page: computed(() => services?.editorService.get("page")),
+      selectHandler(el) {
+        services?.editorService.select(el.id);
+      },
+      updateNodeHandler(node) {
+        services?.editorService.update(node);
+      },
+      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 = resolveComponent("magic-stage");
+  const _component_page_bar = resolveComponent("page-bar");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(), createBlock(_component_magic_stage, {
+      key: _ctx.page?.id,
+      "runtime-url": _ctx.runtimeUrl,
+      render: _ctx.render,
+      "moveable-options": _ctx.moveableOptions,
+      "can-select": _ctx.canSelect,
+      onSelect: _ctx.selectHandler,
+      onUpdate: _ctx.updateNodeHandler,
+      onSort: _ctx.sortNodeHandler
+    }, null, 8, ["runtime-url", "render", "moveable-options", "can-select", "onSelect", "onUpdate", "onSort"])),
+    renderSlot(_ctx.$slots, "workspace-content"),
+    createVNode(_component_page_bar, null, {
+      "page-bar-title": withCtx(({ page }) => [
+        renderSlot(_ctx.$slots, "page-bar-title", { page })
+      ]),
+      "page-bar-popover": withCtx(({ page }) => [
+        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 = reactive({
+    list: []
+  });
+  constructor() {
+    super([]);
+  }
+  setList(componentGroupList) {
+    this.state.list = componentGroupList;
+  }
+  getList() {
+    return this.state.list;
+  }
+}
+var componentListService = new ComponentList();
+
+const state = reactive({
+  uiSelectMode: false,
+  showSrc: false,
+  zoom: 1,
+  stageContainerRect: {
+    width: 0,
+    height: 0
+  },
+  stageRect: {
+    width: 375,
+    height: 817
+  },
+  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 === "stageRect") {
+      this.setStageRect(value);
+      return;
+    }
+    if (name === "showGuides") {
+      mask?.showGuides(value);
+    }
+    if (name === "showRule") {
+      mask?.showRule(value);
+    }
+    state[name] = value;
+    if (name === "stageContainerRect") {
+      state.zoom = this.calcZoom();
+    }
+  }
+  get(name) {
+    return state[name];
+  }
+  setColumnWidth({ left, center, right }) {
+    const columnWidth = {
+      ...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;
+  }
+  setStageRect(value) {
+    state.stageRect = {
+      ...state.stageRect,
+      ...value
+    };
+    state.zoom = this.calcZoom();
+  }
+  calcZoom() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height)
+      return 1;
+    if (width > stageRect.width && height > stageRect.height) {
+      return 1;
+    }
+    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+  }
+}
+var uiService = new Ui();
+
+const _sfc_main = 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
+    },
+    stageRect: {
+      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", toRaw(editorService.get("root")));
+    });
+    watch(() => props.modelValue, (modelValue) => editorService.set("root", modelValue), {
+      immediate: true
+    });
+    watch(() => props.componentGroupList, (componentGroupList) => componentListService.setList(componentGroupList), {
+      immediate: true
+    });
+    watch(() => props.propsConfigs, (configs) => propsService.setPropsConfigs(configs), {
+      immediate: true
+    });
+    watch(() => props.propsValues, (values) => propsService.setPropsValues(values), {
+      immediate: true
+    });
+    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
+    });
+    watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
+      immediate: true
+    });
+    watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
+      immediate: true
+    });
+    onUnmounted(() => editorService.destroy());
+    const services = {
+      componentListService,
+      eventsService,
+      historyService,
+      propsService,
+      editorService,
+      uiService
+    };
+    provide("services", services);
+    return services;
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nav_menu = resolveComponent("nav-menu");
+  const _component_sidebar = resolveComponent("sidebar");
+  const _component_workspace = resolveComponent("workspace");
+  const _component_props_panel = resolveComponent("props-panel");
+  const _component_framework = resolveComponent("framework");
+  return openBlock(), createBlock(_component_framework, null, {
+    nav: withCtx(() => [
+      renderSlot(_ctx.$slots, "nav", { editorService: _ctx.editorService }, () => [
+        createVNode(_component_nav_menu, { data: _ctx.menu }, null, 8, ["data"])
+      ])
+    ]),
+    sidebar: withCtx(() => [
+      renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
+        createVNode(_component_sidebar, { data: _ctx.sidebar }, null, 8, ["data"])
+      ])
+    ]),
+    workspace: withCtx(() => [
+      renderSlot(_ctx.$slots, "workspace", {}, () => [
+        createVNode(_component_workspace, {
+          "runtime-url": _ctx.runtimeUrl,
+          render: _ctx.render,
+          "moveable-options": _ctx.moveableOptions,
+          "can-select": _ctx.canSelect
+        }, {
+          "workspace-content": withCtx(() => [
+            renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
+          ]),
+          "page-bar-title": withCtx(({ page }) => [
+            renderSlot(_ctx.$slots, "page-bar-title", { page })
+          ]),
+          "page-bar-popover": withCtx(({ page }) => [
+            renderSlot(_ctx.$slots, "page-bar-popover", { page })
+          ]),
+          _: 3
+        }, 8, ["runtime-url", "render", "moveable-options", "can-select"])
+      ])
+    ]),
+    propsPanel: withCtx(() => [
+      renderSlot(_ctx.$slots, "propsPanel", {}, () => [
+        createVNode(_component_props_panel, {
+          ref: "propsPanel",
+          onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
+        }, null, 512)
+      ])
+    ]),
+    empty: withCtx(() => [
+      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);
+  }
+};
+
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, change2Fixed, debug, index as default, defaults, editorService, error, eventsService, fillConfig, generateId, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, setNewItemId, toRelative, uiService, warn };
+//# sourceMappingURL=tmagic-editor.es.js.map