基于 jsPlumb 的流程图编辑器的实现 （二，连接线的操作）
连接线支持单击选中，backspace 和 delete 可删除；双击可以为连接线添加 label。
完整代码：
/**
* 单击删除连线
*
*/
clickLine:function(){
var that = this;
jsPlumb.bind("click", function (conn, originalEvent) {
if(!isNew){
return false;
}
// 取消上次延时未执行的方法
clearTimeout(lineTimes);
//执行延时
lineTimes = setTimeout(function(){
jsPlumb.repaintEverything();
var target = originalEvent.toElement;
var isOuter = target.getAttribute('class') ? true : false;
if(isOuter){
return false;
}
target.setAttribute('stroke','#409eff');
$(document).keydown(function(event){
event=event||window.event
if(event.keyCode==8 || event.keyCode==46){ //8--backspace;46--delete
jsPlumb.detach(conn);
return false;
}
})
},300);
});
return this;
},
/**
* 双击给线添加label
*
*/
dblclickLine:function(){
var that = this;
jsPlumb.bind("dblclick", function (conn, originalEvent) {
if(!isNew){
return false;
}
// 取消上次延时未执行的方法
clearTimeout(lineTimes );
//如果连接线有label，则获取焦点，如果没有，则添加。
var labelInfo = that.lineIsHasLabel(conn);
if(labelInfo.isHasLabel){
labelInfo.currentLabel.removeClass('label-blur').addClass('label-focus');
var oldText = labelInfo.currentLabel.children('.label-text').html();
var inputDom = $('')
setTimeout(function(){
inputDom.focus();
},50)
labelInfo.currentLabel.append(inputDom)
return false;
}
_index++;
var left = parseInt(originalEvent.clientX-container.offset().left)
var top = parseInt(originalEvent.clientY-container.offset().top)
var id = "label"+_index;
var labelDom = $('')
labelDom.css("left", left).css("top", top);
var input = labelDom.children('input.label-input');
setTimeout(function(){
input.focus();
},50)
container.append(labelDom);
labelDom.keydown(function (event) {
event=event||window.event;
if(event.keyCode==13){
var text = input.val();
if(!text){
labelDom.remove();
return false;
}
labelDom.children('span').html(input.val());
input.remove();
labelDom.removeClass('label-focus').addClass('label-blur');
return false;
}
});
// label 可以拖动
jsPlumb.draggable(id);
labelDom.draggable({ containment: "parent" });
});
return this;
},1.单击删除连接线
jsPlumb.detach(); 可以删除连接的线。
思路：jsPlumb 允许添加事件。这里添加点击事件，之后给 document 添加键盘事件，按下 Backspace 和 Delete 时，删除连线。
jsPlumb.bind("click", function (conn, originalEvent) {
if(!isNew){
return false;
}
$(document).keydown(function(event){
event=event||window.event
if(event.keyCode==8 || event.keyCode==46){ //8--backspace;46--delete
jsPlumb.detach(conn);
return false;
}
})
});2.双击添加 Label
思路：双击连线时，在画布中添加 div ,并且根据鼠标点击的位置，设置div 的位置。div 中包含input 输入框，可直接编辑。同时，我这里做了一个限定，即一条线只能添加一个label ，因此在添加之前，需要判断，连线是否有label，有则使原有的处于选中状态，没有则添加。
//如果连接线有lebel，则获取焦点，如果没有，则添加。
var labelInfo = that.lineIsHasLabel(conn);
if(labelInfo.isHasLabel){
labelInfo.currentLabel.removeClass('label-blur').addClass('label-focus');
var oldText = labelInfo.currentLabel.children('.label-text').html();
var inputDom = $('')
setTimeout(function(){
inputDom.focus();
},50)
labelInfo.currentLabel.append(inputDom)
return false;
}
_index++;
var left = parseInt(originalEvent.clientX-container.offset().left)
var top = parseInt(originalEvent.clientY-container.offset().top)
var id = that.judgeId("label",_index);
var labelDom = $('')
labelDom.css("left", left).css("top", top);
var input = labelDom.children('input.label-input');
setTimeout(function(){
input.focus();
},50)
container.append(labelDom);
labelDom.keydown(function (event) {
event=event||window.event;
if(event.keyCode==13){
var text = input.val();
if(!text){
labelDom.remove();
return false;
}
labelDom.children('span').html(input.val());
input.remove();
labelDom.removeClass('label-focus').addClass('label-blur');
return false;
}
});同时，label 也是可以拖动的。
// label 可以拖动
jsPlumb.draggable(id);
labelDom.draggable({ containment: "parent" });判断连线是否有 label 的方法：
/**
* 判断连接线，是否有label
* @params conn Object 连线对象
* @return Object labelInfo
*/
lineIsHasLabel:function(conn){
var pathId = conn.id;
var lebelDoms = $('.line-label');
var isHasLabel = false;
var currentLabel;
for(var i = 0;i3.label 的操作
label 的操作和节点操作类似，也是单击获取焦点，可以删除，双击可以改变内容，同时支持拖动改变大小。
/**
* label 事件
*
*/
labelClick:function(id){
var currentDom = $('#'+id);
// 单击选中，可删除
currentDom.click(function(){
clearTimeout(labelTimes);
labelTimes = setTimeout(function(){
container.children('.line-label').removeClass('label-focus').addClass('label-blur');
currentDom.addClass('label-focus').removeClass('label-blur');
var input = $("");
setTimeout(function(){
input.focus();
},50)
currentDom.append(input);
currentDom.keydown(function (event) {
event=event||window.event
if(event.keyCode==8 || event.keyCode==46){ //8--backspace;46--delete
currentDom.remove();
return false;
}
});
},300);
})
// 双击添加文字
currentDom.dblclick(function () {
// 取消上次延时未执行的方法
clearTimeout(labelTimes );
container.children('.line-label').removeClass('label-focus').addClass('label-blur');
currentDom.addClass('label-focus').removeClass('label-blur');
var text = currentDom.children('span').text().replace(/(^\s*)|(\s*$)/g, "") || '';
currentDom.children('span').html("");
var input = $("");
setTimeout(function(){
input.focus();
},50)
currentDom.append(input);
currentDom.keydown(function (event) {
if(event.keyCode==13){
currentDom.children('span').html(currentDom.children("input.label-input").val());
currentDom.children("input.label-input").remove();
currentDom.removeClass('label-focus').addClass('label-blur');
return false;
}
});
});
// 拖拽改变大小
currentDom.resizable({
autoHide: true ,
containment: "parent",
minHeight: 40,
minWidth:70,
})
},但是这里需要注意的是，因为有了 label ，连线在删除的时候，如果此连线有 label ，则也需要把 label 删除掉；节点在删除时，也是如此。
删除连线时，删除 label
var labelInfo = that.lineIsHasLabel(conn);
if(labelInfo.isHasLabel){
labelInfo.currentLabel.remove();
}删除节点时，删除 label
//如果连线有 label ，也得删除
var labelsDom = $('.line-label');
var paths = jsPlumb.getAllConnections();
if(labelsDom.length == 0){
return false;
}
for(var i=0;i
项目地址：https://github.com/smile1828/demo-jsPlumb
基于 jsPlumb 的流程图编辑器的实现 （一，节点的操作）
基于 jsPlumb 的流程图编辑器的实现 （三，document的操作）
基于 jsPlumb 的流程图编辑器的实现 （四，按钮的操作）