jsPlumb 与 vue 学习总结

jsPlumb可用于网页拖拽、连线，这里简要记录写文档要点

官方文档地址：https://jsplumbtoolkit.com/community/doc/basic-concepts.html

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 分离前