1、Gooflow特點

1.1 跨瀏覽器

可兼容IE7--IE10， FireFox， Chrome， Opera等幾大內核的瀏覽器，且不需要瀏覽器再加裝任何控件。

1.2 多系統兼容性、可移植性

由于只包括前臺UI,因此二次開發者可很方便將本插件用在任何一種需要流程圖的B/S系統應用上，流程圖的詳細實現邏輯完全交于后臺程序開發者自己實現;對于后臺,只要能返回/接收能被本插件解析的JSON格式數據即可.所以本插件可用于不同的服務器語言建立的后臺上.

1.3 跨領域

流程圖設計器不止用在電信領域,在其它需要IT進行技術支持的領域中都有重大作用.?

2、Gooflow實現

• 頁面頂部欄、左邊側邊欄均可自定義；
• 當左邊的側邊欄設為不顯示時，為只讀狀態，此時的視圖區可當作是一個查看器而非編輯器。
• 側邊工具欄除了基本和一些流程節點按鈕外，還自定義新的節點按鈕，自定義節點都可以有自有的圖標、類型名稱，定義后在使用可可在工作區內增加這些自定義節點。
• 頂部欄可顯示流程圖數據組的標題，也可提供一些常用操作按鈕。
• 頂部欄的按鈕，除了撤銷、重做按鈕外，其余按鈕均可自定義點擊事件。
• 可畫直線、折線；折線還可以左右/上下移動其中段。
• 具有區域劃分功能，能讓用戶更直觀地了解哪些節點及其相互間的轉換，是屬于何種自定義區域內的。
• 具有標注功能，用橙紅色標注某個結點或者轉換線，一般用在展示流程進度時。
• 能直接雙擊結點、連線、分組區域中的文字進行編輯
• 在對結點、連線、分組區域的各種編輯操作，如新增/刪除/修改名稱/重設樣式或大小/移動/標注時，均可捕捉到事件，并觸發自定義事件，如果自定義事件執行的方法返回FALSE，則會阻止操作。
• 具有操作事務序列控制功能，在工作區內的各種有效操作都能記錄到一個棧中，然后可以進行撤銷（undo()）或重做（redo()），像典型的C/S軟件一樣。
• 0.8版，取消原來的擬物化頁面，變成如今的扁平化頁面，并且支持主要位置的顏色自定義功能（如果想沿用原來老版本中的擬物化頁面，只需保留原來的GooFlow.css文件即可）；修正0.7版中的畫線BUG。

3、Gooflow界面

如上圖所示：工作區寬度高度均為可見區的2倍，X，Y軸的方向如圖所示，于CSS樣式中頂距top和左距left是一樣的； 左邊是流程圖繪制工具欄，從上至下依次為：選擇指針、轉換連接線、開始節點、結束節點、任務節點、自動節點、決策節點、狀態節點、擴展附加節點、分支結點、聚合結點、復合子流程結點；最后一個不是節點，而是節點連線編輯與分組區域編輯兩種工作區狀態的切換開關，當切換至分組區域編輯后，只能操作分組區域塊，節點與連線都被鎖定；反之即然。 頂部是展示流程圖標題和放置一些功能按鈕的操作欄，這些按鈕除了系統自帶的外，還可由用戶自定義。 如果初始化中設置不要左邊工具欄和頂部的操作按鈕，則該UI就變成了一個流程圖查看/跟蹤器。

開始節點、結束節點為圓形，復合節點是綠色，其余結點均是淡藍色圓角矩形，雙擊節點中的文字，可直接進行編輯； 轉換連線和直接和中段可上下移動的折線、中段可左右移動的折線共三種樣式，雙擊線條可直接編輯線條的文字說明內容； 分組區域需要左下角的開關被按下后才可編輯，有四種隨機顏色，點擊左上角的圓形圖標后可改變顏色，雙擊文本可直接編輯。

節點被選中時:

?

連線被選中時:

?

分組區域變為可操作時：

4、Goolflow構造函數

這里color可配置的主要部分的顏色，分別為：繪圖器HEAD/圖標的顏色、結點背景色、連線/結點選中時邊框顏色、連線被選中/元素都標注時顏色、復合結點自定義背景顏色、字體顏色。

如果這些都不定義，則自動使用默認顏色。

5、Gooflow對象內部屬性

如有需要了解的可在附件中查看

6、Gooflow數據格式

{"title":"普通稿件審核流程","initNum":10,"nodes":{"appFlow_node_1":{"name":"開始","left":84,"top":196,"type":"task","width":86,"height":24},"appFlow_node_2":{"name":"普通編輯審核","left":261,"top":39,"type":"task","width":108,"height":28},"appFlow_node_3":{"name":"編輯主任審核","left":444,"top":197,"type":"task","width":96,"height":26},"appFlow_node_4":{"name":"值班主任","left":616,"top":37,"type":"task","width":88,"height":25},"appFlow_node_5":{"name":"結束","left":772,"top":202,"type":"task","width":84,"height":22}},"lines":{"appFlow_line_6":{"type":"sl","from":"appFlow_node_1","to":"appFlow_node_2","name":"采寫","marked":false},"appFlow_line_7":{"type":"sl","from":"appFlow_node_2","to":"appFlow_node_3","name":"初審","marked":false},"appFlow_line_8":{"type":"sl","from":"appFlow_node_3","to":"appFlow_node_4","name":"再審","marked":false},"appFlow_line_9":{"type":"sl","from":"appFlow_node_4","to":"appFlow_node_5","name":"結束流轉","marked":false}},"areas":{"demo_area_8": {"name":"area_8","left":35,"top":20,"color":"red","width":850,"height":220}}}

7、angularjs指令——goo-flow

7.1 goo-flow指令功能

增加一個流程編輯器，可自行配置相關屬性

7.2 gooflow指令使用方法

1、配置config

在父級controller中對config.property和config.remark進行配置

2、準備編輯器數據jsondata

在父級controller中獲取路由resolve中的數據并保存

3、引入goo-flow指令且傳傳入參數config和jsondata

<goo-flow jsondata="jsondata" config="config"></goo-flow>

指令的link函數會根據config和jsondata初始化流程編輯器載入數據

7.3 指令詳細說明

7.3.1、父級controller中定義了配置和數據

config：對象中有兩個屬性

• property ? 定義工具欄、編輯器相關屬性
• remark ? ? 定義工具欄提示

jsondata：后臺返回的編輯器json數據，具體格式請參照數據格式

?

7.3.2、指令goo-flow

link函數中定義了一個方法editnodes

editnodes：雙擊編輯節點，打開模態框，在模態框中編輯節點相關信息

• 創建圖類$.createGooFlow

prams1{element}元素節點
prams2{property}配置對象

?

• 工具欄提示信息setNodeRemarks ? ? ? ? ??

prams{remark}提示信息對象

?

exportData()：是導出json數據

7.3.3、模態框控制器

可根據節點名稱判斷相關作用，具體的功能還沒有寫，所以暫時是這樣

8、附件

附件一：gooflow詳細API?http://pan.baidu.com/s/1gfzCKON

附件二：gooflow demo?http://pan.baidu.com/s/1gfzCKON

https://github.com/wangbeggar/demo

?

轉載于:https://www.cnblogs.com/jianjianwoshi/p/5130078.html

總結

以上是生活随笔為你收集整理的基于jquery的web在线流程图设计器gooFlow的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。