沒(méi)看過(guò)(一)的選手請(qǐng)點(diǎn)我
本期內(nèi)容將實(shí)現(xiàn)下圖所示.
教程1講解節(jié)點(diǎn)實(shí)現(xiàn), 節(jié)點(diǎn)連線實(shí)現(xiàn), 節(jié)點(diǎn)拖動(dòng)模擬,連線拖動(dòng)模擬
教程2講解右鍵菜單,節(jié)點(diǎn)增刪,連線增刪,閉環(huán)校驗(yàn).
教程3預(yù)計(jì)實(shí)現(xiàn)繪圖板放縮,重定位,橡皮筋選框,或者別的什么歡迎留言
配套閱讀:https://murongqimiao.github.io/DAG-diagram/#/example
現(xiàn)教程已更新, 最新內(nèi)容不再分step
六旷档、節(jié)點(diǎn)拖拽添加的實(shí)現(xiàn)
面向過(guò)程來(lái)看, 節(jié)點(diǎn)拖動(dòng)無(wú)非3個(gè)操作,
·拖動(dòng)前
判斷當(dāng)前情況下能否拖動(dòng), 拖動(dòng)的元素?cái)y帶的節(jié)點(diǎn)類(lèi)型,節(jié)點(diǎn)名稱(chēng)等參數(shù)·拖動(dòng)中
模擬的節(jié)點(diǎn)隨鼠標(biāo)進(jìn)行位移,將參數(shù)賦值給模擬的節(jié)點(diǎn)·拖動(dòng)停止
判斷松手位置是否在畫(huà)板中, ( 更改模型數(shù)據(jù) | 調(diào)用后臺(tái)接口 )所以我們需要一個(gè)能夠全屏移動(dòng)的模擬元素
如圖 class='nodesBus-contain'
<nodes-bus v-if="dragBus" :value="busValue.value" :pos_x="busValue.pos_x" :pos_y="busValue.pos_y" />
這個(gè)元素在全局dom中位置僅次于最大容器,接收坐標(biāo)位置和展示名稱(chēng).
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個(gè)事件, mouseDown, mouseMove, mouseUp
<span @mousedown="dragIt('拖動(dòng)1')">拖動(dòng)我吧1</span>
<span @mousedown="dragIt('拖動(dòng)2')">拖動(dòng)我吧2</span>
dragIt(val) {
sessionStorage["dragDes"] = JSON.stringify({
drag: true,
name: val
});
}
需要點(diǎn)擊觸發(fā)拖動(dòng)的元素使用緩存來(lái)傳遞數(shù)據(jù),控制模擬節(jié)點(diǎn).
startNodesBus(e) {
/**
* 別的組件調(diào)用時(shí), 先放入緩存
* dragDes: {
* drag: true,
* name: 組件名稱(chēng)
* type: 組件類(lèi)型
* model_id: 跟后臺(tái)交互使用
* }
**/
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;
}
}
冒泡到最上層組件時(shí)觸發(fā)容器的mouseUp事件, 使模擬的節(jié)點(diǎn)展示,并賦值需要的參數(shù).使用緩存來(lái)控制行為,是為了防止別的無(wú)關(guān)元素干擾.
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
});
}
},
移動(dòng)中的行為很簡(jiǎn)單,只需要?jiǎng)討B(tài)將鼠標(biāo)的頁(yè)面位置賦值進(jìn)入即可.
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; // 參數(shù)修正
const pos_y = e.offsetY - 15; // 參數(shù)修正
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時(shí)的鼠標(biāo)位置, 矯正之后更改模型數(shù)據(jù)即可,
這里調(diào)用的this.addNode(params)來(lái)自于vue-x, 在文末會(huì)對(duì)vue-x進(jìn)行統(tǒng)一講解.
七、節(jié)點(diǎn)的刪除
刪除節(jié)點(diǎn)使用右鍵調(diào)出選項(xiàng)框,這里我們可以監(jiān)聽(tīng)元素的右鍵行為,并禁掉所有默認(rèn)行為.
<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) { // 節(jié)點(diǎn)的右鍵事件
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()是坐標(biāo)矯正,具體去看gitHub看step6的代碼吧...
然后講操作的節(jié)點(diǎn)id和鼠標(biāo)位置傳給選項(xiàng)模擬組件nodesBus.vue
以保證選項(xiàng)框出現(xiàn)在合適位置.
這里還有一個(gè)坑, 我們要保證點(diǎn)擊其他位置可以關(guān)閉模態(tài)框,所以需要加一層遮罩,在這里筆者取了個(gè)巧,并沒(méi)有加一層cover div
<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">刪除節(jié)點(diǎn)</span>
<span>編輯</span>
<span>干點(diǎn)別的啥</span>
</div>
</body>
</foreignObject>
-------------------------------------------------
click_menu_cover(e) {
this.$emit('close_click_nodes')
e.preventDefault();
e.cancelBubble = true;
e.stopPropagation();
},
直接在組件內(nèi)部攔截mouseDown 關(guān)閉彈框即可.
let params = {
model_id: sessionStorage['newGraph'],
id: this.isEditAreaShow.id
}
this.delNode(params)
model_id是本項(xiàng)目跟后臺(tái)交互的參數(shù)請(qǐng)無(wú)視
拿到id直接調(diào)用vue-x的delNode即可
八垛玻、 連線的刪除
連線的刪除與節(jié)點(diǎn)刪除基本一致,合并在下文的vue-x中講解.
九斥黑、 vue-x在項(xiàng)目中的使用
為了組件分的更加細(xì)致,方便組件間的數(shù)據(jù)共享,引入vue-x作為本項(xiàng)目的數(shù)據(jù)承接.多組件共同使用dagStore.js的DataAll,
addEdge: ({ commit }, { desp }) => { // 增加邊
commit('ADD_EDGE_DATA', desp)
},
delEdge: ({ commit }, { id }) => { // 刪除邊
commit('DEL_EDGE_DATA', id)
},
moveNode: ({ commit }, params) => { // 移動(dòng)點(diǎn)的位置
commit('MOVE_NODE_DATA', params)
},
addNode: ({ commit }, params) => { // 增加節(jié)點(diǎn)
commit('ADD_NODE_DATA', params)
},
delNode: ({ commit }, { id }) => { // 刪除節(jié)點(diǎn)
commit('DEL_NODE_DATA', id)
},
state的數(shù)據(jù)結(jié)構(gòu)為
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]
})
}
節(jié)點(diǎn)新增
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
}
節(jié)點(diǎn)刪除
DEL_EDGE_DATA: (state, id) => {
let _edges = []
state.DataAll.edges.forEach((item, i) => {
if (item.id !== id) {
_edges.push(item)
}
})
state.DataAll.edges = _edges
},
節(jié)點(diǎn)間連線的清除
ADD_EDGE_DATA: (state, desp) => {
let _DataAll = state.DataAll
_DataAll.edges.push({
...desp,
id: state.DataAll.edges.length + 10
})
/**
* 檢測(cè)是否成環(huán)
**/
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('目標(biāo)節(jié)點(diǎn)是', item.src_node_id, '次數(shù)為', nth)
checkCircle(item.dst_node_id, ++nth)
}
})
}
}
checkCircle(dst_node_id, 1)
if (isCircle) {
_DataAll.edges.pop()
alert('禁止成環(huán)')
}
}
上面的代碼為節(jié)點(diǎn)的增加,其中添加了一個(gè)是否成環(huán)的檢測(cè),
不斷遞歸節(jié)點(diǎn), 從目標(biāo)節(jié)點(diǎn)身上尋找節(jié)點(diǎn)路徑,如果循環(huán)次數(shù)超過(guò)節(jié)點(diǎn)總數(shù), 則證明出現(xiàn)了環(huán),取消操作.
十槽华、模型類(lèi)項(xiàng)目與后臺(tái)的交互.
現(xiàn)在的代碼都是從項(xiàng)目中摳出來(lái)的,實(shí)際上在真實(shí)項(xiàng)目里,節(jié)點(diǎn)與連線的每一步增刪改查是不需要前端模擬的,包括是否成環(huán)檢測(cè),只需要操作步驟完成,接口返回完整的數(shù)據(jù)結(jié)構(gòu)即可.
第二期到這里,已經(jīng)完成所有DAG的基本操作,如果有不清楚的同學(xué)歡迎到gayhub加我微信,在工作之外的時(shí)間溝通.
祝大家1024節(jié)日快樂(lè).(#^_^#)
