mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 01:51:00 +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>
|