@tmagic/editor 1.4.16 → 1.5.0-beta.1

package/dist/tmagic-editor.umd.cjs

@@ -840,7 +840,7 @@
     items: [
       {
         type: "display-conds",
-        name: "displayConds",
+        name: schema.NODE_CONDS_KEY,
         titlePrefix: "条件组",
         defaultValue: []
       }
@@ -1116,8 +1116,8 @@
   };
   const fixNodeLeft = (config, parent, doc) => {
     if (!doc || !config.style || !utils.isNumber(config.style.left)) return config.style?.left;
-    const el = doc.getElementById(`${config.id}`);
-    const parentEl = doc.getElementById(`${parent.id}`);
+    const el = utils.getElById()(doc, `${config.id}`);
+    const parentEl = utils.getElById()(doc, `${parent.id}`);
     const left = Number(config.style?.left) || 0;
     if (el && parentEl) {
       const calcParentOffsetWidth = utils.calcValueByFontsize(doc, parentEl.offsetWidth);
@@ -2314,7 +2314,7 @@
       const stage = this.get("stage");
       const doc = stage?.renderer.contentWindow?.document;
       if (doc) {
-        const el = doc.getElementById(`${node.id}`);
+        const el = utils.getElById()(doc, node.id);
         const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
         if (parentEl && el) {
           node.style.left = utils.calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
@@ -2659,7 +2659,8 @@
   };
   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 && utils.getElById()(stageDoc, `${id}`);
     const parentElRect = parentEl?.getBoundingClientRect();
     left = left - utils.calcValueByFontsize(doc, parentElRect?.left || 0);
     top = top - utils.calcValueByFontsize(doc, parentElRect?.top || 0);
@@ -2886,7 +2887,7 @@
    * context：上下文对象
    *
    * interface Content {
-   *  app: AppCore;
+   *  app: TMagicApp;
    *  dataSource: HttpDataSource;
    * }
    *
@@ -2903,7 +2904,7 @@
     * context：上下文对象
     *
     * interface Content {
-    *  app: AppCore;
+    *  app: TMagicApp;
     *  dataSource: HttpDataSource;
     * }
     *
@@ -2917,7 +2918,7 @@
   };
   const getDisplayField = (dataSources, key) => {
     const displayState = [];
-    const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
+    const matches = key.matchAll(utils.dataSourceTemplateRegExp);
     let index = 0;
     for (const match of matches) {
       if (typeof match.index === "undefined") break;
@@ -2928,7 +2929,7 @@
       let dsText = "";
       let ds;
       let fields;
-      match[1].replaceAll(/\[(\d+)\]/g, ".$1").split(".").forEach((item, index2) => {
+      utils.getKeysArray(match[1]).forEach((item, index2) => {
         if (index2 === 0) {
           ds = dataSources.find((ds2) => ds2.id === item);
           dsText += ds?.title || item;
@@ -2989,6 +2990,189 @@
   };
   const removeDataSourceFieldPrefix = (id) => id?.replace(utils.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 events.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 events.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;
+    utils.getKeys(status).forEach((key) => {
+      if (nodeStatus[key] !== void 0 && status[key] !== void 0) {
+        nodeStatus[key] = Boolean(status[key]);
+      }
+    });
+  };
+
   const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
@@ -3011,7 +3195,7 @@
           type: "fieldset",
           items,
           legend: "参数",
-          labelWidth: "70px",
+          labelWidth: "120px",
           name: props.name
         }
       ];
@@ -3050,7 +3234,7 @@
   });
 
   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__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
@@ -3131,7 +3315,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
-          vue.createElementVNode("div", _hoisted_2$k, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createVNode(vue.unref(form.MContainer), {
               class: "select",
               config: selectConfig,
@@ -3709,29 +3893,34 @@
       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 = utils.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 = utils.getIdFromEl()(el);
+      id && editorService.highlight(id);
     });
     stage.on("multi-select", (els) => {
-      editorService.multiSelect(els.map((el) => el.id));
+      const ids = els.map((el) => utils.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 = utils.getIdFromEl()(data.el);
+          const pId = utils.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: utils.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(utils.getIdFromEl()(el) || ""));
       editorService.remove(nodes.filter((node) => Boolean(node)));
     });
     stage.on("select-parent", () => {
@@ -3876,6 +4065,68 @@
     };
   };
 
+  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: vue.ref(""),
+      filterTextChangeHandler(text) {
+        filter(text);
+      }
+    };
+  };
+
+  const useGetSo = (target, emit) => {
+    let getso;
+    const isDraging = vue.ref(false);
+    vue.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;
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      getso?.unset();
+      isDraging.value = false;
+    });
+    return {
+      isDraging
+    };
+  };
+
   const useNextFloatBoxPosition = (uiService, parent) => {
     const boxPosition = vue.ref({
       left: 0,
@@ -3900,8 +4151,42 @@
     };
   };
 
+  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 = vue.ref(/* @__PURE__ */ new Map());
+    vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
@@ -4158,7 +4443,7 @@
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$j, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4546,7 +4831,7 @@
   });
 
   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__ */ vue.defineComponent({
     ...{
@@ -4643,7 +4928,7 @@
       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 = utils.getKeysArray(dsKey);
         const dsId = keys.shift();
         const ds = dataSources.value.find((ds2) => ds2.id === dsId);
         if (!ds) {
@@ -4753,7 +5038,7 @@
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$q, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$i, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$h, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -4795,7 +5080,7 @@
   });
 
   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__ */ vue.defineComponent({
@@ -5049,7 +5334,7 @@
               ]),
               default: vue.withCtx(() => [
                 vue.createElementVNode("div", _hoisted_1$p, [
-                  vue.createElementVNode("div", _hoisted_2$h, [
+                  vue.createElementVNode("div", _hoisted_2$g, [
                     vue.createVNode(vue.unref(design.TMagicTag), {
                       size: "small",
                       type: "info"
@@ -5092,7 +5377,7 @@
   });
 
   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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
@@ -5168,7 +5453,7 @@
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5198,7 +5483,7 @@
   });
 
   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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
@@ -5286,7 +5571,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
-          vue.createElementVNode("div", _hoisted_2$f, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(vue.unref(form.MContainer), {
               class: "select",
               config: cascaderConfig.value,
@@ -5330,7 +5615,7 @@
   });
 
   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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
@@ -5540,7 +5825,7 @@
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$e, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5805,7 +6090,7 @@
   });
 
   const _hoisted_1$k = { class: "m-fields-event-select" };
-  const _hoisted_2$d = {
+  const _hoisted_2$c = {
     key: 1,
     class: "fullWidth"
   };
@@ -6093,7 +6378,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -6149,9 +6434,9 @@
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$c = /* @__PURE__ */ vue.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__ */ vue.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__ */ vue.defineComponent({
     ...{
@@ -6166,7 +6451,7 @@
   });
 
   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__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -6227,7 +6512,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "m-fields-key-value-item",
@@ -6301,7 +6586,7 @@
   });
 
   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__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
@@ -6349,7 +6634,7 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+          vue.createElementVNode("div", _hoisted_2$9, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6405,10 +6690,11 @@
         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 = utils.getIdFromEl()(detail);
+        if (id) {
+          props.model[props.name] = id;
+          emit("change", id);
+          mForm?.$emit("field-change", props.prop, id);
         }
         if (cancelHandler) {
           cancelHandler();
@@ -6432,19 +6718,22 @@
         }
       };
       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 = lodashEs.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 ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -6532,32 +6821,6 @@
     }
   });
 
-  const useGetSo = (target, emit) => {
-    let getso;
-    const isDraging = vue.ref(false);
-    vue.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;
-      });
-    });
-    vue.onBeforeUnmount(() => {
-      getso?.unset();
-      isDraging.value = false;
-    });
-    return {
-      isDraging
-    };
-  };
-
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
@@ -6744,7 +7007,7 @@
     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__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -6881,7 +7144,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$9, [
+              vue.createElementVNode("span", _hoisted_2$8, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -7205,7 +7468,7 @@
   });
 
   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__ */ vue.defineComponent({
@@ -7359,7 +7622,7 @@
                     ]),
                     _: 2
                   }, 1024)
-                ], 10, _hoisted_2$8);
+                ], 10, _hoisted_2$7);
               }), 128))
             ]),
             _: 3
@@ -7370,7 +7633,7 @@
   });
 
   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__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
@@ -7396,7 +7659,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createElementVNode("div", _hoisted_2$7, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
@@ -7920,18 +8183,8 @@
     }
   });
 
-  const updateStatus = (nodeStatusMap, id, status) => {
-    const nodeStatus = nodeStatusMap.get(id);
-    if (!nodeStatus) return;
-    utils.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,
@@ -8021,7 +8274,7 @@
               onClick: nodeClickHandler
             }, [
               vue.renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-                vue.createElementVNode("div", _hoisted_2$6, [
+                vue.createElementVNode("div", _hoisted_2$5, [
                   vue.renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
                     vue.createTextVNode(vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
                   ])
@@ -8115,76 +8368,6 @@
     }
   });
 
-  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: vue.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 = vue.ref(/* @__PURE__ */ new Map());
-    vue.watch(
-      nodeData,
-      (nodeData2) => {
-        nodeStatusMap.value = createPageNodeStatus$1(nodeData2, nodeStatusMap.value);
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    );
-    return {
-      nodeStatusMap
-    };
-  };
-
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
@@ -8668,7 +8851,6 @@
   });
 
   const _hoisted_1$6 = { class: "search-wrapper" };
-  const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
@@ -8717,7 +8899,9 @@
                 vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
-                  placement: "right"
+                  placement: "right",
+                  trigger: "hover",
+                  "popper-class": "data-source-list-panel-add-menu"
                 }, {
                   reference: vue.withCtx(() => [
                     vue.createVNode(vue.unref(design.TMagicButton), {
@@ -8730,21 +8914,19 @@
                       _: 1
                     })
                   ]),
-                  default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_2$5, [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                        return vue.openBlock(), vue.createBlock(_sfc_main$y, {
-                          data: {
-                            type: "button",
-                            text: item.text,
-                            handler: () => {
-                              addHandler(item.type);
-                            }
-                          },
-                          key: index
-                        }, null, 8, ["data"]);
-                      }), 128))
-                    ])
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                        data: {
+                          type: "button",
+                          text: item.text,
+                          handler: () => {
+                            addHandler(item.type);
+                          }
+                        },
+                        key: index
+                      }, null, 8, ["data"]);
+                    }), 128))
                   ]),
                   _: 1
                 })) : vue.createCommentVNode("", true),
@@ -9903,7 +10085,22 @@
       const props = __props;
       const services = vue.inject("services");
       const columnLeftWidth = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
-      const { height: columnLeftHeight } = useEditorContentHeight();
+      const { height: editorContentHeight } = useEditorContentHeight();
+      const columnLeftHeight = vue.ref(0);
+      const unWatchEditorContentHeight = vue.watch(
+        editorContentHeight,
+        (height) => {
+          if (height) {
+            columnLeftHeight.value = height * 0.5;
+            vue.nextTick().then(() => {
+              unWatchEditorContentHeight();
+            });
+          }
+        },
+        {
+          immediate: true
+        }
+      );
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -10157,8 +10354,8 @@
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
-                  height: vue.unref(columnLeftHeight),
-                  "onUpdate:height": _cache[1] || (_cache[1] = ($event) => vue.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: {
@@ -10184,133 +10381,6 @@
     }
   });
 
-  class ScrollViewer extends events.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__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollBar"
@@ -10526,7 +10596,7 @@
           vue.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) => utils.getIdFromEl()(el2)).filter((id) => Boolean(id));
             buttonVisible.value = ids.length > 3;
             filterTextChangeHandler(ids);
           });
@@ -10955,8 +11025,9 @@
         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 = utils.getIdFromEl()(parentEl);
+        if (parentId) {
+          parent = services?.editorService.getNodeById(parentId, false);
         }
         if (parent && stageContainer.value && stage) {
           const layout = await services?.editorService.getLayout(parent);
@@ -11534,52 +11605,6 @@
   }
   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 events.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 dep.Watcher({ initialTargets: vue.reactive({}) });
@@ -12021,7 +12046,8 @@
         subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
       });
       if (await stageOptions?.canSelect?.(contentEl)) {
-        subStage?.select(contentEl.id);
+        const id = utils.getIdFromEl()(contentEl);
+        id && subStage?.select(id);
       }
     }
     updateHandler = () => {
@@ -12072,7 +12098,7 @@
     eventMethodList: () => ({}),
     datasourceValues: () => ({}),
     datasourceConfigs: () => ({}),
-    canSelect: (el) => Boolean(el.id),
+    canSelect: (el) => Boolean(utils.getIdFromEl()(el)),
     isContainer: (el) => el.classList.contains("magic-ui-container"),
     codeOptions: () => ({})
   };
@@ -12217,6 +12243,44 @@
     });
   };
   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(dep.DepTargetType.CODE_BLOCK);
+      Object.entries(value.codeBlocks).forEach(([id, code]) => {
+        depService.addTarget(dep.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 (vue.toRaw(value) !== vue.toRaw(preValue)) {
+        emit("update:modelValue", value);
+      }
+    };
     const getApp = () => {
       const stage = editorService.get("stage");
       return stage?.renderer.runtime?.getApp?.();
@@ -12296,45 +12360,6 @@
       depService.addTarget(dep.createDataSourceMethodTarget(ds, vue.reactive({})));
       depService.addTarget(dep.createDataSourceCondTarget(ds, vue.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(dep.DepTargetType.CODE_BLOCK);
-      Object.entries(value.codeBlocks).forEach(([id, code]) => {
-        depService.addTarget(dep.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 (vue.toRaw(value) !== vue.toRaw(preValue)) {
-        emit("update:modelValue", value);
-      }
-    };
     const collectIdle = (nodes, deep) => {
       nodes.forEach((node) => {
         let pageId;
@@ -12357,7 +12382,7 @@
       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);
@@ -12384,9 +12409,7 @@
       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, dep.DepTargetType.DATA_SOURCE);
@@ -12697,6 +12720,7 @@
   exports.FloatingBox = _sfc_main$Q;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
   exports.Icon = _sfc_main$Y;
+  exports.IdleTask = IdleTask;
   exports.KeyBindingCommand = KeyBindingCommand;
   exports.KeyValue = _sfc_main$D;
   exports.Keys = Keys;
@@ -12707,12 +12731,16 @@
   exports.PageFragmentSelect = _sfc_main$C;
   exports.PropsPanel = _sfc_main$p;
   exports.Resizer = _sfc_main$A;
+  exports.ScrollViewer = ScrollViewer;
   exports.SideItemKey = SideItemKey;
   exports.SplitView = _sfc_main$z;
   exports.TMagicCodeEditor = _sfc_main$X;
   exports.TMagicEditor = _sfc_main;
   exports.ToolButton = _sfc_main$y;
+  exports.Tree = _sfc_main$m;
+  exports.TreeNode = _sfc_main$n;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
+  exports.UndoRedo = UndoRedo;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
   exports.arrayOptions = arrayOptions;
@@ -12766,10 +12794,15 @@
   exports.styleTabConfig = styleTabConfig;
   exports.traverseNode = traverseNode;
   exports.uiService = uiService;
+  exports.updateStatus = updateStatus;
   exports.useCodeBlockEdit = useCodeBlockEdit;
   exports.useDataSourceMethod = useDataSourceMethod;
   exports.useEditorContentHeight = useEditorContentHeight;
+  exports.useFilter = useFilter;
   exports.useFloatBox = useFloatBox;
+  exports.useGetSo = useGetSo;
+  exports.useNextFloatBoxPosition = useNextFloatBoxPosition;
+  exports.useNodeStatus = useNodeStatus$1;
   exports.useStage = useStage;
   exports.useWindowRect = useWindowRect;
   exports.warn = warn;