//定义一个区域图类: function GooFlow(bgDiv,property){ if (navigator.userAgent.indexOf("MSIE 8.0")>0||navigator.userAgent.indexOf("MSIE 7.0")>0||navigator.userAgent.indexOf("MSIE 6.0")>0){GooFlow.prototype.useSVG=""; }else{ GooFlow.prototype.useSVG="1";} //初始化区域图的对象 this.$id=bgDiv.attr("id"); this.$bgDiv=bgDiv;//最父框架的DIV this.$bgDiv.addClass("GooFlow"); var width=(property.width||800)-2; var height=(property.height||500)-2; this.$bgDiv.css({width:width+"px",height:height+"px"}); this.$tool=null;//左侧工具栏对象 this.$head=null;//顶部标签及工具栏按钮 this.$title=null;//流程图的名称 this.$nodeRemark={};//每一种结点或按钮的说明文字,JSON格式,key为类名,value为用户自定义文字说明 this.$nowType="cursor";//当前要绘制的对象类型 this.$lineData={}; this.$lineCount=0; this.$nodeData={}; this.$nodeCount=0; this.$objectKey=null; this.$areaData={}; this.$areaCount=0; this.$lineDom={}; this.$nodeDom={}; this.$areaDom={}; this.$max=property.initNum||1;//计算默认ID值的起始SEQUENCE this.$focus="";//当前被选定的结点/转换线ID,如果没选中或者工作区被清空,则为"" this.$cursor="default";//鼠标指针在工作区内的样式 this.$editable=false;//工作区是否可编辑 var headHeight=0; var tmp=""; if(property.haveHead){ tmp="
"; for(var x=0;x" } tmp+="
"; this.$head=$(tmp); this.$bgDiv.append(this.$head); headHeight=24; //以下是当工具栏按钮被点击时触发的事件自定义(虚函数),格式为function(),因为可直接用THIS操作对象本身,不用传参;用户可自行重定义: this.onBtnNewClick=null;//新建流程图按钮被点中 this.onBtnOpenClick=null;//打开流程图按钮定义 this.onBtnSaveClick=null;//保存流程图按钮定义 this.onFreshClick=null;//重载流程图按钮定义 if(property.headBtns) this.$head.on("click",{inthis:this},function(e){ if(!e)e=window.event; var tar=e.target; if(tar.tagName=="DIV"||tar.tagName=="SPAN") return; else if(tar.tagName=="a") tar=tar.childNode[0]; var This=e.data.inthis; //定义顶部操作栏按钮的事件 switch($(tar).attr("class")){ case "ico_new": if(This.onBtnNewClick!=null) This.onBtnNewClick();break; case "ico_open": if(This.onBtnOpenClick!=null) This.onBtnOpenClick();break; case "ico_save": if(This.onBtnSaveClick!=null) This.onBtnSaveClick();break; case "ico_undo": This.undo();break; case "ico_redo": This.redo();break; case "ico_reload" :if(This.onFreshClick!=null) This.onFreshClick();break; } }); } var toolWidth=0; if(property.haveTool){ // this.$bgDiv.append("
"); this.$bgDiv.append("
"); this.$tool=this.$bgDiv.find(".GooFlow_tool div"); //未加代码:加入绘图工具按钮 // this.$tool.append(""); if(property.toolBtns&&property.toolBtns.length>0){ tmp=""; for(var i=0;i";//加入自定义按钮 } // this.$tool.append(tmp); } //加入分支和聚合结点,复合结点及区域划分框工具按钮 //this.$tool.append(""); toolWidth=60; this.$nowType="cursor"; //绑定各个按钮的点击事件 this.$tool.on("click",{inthis:this},function(e){ return; if(!e)e=window.event; var tar; switch(e.target.tagName){ case "SPAN":return false; case "DIV":return false; case "BUTTON":return false; case "B": tar=e.target.parentNode;break; case "A": tar=e.target; }; var type=$(tar).attr("id").split("btn_")[1]; e.data.inthis.switchToolBtn(type); return false; }); this.$editable=true;//只有具有工具栏时可编辑 } width=width-toolWidth-8; height=height-headHeight-(property.haveHead? 5:8); this.$bgDiv.append("
"); this.$workArea=$("
") .attr({"unselectable":"on","onselectstart":'return false',"onselect":'document.selection.empty()'}); this.$bgDiv.children(".GooFlow_work").append(this.$workArea); this.$draw=null;//画矢量线条的容器 this.initDraw("draw_"+this.$id,width,height); this.$group=null; this.initGroup(width,height); if(this.$editable){ this.$workArea.on("click",{inthis:this},function(e){ if(!e)e=window.event; if(!e.data.inthis.$editable)return; var type=e.data.inthis.$nowType; if(e.target.nodeName=="svg"){control.hidden()} if(type=="cursor"){ var t=$(e.target); var n=t.prop("tagName"); if(n=="svg"||(n=="DIV"&&t.prop("class").indexOf("GooFlow_work")>-1)||n=="LABEL"){ e.data.inthis.blurItem(); } return; } else if(type=="direct"||type=="group")return; var X,Y; var ev=mousePosition(e),t=getElCoordinate(this); X=ev.x-t.left+this.parentNode.scrollLeft; Y=ev.y-t.top+this.parentNode.scrollTop; var newname="node_"+e.data.inthis.$max; var datatype=e.data.inthis.$nowType;//start,end,node,task var realtype=""; if(datatype=="start"){newname="开始";realtype="start"}; if(datatype=="end" ){newname="结束";realtype="end"}; if(datatype=="node" ){newname="跳转";realtype="decision"}; if(datatype=="task"){newname="任务";realtype="task"}; if(datatype=="fork"){newname="并行";realtype="fork"}; if(datatype=="join"){newname="汇合";realtype="join"}; if(datatype=="subprocess"){newname="子工作流";realtype="subprocess"}; if(datatype=="transmit"){newname="转发";realtype="transmit"}; var newjson={name:newname,left:X,top:Y,type:e.data.inthis.$nowType} newjson.realtype=realtype; newjson.name=newname; newjson.bpm_type="1" newjson.bpm_agree="同意" newjson.bpm_reject="退回" //task if(selectTask!=null&&datatype== "task"){ for(var key in selectTask){ newjson[key]=selectTask[key]; } // console.log("task..............") //start }else if(selectStart!=null&&datatype=="start"){ newjson.service_name=selectStart.service_name selectStart.count++ //end }else if(selectEnd!=null&&datatype=="end"){ for(var key in selectEnd){ newjson[key]=selectEnd[key]; } //decision }else if(selectDecision!=null&&datatype=="node"){ for(var key in selectDecision){ newjson[key]=selectDecision[key]; } }else if(datatype=="fork"){ }else if(datatype=="join"){ }else if(datatype=="subprocess"){ for(var key in selectSubprocess){ newjson[key]=selectSubprocess[key]; } }else if(datatype=="transmit"){ for(var key in selectTransmit){ newjson[key]=selectTransmit[key]; } } // e.data.inthis.$max++; // e.data.inthis.addNode(e.data.inthis.$id+"_node_"+e.data.inthis.$max,newjson); e.data.inthis.addNode(composeId("node"),newjson); }); //划线时用的绑定 this.$workArea.mousemove({inthis:this},function(e){ if(e.data.inthis.$nowType!="direct") return; var lineStart=$(this).data("lineStart"); if(!lineStart)return; var ev=mousePosition(e),t=getElCoordinate(this); var X,Y; X=ev.x-t.left+this.parentNode.scrollLeft; Y=ev.y-t.top+this.parentNode.scrollTop; var line=document.getElementById("GooFlow_tmp_line"); if(GooFlow.prototype.useSVG!=""){ line.childNodes[0].setAttribute("d","M "+lineStart.x+" "+lineStart.y+" L "+X+" "+Y); line.childNodes[1].setAttribute("d","M "+lineStart.x+" "+lineStart.y+" L "+X+" "+Y); if(line.childNodes[1].getAttribute("marker-end")=="url(\"#arrow2\")") line.childNodes[1].setAttribute("marker-end","url(#arrow3)"); else line.childNodes[1].setAttribute("marker-end","url(#arrow2)"); } else line.points.value=lineStart.x+","+lineStart.y+" "+X+","+Y; }); this.$workArea.mouseup({inthis:this},function(e){ if(e.data.inthis.$nowType!="direct") return; $(this).css("cursor","auto").removeData("lineStart"); var tmp=document.getElementById("GooFlow_tmp_line"); if(tmp)e.data.inthis.$draw.removeChild(tmp); }); //为了结点而增加的一些集体delegate绑定 this.initWorkForNode(); //对结点进行移动或者RESIZE时用来显示的遮罩层 this.$ghost=$("
").attr({"unselectable":"on","onselectstart":'return false',"onselect":'document.selection.empty()'}); this.$bgDiv.append(this.$ghost); this.$textArea=$(""); this.$bgDiv.append(this.$textArea); this.$lineMove=$("");//操作折线时的移动框 this.$workArea.append(this.$lineMove); this.$lineMove.on("mousedown",{inthis:this},function(e){ var lm=$(this); lm.css({"background-color":"#333"}); var This=e.data.inthis; var ev=mousePosition(e),t=getElCoordinate(This.$workArea[0]); var X,Y; X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; var p=This.$lineMove.position(); var vX=X-p.left,vY=Y-p.top; var isMove=false; document.onmousemove=function(e){ if(!e)e=window.event; var ev=mousePosition(e); var ps=This.$lineMove.position(); X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; if(This.$lineMove.data("type")=="lr"){ X=X-vX; if(X<0) X=0; else if(X>This.$workArea.width()) X=This.$workArea.width(); This.$lineMove.css({left:X+"px"}); } else if(This.$lineMove.data("type")=="tb"){ Y=Y-vY; if(Y<0) Y=0; else if(Y>This.$workArea.height()) Y=This.$workArea.height(); This.$lineMove.css({top:Y+"px"}); } isMove=true; } document.onmouseup=function(e){ if(isMove){ var p=This.$lineMove.position(); if(This.$lineMove.data("type")=="lr") This.setLineM(This.$lineMove.data("tid"),p.left+3); else if(This.$lineMove.data("type")=="tb") This.setLineM(This.$lineMove.data("tid"),p.top+3); } This.$lineMove.css({"background-color":"transparent"}); if(This.$focus==This.$lineMove.data("tid")){ This.focusItem(This.$lineMove.data("tid")); } document.onmousemove=null; document.onmouseup=null; } }); this.$lineOper=$("");//选定线时显示的操作框 this.$workArea.append(this.$lineOper); this.$lineOper.on("click",{inthis:this},function(e){ if(!e)e=window.event; if(e.target.tagName!="B") return; var This=e.data.inthis; var id=$(this).data("tid"); switch($(e.target).attr("class")){ case "b_x": This.delLine(id); this.style.display="none";break; case "b_l1": This.setLineType(id,"lr");break; case "b_l2": This.setLineType(id,"tb");break; case "b_l3": This.setLineType(id,"sl");break; } }); this.$workArea.append(this.$nodeOper); ; //下面绑定当结点/线/分组块的一些操作事件,这些事件可直接通过this访问对象本身 //当操作某个单元(结点/线/分组块)被添加时,触发的方法,返回FALSE可阻止添加事件的发生 //格式function(id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 this.onItemAdd=null; //当操作某个单元(结点/线/分组块)被删除时,触发的方法,返回FALSE可阻止删除事件的发生 //格式function(id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 this.onItemDel=null; //当操作某个单元(结点/分组块)被移动时,触发的方法,返回FALSE可阻止移动事件的发生 //格式function(id,type):id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值,线line不支持移动 this.onItemMove=null; //当操作某个单元(结点/线/分组块)被重命名时,触发的方法,返回FALSE可阻止重命名事件的发生 //格式function(id,name,type):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 this.onItemRename=null; //当操作某个单元(结点/线)被由不选中变成选中时,触发的方法,返回FALSE可阻止选中事件的发生 //格式function(id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中 this.onItemFocus=null; //当操作某个单元(结点/线)被由选中变成不选中时,触发的方法,返回FALSE可阻止取消选中事件的发生 //格式function(id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被取消选中 this.onItemBlur=null; //当操作某个单元(结点/线/分组块)被重定义大小或造型时,触发的方法,返回FALSE可阻止重定大小/造型事件的发生 //格式function(id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 this.onItemResize=null; //当移动某条折线中段的位置,触发的方法,返回FALSE可阻止重定大小/造型事件的发生 //格式function(id,M):id是单元的唯一标识ID,M是中段的新X(或Y)的坐标 this.onLineMove=null; //当变换某条连接线的类型,触发的方法,返回FALSE可阻止重定大小/造型事件的发生 //格式function(id,type):id是单元的唯一标识ID,type是连接线的类型,"sl":直线,"lr":中段可左右移动的折线,"tb":中段可上下移动的折线 this.onLineSetType=null; //当用重色标注某个结点/转换线时触发的方法,返回FALSE可阻止重定大小/造型事件的发生 //格式function(id,type,mark):id是单元的唯一标识ID,type是单元类型("node"结点,"line"转换线),mark为布尔值,表示是要标注TRUE还是取消标注FALSE this.onItemMark=null; if(property.useOperStack){//如果要使用堆栈记录操作并提供“撤销/重做”的功能 this.$undoStack=[]; this.$redoStack=[]; this.$isUndo=0; ///////////////以下是构造撤销操作/重做操作的方法 //为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放40步操作;超过40步时,将自动删掉最旧的一个缓存 this.pushOper=function(funcName,paras){ var len=this.$undoStack.length; if(this.$isUndo==1){ this.$redoStack.push([funcName,paras]); this.$isUndo=false; if(this.$redoStack.length>40) this.$redoStack.shift(); }else{ this.$undoStack.push([funcName,paras]); if(this.$undoStack.length>40) this.$undoStack.shift(); if(this.$isUndo==0){ this.$redoStack.splice(0,this.$redoStack.length); } this.$isUndo=0; } }; //将外部的方法加入到GooFlow对象的事务操作堆栈中,在过后的undo/redo操作中可以进行控制,一般用于对流程图以外的附加信息进行编辑的事务撤销/重做控制; //传参func为要执行方法对象,jsonPara为外部方法仅有的一个面向字面的JSON传参,由JSON对象带入所有要传的信息; //提示:为了让外部方法能够被UNDO/REDO,需要在编写这些外部方法实现时,加入对该方法执行后效果回退的另一个执行方法的pushExternalOper this.pushExternalOper=function(func,jsonPara){ this.pushOper("externalFunc",[func,jsonPara]); }; //撤销上一步操作 this.undo=function(){ if(this.$undoStack.length==0) return; var tmp=this.$undoStack.pop(); this.$isUndo=1; if(tmp[0]=="externalFunc"){ tmp[1][0](tmp[1][1]); } else{ //传参的数量,最多支持5个. switch(tmp[1].length){ case 0:this[tmp[0]]();break; case 1:this[tmp[0]](tmp[1][0]);break; case 2:this[tmp[0]](tmp[1][0],tmp[1][1]);break; case 3:this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2]);break; case 4:this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2],tmp[1][3]);break; case 5:this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2],tmp[1][3],tmp[1][4]);break; } } }; //重做最近一次被撤销的操作 this.redo=function(){ if(this.$redoStack.length==0) return; var tmp=this.$redoStack.pop(); this.$isUndo=2; if(tmp[0]=="externalFunc"){ tmp[1][0](tmp[1][1]); } else{ //传参的数量,最多支持5个. switch(tmp[1].length){ case 0:this[tmp[0]]();break; case 1:this[tmp[0]](tmp[1][0]);break; case 2:this[tmp[0]](tmp[1][0],tmp[1][1]);break; case 3:this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2]);break; case 4:this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2],tmp[1][3]);break; case 5:this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2],tmp[1][3],tmp[1][4]);break; } } }; } } } GooFlow.prototype={ useSVG:"", getSvgMarker:function(id,color){ // var m=document.createElement("marker"); var m=document.createElementNS("http://www.w3.org/2000/svg","marker"); m.setAttribute("id",id); m.setAttribute("viewBox","0 0 24 24"); m.setAttribute("refX",8); m.setAttribute("refY",15); m.setAttribute("markerUnits","strokeWidth"); m.setAttribute("markerWidth",11); m.setAttribute("markerHeight",11); m.setAttribute("orient","auto"); var path=document.createElementNS("http://www.w3.org/2000/svg","path"); path.setAttribute("d","M9.297 15c0 0.125-0.063 0.266-0.156 0.359l-7.281 7.281c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-0.781-0.781c-0.094-0.094-0.156-0.219-0.156-0.359 0-0.125 0.063-0.266 0.156-0.359l6.141-6.141-6.141-6.141c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l0.781-0.781c0.094-0.094 0.234-0.156 0.359-0.156s0.266 0.063 0.359 0.156l7.281 7.281c0.094 0.094 0.156 0.234 0.156 0.359z"); path.setAttribute("fill",color); path.setAttribute("stroke-width",0); m.appendChild(path); return m; }, initDraw:function(id,width,height){ var elem; if(GooFlow.prototype.useSVG!=""){ // alert("can use svg") // this.$draw=document.createElement("svg"); this.$draw=document.createElementNS("http://www.w3.org/2000/svg","svg");//可创建带有指定命名空间的元素节点 this.$workArea.prepend(this.$draw); var defs=document.createElementNS("http://www.w3.org/2000/svg","defs"); this.$draw.appendChild(defs); defs.appendChild(GooFlow.prototype.getSvgMarker("arrow1","#333")); /*箭头颜色*/ defs.appendChild(GooFlow.prototype.getSvgMarker("arrow2","#ff3300")); defs.appendChild(GooFlow.prototype.getSvgMarker("arrow3","#ff3300")); } else{ // alert("cannot use svg") this.$draw = document.createElement("v:group"); this.$draw.coordsize = width+","+height; this.$workArea.prepend("
"); this.$workArea.children("div")[0].insertBefore(this.$draw,null); } this.$draw.id = id; this.$draw.style.width = width + "px"; this.$draw.style.height = +height + "px"; //绑定连线的点击选中以及双击编辑事件 var tmpClk=null; if(GooFlow.prototype.useSVG!="") tmpClk="g"; else tmpClk="PolyLine"; $(this.$draw).delegate(tmpClk,"click",{inthis:this},function(e){ e.data.inthis.focusItem(this.id,true); }); if(this.$editable) $(this.$draw).delegate(tmpClk,"dblclick",{inthis:this},function(e){ var oldTxt,x,y,from,to; var This=e.data.inthis; if(GooFlow.prototype.useSVG!=""){ oldTxt=this.childNodes[2].textContent; from=this.getAttribute("from").split(","); to=this.getAttribute("to").split(","); }else{ oldTxt=this.childNodes[1].innerHTML; var n=this.getAttribute("fromTo").split(","); from=[n[0],n[1]]; to=[n[2],n[3]]; } if(This.$lineData[this.id].type=="lr"){ from[0]=This.$lineData[this.id].M; to[0]=from[0]; } else if(This.$lineData[this.id].type=="tb"){ from[1]=This.$lineData[this.id].M; to[1]=from[1]; } x=(parseInt(from[0],10)+parseInt(to[0],10))/2-60; y=(parseInt(from[1],10)+parseInt(to[1],10))/2-12; var t=getElCoordinate(This.$workArea[0]); This.$textArea.val(oldTxt).css({display:"block",width:120,height:14, left:t.left+x-This.$workArea[0].parentNode.scrollLeft, top:t.top+y-This.$workArea[0].parentNode.scrollTop}).data("id",This.$focus).focus(); This.$workArea.parent().one("mousedown",function(e){ This.setName(This.$textArea.data("id"),This.$textArea.val(),"line"); This.$textArea.val("").removeData("id").hide(); }); }); }, initGroup:function(width,height){ this.$group=$("
");//存放背景区域的容器 this.$workArea.prepend(this.$group); if(!this.$editable) return; //区域划分框操作区的事件绑定 this.$group.on("mousedown",{inthis:this},function(e){//绑定RESIZE功能以及移动功能 var This=e.data.inthis; if(This.$nowType!="group") return; if(This.$textArea.css("display")=="block"){ This.setName(This.$textArea.data("id"),This.$textArea.val(),"area"); This.$textArea.val("").removeData("id").hide(); return false; }; if(!e)e=window.event; var cursor=$(e.target).css("cursor"); var id=e.target.parentNode; switch(cursor){ case "nw-resize":id=id.parentNode;break; case "w-resize":id=id.parentNode;break; case "n-resize":id=id.parentNode;break; case "move":break; default:return; } id=id.id; var hack=1; if(navigator.userAgent.indexOf("8.0")!=-1) hack=0; var ev=mousePosition(e),t=getElCoordinate(This.$workArea[0]); This.$ghost.css({display:"block", width:This.$areaData[id].width-2+"px", height:This.$areaData[id].height-2+"px", top:This.$areaData[id].top+t.top-This.$workArea[0].parentNode.scrollTop+hack+"px", left:This.$areaData[id].left+t.left-This.$workArea[0].parentNode.scrollLeft+hack+"px",cursor:cursor}); var X,Y; X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; if(cursor!="move"){ var vX=(This.$areaData[id].left+This.$areaData[id].width)-X; var vY=(This.$areaData[id].top+This.$areaData[id].height)-Y; } else{ var vX=X-This.$areaData[id].left; var vY=Y-This.$areaData[id].top; } var isMove=false; This.$ghost.css("cursor",cursor); document.onmousemove=function(e){ if(!e)e=window.event; var ev=mousePosition(e); if(cursor!="move"){ X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft-This.$areaData[id].left+vX; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop-This.$areaData[id].top+vY; if(X<200) X=200; if(Y<100) Y=100; switch(cursor){ case "nw-resize":This.$ghost.css({width:X-2+"px",height:Y-2+"px"});break; case "w-resize":This.$ghost.css({width:X-2+"px"});break; case "n-resize":This.$ghost.css({height:Y-2+"px"});break; } } else{ X=ev.x-vX;Y=ev.y-vY; if(Xt.left+This.$workArea.width()) X=t.left+This.$workArea.width()-This.$workArea[0].parentNode.scrollLeft-This.$areaData[id].width; if(Yt.top+This.$workArea.height()) Y=t.top+This.$workArea.height()-This.$workArea[0].parentNode.scrollTop-This.$areaData[id].height; This.$ghost.css({left:X+hack+"px",top:Y+hack+"px"}); } isMove=true; } document.onmouseup=function(e){ This.$ghost.empty().hide(); document.onmousemove=null; document.onmouseup=null; if(!isMove)return; if(cursor!="move") This.resizeArea(id,This.$ghost.outerWidth(),This.$ghost.outerHeight()); else This.moveArea(id,X+This.$workArea[0].parentNode.scrollLeft-t.left,Y+This.$workArea[0].parentNode.scrollTop-t.top); } }); //绑定修改文字说明功能 this.$group.on("dblclick",{inthis:this},function(e){ var This=e.data.inthis; if(This.$nowType!="group") return; if(!e)e=window.event; if(e.target.tagName!="LABEL") return false; var oldTxt=e.target.innerHTML; var p=e.target.parentNode; var x=parseInt(p.style.left,10)+18,y=parseInt(p.style.top,10)+1; var t=getElCoordinate(This.$workArea[0]); This.$textArea.val(oldTxt).css({display:"block",width:100,height:14, left:t.left+x-This.$workArea[0].parentNode.scrollLeft, top:t.top+y-This.$workArea[0].parentNode.scrollTop}).data("id",p.id).focus(); This.$workArea.parent().one("mousedown",function(e){ if(This.$textArea.css("display")=="block"){ This.setName(This.$textArea.data("id"),This.$textArea.val(),"area"); This.$textArea.val("").removeData("id").hide(); } }); return false; }); this.$group.on("click",{inthis:this},function(e){ var This=e.data.inthis; if(This.$nowType!="group") return; if(!e)e=window.event; switch($(e.target).attr("class")){ case "rs_close": This.delArea(e.target.parentNode.parentNode.id);return false;//删除该分组区域 case "bg": return false; } switch(e.target.tagName){ case "LABEL": return false; case "B"://绑定变色功能 var id=e.target.parentNode.id; switch(This.$areaData[id].color){ case "red": This.setAreaColor(id,"yellow");break; case "yellow": This.setAreaColor(id,"blue");break; case "blue": This.setAreaColor(id,"green");break; case "green": This.setAreaColor(id,"red");break; } return false; } var X,Y; var ev=mousePosition(e),t=getElCoordinate(this); X=ev.x-t.left+this.parentNode.parentNode.scrollLeft; Y=ev.y-t.top+this.parentNode.parentNode.scrollTop; var color=["red","yellow","blue","green"]; e.data.inthis.addArea(e.data.inthis.$id+"_area_"+e.data.inthis.$max,{name:"area_"+e.data.inthis.$max,left:X,top:Y,color:color[e.data.inthis.$max%4],width:200,height:100}); e.data.inthis.$max++; return false; }); }, //每一种类型结点及其按钮的说明文字 setNodeRemarks:function(remark){ if(property.haveTool==false){return;} this.$tool.children("a").each(function(){ this.title=remark[$(this).attr("id").split("btn_")[1]]; }); this.$nodeRemark=remark; }, //切换左边工具栏按钮,传参TYPE表示切换成哪种类型的按钮 switchToolBtn:function(type){ if(!this.$tool)return this.$tool.children("#"+this.$id+"_btn_"+this.$nowType).attr("class","GooFlow_tool_btn"); if(this.$nowType=="group"){ this.$workArea.prepend(this.$group); for(var key in this.$areaDom) this.$areaDom[key].addClass("lock").children("div:eq(1)").css("display","none"); } this.$nowType=type; this.$tool.children("#"+this.$id+"_btn_"+type).attr("class","GooFlow_tool_btndown"); if(this.$nowType=="group"){ this.blurItem(); this.$workArea.append(this.$group); for(var key in this.$areaDom) this.$areaDom[key].removeClass("lock").children("div:eq(1)").css("display",""); } if(this.$textArea.css("display")=="none") this.$textArea.removeData("id").val("").hide(); }, //增加一个流程结点,传参为一个JSON,有id,name,top,left,width,height,type(结点类型)等属性 addNode:function(id,json){ if(this.onItemAdd!=null&&!this.onItemAdd(id,"node")){ return; }; if(this.$undoStack){ this.pushOper("delNode",[id]); } var mark=json.mark? " item_mark":""; for(var key in this.$nodeData){ if(this.$nodeData[key].id==id){ console.log("same id") return; } } //计算$max最大值,防止ID重复 // var IDMAX=parseInt(id.replace(/[^0-9]/ig,"")); // if(this.$max<=IDMAX){ // this.$max=IDMAX+1 // }; json.id=id; if(!json.step){json.step=0} if(json.type!="start"&&json.type!="end"){ if(json) json.width=json.width? json.width:40; /* 再改,"并行"、"可变" 节点的高度改为 28px 了。Lin * 同时,并行/分支 节点的属性窗口,不能改名称 -- 只显示 json.height=json.height? json.height:40; */ if (json.name == "并行") // 实际上,只有 "并行","可变" 是在 "并行" 属性窗口里,设置后才成为 "可变"。Lin json.height=json.height? json.height:30; else json.height=json.height? json.height:40; if(json.top<0)json.top=0; if(json.left<0)json.left=0; var hack=0; if(navigator.userAgent.indexOf("8.0")!=-1) hack=2; //this.$nodeDom[id]=$("
"+json.name+"
"); //decision图标 if(json.type=="node"){ // console.log("add 1 node") /* 再改,去掉
"+json.name+"
"); */ this.$nodeDom[id]=$("
"+json.name+"
"); // this.$nodeDom[id]=$("
"+json.name+"
"); } //task图标 if(json.type=="task"){ if(json.name.length*12>json.width){json.width=json.name.length*13} // console.log("add 1 task") //this.$nodeDom[id]=$("
"+json.name+"
"); if(json.height<40){json.height=40} if(json.width<80){json.width=80} /* "N" 改为 "No"。Lin this.$nodeDom[id]=$("
N
"+json.name+"
"); */ this.$nodeDom[id]=$("
No
"+json.name+"
"); } //transmit转发图标 if(json.type=="transmit"){ if(json.name.length*12>json.width){json.width=json.name.length*13} // console.log("add 1 task") //this.$nodeDom[id]=$("
"+json.name+"
"); if(json.height<40){json.height=40} if(json.width<80){json.width=80} /* 再改,去掉
"+json.name+"
"); */ this.$nodeDom[id]=$("
"+json.name+"
"); } //子流程 if(json.type=="subprocess"){ if(json.name.length*12>json.width){json.width=json.name.length*13} // console.log("add 1 task") //this.$nodeDom[id]=$("
"+json.name+"
"); if(json.height<40){json.height=40} if(json.width<80){json.width=80} /* "N" 改为 "No"。Lin * 再改,去掉
N
"+json.name+"
"); */ /* 再改,不能去掉
No
"+json.name+"
");*/ this.$nodeDom[id]=$("
No
"+json.name+"
"); } //fork if(json.type=="fork"){ // console.log("add 1 fork") /* 再改,去掉
"+json.name+"
"); */ this.$nodeDom[id]=$("
"+json.name+"
"); } //join if(json.type=="join"){ // console.log("add 1 join") /* 再改,去掉
"+json.name+"
"); */ this.$nodeDom[id]=$("
"+json.name+"
"); } //join if(json.type=="foreach"){ // console.log("add 1 foreach") /* 再改,去掉
"+json.name+"
");*/ this.$nodeDom[id]=$("
"+json.name+"
"); } if(json.type=='complex') this.$nodeDom[id].addClass('item_complex'); } else{ json.width=21;json.height=21; // console.log("add start end") this.$nodeDom[id]=$("
"+json.name+"
"); } var ua=navigator.userAgent.toLowerCase(); if(ua.indexOf('msie')!=-1 && ua.indexOf('8.0')!=-1) this.$nodeDom[id].css("filter","progid:DXImageTransform.Microsoft.Shadow(color=#94AAC2,direction=135,strength=2)"); this.$workArea.append(this.$nodeDom[id]); this.$nodeData[id]=json; ++this.$nodeCount; }, initWorkForNode:function(){ this.$workArea.delegate(".GooFlow_item","click",{inthis:this},function(e){ e.data.inthis.focusItem(this.id,true); $(this).removeClass("item_mark"); }); //自定义 绑定双击事件 // this.$workArea.delegate(".GooFlow_item > .settask","dblclick",{inthis:this},function(e){ // control_planel(this.parentNode.id); // }); var bbb=1 var time=0 setInterval(function(){ time=time+100; if(time>=1000){ time=0;} },100) var temptarget=null //双击检测 var doubleClick= function(){ return function(){ var e=window.event; var temp=$(e.target).parents("div")[0].id if(e.target.className=="span")return if(bbb==2){ temptarget=temp } temptarget if(bbb==4&&time<=1500&&temptarget==temp){ //弹窗编辑 settingIt(this) } if(bbb==4){ bbb=1;temptarget=null }else{bbb=bbb+1} } } $(".GooFlow_item").on("mousedown",doubleClick()).on("mouseup",doubleClick()) //绑定用鼠标移动事件 this.$workArea.delegate(".ico","mousedown",{inthis:this},function(e){ if(!e)e=window.event; var This=e.data.inthis; if(This.$nowType=="direct") return; var Dom=$(this).parents(".GooFlow_item"); var id=Dom.attr("id"); This.focusItem(id,true); var hack=1; if(navigator.userAgent.indexOf("8.0")!=-1) hack=0; var ev=mousePosition(e),t=getElCoordinate(This.$workArea[0]); This.$ghost.css({display:"block", width:This.$nodeData[id].width+5+"px", height:This.$nodeData[id].height+"px", top:This.$nodeData[id].top+t.top-This.$workArea[0].parentNode.scrollTop+hack+"px", left:This.$nodeData[id].left+t.left-This.$workArea[0].parentNode.scrollLeft+hack+"px",cursor:"move" }); Dom.children("table").clone().prependTo(This.$ghost); var X,Y; X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; var vX=X-This.$nodeData[id].left,vY=Y-This.$nodeData[id].top; var isMove=false; document.onmousemove=function(e){ haveDrag=true if(!e)e=window.event; var ev=mousePosition(e); X=ev.x-vX; Y=ev.y-vY; if(Xt.left+This.$workArea.width()) X=t.left+This.$workArea.width()-This.$workArea[0].parentNode.scrollLeft-This.$nodeData[id].width; if(Yt.top+This.$workArea.height()) Y=t.top+This.$workArea.height()-This.$workArea[0].parentNode.scrollTop-This.$nodeData[id].height; This.$ghost.css({left:X+hack+"px",top:Y+hack+"px"}); isMove=true; } document.onmouseup=function(e){ if(isMove)This.moveNode(id,X+This.$workArea[0].parentNode.scrollLeft-t.left,Y+This.$workArea[0].parentNode.scrollTop-t.top); This.$ghost.empty().hide(); document.onmousemove=null; document.onmouseup=null; } }); if(!this.$editable) return; //绑定鼠标覆盖/移出事件 this.$workArea.delegate(".GooFlow_item","mouseenter",{inthis:this},function(e){ if(e.data.inthis.$nowType!="direct") return; $(this).addClass("item_mark"); }); this.$workArea.delegate(".GooFlow_item","mouseleave",{inthis:this},function(e){ if(e.data.inthis.$nowType!="direct") return; $(this).removeClass("item_mark"); }); //绑定连线时确定初始点 this.$workArea.delegate(".GooFlow_item","mousedown",{inthis:this},function(e){ // console.log(e.target) var This=e.data.inthis; if(This.$nowType!="direct") return; var ev=mousePosition(e),t=getElCoordinate(This.$workArea[0]); var X,Y; X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; // console.log(X+" "+Y) This.$workArea.data("lineStart",{"x":X,"y":Y,"id":this.id}).css("cursor","crosshair"); var line=GooFlow.prototype.drawLine("GooFlow_tmp_line",[X,Y],[X,Y],true,true); This.$draw.appendChild(line); }); //绑定连线时确定结束点 this.$workArea.delegate(".GooFlow_item","mouseup",{inthis:this},function(e){ var This=e.data.inthis; if(This.$nowType!="direct") return; var lineStart=This.$workArea.data("lineStart"); var json={from:lineStart.id,to:this.id,name:""} if(fromRejectLine){ json.status="reject"; //匿名函数,判断生成rejectline type if(function(This,json){ var fromNode=This.$nodeData[json.from]; var toNode=This.$nodeData[json.to]; var l = Math.abs(fromNode.top-toNode.top) var t=Math.abs(fromNode.left-toNode.left) if(l>t){ return false }else{ return true} }(This,json)){ //纵向 json.type="tb"; json.M=Math.abs(This.$nodeData[json.from].left,This.$nodeData[json.to].left)+20; }else{ //横向 json.type="lr"; json.M=Math.abs(This.$nodeData[json.from].top,This.$nodeData[json.to].top)+20 } json.name="退回" // 显示在图上的。Lin }else{ json.status="agree" } fromRejectLine=false // if(lineStart) This.addLine(This.$id+"_line_"+This.$max,json); if(lineStart) This.addLine(composeId("line"),json); // This.$max++; }); //绑定双击编辑事件 // this.$workArea.delegate(".GooFlow_item > .span","dblclick",{inthis:this},function(e){ // var oldTxt=this.innerHTML; // var This=e.data.inthis; // var id=this.parentNode.id; // // var t=getElCoordinate(This.$workArea[0]); // This.$textArea.val(oldTxt).css({display:"block",height:$(this).height(),width:100, // left:t.left+This.$nodeData[id].left-This.$workArea[0].parentNode.scrollLeft-24, // top:t.top+This.$nodeData[id].top-This.$workArea[0].parentNode.scrollTop+26}) // .data("id",This.$focus).focus(); // This.$workArea.parent().one("mousedown",function(e){ // console.log(This.$textArea.val()) // This.setName(This.$textArea.data("id"),This.$textArea.val(),"node"); // This.$textArea.val("").removeData("id").hide(); // }); // }); this.$workArea.delegate(".ico + td","dblclick",{inthis:this},function(e){ var oldTxt=this.innerHTML; var This=e.data.inthis; var id=$(this).parents(".GooFlow_item").attr("id"); // console.log("内部:"+id) var t=getElCoordinate(This.$workArea[0]); This.$textArea.val(oldTxt).css({display:"block",width:$(this).width()+24,height:$(this).height(), left:t.left+24+This.$nodeData[id].left-This.$workArea[0].parentNode.scrollLeft, top:t.top+2+This.$nodeData[id].top-This.$workArea[0].parentNode.scrollTop}) .data("id",This.$focus).focus(); This.$workArea.parent().one("mousedown",function(e){ // console.log("write:"+This.$textArea.val()); This.setName(This.$textArea.data("id"),This.$textArea.val(),"node"); This.$textArea.val("").removeData("id").hide(); }); }); //绑定结点的删除功能 this.$workArea.delegate(".rs_close","click",{inthis:this},function(e){ if(!e)e=window.event; e.data.inthis.delNode(e.data.inthis.$focus); return false; }); //绑定设置框 this.$workArea.delegate(".rs_control","click",{inthis:this},function(e){ if(!e)e=window.event; var node=e.data.inthis.$focus control.show(e.data.inthis.$nodeData[node]) return false; }); this.$workArea.delegate(".rs_rejectline","mousedown",{inthis:this},function(e){ if(!e)e=window.event; var This=e.data.inthis; var nodeId=this.parentNode.parentNode.id; var lines=This.$lineData; // 仅允许一条退回线 for(var key in lines){ if(lines[key].from==nodeId&&lines[key].status=="reject"){ alert("退线已存在") return false } } This.$nowType="direct" fromRejectLine=true; this.style.background="red"; var ev=mousePosition(e),t=getElCoordinate(This.$workArea[0]); var X,Y; X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; //console.log(X+" "+Y); This.$workArea.data("lineStart",{"x":X,"y":Y,"id":nodeId}).css("cursor","crosshair"); var line=GooFlow.prototype.drawLine("GooFlow_tmp_line",[X,Y],[X,Y],true,true); This.$draw.appendChild(line); return false; }); //绑定结点的RESIZE功能 this.$workArea.delegate(".GooFlow_item > div > div[class!=rs_close]","mousedown",{inthis:this},function(e){ if(!e)e=window.event; var cursor=$(this).css("cursor"); if(cursor=="pointer"){return;} var This=e.data.inthis; var id=This.$focus; This.switchToolBtn("cursor"); e.cancelBubble = true; e.stopPropagation(); var hack=1; if(navigator.userAgent.indexOf("8.0")!=-1) hack=0; var ev=mousePosition(e),t=getElCoordinate(This.$workArea[0]); This.$ghost.css({display:"block", width:This.$nodeData[id].width-2+"px", height:This.$nodeData[id].height-2+"px", top:This.$nodeData[id].top+t.top-This.$workArea[0].parentNode.scrollTop+hack+"px", left:This.$nodeData[id].left+t.left-This.$workArea[0].parentNode.scrollLeft+hack+"px",cursor:cursor }); var X,Y; X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; var vX=(This.$nodeData[id].left+This.$nodeData[id].width)-X; var vY=(This.$nodeData[id].top+This.$nodeData[id].height)-Y; var isMove=false; This.$ghost.css("cursor",cursor); document.onmousemove=function(e){ // console.log("dddddd"); if(typeof This.$nodeData[id] =="undefined"){ document.onmousemove=null; return; } if(!e)e=window.event; var ev=mousePosition(e); X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft-This.$nodeData[id].left+vX; Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop-This.$nodeData[id].top+vY; if(X<24) X=24; if(Y<24) Y=24; isMove=true; switch(cursor){ case "nw-resize":This.$ghost.css({width:X-2+"px",height:Y-2+"px"});break; case "w-resize":This.$ghost.css({width:X-2+"px"});break; case "n-resize":This.$ghost.css({height:Y-2+"px"});break; } } document.onmouseup=function(e){ This.$ghost.hide(); if(!isMove)return; if(!e)e=window.event; This.resizeNode(id,This.$ghost.outerWidth(),This.$ghost.outerHeight()); document.onmousemove=null; document.onmouseup=null; } }); }, //获取结点/连线/分组区域的详细信息 getItemInfo:function(id,type){ switch(type){ case "node": return this.$nodeData[id]||null; case "line": return this.$lineData[id]||null; case "area": return this.$areaData[id]||null; } }, //取消所有结点/连线被选定的状态 blurItem:function(){ // console.log(this.$focus); if(this.$focus!=""){ var jq=$("#"+this.$focus); if(jq.prop("tagName")=="DIV"){ if(this.onItemBlur!=null&&!this.onItemBlur(id,"node")) return false; jq.removeClass("item_focus").children("div:eq(0)").css("display","none"); } else{ if(this.onItemBlur!=null&&!this.onItemBlur(id,"line")) return false; if(GooFlow.prototype.useSVG!=""){ if(!this.$lineData[this.$focus].marked){ jq[0].childNodes[1].setAttribute("stroke","#5068AE"); jq[0].childNodes[1].setAttribute("marker-end","url(#arrow1)"); } } else{ if(!this.$lineData[this.$focus].marked) jq[0].strokeColor="#5068AE"; } this.$lineMove.hide().removeData("type").removeData("tid"); if(this.$editable) this.$lineOper.hide().removeData("tid"); } } this.$focus=""; return true; }, //选定某个结点/转换线 bool:TRUE决定了要触发选中事件,FALSE则不触发选中事件,多用在程序内部调用。 focusItem:function(id,bool,blurItem){ var jq=$("#"+id); if(jq.length==0) return; if(!blurItem){ if(!this.blurItem()) return;//先执行"取消选中",如果返回FLASE,则也会阻止选定事件继续进行. } if(jq.prop("tagName")=="DIV"){ if(bool&&this.onItemFocus!=null&&!this.onItemFocus(id,"node")) return; jq.addClass("item_focus"); if(this.$editable)jq.children("div:eq(0)").css("display","block"); this.$workArea.append(jq); } else{//如果是连接线 if(this.onItemFocus!=null&&!this.onItemFocus(id,"line")) return; if(GooFlow.prototype.useSVG!=""){ jq[0].childNodes[1].setAttribute("stroke","#ff3300"); jq[0].childNodes[1].setAttribute("marker-end","url(#arrow2)"); } else jq[0].strokeColor="#ff3300"; if(!this.$editable) return; var x,y,from,to; if(GooFlow.prototype.useSVG!=""){ from=jq.attr("from").split(","); to=jq.attr("to").split(","); }else{ var n=jq[0].getAttribute("fromTo").split(","); from=[n[0],n[1]]; to=[n[2],n[3]]; } from[0]=parseInt(from[0],10); from[1]=parseInt(from[1],10); to[0]=parseInt(to[0],10); to[1]=parseInt(to[1],10); //var t=getElCoordinate(this.$workArea[0]); if(this.$lineData[id].type=="lr"){ from[0]=this.$lineData[id].M; to[0]=from[0]; this.$lineMove.css({ width:"5px",height:(to[1]-from[1])*(to[1]>from[1]? 1:-1)+"px", left:from[0]-3+"px", top:(to[1]>from[1]? from[1]:to[1])+1+"px", cursor:"e-resize",display:"block" }).data({"type":"lr","tid":id}); } else if(this.$lineData[id].type=="tb"){ from[1]=this.$lineData[id].M; to[1]=from[1]; this.$lineMove.css({ width:(to[0]-from[0])*(to[0]>from[0]? 1:-1)+"px",height:"5px", left:(to[0]>from[0]? from[0]:to[0])+1+"px", top:from[1]-3+"px", cursor:"s-resize",display:"block" }).data({"type":"tb","tid":id}); } x=(from[0]+to[0])/2-35; y=(from[1]+to[1])/2+6; this.$lineOper.css({display:"block",left:x+"px",top:y+"px"}).data("tid",id); } this.$focus=id; this.switchToolBtn("cursor"); }, //移动结点到一个新的位置 moveNode:function(id,left,top){ if(!this.$nodeData[id]) return; if(this.onItemMove!=null&&!this.onItemMove(id,"node")) return; if(this.$undoStack){ var paras=[id,this.$nodeData[id].left,this.$nodeData[id].top]; this.pushOper("moveNode",paras); } // $(".decisionLine").remove(); if(left<0) left=0; if(top<0) top=0; // if(this.$nodeData[id].type=="node"){ // initDecisionLine($("#" + id), this.$nodeData[id].condition_name.length); moveDececisionLine($("#" + id)) // } $("#"+id).css({left:left+"px",top:top+"px"}); this.$nodeData[id].left=left; this.$nodeData[id].top=top; //重画转换线 this.resetLines(id,this.$nodeData[id]); }, //设置结点/连线/分组区域的文字信息 setName:function(id,name,type){ var oldName; if(type=="node"){ //如果是结点 if(!this.$nodeData[id]) return; // if(this.$nodeData[id].name==name)return; if(this.onItemRename!=null&&!this.onItemRename(id,name,"node")) return; oldName=this.$nodeData[id].name; this.$nodeData[id].name=name; if(this.$nodeData[id].type=="start"||this.$nodeData[id].type=="end"||this.$nodeData[id].type=="node"||this.$nodeData[id].type=="task"||this.$nodeData[id].type=="fork"||this.$nodeData[id].type=="join"||this.$nodeData[id].type=="foreach"||this.$nodeData[id].type=="transmit"){ this.$nodeDom[id].children(".span").text(name); } else{ this.$nodeDom[id].find("td:eq(1)").text(name); var hack=0; if(navigator.userAgent.indexOf("8.0")!=-1) hack=2; var width=this.$nodeDom[id].outerWidth(); var height=this.$nodeDom[id].outerHeight(); this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"}); this.$nodeData[id].width=width; this.$nodeData[id].height=height; } //重画转换线 this.resetLines(id,this.$nodeData[id]); } else if(type=="line"){//如果是线 if(!this.$lineData[id]) return; if(this.$lineData[id].name==name) return; if(this.onItemRename!=null&&!this.onItemRename(id,name,"line")) return; oldName=this.$lineData[id].name; this.$lineData[id].name=name; if(GooFlow.prototype.useSVG!=""){ this.$lineDom[id].childNodes[2].textContent=name; } else{ this.$lineDom[id].childNodes[1].innerHTML=name; var n=this.$lineDom[id].getAttribute("fromTo").split(","); var x; if(this.$lineData[id].type!="lr"){ x=(n[2]-n[0])/2; } else{ var Min=n[2]>n[0]? n[0]:n[2]; if(Min>this.$lineData[id].M) Min=this.$lineData[id].M; x=this.$lineData[id].M-Min; } if(x<0) x=x*-1; this.$lineDom[id].childNodes[1].style.left=x-this.$lineDom[id].childNodes[1].offsetWidth/2+4+"px"; } } else if(type=="area"){//如果是分组区域 if(!this.$areaData[id]) return; if(this.$areaData[id].name==name) return; if(this.onItemRename!=null&&!this.onItemRename(id,name,"area")) return; oldName=this.$areaData[id].name; this.$areaData[id].name=name; this.$areaDom[id].children("label").text(name); } if(this.$undoStack){ var paras=[id,oldName,type]; this.pushOper("setName",paras); } }, //设置结点的尺寸,仅支持非开始/结束结点 resizeNode:function(id,width,height){ return; // 再增加,不要 resizeNode(。Lin if(!this.$nodeData[id]) return; if(this.onItemResize!=null&&!this.onItemResize(id,"node")) return; if(this.$nodeData[id].type=="start"||this.$nodeData[id].type=="end")return; if(this.$undoStack){ var paras=[id,this.$nodeData[id].width,this.$nodeData[id].height]; this.pushOper("resizeNode",paras); } var hack=0; if(navigator.userAgent.indexOf("8.0")!=-1) hack=2; this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"}); width=this.$nodeDom[id].outerWidth()-hack; height=this.$nodeDom[id].outerHeight()-hack; this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"}); this.$nodeData[id].width=width; this.$nodeData[id].height=height; //重画转换线 this.resetLines(id,this.$nodeData[id]); }, //删除结点 delNode:function(id){ if(!this.$nodeData[id]) return; if(this.$undoStack){ var paras=[id,this.$nodeData[id]]; this.pushOper("addNode",paras); } if(this.onItemDel!=null&&!this.onItemDel(id,"node")) return; delete this.$nodeData[id]; this.$nodeDom[id].remove(); delete this.$nodeDom[id]; --this.$nodeCount; if(this.$focus==id) this.$focus=""; for(var k in this.$lineData){ if(this.$lineData[k].from==id||this.$lineData[k].to==id){ this.$draw.removeChild(this.$lineDom[k]); delete this.$lineData[k]; delete this.$lineDom[k]; } } // $(".decisionLine").remove(); }, //设置流程图的名称 setTitle:function(text){ this.$title=text; if(this.$head) this.$head.children("label").attr("title",text).text(text); }, //载入一组数据 loadData:function(data){ this.setTitle(data.title); for(var i in data.nodes) this.addNode(i,data.nodes[i]); for(var j in data.lines) this.addLine(j,data.lines[j]); for(var k in data.areas) this.addArea(k,data.areas[k]); // console.log(data.objectKey) if(data.objectKey){ this.$objectKey=data.objectKey } }, //用AJAX方式,远程读取一组数据 //参数para为JSON结构,与JQUERY中$.ajax()方法的传参一样 loadDataAjax:function(para){ var This=this; $.ajax({ type:para.type, url:para.url, dataType:"json", data:para.data, success: function(msg){ if(para.dataFilter) para.dataFilter(msg,"json"); This.loadData(msg); if(para.success) para.success(msg); }, error: function(XMLHttpRequest, textStatus, errorThrown){ if(para.error) para.error(textStatus,errorThrown); } }) }, //把画好的结束导出到一个变量中(其实也可以直接访问GooFlow对象的$nodeData,$lineData,$areaData这三个JSON属性) exportData:function(){ return {nodes:this.$nodeData,lines:this.$lineData,objectKey:this.$objectKey}; }, //清空工作区及已载入的数据 clearData:function(){ for(var key in this.$nodeData){ this.delNode(key); } for(var key in this.$lineData){ this.delLine(key); } for(var key in this.$areaData){ this.delArea(key); } }, //销毁自己 destrory:function(){ this.$bgDiv.empty(); this.$lineData=null; this.$nodeData=null; this.$lineDom=null; this.$nodeDom=null; this.$areaDom=null; this.$areaData=null; this.$nodeCount=0; this.$areaCount=0; this.$areaCount=0; }, ///////////以下为有关画线的方法 //绘制一条箭头线,并返回线的DOM drawLine:function(id,sp,ep,mark,dash){ var line; if(GooFlow.prototype.useSVG!=""){ line=document.createElementNS("http://www.w3.org/2000/svg","g"); var hi=document.createElementNS("http://www.w3.org/2000/svg","path"); var path=document.createElementNS("http://www.w3.org/2000/svg","path"); if(id!="") line.setAttribute("id",id); line.setAttribute("from",sp[0]+","+sp[1]); line.setAttribute("to",ep[0]+","+ep[1]); hi.setAttribute("visibility","hidden"); hi.setAttribute("stroke-width",9); hi.setAttribute("fill","none"); hi.setAttribute("stroke","white"); hi.setAttribute("d","M "+sp[0]+" "+sp[1]+" L "+ep[0]+" "+ep[1]); hi.setAttribute("pointer-events","stroke"); path.setAttribute("d","M "+sp[0]+" "+sp[1]+" L "+ep[0]+" "+ep[1]); path.setAttribute("stroke-width",2); path.setAttribute("stroke-linecap","round"); path.setAttribute("fill","none"); if(dash) path.setAttribute("style", "stroke-dasharray:6,5"); if(mark){ path.setAttribute("stroke","#ff3300"); path.setAttribute("marker-end","url(#arrow2)"); } else{ path.setAttribute("stroke","#333"); /*线的颜色*/ path.setAttribute("marker-end","url(#arrow1)"); } line.appendChild(hi); line.appendChild(path); line.style.cursor="crosshair"; if(id!=""&&id!="GooFlow_tmp_line"){ var text=document.createElementNS("http://www.w3.org/2000/svg","text"); //text.textContent=id; line.appendChild(text); var x=(ep[0]+sp[0])/2; var y=(ep[1]+sp[1])/2; text.setAttribute("text-anchor","middle"); text.setAttribute("x",x); text.setAttribute("y",y); line.style.cursor="pointer"; text.style.cursor="text"; } }else{ line=document.createElement("v:polyline"); if(id!="") line.id=id; //line.style.position="absolute"; line.points.value=sp[0]+","+sp[1]+" "+ep[0]+","+ep[1]; line.setAttribute("fromTo",sp[0]+","+sp[1]+","+ep[0]+","+ep[1]); line.strokeWeight="1.2"; line.stroke.EndArrow="Block"; line.style.cursor="crosshair"; if(id!=""&&id!="GooFlow_tmp_line"){ var text=document.createElement("div"); //text.innerHTML=id; line.appendChild(text); var x=(ep[0]-sp[0])/2; var y=(ep[1]-sp[1])/2; if(x<0) x=x*-1; if(y<0) y=y*-1; text.style.left=x+"px"; text.style.top=y-6+"px"; line.style.cursor="pointer"; } if(dash) line.stroke.dashstyle="Dash"; if(mark) line.strokeColor="#333"; else line.strokeColor="#333"; } return line; }, //画一条只有两个中点的折线 drawPoly:function(id,sp,m1,m2,ep,mark){ var poly,strPath; if(GooFlow.prototype.useSVG!=""){ poly=document.createElementNS("http://www.w3.org/2000/svg","g"); var hi=document.createElementNS("http://www.w3.org/2000/svg","path"); var path=document.createElementNS("http://www.w3.org/2000/svg","path"); if(id!="") poly.setAttribute("id",id); poly.setAttribute("from",sp[0]+","+sp[1]); poly.setAttribute("to",ep[0]+","+ep[1]); hi.setAttribute("visibility","hidden"); hi.setAttribute("stroke-width",9); hi.setAttribute("fill","none"); hi.setAttribute("stroke","white"); strPath="M "+sp[0]+" "+sp[1]; if(m1[0]!=sp[0]||m1[1]!=sp[1]) strPath+=" L "+m1[0]+" "+m1[1]; if(m2[0]!=ep[0]||m2[1]!=ep[1]) strPath+=" L "+m2[0]+" "+m2[1]; strPath+=" L "+ep[0]+" "+ep[1]; hi.setAttribute("d",strPath); hi.setAttribute("pointer-events","stroke"); path.setAttribute("d",strPath); path.setAttribute("stroke-width",2); path.setAttribute("stroke-linecap","round"); path.setAttribute("fill","none"); if(mark){ path.setAttribute("stroke","#333"); path.setAttribute("marker-end","url(#arrow2)"); } else{ path.setAttribute("stroke","#333"); /*绘制线的颜色*/ path.setAttribute("marker-end","url(#arrow1)"); } poly.appendChild(hi); poly.appendChild(path); var text=document.createElementNS("http://www.w3.org/2000/svg","text"); //text.textContent=id; poly.appendChild(text); var x=(m2[0]+m1[0])/2; var y=(m2[1]+m1[1])/2 -3; // 增加 -3,避免文字和横向重叠。Lin text.setAttribute("text-anchor","middle"); text.setAttribute("x",x); text.setAttribute("y",y); text.style.cursor="text"; poly.style.cursor="pointer"; } else{ poly=document.createElement("v:Polyline"); if(id!="") poly.id=id; poly.filled="false"; strPath=sp[0]+","+sp[1]; if(m1[0]!=sp[0]||m1[1]!=sp[1]) strPath+=" "+m1[0]+","+m1[1]; if(m2[0]!=ep[0]||m2[1]!=ep[1]) strPath+=" "+m2[0]+","+m2[1]; strPath+=" "+ep[0]+","+ep[1]; poly.points.value=strPath; poly.setAttribute("fromTo",sp[0]+","+sp[1]+","+ep[0]+","+ep[1]); poly.strokeWeight="1.2"; poly.stroke.EndArrow="Block"; var text=document.createElement("div"); //text.innerHTML=id; poly.appendChild(text); var x=(m2[0]-m1[0])/2; var y=(m2[1]-m1[1])/2; if(x<0) x=x*-1; if(y<0) y=y*-1; text.style.left=x+"px"; text.style.top=y-4+"px"; poly.style.cursor="pointer"; if(mark) poly.strokeColor="#ff3300"; else poly.strokeColor="#5068AE" } return poly; }, //计算两个结点间要连直线的话,连线的开始坐标和结束坐标 calcStartEnd:function(n1,n2){ var X_1,Y_1,X_2,Y_2; //X判断: var x11=n1.left,x12=n1.left+n1.width; var x21=n2.left,x22=n2.left+n2.width; //结点2在结点1左边 if(x11>=x22){ X_1=x11;X_2=x22; if(n1.type=="node"){X_1=X_1+10} } //结点2在结点1右边 else if(x12<=x21){ X_1=x12;X_2=x21; if(n1.type=="node"){X_1=X_1-10} } //结点2在结点1水平部分重合 else if(x11<=x21&&x12>=x21&&x12<=x22){ X_1=(x12+x21)/2;X_2=X_1; } else if(x11>=x21&&x12<=x22){ X_1=(x11+x12)/2;X_2=X_1; } else if(x21>=x11&&x22<=x12){ X_1=(x21+x22)/2;X_2=X_1; } else if(x11<=x22&&x12>=x22){ X_1=(x11+x22)/2;X_2=X_1; } //Y判断: var y11=n1.top,y12=n1.top+n1.height; var y21=n2.top,y22=n2.top+n2.height; //结点2在结点1上边 if(y11>=y22){ Y_1=y11;Y_2=y22; if(n1.type=="node"){Y_1=Y_1+10} } //结点2在结点1下边 else if(y12<=y21){ Y_1=y12;Y_2=y21; if(n1.type=="type"){Y_1=Y_1-10} } //结点2在结点1垂直部分重合 else if(y11<=y21&&y12>=y21&&y12<=y22){ Y_1=(y12+y21)/2;Y_2=Y_1; } else if(y11>=y21&&y12<=y22){ Y_1=(y11+y12)/2;Y_2=Y_1; } else if(y21>=y11&&y22<=y12){ Y_1=(y21+y22)/2;Y_2=Y_1; } else if(y11<=y22&&y12>=y22){ Y_1=(y11+y22)/2;Y_2=Y_1; } return {"start":[X_1,Y_1],"end":[X_2,Y_2]}; }, //计算两个结点间要连折线的话,连线的所有坐标 calcPolyPoints:function(n1,n2,type,M){ //开始/结束两个结点的中心 var SP={x:n1.left+n1.width/2,y:n1.top+n1.height/2}; var EP={x:n2.left+n2.width/2,y:n2.top+n2.height/2}; var sp=[],m1=[],m2=[],ep=[]; //如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标 //粗略计算起始点 sp=[SP.x,SP.y]; ep=[EP.x,EP.y]; if(type=="lr"){ //粗略计算2个中点 m1=[M,SP.y]; m2=[M,EP.y]; //再具体分析修改开始点和中点1 if(m1[0]>n1.left&&m1[0]EP.y? n1.top:n1.top+n1.height); sp[0]=m1[0];sp[1]=m1[1]; } else{ sp[0]=(m1[0]n2.left&&m2[0]EP.y? n2.top+n2.height:n2.top); ep[0]=m2[0];ep[1]=m2[1]; } else{ ep[0]=(m2[0]n1.top&&m1[1]EP.x? n1.left:n1.left+n1.width); sp[0]=m1[0];sp[1]=m1[1]; } else{ sp[1]=(m1[1]n2.top&&m2[1]EP.x? n2.left+n2.width:n2.left); ep[0]=m2[0];ep[1]=m2[1]; } else{ ep[1]=(m2[1]=1&&json.status!="reject"){alert("普通线已存在"); return} //已存在reject线 //新增 退回线只限一条 if(rejectcount>=1&&json.status=="reject"){alert("退回线已存在");return } // console.log(json) var n1=this.$nodeData[json.from],n2=this.$nodeData[json.to];//获取开始/结束结点的数据 if(!n1||!n2) return; var res; if(json.type&&json.type!="sl") res=GooFlow.prototype.calcPolyPoints(n1,n2,json.type,json.M); else res=GooFlow.prototype.calcStartEnd(n1,n2); if(!res) return; this.$lineData[id]={}; if(json.type){ this.$lineData[id].type=json.type; this.$lineData[id].M=json.M; } else this.$lineData[id].type="sl";//默认为直线 this.$lineData[id].status=json.status; this.$lineData[id].from=json.from; this.$lineData[id].to=json.to; this.$lineData[id].name=json.name; //防止ID重复 // var IDMAX=parseInt(id.replace(/[^0-9]/ig,"")); // if(this.$maxres.end[0]? res.end[0]:res.start[0]); if(Min>res.m2[0]) Min=res.m2[0]; if(Min>res.m1[0]) Min=res.m1[0]; this.$lineDom[i].childNodes[1].style.left = (res.m2[0]+res.m1[0])/2-Min-this.$lineDom[id].childNodes[1].offsetWidth/2+4; Min=(res.start[1]>res.end[1]? res.end[1]:res.start[1]); if(Min>res.m2[1]) Min=res.m2[1]; if(Min>res.m1[1]) Min=res.m1[1]; this.$lineDom[id].childNodes[1].style.top = (res.m2[1]+res.m1[1])/2-Min-this.$lineDom[id].childNodes[1].offsetHeight/2; }else this.$lineDom[id].childNodes[1].style.left= ((res.end[0]-res.start[0])*(res.end[0]>res.start[0]? 1:-1)-this.$lineDom[id].childNodes[1].offsetWidth)/2+4; } else this.$lineDom[id].childNodes[2].textContent=json.name; ++this.$lineCount; }, //重构所有连向某个结点的线的显示,传参结构为$nodeData数组的一个单元结构 resetLines:function(id,node){ for(var i in this.$lineData){ var other=null;//获取结束/开始结点的数据 var res; if(this.$lineData[i].from==id){//找结束点 other=this.$nodeData[this.$lineData[i].to]||null; if(other==null) continue; if(this.$lineData[i].type=="sl") res=GooFlow.prototype.calcStartEnd(node,other); else res=GooFlow.prototype.calcPolyPoints(node,other,this.$lineData[i].type,this.$lineData[i].M) if(!res) break; } else if(this.$lineData[i].to==id){//找开始点 other=this.$nodeData[this.$lineData[i].from]||null; if(other==null) continue; if(this.$lineData[i].type=="sl") res=GooFlow.prototype.calcStartEnd(other,node); else res=GooFlow.prototype.calcPolyPoints(other,node,this.$lineData[i].type,this.$lineData[i].M); if(!res) break; } if(other==null) continue; this.$draw.removeChild(this.$lineDom[i]); if(this.$lineData[i].type=="sl"){ this.$lineDom[i]=GooFlow.prototype.drawLine(i,res.start,res.end,this.$lineData[i].marked); } else{ this.$lineDom[i]=GooFlow.prototype.drawPoly(i,res.start,res.m1,res.m2,res.end,this.$lineData[i].marked); } this.$draw.appendChild(this.$lineDom[i]); if(GooFlow.prototype.useSVG==""){ this.$lineDom[i].childNodes[1].innerHTML=this.$lineData[i].name; if(this.$lineData[i].type!="sl"){ var Min=(res.start[0]>res.end[0]? res.end[0]:res.start[0]); if(Min>res.m2[0]) Min=res.m2[0]; if(Min>res.m1[0]) Min=res.m1[0]; this.$lineDom[i].childNodes[1].style.left = (res.m2[0]+res.m1[0])/2-Min-this.$lineDom[i].childNodes[1].offsetWidth/2+4; Min=(res.start[1]>res.end[1]? res.end[1]:res.start[1]); if(Min>res.m2[1]) Min=res.m2[1]; if(Min>res.m1[1]) Min=res.m1[1]; this.$lineDom[i].childNodes[1].style.top = (res.m2[1]+res.m1[1])/2-Min-this.$lineDom[i].childNodes[1].offsetHeight/2-4; }else this.$lineDom[i].childNodes[1].style.left= ((res.end[0]-res.start[0])*(res.end[0]>res.start[0]? 1:-1)-this.$lineDom[i].childNodes[1].offsetWidth)/2+4; } else this.$lineDom[i].childNodes[2].textContent=this.$lineData[i].name; } }, //重新设置连线的样式 newType= "sl":直线, "lr":中段可左右移动型折线, "tb":中段可上下移动型折线 setLineType:function(id,newType){ if(!newType||newType==null||newType==""||newType==this.$lineData[id].type) return false; if(this.onLineSetType!=null&&!this.onLineSetType(id,newType)) return; if(this.$undoStack){ var paras=[id,this.$lineData[id].type]; this.pushOper("setLineType",paras); if(this.$lineData[id].type!="sl"){ var para2=[id,this.$lineData[id].M]; this.pushOper("setLineM",para2); } } var from=this.$lineData[id].from; var to=this.$lineData[id].to; this.$lineData[id].type=newType; var res; //如果是变成折线 if(newType!="sl"){ var res=GooFlow.prototype.calcPolyPoints(this.$nodeData[from],this.$nodeData[to],this.$lineData[id].type,this.$lineData[id].M); this.setLineM(id,this.getMValue(this.$nodeData[from],this.$nodeData[to],newType),true); } //如果是变回直线 else{ delete this.$lineData[id].M; this.$lineMove.hide().removeData("type").removeData("tid"); res=GooFlow.prototype.calcStartEnd(this.$nodeData[from],this.$nodeData[to]); if(!res) return; this.$draw.removeChild(this.$lineDom[id]); this.$lineDom[id]=GooFlow.prototype.drawLine(id,res.start,res.end,this.$lineData[id].marked||this.$focus==id); this.$draw.appendChild(this.$lineDom[id]); if(GooFlow.prototype.useSVG==""){ this.$lineDom[id].childNodes[1].innerHTML=this.$lineData[id].name; this.$lineDom[id].childNodes[1].style.left= ((res.end[0]-res.start[0])*(res.end[0]>res.start[0]? 1:-1)-this.$lineDom[id].childNodes[1].offsetWidth)/2+4; } else this.$lineDom[id].childNodes[2].textContent=this.$lineData[id].name; } if(this.$focus==id){ this.focusItem(id); } }, //设置折线中段的X坐标值(可左右移动时)或Y坐标值(可上下移动时) setLineM:function(id,M,noStack){ if(!this.$lineData[id]||M<0||!this.$lineData[id].type||this.$lineData[id].type=="sl") return false; if(this.onLineMove!=null&&!this.onLineMove(id,M)) return false; if(this.$undoStack&&!noStack){ var paras=[id,this.$lineData[id].M]; this.pushOper("setLineM",paras); } var from=this.$lineData[id].from; var to=this.$lineData[id].to; this.$lineData[id].M=M; var ps=GooFlow.prototype.calcPolyPoints(this.$nodeData[from],this.$nodeData[to],this.$lineData[id].type,this.$lineData[id].M); this.$draw.removeChild(this.$lineDom[id]); this.$lineDom[id]=GooFlow.prototype.drawPoly(id,ps.start,ps.m1,ps.m2,ps.end,this.$lineData[id].marked||this.$focus==id); this.$draw.appendChild(this.$lineDom[id]); if(GooFlow.prototype.useSVG==""){ this.$lineDom[id].childNodes[1].innerHTML=this.$lineData[id].name; var Min=(ps.start[0]>ps.end[0]? ps.end[0]:ps.start[0]); if(Min>ps.m2[0]) Min=ps.m2[0]; if(Min>ps.m1[0]) Min=ps.m1[0]; this.$lineDom[id].childNodes[1].style.left = (ps.m2[0]+ps.m1[0])/2-Min-this.$lineDom[id].childNodes[1].offsetWidth/2+4; Min=(ps.start[1]>ps.end[1]? ps.end[1]:ps.start[1]); if(Min>ps.m2[1]) Min=ps.m2[1]; if(Min>ps.m1[1]) Min=ps.m1[1]; this.$lineDom[id].childNodes[1].style.top = (ps.m2[1]+ps.m1[1])/2-Min-this.$lineDom[id].childNodes[1].offsetHeight/2-4; } else this.$lineDom[id].childNodes[2].textContent=this.$lineData[id].name; }, //删除转换线 delLine:function(id){ if(!this.$lineData[id]) return; if(this.onItemDel!=null&&!this.onItemDel(id,"node")) return; /// 增加,把被删除的线放回分支节点的 condition_name 数组里 -- 原,删除后,那个脚就不见了。Lin // "退回" 线,没有 .condition_name var line = this.$lineData[id]; if (line.name && (line.name != "退回")) demo.$nodeData[line.from].condition_name.push(line.name); /// if(this.$undoStack){ var paras=[id,this.$lineData[id]]; this.pushOper("addLine",paras); } this.$draw.removeChild(this.$lineDom[id]); delete this.$lineData[id]; delete this.$lineDom[id]; if(this.$focus==id) this.$focus=""; --this.$lineCount; }, //用颜色标注/取消标注一个结点或转换线,常用于显示重点或流程的进度。 //这是一个在编辑模式中无用,但是在纯浏览模式中非常有用的方法,实际运用中可用于跟踪流程的进度。 markItem:function(id,type,mark){ if(type=="node"){ if(!this.$nodeData[id]) return; if(this.onItemMark!=null&&!this.onItemMark(id,"node",mark)) return; this.$nodeData[id].marked=mark||false; if(mark) this.$nodeDom[id].addClass("item_mark"); else this.$nodeDom[id].removeClass("item_mark"); }else if(type=="line"){ if(!this.$lineData[id]) return; if(this.onItemMark!=null&&!this.onItemMark(id,"line",mark)) return; this.$lineData[id].marked=mark||false; if(GooFlow.prototype.useSVG!=""){ if(mark){ this.$nodeDom[id].childNodes[1].setAttribute("stroke","#ff3300"); this.$nodeDom[id].childNodes[1].setAttribute("marker-end","url(#arrow2)"); }else{ this.$nodeDom[id].childNodes[1].setAttribute("stroke","#5068AE"); this.$nodeDom[id].childNodes[1].setAttribute("marker-end","url(#arrow1)"); } }else{ if(mark) this.$nodeDom[id].strokeColor="#ff3300"; else this.$nodeDom[id].strokeColor="#5068AE" } } if(this.$undoStatck){ var paras=[id,type,!mark]; this.pushOper("markItem",paras); } }, ////////////////////////以下为区域分组块操作 moveArea:function(id,left,top){ if(!this.$areaData[id]) return; if(this.onItemMove!=null&&!this.onItemMove(id,"area")) return; if(this.$undoStack){ var paras=[id,this.$areaData[id].left,this.$areaData[id].top]; this.pushOper("moveNode",paras); } if(left<0) left=0; if(top<0) top=0; $("#"+id).css({left:left+"px",top:top+"px"}); this.$areaData[id].left=left; this.$areaData[id].top=top; }, //删除区域分组 delArea:function(id){ if(!this.$areaData[id]) return; if(this.$undoStack){ var paras=[id,this.$areaData[id]]; this.pushOper("addArea",paras); } if(this.onItemDel!=null&&!this.onItemDel(id,"node")) return; delete this.$areaData[id]; this.$areaDom[id].remove(); delete this.$areaDom[id]; --this.$areaCount; }, //设置区域分组的颜色 setAreaColor:function(id,color){ if(!this.$areaData[id]) return; if(this.$undoStack){ var paras=[id,this.$areaData[id].color]; this.pushOper("setAreaColor",paras); } if(color=="red"||color=="yellow"||color=="blue"||color=="green"){ this.$areaDom[id].removeClass("area_"+this.$areaData[id].color).addClass("area_"+color); this.$areaData[id].color=color; } }, //设置区域分块的尺寸 resizeArea:function(id,width,height){ if(!this.$areaData[id]) return; if(this.onItemResize!=null&&!this.onItemResize(id,"area")) return; if(this.$undoStack){ var paras=[id,this.$areaData[id].width,this.$areaData[id].height]; this.pushOper("resizeArea",paras); } var hack=0; if(navigator.userAgent.indexOf("8.0")!=-1) hack=2; this.$areaDom[id].children(".bg").css({width:width-2+"px",height:height-2+"px"}); width=this.$areaDom[id].outerWidth(); height=this.$areaDom[id].outerHeight(); this.$areaDom[id].children("bg").css({width:width-2+"px",height:height-2+"px"}); this.$areaData[id].width=width; this.$areaData[id].height=height; }, addArea:function(id,json){ if(this.onItemAdd!=null&&!this.onItemAdd(id,"area"))return; if(this.$undoStack){ this.pushOper("delArea",[id]); } this.$areaDom[id]=$("
" +"
"); this.$areaData[id]=json; this.$group.append(this.$areaDom[id]); ++this.$areaCount; } } //生成线和节点的id function composeId(type){ var curmax=0;//最大值 var tempNum=0; // id.replace(/[^0-9]/ig,"") for(key in demo.$lineData){ tempNum=parseInt(key.replace(/[^0-9]/ig,"") ); if(tempNum>=curmax){ curmax=tempNum; } } for(key in demo.$nodeData){ tempNum=parseInt(key.replace(/[^0-9]/ig,"")); if(tempNum>=curmax){ curmax=tempNum; } } var jsonData=document.getElementById("jsonData").innerHTML; var version=document.getElementById("version").value; if(jsonData!=""){ jsonData=eval("("+jsonData+")") if(jsonData.objectKey){ for(var i=0;i=curmax&&jsonData.objectKey[i].version!=version){ curmax=tempNum; } } var lines=jsonData.objectKey[i].lines // console.log(lines) if(tempNum>=curmax&&jsonData.objectKey[i].version!=version){ for(var key in lines){ curmax=tempNum; } } } } } demo.$max=curmax demo.$max++ var num=demo.$max var result= type+"_"+num console.log("生成唯一ID: "+result); return result; } //识别当前是否来自退回线 var fromRejectLine=false //将此类的构造函数加入至JQUERY对象中 jQuery.extend({ createGooFlow:function(bgDiv,property){ return new GooFlow(bgDiv,property); } });