mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
108 lines
2.9 KiB
HTML
108 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>交互-模式与行为</title>
|
||
</head>
|
||
|
||
<body>
|
||
<button id="changeMode">切换模式</button>
|
||
<div id="mountNode"></div>
|
||
说明：事件在 G6 中是粒度最小的交互接口，一般最简单的交互，我们可以直接通过写事件完成。但在一些交互非常复杂的场景里，我们往往比较难管理各个事件之间信号量的传递。针对复杂交互的场景，G6 总结了一套行为模式的解决方案。
|
||
</br>
|
||
</br>
|
||
这套方案简单介绍就是：事件组成行为，行为构成模式。我们可以通过事件实现任何粒度的交互组成行为，再通过不同行为的组合，得出模式。通过模式的切换，我们可以将不同的交互很轻易分离开来，从而规避大量信号量的传递。
|
||
<script src="../build/g6.js"></script>
|
||
<script>
|
||
// 注册鼠标进入节点变红的行为
|
||
G6.registerBehaviour('mouseEnterFillRed', graph => {
|
||
graph.behaviourOn('node:mouseenter', ev => {
|
||
graph.update(ev.item, {
|
||
color: 'red'
|
||
});
|
||
});
|
||
});
|
||
|
||
// 注册鼠标进入节点变绿的行为
|
||
G6.registerBehaviour('mouseEnterFillGreen', graph => {
|
||
graph.behaviourOn('node:mouseenter', ev => {
|
||
graph.update(ev.item, {
|
||
color: 'green'
|
||
});
|
||
});
|
||
});
|
||
|
||
// 注册鼠标移出节点变原色的行为
|
||
G6.registerBehaviour('mouseLeaveResetFill', graph => {
|
||
graph.behaviourOn('node:mouseleave', ev => {
|
||
graph.update(ev.item, {
|
||
color: '#1890FF'
|
||
});
|
||
});
|
||
});
|
||
const data = {
|
||
nodes: [{
|
||
id: '事件',
|
||
x: 80,
|
||
y: 150,
|
||
}, {
|
||
id: '行为',
|
||
x: 200,
|
||
y: 150
|
||
}, {
|
||
id: '模式',
|
||
x: 320,
|
||
y: 150
|
||
}],
|
||
edges: [{
|
||
source: '事件',
|
||
target: '行为',
|
||
label: '组成'
|
||
}, {
|
||
source: '行为',
|
||
target: '模式',
|
||
label: '组成'
|
||
}]
|
||
};
|
||
let mode = 'red';
|
||
const graph = new G6.Graph({
|
||
container: 'mountNode',
|
||
fitView: 'cc',
|
||
height: window.innerHeight,
|
||
modes: {
|
||
red: ['mouseEnterFillRed', 'mouseLeaveResetFill'],
|
||
green: ['mouseEnterFillGreen', 'mouseLeaveResetFill']
|
||
},
|
||
mode,
|
||
});
|
||
graph.node({
|
||
label(model) {
|
||
return model.id;
|
||
}
|
||
});
|
||
graph.edge({
|
||
style() {
|
||
return {
|
||
endArrow: true
|
||
};
|
||
}
|
||
});
|
||
graph.read(data);
|
||
|
||
// 点击按钮切换模式
|
||
document.getElementById('changeMode').onclick = () => {
|
||
if (mode === 'red') {
|
||
graph.changeMode('green');
|
||
mode = 'green';
|
||
} else {
|
||
graph.changeMode('red');
|
||
mode = 'red';
|
||
}
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|