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

2025-12-13 12:13:10 +00:00 · 2022-11-08 10:20:44 +08:00 · 2022-11-08 10:20:44 +08:00 · 7bf7ca428d
commit 7bf7ca428d
parent 55365194e9
14 changed files with 372 additions and 34 deletions
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/packages/designer/src/builtin-simulator/host.ts
@ -36,6 +36,7 @@ import {
  hasOwnProperty,
  UtilsMetadata,
  getClosestNode,
+  transactionManager,
 } 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,13 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
        i18n: this.project.i18n,
      };
    });
+    transactionManager.onStartTransaction(() => {
+      this.stopAutoRepaintNode();
+    }, TransitionType.REPAINT);
+    transactionManager.onEndTransaction(() => {
+      this.rerender();
+      this.enableAutoRepaintNode();
+    }, TransitionType.REPAINT);
  }

  get currentDocument() {
--- a/packages/designer/src/builtin-simulator/renderer.ts
+++ b/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;
 }

--- a/packages/designer/src/document/history.ts
+++ b/packages/designer/src/document/history.ts
@ -1,5 +1,5 @@
 import { EventEmitter } from 'events';
-import { autorun, reaction, mobx, untracked, globalContext, Editor } from '@alilc/lowcode-editor-core';
+import { reaction, untracked, globalContext, Editor } from '@alilc/lowcode-editor-core';
 import { NodeSchema } from '@alilc/lowcode-types';
 import { History as ShellHistory } from '@alilc/lowcode-shell';

@ -32,31 +32,30 @@ 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 => {
      return dataFn();
    }, (data: T) => {
      if (this.asleep) return;
      untracked(() => {
        const log = this.currentSerialization.serialize(data);
-          if (this.session.isActive()) {
-            this.session.log(log);
-          } else {
-            this.session.end();
-            const lastState = this.getState();
-            const cursor = this.session.cursor + 1;
-            const session = new Session(cursor, log, this.timeGap);
-            this.session = session;
-            this.records.splice(cursor, this.records.length - cursor, session);
-            const currentState = this.getState();
-            if (currentState !== lastState) {
-              this.emitter.emit('statechange', currentState);
-            }
+        if (this.session.isActive()) {
+          this.session.log(log);
+        } else {
+          this.session.end();
+          const lastState = this.getState();
+          const cursor = this.session.cursor + 1;
+          const session = new Session(cursor, log, this.timeGap);
+          this.session = session;
+          this.records.splice(cursor, this.records.length - cursor, session);
+          const currentState = this.getState();
+          if (currentState !== lastState) {
+            this.emitter.emit('statechange', currentState);
          }
-        // }
+        }
      });
    }, { fireImmediately: true });
  }
--- a/packages/engine/src/modules/utils.ts
+++ b/packages/engine/src/modules/utils.ts
@ -1,6 +1,6 @@
-import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById } from '@alilc/lowcode-utils';
+import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById, transactionManager } 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,
+  executeTransaction: transactionManager.executeTransaction.bind(transactionManager),
 };

 export default utils;
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/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());
--- a/packages/renderer-core/src/hoc/leaf.tsx
+++ b/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();
      }),
@ -213,14 +222,18 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
    }

    componentDidMount() {
+      const _leaf = this.leaf;
+      this.initOnPropsChangeEvent(_leaf);
+      this.initOnChildrenChangeEvent(_leaf);
+      this.initOnVisibleChangeEvent(_leaf);
      this.recordTime();
    }

-    get defaultState() {
+    getDefaultState(nextProps: any) {
      const {
        hidden = false,
        condition = true,
-      } = this.leaf?.export?.(TransformStage.Render) || {};
+      } = nextProps.__inner__ || this.leaf?.export?.(TransformStage.Render) || {};
      return {
        nodeChildren: null,
        childrenInState: false,
@ -236,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,
@ -248,7 +257,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {

      let cacheState = cache.state.get(componentCacheId);
      if (!cacheState || cacheState.__tag !== props.__tag) {
-        cacheState = this.defaultState;
+        cacheState = this.getDefaultState(props);
      }

      this.state = cacheState;
@ -279,6 +288,10 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
      singleRender?: boolean;
    };

+    get autoRepaintNode() {
+      return container.autoRepaintNode;
+    }
+
    judgeMiniUnitRender() {
      if (!this.renderUnitInfo) {
        this.getRenderUnitInfo();
@ -380,13 +393,16 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
      const {
        visible,
        ...resetState
-      } = this.defaultState;
+      } = this.getDefaultState(nextProps);
      this.setState(resetState);
    }

    /** 监听参数变化 */
    initOnPropsChangeEvent(leaf = this.leaf): void {
-      const dispose = leaf?.onPropChange?.(debounce((propChangeInfo: PropChangeOptions) => {
+      const dispose = leaf?.onPropChange?.((propChangeInfo: PropChangeOptions) => {
+        if (!this.autoRepaintNode) {
+          return;
+        }
        const {
          key,
          newValue = null,
@ -433,7 +449,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
        });

        this.judgeMiniUnitRender();
-      }, 30));
+      });

      dispose && this.disposeFunctions.push(dispose);
    }
@ -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,
@ -540,6 +562,8 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
        ref: forwardedRef,
      };

+      delete compProps.__inner__;
+
      return engine.createElement(Comp, compProps, this.hasChildren ? this.children : null);
    }
  }
--- a/packages/renderer-core/src/renderer/base.tsx
+++ b/packages/renderer-core/src/renderer/base.tsx
@ -670,7 +670,14 @@ export default function baseRendererFactory(): IBaseRenderComponent {
            }
          }
        }
-        return renderComp({ ...props, ...otherProps });
+        return renderComp({
+          ...props,
+          ...otherProps,
+          __inner__: {
+            hidden: schema.hidden,
+            condition,
+          },
+        });
      } catch (e) {
        return engine.createElement(engine.getFaultComponent(), {
          error: e,
--- a/packages/renderer-core/tests/hoc/leaf.test.tsx
+++ b/packages/renderer-core/tests/hoc/leaf.test.tsx
@ -35,7 +35,8 @@ const baseRenderer: any = {
    __container: {
      rerender: () => {
        rerenderCount = 1 + rerenderCount;
-      }
+      },
+      autoRepaintNode: true,
    },
    documentId: '01'
  },
--- a/packages/renderer-core/tests/renderer/snapshots/renderer.test.tsx.snap
+++ b/packages/renderer-core/tests/renderer/snapshots/renderer.test.tsx.snap
@ -11,6 +11,12 @@ exports[`Base Render renderComp 1`] = `
 >
  <div
    __id="node_dockcy8n9xed"
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="next-box"
    style={
      Object {
@ -25,6 +31,12 @@ exports[`Base Render renderComp 1`] = `
  >
    <div
      __id="node_dockcy8n9xee"
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": undefined,
+        }
+      }
      className="next-box"
      style={
        Object {
@ -39,6 +51,12 @@ exports[`Base Render renderComp 1`] = `
    >
      <nav
        __id="node_dockcy8n9xef"
+        __inner__={
+          Object {
+            "condition": true,
+            "hidden": undefined,
+          }
+        }
        aria-label="Breadcrumb"
        style={
          Object {
@ -55,6 +73,12 @@ exports[`Base Render renderComp 1`] = `
          >
            <span
              __id="node_dockcy8n9xeg"
+              __inner__={
+                Object {
+                  "condition": true,
+                  "hidden": undefined,
+                }
+              }
              className="next-breadcrumb-text"
            >
              首页
@ -74,6 +98,12 @@ exports[`Base Render renderComp 1`] = `
          >
            <span
              __id="node_dockcy8n9xei"
+              __inner__={
+                Object {
+                  "condition": true,
+                  "hidden": undefined,
+                }
+              }
              className="next-breadcrumb-text"
            >
              品质中台
@ -93,6 +123,12 @@ exports[`Base Render renderComp 1`] = `
          >
            <span
              __id="node_dockcy8n9xek"
+              __inner__={
+                Object {
+                  "condition": true,
+                  "hidden": undefined,
+                }
+              }
              className="next-breadcrumb-text"
            >
              商家品质页面管理
@ -112,6 +148,12 @@ exports[`Base Render renderComp 1`] = `
          >
            <span
              __id="node_dockcy8n9xem"
+              __inner__={
+                Object {
+                  "condition": true,
+                  "hidden": undefined,
+                }
+              }
              aria-current="page"
              className="next-breadcrumb-text activated"
            >
@ -123,6 +165,12 @@ exports[`Base Render renderComp 1`] = `
    </div>
    <div
      __id="node_dockcy8n9xeo"
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": undefined,
+        }
+      }
      className="next-box"
      style={
        Object {
@ -138,6 +186,12 @@ exports[`Base Render renderComp 1`] = `
      <form
        __events={Array []}
        __id="node_dockcy8n9xep"
+        __inner__={
+          Object {
+            "condition": true,
+            "hidden": undefined,
+          }
+        }
        className="next-form next-inline next-medium"
        onSubmit={[Function]}
        role="grid"
@ -151,6 +205,12 @@ exports[`Base Render renderComp 1`] = `
      >
        <div
          __id="node_dockcy8n9xeq"
+          __inner__={
+            Object {
+              "condition": true,
+              "hidden": undefined,
+            }
+          }
          className="next-form-item next-left next-medium"
          style={
            Object {
@ -193,6 +253,12 @@ exports[`Base Render renderComp 1`] = `
                  >
                    <input
                      __id="node_dockcy8n9xer"
+                      __inner__={
+                        Object {
+                          "condition": true,
+                          "hidden": undefined,
+                        }
+                      }
                      autoComplete="off"
                      disabled={false}
                      height="100%"
@ -258,6 +324,12 @@ exports[`Base Render renderComp 1`] = `
        </div>
        <div
          __id="node_dockcy8n9xes"
+          __inner__={
+            Object {
+              "condition": true,
+              "hidden": undefined,
+            }
+          }
          className="next-form-item next-left next-medium"
          style={
            Object {
@ -300,6 +372,12 @@ exports[`Base Render renderComp 1`] = `
                  >
                    <input
                      __id="node_dockcy8n9xet"
+                      __inner__={
+                        Object {
+                          "condition": true,
+                          "hidden": undefined,
+                        }
+                      }
                      autoComplete="off"
                      disabled={false}
                      height="100%"
@ -365,6 +443,12 @@ exports[`Base Render renderComp 1`] = `
        </div>
        <div
          __id="node_dockcy8n9xeu"
+          __inner__={
+            Object {
+              "condition": true,
+              "hidden": undefined,
+            }
+          }
          className="next-form-item next-left next-medium"
          style={
            Object {
@ -392,6 +476,12 @@ exports[`Base Render renderComp 1`] = `
            >
              <input
                __id="node_dockcy8n9xev"
+                __inner__={
+                  Object {
+                    "condition": true,
+                    "hidden": undefined,
+                  }
+                }
                autoComplete="off"
                disabled={false}
                height="100%"
@ -412,10 +502,22 @@ exports[`Base Render renderComp 1`] = `
        </div>
        <div
          __id="node_dockcy8n9xew"
+          __inner__={
+            Object {
+              "condition": true,
+              "hidden": undefined,
+            }
+          }
          className="next-btn-group"
        >
          <button
            __id="node_dockcy8n9xex"
+            __inner__={
+              Object {
+                "condition": true,
+                "hidden": undefined,
+              }
+            }
            className="next-btn next-medium next-btn-primary"
            disabled={false}
            onClick={[Function]}
@ -435,6 +537,12 @@ exports[`Base Render renderComp 1`] = `
          </button>
          <button
            __id="node_dockcy8n9xe10"
+            __inner__={
+              Object {
+                "condition": true,
+                "hidden": undefined,
+              }
+            }
            className="next-btn next-medium next-btn-normal"
            disabled={false}
            onClick={[Function]}
@ -457,6 +565,12 @@ exports[`Base Render renderComp 1`] = `
    </div>
    <div
      __id="node_dockcy8n9xe1f"
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": undefined,
+        }
+      }
      className="next-box"
      style={
        Object {
@ -482,6 +596,12 @@ exports[`Base Render renderComp 1`] = `
          ]
        }
        __id="node_dockd5nrh9p4"
+        __inner__={
+          Object {
+            "condition": true,
+            "hidden": undefined,
+          }
+        }
        className="next-btn next-medium next-btn-primary"
        disabled={false}
        onClick={[Function]}
@ -498,6 +618,12 @@ exports[`Base Render renderComp 1`] = `
    </div>
    <div
      __id="node_dockd5nrh9p5"
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": undefined,
+        }
+      }
      className="next-box"
      style={
        Object {
@ -510,6 +636,12 @@ exports[`Base Render renderComp 1`] = `
    >
      <div
        __id="node_dockjielosj1"
+        __inner__={
+          Object {
+            "condition": true,
+            "hidden": undefined,
+          }
+        }
        actionBar={
          Array [
            Object {
@ -688,6 +820,12 @@ exports[`Base Render renderComp 1`] = `
      </div>
      <div
        __id="node_dockd5nrh9pg"
+        __inner__={
+          Object {
+            "condition": true,
+            "hidden": undefined,
+          }
+        }
        className="next-box"
        style={
          Object {
@ -702,6 +840,12 @@ exports[`Base Render renderComp 1`] = `
      >
        <div
          __id="node_dockd5nrh9pf"
+          __inner__={
+            Object {
+              "condition": true,
+              "hidden": undefined,
+            }
+          }
          className="next-pagination next-medium next-normal"
          style={Object {}}
        >
@ -898,6 +1042,12 @@ exports[`Base Render renderComp 1`] = `
        >
          <input
            __id="node_dockd5nrh9pr"
+            __inner__={
+              Object {
+                "condition": true,
+                "hidden": undefined,
+              }
+            }
            autoComplete="off"
            disabled={false}
            height="100%"
@ -967,6 +1117,12 @@ exports[`JSExpression JSExpression props 1`] = `
  style={Object {}}
 >
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
    visible={true}
@ -980,12 +1136,24 @@ exports[`JSExpression JSExpression props with loop 1`] = `
  style={Object {}}
 >
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
    name1="1"
    name2="1"
  />
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
    name1="2"
@ -1000,11 +1168,23 @@ exports[`JSExpression JSExpression props with loop, and thisRequiredInJSE is tru
  style={Object {}}
 >
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
    name1="1"
  />
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
    name1="2"
@ -1018,6 +1198,12 @@ exports[`JSExpression JSFunction props 1`] = `
  style={Object {}}
 >
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
    onClick={[Function]}
@ -1032,6 +1218,12 @@ exports[`JSExpression JSSlot has loop 1`] = `
 >
  <div
    __id="node_ocl1ao1o7w3"
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": false,
+      }
+    }
    __style__=":root {
 padding: 12px;
 background: #f2f2f2;
@ -1046,6 +1238,12 @@ exports[`JSExpression JSSlot has loop 1`] = `
  >
    <div
      __id="node_ocl1ao1o7w4"
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": false,
+        }
+      }
      __style__=":root {
 font-size: 14px;
 color: #666;
@ -1063,6 +1261,12 @@ exports[`JSExpression JSSlot has loop 1`] = `
  </div>
  <div
    __id="node_ocl1ao1o7w3"
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": false,
+      }
+    }
    __style__=":root {
 padding: 12px;
 background: #f2f2f2;
@ -1077,6 +1281,12 @@ exports[`JSExpression JSSlot has loop 1`] = `
  >
    <div
      __id="node_ocl1ao1o7w4"
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": false,
+        }
+      }
      __style__=":root {
 font-size: 14px;
 color: #666;
@ -1094,6 +1304,12 @@ exports[`JSExpression JSSlot has loop 1`] = `
  </div>
  <div
    __id="node_ocl1ao1o7w3"
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": false,
+      }
+    }
    __style__=":root {
 padding: 12px;
 background: #f2f2f2;
@ -1108,6 +1324,12 @@ exports[`JSExpression JSSlot has loop 1`] = `
  >
    <div
      __id="node_ocl1ao1o7w4"
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": false,
+        }
+      }
      __style__=":root {
 font-size: 14px;
 color: #666;
@ -1132,6 +1354,12 @@ exports[`JSExpression base props 1`] = `
  style={Object {}}
 >
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
    text="123"
@ -1146,10 +1374,22 @@ exports[`designMode designMode:default 1`] = `
  style={Object {}}
 >
  <div
+    __inner__={
+      Object {
+        "condition": true,
+        "hidden": undefined,
+      }
+    }
    className="div-ut"
    forwardRef={[Function]}
  >
    <div
+      __inner__={
+        Object {
+          "condition": true,
+          "hidden": undefined,
+        }
+      }
      className="div-ut-children"
      forwardRef={[Function]}
    />
--- a/packages/types/src/index.ts
+++ b/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';
--- a/packages/types/src/start-transaction.ts
+++ b/packages/types/src/start-transaction.ts
@ -0,0 +1,4 @@
+export enum TransitionType {
+  /** 节点更新后重绘处理 */
+  REPAINT
+}
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -17,6 +17,7 @@
    "@alilc/lowcode-types": "1.0.15",
    "lodash": "^4.17.21",
    "react": "^16",
+    "mobx": "^6.3.0",
    "zen-logger": "^1.1.0"
  },
  "devDependencies": {
--- a/packages/utils/src/index.ts
+++ b/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 { transactionManager } from './start-transaction';
--- a/packages/utils/src/start-transaction.ts
+++ b/packages/utils/src/start-transaction.ts
@ -0,0 +1,29 @@
+import { TransitionType } from '@alilc/lowcode-types';
+import { runInAction } from 'mobx';
+import EventEmitter from 'events';
+
+class TransactionManager {
+  emitter = new EventEmitter();
+
+  executeTransaction = (fn: () => void, type: TransitionType = TransitionType.REPAINT): void => {
+    this.emitter.emit(`[${type}]startTransaction`);
+    runInAction(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 transactionManager = new TransactionManager();