add drag state

render-process/Editor/index.tsx

@@ -23,7 +23,8 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
   }
 
   private graph: TreeGraph;
-  private dragNode: INode;
+  private dragSrcNode: INode;
+  private dragDstNode: INode;
 
   constructor(props: EditorProps) {
     super(props);
@@ -40,8 +41,10 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
       modes: {
         default: [
           'drag-canvas',
+          'zoom-canvas',
           'click-select',
           'hover',
+          'dragRight',
           {
             type: 'collapse-expand',
             trigger: 'dblclick',
@@ -59,31 +62,6 @@ 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: "TreeNode",
       },
@@ -117,7 +95,8 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     });
 
     graph.on('node:dragstart', (e: G6GraphEvent) => {
-      this.dragNode = e.item as INode;
+      this.dragSrcNode = e.item as INode;
+      console.log("drag start")
       graph.setItemState(e.item, 'dragSrc', true);
     });
     graph.on('node:dragend', (e: G6GraphEvent) => {
@@ -125,15 +104,38 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
     });
 
     graph.on('node:dragover', (e: G6GraphEvent) => {
+      if (this.dragDstNode) {
+        graph.setItemState(this.dragDstNode, 'dragRight', false);
+        graph.setItemState(this.dragDstNode, 'dragDown', false);
+        graph.setItemState(this.dragDstNode, 'dragUp', false);
+      }
+      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:drop', (e: G6GraphEvent) => {
-      const srcNode = this.dragNode;
+      const srcNode = this.dragSrcNode;
       const dstNode = e.item as INode;
       if (srcNode != dstNode) {
 
       }
+      this.dragSrcNode = null;
+      this.dragDstNode = null;
     });
 
     const data: TreeGraphData = {

render-process/index.tsx

@@ -14,7 +14,7 @@ import G6 from '@antv/g6';
 
 import 'antd/dist/antd.dark.css';
 import './index.css';
-import { ModelConfig } from "@antv/g6/lib/types";
+import { ModelConfig, Item } from "@antv/g6/lib/types";
 
 const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
@@ -63,8 +63,23 @@ export default class Main extends Component {
             },
             dragSrc: {
               fill: 'gray',
+            },
+            dragRight: {
+              'drag-right': {
+                fillOpacity: 0.6,
               }
             },
+            dragUp: {
+              'drag-up': {
+                fillOpacity: 0.6,
+              }
+            },
+            dragDown: {
+              'drag-down': {
+                fillOpacity: 0.6,
+              }
+            },
+          },
         },
         draw(cfg, group) {
           const color = cfg.error ? '#F4664A' : '#30BF78';
@@ -104,13 +119,13 @@ export default class Main extends Component {
             attrs: {
               x: -w / 2,
               y: -h / 2,
-              width: w * 0.6,
+              width: w,
               height: h / 2,
               fill: 'blue',
-              fillOpacity: 0.5,
-              radius: r,
+              fillOpacity: 0,
             },
-            visible: false,
+            draggable: true,
+            // visible: false,
           });
 
           group.addShape('rect', {
@@ -118,13 +133,13 @@ export default class Main extends Component {
             attrs: {
               x: -w / 2,
               y: 0,
-              width: w * 0.6,
+              width: w,
               height: h / 2,
-              fill: 'green',
-              fillOpacity: 0.5,
-              radius: r,
+              fill: 'blue',
+              fillOpacity: 0,
             },
-            visible: false,
+            draggable: true,
+            // visible: false,
           });
 
           group.addShape('rect', {
@@ -134,15 +149,14 @@ export default class Main extends Component {
               y: -h / 2,
               width: w * 0.4,
               height: h,
-              fill: 'yellow',
-              fillOpacity: 0.5,
-              radius: r,
+              fill: 'blue',
+              fillOpacity: 0,
             },
-            visible: false,
+            draggable: true,
+            // visible: false,
           });
           return shape;
         },
-
       },
       'single-node',
     );