From bfa67c8cb4c67ba85282721cb1ad112d96837679 Mon Sep 17 00:00:00 2001 From: liujuping Date: Tue, 3 Jan 2023 15:30:58 +0800 Subject: [PATCH] fix: fix onChangeNodeVisible & onChangeNodeChildren cannot be triggered successfully in some cases --- .../designer/src/document/document-model.ts | 18 +++++++++++++ packages/designer/src/document/node/node.ts | 8 ++++++ .../tests/document/node/node.remove.test.ts | 7 ++++-- packages/shell/src/api/project.ts | 1 - packages/shell/src/model/document-model.ts | 25 ++++++++----------- packages/types/src/editor.ts | 6 +++++ .../types/src/shell/model/document-model.ts | 7 ++++++ 7 files changed, 54 insertions(+), 18 deletions(-) diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index 5e0717e03..24fe610ea 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -15,6 +15,8 @@ import { IPublicApiProject, IPublicModelDropLocation, IPublicEnumTransformStage, + IPublicOnChangeOptions, + EDITOR_EVENT, } from '@alilc/lowcode-types'; import { Project } from '../project'; import { ISimulatorHost } from '../simulator'; @@ -158,6 +160,22 @@ export class DocumentModel implements IDocumentModel { this.inited = true; } + onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): () => void { + this.designer.editor.eventBus.on(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn); + + return () => { + this.designer.editor.eventBus.off(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn); + }; + } + + onChangeNodeChildren(fn: (info: IPublicOnChangeOptions) => void): () => void { + this.designer.editor.eventBus.on(EDITOR_EVENT.NODE_VISIBLE_CHANGE, fn); + + return () => { + this.designer.editor.eventBus.off(EDITOR_EVENT.NODE_VISIBLE_CHANGE, fn); + }; + } + @obx.shallow private willPurgeSpace: Node[] = []; get modalNode() { diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index 90f8be9a2..6efe56fcb 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -16,6 +16,7 @@ import { IPublicModelNode, IPublicModelExclusiveGroup, IPublicEnumTransformStage, + EDITOR_EVENT, } from '@alilc/lowcode-types'; import { compatStage, isDOMText, isJSExpression } from '@alilc/lowcode-utils'; import { SettingTopEntry } from '@alilc/lowcode-designer'; @@ -190,6 +191,13 @@ export class Node this.isInited = true; this.emitter = createModuleEventBus('Node'); + const editor = this.document.designer.editor; + this.onVisibleChange((visible: boolean) => { + editor.eventBus.emit(EDITOR_EVENT.NODE_VISIBLE_CHANGE, this, visible); + }); + this.onChildrenChange((info?: { type: string; node: Node }) => { + editor.eventBus.emit(EDITOR_EVENT.NODE_VISIBLE_CHANGE, info); + }); } _settingEntry: SettingTopEntry; diff --git a/packages/designer/tests/document/node/node.remove.test.ts b/packages/designer/tests/document/node/node.remove.test.ts index 1adf7dd0b..3b94f11e7 100644 --- a/packages/designer/tests/document/node/node.remove.test.ts +++ b/packages/designer/tests/document/node/node.remove.test.ts @@ -2,10 +2,10 @@ import set from 'lodash/set'; import cloneDeep from 'lodash/cloneDeep'; import '../../fixtures/window'; import { Project } from '../../../src/project/project'; -import { Node } from '../../../src/document/node/node'; import { Designer } from '../../../src/designer/designer'; import formSchema from '../../fixtures/schema/form'; -import { getIdsFromSchema, getNodeFromSchemaById } from '../../utils'; +import { getIdsFromSchema } from '../../utils'; +import EventEmitter from "events"; const mockCreateSettingEntry = jest.fn(); jest.mock('../../../src/designer/designer', () => { @@ -22,6 +22,9 @@ jest.mock('../../../src/designer/designer', () => { transformProps(props) { return props; }, createSettingEntry: mockCreateSettingEntry, postEvent() {}, + editor: { + eventBus: new EventEmitter(), + } }; }), }; diff --git a/packages/shell/src/api/project.ts b/packages/shell/src/api/project.ts index e97a18334..3ad977584 100644 --- a/packages/shell/src/api/project.ts +++ b/packages/shell/src/api/project.ts @@ -139,7 +139,6 @@ export class Project implements IPublicApiProject { */ importSchema(schema?: IPublicTypeProjectSchema): void { this[projectSymbol].load(schema, true); - // this[editorSymbol].emit(Events.IMPORT_SCHEMA, schema); } /** diff --git a/packages/shell/src/model/document-model.ts b/packages/shell/src/model/document-model.ts index 1d31d8132..6efcda02a 100644 --- a/packages/shell/src/model/document-model.ts +++ b/packages/shell/src/model/document-model.ts @@ -289,11 +289,8 @@ export class DocumentModel implements IPublicModelDocumentModel { * @param fn */ onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): void { - // TODO: history 变化时需要重新绑定 - this[documentSymbol].nodesMap?.forEach((node) => { - node.onVisibleChange((flag: boolean) => { - fn(Node.create(node)!, flag); - }); + this[documentSymbol].onChangeNodeVisible((node: IPublicModelNode, visible: boolean) => { + fn(Node.create(node)!, visible); }); } @@ -301,16 +298,14 @@ export class DocumentModel implements IPublicModelDocumentModel { * 当前 document 的节点 children 变更事件 * @param fn */ - onChangeNodeChildren(fn: (info?: IPublicOnChangeOptions) => void): void { - // TODO: history 变化时需要重新绑定 - this[documentSymbol].nodesMap?.forEach((node) => { - node.onChildrenChange((info?: InnerOnChangeOptions) => { - return info - ? fn({ - type: info.type, - node: Node.create(node)!, - }) - : fn(); + onChangeNodeChildren(fn: (info: IPublicOnChangeOptions) => void): void { + this[documentSymbol].onChangeNodeChildren((info?: IPublicOnChangeOptions) => { + if (!info) { + return; + } + fn({ + type: info.type, + node: Node.create(info.node)!, }); }); } diff --git a/packages/types/src/editor.ts b/packages/types/src/editor.ts index 72dcb9f31..1334f4439 100644 --- a/packages/types/src/editor.ts +++ b/packages/types/src/editor.ts @@ -173,3 +173,9 @@ export interface PluginStatus { export interface PluginStatusSet { [key: string]: PluginStatus; } + +export enum EDITOR_EVENT { + NODE_CHILDREN_CHANGE = 'node.children.change', + + NODE_VISIBLE_CHANGE = 'node.visible.change', +} \ No newline at end of file diff --git a/packages/types/src/shell/model/document-model.ts b/packages/types/src/shell/model/document-model.ts index 2ba3f8b67..abc093e5c 100644 --- a/packages/types/src/shell/model/document-model.ts +++ b/packages/types/src/shell/model/document-model.ts @@ -2,6 +2,7 @@ import { IPublicTypeRootSchema, IPublicTypeDragNodeDataObject, IPublicTypeDragNo import { IPublicEnumTransformStage } from '../enum'; import { IPublicApiProject } from '../api'; import { IPublicModelDropLocation, IPublicModelDetecting, IPublicModelNode, IPublicModelSelection, IPublicModelHistory, IPublicModelModalNodesManager } from './'; +import { IPublicOnChangeOptions } from '@alilc/lowcode-types'; export interface IPublicModelDocumentModel { @@ -143,6 +144,12 @@ export interface IPublicModelDocumentModel { onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): void; + /** + * 当前 document 的节点 children 变更事件 + * @param fn + */ + onChangeNodeChildren(fn: (info: IPublicOnChangeOptions) => void): void; + /** * 当前 document 节点属性修改事件 * @param fn