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

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

@@ -36,6 +36,7 @@ import {
   hasOwnProperty,
   UtilsMetadata,
   getClosestNode,
+  startTransaction,
 } from '@alilc/lowcode-utils';
 import {
   DragObjectType,
@@ -59,9 +60,8 @@ import { getClosestClickableNode } from './utils/clickable';
 import {
   ComponentMetadata,
   ComponentSchema,
-  TransformStage,
-  ActivityData,
   Package,
+  TransitionType,
 } from '@alilc/lowcode-types';
 import { BuiltinSimulatorRenderer } from './renderer';
 import clipboard from '../designer/clipboard';
@@ -181,6 +181,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
    */
   autoRender = true;
 
+  stopAutoRepaintNode() {
+    this.renderer?.stopAutoRepaintNode();
+  }
+
+  enableAutoRepaintNode() {
+    this.renderer?.enableAutoRepaintNode();
+  }
+
   constructor(project: Project) {
     makeObservable(this);
     this.project = project;
@@ -194,6 +202,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
         i18n: this.project.i18n,
       };
     });
+    startTransaction.onStartTransaction(this.stopAutoRepaintNode, TransitionType.repaint);
+    startTransaction.onEndTransaction(() => {
+      this.rerender();
+      this.enableAutoRepaintNode();
+    }, TransitionType.repaint);
   }
 
   get currentDocument() {

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

@@ -13,6 +13,8 @@ export interface BuiltinSimulatorRenderer {
   setCopyState(state: boolean): void;
   loadAsyncLibrary(asyncMap: { [index: string]: any }): void;
   clearState(): void;
+  stopAutoRepaintNode(): void;
+  enableAutoRepaintNode(): void;
   run(): void;
 }
 

packages/engine/src/modules/utils.ts

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

packages/react-simulator-renderer/src/renderer.ts

@@ -349,6 +349,11 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
    * 是否为画布自动渲染
    */
   autoRender = true;
+
+  /**
+   * 画布是否自动监听事件来重绘节点
+   */
+  autoRepaintNode = true;
   /**
    * 加载资源
    */
@@ -491,6 +496,14 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     this._appContext = { ...this._appContext };
   }
 
+  stopAutoRepaintNode() {
+    this.autoRepaintNode = false;
+  }
+
+  enableAutoRepaintNode() {
+    this.autoRepaintNode = true;
+  }
+
   dispose() {
     this.disposeFunctions.forEach(fn => fn());
     this.documentInstances.forEach(docInst => docInst.dispose());

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

@@ -102,14 +102,23 @@ function initRerenderEvent({
     leaf,
     dispose: [
       leaf?.onPropChange?.(() => {
+        if (!container.autoRepaintNode) {
+          return;
+        }
         __debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender`);
         container.rerender();
       }),
       leaf?.onChildrenChange?.(() => {
+        if (!container.autoRepaintNode) {
+          return;
+        }
         __debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender`);
         container.rerender();
       }) as Function,
       leaf?.onVisibleChange?.(() => {
+        if (!container.autoRepaintNode) {
+          return;
+        }
         __debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender`);
         container.rerender();
       }),
@@ -279,6 +288,10 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
       singleRender?: boolean;
     };
 
+    get autoRepaintNode() {
+      return container.autoRepaintNode;
+    }
+
     judgeMiniUnitRender() {
       if (!this.renderUnitInfo) {
         this.getRenderUnitInfo();
@@ -387,6 +400,9 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
     /** 监听参数变化 */
     initOnPropsChangeEvent(leaf = this.leaf): void {
       const dispose = leaf?.onPropChange?.(debounce((propChangeInfo: PropChangeOptions) => {
+        if (!this.autoRepaintNode) {
+          return;
+        }
         const {
           key,
           newValue = null,
@@ -443,6 +459,9 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
      */
     initOnVisibleChangeEvent(leaf = this.leaf) {
       const dispose = leaf?.onVisibleChange?.((flag: boolean) => {
+        if (!this.autoRepaintNode) {
+          return;
+        }
         if (this.state.visible === flag) {
           return;
         }
@@ -463,6 +482,9 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
      */
     initOnChildrenChangeEvent(leaf = this.leaf) {
       const dispose = leaf?.onChildrenChange?.((param): void => {
+        if (!this.autoRepaintNode) {
+          return;
+        }
         const {
           type,
           node,

packages/renderer-core/tests/hoc/leaf.test.tsx

@@ -35,7 +35,8 @@ const baseRenderer: any = {
     __container: {
       rerender: () => {
         rerenderCount = 1 + rerenderCount;
-      }
+      },
+      autoRepaintNode: true,
     },
     documentId: '01'
   },

packages/types/src/index.ts

@@ -21,3 +21,4 @@ export * from './code-result';
 export * from './assets';
 export * as GlobalEvent from './event';
 export * from './disposable';
+export * from './start-transaction';

packages/types/src/start-transaction.ts

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

packages/utils/src/index.ts

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

packages/utils/src/start-transaction.ts

@@ -0,0 +1,30 @@
+import { TransitionType } from '@alilc/lowcode-types';
+import EventEmitter from 'events';
+
+class StartTransaction {
+  emitter = new EventEmitter();
+
+  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 {
+    this.emitter.on(`[${type}]startTransaction`, fn);
+    return () => {
+      this.emitter.off(`[${type}]startTransaction`, fn);
+    };
+  }
+
+  onEndTransaction(fn: () => void, type: TransitionType = TransitionType.repaint): () => void {
+    this.emitter.on(`[${type}]endTransaction`, fn);
+    return () => {
+      this.emitter.off(`[${type}]endTransaction`, fn);
+    };
+  }
+}
+
+export const startTransaction = new StartTransaction();
+
+export default startTransaction;