create node

common/MainEventType.ts

@@ -1,4 +1,5 @@
 export default {
   OPEN_FILE: "OPEN_FILE",
   OPEN_WORKSPACE: "OPEN_WORKSPACE",
+  CREATE_NODE: 'CREATE_NODE',
 }

main-process/AppMenu.ts

@@ -190,6 +190,7 @@ export default class AppMenu {
         label: `${node.name}(${node.desc})`,
         click: () => {
           console.log("create node", node.name);
+          this.webContents.send(MainEventType.CREATE_NODE, node.name);
         }
       }
       let typeItem = map[node.type];
@@ -208,6 +209,14 @@ export default class AppMenu {
       classifyItems.push(other);
     }
 
+    const unknonwItem: MenuItemConstructorOptions = {
+      label: '空白节点',
+      click: () => {
+        this.webContents.send(MainEventType.CREATE_NODE, 'unknow');
+      }
+    } 
+    classifyItems.push(unknonwItem);
+    
     return new MenuItem({
       label: "新建节点",
       submenu: classifyItems

render-process/Editor/NodePanel.tsx

@@ -125,7 +125,6 @@ export default class NodePanel extends React.Component<NodePanelProps> {
   }
 
   render() {
-    console.log("render nodePanel");
     const { model, settings } = this.props;
     const conf = settings.getNodeConf(model.name);
     const title = conf.desc;

render-process/Editor/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as fs from 'fs';
-import { Row, Col } from 'antd';
+import { Row, Col, message } from 'antd';
 import NodePanel from './NodePanel';
 import { INode } from '@antv/g6/lib/interface/item';
-import G6, { TreeGraph } from '@antv/g6';
+import G6, { TreeGraph, Util } from '@antv/g6';
 import { TreeGraphData, IG6GraphEvent } from '@antv/g6/lib/types';
 import { G6GraphEvent } from '@antv/g6/lib/interface/behavior';
 import './Editor.css';
@@ -29,6 +29,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
   private graph: TreeGraph;
   private dragSrcId: string;
   private dragDstId: string;
+  private autoId: number;
 
   constructor(props: EditorProps) {
     super(props);
@@ -76,7 +77,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       layout: {
         type: 'compactBox',
         direction: 'LR',
-        getVGap: () => 15,
         getHGap: () => 50,
         getWidth: (d: GraphNodeModel) => {
           return 150;
@@ -240,10 +240,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       }
 
       // console.log("cur data", graph.findDataById('1'));
-      graph.set('animate', false);
+      this.changeWithoutAnim();
-      graph.changeData();
-      graph.layout();
-      graph.set('animate', true);
     });
 
     const settings = Utils.getRemoteSettings();
@@ -251,6 +248,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     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.render();
     graph.fitCenter();
@@ -265,7 +263,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     const graph = this.graph;
 
     if (this.state.curNodeId) {
-      console.log("unselect", this.state.curNodeId);
       graph.setItemState(this.state.curNodeId, 'selected', false);
     }
 
@@ -276,7 +273,22 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
   }
 
   createNode(name: string) {
-
+    console.log("editor create node", name);
+    const { curNodeId, settings } = this.state;
+    if (!curNodeId) {
+      message.warn("未选中节点");
+      return;
+    }
+    const curNodeData = this.graph.findDataById(curNodeId);
+    const newNodeData: BehaviorNodeModel = {
+      id: this.autoId++,
+      name: name,
+    }
+    if (!curNodeData.children) {
+      curNodeData.children = [];
+    }
+    curNodeData.children.push(Utils.createTreeData(newNodeData, settings));
+    this.changeWithoutAnim();
   }
 
   updateNode(id: string) {
@@ -284,13 +296,19 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     this.graph.layout();
   }
 
+  changeWithoutAnim() {
+    this.graph.set('animate', false);
+    this.graph.changeData();
+    this.graph.layout();
+    this.graph.set('animate', true);
+  }
+
   render() {
     const { curNodeId, treeModel, settings } = this.state;
     var curNode: any;
     if (curNodeId) {
       curNode = this.graph.findDataById(curNodeId);
     }
-    console.log("render editor", curNodeId);
 
     return (
       <div className="editor">
@@ -311,10 +329,8 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                       const data: any = this.graph.findDataById(id);
                       data.conf = settings.getNodeConf(data.name);
                       data.size = Utils.calcTreeNodeSize(data);
-                      this.graph.changeData();
+                      this.changeWithoutAnim();
-                      this.graph.layout();
                     }
-
                     const item = this.graph.findById(id);
                     item.draw();
                   }}

render-process/TreeTabs.tsx

@@ -5,14 +5,9 @@ import React, { Component } from "react";
 import { Layout, Tabs } from 'antd';
 import { ipcRenderer, remote } from 'electron';
 import * as path from 'path';
-import * as fs from 'fs';
-import * as Utils from '../common/Utils';
-import MainEventType from "../common/MainEventType";
-import Properties from "./Properties";
-import Settings from "../main-process/Settings";
-import G6 from '@antv/g6';
 
 import 'antd/dist/antd.dark.css';
+import MainEventType from "../common/MainEventType";
 
 const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
@@ -30,10 +25,20 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
     filepaths: [],
   }
 
+  editors: { [path: string]: Editor } = {}
+
   componentWillMount() {
   }
 
   componentDidMount() {
+    ipcRenderer.on(MainEventType.CREATE_NODE, (event: any, name: any) => {
+      const {curPath} = this.state;
+      if(!curPath) {
+        return;
+      }
+      const editor = this.editors[curPath];
+      editor.createNode(name);
+    });
   }
 
   openFile(path: string) {
@@ -79,7 +84,14 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
           filepaths.map(filepath => {
             return (
               <TabPane tab={path.basename(filepath)} key={filepath}>
-                <Editor filepath={filepath} />
+                <Editor
+                  filepath={filepath}
+                  ref={
+                    ref => {
+                      this.editors[filepath] = ref;
+                    }
+                  }
+                />
               </TabPane>
             );
           })