fix: 大量bug修复

src/BehaviorHelper/dragCanvasWithLeak.ts

@@ -11,38 +11,26 @@ import { ViewContainer } from "../View/viewContainer";
  */
 export function InitDragCanvasWithLeak(viewContainer: ViewContainer) {
     let g6Instance = viewContainer.getG6Instance(),
-        isDragStart = false,
-        startPositionY = 0,
-        currentLeakAreaY = 0;
+        prevDy = 0;
 
-    g6Instance.on('canvas:dragstart', event => {
-        isDragStart = true;
-        startPositionY = event.canvasY;
-        currentLeakAreaY = viewContainer.leakAreaY;
-    });
-
-    g6Instance.on('canvas:drag', event => {
-        if(!isDragStart) {
+    g6Instance.on('viewportchange', event => {
+        if(event.action !== 'translate') {
             return false;
         }
 
-        let zoom = g6Instance.getZoom(),
-            dy = (event.canvasY - startPositionY) / zoom,
-            leakAreaY = currentLeakAreaY + dy;
+        let translateX = event.matrix[7],
+            dy = translateX- prevDy;
+            
+        prevDy = translateX;
 
-        viewContainer.leakAreaY = leakAreaY;
-        if(viewContainer.hasLeak) {
-            EventBus.emit('onLeakAreaUpdate', { 
-                leakAreaY: viewContainer.leakAreaY, 
-                hasLeak: viewContainer.hasLeak 
+        viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
+        if (viewContainer.hasLeak) {
+            EventBus.emit('onLeakAreaUpdate', {
+                leakAreaY: viewContainer.leakAreaY,
+                hasLeak: viewContainer.hasLeak
             });
         }
     });
-
-    g6Instance.on('canvas:dragend', event => {
-        isDragStart = false;
-        startPositionY = 0;
-    })
 }
 
 

src/BehaviorHelper/fixNodeMarkerDrag.ts

@@ -1,6 +1,5 @@
-import { Graph } from "@antv/g6-pc";
+import { Graph } from "@antv/g6";
 import { SVNode } from "../Model/SVNode";
-import { LayoutGroupOptions } from "../options";
 
 
 /**
@@ -58,14 +57,11 @@ export function FixNodeMarkerDrag(g6Instance: Graph) {
             return false;
         }
 
-        let distanceX = event.canvasX - nodeData.startX,
-            distanceY = event.canvasY - nodeData.startY,
-            nodeX = nodeData.node.get('x'),
-            nodeY = nodeData.node.get('y');
+        let node: SVNode = nodeData.node;
 
-        nodeData.node.set({
-            x: nodeX + distanceX,
-            y: nodeY + distanceY
+        node.set({
+            x: node.G6Item.getModel().x,
+            y: node.G6Item.getModel().y
         });
 
         nodeData.node = null;

src/BehaviorHelper/initViewBehaviors.ts

@@ -18,7 +18,7 @@ export function InitViewBehaviors() {
             return false;
         }
 
-        return false;
+        return true;
     }
 
     const selectNodeFilter = event => {
@@ -29,7 +29,7 @@ export function InitViewBehaviors() {
             return false;
         }
 
-        return false;
+        return true;
     }
 
     defaultModes.push({
@@ -41,6 +41,10 @@ export function InitViewBehaviors() {
         type: 'drag-canvas'
     });
 
+    // defaultModes.push({
+    //     type: 'zoom-canvas'
+    // });
+
     defaultModes.push({
         type: 'click-select',
         shouldBegin: selectNodeFilter

src/BehaviorHelper/zoomCanvasWithLeak.ts

@@ -1,7 +1,11 @@
-import { Graph, IGroup } from "@antv/g6-pc";
-import { ext } from '@antv/matrix-util';
+import { EventBus } from "../Common/eventBus";
+import { ViewContainer } from "../View/viewContainer";
+
+
+/**
+ * 缩放这里搞不出来，尽力了
+ */
 
-const transform = ext.transform;
 
 
 /**
@@ -9,9 +13,41 @@ const transform = ext.transform;
  * @param g6Instance 
  * @param generalModelsGroup 
  */
-export function InitZoomCanvasWithLeak(g6Instance: Graph) {
-    g6Instance.on('wheel', event => {
-        
+export function InitZoomCanvasWithLeak(viewContainer: ViewContainer) {
+    let g6Instance = viewContainer.getG6Instance(),
+        prevDy = 0;
+
+    let prevZoom = 1;
+
+    // g6Instance.on('viewportchange', event => {
+    //     if(event.action !== 'zoom') {
+    //         return false;
+    //     }
+
+    //     console.log(event.matrix);
+
+    //     viewContainer.leakAreaY = event.matrix[4] * viewContainer.leakAreaY + event.matrix[7];
+    //     if (viewContainer.hasLeak) {
+    //         EventBus.emit('onLeakAreaUpdate', {
+    //             leakAreaY: viewContainer.leakAreaY,
+    //             hasLeak: viewContainer.hasLeak
+    //         });
+    //     }
+    // });
+
+    g6Instance.on('wheelzoom', event => {
+        let dy = event.y - viewContainer.leakAreaY,
+            dZoom = prevZoom - g6Instance.getZoom();
+
+        prevZoom = g6Instance.getZoom();
+
+        viewContainer.leakAreaY = viewContainer.leakAreaY + dy * dZoom;
+        if (viewContainer.hasLeak) {
+            EventBus.emit('onLeakAreaUpdate', {
+                leakAreaY: viewContainer.leakAreaY,
+                hasLeak: viewContainer.hasLeak
+            });
+        }
     });
 }