@tmagic/editor 1.8.0-beta.16 → 1.8.0-beta.17

package/src/editorProps.ts

@@ -82,6 +82,11 @@ export interface EditorProps {
   containerHighlightDuration?: number;
   /** 拖入画布中容器时，识别容器的操作类型 */
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   /** 画布大小 */
   stageRect?: StageRect;
   /** monaco editor 的配置 */
@@ -163,6 +168,7 @@ export const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  containerHighlightAddOnly: false,
   disabledShowSrc: false,
   disabledDataSource: false,
   disabledCodeBlock: false,

package/src/fields/EventSelect.vue

@@ -37,13 +37,12 @@
         :model="entry.cardItem"
         :last-values="entry.lastCardItem"
         :is-compare="isCompareMode"
-        :hide-expand="true"
+        :hide-expand="false"
         :label-width="config.labelWidth || '100px'"
         @change="onChangeHandler"
       >
         <template #header>
           <div class="event-item-header">
-            <div class="event-item-title">事件{{ Number(entry.index) + 1 }}</div>
             <MFormContainer
               class="fullWidth"
               :config="eventNameConfig"
@@ -210,6 +209,12 @@ const actionTypeConfig = computed(() => {
         trigger: 'blur',
       },
     ],
+    onChange: (_mForm: FormState, _v: string, { setModel }: any) => {
+      setModel('to', '');
+      setModel('method', '');
+      setModel('codeId', '');
+      setModel('dataSourceMethod', []);
+    },
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
 });
@@ -222,7 +227,7 @@ const targetCompConfig = computed(() => {
     type: 'ui-select',
     labelPosition: 'left',
     display: (_mForm, { model }) => model.actionType === ActionType.COMP,
-    onChange: (_MForm, _v, { setModel }) => {
+    onChange: (_mForm, _v, { setModel }) => {
       setModel('method', '');
     },
     rules: [

package/src/hooks/use-stage.ts

@@ -28,6 +28,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
+    containerHighlightAddOnly: stageOptions.containerHighlightAddOnly,
     disabledDragStart: stageOptions.disabledDragStart,
     renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {

package/src/initService.ts

@@ -333,11 +333,11 @@ export const initServiceEvents = (
     Promise.all(
       nodes.map((node) => {
         if (node.type === NodeType.ROOT) {
-          return Promise.resolve();
+          return Promise.resolve(true);
         }
         return depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type);
       }),
-    );
+    ).then((results) => results.every(Boolean));
 
   watch(
     () => editorService.get('stage'),
@@ -351,7 +351,7 @@ export const initServiceEvents = (
 
         if (!node) return;
 
-        await collectIdle([node], true, DepTargetType.DATA_SOURCE);
+        if (!(await collectIdle([node], true, DepTargetType.DATA_SOURCE))) return;
         updateStageNode(node);
       });
     },
@@ -494,8 +494,10 @@ export const initServiceEvents = (
 
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MComponent[]) => {
-    collectIdle(nodes, true).then(() => {
-      updateStageNodes(nodes);
+    collectIdle(nodes, true).then((completed) => {
+      if (completed) {
+        updateStageNodes(nodes);
+      }
     });
   };
 
@@ -549,8 +551,8 @@ export const initServiceEvents = (
     if (needRecollectNodes.length) {
       // 有数据源依赖，需要等依赖重新收集完才更新stage
       const handler = async () => {
-        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
-        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+        if (!(await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE))) return;
+        if (!(await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND))) return;
         updateStageNodes(needRecollectNodes);
       };
       handler();
@@ -572,8 +574,10 @@ export const initServiceEvents = (
 
   // 历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    collectIdle([page], true).then(() => {
-      updateStageNode(page);
+    collectIdle([page], true).then((completed) => {
+      if (completed) {
+        updateStageNode(page);
+      }
     });
   };
 
@@ -654,7 +658,7 @@ export const initServiceEvents = (
       if (Array.isArray(root?.items)) {
         depService.clearIdleTasks();
 
-        let collectIdlePromises: Promise<void[]>[] = [];
+        let collectIdlePromises: Promise<boolean>[] = [];
         if (isModifyField) {
           depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
           depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_COND);
@@ -679,10 +683,15 @@ export const initServiceEvents = (
 
           collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE_METHOD)];
         }
-        Promise.all(collectIdlePromises)
-          .then(() => updateDataSourceSchema())
-          .then(() => updateDsData())
-          .then(() => updateStageNodes(root.items));
+        const handler = async () => {
+          const results = await Promise.all(collectIdlePromises);
+          if (!results.every(Boolean)) return;
+
+          updateDataSourceSchema();
+          await updateDsData();
+          updateStageNodes(root.items);
+        };
+        handler();
       }
     } else if (root?.dataSources) {
       updateDsData();
@@ -706,11 +715,12 @@ export const initServiceEvents = (
       const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
       const nodes = getNodes(nodeIds, root.items);
 
-      await Promise.all([
+      const results = await Promise.all([
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
       ]);
+      if (!results.every(Boolean)) return;
 
       updateDataSourceSchema();
 

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -145,6 +145,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.delayedMarkContainer(e);
+  timeout = stage.value.delayedMarkContainer(e, [], true);
 };
 </script>

package/src/services/dep.ts

@@ -42,6 +42,21 @@ interface State {
 
 type StateKey = keyof State;
 
+/**
+ * 一次 collectIdle 调用对应一个批次。批次自行统计入队/完成的任务数，在自身任务全部完成或被中断时
+ * 结算对应的 Promise，避免多次快速触发时共用 idleTask 的 finish 事件造成的串扰、提前 resolve，
+ * 以及 clearTasks 后 Promise 永不 resolve（collecting 卡死、监听器泄漏）。
+ */
+interface CollectBatch {
+  nodes: MNode[];
+  deep: boolean;
+  pending: number;
+  dsPending: number;
+  collectedEmitted: boolean;
+  dsSettled: boolean;
+  resolve: (completed: boolean) => void;
+}
+
 class Dep extends BaseService {
   private state = shallowReactive<State>({
     collecting: false,
@@ -54,6 +69,12 @@ class Dep extends BaseService {
 
   private waitingWorker?: Promise<void>;
 
+  private resolveWaitingWorker?: () => void;
+
+  private workerGeneration = 0;
+
+  private activeBatches = new Set<CollectBatch>();
+
   constructor() {
     super();
 
@@ -137,38 +158,44 @@ class Dep extends BaseService {
       await this.waitingWorker;
     }
 
-    this.set('collecting', true);
-    let startTask = false;
-    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-      startTask = true;
+    const batch: CollectBatch = {
+      nodes,
+      deep,
+      pending: 0,
+      dsPending: 0,
+      collectedEmitted: false,
+      dsSettled: false,
+      resolve: () => {},
+    };
 
-      this.enqueueTask(node, target, depExtendedData, deep);
+    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+      this.enqueueTask(node, target, depExtendedData, deep, batch);
     });
 
-    return new Promise<void>((resolve) => {
-      if (!startTask) {
-        this.emit('collected', nodes, deep);
-        this.set('collecting', false);
-        resolve();
-        return;
-      }
-      this.idleTask.once('finish', () => {
-        this.emit('collected', nodes, deep);
-        this.set('collecting', false);
-      });
-      this.idleTask.once('hight-level-finish', () => {
-        this.emit('ds-collected', nodes, deep);
-        resolve();
-      });
+    // 没有命中任何 target，无需收集，直接完成
+    if (batch.pending === 0) {
+      this.emit('collected', nodes, deep);
+      this.updateCollectingState();
+      return true;
+    }
+
+    this.activeBatches.add(batch);
+    this.set('collecting', true);
+
+    return new Promise<boolean>((resolve) => {
+      batch.resolve = resolve;
     });
   }
 
   public collectByWorker(dsl: MApp) {
     this.set('collecting', true);
+    this.workerGeneration += 1;
+    const generation = this.workerGeneration;
 
     const { promise, resolve: waitingResolve } = Promise.withResolvers<void>();
 
     this.waitingWorker = promise;
+    this.resolveWaitingWorker = waitingResolve;
 
     return new Promise<Record<string, Record<string, DepData>>>((resolve) => {
       const worker = new Work();
@@ -182,6 +209,11 @@ class Dep extends BaseService {
         resolve({});
       };
     }).then((depsData) => {
+      if (generation !== this.workerGeneration) {
+        waitingResolve();
+        return depsData;
+      }
+
       traverseTarget(this.watcher.getTargetsList(), (target) => {
         if (depsData[target.type]?.[target.id]) {
           target.deps = reactive(depsData[target.type][target.id]);
@@ -200,6 +232,10 @@ class Dep extends BaseService {
       this.emit('collected', dsl.items, true);
       this.emit('ds-collected', dsl.items, true);
       waitingResolve();
+      if (this.waitingWorker === promise) {
+        this.waitingWorker = undefined;
+        this.resolveWaitingWorker = undefined;
+      }
 
       return depsData;
     });
@@ -233,6 +269,7 @@ class Dep extends BaseService {
   }
 
   public clearIdleTasks() {
+    this.abortActiveBatches();
     this.idleTask.clearTasks();
   }
 
@@ -251,6 +288,11 @@ class Dep extends BaseService {
   }
 
   public reset() {
+    this.abortActiveBatches();
+    this.workerGeneration += 1;
+    this.resolveWaitingWorker?.();
+    this.resolveWaitingWorker = undefined;
+    this.waitingWorker = undefined;
     this.idleTask.clearTasks();
 
     for (const type of Object.keys(this.watcher.getTargetsList())) {
@@ -286,25 +328,99 @@ class Dep extends BaseService {
     }
   }
 
-  private enqueueTask(node: MNode, target: Target, depExtendedData: DepExtendedData, deep: boolean) {
+  private enqueueTask(
+    node: MNode,
+    target: Target,
+    depExtendedData: DepExtendedData,
+    deep: boolean,
+    batch: CollectBatch,
+  ) {
+    const isDataSource = target.type === DepTargetType.DATA_SOURCE;
+
+    batch.pending += 1;
+    if (isDataSource) {
+      batch.dsPending += 1;
+    }
+
     this.idleTask.enqueueTask(
       ({ node, deep, target }) => {
-        this.collectNode(node, target, depExtendedData, deep);
+        try {
+          this.collectNode(node, target, depExtendedData, deep);
+        } finally {
+          this.onBatchTaskDone(batch, isDataSource);
+        }
       },
       {
         node,
         deep: false,
         target,
       },
-      target.type === DepTargetType.DATA_SOURCE,
+      isDataSource,
     );
 
     if (deep && Array.isArray(node.items) && node.items.length) {
       node.items.forEach((item) => {
-        this.enqueueTask(item, target, depExtendedData, deep);
+        this.enqueueTask(item, target, depExtendedData, deep, batch);
       });
     }
   }
+
+  private onBatchTaskDone(batch: CollectBatch, isDataSource: boolean) {
+    if (isDataSource) {
+      batch.dsPending -= 1;
+      // 数据源依赖收集完先 resolve，让 stage 尽快更新，其余依赖继续在后台收集
+      if (batch.dsPending === 0) {
+        this.settleBatchDs(batch);
+      }
+    }
+
+    batch.pending -= 1;
+    if (batch.pending === 0) {
+      this.finishBatch(batch);
+    }
+  }
+
+  private settleBatchDs(batch: CollectBatch) {
+    if (batch.dsSettled) return;
+    batch.dsSettled = true;
+    this.emit('ds-collected', batch.nodes, batch.deep);
+    batch.resolve(true);
+  }
+
+  private finishBatch(batch: CollectBatch) {
+    if (!batch.collectedEmitted) {
+      batch.collectedEmitted = true;
+      this.emit('collected', batch.nodes, batch.deep);
+    }
+    // 没有数据源任务的批次在此结算 Promise
+    this.settleBatchDs(batch);
+    this.activeBatches.delete(batch);
+    this.updateCollectingState();
+  }
+
+  /**
+   * idleTask 被清空时，在途批次的任务不会再执行，必须主动结算，
+   * 否则对应的 collectIdle Promise 永远不会 resolve（collecting 卡在 true、once 监听器泄漏）。
+   * 收集被中断（通常紧跟一次全量重新收集），因此不再 emit collected/ds-collected，仅结算 Promise。
+   */
+  private abortActiveBatches() {
+    if (!this.activeBatches.size) {
+      return;
+    }
+
+    const batches = [...this.activeBatches];
+    this.activeBatches.clear();
+
+    for (const batch of batches) {
+      batch.resolve(false);
+    }
+
+    this.updateCollectingState();
+  }
+
+  private updateCollectingState() {
+    this.set('collecting', this.activeBatches.size > 0);
+  }
 }
 
 export type DepService = Dep;

package/src/theme/code-block.scss

@@ -26,7 +26,7 @@
     > .m-fields-group-list {
       > .tmagic-design-card--flat {
         > .el-card__header {
-          padding: 16px 0;
+          padding: 8px 0;
         }
       }
     }
@@ -34,7 +34,7 @@
   .create-button {
     &.fullWidth {
       width: 100%;
-      margin: 0 0 16px 0;
+      margin: 0 0 8px 0;
     }
   }
 }

package/src/theme/event.scss

@@ -1,8 +1,11 @@
 .m-fields-event-select {
   width: 100%;
   .fullWidth {
-    width: 100%;
+    width: calc(100% - 32px);
     box-sizing: border-box;
+    &.create-button {
+      width: 100%;
+    }
   }
   .event-select-container {
     padding: 0 16px;
@@ -11,7 +14,7 @@
         border-bottom: 1px solid #ebeef5;
       }
       > .el-card__body {
-        padding-bottom: 16px;
+        padding-bottom: 8px;
         .m-fields-group-list-footer {
           div {
             justify-content: flex-start !important;
@@ -19,7 +22,7 @@
         }
         .el-card.tmagic-design-card--flat {
           > .el-card__header {
-            padding: 16px 0;
+            padding: 8px 0;
           }
         }
       }
@@ -76,17 +79,18 @@
 .event-item-header {
   position: relative;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   .event-item-title {
     color: #0f1113;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
   .event-item-delete-button {
-    position: absolute;
-    right: 0;
-    top: 0;
+    color: #0f1113;
   }
 
   .el-form-item {

package/src/type.ts

@@ -178,6 +178,11 @@ export interface StageOptions {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   disabledDragStart?: boolean;
   render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   moveableOptions?: CustomizeMoveableOptions;

package/src/utils/dep/idle-task.ts

@@ -25,6 +25,12 @@ globalThis.requestIdleCallback =
     }, 1);
   };
 
+globalThis.cancelIdleCallback =
+  globalThis.cancelIdleCallback ||
+  function (handle) {
+    clearTimeout(handle as unknown as ReturnType<typeof setTimeout>);
+  };
+
 export class IdleTask<T = any> extends EventEmitter {
   private taskList: TaskList<T> = [];
 

package/types/index.d.ts

@@ -520,6 +520,9 @@ declare class Dep extends BaseService {
   private idleTask;
   private watcher;
   private waitingWorker?;
+  private resolveWaitingWorker?;
+  private workerGeneration;
+  private activeBatches;
   constructor();
   set<K extends StateKey, T extends State$1[K]>(name: K, value: T): void;
   get<K extends StateKey>(name: K): State$1[K];
@@ -533,7 +536,7 @@ declare class Dep extends BaseService {
   removeTarget(id: Id, type?: string): void;
   clearTargets(): void;
   collect(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType$1): void;
-  collectIdle(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType$1): Promise<void>;
+  collectIdle(nodes: MNode[], depExtendedData?: DepExtendedData, deep?: boolean, type?: DepTargetType$1): Promise<boolean>;
   collectByWorker(dsl: MApp): Promise<Record<string, Record<string, DepData>>>;
   collectNode(node: MNode, target: Target, depExtendedData?: DepExtendedData, deep?: boolean): void;
   clear(nodes?: MNode[]): void;
@@ -552,6 +555,16 @@ declare class Dep extends BaseService {
    */
   private removePageDep;
   private enqueueTask;
+  private onBatchTaskDone;
+  private settleBatchDs;
+  private finishBatch;
+  /**
+   * idleTask 被清空时，在途批次的任务不会再执行，必须主动结算，
+   * 否则对应的 collectIdle Promise 永远不会 resolve（collecting 卡在 true、once 监听器泄漏）。
+   * 收集被中断（通常紧跟一次全量重新收集），因此不再 emit collected/ds-collected，仅结算 Promise。
+   */
+  private abortActiveBatches;
+  private updateCollectingState;
 }
 type DepService = Dep;
 declare const _default$44: Dep;
@@ -1700,6 +1713,11 @@ interface StageOptions {
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   disabledDragStart?: boolean;
   render?: (stage: StageCore$1) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   moveableOptions?: CustomizeMoveableOptions;
@@ -3657,6 +3675,11 @@ interface EditorProps {
   containerHighlightDuration?: number;
   /** 拖入画布中容器时，识别容器的操作类型 */
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   /** 画布大小 */
   stageRect?: StageRect;
   /** monaco editor 的配置 */
@@ -4720,6 +4743,7 @@ declare const __VLS_base$12: import("@vue/runtime-core").DefineComponent<EditorP
   datasourceConfigs: Record<string, import("@tmagic/form-schema").FormConfig>;
   containerHighlightDuration: number;
   containerHighlightType: import("@tmagic/stage").ContainerHighlightType;
+  containerHighlightAddOnly: boolean;
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$39: __VLS_WithSlots$12<typeof __VLS_base$12, __VLS_Slots$12>;