From 2d40d0bd07b0cf36eeb77d623dd852ba51984464 Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 2 Nov 2022 14:39:29 +0800 Subject: [PATCH] feat: add common.utils.startTransaction API to change multi nodes --- .../designer/src/builtin-simulator/host.ts | 17 +++++++++-- .../src/builtin-simulator/renderer.ts | 2 ++ packages/engine/src/modules/utils.ts | 5 ++-- .../react-simulator-renderer/src/renderer.ts | 13 ++++++++ packages/renderer-core/src/hoc/leaf.tsx | 22 ++++++++++++++ .../renderer-core/tests/hoc/leaf.test.tsx | 3 +- packages/types/src/index.ts | 1 + packages/types/src/start-transaction.ts | 4 +++ packages/utils/src/index.ts | 1 + packages/utils/src/start-transaction.ts | 30 +++++++++++++++++++ 10 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 packages/types/src/start-transaction.ts create mode 100644 packages/utils/src/start-transaction.ts diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index a762daaea..16a3b1167 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/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 { + this.rerender(); + this.enableAutoRepaintNode(); + }, TransitionType.repaint); } get currentDocument() { diff --git a/packages/designer/src/builtin-simulator/renderer.ts b/packages/designer/src/builtin-simulator/renderer.ts index 32c0e2567..a25f53200 100644 --- 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; } diff --git a/packages/engine/src/modules/utils.ts b/packages/engine/src/modules/utils.ts index 7e7cf6206..691fbf322 100644 --- 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, 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; \ No newline at end of file diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index 2dfdeccac..98cbbd621 100644 --- 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()); diff --git a/packages/renderer-core/src/hoc/leaf.tsx b/packages/renderer-core/src/hoc/leaf.tsx index e2dbd22d4..8ab8bd6a8 100644 --- 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(); }), @@ -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, diff --git a/packages/renderer-core/tests/hoc/leaf.test.tsx b/packages/renderer-core/tests/hoc/leaf.test.tsx index 0e594bc5a..86675c771 100644 --- 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' }, diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 19d9bfa70..9b540cc5f 100644 --- 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'; diff --git a/packages/types/src/start-transaction.ts b/packages/types/src/start-transaction.ts new file mode 100644 index 000000000..5e81ea419 --- /dev/null +++ b/packages/types/src/start-transaction.ts @@ -0,0 +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 1277f4481..040a96ac7 100644 --- 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 { startTransaction } from './start-transaction'; diff --git a/packages/utils/src/start-transaction.ts b/packages/utils/src/start-transaction.ts new file mode 100644 index 000000000..47af90c64 --- /dev/null +++ b/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; \ No newline at end of file