update Explorer after TreeTabs

render-process/Editor/index.tsx

@@ -25,7 +25,6 @@ export interface EditorProps {
 interface EditorState {
     curNodeId?: string;
     treeModel?: BehaviorTreeModel;
-    settings?: Settings;
 }
 
 export default class Editor extends React.Component<EditorProps, EditorState> {
@@ -38,10 +37,19 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     private autoId: number;
     private undoStack: BehaviorNodeModel[] = [];
     private redoStack: BehaviorNodeModel[] = [];
+    private treeModel: BehaviorTreeModel;
+    private settings: Settings;
+    private data: GraphNodeModel;
 
     constructor(props: EditorProps) {
         super(props);
         this.ref = React.createRef();
+
+        this.settings = Utils.getRemoteSettings();
+        const str = fs.readFileSync(this.props.filepath, "utf8");
+        let tree: BehaviorTreeModel = JSON.parse(str);
+        this.data = Utils.createTreeData(tree.root, this.settings);
+        this.autoId = Utils.refreshNodeId(this.data);
     }
 
     componentDidMount() {
@@ -255,20 +263,14 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             this.changeWithoutAnim();
         });
 
-        const settings = Utils.getRemoteSettings();
-
-        const str = fs.readFileSync(this.props.filepath, "utf8");
-        let tree: BehaviorTreeModel = JSON.parse(str);
-        const data = Utils.createTreeData(tree.root, settings);
-        this.autoId = Utils.refreshNodeId(data);
-        graph.data(data);
+        graph.data(this.data);
         graph.render();
         graph.fitCenter();
         graph.set("animate", true);
 
         this.graph = graph;
 
-        this.setState({ treeModel: tree, settings });
+        this.forceUpdate();
     }
 
     onSelectNode(curNodeId: string | null) {
@@ -286,7 +288,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
     createNode(name: string) {
         console.log("editor create node", name);
-        const { curNodeId, settings } = this.state;
+        const { curNodeId } = this.state;
         if (!curNodeId) {
             message.warn("未选中节点");
             return;
@@ -300,7 +302,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         if (!curNodeData.children) {
             curNodeData.children = [];
         }
-        curNodeData.children.push(Utils.createTreeData(newNodeData, settings));
+        curNodeData.children.push(Utils.createTreeData(newNodeData, this.settings));
         this.changeWithoutAnim();
     }
 
@@ -369,7 +371,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                 return;
             }
             this.pushUndoStack();
-            const data = Utils.createTreeData(JSON.parse(str), this.state.settings);
+            const data = Utils.createTreeData(JSON.parse(str), this.settings);
             this.autoId = Utils.refreshNodeId(data, this.autoId);
             this.onSelectNode(null);
             if (!curNodeData.children) {
@@ -386,7 +388,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
 
     useStackData(data: BehaviorNodeModel) {
         this.graph.set("animate", false);
-        this.graph.changeData(Utils.createTreeData(data, this.state.settings));
+        this.graph.changeData(Utils.createTreeData(data, this.settings));
         this.graph.layout(true);
         this.graph.set("animate", true);
     }
@@ -423,7 +425,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     }
 
     render() {
-        const { curNodeId, treeModel, settings } = this.state;
+        const { curNodeId, treeModel } = this.state;
         var curNode: any;
         if (curNodeId) {
             curNode = this.graph.findDataById(curNodeId);
@@ -437,11 +439,11 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                         {curNode ? (
                             <NodePanel
                                 model={curNode}
-                                settings={settings}
+                                settings={this.settings}
                                 updateNode={(id, forceUpdate) => {
                                     if (forceUpdate) {
                                         const data: any = this.graph.findDataById(id);
-                                        data.conf = settings.getNodeConf(data.name);
+                                        data.conf = this.settings.getNodeConf(data.name);
                                         data.size = Utils.calcTreeNodeSize(data);
                                         this.changeWithoutAnim();
                                     }

render-process/TreeTabs.tsx

@@ -11,7 +11,7 @@ import { BehaviorTreeModel } from "../common/BehaviorTreeModel";
 const { TabPane } = Tabs;
 
 interface TreeTabsProps {
-    onTabSelected:(path:string)=>void;
+    onTabSelected: (path: string) => void;
 }
 
 interface TreeTabsState {
@@ -76,11 +76,17 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
         });
     }
 
+    componentDidUpdate() {
+        setTimeout(() => {
+            this.props.onTabSelected(this.state.curPath);
+        }, 100);
+    }
+
     getOpenTreesModel() {
         const trees: BehaviorTreeModel[] = []
         for (let k in this.editors) {
             let editor = this.editors[k];
-            if(editor) {
+            if (editor) {
                 trees.push(editor.save());
             }
         }
@@ -99,13 +105,9 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
         if (this.state.filepaths.indexOf(path) < 0) {
             const filepaths = this.state.filepaths;
             filepaths.push(path);
-            this.setState({ filepaths, curPath: path },()=>{
-                this.props.onTabSelected(path);
-            });
+            this.setState({ filepaths, curPath: path });
         } else {
-            this.setState({ curPath: path },()=>{
-                this.props.onTabSelected(path);
-            });
+            this.setState({ curPath: path });
         }
     }
 
@@ -113,9 +115,9 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
         const index = this.state.filepaths.indexOf(path);
         if (index >= 0) {
             const filepaths = this.state.filepaths;
-            filepaths.splice(index,1);
+            filepaths.splice(index, 1);
             const length = filepaths.length;
-            this.setState({ filepaths, curPath: length>0?filepaths[length-1]:null });
+            this.setState({ filepaths, curPath: length > 0 ? filepaths[length - 1] : null });
         }
     }
 
@@ -134,9 +136,7 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
                 defaultActiveKey={curPath}
                 activeKey={curPath}
                 onChange={(activeKey) => {
-                    this.setState({ curPath: activeKey },()=>{
-                        this.props.onTabSelected(activeKey);
-                    });
+                    this.setState({ curPath: activeKey });
                 }}
                 onEdit={(targetKey, action) => {
                     if (action == "remove") {