feat: 重构

src/BehaviorHelper/dragCanavsWithLeak.ts

@@ -0,0 +1,54 @@
+import { EventBus } from "../Common/eventBus";
+import { ViewContainer } from "../View/viewContainer";
+
+
+
+
+/**
+ * 初始化视图拖拽功能
+ * @param g6Instance 
+ * @param hasLeak 
+ */
+export function InitDragCanvasWithLeak(viewContainer: ViewContainer) {
+    let g6Instance = viewContainer.getG6Instance(),
+        startPositionY = 0,
+        currentLeakAreaY = 0;
+
+    g6Instance.on('canvas:dragstart', event => {
+        startPositionY = event.canvasY;
+        currentLeakAreaY = viewContainer.leakAreaY;
+    });
+
+    g6Instance.on('canvas:drag', event => {
+        let zoom = g6Instance.getZoom(),
+            dy = (event.canvasY - startPositionY) / zoom,
+            leakAreaY = currentLeakAreaY + dy;
+
+        viewContainer.leakAreaY = leakAreaY;
+        if(viewContainer.hasLeak) {
+            EventBus.emit('onLeakAreaUpdate', { 
+                leakAreaY: viewContainer.leakAreaY, 
+                hasLeak: viewContainer.hasLeak 
+            });
+        }
+    });
+
+    g6Instance.on('canvas:dragend', event => {
+        startPositionY = 0;
+    })
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/BehaviorHelper/fixNodeMarkerDrag.ts

@@ -0,0 +1,116 @@
+import { Graph } from "@antv/g6-pc";
+import { SVNode } from "../Model/SVNode";
+import { LayoutGroupOptions } from "../options";
+
+
+/**
+ * 在初始化渲染器之后，修正节点拖拽时，外部指针没有跟着动的问题
+ * 
+ */
+export function FixNodeMarkerDrag(g6Instance: Graph, optionsTable: { [key: string]: LayoutGroupOptions }) {
+    let dragActive: boolean = false;
+
+    const nodeData = {
+        node: null,
+        startX: 0,
+        startY: 0
+    };
+
+    const markerData = {
+        marker: null,
+        startX: 0,
+        startY: 0
+    };
+
+    const freedLabelData = {
+        freedLabel: null,
+        startX: 0,
+        startY: 0
+    };
+
+    g6Instance.on('node:dragstart', event => {
+        nodeData.node = event.item['SVModel'];
+        let node: SVNode = nodeData.node;
+
+        if (node.isNode() === false || node.leaked) {
+            return false;
+        }
+
+        const dragNode = optionsTable[node.layout].behavior.dragNode;
+
+        if (dragNode === false) {
+            return;
+        }
+
+        if (Array.isArray(dragNode) && dragNode.find(item => item === node.sourceType) === undefined) {
+            return;
+        }
+
+        dragActive = true;
+        nodeData.startX = event.canvasX;
+        nodeData.startY = event.canvasY;
+
+        if (node.marker) {
+            markerData.marker = node.marker;
+            markerData.startX = markerData.marker.get('x');
+            markerData.startY = markerData.marker.get('y');
+        }
+
+        if(node.freedLabel) {
+            freedLabelData.freedLabel = node.freedLabel;
+            freedLabelData.startX = freedLabelData.freedLabel.get('x');
+            freedLabelData.startY = freedLabelData.freedLabel.get('y');
+        }
+    });
+
+    g6Instance.on('node:dragend', event => {
+        if(!dragActive) {
+            return false;
+        }
+
+        let distanceX = event.canvasX - nodeData.startX,
+            distanceY = event.canvasY - nodeData.startY,
+            nodeX = nodeData.node.get('x'),
+            nodeY = nodeData.node.get('y');
+
+        nodeData.node.set({
+            x: nodeX + distanceX,
+            y: nodeY + distanceY
+        });
+
+        nodeData.node = null;
+        nodeData.startX = 0;
+        nodeData.startY = 0;
+        markerData.marker = null;
+        markerData.startX = 0;
+        markerData.startY = 0;
+        freedLabelData.freedLabel = null;
+        freedLabelData.startX = 0;
+        freedLabelData.startY = 0;
+        dragActive = false;
+    });
+
+    g6Instance.on('node:drag', ev => {
+        if (!dragActive) {
+            return false;
+        }
+
+        let dx = ev.canvasX - nodeData.startX,
+            dy = ev.canvasY - nodeData.startY,
+            zoom = g6Instance.getZoom();
+
+        if(markerData.marker) {
+            markerData.marker.set({
+                x: markerData.startX + dx / zoom,
+                y: markerData.startY + dy / zoom
+            });
+        }
+
+        if(freedLabelData.freedLabel) {
+            freedLabelData.freedLabel.set({
+                x: freedLabelData.startX + dx / zoom,
+                y: freedLabelData.startY + dy / zoom
+            });
+        }
+    });
+}

src/BehaviorHelper/initViewBehaviors.ts

@@ -0,0 +1,78 @@
+import { SVModel } from "../Model/SVModel";
+import { LayoutGroupOptions } from "../options";
+
+
+
+/**
+ * 初始化g6 交互options
+ * @param optionsTable 
+ * @returns 
+ */
+export function InitViewBehaviors(optionsTable: { [key: string]: LayoutGroupOptions }) {
+    const dragNodeTable: { [key: string]: boolean | string[] } = {},
+        selectNodeTable: { [key: string]: boolean | string[] } = {},
+        defaultModes = [];
+
+    Object.keys(optionsTable).forEach(item => {
+        dragNodeTable[item] = optionsTable[item].behavior.dragNode;
+        selectNodeTable[item] = optionsTable[item].behavior.selectNode;
+    });
+
+    const dragNodeFilter = event => {
+        let g6Item = event.item,
+            node: SVModel = g6Item.SVModel;
+
+        if (g6Item === null || node.isNode() === false || node.leaked) {
+            return false;
+        }
+
+        let dragNode = optionsTable[node.layout].behavior.dragNode;
+
+        if (typeof dragNode === 'boolean') {
+            return dragNode;
+        }
+
+        if (Array.isArray(dragNode) && dragNode.indexOf(node.sourceType) > -1) {
+            return true;
+        }
+
+        return false;
+    }
+
+    const selectNodeFilter = event => {
+        let g6Item = event.item,
+            node: SVModel = g6Item.SVModel;
+
+        if (g6Item === null || node.isNode() === false || node.leaked) {
+            return false;
+        }
+
+        let selectNode = optionsTable[node.layout].behavior.selectNode;
+
+        if (typeof selectNode === 'boolean') {
+            return selectNode;
+        }
+
+        if (Array.isArray(selectNode) && selectNode.indexOf(node.sourceType) > -1) {
+            return true;
+        }
+
+        return false;
+    }
+
+    defaultModes.push({
+        type: 'drag-node',
+        shouldBegin: dragNodeFilter
+    });
+
+    defaultModes.push({
+        type: 'drag-canvas'
+    });
+
+    defaultModes.push({
+        type: 'click-select',
+        shouldBegin: selectNodeFilter
+    });
+
+    return defaultModes;
+}

src/BehaviorHelper/zoomCanavs.ts

@@ -0,0 +1,59 @@
+import { Graph, IGroup } from "@antv/g6-pc";
+import { ext } from '@antv/matrix-util';
+
+const transform = ext.transform;
+
+
+/**
+ * 初始化视图缩放功能
+ * @param g6Instance 
+ * @param generalModelsGroup 
+ */
+export function InitZoomCanvas(g6Instance: Graph, g6GeneralGroup: IGroup) {
+    const minZoom = 0.2,
+        maxZoom = 2,
+        step = 0.15;
+
+    g6Instance.on('wheel', event => {
+        let delta = event.wheelDelta,
+            matrix = g6GeneralGroup.getMatrix(),
+            center = [event.x, event.y],
+            targetScale = 1;
+
+        if (delta > 0) {
+            targetScale += step;
+        }
+
+        if (delta < 0) {
+            targetScale -= step;
+        }
+
+        matrix = transform(matrix, [
+            ['t', -center[0], -center[1]],
+            ['s', targetScale, targetScale],
+            ['t', center[0], center[1]],
+        ]);
+
+        if ((minZoom && matrix[0] < minZoom) || (maxZoom && matrix[0] > maxZoom)) {
+            return false;
+        }
+
+        g6GeneralGroup.setMatrix(matrix);
+        g6Instance.paint();
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+