register node TreeNode

render-process/Editor/index.tsx

@@ -22,7 +22,8 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     curNode: null
   }
 
-  graph: TreeGraph;
+  private graph: TreeGraph;
+  private dragNode: INode;
 
   constructor(props: EditorProps) {
     super(props);
@@ -58,29 +59,33 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
           stroke: '#A3B1BF'
         }
       },
+      // defaultNode: {
+      //   type: 'rect',
+      //   labelCfg: {
+      //     style: {
+      //       fill: 'blue',
+      //       fontSize: 10
+      //     }
+      //   },
+      //   style: {
+      //     stroke: '#72CC4A',
+      //     width: 150
+      //   }
+      // },
+      // nodeStateStyles: {
+      //   hover: {
+      //     fill: '#d3adf7',
+      //   },
+      //   selected: {
+      //     stroke: '#000',
+      //     lineWidth: 3,
+      //   },
+      //   dragSrc: {
+      //     fill: 'gray',
+      //   }
+      // },
       defaultNode: {
-        type: 'rect',
+        type: "TreeNode",
-        labelCfg: {
-          style: {
-            fill: 'blue',
-            fontSize: 10
-          }
-        },
-        style: {
-          stroke: '#72CC4A',
-          width: 150
-        }
-      },
-      nodeStateStyles: {
-        // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
-        hover: {
-          fill: '#d3adf7',
-        },
-        // 鼠标点击节点，即 click 状态为 true 时的样式
-        selected: {
-          stroke: '#000',
-          lineWidth: 3,
-        },
       },
       layout: {
         type: 'dendrogram', // 布局类型
@@ -101,7 +106,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     });
 
     graph.on('nodeselectchange', (e: G6GraphEvent) => {
-      // 当前操作的 item
       if (this.state.curNode) {
         graph.setItemState(this.state.curNode, 'selected', false);
       }
@@ -112,8 +116,24 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       }
     });
 
-    graph.on('dragenter', (e: any) => {
+    graph.on('node:dragstart', (e: G6GraphEvent) => {
-      console.log("dragenter", e);
+      this.dragNode = e.item as INode;
+      graph.setItemState(e.item, 'dragSrc', true);
+    });
+    graph.on('node:dragend', (e: G6GraphEvent) => {
+      graph.setItemState(e.item, 'dragSrc', false);
+    });
+
+    graph.on('node:dragover', (e: G6GraphEvent) => {
+      
+    });
+
+    graph.on('node:drop', (e: G6GraphEvent) => {
+      const srcNode = this.dragNode;
+      const dstNode = e.item as INode;
+      if (srcNode != dstNode) {
+
+      }
     });
 
     const data: TreeGraphData = {

render-process/index.tsx

@@ -32,53 +32,40 @@ export default class Main extends Component {
 
   componentWillMount() {
     G6.registerNode(
-      'tree-node',
+      'TreeNode',
       {
-        drawShape: function drawShape(cfg: any, group) {
+        options: {
-          const rect = group.addShape('rect', {
+          type: 'rect',
-            attrs: {
+          labelCfg: {
-              fill: '#fff',
+            style: {
-              stroke: '#666',
+              fill: 'blue',
+              fontSize: 10
+            }
           },
-            name: 'rect-shape',
+          style: {
-          });
+            fill: "white",
-          const content = cfg.name.replace(/(.{19})/g, '$1\n');
+            stroke: '#72CC4A',
-          const text = group.addShape('text', {
+            width: 150
-            attrs: {
-              text: content,
-              x: 0,
-              y: 0,
-              textAlign: 'left',
-              textBaseline: 'middle',
-              fill: '#666',
           },
-            name: 'rect-shape',
+          stateStyles: {
-          });
+            hover: {
-          const bbox = text.getBBox();
+              fill: '#d3adf7',
-          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',
+            selected: {
-            });
+              stroke: '#000',
+              lineWidth: 3,
+            },
+            dragSrc: {
+              fill: 'gray',
             }
-          rect.attr({
-            x: bbox.minX - 4,
-            y: bbox.minY - 6,
-            width: bbox.width + (hasChildren ? 26 : 8),
-            height: bbox.height + 12,
-          });
-          return rect;
           },
         },
-      'single-node',
+        // draw(cfg, group) { },
+
+      },
+      // 继承内置节点类型的名字，例如基类 'single-node'，或 'circle', 'rect' 等
+      // 当不指定该参数则代表不继承任何内置节点类型
+      'rect',
     );
   }