select node

render-process/Editor/BehaviorTree.tsx

@@ -33,11 +33,10 @@ class BehaviorTree extends React.Component<BehaviorTreeProps> {
   initGraph(graph: Graph) {
     const { onSelectNode } = this.props;
     graph.on('click', (ev: GraphEvent) => {
-      console.log("click", ev);
       if (!ev.item) {
         onSelectNode(null);
-      } else if (ev.item) {
-        onSelectNode(ev.item);
+      } else if (ev.item.getType() == "node") {
+        onSelectNode(ev.item as INode);
       }
     });
 

render-process/Editor/NodePanel.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Card } from 'antd';
 import { DetailPanel, withEditorContext } from 'gg-editor';
 import { EditorContextProps } from 'gg-editor/lib/components/EditorContext';
-
+import { INode } from '@antv/g6/lib/interface/item';
 
 interface NodePanelProps extends EditorContextProps {
-
+  curNode: INode | null;
 }
 
 interface NodePanelState {
@@ -14,16 +14,24 @@ interface NodePanelState {
 
 class Panel extends React.Component<NodePanelProps> {
   componentDidMount() {
-    console.log(this.props);
-    this.props.graph.on("click", (ev: any) => {
-      console.log("on click", ev);
-    })
   }
+
+  renderNode() {
+    console.log("NodePanel render", this.props);
+    const { curNode } = this.props;
+    return (
+      <div>
+        {curNode.getModel().label}
+      </div>
+    )
+  }
+
   render() {
     console.log("NodePanel render", this.props);
+    const { curNode } = this.props;
     return (
       <Card title="节点信息" style={{ height: "100%" }}>
-        未选中fefqwefqwefwewef
+        {curNode ? this.renderNode() : "未选中"}
       </Card>
     )
   }

render-process/Editor/index.tsx

@@ -3,6 +3,7 @@ import GGEditor, { Mind, RegisterNode, withEditorContext } from 'gg-editor';
 import { Row, Col } from 'antd';
 import NodePanel from './NodePanel';
 import BehaviorTree from './BehaviorTree';
+import { INode } from '@antv/g6/lib/interface/item';
 
 import './Editor.css';
 
@@ -10,7 +11,15 @@ export interface EditorProps {
   filepath: string;
 }
 
-export default class Editor extends React.Component<EditorProps> {
+interface EditorState {
+  curNode: INode | null;
+}
+
+export default class Editor extends React.Component<EditorProps, EditorState> {
+  state: EditorState = {
+    curNode: null
+  }
+  
   componentWillMount() {
 
   }
@@ -19,18 +28,22 @@ export default class Editor extends React.Component<EditorProps> {
   }
 
   render() {
+    const { curNode } = this.state;
     return (
       <GGEditor className="editor">
         <Row className="editorBd">
           <Col span={18} className="editorContent">
-            <BehaviorTree 
+            <BehaviorTree
               onSelectNode={(node) => {
-                console.log("onSelectNode", node)
+                console.log("onSelectNode", node);
+                this.setState({ curNode: node });
               }}
             />
           </Col>
           <Col span={6} className="editorSidebar">
-            <NodePanel />
+            <NodePanel
+              curNode={curNode}
+            />
           </Col>
         </Row>
       </GGEditor>