Flow 流程

<!-- 導入需要的包 （一定要放到head標籤裏）-->
<script src="https://cdn.staticfile.org/jsPlumb/2.11.1/js/jsplumb.min.js"></script>

幫助文檔：

在線幫助文檔 jsplumb 官網提供

 

1、安裝 : npm install jsplumb --save

2、在main.js中引入，在這裏直接放進了vue原型中，方便下面頁面使用

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

3、初始化jsPlumb實例，對於jsPlumb的操作都變爲對實例對象的操作。初始化我放在created生命週期中，其他操作都放在mounted中，因爲jsPlumb插件一定要在頁面加載完成後才能起作用。

created(){
 this.jsPlumb = this.$jsPlumb.getInstance({
        Container:"workspace",   //選擇器id
        EndpointStyle: { radius: 4, fill: "#acd"},  //端點樣式
        PaintStyle: { stroke: '#fafafa',strokeWidth:3},// 繪畫樣式，默認8px線寬  #456
        HoverPaintStyle: { stroke: '#1E90FF' }, // 默認懸停樣式  默認爲null
        EndpointHoverStyle: { fill: '#F00', radius:6 }, // 端點懸停樣式
        ConnectionOverlays:[                 //連線上的默認樣式  這裏是箭頭
          ["Arrow",{
            location:1,
            paintStyle: {
              stroke: '#00688B',
              fill: '#00688B',
            }
          }]
        ],
        Connector:["Straight",{gap:1}]   //要使用的默認連接器的類型：折線，流程等
  });
}

這裏需要注意一點，放流程圖的容器得設置成relative定位的，因爲連線都是絕對定位的

jsPlumb中要注意的幾點：

1、錨點

錨點又分爲靜態錨、動態錨、周邊錨、連續錨四類。

靜態錨寫法： 9個單詞 (Top,Left,Center之類)

或者[x, y, dx, dy] 寫法 x,y爲錨點位置 取值爲0到1 ，dx,dy爲錨點連線方向，取值爲0,1,-1

就像這樣寫

anchor:"Bottom"

動態錨

指多個錨，每次自動選擇最佳的錨點

anchor: [ [ 0.2, 0, 0, -1 ],  [ 1, 0.2, 1, 0 ], "Top", "Bottom" ]

周長錨

動態錨的一種形式，錨點在周長上變化，自動取最近的

6種形狀 Circle Ellipse Triangle Diamond Rectangle Square

 anchor:[ "Perimeter", { shape:"Circle",anchorCount:150 } ]

Perimeter爲周長的意思，後面大括號裏周長錨屬性，shape爲形狀，anchorCount爲周長錨的數量，值越大錨點越多越平滑

2、連接器

有6種類型 分別爲：Bezier,Straight,Flowchart,State Machine

直線可以這樣設置:

Connector:["Straight",{gap:1}], 

gap爲可選項，爲端點與連接線的間距。

常用的連接函數寫法：

this.jsPlumb.connect({       //this.jsPlumb爲實例後的jsPlumb對象
   source:     ,   //  填id值
   target:     ,   //  填id值
   overlays:[['Arrow',{location;1}]]  // 設置連接上附加的箭頭，也可以不設，會用初始化時設置的樣式
})

3.端點

四種樣式的端點：

Dot、Rectangle、Image 、Blank（透明端點）

EndpointStyle: { radius: 4, fill: "#acd"},  //圓點
或者
EndpointStyle：'Blank'    //空白

常用的有addEndpoint() ,makeSource(),makeTarget() ,分別用於添加端點，設置起點、終點

4、疊加

在連線上面設置的箭頭，標籤或者自定義的內容（可以爲下拉菜單之類）

標籤：

var c = jsPlumb.connect({
  source:"d1", 
  target:"d2", 
  overlays:[
    [ "Label", {label:"FOO", id:"label"}]
  ] 
});

自定義下拉框：

var conn = jsPlumb.connect({
  source:"d1",
  target:"d2",
  paintStyle:{
    stroke:"red",
    strokeWidth:3
  },
  overlays:[
    ["Custom", {
      create:function(component) {
        return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>");                
      },
      location:0.7,
      id:"customOverlay"
    }]
  ]
});

5、元素拖動

在實例對象上用draggable方法，

myInstanceOfJsPlumb.draggable("elementId");      

對區域內元素設置可拖動

jsPlumb.draggable("someElement", {
   containment:true
});

 

 

下面爲一個案例：

<template>
	<div>
		<div id="container">
			<div class="col1">
				<div v-for="item in list1" :id="item.nodeId" name="cell">{{item.name}}</div>
			</div>
			<div class="col2">
				<div v-for="item in list2" :id="item.nodeId" name="cell">{{item.name}}</div>
			</div>
		</div>
	</div>
</template>

 

export default {
	data(){
		return {
			jsPlumb: null,
			list1:[{name:'XX',nodeId:'x'},{name:'YY',nodeId:'y'},{name:'ZZ',nodeId:'z'}],
			list2:[{name:'AA',nodeId:'a'},{name:'BB',nodeId:'b'},{name:'CC',nodeId:'c'}],
			connlist:[{sourceNodeId:'x',targetNodeId:'a'},{sourceNodeId:'y',targetNodeId:'b'},{sourceNodeId:'z',targetNodeId:'c'}]
		}
	},
	created() {
		this.jsPlumb = this.$jsPlumb.getInstance({
			Container:"container",   //選擇器id
			EndpointStyle: { radius: 4, fill: "#acd"},  //端點樣式
			PaintStyle: { stroke: '#fafafa',strokeWidth:4},// 繪畫樣式，默認8px線寬  #456
			HoverPaintStyle: { stroke: '#1E90FF' }, // 默認懸停樣式  默認爲null
			EndpointHoverStyle: { fill: '#F00', radius:6 }, // 端點懸停樣式
			ConnectionOverlays:[                 
				["Arrow",{
					location:1,
					paintStyle: {
						stroke: '#00688B',
						fill: '#00688B',
					}
				}]
			],
			Connector:["Straight",{gap:1}],     //要使用的默認連接器的類型：折線，流程等
			DrapOptions:{cursor:"crosshair",zIndex:2000}
		});
	},
	mounted() {
		let ins = this.jsPlumb,
			allConnection = ins.getAllConnections();
		ins.batch(() => {
			this.initAll();
			this.connectionAll();
		});
		this.switchContainer(true,true,false);
	},
	methods:{
		initAll () {
			let rl = this.list1;
			for (let i = 0; i < rl.length; i++) {
				this.init(rl[i].nodeId)
			}
			let rl2 = this.list2;
			for (let i = 0; i < rl2.length; i++) {
				this.init(rl2[i].nodeId)
			}
		},
		// 初始化規則使其可以連線、拖拽
		init (id) {
			let ins = this.jsPlumb,
					elem = document.getElementById(id);
			ins.makeSource(elem,{
				anchor: ["Perimeter", {anchorCount:200, shape:"Rectangle"}],
				allowLoopback: false,
				maxConnections: 1
			});
			ins.makeTarget(elem,{
				anchor: ["Perimeter", {anchorCount:200, shape:"Rectangle"}],
				allowLoopback: false,
				maxConnections: 1
			});
			ins.draggable(elem,{
				containment: true
			});
		},
		connectionAll () {
			let ins = this.jsPlumb;
			ins.ready(() => {
				for (let i = 0; i < this.connlist.length; i++) {
					let conn = this.connlist[i],
							connection = ins.connect({
								source:conn.sourceNodeId,
								target:conn.targetNodeId
							});
					connection.setPaintStyle({stroke:"#fafafa",strokeWidth:4})
				}
			})
		},
		switchContainer (target,source,draggable) {
			let elem = document.getElementsByName("cell"),
				  ins = this.jsPlumb;
			ins.setSourceEnabled(elem,source);
			ins.setTargetEnabled(elem,target);
			ins.setDraggable(elem,draggable);
		},
	}
}

 

<style>
	#container{
		margin: 50px;
		position: relative;
		background: #efefef;
		width: 400px;
		height: 400px;
	}
	.col2,.col1{
		float: left;
	}
	.col1{
		margin-left: 40px;
	}
	.col2{
		margin-left: 150px;
	}
	#container>div>div{
		width: 100px;
		height: 40px;
		line-height: 40px;
		background: lightcyan;
		margin-top: 40px;
	}
</style>

jsPlumb中還有beforeDrop，connection，connectionDetached，connectionMoved等幾個事件,分別在連線或點擊前後觸發，如果要保存連線修改的信息，可以在mounted中對實例化對象綁定事件

寫法例如：

jsPlumb.bind('connect',(info) =>{
   console.log(info)
   // info 中包含connection，sourceId ，targetId 等值  
})

connection 建立連接

connectionDetached 連接分離

connectionMoved 現有連接源或目標拖動至新位置

click 點擊

dbclick 雙擊

endpointClick 單擊端點

endpointDbClick 雙擊端點

contextmenu 右鍵單擊某個組件

beforeDrop 完成連接前 // 可綁定事件避免源和目標在同一出上

  .bind('beforeDrop', function (conn) {
      if (conn.sourceId === conn.targetId) {
        return false
      } else {
        return true
      }
    })

beforeDetach 分離前