feat: add common.utils.startTransaction API to change multi nodes

packages/designer/src/builtin-simulator/host.ts

@@ -36,7 +36,7 @@ import {
   hasOwnProperty,
   UtilsMetadata,
   getClosestNode,
-  transactionManage,
+  transactionManager,
 } from '@alilc/lowcode-utils';
 import {
   DragObjectType,
@@ -202,11 +202,16 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
         i18n: this.project.i18n,
       };
     });
-    transactionManage.onStartTransaction(this.stopAutoRepaintNode, TransitionType.repaint);
-    transactionManage.onEndTransaction(() => {
+    transactionManager.onStartTransaction(() => {
+      this.project.currentDocument?.history?.sleep();
+      this.stopAutoRepaintNode();
+    }, TransitionType.REPAINT);
+    transactionManager.onEndTransaction(() => {
+      this.project.currentDocument?.history?.wakeup();
+      this.project.currentDocument?.history?.savePoint();
       this.rerender();
       this.enableAutoRepaintNode();
-    }, TransitionType.repaint);
+    }, TransitionType.REPAINT);
   }
 
   get currentDocument() {

packages/designer/src/document/history.ts

@@ -32,11 +32,12 @@ export class History<T = NodeSchema> {
     this.currentSerialization = serialization;
   }
 
-  constructor(dataFn: () => T, private redoer: (data: T) => void, private timeGap: number = 1000) {
+  constructor(dataFn: () => T | null, private redoer: (data: T) => void, private timeGap: number = 1000) {
     this.session = new Session(0, null, this.timeGap);
     this.records = [this.session];
 
-    reaction(() => {
+    reaction((): any => {
+      if (this.asleep) return null;
       return dataFn();
     }, (data: T) => {
       if (this.asleep) return;
@@ -69,11 +70,11 @@ export class History<T = NodeSchema> {
     return this.point !== this.session.cursor;
   }
 
-  private sleep() {
+  sleep() {
     this.asleep = true;
   }
 
-  private wakeup() {
+  wakeup() {
     this.asleep = false;
   }
 

packages/engine/src/modules/utils.ts

@@ -1,4 +1,4 @@
-import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById, transactionManage } from '@alilc/lowcode-utils';
+import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById, transactionManager } from '@alilc/lowcode-utils';
 import { isNodeSchema } from '@alilc/lowcode-types';
 import { getConvertedExtraKey, getOriginalExtraKey } from '@alilc/lowcode-designer';
 
@@ -9,7 +9,7 @@ const utils = {
   getNodeSchemaById,
   getConvertedExtraKey,
   getOriginalExtraKey,
-  startTransaction: transactionManage.startTransaction,
+  startTransaction: transactionManager.startTransaction,
 };
 
 export default utils;

packages/renderer-core/src/hoc/leaf.tsx

@@ -222,6 +222,10 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
     }
 
     componentDidMount() {
+      const _leaf = this.leaf;
+      this.initOnPropsChangeEvent(_leaf);
+      this.initOnChildrenChangeEvent(_leaf);
+      this.initOnVisibleChangeEvent(_leaf);
       this.recordTime();
     }
 
@@ -245,11 +249,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
       // 监听以下事件，当变化时更新自己
       __debug(`${schema.componentName}[${this.props.componentId}] leaf render in SimulatorRendererView`);
       clearRerenderEvent(componentCacheId);
-      const _leaf = this.leaf;
-      this.initOnPropsChangeEvent(_leaf);
-      this.initOnChildrenChangeEvent(_leaf);
-      this.initOnVisibleChangeEvent(_leaf);
-      this.curEventLeaf = _leaf;
+      this.curEventLeaf = this.leaf;
 
       cache.ref.set(componentCacheId, {
         makeUnitRender: this.makeUnitRender,
@@ -399,7 +399,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
 
     /** 监听参数变化 */
     initOnPropsChangeEvent(leaf = this.leaf): void {
-      const dispose = leaf?.onPropChange?.(debounce((propChangeInfo: PropChangeOptions) => {
+      const dispose = leaf?.onPropChange?.((propChangeInfo: PropChangeOptions) => {
         if (!this.autoRepaintNode) {
           return;
         }
@@ -449,7 +449,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
         });
 
         this.judgeMiniUnitRender();
-      }, 30));
+      });
 
       dispose && this.disposeFunctions.push(dispose);
     }

packages/types/src/start-transaction.ts

@@ -1,4 +1,4 @@
 export enum TransitionType {
   /** 节点更新后重绘处理 */
-  repaint
+  REPAINT
 }

packages/utils/src/index.ts

@@ -26,4 +26,4 @@ export * from './node-helper';
 export * from './clone-enumerable-property';
 export * from './logger';
 export * as css from './css-helper';
-export { transactionManage } from './start-transaction';
+export { transactionManager } from './start-transaction';

packages/utils/src/start-transaction.ts

@@ -1,30 +1,30 @@
 import { TransitionType } from '@alilc/lowcode-types';
 import EventEmitter from 'events';
 
-class TransactionManage {
+class TransactionManager {
   emitter = new EventEmitter();
 
-  startTransaction(fn: () => void, type: TransitionType = TransitionType.repaint): void {
+  startTransaction = (fn: () => void, type: TransitionType = TransitionType.REPAINT): void => {
     this.emitter.emit(`[${type}]startTransaction`);
     fn();
     this.emitter.emit(`[${type}]endTransaction`);
-  }
+  };
 
-  onStartTransaction(fn: () => void, type: TransitionType = TransitionType.repaint): () => void {
+  onStartTransaction = (fn: () => void, type: TransitionType = TransitionType.REPAINT): () => void => {
     this.emitter.on(`[${type}]startTransaction`, fn);
     return () => {
       this.emitter.off(`[${type}]startTransaction`, fn);
     };
-  }
+  };
 
-  onEndTransaction(fn: () => void, type: TransitionType = TransitionType.repaint): () => void {
+  onEndTransaction = (fn: () => void, type: TransitionType = TransitionType.REPAINT): () => void => {
     this.emitter.on(`[${type}]endTransaction`, fn);
     return () => {
       this.emitter.off(`[${type}]endTransaction`, fn);
     };
-  }
+  };
 }
 
-export const transactionManage = new TransactionManage();
+export const transactionManager = new TransactionManager();
 
-export default transactionManage;
+export default transactionManager;