diff --git a/common/BehaviorTreeModel.ts b/common/BehaviorTreeModel.ts index 9ca08c0..64e240a 100644 --- a/common/BehaviorTreeModel.ts +++ b/common/BehaviorTreeModel.ts @@ -12,8 +12,10 @@ export interface BehaviorNodeModel { id: number; name: string; desc?: string; + children?: BehaviorNodeModel[]; } export interface BehaviorTreeModel { name: string; + root: BehaviorNodeModel; } \ No newline at end of file diff --git a/common/Utils.ts b/common/Utils.ts new file mode 100644 index 0000000..4410d1c --- /dev/null +++ b/common/Utils.ts @@ -0,0 +1,70 @@ +import { TreeGraphData } from "@antv/g6/lib/types" +import { Tree } from "antd"; +import { BehaviorNodeModel } from "./BehaviorTreeModel"; + +export const cloneNodeData = (nodeData: TreeGraphData) => { + const newData: TreeGraphData = { + id: nodeData.id + "new", + label: nodeData.label, + } + return newData; +} + +export const refreshNodeId = (nodeData: TreeGraphData, id?: number) => { + if (!id) { + id = 1; + } + nodeData.id = (id++).toString(); + if (nodeData.children) { + nodeData.children.forEach(child => { + id = refreshNodeId(child, id); + }) + } + return id; +} + +export const createTreeData = (bNode: BehaviorNodeModel) => { + const treeData: any = { + id: bNode.id.toString(), + name: bNode.name, + } + if (bNode.children) { + treeData.children = []; + bNode.children.forEach(child => { + treeData.children.push(createTreeData(child)); + }) + } + return treeData; +} + +export const findParent = (node: TreeGraphData, id: string): TreeGraphData | null => { + if (node.children) { + for (let child of node.children) { + if (child.id == id) { + return node; + } else { + let parent = findParent(child, id); + if (parent) { + return parent; + } + } + + } + } + return null; +} + +export const findFromAllChildren = (node: TreeGraphData, id: string): TreeGraphData | null => { + if (node.id == id) { + return node; + } + if (node.children) { + for (let child of node.children) { + let found = findFromAllChildren(child, id); + if (found) { + return found; + } + } + } + return null; +} \ No newline at end of file diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx index e3ec015..150f771 100644 --- a/render-process/Editor/index.tsx +++ b/render-process/Editor/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as fs from 'fs'; import { Row, Col } from 'antd'; import NodePanel from './NodePanel'; import { INode } from '@antv/g6/lib/interface/item'; @@ -6,7 +7,8 @@ import G6, { TreeGraph } from '@antv/g6'; 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'; export interface EditorProps { filepath: string; @@ -36,6 +38,7 @@ export default class Editor extends React.Component { container: this.ref.current, width: window.screen.width * 0.66, height: window.screen.height, + animate: false, fitView: true, fitViewPadding: [20, 20, 20, 20], modes: { @@ -44,7 +47,6 @@ export default class Editor extends React.Component { 'zoom-canvas', 'click-select', 'hover', - 'dragRight', { type: 'collapse-expand', trigger: 'dblclick', @@ -66,10 +68,10 @@ export default class Editor extends React.Component { type: "TreeNode", }, layout: { - type: 'dendrogram', // 布局类型 - direction: 'LR', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT - nodeSep: 50, // 节点之间间距 - rankSep: 250 // 每个层级之间的间距 + type: 'compactBox', + direction: 'LR', + getVGap: () => 20, + getHGap: () => 100, } }); @@ -94,80 +96,95 @@ export default class Editor extends React.Component { } }); - graph.on('node:dragstart', (e: G6GraphEvent) => { - this.dragSrcNode = e.item as INode; - console.log("drag start") - graph.setItemState(e.item, 'dragSrc', true); - }); - graph.on('node:dragend', (e: G6GraphEvent) => { - graph.setItemState(e.item, 'dragSrc', false); - }); - - graph.on('node:dragover', (e: G6GraphEvent) => { + const clearDragDstState = () => { if (this.dragDstNode) { graph.setItemState(this.dragDstNode, 'dragRight', false); graph.setItemState(this.dragDstNode, 'dragDown', false); graph.setItemState(this.dragDstNode, 'dragUp', false); + this.dragDstNode = null; } + } + + graph.on('node:dragstart', (e: G6GraphEvent) => { + this.dragSrcNode = e.item as INode; + graph.setItemState(e.item, 'dragSrc', true); + }); + graph.on('node:dragend', (e: G6GraphEvent) => { + graph.setItemState(e.item, 'dragSrc', false); + this.dragSrcNode = null; + }); + + graph.on('node:dragover', (e: G6GraphEvent) => { + clearDragDstState(); const dstNode = e.item as INode; if (dstNode == this.dragSrcNode) { return; } - + const box = dstNode.getBBox(); if (e.x > box.minX + box.width * 0.6) { - console.log("right"); graph.setItemState(dstNode, 'dragRight', true); } else if (e.y > box.minY + box.height * 0.5) { - console.log("down"); graph.setItemState(dstNode, 'dragDown', true); } else { - console.log("up"); graph.setItemState(dstNode, 'dragUp', true); } this.dragDstNode = dstNode; }); + graph.on('node:dragleave', (e: G6GraphEvent) => { + clearDragDstState(); + }) + graph.on('node:drop', (e: G6GraphEvent) => { const srcNode = this.dragSrcNode; - const dstNode = e.item as INode; - if (srcNode != dstNode) { - + if (!srcNode) { + console.log("no drag src"); + return; } - this.dragSrcNode = null; - this.dragDstNode = null; + const dstNode = e.item as INode; + + if (srcNode == dstNode) { + console.log("drop same node"); + return; + } + + const rootData = graph.findDataById('1'); + console.log('rootData', rootData); + const srcData = graph.findDataById(srcNode.getID()); + const srcParent = Utils.findParent(rootData, srcNode.getID()); + const dstData = graph.findDataById(dstNode.getID()); + const dstParent = Utils.findParent(rootData, dstNode.getID()); + console.log("srcParent", srcParent); + if (!srcParent) { + console.log("no parent!"); + return; + } + + const removeSrc = () => { + srcParent.children = srcParent.children.filter(e => e.id != srcData.id); + } + if (dstNode.hasState('dragRight')) { + if(Utils.findFromAllChildren(srcData, dstData.id)) { + console.log("cannot move to child"); + return; + } + removeSrc(); + if(!dstData.children) { + dstData.children = []; + } + dstData.children.push(srcData); + } + + Utils.refreshNodeId(graph.findDataById('1')); + graph.changeData(rootData); + // graph.layout() + clearDragDstState(); }); - const data: TreeGraphData = { - id: 'root', - label: 'Root', - children: [ - { - id: 'SubTreeNode1', - label: 'subroot1', - children: [ - { - id: 'SubTreeNode1.1', - label: 'subroot1.1', - } - ] - }, - { - id: 'SubTreeNode2', - label: 'subroot2', - children: [ - { - id: 'SubTreeNode2.1', - label: 'subroot2.1', - }, - { - id: 'SubTreeNode2.2', - label: 'subroot2.2', - } - ] - } - ] - }; + const str = fs.readFileSync(this.props.filepath, 'utf8'); + let tree: BehaviorTreeModel = JSON.parse(str); + const data = Utils.createTreeData(tree.root); graph.data(data); graph.render(); this.graph = graph; diff --git a/render-process/index.tsx b/render-process/index.tsx index cc0d65c..de796da 100644 --- a/render-process/index.tsx +++ b/render-process/index.tsx @@ -101,7 +101,7 @@ export default class Main extends Component { draggable: true, }); - // title text + // id text group.addShape('text', { attrs: { textBaseline: 'top', @@ -111,7 +111,20 @@ export default class Main extends Component { text: cfg.id, fill: 'black', }, - name: 'title', + name: 'id-text', + }); + + // name text + group.addShape('text', { + attrs: { + textBaseline: 'top', + x: -w / 2 + 20, + y: -h / 2 + 2, + lineHeight: 20, + text: cfg.name, + fill: 'black', + }, + name: 'name-text', }); group.addShape('rect', {