select & hover state style

render-process/Editor/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Row, Col } from 'antd';
 import NodePanel from './NodePanel';
 import { INode } from '@antv/g6/lib/interface/item';
-import { TreeGraph } from '@antv/g6';
+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';
@@ -40,6 +40,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         default: [
           'drag-canvas',
           'click-select',
+          'hover',
           {
             type: 'collapse-expand',
             trigger: 'dblclick',
@@ -52,16 +53,16 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         ]
       },
       defaultEdge: {
-        shape: 'cubic-horizontal',
+        type: 'cubic-horizontal',
         style: {
           stroke: '#A3B1BF'
         }
       },
       defaultNode: {
-        shape: 'rect',
+        type: 'rect',
         labelCfg: {
           style: {
-            fill: '#000000A6',
+            fill: 'blue',
             fontSize: 10
           }
         },
@@ -70,6 +71,17 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
           width: 150
         }
       },
+      nodeStateStyles: {
+        // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
+        hover: {
+          fill: '#d3adf7',
+        },
+        // 鼠标点击节点，即 click 状态为 true 时的样式
+        selected: {
+          stroke: '#000',
+          lineWidth: 3,
+        },
+      },
       layout: {
         type: 'dendrogram', // 布局类型
         direction: 'LR',    // 自左至右布局，可选的有 H / V / LR / RL / TB / BT
@@ -78,14 +90,30 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       }
     });
 
-    graph.on('nodeselectchange', (e: G6GraphEvent) => {
-      // 当前操作的 item
-      const curNode = e.target as INode;
-      this.setState({ curNode })
+    graph.on('node:mouseenter', (e: G6GraphEvent) => {
+      const { item } = e;
+      graph.setItemState(item, 'hover', true);
     });
 
-    graph.on('dragenter', (ev: any) => {
-      console.log("dragenter", ev);
+    graph.on('node:mouseleave', (e: G6GraphEvent) => {
+      const { item } = e;
+      graph.setItemState(item, 'hover', false);
+    });
+
+    graph.on('nodeselectchange', (e: G6GraphEvent) => {
+      // 当前操作的 item
+      if(this.state.curNode) {
+        graph.setItemState(this.state.curNode, 'selected', false);
+      }
+      const curNode = e.target as INode;
+      this.setState({ curNode });
+      if(this.state.curNode) {
+        graph.setItemState(this.state.curNode, 'selected', true);
+      }
+    });
+
+    graph.on('dragenter', (e: any) => {
+      console.log("dragenter", e);
     });
 
     const data: TreeGraphData = {

render-process/index.tsx

@@ -1,8 +1,6 @@
 
 import * as ReactDOM from "react-dom";
 import Editor from "./Editor";
-
-
 import React, { Component } from "react";
 import { Layout, Tabs } from 'antd';
 import { ipcRenderer, remote } from 'electron';
@@ -12,6 +10,7 @@ import MainEventType from "../common/MainEventType";
 import Properties from "./Properties";
 import { BehaviorTreeModel } from "../common/BehaviorTreeModel";
 import Settings from "../main-process/Settings";
+import G6 from '@antv/g6';
 
 import 'antd/dist/antd.dark.css';
 import './index.css';
@@ -31,6 +30,58 @@ export default class Main extends Component {
     filepaths: [],
   }
 
+  componentWillMount() {
+    G6.registerNode(
+      'tree-node',
+      {
+        drawShape: function drawShape(cfg: any, group) {
+          const rect = group.addShape('rect', {
+            attrs: {
+              fill: '#fff',
+              stroke: '#666',
+            },
+            name: 'rect-shape',
+          });
+          const content = cfg.name.replace(/(.{19})/g, '$1\n');
+          const text = group.addShape('text', {
+            attrs: {
+              text: content,
+              x: 0,
+              y: 0,
+              textAlign: 'left',
+              textBaseline: 'middle',
+              fill: '#666',
+            },
+            name: 'rect-shape',
+          });
+          const bbox = text.getBBox();
+          const hasChildren = cfg.children && cfg.children.length > 0;
+          if (hasChildren) {
+            group.addShape('marker', {
+              attrs: {
+                x: bbox.maxX + 12,
+                y: 0,
+                r: 6,
+                symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
+                stroke: '#666',
+                lineWidth: 2,
+              },
+              name: 'collapse-icon',
+            });
+          }
+          rect.attr({
+            x: bbox.minX - 4,
+            y: bbox.minY - 6,
+            width: bbox.width + (hasChildren ? 26 : 8),
+            height: bbox.height + 12,
+          });
+          return rect;
+        },
+      },
+      'single-node',
+    );
+  }
+
   componentDidMount() {
     ipcRenderer.on(MainEventType.OPEN_FILE, (event: any, path: any) => {
       this.openFile(path);