fix: fix the problem that the outline pane tree cannot be expanded

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;
+  event = new EventEmitter();
-  onExpandedChanged: (expanded: boolean) => void;
+
-  onHiddenChanged: (hidden: boolean) => void;
+  onFilterResultChanged(fn: () => void): IPublicTypeDisposable {
-  onLockedChanged: (locked: boolean) => void;
+    this.event.on(EVENT_NAMES.filterResultChanged, fn);
-  onTitleLabelChanged: (treeNode: TreeNode) => void;
+    return () => {
-  onExpandableChanged: (expandable: boolean) => void;
+      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.event.emit(EVENT_NAMES.filterResultChanged)
-      this.onFilterResultChanged();
-    }
   }
 }

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(
-          <div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode.id}>
+          <div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode?.id}>
             <div className="condition-group-title">
               <Title
                 title={currentGrp.title}

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

@@ -4,7 +4,7 @@ import TreeNode from '../controllers/tree-node';
 import TreeTitle from './tree-title';
 import TreeBranches from './tree-branches';
 import { IconEyeClose } from '../icons/eye-close';
-import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicModelDocumentModel } from '@alilc/lowcode-types';
+import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicModelDocumentModel, IPublicTypeDisposable } from '@alilc/lowcode-types';
 
 class ModalTreeNodeView extends Component<{
   treeNode: TreeNode;
@@ -78,7 +78,7 @@ export default class TreeNodeView extends Component<{
     expandable: false,
   };
 
-  eventOffCallbacks: Array<() => 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) => {
+    this.eventOffCallbacks?.forEach((offFun: IPublicTypeDisposable | undefined) => {
-      offFun();
+      offFun && offFun();
     });
   }
 

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() {