node fit height

common/BehaviorTreeModel.ts

@@ -1,3 +1,5 @@
+import { TreeGraphData } from "@antv/g6/lib/types";
+
 export interface BehaviorNodeTypeModel {
   name: string;
   type?: string;
@@ -12,6 +14,9 @@ export interface BehaviorNodeModel {
   id: number;
   name: string;
   desc?: string;
+  args?: string[][3];
+  input?: string[];
+  output?: string;
   children?: BehaviorNodeModel[];
 }
 
@@ -19,3 +24,14 @@ 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[];
+}

common/Utils.ts

@@ -1,18 +1,17 @@
 import { TreeGraphData } from "@antv/g6/lib/types"
-import { Tree } from "antd";
+import { BehaviorNodeModel, GraphNodeModel } from "./BehaviorTreeModel";
-import { BehaviorNodeModel } from "./BehaviorTreeModel";
 import Settings from "../main-process/Settings";
 import { remote } from "electron";
 
-export const cloneNodeData = (nodeData: TreeGraphData) => {
+export const cloneNodeData = (nodeData: GraphNodeModel) => {
-  const newData: TreeGraphData = {
+  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;
 }
 

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<EditorProps, EditorState> {
       layout: {
         type: 'compactBox',
         direction: 'LR',
-        getVGap: () => 20,
+        getVGap: () => 15,
-        getHGap: () => 100,
+        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<EditorProps, EditorState> {
 
     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<EditorProps, EditorState> {
 
     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<EditorProps, EditorState> {
       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<EditorProps, EditorState> {
       }
 
       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<EditorProps, EditorState> {
         return;
       }
 
-      console.log("cur data", graph.findDataById('1'));
+      // console.log("cur data", graph.findDataById('1'));
       graph.changeData();
       graph.layout();
     });

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',
               },