推荐阅读: 没做过流程图可视化,又突然接到神奇需求的选手~
最近公司需要做一个内部使用的机器学习平台,
看了一下需求,有类似单向无环图的内容
img1.jpg
参考了一下国内外大厂的成品,
自己尝试做了一下,
教程1讲解节点实现, 节点连线实现, 节点拖动模拟,连线拖动模拟教程2预计实现右键菜单,节点增删,连线增删.教程3预计实现绘图板放缩,重定位,橡皮筋选框,最后给出完成代码.教程一实现结果图:
一期模拟.gif
点击蓝字跳转github地址''https://github.com/murongqimiao/DAGBoard
现在教程已更新到新版, 完整demo点我
一、节点的实现
灵魂绘图师上线 ~~~因为svg的事件操作比canvas的事件实现起来更直观、简洁,所以整体使用了svg,
{
name: "name1",
description: "description1",
id: 1,
parentNode: 0,
childNode: 2,
imgContent: "",
parentDetails: {
a: "",
b: ""
},
linkTo: [{ id: 2 }, { id: 3 }],
translate: {
left: 100,
top: 20
}
}
此为初版的节点数据结构, 利用translate定位每个节点的位置.step5后替换为
{
name: "name2",
id: 2,
imgContent: "",
pos_x: 300,
pos_y: 400,
type: 'constant',
in_ports: [0, 1, 2, 3, 4],
out_ports: [0, 1, 2, 3, 4]
}
二、节点连线的实现
节点间的连接线.png
<path
class="connector"
v-for="(each, n) in item.linkTo" :key="n"
:d="computedLink(i, each, n)"></path>
基于vue实现所以直接用了:d 动态计算贝塞尔曲线,
点击->关于贝塞尔曲线可参考https://brucewar.gitbooks.io/svg-tutorial/15.SVG-path%E5%85%83%E7%B4%A0.html
三、节点拖拽的实现
具体建议在github clone一下代码查看, 注释非常详细.
dragPre(e, i) {
// 准备拖动节点
this.setInitRect(); // 初始化画板坐标
this.currentEvent = "dragPane"; // 修正行为
this.choice.index = i;
this.setDragFramePosition(e);
},
mousedown时获取拖拽元素的下标,修正坐标
<g
:transform="`translate(${dragFrame.posX}, ${dragFrame.posY})`"
class="dragFrame">
<foreignObject width="180" height="30" >
<body xmlns="http://www.w3.org/1999/xhtml">
<div
v-show="currentEvent === 'dragPane'"
class="dragFrameArea">
</div>
</body>
</foreignObject>
</g>
dragIng(e) {
if (this.currentEvent === "dragPane") {
this.setDragFramePosition(e);
// 模拟框随动
}
},
setDragFramePosition(e) {
const x = e.x - this.initPos.left; // 修正拖动元素坐标
const y = e.y - this.initPos.top;
this.dragFrame = { posX: x - 90, posY: y - 15 };
}
拖动时给模拟拖动的元素赋值位置
dragEnd(e) {
// 拖动结束
if (this.currentEvent === "dragPane") {
this.dragFrame = { dragFrame: false, posX: 0, posY: 0 };
this.setPanePosition(e); // 设定拖动后的位置
}
this.currentEvent = null; // 清空事件行为
},
setPanePosition(e) {
const x = e.x - this.initPos.left - 90;
const y = e.y - this.initPos.top - 15;
const i = this.choice.index;
this.DataAll[i].translate = { left: x, top: y };
},
拖动结束把新的位置赋值给对应元素
当然在实际项目中, 每次变更需要跟后台交互这些数据, 不需要前端模拟数据变更的,直接请求整张图的接口重新渲染就好了,更easy
四、节点连线拖拽的实现
和step3类似,在step4中我们也是通过监听mousedown mousemove 与 mouseup这些事件.来实现节点间连线的拖拽效果.
<g>
<path
class="connector"
:d="dragLinkPath()"
></path>
</g>
首先来个path
setInitRect() {
let { left, top } = document
.getElementById("svgContent")
.getBoundingClientRect();
this.initPos = { left, top }; // 修正坐标
},
linkPre(e, i) {
this.setInitRect();
this.currentEvent = "dragLink";
this.choice.index = i;
this.setDragLinkPostion(e, true);
e.preventDefault();
e.stopPropagation();
},
mousedown修正坐标
dragIng(e) {
if (this.currentEvent === "dragLink") {
this.setDragLinkPostion(e);
}
},
mousemove的时候确定位置
linkEnd(e, i) {
if (this.currentEvent === "dragLink") {
this.DataAll[this.choice.index].linkTo.push({ id: i });
this.DataAll.find(item => item.id === i).parentNode = 1;
}
this.currentEvent = null;
},
setDragLinkPostion(e, init) {
// 定位连线
const x = e.x - this.initPos.left;
const y = e.y - this.initPos.top;
if (init) {
this.dragLink = Object.assign({}, this.dragLink, {
fromX: x,
fromY: y
});
}
this.dragLink = Object.assign({}, this.dragLink, { toX: x, toY: y });
},
mouseup的时候判断连入了哪个元素
五、整合以上步骤, 组件抽离
随着内容的增多,我们需要把所有内容整合, 基于耦合内容对组件进行分割,具体可看目录结构
step目录结构.png
所有的连线变成arrow组件,只继承坐标位置用以渲染simulateFrame和simulateArrow只动态继承拖拽时的坐标,用以模拟拖拽效果
