diff --git a/common/BehaviorTreeModel.ts b/common/BehaviorTreeModel.ts index 64e240a..eca6ed7 100644 --- a/common/BehaviorTreeModel.ts +++ b/common/BehaviorTreeModel.ts @@ -1,3 +1,5 @@ +import { TreeGraphData } from "@antv/g6/lib/types"; + export interface BehaviorNodeTypeModel { name: string; type?: string; @@ -12,10 +14,24 @@ export interface BehaviorNodeModel { id: number; name: string; desc?: string; + args?: string[][3]; + input?: string[]; + output?: string; children?: BehaviorNodeModel[]; } export interface BehaviorTreeModel { name: string; root: BehaviorNodeModel; +} + +export interface GraphNodeModel extends TreeGraphData { + name: string; + desc?: string; + args?: string[][3]; + input?: string[]; + output?: string; + children?: GraphNodeModel[]; + + size?: number[]; } \ No newline at end of file diff --git a/common/Utils.ts b/common/Utils.ts index 4ce9198..2f15832 100644 --- a/common/Utils.ts +++ b/common/Utils.ts @@ -1,18 +1,17 @@ import { TreeGraphData } from "@antv/g6/lib/types" -import { Tree } from "antd"; -import { BehaviorNodeModel } from "./BehaviorTreeModel"; +import { BehaviorNodeModel, GraphNodeModel } from "./BehaviorTreeModel"; import Settings from "../main-process/Settings"; import { remote } from "electron"; -export const cloneNodeData = (nodeData: TreeGraphData) => { - const newData: TreeGraphData = { +export const cloneNodeData = (nodeData: GraphNodeModel) => { + const newData: GraphNodeModel = { id: nodeData.id + "new", - label: nodeData.label, + name: nodeData.name, } return newData; } -export const refreshNodeId = (nodeData: TreeGraphData, id?: number) => { +export const refreshNodeId = (nodeData: GraphNodeModel, id?: number) => { if (!id) { id = 1; } @@ -25,18 +24,36 @@ export const refreshNodeId = (nodeData: TreeGraphData, id?: number) => { return id; } +export const calcTreeNodeSize = (treeNode: GraphNodeModel) => { + var height = 40; + const updateHeight = (arr: any) => { + if(arr && arr.length > 0) { + height += 30; + } + } + updateHeight(treeNode.args); + updateHeight(treeNode.input); + updateHeight(treeNode.output); + return [150, height]; +} + export const createTreeData = (bNode: BehaviorNodeModel) => { - const treeData: any = { + const treeData: GraphNodeModel = { id: bNode.id.toString(), name: bNode.name, desc: bNode.desc, + args: bNode.args, + input: bNode.input, + output: bNode.output, } + treeData.size = calcTreeNodeSize(treeData); if (bNode.children) { treeData.children = []; bNode.children.forEach(child => { treeData.children.push(createTreeData(child)); }) } + calcTreeNodeSize(treeData); return treeData; } diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx index 3ad25b3..920ee76 100644 --- a/render-process/Editor/index.tsx +++ b/render-process/Editor/index.tsx @@ -8,7 +8,7 @@ import { TreeGraphData, IG6GraphEvent } from '@antv/g6/lib/types'; import { G6GraphEvent } from '@antv/g6/lib/interface/behavior'; import './Editor.css'; import * as Utils from '../../common/Utils'; -import { BehaviorTreeModel } from '../../common/BehaviorTreeModel'; +import { BehaviorTreeModel, GraphNodeModel } from '../../common/BehaviorTreeModel'; export interface EditorProps { filepath: string; @@ -73,8 +73,18 @@ export default class Editor extends React.Component { layout: { type: 'compactBox', direction: 'LR', - getVGap: () => 20, - getHGap: () => 100, + getVGap: () => 15, + getHGap: () => 50, + getWidth: (d: GraphNodeModel) => { + return 150; + }, + getHeight: (d: GraphNodeModel) => { + if(d.size) { + return d.size[1]; + } else { + return 50; + } + } } }); @@ -104,7 +114,6 @@ export default class Editor extends React.Component { const clearDragDstState = () => { if (this.dragDstId) { - console.log("clearDragDstState", this.dragDstId); graph.setItemState(this.dragDstId, 'dragRight', false); graph.setItemState(this.dragDstId, 'dragDown', false); graph.setItemState(this.dragDstId, 'dragUp', false); @@ -114,7 +123,6 @@ export default class Editor extends React.Component { const clearDragSrcState = () => { if (this.dragSrcId) { - console.log("clearDragSrcId", this.dragSrcId); graph.setItemState(this.dragSrcId, 'dragSrc', false); this.dragSrcId = null; } @@ -162,8 +170,6 @@ export default class Editor extends React.Component { const srcNodeId = this.dragSrcId; const dstNode = e.item; - console.log("drop"); - var dragDir; if(dstNode.hasState('dragRight')) { dragDir = 'dragRight'; @@ -187,12 +193,10 @@ export default class Editor extends React.Component { } const rootData = graph.findDataById('1'); - console.log('rootData', rootData); const srcData = graph.findDataById(srcNodeId); const srcParent = Utils.findParent(rootData, srcNodeId); const dstData = graph.findDataById(dstNode.getID()); const dstParent = Utils.findParent(rootData, dstNode.getID()); - console.log("srcParent", srcParent); if (!srcParent) { console.log("no parent!"); return; @@ -232,7 +236,7 @@ export default class Editor extends React.Component { return; } - console.log("cur data", graph.findDataById('1')); + // console.log("cur data", graph.findDataById('1')); graph.changeData(); graph.layout(); }); diff --git a/render-process/index.tsx b/render-process/index.tsx index d494561..461598d 100644 --- a/render-process/index.tsx +++ b/render-process/index.tsx @@ -148,7 +148,6 @@ export default class Main extends Component { // icon var img = `./static/icons/${classify}.svg`; - console.log(cfg.type, classify); group.addShape('image', { attrs: { x: x0 + 3, @@ -174,7 +173,7 @@ export default class Main extends Component { }); var x = x0 + 2; - var y = y0 + 20; + var y = y0 + 23; // desc text const desc = cfg.desc || nodeConf.desc; if (desc) { @@ -184,6 +183,7 @@ export default class Main extends Component { x, y, lineHeight: 20, + fontWeight: 800, text: `备注:${desc}`, fill: 'black', },