本期内容将实现下图所示.
ezgif-5-8fc12d4696b4.gif
教程1讲解节点实现, 节点连线实现, 节点拖动模拟,连线拖动模拟
教程2讲解右键菜单,节点增删,连线增删,闭环校验.
教程3预计实现绘图板放缩,重定位,橡皮筋选框,或者别的什么欢迎留言
配套阅读:https://murongqimiao.github.io/DAG-diagram/#/example
现教程已更新, 最新内容不再分step
六、节点拖拽添加的实现
节点拖动说明.png
面向过程来看, 节点拖动无非3个操作,
·拖动前
判断当前情况下能否拖动, 拖动的元素携带的节点类型,节点名称等参数·拖动中
模拟的节点随鼠标进行位移,将参数赋值给模拟的节点·拖动停止
判断松手位置是否在画板中, ( 更改模型数据 | 调用后台接口 )所以我们需要一个能够全屏移动的模拟元素
如图 class='nodesBus-contain'
<nodes-bus v-if="dragBus" :value="busValue.value" :pos_x="busValue.pos_x" :pos_y="busValue.pos_y" />
这个元素在全局dom中位置仅次于最大容器,接收坐标位置和展示名称.
dragBus: false,
busValue: {
value: "name",
pos_x: 100,
pos_y: 100
}
最外层组件使用dragBus控制是否展示和位置等.
<div class="page-content" @mousedown="startNodesBus($event)" @mousemove="moveNodesBus($event)" @mouseup="endNodesBus($event)">
外层容器3个事件, mouseDown, mouseMove, mouseUp
<span @mousedown="dragIt('拖动1')">拖动我吧1</span>
<span @mousedown="dragIt('拖动2')">拖动我吧2</span>
dragIt(val) {
sessionStorage["dragDes"] = JSON.stringify({
drag: true,
name: val
});
}
需要点击触发拖动的元素使用缓存来传递数据,控制模拟节点.
startNodesBus(e) {
/**
* 别的组件调用时, 先放入缓存
* dragDes: {
* drag: true,
* name: 组件名称
* type: 组件类型
* model_id: 跟后台交互使用
* }
**/
let dragDes = null;
if (sessionStorage["dragDes"]) {
dragDes = JSON.parse(sessionStorage["dragDes"])
}
if (dragDes && dragDes.drag) {
const x = e.pageX;
const y = e.pageY;
this.busValue = Object.assign({}, this.busValue, {
pos_x: x,
pos_y: y,
value: dragDes.name
});
this.dragBus = true;
}
}
冒泡到最上层组件时触发容器的mouseUp事件, 使模拟的节点展示,并赋值需要的参数.使用缓存来控制行为,是为了防止别的无关元素干扰.
moveNodesBus(e) {
if (this.dragBus) {
const x = e.pageX;
const y = e.pageY;
this.busValue = Object.assign({}, this.busValue, {
pos_x: x,
pos_y: y
});
}
},
移动中的行为很简单,只需要动态将鼠标的页面位置赋值进入即可.
endNodesBus(e) {
let dragDes = null;
if (sessionStorage["dragDes"]) {
dragDes = JSON.parse(sessionStorage["dragDes"])
}
if (dragDes && dragDes.drag && e.toElement.id === "svgContent") {
const { model_id, type } = dragDes;
const pos_x = e.offsetX - 90; // 参数修正
const pos_y = e.offsetY - 15; // 参数修正
const params = {
model_id: sessionStorage["newGraph"],
desp: {
type,
pos_x,
pos_y,
name: this.busValue.value
}
};
this.addNode(params);
}
window.sessionStorage["dragDes"] = null;
this.dragBus = false;
}
取出mouseUp时的鼠标位置, 矫正之后更改模型数据即可,
这里调用的this.addNode(params)来自于vue-x, 在文末会对vue-x进行统一讲解.
七、节点的删除
删除节点的选项框.png
删除节点使用右键调出选项框,这里我们可以监听元素的右键行为,并禁掉所有默认行为.
<g
v-for="(item, i) in DataAll.nodes"
:key="'_' + i" class="svgEach"
:transform="`translate(${item.pos_x}, ${item.pos_y})`"
@contextmenu="r_click_nodes($event, i)">
---------------------------------------------------------------------------
r_click_nodes(e, i) { // 节点的右键事件
this.setInitRect()
const id = this.DataAll.nodes[i].id;
const x = e.x - this.initPos.left;
const y = e.y - this.initPos.top;
this.is_edit_area = {
value: true,
x,
y,
id
}
e.stopPropagation();
e.cancelBubble = true;
e.preventDefault();
}
这里setInitRect()是坐标矫正,具体去看gitHub看step6的代码吧...
然后讲操作的节点id和鼠标位置传给选项模拟组件nodesBus.vue
以保证选项框出现在合适位置.
这里还有一个坑, 我们要保证点击其他位置可以关闭模态框,所以需要加一层遮罩,在这里笔者取了个巧,并没有加一层cover div
遮罩.png
<foreignObject width="100%" height="100%" style="position: relative" @click="click_menu_cover($event)">
<body xmlns="http://www.w3.org/1999/xhtml" :style="get_menu_style()">
<div class="menu_contain">
<span @click="delEdges">删除节点</span>
<span>编辑</span>
<span>干点别的啥</span>
</div>
</body>
</foreignObject>
-------------------------------------------------
click_menu_cover(e) {
this.$emit('close_click_nodes')
e.preventDefault();
e.cancelBubble = true;
e.stopPropagation();
},
直接在组件内部拦截mouseDown 关闭弹框即可.
let params = {
model_id: sessionStorage['newGraph'],
id: this.isEditAreaShow.id
}
this.delNode(params)
model_id是本项目跟后台交互的参数请无视
拿到id直接调用vue-x的delNode即可
八、 连线的删除
连线的删除与节点删除基本一致,合并在下文的vue-x中讲解.
九、 vue-x在项目中的使用
WX20181024-182629.png
为了组件分的更加细致,方便组件间的数据共享,引入vue-x作为本项目的数据承接.多组件共同使用dagStore.js的DataAll,
addEdge: ({ commit }, { desp }) => { // 增加边
commit('ADD_EDGE_DATA', desp)
},
delEdge: ({ commit }, { id }) => { // 删除边
commit('DEL_EDGE_DATA', id)
},
moveNode: ({ commit }, params) => { // 移动点的位置
commit('MOVE_NODE_DATA', params)
},
addNode: ({ commit }, params) => { // 增加节点
commit('ADD_NODE_DATA', params)
},
delNode: ({ commit }, { id }) => { // 删除节点
commit('DEL_NODE_DATA', id)
},
state的数据结构为
DataAll: {
nodes: [{
name: "name5",
id: 1,
imgContent: "",
pos_x: 100,
pos_y: 230,
type: "constant",
in_ports: [0, 1, 2],
out_ports: [0, 1, 2, 3, 4]
}],
edges: [{
id: 1,
dst_input_idx: 1,
dst_node_id: 1,
src_node_id: 2,
src_output_idx: 2
}],
model_id: 21
}
所有操作只更改state中的DataAll即可.
ADD_NODE_DATA: (state, params) => {
let _nodes = state.DataAll.nodes
_nodes.push({
...params.desp,
id: state.DataAll.nodes.length + 10,
in_ports: [0, 1, 2, 3, 4],
out_ports: [0, 1, 2, 3, 4]
})
}
节点新增
DEL_NODE_DATA: (state, id) => {
let _edges = []
let _nodes = []
state.DataAll.edges.forEach(item => {
if (item.dst_node_id !== id && item.src_node_id !== id) {
_edges.push(item)
}
})
state.DataAll.nodes.forEach(item => {
if (item.id !== id) {
_nodes.push(item)
}
})
state.DataAll.edges = _edges
state.DataAll.nodes = _nodes
}
节点删除
DEL_EDGE_DATA: (state, id) => {
let _edges = []
state.DataAll.edges.forEach((item, i) => {
if (item.id !== id) {
_edges.push(item)
}
})
state.DataAll.edges = _edges
},
节点间连线的清除
ADD_EDGE_DATA: (state, desp) => {
let _DataAll = state.DataAll
_DataAll.edges.push({
...desp,
id: state.DataAll.edges.length + 10
})
/**
* 检测是否成环
**/
let isCircle = false
const { dst_node_id } = desp // 出口 入口id
const checkCircle = (dst_node_id, nth) => {
if (nth > _DataAll.nodes.length) {
isCircle = true
return false
} else {
_DataAll.edges.forEach(item => {
if (item.src_node_id === dst_node_id) {
console.log('目标节点是', item.src_node_id, '次数为', nth)
checkCircle(item.dst_node_id, ++nth)
}
})
}
}
checkCircle(dst_node_id, 1)
if (isCircle) {
_DataAll.edges.pop()
alert('禁止成环')
}
}
上面的代码为节点的增加,其中添加了一个是否成环的检测,
不断递归节点, 从目标节点身上寻找节点路径,如果循环次数超过节点总数, 则证明出现了环,取消操作.
十、模型类项目与后台的交互.
现在的代码都是从项目中抠出来的,实际上在真实项目里,节点与连线的每一步增删改查是不需要前端模拟的,包括是否成环检测,只需要操作步骤完成,接口返回完整的数据结构即可.
第二期到这里,已经完成所有DAG的基本操作,如果有不清楚的同学欢迎到gayhub加我微信,在工作之外的时间沟通.
祝大家1024节日快乐.(#^_^#)
