对于AntV的G6流程图的操作记录文档

对于AntV的G6流程图的操作记录文档

需求：添加流程图

安装G6

​ npm install –save @antv/g6

使用 在需要用的 G6 的 JS 文件中导入：

​ import G6 from ‘@antv/g6’;

开始：

创建容器

<div id="mountNode"></div>

准备数据

export default {
    data() {
        return {
            graph：null,
            chartData: {
                // 点集
                nodes: [
                    {
                        id: "node1", // String，该节点存在则必须，节点的唯一标识
                        type: "ellipse", //图形状
                        x: 100, // Number，可选，节点位置的 x 值
                        y: 200, // Number，可选，节点位置的 y 值
                    },
                    {
                        id: "node2", // String，该节点存在则必须，节点的唯一标识
                        x: 300, // Number，可选，节点位置的 x 值
                        y: 200, // Number，可选，节点位置的 y 值
                    },
                ],
                // 边集
                edges: [
                    {
                        source: "node1", // String，必须，起始点 id
                        target: "node2", // String，必须，目标点 id
                    },
                ],
            },
        }
    }

初始化流程图

initG6() {
    this.graph = new G6.Graph({
        container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: 400, // Number，必须，图的宽度
        height: 400, // Number，必须，图的高度
        fitView: true, //自适应
        fitViewPadding: [20, 40, 50, 20], //四周留白
        modes: { //设置画布的操作，这样可以对画布进行拖拽阿~缩放阿~节点拖拽阿~，具体有哪些查看g6官网文档
            default: ["drag-canvas", "zoom-canvas", "drag-node"], // 允许拖拽画布、放缩画布、拖拽节点
        },
        // 布局~
        //...
    });
    this.graph.data(this.chartData); // 读取 Step 2 中的数据源到图上
    this.graph.render(); // 渲染图
},

//在mounted（）中调用
this.initG6();
//这样界面上就有图啦，还能拖拽

问题一：代码环境~

在自己写的可视化编辑器中，需要添加流程图组件，添加流程图框的效，并且各个流程图的节点可以拖拽连接线等

而在流程图组件外使用vue插槽solt中往canvas画布插入组件。

在canvas外部有@mousedown事件（拖拽事件）

所以这个时候G6自己的拖拽就会无法使用的问题。

解决：

在

<div id="mountNode"></div>

中添加一个父级Div，并也添加@mousedown事件

<div @mousedown="handleMousedownOnShape">
    <div id="mountNode"></div>
</div>

在handleMousedownOnShape使用stopPropagation来阻止事件的传播到父级

handleMousedownOnShape(e) {
    e.stopPropagation(); // 阻止事件继续传播
},

这样的话就基本完成啦可以拖动G6啦

但是！！！问题又来了，这时候父Div的mousedown方法就实现了，你再也拖动不了整个组件了！！！

解决方式：

第一个：找个父节点中不包含G6的进行拖放

第二个：

​ 在G6中添加一个按钮，来对

handleMousedownOnShape(e) {
    e.stopPropagation(); // 阻止事件继续传播
},

进行判断~

结果如下：

handleMousedownOnShape(e) {
   if (this.canDrag) {  // canDrag是按钮点击后可以进行判断现在是拖动G6内的图像还是整个流程图节点
    	e.stopPropagation(); // 阻止事件继续传播*
   }
},