fix(outline-pane): tree does not change when doc.importSchema call

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

@@ -593,7 +593,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
           // at this moment, it is possible that pane is not ready yet, so
           // put ui related operations to the next loop
           setTimeout(() => {
-            tree.setNodeSelected(treeNode.id);
+            tree.setNodeSelected(treeNode.nodeId);
             this.scrollToNode(treeNode, null, 4);
           }, 0);
         }
@@ -615,21 +615,21 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
     if (!this._shell) {
       return undefined;
     }
-    return this._shell.querySelector(`.tree-node[data-id="${treeNode.id}"]`)?.getBoundingClientRect();
+    return this._shell.querySelector(`.tree-node[data-id="${treeNode.nodeId}"]`)?.getBoundingClientRect();
   }
 
   private getTreeTitleRect(treeNode: TreeNode): DOMRect | undefined {
     if (!this._shell) {
       return undefined;
     }
-    return this._shell.querySelector(`.tree-node-title[data-id="${treeNode.id}"]`)?.getBoundingClientRect();
+    return this._shell.querySelector(`.tree-node-title[data-id="${treeNode.nodeId}"]`)?.getBoundingClientRect();
   }
 
   private getTreeSlotsRect(treeNode: TreeNode): DOMRect | undefined {
     if (!this._shell) {
       return undefined;
     }
-    return this._shell.querySelector(`.tree-node-slots[data-id="${treeNode.id}"]`)?.getBoundingClientRect();
+    return this._shell.querySelector(`.tree-node-slots[data-id="${treeNode.nodeId}"]`)?.getBoundingClientRect();
   }
 }
 

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

@@ -4,7 +4,7 @@ import {
   IPublicModelNode,
   IPublicTypeDisposable,
 } from '@alilc/lowcode-types';
-import { isI18nData, isLocationChildrenDetail } from '@alilc/lowcode-utils';
+import { isI18nData, isLocationChildrenDetail, uniqueId } from '@alilc/lowcode-utils';
 import EventEmitter from 'events';
 import { Tree } from './tree';
 import { IOutlinePanelPluginContext } from './tree-master';
@@ -60,7 +60,9 @@ export default class TreeNode {
    */
   private _expanded = false;
 
-  get id(): string {
+  id = uniqueId('treeNode');
+
+  get nodeId(): string {
     return this.node.id;
   }
 
@@ -256,7 +258,7 @@ export default class TreeNode {
       return false;
     }
     return (
-      isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.id
+      isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.nodeId
     );
   }
 
@@ -278,7 +280,7 @@ export default class TreeNode {
     if (!loc) {
       return false;
     }
-    return loc.target?.id === this.id;
+    return loc.target?.id === this.nodeId;
   }
 
   setTitleLabel(label: string) {

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

@@ -45,6 +45,10 @@ export class Tree {
       const treeNode = this.getTreeNodeById(node.id);
       treeNode?.setHidden(!visible);
     });
+
+    doc?.onImportSchema(() => {
+      this.treeNodesMap = new Map<string, TreeNode>();
+    });
   }
 
   setNodeSelected(nodeId: string): void {

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

@@ -169,12 +169,12 @@ class TreeNodeChildren extends PureComponent<{
             children.push(insertion);
           }
         }
-        groupContents.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} />);
+        groupContents.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} />);
       } else {
         if (index === dropIndex) {
           children.push(insertion);
         }
-        children.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} />);
+        children.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} />);
       }
     });
     endGroup();
@@ -201,14 +201,14 @@ class TreeNodeSlots extends PureComponent<{
         className={classNames('tree-node-slots', {
           'insertion-at-slots': treeNode.dropDetail?.focus?.type === 'slots',
         })}
-        data-id={treeNode.id}
+        data-id={treeNode.nodeId}
       >
         <div className="tree-node-slots-title">
           {/* @ts-ignore */}
           <Title title={{ type: 'i18n', intl: this.props.treeNode.pluginContext.intlNode('Slots') }} />
         </div>
         {treeNode.slots.map(tnode => (
-          <TreeNodeView key={tnode.id} treeNode={tnode} />
+          <TreeNodeView key={tnode.nodeId} treeNode={tnode} />
         ))}
       </div>
     );

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

@@ -225,7 +225,7 @@ export default class TreeNodeView extends PureComponent<{
     return (
       <div
         className={className}
-        data-id={treeNode.id}
+        data-id={treeNode.nodeId}
       >
         <TreeTitle
           treeNode={treeNode}

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

@@ -135,7 +135,7 @@ export default class TreeTitle extends PureComponent<{
       <div
         className={classNames('tree-node-title', { editing })}
         style={style}
-        data-id={treeNode.id}
+        data-id={treeNode.nodeId}
         onClick={() => {
           if (isModal) {
             if (this.state.visible) {

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

@@ -91,7 +91,7 @@ export default class TreeView extends PureComponent<{
   private onDoubleClick = (e: ReactMouseEvent) => {
     e.preventDefault();
     const treeNode = this.getTreeNodeFromEvent(e);
-    if (treeNode?.id === this.state.root?.id) {
+    if (treeNode?.nodeId === this.state.root?.nodeId) {
       return;
     }
     if (!treeNode?.expanded) {
@@ -188,6 +188,11 @@ export default class TreeView extends PureComponent<{
         root: tree.root,
       });
     });
+    doc?.onImportSchema(() => {
+      this.setState({
+        root: tree.root,
+      });
+    });
   }
 
   render() {