diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 2c1d82c36..99a715305 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/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 { + 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() { diff --git a/packages/designer/src/document/history.ts b/packages/designer/src/document/history.ts index 5ac0d99cc..113a677c7 100644 --- a/packages/designer/src/document/history.ts +++ b/packages/designer/src/document/history.ts @@ -32,11 +32,12 @@ export class History { 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 { return this.point !== this.session.cursor; } - private sleep() { + sleep() { this.asleep = true; } - private wakeup() { + wakeup() { this.asleep = false; } diff --git a/packages/engine/src/modules/utils.ts b/packages/engine/src/modules/utils.ts index 195f17a2e..3074b828b 100644 --- a/packages/engine/src/modules/utils.ts +++ b/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; \ No newline at end of file diff --git a/packages/renderer-core/src/hoc/leaf.tsx b/packages/renderer-core/src/hoc/leaf.tsx index 8ab8bd6a8..e8bf01154 100644 --- a/packages/renderer-core/src/hoc/leaf.tsx +++ b/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); } diff --git a/packages/types/src/start-transaction.ts b/packages/types/src/start-transaction.ts index ca4f73dff..46547aa44 100644 --- a/packages/types/src/start-transaction.ts +++ b/packages/types/src/start-transaction.ts @@ -1,4 +1,4 @@ export enum TransitionType { /** 节点更新后重绘处理 */ - repaint + REPAINT } \ No newline at end of file diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 881319491..42f157294 100644 --- a/packages/utils/src/index.ts +++ b/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'; diff --git a/packages/utils/src/start-transaction.ts b/packages/utils/src/start-transaction.ts index 107864e0a..330012528 100644 --- a/packages/utils/src/start-transaction.ts +++ b/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; \ No newline at end of file +export default transactionManager; \ No newline at end of file