基于G6实现的流成工具
2020-10-20 本文已影响0人
zyghhhh
- 记录一下，原地址为https://www.jianshu.com/p/e28c70a3605c
- 代码：
- 效果： http://runjs.cn/detail/92edwvz9
- 下例代码中与原文相比砍掉了方向布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插件：统一分层布局</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
}
</style>
</head>
<body>
<div id="toolBar" style="position: absolute;z-index: 10">
<button id="addCircle">新增圆</button>
<button id="addRect">新增矩形</button>
<button id="delete">删除</button>
<button id="addCustom1">自定义形1</button>
<button id="addCustom2">自定义形2</button>
<button id="addCustom3">自定义形3</button>
<button id="addLine">添加直线</button>
<button id="addArrowLine">添加箭头直线</button>
<button id="addSmooth">添加曲线</button>
<button id="drag">拖拽模式</button>
<button id="edit">编辑模式</button>
<button id="consoleJSON">输出json</button>
<button id="downloadImage">保存图片</button>
<button id="reLayout">自动布局</button>
</div>
<div id="mountNode"></div>
</body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.5/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6-plugins/1.0.1/g6-plugins.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script type="text/javascript">
//保存为图片
$("#downloadImage").on('click', (bool) => {
const matrixStash = net.getMatrix(); // 缓存当前矩阵
if (bool) {
net.autoZoom(); // 图自动缩放以适应画布尺寸
}
html2canvas(net.get('graphContainer'), {
onrendered(canvas) {
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
const saveName = '图片' + ('.png' || 'graph.png');//<====选中模块名称
link.download = saveName;
link.href = dataURL.replace('image/png', 'image/octet-stream');
link.click();
net.updateMatrix(matrixStash); // 还原矩阵
net.refresh();
}
});
});
const plugin = new G6.Plugins['layout.dagre']();
const data = {
nodes: [
],
edges: [
]
};
const net = new G6.Net({
id: 'mountNode', // dom id
height: window.innerHeight, // 画布高
fitView: 'autoZoom',
grid: {//背景网格
forceAlign: true, // 是否支持网格对齐
cell: 10, // 网格大小
},
plugins: [plugin],
});
var i = 1;
$('#addCircle').on('click', () => {//添加圆形节点
net.add('node', {
shape: 'circle',
id: 'id' + i++,
x: 50 + i * 10,
y: 50 + i * 10
});
net.refresh();
});
$('#addRect').on('click', () => {//添加矩形
net.add('node', {
shape: 'rect',
id: 'id' + i++,
x: 50 + i * 10,
y: 50 + i * 10
});
net.refresh();
});
var Util = G6.Util;
var input = Util.createDOM('<input class="g6-label-input" />', {
position: 'absolute',
zIndex: 10,
display: 'none'
});
function hasClass(shape, className) {
if (shape) {
const clasees = shape.get('class');
if (clasees && clasees.indexOf(className) !== -1) {
return true;
}
}
return false;
}
function showInputLabel(node) {
if (!node) {
return;
}
const group = node.get('group');
const label = group.findBy(function (child) {
if (hasClass(child, 'label')) {
return true;
}
return false;
});
const rootGroup = net.get('rootGroup');
const bbox = Util.getBBox(label, rootGroup);
const borderWidth = 1;
const text = label.attr('text');
clearAllActived();
input.value = text;
input.show();
input.css({
top: bbox.minY - borderWidth + 'px',
left: bbox.minX - borderWidth + 'px',
width: bbox.width + 'px',
height: bbox.height + 'px',
padding: '0px',
margin: '0px',
border: borderWidth + 'px solid #999'
});
input.focus();
input.node = node;
}
function updateLabel() {
if (input.visibility) {
const node = input.node;
clearAllActived();
if (input.value !== node.get('model').name) {
if (input.value) {
net.update(node, {
label: input.value
});
}
}
input.hide();
}
}
function clearAllActived() {
net.clearAllActived();
net.refresh(false);
}
input.hide = function () {
input.css({
display: 'none'
});
input.visibility = false;
};
input.show = function () {
input.css({
display: 'block'
});
input.visibility = true;
};
input.on('keydown', ev => {
if (ev.keyCode === 13) {
updateLabel();
}
});
input.on('blur', () => {
updateLabel();
});
const graphContainer = net.get('graphContainer');//获取图表内部容器
graphContainer.appendChild(input);//追加input输入框
graphContainer.oncontextmenu = function (e) { return false; }//阻止默认右键菜单
net.on('contextmenu', ev => {// 鼠标右键点击事件
console.log("选中类型:", ev.itemType);
console.log(ev);
});
net.on('itemmouseenter', ev => {//子项鼠标悬浮
const item = ev.item;
net.update(item, {
color: 'red',
});
net.refresh();
});
net.on('itemmouseleave', ev => {//子项鼠标离开事件
const item = ev.item;
net.update(item, {
color: null
});
net.refresh();
});
net.on('itemmousedown', ev => {//子项鼠标按下
const item = ev.item;
net.update(item, {
color: '#9ef'
});
});
net.on('itemmouseup', ev => {//子项鼠标弹起
const item = ev.item;
net.update(item, {
color: 'null'
});
});
net.on('dragmove', () => {//拖拽隐藏
input.hide();
});
net.on('dblclick', ev => {//双击显示
const item = ev.item;
const shape = ev.shape;
if (hasClass(shape, 'label') && item && item.get('type') === 'node') {//节点的情况下
showInputLabel(item);
}
});
$('#delete').on('click', () => {//根据添加顺序删除
if (i > 1) {
i = i - 1;
const item = net.find('id' + i);
net.remove(item);
net.refresh();
}
});
G6.registerNode('customNode1', {
getAnchorPoints() {
return [
[0, 0.25],
[0, 0.5],
[0, 0.75],
[1, 0.25],
[1, 0.5],
[1, 0.75],
[0.25, 0],
[0.5, 0],
[0.75, 0],
[0.25, 1],
[0.5, 1],
[0.75, 1]
];
}
}, 'rect');
$('#addCustom1').on('click', () => {//添加自定义节点图形
net.beginAdd('node', {
label: '[未定义]',
shape: 'circle'
});
});
$('#addCustom2').on('click', () => {//添加自定义节点图形
net.beginAdd('node', { label: '[未定义]' });
});
$('#addCustom3').on('click', () => {//添加自定义节点图形
net.beginAdd('node', {
label: '[未定义]',
shape: 'customNode1'//<====
});
});
$('#addLine').on('click', () => {//添加普通直线
net.beginAdd('edge', {
shape: 'line'//<====
});
});
$('#addArrowLine').on('click', () => {//添加箭头直线
net.beginAdd('edge', {
shape: 'arrow'//<====
});
});
$('#addSmooth').on('click', () => {//添加曲线
net.beginAdd('edge', {
shape: 'smooth'//<====
});
});
$('#drag').on('click', () => {//拖拽模式
net.changeMode('drag');
});
$('#edit').on('click', () => {//编辑模式
net.changeMode('edit');
});
$('#consoleJSON').on('click', () => {//控制台输入json
const saveData = net.save();
const json = JSON.stringify(saveData, null, 2);
console.log(saveData, json); // eslint-disable-line no-console
});
net.source(data.nodes, data.edges);
net.tooltip({
title: '节点信息', // @type {String} 标题
split: ':', // @type {String} 分割符号
dx: 10, // @type {Number} 水平偏移
dy: 10 // @type {Number} 竖直偏移
});
net.node().tooltip(['id', 'label']);
net.edge().tooltip(['id']);
net.render();
$("#reLayout").on('click', () => {
var a = net.save();
net.changeData();
a.source.edges.forEach((v, i, a) => {
delete v.x;
delete v.y;
});
a.source.nodes.forEach((v, i, a) => {
delete v.x;
delete v.y;
});
net.source(a.source.nodes, a.source.edges);
net.render();
});
</script>
</html>
