From 76ec15f5b77aa484cefcecc0de430d0b6c8a7bc9 Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 6 Mar 2023 15:17:14 +0800 Subject: [PATCH] fix: fix the problem that the outline pane tree cannot be expanded --- .../src/controllers/tree-node.ts | 77 +++++++++++++++---- .../src/views/tree-branches.tsx | 12 +-- .../src/views/tree-node.tsx | 24 +++--- .../src/views/tree-title.tsx | 4 +- 4 files changed, 82 insertions(+), 35 deletions(-) diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts index 1babdbe61..1f15405e5 100644 --- a/packages/plugin-outline-pane/src/controllers/tree-node.ts +++ b/packages/plugin-outline-pane/src/controllers/tree-node.ts @@ -3,8 +3,10 @@ import { IPublicTypeLocationChildrenDetail, IPublicModelNode, IPublicModelPluginContext, + IPublicTypeDisposable, } from '@alilc/lowcode-types'; import { isI18nData, isLocationChildrenDetail } from '@alilc/lowcode-utils'; +import EventEmitter from 'events'; import { Tree } from './tree'; /** @@ -21,14 +23,61 @@ export interface FilterResult { keywords: string; } +enum EVENT_NAMES { + filterResultChanged = 'filterResultChanged', + + expandedChanged = 'expandedChanged', + + hiddenChanged = 'hiddenChanged', + + lockedChanged = 'lockedChanged', + + titleLabelChanged = 'titleLabelChanged', + + expandableChanged = 'expandableChanged', +} + export default class TreeNode { readonly pluginContext: IPublicModelPluginContext; - onFilterResultChanged: () => void; - onExpandedChanged: (expanded: boolean) => void; - onHiddenChanged: (hidden: boolean) => void; - onLockedChanged: (locked: boolean) => void; - onTitleLabelChanged: (treeNode: TreeNode) => void; - onExpandableChanged: (expandable: boolean) => void; + event = new EventEmitter(); + + onFilterResultChanged(fn: () => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.filterResultChanged, fn); + return () => { + this.event.off(EVENT_NAMES.filterResultChanged, fn); + } + }; + onExpandedChanged(fn: (expanded: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.expandedChanged, fn); + return () => { + this.event.off(EVENT_NAMES.expandedChanged, fn); + } + }; + onHiddenChanged(fn: (hidden: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.hiddenChanged, fn); + return () => { + this.event.off(EVENT_NAMES.hiddenChanged, fn); + } + }; + onLockedChanged(fn: (locked: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.lockedChanged, fn); + return () => { + this.event.off(EVENT_NAMES.lockedChanged, fn); + } + }; + onTitleLabelChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.titleLabelChanged, fn); + + return () => { + this.event.off(EVENT_NAMES.titleLabelChanged, fn); + } + }; + onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.expandableChanged, fn); + return () => { + this.event.off(EVENT_NAMES.expandableChanged, fn); + } + } get id(): string { return this.node.id; @@ -46,7 +95,7 @@ export default class TreeNode { * 触发 onExpandableChanged 回调 */ notifyExpandableChanged(): void { - this.onExpandableChanged && this.onExpandableChanged(this.expandable); + this.event.emit(EVENT_NAMES.expandableChanged, this.expandable); } /** @@ -99,7 +148,7 @@ export default class TreeNode { setExpanded(value: boolean) { this._expanded = value; - this.onExpandedChanged && this.onExpandedChanged(value); + this.event.emit(EVENT_NAMES.expandedChanged, value); } get detecting() { @@ -120,7 +169,7 @@ export default class TreeNode { return; } this.node.visible = !flag; - this.onHiddenChanged && this.onHiddenChanged(flag); + this.event.emit(EVENT_NAMES.hiddenChanged, flag); } get locked(): boolean { @@ -129,7 +178,7 @@ export default class TreeNode { setLocked(flag: boolean) { this.node.lock(flag); - this.onLockedChanged && this.onLockedChanged(flag); + this.event.emit(EVENT_NAMES.lockedChanged, flag); } get selected(): boolean { @@ -174,11 +223,11 @@ export default class TreeNode { } else { this.node.getExtraProp('title', true)?.setValue(label); } - this.onTitleLabelChanged && this.onTitleLabelChanged(this); + this.event.emit(EVENT_NAMES.titleLabelChanged, this); } get icon() { - return this.node.componentMeta.icon; + return this.node.componentMeta?.icon; } get parent(): TreeNode | null { @@ -282,8 +331,6 @@ export default class TreeNode { setFilterReult(val: FilterResult) { this._filterResult = val; - if (this.onFilterResultChanged) { - this.onFilterResultChanged(); - } + this.event.emit(EVENT_NAMES.filterResultChanged) } } diff --git a/packages/plugin-outline-pane/src/views/tree-branches.tsx b/packages/plugin-outline-pane/src/views/tree-branches.tsx index eb2084508..d9b0f83a8 100644 --- a/packages/plugin-outline-pane/src/views/tree-branches.tsx +++ b/packages/plugin-outline-pane/src/views/tree-branches.tsx @@ -25,10 +25,10 @@ export default class TreeBranches extends Component<{ componentDidMount() { const { treeNode } = this.props; - treeNode.onFilterResultChanged = () => { + treeNode.onFilterResultChanged(() => { const { filterWorking: newFilterWorking, matchChild: newMatchChild } = treeNode.filterReult; this.setState({ filterWorking: newFilterWorking, matchChild: newMatchChild }); - }; + }); } componentWillUnmount(): void { @@ -73,7 +73,7 @@ class TreeNodeChildren extends Component<{ keywords: null, dropDetail: null, }; - offLocationChanged: IPublicTypeDisposable; + offLocationChanged: IPublicTypeDisposable | undefined; componentDidMount() { const { treeNode, pluginContext } = this.props; const { project } = pluginContext; @@ -85,7 +85,7 @@ class TreeNodeChildren extends Component<{ keywords, dropDetail, }); - treeNode.onFilterResultChanged = () => { + treeNode.onFilterResultChanged(() => { const { filterWorking: newFilterWorking, matchSelf: newMatchChild, @@ -96,7 +96,7 @@ class TreeNodeChildren extends Component<{ matchSelf: newMatchChild, keywords: newKeywords, }); - }; + }); this.offLocationChanged = project.currentDocument?.onDropLocationChanged( () => { this.setState({ dropDetail: treeNode.dropDetail }); @@ -118,7 +118,7 @@ class TreeNodeChildren extends Component<{ const endGroup = () => { if (groupContents.length > 0) { children.push( -
+
void> = []; + eventOffCallbacks: Array<IPublicTypeDisposable | undefined> = []; constructor(props: any) { super(props); @@ -104,18 +104,18 @@ export default class TreeNodeView extends Component<{ const doc = project.currentDocument; - treeNode.onExpandedChanged = ((expanded: boolean) => { + treeNode.onExpandedChanged(((expanded: boolean) => { this.setState({ expanded }); - }); - treeNode.onHiddenChanged = (hidden: boolean) => { + })); + treeNode.onHiddenChanged((hidden: boolean) => { this.setState({ hidden }); - }; - treeNode.onLockedChanged = (locked: boolean) => { + }); + treeNode.onLockedChanged((locked: boolean) => { this.setState({ locked }); - }; - treeNode.onExpandableChanged = (expandable: boolean) => { + }); + treeNode.onExpandableChanged((expandable: boolean) => { this.setState({ expandable }); - }; + }); this.eventOffCallbacks.push( doc?.onDropLocationChanged((document: IPublicModelDocumentModel) => { @@ -135,8 +135,8 @@ export default class TreeNodeView extends Component<{ this.eventOffCallbacks.push(offDetectingChange!); } componentWillUnmount(): void { - this.eventOffCallbacks?.forEach((offFun: () => void) => { - offFun(); + this.eventOffCallbacks?.forEach((offFun: IPublicTypeDisposable | undefined) => { + offFun && offFun(); }); } diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx index 05fa0f7be..51d0fcf80 100644 --- a/packages/plugin-outline-pane/src/views/tree-title.tsx +++ b/packages/plugin-outline-pane/src/views/tree-title.tsx @@ -83,11 +83,11 @@ export default class TreeTitle extends Component<{ editing: false, title: treeNode.titleLabel, }); - treeNode.onTitleLabelChanged = () => { + treeNode.onTitleLabelChanged(() => { this.setState({ title: treeNode.titleLabel, }); - }; + }); } render() {