Skip to content

Commit 76ec15f

Browse files
liujupingJackLian
liujuping
authored and
JackLian
committed
fix: fix the problem that the outline pane tree cannot be expanded
1 parent 2d80d11 commit 76ec15f

4 files changed

Lines changed: 82 additions & 35 deletions

File tree

‎packages/plugin-outline-pane/src/controllers/tree-node.ts‎

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import {
33
IPublicTypeLocationChildrenDetail,
44
IPublicModelNode,
55
IPublicModelPluginContext,
6+
IPublicTypeDisposable,
67
} from '@alilc/lowcode-types';
78
import { isI18nData, isLocationChildrenDetail } from '@alilc/lowcode-utils';
9+
import EventEmitter from 'events';
810
import { Tree } from './tree';
911

1012
/**
@@ -21,14 +23,61 @@ export interface FilterResult {
2123
keywords: string;
2224
}
2325

26+
enum EVENT_NAMES {
27+
filterResultChanged = 'filterResultChanged',
28+
29+
expandedChanged = 'expandedChanged',
30+
31+
hiddenChanged = 'hiddenChanged',
32+
33+
lockedChanged = 'lockedChanged',
34+
35+
titleLabelChanged = 'titleLabelChanged',
36+
37+
expandableChanged = 'expandableChanged',
38+
}
39+
2440
export default class TreeNode {
2541
readonly pluginContext: IPublicModelPluginContext;
26-
onFilterResultChanged: () => void;
27-
onExpandedChanged: (expanded: boolean) => void;
28-
onHiddenChanged: (hidden: boolean) => void;
29-
onLockedChanged: (locked: boolean) => void;
30-
onTitleLabelChanged: (treeNode: TreeNode) => void;
31-
onExpandableChanged: (expandable: boolean) => void;
42+
event = new EventEmitter();
43+
44+
onFilterResultChanged(fn: () => void): IPublicTypeDisposable {
45+
this.event.on(EVENT_NAMES.filterResultChanged, fn);
46+
return () => {
47+
this.event.off(EVENT_NAMES.filterResultChanged, fn);
48+
}
49+
};
50+
onExpandedChanged(fn: (expanded: boolean) => void): IPublicTypeDisposable {
51+
this.event.on(EVENT_NAMES.expandedChanged, fn);
52+
return () => {
53+
this.event.off(EVENT_NAMES.expandedChanged, fn);
54+
}
55+
};
56+
onHiddenChanged(fn: (hidden: boolean) => void): IPublicTypeDisposable {
57+
this.event.on(EVENT_NAMES.hiddenChanged, fn);
58+
return () => {
59+
this.event.off(EVENT_NAMES.hiddenChanged, fn);
60+
}
61+
};
62+
onLockedChanged(fn: (locked: boolean) => void): IPublicTypeDisposable {
63+
this.event.on(EVENT_NAMES.lockedChanged, fn);
64+
return () => {
65+
this.event.off(EVENT_NAMES.lockedChanged, fn);
66+
}
67+
};
68+
onTitleLabelChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable {
69+
this.event.on(EVENT_NAMES.titleLabelChanged, fn);
70+
71+
return () => {
72+
this.event.off(EVENT_NAMES.titleLabelChanged, fn);
73+
}
74+
};
75+
onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable {
76+
this.event.on(EVENT_NAMES.expandableChanged, fn);
77+
return () => {
78+
this.event.off(EVENT_NAMES.expandableChanged, fn);
79+
}
80+
}
3281

3382
get id(): string {
3483
return this.node.id;
@@ -46,7 +95,7 @@ export default class TreeNode {
4695
* 触发 onExpandableChanged 回调
4796
*/
4897
notifyExpandableChanged(): void {
49-
this.onExpandableChanged && this.onExpandableChanged(this.expandable);
98+
this.event.emit(EVENT_NAMES.expandableChanged, this.expandable);
5099
}
51100

52101
/**
@@ -99,7 +148,7 @@ export default class TreeNode {
99148

100149
setExpanded(value: boolean) {
101150
this._expanded = value;
102-
this.onExpandedChanged && this.onExpandedChanged(value);
151+
this.event.emit(EVENT_NAMES.expandedChanged, value);
103152
}
104153

105154
get detecting() {
@@ -120,7 +169,7 @@ export default class TreeNode {
120169
return;
121170
}
122171
this.node.visible = !flag;
123-
this.onHiddenChanged && this.onHiddenChanged(flag);
172+
this.event.emit(EVENT_NAMES.hiddenChanged, flag);
124173
}
125174

126175
get locked(): boolean {
@@ -129,7 +178,7 @@ export default class TreeNode {
129178

130179
setLocked(flag: boolean) {
131180
this.node.lock(flag);
132-
this.onLockedChanged && this.onLockedChanged(flag);
181+
this.event.emit(EVENT_NAMES.lockedChanged, flag);
133182
}
134183

135184
get selected(): boolean {
@@ -174,11 +223,11 @@ export default class TreeNode {
174223
} else {
175224
this.node.getExtraProp('title', true)?.setValue(label);
176225
}
177-
this.onTitleLabelChanged && this.onTitleLabelChanged(this);
226+
this.event.emit(EVENT_NAMES.titleLabelChanged, this);
178227
}
179228

180229
get icon() {
181-
return this.node.componentMeta.icon;
230+
return this.node.componentMeta?.icon;
182231
}
183232

184233
get parent(): TreeNode | null {
@@ -282,8 +331,6 @@ export default class TreeNode {
282331

283332
setFilterReult(val: FilterResult) {
284333
this._filterResult = val;
285-
if (this.onFilterResultChanged) {
286-
this.onFilterResultChanged();
287-
}
334+
this.event.emit(EVENT_NAMES.filterResultChanged)
288335
}
289336
}

‎packages/plugin-outline-pane/src/views/tree-branches.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ export default class TreeBranches extends Component<{
2525

2626
componentDidMount() {
2727
const { treeNode } = this.props;
28-
treeNode.onFilterResultChanged = () => {
28+
treeNode.onFilterResultChanged(() => {
2929
const { filterWorking: newFilterWorking, matchChild: newMatchChild } = treeNode.filterReult;
3030
this.setState({ filterWorking: newFilterWorking, matchChild: newMatchChild });
31-
};
31+
});
3232
}
3333

3434
componentWillUnmount(): void {
@@ -73,7 +73,7 @@ class TreeNodeChildren extends Component<{
7373
keywords: null,
7474
dropDetail: null,
7575
};
76-
offLocationChanged: IPublicTypeDisposable;
76+
offLocationChanged: IPublicTypeDisposable | undefined;
7777
componentDidMount() {
7878
const { treeNode, pluginContext } = this.props;
7979
const { project } = pluginContext;
@@ -85,7 +85,7 @@ class TreeNodeChildren extends Component<{
8585
keywords,
8686
dropDetail,
8787
});
88-
treeNode.onFilterResultChanged = () => {
88+
treeNode.onFilterResultChanged(() => {
8989
const {
9090
filterWorking: newFilterWorking,
9191
matchSelf: newMatchChild,
@@ -96,7 +96,7 @@ class TreeNodeChildren extends Component<{
9696
matchSelf: newMatchChild,
9797
keywords: newKeywords,
9898
});
99-
};
99+
});
100100
this.offLocationChanged = project.currentDocument?.onDropLocationChanged(
101101
() => {
102102
this.setState({ dropDetail: treeNode.dropDetail });
@@ -118,7 +118,7 @@ class TreeNodeChildren extends Component<{
118118
const endGroup = () => {
119119
if (groupContents.length > 0) {
120120
children.push(
121-
<div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode.id}>
121+
<div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode?.id}>
122122
<div className="condition-group-title">
123123
<Title
124124
title={currentGrp.title}

‎packages/plugin-outline-pane/src/views/tree-node.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import TreeNode from '../controllers/tree-node';
44
import TreeTitle from './tree-title';
55
import TreeBranches from './tree-branches';
66
import { IconEyeClose } from '../icons/eye-close';
7-
import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicModelDocumentModel } from '@alilc/lowcode-types';
7+
import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicModelDocumentModel, IPublicTypeDisposable } from '@alilc/lowcode-types';
88

99
class ModalTreeNodeView extends Component<{
1010
treeNode: TreeNode;
@@ -78,7 +78,7 @@ export default class TreeNodeView extends Component<{
7878
expandable: false,
7979
};
8080

81-
eventOffCallbacks: Array<() => void> = [];
81+
eventOffCallbacks: Array<IPublicTypeDisposable | undefined> = [];
8282
constructor(props: any) {
8383
super(props);
8484

@@ -104,18 +104,18 @@ export default class TreeNodeView extends Component<{
104104

105105
const doc = project.currentDocument;
106106

107-
treeNode.onExpandedChanged = ((expanded: boolean) => {
107+
treeNode.onExpandedChanged(((expanded: boolean) => {
108108
this.setState({ expanded });
109-
});
110-
treeNode.onHiddenChanged = (hidden: boolean) => {
109+
}));
110+
treeNode.onHiddenChanged((hidden: boolean) => {
111111
this.setState({ hidden });
112-
};
113-
treeNode.onLockedChanged = (locked: boolean) => {
112+
});
113+
treeNode.onLockedChanged((locked: boolean) => {
114114
this.setState({ locked });
115-
};
116-
treeNode.onExpandableChanged = (expandable: boolean) => {
115+
});
116+
treeNode.onExpandableChanged((expandable: boolean) => {
117117
this.setState({ expandable });
118-
};
118+
});
119119

120120
this.eventOffCallbacks.push(
121121
doc?.onDropLocationChanged((document: IPublicModelDocumentModel) => {
@@ -135,8 +135,8 @@ export default class TreeNodeView extends Component<{
135135
this.eventOffCallbacks.push(offDetectingChange!);
136136
}
137137
componentWillUnmount(): void {
138-
this.eventOffCallbacks?.forEach((offFun: () => void) => {
139-
offFun();
138+
this.eventOffCallbacks?.forEach((offFun: IPublicTypeDisposable | undefined) => {
139+
offFun && offFun();
140140
});
141141
}
142142

‎packages/plugin-outline-pane/src/views/tree-title.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,11 @@ export default class TreeTitle extends Component<{
8383
editing: false,
8484
title: treeNode.titleLabel,
8585
});
86-
treeNode.onTitleLabelChanged = () => {
86+
treeNode.onTitleLabelChanged(() => {
8787
this.setState({
8888
title: treeNode.titleLabel,
8989
});
90-
};
90+
});
9191
}
9292

9393
render() {

0 commit comments

Comments
 (0)