@tmagic/editor 1.4.16 → 1.5.0-beta.1

package/dist/tmagic-editor.js

@@ -6,9 +6,9 @@ import { TMagicIcon, TMagicButton, TMagicCard, getConfig as getConfig$1, TMagicS
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
 import { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel } from '@tmagic/form';
-import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
+import { HookCodeType, HookType, NODE_CONDS_KEY, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
-import { isPage, isPageFragment, isPop, getNodePath, isNumber, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
 import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
@@ -836,7 +836,7 @@ const displayTabConfig = {
   items: [
     {
       type: "display-conds",
-      name: "displayConds",
+      name: NODE_CONDS_KEY,
       titlePrefix: "条件组",
       defaultValue: []
     }
@@ -1112,8 +1112,8 @@ const getGuideLineFromCache = (key) => {
 };
 const fixNodeLeft = (config, parent, doc) => {
   if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
-  const el = doc.getElementById(`${config.id}`);
-  const parentEl = doc.getElementById(`${parent.id}`);
+  const el = getElById()(doc, `${config.id}`);
+  const parentEl = getElById()(doc, `${parent.id}`);
   const left = Number(config.style?.left) || 0;
   if (el && parentEl) {
     const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
@@ -2310,7 +2310,7 @@ class Editor extends BaseService {
     const stage = this.get("stage");
     const doc = stage?.renderer.contentWindow?.document;
     if (doc) {
-      const el = doc.getElementById(`${node.id}`);
+      const el = getElById()(doc, node.id);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
@@ -2655,7 +2655,8 @@ const beforePaste = (position, config, doc) => {
 };
 const getPositionInContainer = (position = {}, id, doc) => {
   let { left = 0, top = 0 } = position;
-  const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const stageDoc = editorService.get("stage")?.renderer?.contentWindow?.document;
+  const parentEl = stageDoc && getElById()(stageDoc, `${id}`);
   const parentElRect = parentEl?.getBoundingClientRect();
   left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
   top = top - calcValueByFontsize(doc, parentElRect?.top || 0);
@@ -2882,7 +2883,7 @@ const getFormValue = (type, values) => {
    * context：上下文对象
    *
    * interface Content {
-   *  app: AppCore;
+   *  app: TMagicApp;
    *  dataSource: HttpDataSource;
    * }
    *
@@ -2899,7 +2900,7 @@ const getFormValue = (type, values) => {
     * context：上下文对象
     *
     * interface Content {
-    *  app: AppCore;
+    *  app: TMagicApp;
     *  dataSource: HttpDataSource;
     * }
     *
@@ -2913,7 +2914,7 @@ const getFormValue = (type, values) => {
 };
 const getDisplayField = (dataSources, key) => {
   const displayState = [];
-  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
+  const matches = key.matchAll(dataSourceTemplateRegExp);
   let index = 0;
   for (const match of matches) {
     if (typeof match.index === "undefined") break;
@@ -2924,7 +2925,7 @@ const getDisplayField = (dataSources, key) => {
     let dsText = "";
     let ds;
     let fields;
-    match[1].replaceAll(/\[(\d+)\]/g, ".$1").split(".").forEach((item, index2) => {
+    getKeysArray(match[1]).forEach((item, index2) => {
       if (index2 === 0) {
         ds = dataSources.find((ds2) => ds2.id === item);
         dsText += ds?.title || item;
@@ -2985,6 +2986,189 @@ const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]
 };
 const removeDataSourceFieldPrefix = (id) => id?.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "") || "";
 
+globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb) {
+  const start = Date.now();
+  return setTimeout(() => {
+    cb({
+      didTimeout: false,
+      timeRemaining() {
+        return Math.max(0, 50 - (Date.now() - start));
+      }
+    });
+  }, 1);
+};
+class IdleTask extends EventEmitter {
+  taskList = [];
+  taskHandle = null;
+  enqueueTask(taskHandler, taskData) {
+    this.taskList.push({
+      handler: taskHandler,
+      data: taskData
+    });
+    if (!this.taskHandle) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
+    }
+  }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  once(eventName, listener) {
+    return super.once(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
+  runTaskQueue(deadline) {
+    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
+      const task = this.taskList.shift();
+      task.handler(task.data);
+    }
+    if (this.taskList.length) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
+    } else {
+      this.taskHandle = 0;
+      this.emit("finish");
+    }
+  }
+}
+
+class ScrollViewer extends EventEmitter {
+  container;
+  target;
+  zoom = 1;
+  scrollLeft = 0;
+  scrollTop = 0;
+  scrollHeight = 0;
+  scrollWidth = 0;
+  width = 0;
+  height = 0;
+  translateXCorrectionValue = 0;
+  translateYCorrectionValue = 0;
+  correctionScrollSize = {
+    width: 0,
+    height: 0
+  };
+  resizeObserver = new ResizeObserver(() => {
+    this.setSize();
+    this.setScrollSize();
+  });
+  constructor(options) {
+    super();
+    this.container = options.container;
+    this.target = options.target;
+    this.zoom = options.zoom;
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize
+      };
+    }
+    this.container.addEventListener("wheel", this.wheelHandler, false);
+    this.setSize();
+    this.setScrollSize();
+    this.resizeObserver.observe(this.container);
+    this.resizeObserver.observe(this.target);
+  }
+  destroy() {
+    this.resizeObserver.disconnect();
+    this.container.removeEventListener("wheel", this.wheelHandler, false);
+    this.removeAllListeners();
+  }
+  setZoom(zoom) {
+    this.zoom = zoom;
+    this.setScrollSize();
+  }
+  scrollTo({ left, top }) {
+    if (typeof left !== "undefined") {
+      this.scrollLeft = left;
+    }
+    if (typeof top !== "undefined") {
+      this.scrollTop = top;
+    }
+    const translateX = -this.scrollLeft + this.translateXCorrectionValue;
+    const translateY = -this.scrollTop + this.translateYCorrectionValue;
+    this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
+  }
+  wheelHandler = (event) => {
+    const { deltaX, deltaY, currentTarget } = event;
+    if (currentTarget !== this.container) return;
+    let top;
+    if (this.scrollHeight > this.height) {
+      top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
+    }
+    let left;
+    if (this.scrollWidth > this.width) {
+      left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
+    }
+    this.scrollTo({ left, top });
+    this.emit("scroll", {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth
+    });
+  };
+  getPos(delta, scrollPos, scrollSize, size) {
+    let pos = 0;
+    if (delta < 0) {
+      if (scrollPos > 0) {
+        pos = Math.max(delta, -scrollPos);
+      }
+    } else {
+      const leftPos = scrollSize - size - scrollPos;
+      if (leftPos > 0) {
+        pos = Math.min(delta, leftPos);
+      }
+    }
+    return pos;
+  }
+  setScrollSize = () => {
+    const targetRect = this.target.getBoundingClientRect();
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
+    const targetMarginTop = Number(this.target.style.marginTop) || 0;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
+    let left;
+    let top;
+    if (this.scrollWidth < this.width) {
+      left = 0;
+      this.translateXCorrectionValue = 0;
+    } else {
+      this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
+    }
+    if (this.scrollHeight < this.height) {
+      top = 0;
+      this.translateYCorrectionValue = 0;
+    } else {
+      this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
+    }
+    this.scrollTo({
+      left,
+      top
+    });
+    this.emit("scroll", {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth
+    });
+  };
+  setSize = () => {
+    const { width, height } = this.container.getBoundingClientRect();
+    this.width = width;
+    this.height = height;
+  };
+}
+
+const updateStatus = (nodeStatusMap, id, status) => {
+  const nodeStatus = nodeStatusMap.get(id);
+  if (!nodeStatus) return;
+  getKeys(status).forEach((key) => {
+    if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
+      nodeStatus[key] = Boolean(status[key]);
+    }
+  });
+};
+
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
@@ -3007,7 +3191,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         type: "fieldset",
         items,
         legend: "参数",
-        labelWidth: "70px",
+        labelWidth: "120px",
         name: props.name
       }
     ];
@@ -3046,7 +3230,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$u = { class: "m-fields-code-select-col" };
-const _hoisted_2$k = { class: "code-select-container" };
+const _hoisted_2$j = { class: "code-select-container" };
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelectCol"
@@ -3127,7 +3311,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        createElementVNode("div", _hoisted_2$k, [
+        createElementVNode("div", _hoisted_2$j, [
           createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
@@ -3705,29 +3889,34 @@ const useStage = (stageOptions) => {
     editorService.set("stageLoading", false);
   });
   stage.on("select", (el) => {
-    if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1) return;
-    editorService.select(el.id);
+    const id = getIdFromEl()(el);
+    if (`${editorService.get("node")?.id}` === id && editorService.get("nodes").length === 1) return;
+    id && editorService.select(id);
   });
   stage.on("highlight", (el) => {
-    editorService.highlight(el.id);
+    const id = getIdFromEl()(el);
+    id && editorService.highlight(id);
   });
   stage.on("multi-select", (els) => {
-    editorService.multiSelect(els.map((el) => el.id));
+    const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id));
+    editorService.multiSelect(ids);
   });
   stage.on("update", (ev) => {
     if (ev.parentEl) {
       for (const data of ev.data) {
-        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+        const id = getIdFromEl()(data.el);
+        const pId = getIdFromEl()(ev.parentEl);
+        id && pId && editorService.moveToContainer({ id, style: data.style }, pId);
       }
       return;
     }
-    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+    editorService.update(ev.data.map((data) => ({ id: getIdFromEl()(data.el) || "", style: data.style })));
   });
   stage.on("sort", (ev) => {
     editorService.sort(ev.src, ev.dist);
   });
   stage.on("remove", (ev) => {
-    const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+    const nodes = ev.data.map(({ el }) => editorService.getNodeById(getIdFromEl()(el) || ""));
     editorService.remove(nodes.filter((node) => Boolean(node)));
   });
   stage.on("select-parent", () => {
@@ -3872,6 +4061,68 @@ const useEditorContentHeight = () => {
   };
 };
 
+const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
+  const filterIsMatch = (value, data) => {
+    const string = !Array.isArray(value) ? [value] : value;
+    if (!string.length) {
+      return true;
+    }
+    return string.some((v) => filterNodeMethod(v, data));
+  };
+  const filter = (text) => {
+    if (!nodeData.value.length) return;
+    nodeData.value.forEach((node) => {
+      traverseNode(node, (node2, parents) => {
+        if (!nodeStatusMap.value) return;
+        const visible = filterIsMatch(text, node2);
+        if (visible && parents.length) {
+          parents.forEach((parent) => {
+            updateStatus(nodeStatusMap.value, parent.id, {
+              visible,
+              expand: true
+            });
+          });
+        }
+        updateStatus(nodeStatusMap.value, node2.id, {
+          visible
+        });
+      });
+    });
+  };
+  return {
+    filterText: ref(""),
+    filterTextChangeHandler(text) {
+      filter(text);
+    }
+  };
+};
+
+const useGetSo = (target, emit) => {
+  let getso;
+  const isDraging = ref(false);
+  onMounted(() => {
+    if (!target.value) return;
+    getso = new Gesto(target.value, {
+      container: window,
+      pinchOutside: true
+    }).on("drag", (e) => {
+      if (!target.value) return;
+      emit("change", e);
+    }).on("dragStart", () => {
+      isDraging.value = true;
+    }).on("dragEnd", () => {
+      isDraging.value = false;
+    });
+  });
+  onBeforeUnmount(() => {
+    getso?.unset();
+    isDraging.value = false;
+  });
+  return {
+    isDraging
+  };
+};
+
 const useNextFloatBoxPosition = (uiService, parent) => {
   const boxPosition = ref({
     left: 0,
@@ -3896,8 +4147,42 @@ const useNextFloatBoxPosition = (uiService, parent) => {
   };
 };
 
+const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
+  const map = /* @__PURE__ */ new Map();
+  nodeData.forEach(
+    (node) => traverseNode(node, (node2) => {
+      map.set(
+        node2.id,
+        initialLayerNodeStatus?.get(node2.id) || {
+          visible: true,
+          expand: false,
+          selected: false,
+          draggable: false
+        }
+      );
+    })
+  );
+  return map;
+};
+const useNodeStatus$1 = (nodeData) => {
+  const nodeStatusMap = ref(/* @__PURE__ */ new Map());
+  watch(
+    nodeData,
+    (nodeData2) => {
+      nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  return {
+    nodeStatusMap
+  };
+};
+
 const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-const _hoisted_2$j = { class: "m-editor-data-source-fields-footer" };
+const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFields"
@@ -4154,7 +4439,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$j, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -4542,7 +4827,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$q = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$i = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
 const _hoisted_3$8 = { class: "el-input__inner t-input__inner" };
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
@@ -4639,7 +4924,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const fieldQuerySearch = (queryString, leftAngleIndex, dotIndex, cb) => {
       let result = [];
       const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
-      const keys = dsKey.replaceAll(/\[(\d+)\]/g, ".$1").split(".");
+      const keys = getKeysArray(dsKey);
       const dsId = keys.shift();
       const ds = dataSources.value.find((ds2) => ds2.id === dsId);
       if (!ds) {
@@ -4749,7 +5034,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         default: withCtx(({ item }) => [
           createElementVNode("div", _hoisted_1$q, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$i, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$h, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -4791,7 +5076,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$p = { style: { "display": "flex", "margin-bottom": "10px" } };
-const _hoisted_2$h = { style: { "flex": "1" } };
+const _hoisted_2$g = { style: { "flex": "1" } };
 const _hoisted_3$7 = { style: { "flex": "1" } };
 const _hoisted_4$7 = { class: "dialog-footer" };
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
@@ -5045,7 +5330,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             ]),
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1$p, [
-                createElementVNode("div", _hoisted_2$h, [
+                createElementVNode("div", _hoisted_2$g, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "info"
@@ -5088,7 +5373,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$o = { class: "m-editor-data-source-methods" };
-const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
+const _hoisted_2$f = { class: "m-editor-data-source-methods-footer" };
 const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
@@ -5164,7 +5449,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$f, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5194,7 +5479,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$n = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$f = { class: "data-source-method-select-container" };
+const _hoisted_2$e = { class: "data-source-method-select-container" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
@@ -5282,7 +5567,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
@@ -5326,7 +5611,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$m = { class: "m-editor-data-source-fields" };
-const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
+const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
 const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
@@ -5536,7 +5821,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$e, [
+        createElementVNode("div", _hoisted_2$d, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5801,7 +6086,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$k = { class: "m-fields-event-select" };
-const _hoisted_2$d = {
+const _hoisted_2$c = {
   key: 1,
   class: "fullWidth"
 };
@@ -6089,7 +6374,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -6145,9 +6430,9 @@ const _hoisted_1$j = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+const _hoisted_2$b = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
 const _hoisted_4$6 = [
-  _hoisted_2$c
+  _hoisted_2$b
 ];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
@@ -6162,7 +6447,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$i = { class: "m-fields-key-value" };
-const _hoisted_2$b = { key: 0 };
+const _hoisted_2$a = { key: 0 };
 const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
@@ -6223,7 +6508,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -6297,7 +6582,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-const _hoisted_2$a = { class: "page-fragment-select-container" };
+const _hoisted_2$9 = { class: "page-fragment-select-container" };
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
@@ -6345,7 +6630,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$a, [
+        createElementVNode("div", _hoisted_2$9, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -6401,10 +6686,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, 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);
+      const id = getIdFromEl()(detail);
+      if (id) {
+        props.model[props.name] = id;
+        emit("change", id);
+        mForm?.$emit("field-change", props.prop, id);
       }
       if (cancelHandler) {
         cancelHandler();
@@ -6428,19 +6714,22 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       }
     };
     const selectNode = async (id) => {
-      await services?.editorService.select(id);
-      services?.editorService.get("stage")?.select(id);
-      services?.stageOverlayService.get("stage")?.select(id);
+      if (!services) return;
+      await services.editorService.select(id);
+      services.editorService.get("stage")?.select(id);
+      services.stageOverlayService.get("stage")?.select(id);
     };
     const highlight = throttle((id) => {
-      services?.editorService.highlight(id);
-      services?.editorService.get("stage")?.highlight(id);
-      services?.stageOverlayService.get("stage")?.highlight(id);
+      if (!services) return;
+      services.editorService.highlight(id);
+      services.editorService.get("stage")?.highlight(id);
+      services.stageOverlayService.get("stage")?.highlight(id);
     }, 150);
     const unhighlight = () => {
-      services?.editorService.set("highlightNode", null);
-      services?.editorService.get("stage")?.clearHighlight();
-      services?.stageOverlayService.get("stage")?.clearHighlight();
+      if (!services) return;
+      services.editorService.set("highlightNode", null);
+      services.editorService.get("stage")?.clearHighlight();
+      services.stageOverlayService.get("stage")?.clearHighlight();
     };
     return (_ctx, _cache) => {
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
@@ -6528,32 +6817,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useGetSo = (target, emit) => {
-  let getso;
-  const isDraging = ref(false);
-  onMounted(() => {
-    if (!target.value) return;
-    getso = new Gesto(target.value, {
-      container: window,
-      pinchOutside: true
-    }).on("drag", (e) => {
-      if (!target.value) return;
-      emit("change", e);
-    }).on("dragStart", () => {
-      isDraging.value = true;
-    }).on("dragEnd", () => {
-      isDraging.value = false;
-    });
-  });
-  onBeforeUnmount(() => {
-    getso?.unset();
-    isDraging.value = false;
-  });
-  return {
-    isDraging
-  };
-};
-
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
@@ -6740,7 +7003,7 @@ const _hoisted_1$f = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
+const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
@@ -6877,7 +7140,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$9, [
+            createElementVNode("span", _hoisted_2$8, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -7201,7 +7464,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
-const _hoisted_2$8 = ["page-id", "onClick"];
+const _hoisted_2$7 = ["page-id", "onClick"];
 const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
 const _hoisted_4$5 = ["title"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
@@ -7355,7 +7618,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_2$8);
+              ], 10, _hoisted_2$7);
             }), 128))
           ]),
           _: 3
@@ -7366,7 +7629,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$b = { class: "m-editor-empty-panel" };
-const _hoisted_2$7 = { class: "m-editor-empty-content" };
+const _hoisted_2$6 = { class: "m-editor-empty-content" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
 const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面片", -1);
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
@@ -7392,7 +7655,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$7, [
+        createElementVNode("div", _hoisted_2$6, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
@@ -7916,18 +8179,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const updateStatus = (nodeStatusMap, id, status) => {
-  const nodeStatus = nodeStatusMap.get(id);
-  if (!nodeStatus) return;
-  getKeys(status).forEach((key) => {
-    if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
-      nodeStatus[key] = Boolean(status[key]);
-    }
-  });
-};
-
 const _hoisted_1$9 = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
-const _hoisted_2$6 = { class: "tree-node-label" };
+const _hoisted_2$5 = { class: "tree-node-label" };
 const _hoisted_3$3 = { class: "tree-node-tool" };
 const _hoisted_4$3 = {
   key: 0,
@@ -8017,7 +8270,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             onClick: nodeClickHandler
           }, [
             renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-              createElementVNode("div", _hoisted_2$6, [
+              createElementVNode("div", _hoisted_2$5, [
                 renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
                   createTextVNode(toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
                 ])
@@ -8111,76 +8364,6 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
-  const filterIsMatch = (value, data) => {
-    const string = !Array.isArray(value) ? [value] : value;
-    if (!string.length) {
-      return true;
-    }
-    return string.some((v) => filterNodeMethod(v, data));
-  };
-  const filter = (text) => {
-    if (!nodeData.value.length) return;
-    nodeData.value.forEach((node) => {
-      traverseNode(node, (node2, parents) => {
-        if (!nodeStatusMap.value) return;
-        const visible = filterIsMatch(text, node2);
-        if (visible && parents.length) {
-          parents.forEach((parent) => {
-            updateStatus(nodeStatusMap.value, parent.id, {
-              visible,
-              expand: true
-            });
-          });
-        }
-        updateStatus(nodeStatusMap.value, node2.id, {
-          visible
-        });
-      });
-    });
-  };
-  return {
-    filterText: ref(""),
-    filterTextChangeHandler(text) {
-      filter(text);
-    }
-  };
-};
-
-const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
-  const map = /* @__PURE__ */ new Map();
-  nodeData.forEach(
-    (node) => traverseNode(node, (node2) => {
-      map.set(
-        node2.id,
-        initialLayerNodeStatus?.get(node2.id) || {
-          visible: true,
-          expand: false,
-          selected: false,
-          draggable: false
-        }
-      );
-    })
-  );
-  return map;
-};
-const useNodeStatus$1 = (nodeData) => {
-  const nodeStatusMap = ref(/* @__PURE__ */ new Map());
-  watch(
-    nodeData,
-    (nodeData2) => {
-      nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  );
-  return {
-    nodeStatusMap
-  };
-};
-
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
@@ -8664,7 +8847,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$6 = { class: "search-wrapper" };
-const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
@@ -8713,7 +8895,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
               unref(editable) ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
-                placement: "right"
+                placement: "right",
+                trigger: "hover",
+                "popper-class": "data-source-list-panel-add-menu"
               }, {
                 reference: withCtx(() => [
                   createVNode(unref(TMagicButton), {
@@ -8726,21 +8910,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                default: withCtx(() => [
-                  createElementVNode("div", _hoisted_2$5, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$y, {
-                        data: {
-                          type: "button",
-                          text: item.text,
-                          handler: () => {
-                            addHandler(item.type);
-                          }
-                        },
-                        key: index
-                      }, null, 8, ["data"]);
-                    }), 128))
-                  ])
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
+                    return openBlock(), createBlock(_sfc_main$y, {
+                      data: {
+                        type: "button",
+                        text: item.text,
+                        handler: () => {
+                          addHandler(item.type);
+                        }
+                      },
+                      key: index
+                    }, null, 8, ["data"]);
+                  }), 128))
                 ]),
                 _: 1
               })) : createCommentVNode("", true),
@@ -9899,7 +10081,22 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const props = __props;
     const services = inject("services");
     const columnLeftWidth = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
-    const { height: columnLeftHeight } = useEditorContentHeight();
+    const { height: editorContentHeight } = useEditorContentHeight();
+    const columnLeftHeight = ref(0);
+    const unWatchEditorContentHeight = watch(
+      editorContentHeight,
+      (height) => {
+        if (height) {
+          columnLeftHeight.value = height * 0.5;
+          nextTick().then(() => {
+            unWatchEditorContentHeight();
+          });
+        }
+      },
+      {
+        immediate: true
+      }
+    );
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -10153,8 +10350,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
-                height: unref(columnLeftHeight),
-                "onUpdate:height": _cache[1] || (_cache[1] = ($event) => isRef(columnLeftHeight) ? columnLeftHeight.value = $event : null),
+                height: columnLeftHeight.value,
+                "onUpdate:height": _cache[1] || (_cache[1] = ($event) => columnLeftHeight.value = $event),
                 width: columnLeftWidth.value,
                 title: config.text,
                 position: {
@@ -10180,133 +10377,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-class ScrollViewer extends EventEmitter {
-  container;
-  target;
-  zoom = 1;
-  scrollLeft = 0;
-  scrollTop = 0;
-  scrollHeight = 0;
-  scrollWidth = 0;
-  width = 0;
-  height = 0;
-  translateXCorrectionValue = 0;
-  translateYCorrectionValue = 0;
-  correctionScrollSize = {
-    width: 0,
-    height: 0
-  };
-  resizeObserver = new ResizeObserver(() => {
-    this.setSize();
-    this.setScrollSize();
-  });
-  constructor(options) {
-    super();
-    this.container = options.container;
-    this.target = options.target;
-    this.zoom = options.zoom;
-    if (this.correctionScrollSize) {
-      this.correctionScrollSize = {
-        ...this.correctionScrollSize,
-        ...options.correctionScrollSize
-      };
-    }
-    this.container.addEventListener("wheel", this.wheelHandler, false);
-    this.setSize();
-    this.setScrollSize();
-    this.resizeObserver.observe(this.container);
-    this.resizeObserver.observe(this.target);
-  }
-  destroy() {
-    this.resizeObserver.disconnect();
-    this.container.removeEventListener("wheel", this.wheelHandler, false);
-    this.removeAllListeners();
-  }
-  setZoom(zoom) {
-    this.zoom = zoom;
-    this.setScrollSize();
-  }
-  scrollTo({ left, top }) {
-    if (typeof left !== "undefined") {
-      this.scrollLeft = left;
-    }
-    if (typeof top !== "undefined") {
-      this.scrollTop = top;
-    }
-    const translateX = -this.scrollLeft + this.translateXCorrectionValue;
-    const translateY = -this.scrollTop + this.translateYCorrectionValue;
-    this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
-  }
-  wheelHandler = (event) => {
-    const { deltaX, deltaY, currentTarget } = event;
-    if (currentTarget !== this.container) return;
-    let top;
-    if (this.scrollHeight > this.height) {
-      top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
-    }
-    let left;
-    if (this.scrollWidth > this.width) {
-      left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
-    }
-    this.scrollTo({ left, top });
-    this.emit("scroll", {
-      scrollLeft: this.scrollLeft,
-      scrollTop: this.scrollTop,
-      scrollHeight: this.scrollHeight,
-      scrollWidth: this.scrollWidth
-    });
-  };
-  getPos(delta, scrollPos, scrollSize, size) {
-    let pos = 0;
-    if (delta < 0) {
-      if (scrollPos > 0) {
-        pos = Math.max(delta, -scrollPos);
-      }
-    } else {
-      const leftPos = scrollSize - size - scrollPos;
-      if (leftPos > 0) {
-        pos = Math.min(delta, leftPos);
-      }
-    }
-    return pos;
-  }
-  setScrollSize = () => {
-    const targetRect = this.target.getBoundingClientRect();
-    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
-    const targetMarginTop = Number(this.target.style.marginTop) || 0;
-    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
-    let left;
-    let top;
-    if (this.scrollWidth < this.width) {
-      left = 0;
-      this.translateXCorrectionValue = 0;
-    } else {
-      this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
-    }
-    if (this.scrollHeight < this.height) {
-      top = 0;
-      this.translateYCorrectionValue = 0;
-    } else {
-      this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
-    }
-    this.scrollTo({
-      left,
-      top
-    });
-    this.emit("scroll", {
-      scrollLeft: this.scrollLeft,
-      scrollTop: this.scrollTop,
-      scrollHeight: this.scrollHeight,
-      scrollWidth: this.scrollWidth
-    });
-  };
-  setSize = () => {
-    const { width, height } = this.container.getBoundingClientRect();
-    this.width = width;
-    this.height = height;
-  };
-}
-
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollBar"
@@ -10522,7 +10592,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         nextTick(() => unWatch());
         stage2.on("select", (el, event) => {
           const els = stage2.renderer.getElementsFromPoint(event) || [];
-          const ids = els.map((el2) => el2.id).filter((id) => Boolean(id));
+          const ids = els.map((el2) => getIdFromEl()(el2)).filter((id) => Boolean(id));
           buttonVisible.value = ids.length > 3;
           filterTextChangeHandler(ids);
         });
@@ -10951,8 +11021,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const doc = stage?.renderer.contentWindow?.document;
       const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
       let parent = page.value;
-      if (parentEl) {
-        parent = services?.editorService.getNodeById(parentEl.id, false);
+      const parentId = getIdFromEl()(parentEl);
+      if (parentId) {
+        parent = services?.editorService.getNodeById(parentId, false);
       }
       if (parent && stageContainer.value && stage) {
         const layout = await services?.editorService.getLayout(parent);
@@ -11530,52 +11601,6 @@ class DataSource extends BaseService {
 }
 const dataSourceService = new DataSource();
 
-globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb) {
-  const start = Date.now();
-  return setTimeout(() => {
-    cb({
-      didTimeout: false,
-      timeRemaining() {
-        return Math.max(0, 50 - (Date.now() - start));
-      }
-    });
-  }, 1);
-};
-class IdleTask extends EventEmitter {
-  taskList = [];
-  taskHandle = null;
-  enqueueTask(taskHandler, taskData) {
-    this.taskList.push({
-      handler: taskHandler,
-      data: taskData
-    });
-    if (!this.taskHandle) {
-      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
-    }
-  }
-  on(eventName, listener) {
-    return super.on(eventName, listener);
-  }
-  once(eventName, listener) {
-    return super.once(eventName, listener);
-  }
-  emit(eventName, ...args) {
-    return super.emit(eventName, ...args);
-  }
-  runTaskQueue(deadline) {
-    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
-      const task = this.taskList.shift();
-      task.handler(task.data);
-    }
-    if (this.taskList.length) {
-      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
-    } else {
-      this.taskHandle = 0;
-      this.emit("finish");
-    }
-  }
-}
-
 const idleTask = new IdleTask();
 class Dep extends BaseService {
   watcher = new Watcher({ initialTargets: reactive({}) });
@@ -12017,7 +12042,8 @@ class StageOverlay extends BaseService {
       subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl.id);
+      const id = getIdFromEl()(contentEl);
+      id && subStage?.select(id);
     }
   }
   updateHandler = () => {
@@ -12068,7 +12094,7 @@ const defaultEditorProps = {
   eventMethodList: () => ({}),
   datasourceValues: () => ({}),
   datasourceConfigs: () => ({}),
-  canSelect: (el) => Boolean(el.id),
+  canSelect: (el) => Boolean(getIdFromEl()(el)),
   isContainer: (el) => el.classList.contains("magic-ui-container"),
   codeOptions: () => ({})
 };
@@ -12213,6 +12239,44 @@ const initServiceState = (props, {
   });
 };
 const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
+  const rootChangeHandler = async (value, preValue) => {
+    if (!value) return;
+    value.codeBlocks = value.codeBlocks || {};
+    value.dataSources = value.dataSources || [];
+    codeBlockService.setCodeDsl(value.codeBlocks);
+    dataSourceService.set("dataSources", value.dataSources);
+    depService.removeTargets(DepTargetType.CODE_BLOCK);
+    Object.entries(value.codeBlocks).forEach(([id, code]) => {
+      depService.addTarget(createCodeBlockTarget(id, code));
+    });
+    dataSourceService.get("dataSources").forEach((ds) => {
+      initDataSourceDepTarget(ds);
+    });
+    if (Array.isArray(value.items)) {
+      collectIdle(value.items, true);
+    } else {
+      depService.clear();
+      delete value.dataSourceDeps;
+      delete value.dataSourceCondDeps;
+    }
+    const nodeId = editorService.get("node")?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value.id) {
+      editorService.set("nodes", [value]);
+      editorService.set("parent", null);
+      editorService.set("page", null);
+    }
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit("update:modelValue", value);
+    }
+  };
   const getApp = () => {
     const stage = editorService.get("stage");
     return stage?.renderer.runtime?.getApp?.();
@@ -12292,45 +12356,6 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
-  const rootChangeHandler = async (value, preValue) => {
-    if (!value) return;
-    value.codeBlocks = value.codeBlocks || {};
-    value.dataSources = value.dataSources || [];
-    codeBlockService.setCodeDsl(value.codeBlocks);
-    dataSourceService.set("dataSources", value.dataSources);
-    depService.removeTargets(DepTargetType.CODE_BLOCK);
-    Object.entries(value.codeBlocks).forEach(([id, code]) => {
-      depService.addTarget(createCodeBlockTarget(id, code));
-    });
-    dataSourceService.get("dataSources").forEach((ds) => {
-      initDataSourceDepTarget(ds);
-    });
-    if (Array.isArray(value.items)) {
-      value.items.forEach((page) => {
-        depService.collectIdle([page], { pageId: page.id }, true);
-      });
-    } else {
-      depService.clear();
-      delete value.dataSourceDeps;
-    }
-    const nodeId = editorService.get("node")?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value.id) {
-      editorService.set("nodes", [value]);
-      editorService.set("parent", null);
-      editorService.set("page", null);
-    }
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit("update:modelValue", value);
-    }
-  };
   const collectIdle = (nodes, deep) => {
     nodes.forEach((node) => {
       let pageId;
@@ -12353,7 +12378,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     depService.clear(nodes);
   };
   const historyChangeHandler = (page) => {
-    depService.collectIdle([page], { pageId: page.id }, true);
+    collectIdle([page], true);
   };
   editorService.on("history-change", historyChangeHandler);
   editorService.on("root-change", rootChangeHandler);
@@ -12380,9 +12405,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     const root = editorService.get("root");
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
-    (root?.items || []).forEach((page) => {
-      depService.collectIdle([page], { pageId: page.id }, true);
-    });
+    collectIdle(root?.items || [], true);
   };
   const removeDataSourceTarget = (id) => {
     depService.removeTarget(id, DepTargetType.DATA_SOURCE);
@@ -12660,4 +12683,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, updateStatus, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };