基于 jsPlumb 的流程图编辑器的实现 （三，document的操作）

由于节点，连线，label 在点击时，会获取焦点。那么，点击页面的其他地方，就应该失去焦点。

点击其他地方需要做的事情：

1.如果有在编辑的节点和 label ，要完成赋值

2.节点，连线，label 失去焦点

3.要取消 document 的键盘按下事件（如果这里不取消，在编辑输入框时，如果过按了 Backspace 和 Delete 键，会有报错。因为，在删除连线时，为 document 添加了键盘按下事件，编辑输入框时，会触发，导致报错。）

1.如果有在编辑的节点和 label ，要完成赋值

                //如果有在编辑的节点，要完成赋值
                var focusNode = $('.node-common.node-focus');
                if(focusNode.length != 0){
                    var isHasInput = focusNode.children("input.flow-input").length == 0 ? false : true;
                    if(isHasInput){
                        focusNode.children('span').html(focusNode.children("input.flow-input").val()); 
                        focusNode.children("input.flow-input").remove();
                        jsPlumb.repaintEverything();
                    }
                }
                var focusLabel = $('.line-label.label-focus');
                if(focusLabel.length != 0){
                    var labelHasInput = focusLabel.children("input.label-input").length == 0 ? false : true;
                    if(labelHasInput){
                        var text = focusLabel.children("input.label-input").val();
                        if(!text){
                            focusLabel.remove();
                            return false;
                        }
                        focusLabel.children('span').html(focusLabel.children("input.label-input").val());
                        focusLabel.children("input.label-input").remove();
                        focusLabel.removeClass('label-focus').addClass('label-blur');
                    }
                }    

2.节点，连线，label 失去焦点

                //节点，label，连接线取消选中状态
                $('.node-common').removeClass('node-focus');
                $('.line-label').removeClass('label-focus').addClass('label-blur');
                var paths = $('path');
                if(paths.length != 0){
                    for(var i = 0; i<paths.length;i++ ){
                        var item = paths[i];
                        if(item.getAttribute('class')){
                            continue;
                        }
                        item.setAttribute('stroke','#000000')
                    }
                }

3.要取消 document 的键盘按下事件

$(document).off('keydown')

 

 

项目地址：https://github.com/smile1828/demo-jsPlumb

基于 jsPlumb 的流程图编辑器的实现 （一，节点的操作）

基于 jsPlumb 的流程图编辑器的实现 （二，连接线的操作）

基于 jsPlumb 的流程图编辑器的实现 （四，按钮的操作）