@tmagic/editor 1.4.16 → 1.5.0-beta.0

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
         }
       ];
@@ -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", () => {
@@ -4643,7 +4832,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) {
@@ -6405,10 +6594,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 +6622,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", {
@@ -7920,16 +8113,6 @@
     }
   });
 
-  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_3$3 = { class: "tree-node-tool" };
@@ -10184,133 +10367,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 +10582,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 +11011,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 +11591,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 +12032,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 +12084,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 +12229,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 +12346,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 +12368,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 +12395,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 +12706,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 +12717,14 @@
   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.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,6 +12778,7 @@
   exports.styleTabConfig = styleTabConfig;
   exports.traverseNode = traverseNode;
   exports.uiService = uiService;
+  exports.updateStatus = updateStatus;
   exports.useCodeBlockEdit = useCodeBlockEdit;
   exports.useDataSourceMethod = useDataSourceMethod;
   exports.useEditorContentHeight = useEditorContentHeight;