//定义一个区域图类:
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]=$("");
//decision图标
if(json.type=="node"){
// console.log("add 1 node")
/* 再改,去掉 "+json.name+"
"); */
this.$nodeDom[id]=$("");
// this.$nodeDom[id]=$("");
}
//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]=$("");
if(json.height<40){json.height=40}
if(json.width<80){json.width=80}
/* "N" 改为 "No"。Lin
this.$nodeDom[id]=$(""); */
this.$nodeDom[id]=$("");
}
//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]=$("");
if(json.height<40){json.height=40}
if(json.width<80){json.width=80}
/* 再改,去掉 "+json.name+"
"); */
this.$nodeDom[id]=$("");
}
//子流程
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]=$("");
if(json.height<40){json.height=40}
if(json.width<80){json.width=80}
/* "N" 改为 "No"。Lin
* 再改,去掉 "+json.name+"
"); */
/* 再改,不能去掉 "+json.name+"
");*/
this.$nodeDom[id]=$("");
}
//fork
if(json.type=="fork"){
// console.log("add 1 fork")
/* 再改,去掉 "+json.name+"
"); */
this.$nodeDom[id]=$("");
}
//join
if(json.type=="join"){
// console.log("add 1 join")
/* 再改,去掉 "+json.name+"
"); */
this.$nodeDom[id]=$("");
}
//join
if(json.type=="foreach"){
// console.log("add 1 foreach")
/* 再改,去掉 "+json.name+"
");*/
this.$nodeDom[id]=$("");
}
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]=$("");
}
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);
}
});