fix: fixed an issue where the outline tree was not displayed correctly when deleting a node

packages/designer/src/document/document-model.ts

@@ -342,14 +342,6 @@ export class DocumentModel implements IDocumentModel {
   }
 
   onChangeNodeVisible(fn: (node: INode, visible: boolean) => void): IPublicTypeDisposable {
-    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: IPublicTypeOnChangeOptions<INode>) => void): IPublicTypeDisposable {
     this.designer.editor?.eventBus.on(EDITOR_EVENT.NODE_VISIBLE_CHANGE, fn);
 
     return () => {
@@ -357,6 +349,14 @@ export class DocumentModel implements IDocumentModel {
     };
   }
 
+  onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions<INode>) => void): IPublicTypeDisposable {
+    this.designer.editor?.eventBus.on(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn);
+
+    return () => {
+      this.designer.editor?.eventBus.off(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn);
+    };
+  }
+
   addWillPurge(node: INode) {
     this.willPurgeSpace.push(node);
   }

packages/designer/src/document/node/node.ts

@@ -98,11 +98,11 @@ export interface IBaseNode<Schema extends IPublicTypeNodeSchema = IPublicTypeNod
   /**
    * 导出 schema
    */
-  export<T = IPublicTypeNodeSchema>(stage: IPublicEnumTransformStage, options?: any): T;
+  export<T = Schema>(stage: IPublicEnumTransformStage, options?: any): T;
 
   emitPropChange(val: IPublicTypePropChangeOptions): void;
 
-  import(data: IPublicTypeNodeSchema, checkId?: boolean): void;
+  import(data: Schema, checkId?: boolean): void;
 
   internalSetSlotFor(slotFor: Prop | null | undefined): void;
 
@@ -394,7 +394,10 @@ export class Node<Schema extends IPublicTypeNodeSchema = IPublicTypeNodeSchema>
       editor?.eventBus.emit(EDITOR_EVENT.NODE_VISIBLE_CHANGE, this, visible);
     });
     this.onChildrenChange((info?: { type: string; node: INode }) => {
-      editor?.eventBus.emit(EDITOR_EVENT.NODE_VISIBLE_CHANGE, info);
+      editor?.eventBus.emit(EDITOR_EVENT.NODE_CHILDREN_CHANGE, {
+        type: info?.type,
+        node: this,
+      });
     });
   }
 

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

@@ -20,23 +20,10 @@ export class Tree {
     const doc = this.pluginContext.project.currentDocument;
     this.id = doc?.id;
 
-    doc?.onMountNode((payload: {node: IPublicModelNode }) => {
+    doc?.onChangeNodeChildren((info: {node: IPublicModelNode }) => {
-      const { node } = payload;
+      const { node } = info;
-      const parentNode = node.parent;
+      const treeNode = this.getTreeNodeById(node.id);
-      if (!parentNode) {
+      treeNode?.notifyExpandableChanged();
-        return;
-      }
-      const parentTreeNode = this.getTreeNodeById(parentNode.id);
-      parentTreeNode?.notifyExpandableChanged();
-    });
-
-    doc?.onRemoveNode((node: IPublicModelNode) => {
-      const parentNode = node.parent;
-      if (!parentNode) {
-        return;
-      }
-      const parentTreeNode = this.getTreeNodeById(parentNode.id);
-      parentTreeNode?.notifyExpandableChanged();
     });
   }
 

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

@@ -9,6 +9,7 @@ export default class TreeBranches extends PureComponent<{
   isModal?: boolean;
   pluginContext: IPublicModelPluginContext;
   expanded: boolean;
+  treeChildren: TreeNode[] | null;
 }> {
   state = {
     filterWorking: false,
@@ -56,13 +57,13 @@ export default class TreeBranches extends PureComponent<{
           treeNode={treeNode}
           isModal={isModal || false}
           pluginContext={this.props.pluginContext}
+          treeChildren={this.props.treeChildren}
         />
       </div>
     );
   }
 }
 
-
 interface ITreeNodeChildrenState {
   filterWorking: boolean;
   matchSelf: boolean;
@@ -73,6 +74,7 @@ class TreeNodeChildren extends PureComponent<{
     treeNode: TreeNode;
     isModal?: boolean;
     pluginContext: IPublicModelPluginContext;
+    treeChildren: TreeNode[] | null;
   }, ITreeNodeChildrenState> {
   state: ITreeNodeChildrenState = {
     filterWorking: false,
@@ -115,7 +117,7 @@ class TreeNodeChildren extends PureComponent<{
   }
 
   render() {
-    const { treeNode, isModal } = this.props;
+    const { isModal } = this.props;
     const children: any = [];
     let groupContents: any[] = [];
     let currentGrp: IPublicModelExclusiveGroup;
@@ -150,7 +152,7 @@ class TreeNodeChildren extends PureComponent<{
         })}
       />
     );
-    treeNode.children?.forEach((child, index) => {
+    this.props.treeChildren?.forEach((child, index) => {
       const childIsModal = child.node.componentMeta?.isModal || false;
       if (isModal != childIsModal) {
         return;
@@ -178,7 +180,7 @@ class TreeNodeChildren extends PureComponent<{
       }
     });
     endGroup();
-    const length = treeNode.children?.length || 0;
+    const length = this.props.treeChildren?.length || 0;
     if (dropIndex != null && dropIndex >= length) {
       children.push(insertion);
     }

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, IPublicTypeDisposable } from '@alilc/lowcode-types';
+import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicTypeDisposable } from '@alilc/lowcode-types';
 
 class ModalTreeNodeView extends PureComponent<{
   treeNode: TreeNode;
@@ -49,6 +49,7 @@ class ModalTreeNodeView extends PureComponent<{
         <div className="tree-pane-modal-content">
           <TreeBranches
             treeNode={rootTreeNode}
+            treeChildren={rootTreeNode.children}
             expanded={expanded}
             isModal
             pluginContext={this.pluginContext}
@@ -65,7 +66,19 @@ export default class TreeNodeView extends PureComponent<{
   pluginContext: IPublicModelPluginContext;
   isRootNode?: boolean;
 }> {
-  state = {
+  state: {
+    expanded: boolean;
+    selected: boolean;
+    hidden: boolean;
+    locked: boolean;
+    detecting: boolean;
+    isRoot: boolean;
+    highlight: boolean;
+    dropping: boolean;
+    conditionFlow: boolean;
+    expandable: boolean;
+    treeChildren: TreeNode[] | null;
+  } = {
     expanded: false,
     selected: false,
     hidden: false,
@@ -76,6 +89,7 @@ export default class TreeNodeView extends PureComponent<{
     dropping: false,
     conditionFlow: false,
     expandable: false,
+    treeChildren: [],
   };
 
   eventOffCallbacks: Array<IPublicTypeDisposable | undefined> = [];
@@ -95,6 +109,7 @@ export default class TreeNodeView extends PureComponent<{
       conditionFlow: treeNode.node.conditionGroup != null,
       highlight: treeNode.isFocusingNode(),
       expandable: treeNode.expandable,
+      treeChildren: treeNode.children,
     };
   }
 
@@ -114,11 +129,13 @@ export default class TreeNodeView extends PureComponent<{
       this.setState({ locked });
     });
     treeNode.onExpandableChanged((expandable: boolean) => {
-      this.setState({ expandable });
+      this.setState({
+        expandable,
+        treeChildren: treeNode.children,
+      });
     });
-
     this.eventOffCallbacks.push(
-      doc?.onDropLocationChanged((document: IPublicModelDocumentModel) => {
+      doc?.onDropLocationChanged(() => {
         this.setState({
           dropping: treeNode.dropDetail?.index != null,
         });
@@ -210,6 +227,7 @@ export default class TreeNodeView extends PureComponent<{
           isModal={false}
           expanded={this.state.expanded}
           pluginContext={this.props.pluginContext}
+          treeChildren={this.state.treeChildren}
         />
       </div>
     );

packages/shell/src/model/document-model.ts

@@ -300,7 +300,7 @@ export class DocumentModel implements IPublicModelDocumentModel {
    * @param fn
    */
   onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable {
-    return this[documentSymbol].onChangeNodeChildren((info?: IPublicTypeOnChangeOptions) => {
+    return this[documentSymbol].onChangeNodeChildren((info?: IPublicTypeOnChangeOptions<InnerNode>) => {
       if (!info) {
         return;
       }