@tmagic/editor 1.4.6 → 1.4.7

package/dist/tmagic-editor.js

@@ -10,7 +10,7 @@ import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
 import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
-import { Watcher, DepTargetType, createRelatedTargetForCopy, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
+import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
@@ -668,48 +668,6 @@ class BaseService extends EventEmitter {
   }
 }
 
-class Dep extends BaseService {
-  watcher = new Watcher({ initialTargets: reactive({}) });
-  removeTargets(type = DepTargetType.DEFAULT) {
-    this.watcher.removeTargets(type);
-    this.emit("remove-target");
-  }
-  getTargets(type = DepTargetType.DEFAULT) {
-    return this.watcher.getTargets(type);
-  }
-  getTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.getTarget(id, type);
-  }
-  addTarget(target) {
-    this.watcher.addTarget(target);
-    this.emit("add-target", target);
-  }
-  removeTarget(id, type = DepTargetType.DEFAULT) {
-    this.watcher.removeTarget(id, type);
-    this.emit("remove-target");
-  }
-  clearTargets() {
-    this.watcher.clearTargets();
-  }
-  collect(nodes, deep = false, type) {
-    this.watcher.collect(nodes, deep, type);
-    this.emit("collected", nodes, deep);
-  }
-  clear(nodes) {
-    return this.watcher.clear(nodes);
-  }
-  clearByType(type, nodes) {
-    return this.watcher.clearByType(type, nodes);
-  }
-  hasTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.hasTarget(id, type);
-  }
-  hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
-    return this.watcher.hasSpecifiedTypeTarget(type);
-  }
-}
-const depService = new Dep();
-
 const canUsePluginMethods$6 = {
   async: [
     "setPropsConfig",
@@ -849,15 +807,16 @@ class Props extends BaseService {
    * @param originConfigs 原组件配置
    * @param targetConfigs 待替换的组件配置
    */
-  replaceRelateId(originConfigs, targetConfigs) {
+  replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
     const relateIdMap = this.getRelateIdMap();
     if (Object.keys(relateIdMap).length === 0)
       return;
-    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(originConfigs, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target)
-      return;
+    const target = new Target({
+      ...collectorOptions
+    });
+    const coperWatcher = new Watcher();
+    coperWatcher.addTarget(target);
+    coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
     originConfigs.forEach((config) => {
       const newId = relateIdMap[config.id];
       const path = getNodePath(newId, targetConfigs);
@@ -872,7 +831,7 @@ class Props extends BaseService {
         setValueByKeyPath(fullKey, relateTargetId, targetConfig);
       });
       if (config.items && Array.isArray(config.items)) {
-        this.replaceRelateId(config.items, targetConfigs);
+        this.replaceRelateId(config.items, targetConfigs, collectorOptions);
       }
     });
   }
@@ -1418,7 +1377,7 @@ const traverseNode = (node, cb, parents = []) => {
   }
 };
 
-const beforePaste = (position, config) => {
+const beforePaste = (position, config, doc) => {
   if (!config[0]?.style)
     return config;
   const curNode = editorService.get("node");
@@ -1427,7 +1386,7 @@ const beforePaste = (position, config) => {
     const { offsetX = 0, offsetY = 0, ...positionClone } = position;
     let pastePosition = positionClone;
     if (!isEmpty(pastePosition) && curNode?.items) {
-      pastePosition = getPositionInContainer(pastePosition, curNode.id);
+      pastePosition = getPositionInContainer(pastePosition, curNode.id, doc);
     }
     if (pastePosition.left && configItem.style?.left) {
       pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
@@ -1457,12 +1416,12 @@ const beforePaste = (position, config) => {
   });
   return pasteConfigs;
 };
-const getPositionInContainer = (position = {}, id) => {
+const getPositionInContainer = (position = {}, id, doc) => {
   let { left = 0, top = 0 } = position;
   const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
   const parentElRect = parentEl?.getBoundingClientRect();
-  left = left - (parentElRect?.left || 0);
-  top = top - (parentElRect?.top || 0);
+  left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
+  top = top - calcValueByFontsize(doc, parentElRect?.top || 0);
   return {
     left,
     top
@@ -1986,15 +1945,15 @@ class Editor extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  copyWithRelated(config) {
+  copyWithRelated(config, collectorOptions) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_COMP_WHEN_COPY,
-      DepTargetType.RELATED_COMP_WHEN_COPY
-    );
-    if (customTarget) {
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new Watcher();
+      coperWatcher.addTarget(customTarget);
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
       Object.keys(customTarget.deps).forEach((nodeId) => {
         const node = this.getNodeById(nodeId);
         if (!node)
@@ -2020,7 +1979,7 @@ class Editor extends BaseService {
    * @param position 粘贴的坐标
    * @returns 添加后的组件节点配置
    */
-  async paste(position = {}) {
+  async paste(position = {}, collectorOptions) {
     const config = storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config))
       return;
@@ -2033,12 +1992,15 @@ class Editor extends BaseService {
       }
     }
     const pasteConfigs = await this.doPaste(config, position);
-    propsService.replaceRelateId(config, pasteConfigs);
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      propsService.replaceRelateId(config, pasteConfigs, collectorOptions);
+    }
     return this.add(pasteConfigs, parent);
   }
   async doPaste(config, position = {}) {
     propsService.clearRelateId();
-    const pasteConfigs = beforePaste(position, cloneDeep(config));
+    const doc = this.get("stage")?.renderer.contentWindow?.document;
+    const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
   async doAlignCenter(config) {
@@ -2587,16 +2549,20 @@ const getDisplayField = (dataSources, key) => {
     let dsText = "";
     let ds;
     let fields;
-    match[1].split(".").forEach((item, index2) => {
+    match[1].replaceAll(/\[(\d+)\]/g, ".$1").split(".").forEach((item, index2) => {
       if (index2 === 0) {
         ds = dataSources.find((ds2) => ds2.id === item);
         dsText += ds?.title || item;
         fields = ds?.fields;
         return;
       }
-      const field = fields?.find((field2) => field2.name === item);
-      fields = field?.fields;
-      dsText += `.${field?.title || item}`;
+      if (isNumber(item)) {
+        dsText += `[${item}]`;
+      } else {
+        const field = fields?.find((field2) => field2.name === item);
+        fields = field?.fields;
+        dsText += `.${field?.title || item}`;
+      }
     });
     displayState.push({
       type: "var",
@@ -2744,13 +2710,16 @@ class DataSource extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  copyWithRelated(config) {
+  copyWithRelated(config, collectorOptions) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_DS_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_DS_WHEN_COPY);
-    const customTarget = depService.getTarget(DepTargetType.RELATED_DS_WHEN_COPY, DepTargetType.RELATED_DS_WHEN_COPY);
     const copyData = [];
-    if (customTarget) {
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new Watcher();
+      coperWatcher.addTarget(customTarget);
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
       Object.keys(customTarget.deps).forEach((nodeId) => {
         const node = editorService.getNodeById(nodeId);
         if (!node)
@@ -4633,7 +4602,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     const fieldQuerySearch = (queryString, leftAngleIndex, dotIndex, cb) => {
       let result = [];
       const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
-      const keys = dsKey.split(".");
+      const keys = dsKey.replaceAll(/\[(\d+)\]/g, ".$1").split(".");
       const dsId = keys.shift();
       const ds = dataSources.value.find((ds2) => ds2.id === dsId);
       if (!ds) {
@@ -4643,6 +4612,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       let fields = ds.fields || [];
       let key = keys.shift();
       while (key) {
+        if (isNumber(key)) {
+          key = keys.shift();
+          continue;
+        }
         for (const field of fields) {
           if (field.name === key) {
             fields = field.fields || [];
@@ -5686,13 +5659,17 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     const eventsService = services?.eventsService;
     const codeBlockService = services?.codeBlockService;
     const eventNameConfig = computed(() => {
-      const fieldType = props.config.src === "component" ? "select" : "cascader";
       const defaultEventNameConfig = {
         name: "name",
         text: "事件",
-        type: fieldType,
+        type: (mForm, { formValue }) => {
+          if (props.config.src !== "component" || formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
+            return "cascader";
+          }
+          return "select";
+        },
         labelWidth: "40px",
-        checkStrictly: true,
+        checkStrictly: () => props.config.src !== "component",
         valueSeparator: ".",
         options: (mForm, { formValue }) => {
           let events = [];
@@ -5700,6 +5677,29 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             return events;
           if (props.config.src === "component") {
             events = eventsService.getEvent(formValue.type);
+            if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
+              const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
+              if (pageFragment) {
+                events = [
+                  {
+                    label: pageFragment.name || "迭代器容器",
+                    value: pageFragment.id,
+                    children: events
+                  }
+                ];
+                pageFragment.items.forEach((node) => {
+                  traverseNode(node, (node2) => {
+                    const nodeEvents = node2.type && eventsService.getEvent(node2.type) || [];
+                    events.push({
+                      label: `${node2.name}_${node2.id}`,
+                      value: `${node2.id}`,
+                      children: nodeEvents
+                    });
+                  });
+                });
+                return events;
+              }
+            }
             return events.map((option) => ({
               text: option.label,
               value: option.value
@@ -5758,7 +5758,11 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         name: "to",
         text: "联动组件",
         type: "ui-select",
-        display: (mForm, { model }) => model.actionType === ActionType.COMP
+        display: (mForm, { model }) => model.actionType === ActionType.COMP,
+        onChange: (MForm, v, { model }) => {
+          model.method = "";
+          return v;
+        }
       };
       return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
     });
@@ -5766,15 +5770,43 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       const defaultCompActionConfig = {
         name: "method",
         text: "动作",
-        type: "select",
+        type: (mForm, { model }) => {
+          const to = editorService?.getNodeById(model.to);
+          if (to && to.type === "page-fragment-container" && to.pageFragmentId) {
+            return "cascader";
+          }
+          return "select";
+        },
+        checkStrictly: () => props.config.src !== "component",
         display: (mForm, { model }) => model.actionType === ActionType.COMP,
         options: (mForm, { model }) => {
           const node = editorService?.getNodeById(model.to);
           if (!node?.type)
             return [];
-          return eventsService?.getMethod(node.type).map((option) => ({
-            text: option.label,
-            value: option.value
+          let methods = [];
+          methods = eventsService?.getMethod(node.type) || [];
+          if (node.type === "page-fragment-container" && node.pageFragmentId) {
+            const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
+            if (pageFragment) {
+              methods = [];
+              pageFragment.items.forEach((node2) => {
+                traverseNode(node2, (node3) => {
+                  const nodeMethods = node3.type && eventsService?.getMethod(node3.type) || [];
+                  if (nodeMethods.length) {
+                    methods.push({
+                      label: `${node3.name}_${node3.id}`,
+                      value: `${node3.id}`,
+                      children: nodeMethods
+                    });
+                  }
+                });
+              });
+              return methods;
+            }
+          }
+          return methods.map((method) => ({
+            text: method.label,
+            value: method.value
           }));
         }
       };
@@ -7670,7 +7702,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const selected = computed(() => nodeStatus.value.selected);
     const visible = computed(() => nodeStatus.value.visible);
     const draggable = computed(() => nodeStatus.value.draggable);
-    const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+    const hasChildren = computed(
+      () => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible)
+    );
     const handleDragStart = (event) => {
       treeEmit?.("node-dragstart", event, props.data);
     };
@@ -7901,24 +7935,38 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const { codeBlockService, depService, editorService } = services || {};
     const codeList = computed(
-      () => Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
-        const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
-          name: dep.name,
+      () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
+        const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
+        const pageList = editorService?.get("root")?.items.map((page) => ({
+          name: page.devconfig?.tabName || page.name,
           type: "node",
-          id: `${target.id}_${id}`,
-          key: id,
-          items: dep.keys.map((key) => {
-            const data2 = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: "key" };
-            return data2;
-          })
-        }));
+          id: `${codeId}_${page.id}`,
+          key: page.id,
+          items: []
+        })) || [];
+        if (target) {
+          Object.entries(target.deps).forEach(([id, dep]) => {
+            const page = pageList.find((page2) => page2.key === dep.data?.pageId);
+            page?.items?.push({
+              name: dep.name,
+              type: "node",
+              id: `${page.id}_${id}`,
+              key: id,
+              items: dep.keys.map((key) => {
+                const data2 = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: "key" };
+                return data2;
+              })
+            });
+          });
+        }
         const data = {
-          id: target.id,
-          key: target.id,
-          name: target.name,
+          id: codeId,
+          key: codeId,
+          name: code.name,
           type: "code",
-          codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-          items: compNodes
+          codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+          // 只有一个页面不显示页面分类
+          items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || []
         };
         return data;
       })
@@ -8233,13 +8281,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       key: id,
       items: getKeyTreeConfig(dep, type, `${parentKey}_${id}`)
     });
-    const mergeChildren = (dsId, items, deps, type) => {
+    const mergeChildren = (dsId, pageItems, deps, type) => {
       Object.entries(deps).forEach(([id, dep]) => {
-        const nodeItem = items.find((item) => item.key === id);
+        const page = pageItems.find((page2) => page2.key === dep.data?.pageId);
+        const nodeItem = page?.items.find((item) => item.key === id);
         if (nodeItem) {
           nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
         } else {
-          items.push(getNodeTreeConfig(id, dep, type, dsId));
+          page?.items.push(getNodeTreeConfig(id, dep, type, page.id));
         }
       });
     };
@@ -8248,7 +8297,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         const dsDeps = dsDep.value[ds.id]?.deps || {};
         const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
         const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
-        const items = [];
+        const items = editorService?.get("root")?.items.map((page) => ({
+          name: page.devconfig?.tabName || page.name,
+          type: "node",
+          id: `${ds.id}_${page.id}`,
+          key: page.id,
+          items: []
+        })) || [];
         mergeChildren(ds.id, items, dsDeps);
         mergeChildren(ds.id, items, dsMethodDeps, "method");
         mergeChildren(ds.id, items, dsCondDeps, "cond");
@@ -8257,7 +8312,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           key: ds.id,
           name: ds.title,
           type: "ds",
-          items
+          // 只有一个页面不显示页面分类
+          items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || []
         };
       })
     );
@@ -10978,16 +11034,16 @@ class CodeBlock extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  copyWithRelated(config) {
+  copyWithRelated(config, collectorOptions) {
     const copyNodes = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_CODE_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_CODE_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_CODE_WHEN_COPY,
-      DepTargetType.RELATED_CODE_WHEN_COPY
-    );
     const copyData = {};
-    if (customTarget) {
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new Watcher();
+      coperWatcher.addTarget(customTarget);
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
       Object.keys(customTarget.deps).forEach((nodeId) => {
         const node = editorService.getNodeById(nodeId);
         if (!node)
@@ -11062,6 +11118,140 @@ class ComponentList extends BaseService {
 }
 const componentListService = new ComponentList();
 
+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({}) });
+  removeTargets(type = DepTargetType.DEFAULT) {
+    this.watcher.removeTargets(type);
+    const targets = this.watcher.getTargets(type);
+    if (!targets)
+      return;
+    for (const target of Object.values(targets)) {
+      this.emit("remove-target", target.id);
+    }
+  }
+  getTargets(type = DepTargetType.DEFAULT) {
+    return this.watcher.getTargets(type);
+  }
+  getTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.getTarget(id, type);
+  }
+  addTarget(target) {
+    this.watcher.addTarget(target);
+    this.emit("add-target", target);
+  }
+  removeTarget(id, type = DepTargetType.DEFAULT) {
+    this.watcher.removeTarget(id, type);
+    this.emit("remove-target", id);
+  }
+  clearTargets() {
+    this.watcher.clearTargets();
+  }
+  collect(nodes, depExtendedData = {}, deep = false, type) {
+    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+      this.collectNode(node, target, depExtendedData, deep);
+    });
+    this.emit("collected", nodes, deep);
+  }
+  collectIdle(nodes, depExtendedData = {}, deep = false, type) {
+    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+      idleTask.enqueueTask(
+        ({ node: node2, deep: deep2, target: target2 }) => {
+          this.collectNode(node2, target2, depExtendedData, deep2);
+        },
+        {
+          node,
+          deep,
+          target
+        }
+      );
+    });
+    idleTask.once("finish", () => {
+      this.emit("collected", nodes, deep);
+    });
+  }
+  collectNode(node, target, depExtendedData = {}, deep = false) {
+    if (isPage(node)) {
+      Object.entries(target.deps).forEach(([depKey, dep]) => {
+        if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
+          delete target.deps[depKey];
+        }
+      });
+    } else {
+      this.watcher.removeTargetDep(target, node);
+    }
+    this.watcher.collectItem(node, target, depExtendedData, deep);
+  }
+  clear(nodes) {
+    return this.watcher.clear(nodes);
+  }
+  clearByType(type, nodes) {
+    return this.watcher.clearByType(type, nodes);
+  }
+  hasTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.hasTarget(id, type);
+  }
+  hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
+    return this.watcher.hasSpecifiedTypeTarget(type);
+  }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  once(eventName, listener) {
+    return super.once(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
+}
+const depService = new Dep();
+
 let eventMap = reactive({});
 let methodMap = reactive({});
 class Events extends BaseService {
@@ -11681,15 +11871,11 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       delete root.dataSourceCondDeps[id];
     }
   };
-  const depUpdateHandler = (node) => {
-    updateNodeWhenDataSourceChange([node]);
-  };
   const collectedHandler = (nodes) => {
     updateNodeWhenDataSourceChange(nodes);
   };
   depService.on("add-target", targetAddHandler);
   depService.on("remove-target", targetRemoveHandler);
-  depService.on("dep-update", depUpdateHandler);
   depService.on("collected", collectedHandler);
   const initDataSourceDepTarget = (ds) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
@@ -11711,7 +11897,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       initDataSourceDepTarget(ds);
     });
     if (Array.isArray(value.items)) {
-      depService.collect(value.items, true);
+      value.items.forEach((page) => {
+        depService.collectIdle([page], { pageId: page.id }, true);
+      });
     } else {
       depService.clear();
       delete value.dataSourceDeps;
@@ -11734,17 +11922,29 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       emit("update:modelValue", value);
     }
   };
+  const collectIdle = (nodes, deep) => {
+    nodes.forEach((node) => {
+      let pageId;
+      if (isPage(node)) {
+        pageId = node.id;
+      } else {
+        const info = editorService.getNodeInfo(node.id);
+        pageId = info.page?.id;
+      }
+      depService.collectIdle([node], { pageId }, deep);
+    });
+  };
   const nodeAddHandler = (nodes) => {
-    depService.collect(nodes);
+    collectIdle(nodes, true);
   };
   const nodeUpdateHandler = (nodes) => {
-    depService.collect(nodes);
+    collectIdle(nodes, false);
   };
   const nodeRemoveHandler = (nodes) => {
     depService.clear(nodes);
   };
   const historyChangeHandler = (page) => {
-    depService.collect([page], true);
+    depService.collectIdle([page], { pageId: page.id }, true);
   };
   editorService.on("history-change", historyChangeHandler);
   editorService.on("root-change", rootChangeHandler);
@@ -11771,7 +11971,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     const root = editorService.get("root");
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
-    depService.collect(root?.items || [], true);
+    (root?.items || []).forEach((page) => {
+      depService.collectIdle([page], { pageId: page.id }, true);
+    });
     const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
     updateNodeWhenDataSourceChange(nodes);
@@ -11788,23 +11990,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   dataSourceService.on("add", dataSourceAddHandler);
   dataSourceService.on("update", dataSourceUpdateHandler);
   dataSourceService.on("remove", dataSourceRemoveHandler);
-  if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
-    depService.addTarget(createRelatedTargetForCopy(props.collectorOptions, DepTargetType.RELATED_COMP_WHEN_COPY));
-  }
-  if (props.collectorOptionsForCode && !depService.hasTarget(DepTargetType.RELATED_CODE_WHEN_COPY)) {
-    depService.addTarget(
-      createRelatedTargetForCopy(props.collectorOptionsForCode, DepTargetType.RELATED_CODE_WHEN_COPY)
-    );
-  }
-  if (props.collectorOptionsForDataSource && !depService.hasTarget(DepTargetType.RELATED_DS_WHEN_COPY)) {
-    depService.addTarget(
-      createRelatedTargetForCopy(props.collectorOptionsForDataSource, DepTargetType.RELATED_DS_WHEN_COPY)
-    );
-  }
   onBeforeUnmount(() => {
     depService.off("add-target", targetAddHandler);
     depService.off("remove-target", targetRemoveHandler);
-    depService.off("dep-update", depUpdateHandler);
     depService.off("collected", collectedHandler);
     editorService.off("history-change", historyChangeHandler);
     editorService.off("root-change", rootChangeHandler);
@@ -11849,9 +12037,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     stageRect: {},
     codeOptions: {},
     disabledDragStart: { type: Boolean },
-    collectorOptions: {},
-    collectorOptionsForCode: {},
-    collectorOptionsForDataSource: {},
     guidesOptions: {},
     disabledMultiSelect: { type: Boolean },
     disabledPageFragment: { type: Boolean },