本期內容將實現下圖所示.
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節日快樂.(#^_^#)
