什么是mode
在 AntV G6 中，“mode” 是用于配置图表交互模式的一种属性。通过设置 “mode”，可以控制图表的行为，以满足不同的交互需求。可能在不同的场景需要展现的交互行为不一样。比如查看模式下点击一个点就选中的状态，在编辑的情况下点击点可以出现编辑框，在创建边的情况下点击点就是创建一个边的起点。mode正是管理这些behavior的一种机制，一个图上可以存在多种交互模式，每个交互模式的behavior不一样。
配置 mode
在 AntV G6 中配置不同的 “mode” 可以通过在图表实例的配置中指定 “modes” 参数来实现。以下是一个示例，演示如何配置不同的 “mode”：
const graph = new G6.Graph({
container: 'your-container', // 指定容器
width: 800, // 指定宽度
height: 600, // 指定高度
modes: {
default: ['drag-node', 'zoom-canvas', 'drag-canvas'], // 默认模式下启用的交互模式
addEdge: ['create-edge', 'zoom-canvas', 'drag-canvas'], // 建模式
edit: ['click-select'], // 编辑模式
},
// 其他配置...
});
在上述示例中，创建了一个名为 “graph” 的 G6 图表实例，并在 “modes” 参数中配置了不同的模式。可以根据需要在不同的模式下启用或禁用不同的交互操作。每个模式的值是一个包含可用的交互模式的数组。
如何切换
- 使用
graph.setMode(modeName)方法：可以通过调用setMode方法来切换图表的模式。传递模式的名称作为参数，这将启用相应的交互模式。例如：
// 切换到默认模式
graph.setMode('default');
// 切换到编辑模式
graph.setMode('edit');
// 切换到建边模式
graph.setMode('addEdge');
可以根据用户的需求和操作来动态切换不同的模式，以提供不同的图表交互体验。
编辑已有的mode
g6也提供了removeBehaviors、addBehaviors、updateBehavior api来编辑mode，可以删除、添加、或修改某个mode中的交互行为。
// 向 default 模式中添加名为 drag-canvas 的行为，并使用行为的默认配置
graph.addBehaviors('drag-canvas', 'default');
// 从 default 模式中移除名为 drag-canvas 的行为
graph.removeBehaviors('drag-canvas', 'default');
// 向 edit 模式中添加名为 drag-canvas 的行为，并定义个性化配置
graph.addBehaviors(
{
type: 'drag-canvas',
direction: 'x',
},
'edit',
);
// 更新 'edit' 模式下的 behavior 'click-select'
graph.updateBehavior('click-select', { trigger: 'ctrl' }, 'edit');
示例
定义了三个模式，然后根据按钮点击切换不同的模式
- 默认模式下，可以拖拽图、拖拽点、缩放图。
- 编辑模式下就有个点击选中的效果。
- 创建边的模式，点击两个点创建新边。
代码如下：
import React, { useEffect, useRef } from "react";
import G6 from "@antv/g6";
import { Button } from "antd";
const TestModes: React.FC<any> = (props: any) => {
const containerRef = useRef<HTMLDivElement>(null);
const graphRef = useRef<any>();
useEffect(() => {
initDraw();
}, []);
const initDraw = () => {
graphRef.current = new G6.Graph({
linkCenter: true,
container: containerRef.current || "",
height: 800,
width: 800,
modes: {
default: ['drag-node', 'zoom-canvas', 'drag-canvas'], // 默认模式下启用的交互模式
addEdge: ['create-edge', 'zoom-canvas', 'drag-canvas'], // 建模式
edit: ['click-select'], // 编辑模式
},
defaultNode: {
size: 20,
style: {
fill: "#C6E5FF",
stroke: "#5B8FF9",
lineWidth: 0.3,
},
labelCfg: {
style: {
fontSize: 12,
},
position: "bottom",
offset: 1,
},
},
defaultEdge: {
style: {
lineWidth: 2,
color: "#000",
labelCfg: {
autoRotate: true,
refY: 5,
style: {
fill: "#000",
},
},
endArrow: {
fill: "#000",
path: G6.Arrow.triangle(10, 12, 25),
d: 25,
},
},
},
nodeStateStyles: {
// The node styles in selected state
selected: {
stroke: '#666',
lineWidth: 2,
fill: 'steelblue',
},
}
});
const data = {
nodes: [
{ id: "node1", x: 100, y: 100, label: "Node 1" },
{ id: "node2", x: 300, y: 100, label: "Node 2" },
{ id: "node3", x: 200, y: 200, label: "Node 3" },
],
edges: [{ source: "node1", target: "node2", label: "Edge 1" }],
};
// 渲染图表
graphRef.current.data(data);
graphRef.current.render();
graphRef.current.on('nodeselectchange', (e: any) => {
// 当前操作的 item
console.log(e.target);
// 当前操作后，所有被选中的 items 集合
console.log(e.selectedItems);
// 当前操作时选中(true)还是取消选中(false)
console.log(e.select);
});
};
return (
<>
<div>
<Button onClick={() => { graphRef.current.setMode('default') }}>默认模式</Button>
<Button onClick={() => { graphRef.current.setMode('edit') }}>编辑模式</Button>
<Button onClick={() => { graphRef.current.setMode('addEdge') }}>创建边</Button>
</div>
<div
className="ModalgraphContainer"
ref={containerRef}
id="graphContainer"
/>
</>
);
};
export default TestModes;
效果如下：
