jsPlumb之流程圖項目總結及實例

this.insert=function(e,key){
function add(obj,e){
if(obj.id == e.parentId){
obj.children.push(e);
} else {
for (var i = 0; i < obj.children.length; i++) { add(obj.children[i], e); } } } if (e != undefined) { e = new this.Node(e); } else { return; } if (this.root == null) { this.root = e; } else { OBJ = this.root; add(OBJ, e); } } this.init = function(data){ var _this = this; for(var i = 0;i

將一層的數組通過初始化函數init,就可以轉為多層級

如果想轉成html結構,只需要稍微改下函數,就可以實現了.

這個就完全得靠演算法來實現了.首先,對於圖的理解是重點

我也懶得打字了,直接用圖表示一下,基本的圖大致是這樣,而具體的表現形式則是

可以看到,基礎的圖的表現形式,可以用一個鄰接表來表示;

而實現,則可以看到下列的代碼:

function Graph1(v) {
this.vertices = v; // 總頂點
this.edges = 0; // 圖的邊數
this.adj = ;

// 通過 for 循環為數組中的每個元素添加一個子數組來存儲所有的相鄰頂點，[並將所有元素初始化為空字元串。]?
for (var i = 0; i < this.vertices; ++i) { this.adj[i] = ; } /** * 當調用這個函數並傳入頂點 v 和 w 時，函數會先查找頂點 v 的鄰接表，將頂點 w 添加到列表中 * 然後再查找頂點 w 的鄰接表，將頂點 v 加入列表。最後，這個函數會將邊數加 1。 * @param {[type]} v [第一個頂點] * @param {[type]} w [第二個頂點] */ this.addEdge = function(v, w) { this.adj[v].push(w); this.adj[w].push(v); this.edges++; } /** * 列印所有頂點的關係簡單表現形式 * @return {[type]} [description] */ this.showGraph = function { for (var i = 0; i < this.vertices; ++i) { var str = i + " ->";
for (var j = 0; j < this.vertices; ++j) { if (this.adj[i][j] != undefined) { str += this.adj[i][j] + " " } } console.log("表現形式為：" + str); } console.log(this.adj); } }

而光構建是不夠的,所以來看下基礎的搜索方法: 深度優先搜索和廣度優先搜索;

先從初始節點開始訪問,並標記為已訪問過的狀態,再遞歸的去訪問在初始節點的鄰接表中其他沒有訪問過的節點,依次之後,就能訪問過所有的節點了

/**
* 深度優先搜索演算法
* 這裡不需要頂點，也就是鄰接表的初始點
*/
this.dfs = (v) {
this.marked[v] = true;
for (var w of this.adj[v]) {
if (!this.marked[w]) {
this.dfs(w);
}
}
}

根據圖片和上述的代碼,可以看出深度搜索其實可以做很多其他的擴展

/**
* 廣度優先搜索演算法
* @param {[type]} s [description]
*/
this.bfs = function(s) {
var queue = ;
this.marked[s] = true;
queue.push(s); // 添加到隊尾
while (queue.length > 0) {
var v = queue.shift; // 從隊首移除
console.log("Visisted vertex: " + v);
for (var w of this.adj[v]) {
if (!this.marked[w]) {
this.edgeTo[w] = v;
this.marked[w] = true;
queue.push(w);
}
}
}
}

而如果看了《數據結構與演算法JavaScript描述》這本書,有興趣的可以去實現下查找最短路徑和拓撲排序;

這算是找到的比較能理解的方式來計算

以上圖為例,這是一個簡單的流程圖,可以很簡單的看出,右邊的流程實際上是未完成的,因為無法到達終點,所以是一個非法點,而通過上面的深度搜索,可以看出,只要對深度優先搜索演算法進行一定的修改,那麼就可以找到從開始到結束的所有的路徑,再通過對比,就可以知道哪些點無法到達終點,從而確定非法點. 上代碼:

/**
* 深度搜索,dfs,解兩點之間所有路徑
* @param {[type]} v [description]
* @return {[type]} [description]
*/
function Graph2(v) {
var _this = this;

for (var i = 0; i < this.vertices; ++i) { _this.adj[i] = ; } /** * 初始化訪問狀態 * @return {[type]} [description] */ this.initMarked = function { for (var i = 0; i < _this.vertices; ++i) { _this.marked[i] = false; } }; /** * 在鄰接表中增加節點 * @param {[type]} v [description] * @param {[type]} w [description] */ this.addEdge = function(v, w) { this.adj[v].push(w); this.edges++; }; /** * 返回生成的鄰接表 * @return {[type]} [description] */ this.showGraph = function { return this.adj; }; /** * 深度搜索演算法 * @param {[type]} v [起點] * @param {[type]} d [終點] * @param {[type]} path [路徑] * @return {[type]} [description] */ this.dfs = function(v, d, path) { var _this = this; this.marked[v] = true; path.push(v); if (v == d) { var arr = ; for (var i = 0; i < path.length; i++) { arr.push(path[i]); } _this.lines.push(arr); } else { for (var w of this.adj[v]) { if (!this.marked[w]) { this.dfs(w, d, path); } } } path.pop; this.marked[v] = false; }; this.verify = function(arr, start, end) { this.initMarked; for (var i = 0; i < arr.length; i++) { _this.addEdge(arr[i].from, arr[i].to); } this.dfs(start, end, this.path); return this.lines; }; }

可以看出修改了addEdge函數,將鄰接表中的雙向記錄改為單向記錄,可以有效避免下圖的錯誤計算:

只計算起點到終點的所有連線有時並不客觀,如果出現

這種情況的話,實際上深度遍歷並不能計算出最右邊的節點是合法的,那麼就需要重新修改起點和終點,來推導是否能夠到達終點.從而判定該點是否合法.至於其他的,只是多了個返回值,存儲了一下計算出來的所有路徑.

而在dfs函數中,當滿足能夠從起點走到終點的,則記錄下當前的path中的值,保存到lines中去,而每一次對於path的推入或者推出,保證了只有滿足條件的點,才能被返回;

而this.marked[v] = false,則確保了,在每一次重新計算路徑時,都會驗證每個點是否存在不同的相對於終點能夠到達的路徑是否存在.

當然,一定會有更加簡單的方法,我這裡只是稍微修改了下基礎的代碼!

這是我覺得最簡單卻耗時最久的功能,思路都知道:創建一個隊列,記錄每一次創建一個流程節點,刪除一個流程節點,建立一個新的關聯關係,刪除一個新的關聯關係等,都需要記錄下來,再通過統一的介面來訪問隊列,執行操作.

但在具體實現上,jsPlumb的remove確實需要注意一下:

首先,如果需要刪除連線,那麼使用jsPlumb提供的detach方法,就可以刪除連線,注意,傳入的數據應該是connection對象.

當然,也可以使用remove方法,參數為選擇器或者element對象都可以,這個方法刪除的是一個節點,包括節點上所有的線.

而jsPlumb中會內部緩存所有的數據,用於刷新,和重連.

那麼當我移除一個多層級且內部有連線的情況時,如果只刪除最外層的元素,那麼內部的連線實際上並沒有清除,所以當redo或者移動時,會出現連線的端點有一端會跑到坐標原點,也就是div上(0,0)的地方去.所以清除時,需要注意,要把內部的所有節點依次清除,才不會發生一些莫名其妙的bug.

而在刪除和連接連線上,我使用了jsPlumb提供的事件bind("connection")和bind("connectionDetached"),用於判斷一條連線被連接或者刪除.而在記錄這裡的redo和undo事件時,尤其要注意,需要首先確定刪除和連接時的連線的類型,否則會產生額外的隊列事件.

因此,在使用連接事件時,就可以使用

jsPlumb.connect({
source:"foo",
target:"bar",
parameters:{
"p1":34,
"p2":new Date,
"p3":function { console.log("i am p3"); }
}
});

來進行類型的傳參,這樣事件觸發時就可以分類處理.

也可以使用connection.setData事件,參數可以指定任意的值,通過connection.getData方法,就可以拿到相應的數據了.

而redo和undo本身確實沒有什麼東西

var defaults = {
"name": "mutation",
"afterAddServe":$.noop,
"afterUndo":$.noop,
"afterRedo":$.noop
}

return mutation;

每次在使用redo或者undo時,只需要判斷當前是否是隊列的尾端或者起始端,再確定是否redo或者undo就可以了.

調用時的undo和redo通過傳參,將不同的函數封裝進隊列里,就可以減少耦合度.

放大縮小

這裡想了想還是記錄一下,方法採用了最簡單的mousedown和mousemove,讓元素在節流中動態的變化大小,就可以了,

只需要用一個節點,在點擊元素時,根據元素的大小來確定該輔助節點四個點的位置,就可以了,只要監聽了這四個點的位置,再同步給該定位元素,就能實現這一效果,方法就不貼了,沒有太多東西

這次的項目我個人還是覺得蠻有意思的,可以學習新的演算法,了解新的數據結構,包括設計模式,也代入了其中,進行代碼的整合,所用到的中間件模式和發布訂閱者模式都讓我對於js有了一個新的理解.雖然已經用require來管理模塊,但結構仍然存在高度耦合的情況,應該還是被限制住了. 作為離職前的最後一次的項目來說,其實我感覺我的代碼能力仍然與年初沒有什麼太大的改變,也許是時候脫離安逸的環境,重新開始了.

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！