@tmagic/editor 1.4.15 → 1.5.0-beta.0

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
       }
     ];
@@ -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", () => {
@@ -4639,7 +4828,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) {
@@ -6401,10 +6590,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 +6618,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", {
@@ -7916,16 +8109,6 @@ 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_3$3 = { class: "tree-node-tool" };
@@ -10180,133 +10363,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 +10578,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 +11007,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 +11587,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 +12028,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 +12080,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 +12225,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 +12342,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 +12364,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 +12391,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 +12669,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, 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, useFloatBox, useStage, useWindowRect, warn };