diff --git a/common/MainEventType.ts b/common/MainEventType.ts index 09a8011..f81feed 100644 --- a/common/MainEventType.ts +++ b/common/MainEventType.ts @@ -1,4 +1,5 @@ export default { OPEN_FILE: "OPEN_FILE", OPEN_WORKSPACE: "OPEN_WORKSPACE", + CREATE_NODE: 'CREATE_NODE', } \ No newline at end of file diff --git a/main-process/AppMenu.ts b/main-process/AppMenu.ts index 82acc47..755ed76 100644 --- a/main-process/AppMenu.ts +++ b/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]; @@ -207,6 +208,14 @@ export default class AppMenu { if(hasOther) { classifyItems.push(other); } + + const unknonwItem: MenuItemConstructorOptions = { + label: '空白节点', + click: () => { + this.webContents.send(MainEventType.CREATE_NODE, 'unknow'); + } + } + classifyItems.push(unknonwItem); return new MenuItem({ label: "新建节点", diff --git a/render-process/Editor/NodePanel.tsx b/render-process/Editor/NodePanel.tsx index fabcc3d..a4a55a8 100644 --- a/render-process/Editor/NodePanel.tsx +++ b/render-process/Editor/NodePanel.tsx @@ -125,7 +125,6 @@ export default class NodePanel extends React.Component { } render() { - console.log("render nodePanel"); const { model, settings } = this.props; const conf = settings.getNodeConf(model.name); const title = conf.desc; diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx index 22babfc..1fe305f 100644 --- a/render-process/Editor/index.tsx +++ b/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 { 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 { 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 { } // console.log("cur data", graph.findDataById('1')); - graph.set('animate', false); - graph.changeData(); - graph.layout(); - graph.set('animate', true); + this.changeWithoutAnim(); }); const settings = Utils.getRemoteSettings(); @@ -251,6 +248,7 @@ export default class Editor extends React.Component { 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 { 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 { } 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 { 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 (
@@ -311,10 +329,8 @@ export default class Editor extends React.Component { const data: any = this.graph.findDataById(id); data.conf = settings.getNodeConf(data.name); data.size = Utils.calcTreeNodeSize(data); - this.graph.changeData(); - this.graph.layout(); + this.changeWithoutAnim(); } - const item = this.graph.findById(id); item.draw(); }} diff --git a/render-process/TreeTabs.tsx b/render-process/TreeTabs.tsx index c575709..4d72a4a 100644 --- a/render-process/TreeTabs.tsx +++ b/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 { 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 { filepaths.map(filepath => { return ( - + { + this.editors[filepath] = ref; + } + } + /> ); })