diff --git a/render-process/Editor/BehaviorTree.tsx b/render-process/Editor/BehaviorTree.tsx index 132add1..fd0540a 100644 --- a/render-process/Editor/BehaviorTree.tsx +++ b/render-process/Editor/BehaviorTree.tsx @@ -33,11 +33,10 @@ class BehaviorTree extends React.Component { 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); } }); diff --git a/render-process/Editor/NodePanel.tsx b/render-process/Editor/NodePanel.tsx index a73c8f3..fdbd5d3 100644 --- a/render-process/Editor/NodePanel.tsx +++ b/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 { 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 ( +
+ {curNode.getModel().label} +
+ ) + } + render() { console.log("NodePanel render", this.props); + const { curNode } = this.props; return ( - 未选中fefqwefqwefwewef + {curNode ? this.renderNode() : "未选中"} ) } diff --git a/render-process/Editor/index.tsx b/render-process/Editor/index.tsx index fadb455..c00f713 100644 --- a/render-process/Editor/index.tsx +++ b/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 { +interface EditorState { + curNode: INode | null; +} + +export default class Editor extends React.Component { + state: EditorState = { + curNode: null + } + componentWillMount() { } @@ -19,18 +28,22 @@ export default class Editor extends React.Component { } render() { + const { curNode } = this.state; return ( - { - console.log("onSelectNode", node) + console.log("onSelectNode", node); + this.setState({ curNode: node }); }} /> - +