您的位置：首页 > 其它
VML/SVG在Web开发中一些常见的框架

2014-10-09 00:05 411 查看
1.借鉴自：
http://www.codefans.net/soft/3061.shtml来源于网上。

flowchart.jshttp://adrai.github.io/flowchart.js/,基于SVG创建FlowChart

go.jshttp://www.gojs.net/latest/index.htmlgo.js提供一整套的JS工具，支持各种交互式图表的创建。有免费版和收费版

joint.jshttp://www.jointjs.com/joint.js是另一个创建图标库的工具，也提供免费版和商业版

jsPlumbhttp://www.jsplumb.org/jsPlumb是一套开源的流程图创建工具，小巧精悍，使用简单

d3http://d3js.org在html5领域，d3可谓是最好的可视化基础库，提供方面的DOM操作，非常强大。

====================================================
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<htmlxmlns:v="urn:schemas-microsoft-com:vml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>WEB流程图制作_Demo:http://www.codefans.net</title>
<styletype="text/css">
v\:*{BEHAVIOR:url(#default#VML)}body{margin:0,0,0,0;}#group{position:absolute;top:0px;left:0px;height:100%;width:100%;z-index:-1000;}#menutable{font-size:11px;background-image:url(img/menubg.gif);z-index:1000;height:100%;}#menutd{white-space:nowrap;}#movebar{font-size:11px;z-index:1000;cursor:move;height:30;width:8;}#movebardiv{height:30;width:8;background-image:url(img/grid-blue-split.gif);}#menuimg{vertical-align:middle;height:16px;}#menuspan{vertical-align:bottom;cursor:hand;padding-left:3px;padding-top:5px;padding-bottom:2px;padding-right:5;}.x-window{}.x-window-tc{background:transparenturl(img/window/top-bottom.png)repeat-x00;overflow:hidden;zoom:1;height:25px;padding-top:5px;font-size:12px;cursor:move;}.x-window-tl{background:transparenturl(img/window/left-corners.png)no-repeat00;padding-left:6px;zoom:1;z-index:1;position:relative;}.x-window-tr{background:transparenturl(img/window/right-corners.png)no-repeatright0;padding-right:6px;}.x-window-bc{background:transparenturl(img/window/top-bottom.png)repeat-x0bottom;zoom:1;text-align:center;height:30px;padding-top:4px;}.x-window-bl{background:transparenturl(img/window/left-corners.png)no-repeat0bottom;padding-left:6px;zoom:1;}.x-window-br{background:transparenturl(img/window/right-corners.png)no-repeatrightbottom;padding-right:6px;zoom:1;}.x-window-mc{border:1pxsolid#99bbe8;padding:0;margin:0;font:normal11pxtahoma,arial,helvetica,sans-serif;background:#dfe8f6;width:384px;height:231px;}.x-window-ml{background:transparenturl(img/window/left-right.png)repeat-y00;padding-left:6px;zoom:1;}.x-window-mr{background:transparenturl(img/window/left-right.png)repeat-yright0;padding-right:6px;zoom:1;}.x-tool-close{overflow:hidden;width:15px;height:15px;float:right;cursor:pointer;background:transparenturl(img/window/tool-sprites.gif)no-repeat;background-position:0-0;margin-left:2px;}.x-tab-panel-header{border:1pxsolid#8db2e3;padding-bottom:2px;border-top-width:0;border-left-width:0;border-right-width:0;height:26px;}.x-tab-panel-body{overflow-y:auto;height:200px;display:none;}.x-tab-panel-body-show{overflow-y:auto;height:200px;padding-top:3px;}.x-tab-strip-top{float:left;width:100%;height:27px;padding-top:1px;background:url(img/window/tab-strip-bg.gif)#cedff5repeat-xtop;}.x-tab-strip-wrap{width:100%;border-bottom:1pxsolid#8db2e3;}.x-tab-strip-topul{list-style:none;margin:0px;padding:0px;}.x-tab-strip-topli{float:left;display:block;width:60px;padding-left:3px;text-align:center;font-size:11px;}.x-tab-strip-top.x-tab-left{background:transparenturl(img/window/tabs-sprite.gif)no-repeat0-51px;padding-left:10px;}.x-tab-strip-top.x-tab-right{background:transparenturl(img/window/tabs-sprite.gif)no-repeatright-351px;padding-right:10px;}.x-tab-strip-top.x-tab-middle{background:transparenturl(img/window/tabs-sprite.gif)repeat-x0-201px;height:25px;overflow:hidden;padding-top:5px;cursor:hand;}.x-tab-strip-top.x-tab-strip-active.x-tab-left{background:transparenturl(img/window/tabs-sprite.gif)no-repeat00px;padding-left:10px;}.x-tab-strip-top.x-tab-strip-active.x-tab-right{background:transparenturl(img/window/tabs-sprite.gif)no-repeatright-301px;padding-right:10px;}.x-tab-strip-top.x-tab-strip-active.x-tab-middle{background:transparenturl(img/window/tabs-sprite.gif)repeat-x0-151px;height:25px;overflow:hidden;padding-top:5px;font-weight:bold;cursor:hand;}.x-form-field{font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin:0;background:#FFFFFFurl(../images/default/form/text-bg.gif)repeat-xscroll00;border:1pxsolid#B5B8C8;padding:1px3px;width:200;overflow:hidden;}.btn{BORDER-RIGHT:#7b9ebd1pxsolid;PADDING-RIGHT:2px;BORDER-TOP:#7b9ebd1pxsolid;PADDING-LEFT:2px;FONT-SIZE:12px;FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);BORDER-LEFT:#7b9ebd1pxsolid;CURSOR:hand;COLOR:black;PADDING-TOP:2px;BORDER-BOTTOM:#7b9ebd1pxsolid}

</style>
<scriptlanguage="javascript">
functionGroup(){
this.id=null;
this.name=null;
this.count=0;
this.nodes=[];
this.lines=[];
this.selectedObj=[];
this.selectedLineFrom=[];
this.selectedLineTo=[];
this.mouseX=-1;
this.mouseY=-1;
this.mouseEndX=-1;
this.mouseEndY=-1;
this.action=null;
this.lineFlag=null;
this.multiSelect=false;
this.ctrlKey=false;
this.nodeMirror=null;
this.lineMirror=null;
this.bottomHeight=10;
this.rightWidth=10;
this.init=function(){
varobj=document.getElementById('group');
obj.setAttribute('bindClass',this);
obj.onmousedown=GroupEvent.mouseDown;
obj.onmousemove=GroupEvent.mouseMove;
obj.onmouseup=GroupEvent.mouseUp;
obj.onkeydown=GroupEvent.keyDown;
obj.onkeyup=GroupEvent.keyUp;
this.lineMirror=newLine();
this.lineMirror.textFlag=false;
this.lineMirror.mirrorFlag=true;
this.lineMirror.init();
this.lineMirror.setDisplay('none');
this.lineMirror.strokeObj.dashStyle='dashdot';
this.lineMirror.obj.strokecolor='#000000';
this.nodeMirror=newNode();
this.nodeMirror.strokeFlag=true;
this.nodeMirror.shadowFlag=false;
this.nodeMirror.textFlag=false;
this.nodeMirror.mirrorFlag=true;
this.nodeMirror.init();
this.nodeMirror.setDisplay('none');
this.nodeMirror.obj.strokecolor='black';
this.nodeMirror.obj.style.zIndex='100';
this.nodeMirror.obj.filled=false;
this.nodeMirror.strokeObj.dashstyle='dot';
};
this.getObjectNum=function(){
this.count++;
returnthis.count;
};
this.point=function(flag){
if(flag=='down'){
this.mouseX=GroupEvent.getMouseX();
this.mouseY=GroupEvent.getMouseY();
}elseif(flag=='up'){
this.mouseEndX=GroupEvent.getMouseX();
this.mouseEndY=GroupEvent.getMouseY();
}
};
this.getEventNode=function(flag){
varres=null;
varnodeNum=this.nodes.length;
varnode=null;
varx;
vary;
if(flag=='down'){
x=this.mouseX;
y=this.mouseY;
}elseif(flag=='up'){
x=this.mouseEndX;
y=this.mouseEndY;
}
for(vari=(nodeNum-1);i>=0;i--){
node=this.nodes[i];
if(node.pointInObj(x,y)){
res=node;
break;
}
}
returnres;
};
this.getEventLine=function(){
varres=null;
varlineNum=this.lines.length;
varline=null;
varx=this.mouseX;
vary=this.mouseY;
varisStroke=-1;
for(vari=(lineNum-1);i>=0;i--){
line=this.lines[i];
if(line.pointInObj(x,y)){
if(res==null||line.obj.style.zIndex=='22'){
res=null;
res=GroupEvent.insertObjInArr(res,line);
isStroke=line.pointInStroke(x,y);
if(isStroke==0){
this.selectedLineTo=[];
this.selectedLineFrom=[];
this.selectedLineTo=GroupEvent.insertObjInArr(this.selectedLineTo,line);
}elseif(isStroke==1){
this.selectedLineTo=[];
this.selectedLineFrom=[];
this.selectedLineFrom=GroupEvent.insertObjInArr(this.selectedLineFrom,line);
}
}
}
}
returnres;
};
this.moveSelectedObj=function(){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
varnum=this.selectedObj.length;
varlineNum=this.lines.length;
varline=null;
for(vari=0;i<num;i++){
this.selectedObj[i].move(x,y,this.mouseX,this.mouseY);
for(varj=0;j<lineNum;j++){
line=this.lines[j];
if((line.fromObj==this.selectedObj[i])||(line.toObj==this.selectedObj[i])){
line.relink();
}
}
}
};
this.moveSelectedObjEnd=function(){
varnum=this.selectedObj.length;
for(vari=0;i<num;i++){
this.selectedObj[i].moveEnd();
}
};
this.moveLine=function(){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
varnum=this.selectedLineTo.length;
for(vari=0;i<num;i++){
this.selectedLineTo[i].setTo(x,y,null);
}
num=this.selectedLineFrom.length;
for(vari=0;i<num;i++){
this.selectedLineFrom[i].setFrom(x,y,null);
}
};
this.moveLineEnd=function(selNode){
varnum=this.selectedLineTo.length;
if(selNode!=null){
for(vari=0;i<num;i++){
if(this.fuckyou(this.selectedLineTo[i].fromObj,selNode)){
this.selectedLineTo[i].setTo(this.mouseEndX,this.mouseEndY,selNode);
this.selectedLineTo[i].relink();
}else{
this.selectedLineTo[i].relink();
}
}
}else{
for(vari=0;i<num;i++){
this.selectedLineTo[i].relink();
}
}
this.selectedLineTo=[];
num=this.selectedLineFrom.length;
if(selNode!=null){
for(vari=0;i<num;i++){
if(this.fuckyou(selNode,this.selectedLineFrom[i].toObj)){
this.selectedLineFrom[i].setFrom(this.mouseEndX,this.mouseEndY,selNode);
this.selectedLineFrom[i].relink();
}else{
this.selectedLineFrom[i].relink();
}
}
}else{
for(vari=0;i<num;i++){
this.selectedLineFrom[i].relink();
}
}
this.selectedLineFrom=[];
};
this.drawLineEnd=function(selNode){
if(selNode!=null){
this.drawMirrorLineTo(selNode);
if(this.fuckyou(this.lineMirror.fromObj,this.lineMirror.toObj)){
varline=newPolyLine();
line.init();
line.setShape(this.lineFlag);
line.link(this.lineMirror);
this.clearSelected();
}
}
this.lineMirror.setDisplay('none');
};
this.drawMirrorLineFrom=function(selObj){
this.lineMirror.setFrom(this.mouseX,this.mouseY,selObj);
this.lineMirror.setTo(this.mouseX,this.mouseY,selObj);
this.lineMirror.setDisplay('');
};
this.drawMirrorLineTo=function(selObj){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
this.lineMirror.setTo(x,y,selObj);
};
this.drawMirrorNodeStart=function(){
this.multiSelect=false;
this.nodeMirror.setLeft(GroupEvent.getX(this.mouseX));
this.nodeMirror.setTop(GroupEvent.getY(this.mouseY));
this.nodeMirror.setHeight(0);
this.nodeMirror.setWidth(0);
};
this.drawMirrorNode=function(){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
this.nodeMirror.setWidth(Math.abs(GroupEvent.getX(x)-GroupEvent.getX(this.mouseX)));
this.nodeMirror.setHeight(Math.abs(GroupEvent.getY(y)-GroupEvent.getY(this.mouseY)));
if(GroupEvent.getX(x)<GroupEvent.getX(this.mouseX)){
this.nodeMirror.setLeft(GroupEvent.getX(x));
}
if(GroupEvent.getY(y)<GroupEvent.getY(this.mouseY)){
this.nodeMirror.setTop(GroupEvent.getY(y));
}
this.nodeMirror.setDisplay('');
};
this.drawMirrorNodeEnd=function(){
this.nodeMirror.setDisplay('none');
if(this.embodyObj())this.multiSelect=true;
};
this.embodyObj=function(){
varres=false;
varx1=this.nodeMirror.left;
varx2=this.nodeMirror.left+this.nodeMirror.width;
vary1=this.nodeMirror.top;
vary2=this.nodeMirror.top+this.nodeMirror.height;
varnodeNum=this.nodes.length;
varlineNum=this.lines.length;
varnode=null;
varline=null;
for(vari=0;i<nodeNum;i++){
node=this.nodes[i];
if((x1<=node.left)&&(x2>=(node.left+node.width))&&(y1<=node.top)&&(y2>=(node.top+node.height))){
node.setSelected();
this.selectedObj=GroupEvent.insertObjInArr(this.selectedObj,node);
node.x=0;
node.y=0;
node.mouseX=node.left;
node.mouseY=node.top;
res=true;
}
}
for(vari=0;i<lineNum;i++){
line=this.lines[i];
if((x1<=Math.min(line.fromX,line.toX))&&(x2>=Math.max(line.fromX,line.toX))&&(y1<=Math.min(line.fromY,line.toY))&&(y2>=Math.max(line.fromY,line.toY))){
line.setSelected();
this.selectedObj=GroupEvent.insertObjInArr(this.selectedObj,line);
res=true;
}
}
returnres;
};
this.fuckyou=function(fromObj,toObj){
varres=true;
if(fromObj==toObj){
res=false;
}
varlen=this.lines.length;
varline=null;
for(vari=0;i<len;i++){
line=this.lines[i];
if((line.fromObj==fromObj)&&(line.toObj==toObj)){
res=false;
alert("两点之间已经存在连接！");
break;
}
}
returnres;
};
this.clearSelected=function(){
varnum=this.selectedObj.length;
for(vari=0;i<num;i++){
this.selectedObj[i].clearSelected();
}
this.selectedObj=[];
};
this.selectAll=function(){
this.selectedObj=[];
varnum=this.nodes.length;
varobj=null;
for(vari=0;i<num;i++){
obj=this.nodes[i];
obj.setSelected();
this.selectedObj=GroupEvent.insertObjInArr(this.selectedObj,obj);
obj.x=0;
obj.y=0;
obj.mouseX=obj.left;
obj.mouseY=obj.top;
}
num=this.lines.length;
obj=null;
for(vari=0;i<num;i++){
obj=this.lines[i];
obj.setSelected();
this.selectedObj=GroupEvent.insertObjInArr(this.selectedObj,obj);
}
};
this.removeSelected=function(){
varnum=this.nodes.length;
varobj=null;
vararr=newArray();
varcount=0;
for(vari=0;i<num;i++){
obj=this.nodes[i];
if(obj.selected){
obj.remove();
}else{
arr[count]=obj;
count++;
}
}
this.nodes=arr;
num=this.lines.length;
obj=null;
arr=newArray();
varcount=0;
for(vari=0;i<num;i++){
obj=this.lines[i];
if(obj.selected){
obj.remove();
}else{
arr[count]=obj;
count++;
}
}
this.lines=arr;
this.selectedObj=[];
};
this.setGroupArea=function(){
varobj=document.getElementById('group');
varmaxWidth=-1;
varmaxHeight=-1;
varnum=this.nodes.length;
varnode=null;
for(vari=0;i<num;i++){
node=this.nodes[i];
if(maxWidth<(node.left+node.width)){
maxWidth=node.left+node.width;
}
if(maxHeight<(node.top+node.height)){
maxHeight=node.top+node.height;
}
}
if(maxHeight>document.body.clientHeight){
obj.style.height=(maxHeight+this.bottomHeight)+'px';
}else{
obj.style.height='100%'
}
if(maxWidth>document.body.clientWidth){
obj.style.width=(maxWidth+this.rightWidth)+'px';
}else{
obj.style.width='100%'
}
};
this.toJson=function(){
varjNodes=[];
varnodeNum=this.nodes.length;
for(vari=0;i<nodeNum;i++){
GroupEvent.insertObjInArr(jNodes,this.nodes[i].toJson());
}
varjLines=[];
varlineNum=this.lines.length;
for(vari=0;i<lineNum;i++){
GroupEvent.insertObjInArr(jLines,this.lines[i].toJson());
}
varjson={
id:this.id,
name:this.name,
count:this.count,
nodes:jNodes,
lines:jLines
};
returnJSON.encode(json);
};
this.jsonTo=function(json){
this.id=json.id;
this.name=json.name;
this.count=json.count;
varjNodes=json.nodes;
varnodeNum=jNodes.length;
varnode=null;
for(vari=0;i<nodeNum;i++){
switch(jNodes[i].shape){
case'img':
{
node=newNodeImg();
break;
}
case'oval':
{
node=newNodeOval();
break;
}
default:
node=newNode();
break;
}
node.jsonTo(jNodes[i]);
node.init();
}
varjLines=json.lines;
varlineNum=jLines.length;
varline=null;
for(vari=0;i<lineNum;i++){
switch(jLines[i].shape){
default:
line=newPolyLine();
break;
}
line.jsonTo(jLines[i]);
line.init();
line.relink();
}
};
this.setProp=function(selObj,flag){
varwin=document.getElementById('propWin');
win.setAttribute('selected',selObj);
win.setAttribute('type',flag);
for(vari=0;i<Prop.panels.length;i++){
varpanel=document.getElementById(Prop.panels[i].id);
if(flag==Prop.panels[i].flag){
win.t.innerHTML=Prop.panels[i].title;
panel.style.display='';
vartabs=panel.getAttribute('tabs');
if(tabs)tabs.setSelected();
if(selObj)selObj.setProperty(flag);
}else{
panel.style.display='none';
}
}
};
this.eventStart=function(){
if(this.ctrlKey){
this.multiSelect=true;
}
varselNode=this.getEventNode('down');
varselLine=this.getEventLine();
if(!this.multiSelect){
this.clearSelected();
}
if(selNode!=null){
this.setProp(selNode,'n');
if(!GroupEvent.isInArr(this.selectedObj,selNode)){
if(!this.ctrlKey){
this.multiSelect=false;
this.clearSelected();
}
selNode.setSelected();
this.selectedObj=GroupEvent.insertObjInArr(this.selectedObj,selNode);
}else{
if(this.ctrlKey){
selNode.clearSelected();
this.selectedObj=GroupEvent.removeObjInArr(this.selectedObj,selNode);
}
}
if(this.lineFlag==null){
this.action='nodedown';
}elseif(this.lineFlag!=null){
this.action='drawline';
this.drawMirrorLineFrom(selNode);
}
}elseif(selLine!=null){
this.setProp(selLine[selLine.length-1],'l');
for(vari=0;i<selLine.length;i++){
if(!GroupEvent.isInArr(this.selectedObj,selLine[i])){
if(!this.ctrlKey){
this.multiSelect=false;
}
selLine[i].setSelected();
this.selectedObj=GroupEvent.insertObjInArr(this.selectedObj,selLine[i]);
}else{
if(this.ctrlKey){
selLine[i].clearSelected();
this.selectedObj=GroupEvent.removeObjInArr(this.selectedObj,selLine[i]);
}
}
}
if(this.selectedLineTo.length>0){
this.action='moveline';
for(vari=0;i<this.selectedLineTo.length;i++){
this.selectedLineTo[i].setMoveSelected();
}
}
if(this.selectedLineFrom.length>0){
this.action='moveline';
for(vari=0;i<this.selectedLineFrom.length;i++){
this.selectedLineFrom[i].setMoveSelected();
}
}
}else{
this.setProp(null,'help');
this.action='blankdown';
if(!this.ctrlKey){
this.clearSelected();
this.drawMirrorNodeStart();
}
}
}
};
varGroupEvent={
mouseDown:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
document.selection.empty();
Love.point('down');
Love.eventStart();
returnfalse;
},
mouseMove:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
if(Love.action!=null){
switch(Love.action){
case"nodedown":
Love.moveSelectedObj();
break;
case"drawline":
Love.drawMirrorLineTo(null);
break;
case"moveline":
Love.moveLine(null);
break;
case"blankdown":
Love.drawMirrorNode();
break;
default:
}
}
returnfalse;
},
mouseUp:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
if(Love.action!=null){
Love.point('up');
varselNode=Love.getEventNode('up');
switch(Love.action){
case"nodedown":
Love.moveSelectedObjEnd();
break;
case"drawline":
Love.drawLineEnd(selNode);
break;
case"moveline":
Love.moveLineEnd(selNode);
break;
case"blankdown":
Love.drawMirrorNodeEnd();
break;
default:
}
}
Love.setGroupArea();
Love.action=null;
returnfalse;
},
keyDown:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
if(window.event.ctrlKey)Love.ctrlKey=true;
switch(window.event.keyCode){
case46:
Love.removeSelected();
break;
case65:
if(window.event.ctrlKey){
Love.selectAll();
Love.multiSelect=true;
window.event.returnValue=false;
}
break;
default:
}
},
keyUp:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
Love.ctrlKey=false;
},
getX:function(x){
return(x+document.body.scrollLeft);
},
getY:function(y){
return(y+document.body.scrollTop);
},
getMouseX:function(){
returnwindow.event.clientX
},
getMouseY:function(){
returnwindow.event.clientY
},
insertObjInArr:function(arr,s){
if(arr==null)arr=[];
arr[arr.length]=s;
returnarr;
},
removeObjInArr:function(arr,s){
vartArr=null;
varcount=0;
if(arr!=null){
tArr=[];
varnum=arr.length;
for(vari=0;i<num;i++){
if(arr[i]!=s){
tArr[count]=arr[i];
count++;
}
}
}
returntArr;
},
isInArr:function(arr,s){
varres=false;
if(arr!=null){
varnum=arr.length;
for(vari=0;i<num;i++){
if(arr[i]==s){
res=true;
break;
}
}
}
returnres;
}
}

functionLine(){
this.id='line_';
this.name='NewLine';
this.number=-1;
this.type='line';
this.shape='line';
this.selected=false;
this.fromX=-1;
this.fromY=-1;
this.toX=-1;
this.toY=-1;
this.textFlag=false;
this.mirrorFlag=false;
this.obj=null;
this.strokeObj=null;
this.textObj=null;
this.fromObj=null;
this.toObj=null;
this.init=function(){
vargroupObj=document.getElementById('group');
varobj=document.createElement('v:line');
groupObj.appendChild(obj);
obj.title=this.name;
obj.from='0,0';
obj.to='0,0';
obj.strokecolor='blue';
obj.strokeweight='3';
obj.filled='false';
obj.style.position='absolute';
obj.style.zIndex='2';
obj.style.cursor='hand';
this.obj=obj;
varstrokeObj=document.createElement('v:stroke');
obj.appendChild(strokeObj);
strokeObj.endArrow="Classic";
this.strokeObj=strokeObj;
if(this.textFlag){
vartextObj=document.createElement('v:textbox');
textObj.inset='10pt,1pt,5pt,5pt';
textObj.style.textAlign='center';
textObj.style.verticalAlign='bottom';
textObj.style.color='blue';
textObj.style.fontSize='9pt';
textObj.innerHTML=this.name;
obj.appendChild(textObj);
this.textObj=textObj;
}
if(!this.mirrorFlag){
varLove=groupObj.getAttribute('bindClass');
this.number=Love.getObjectNum();
this.id=this.id+this.number;
obj.id=this.id;
Love.lines[Love.lines.length]=this;
}
};
this.setFrom=function(x,y,obj){
this.fromX=GroupEvent.getX(x);
this.fromY=GroupEvent.getY(y);
if(obj)this.fromObj=obj;
this.obj.from=this.fromX+','+this.fromY;
};
this.setTo=function(x,y,obj){
this.toX=GroupEvent.getX(x);
this.toY=GroupEvent.getY(y);
if(obj)this.toObj=obj;
this.obj.to=this.toX+','+this.toY;
};
this.setDisplay=function(flag){
this.obj.style.display=flag;
};
this.link=function(lineMirror){
this.fromObj=lineMirror.fromObj;
this.toObj=lineMirror.toObj;
this.relink();
this.fromObj.clearSelected();
};
this.relink=function(){
varfromDots=this.fromObj.getDots();
vartoDots=this.toObj.getDots();
varfromDotNum=fromDots.length;
vartoDotNum=toDots.length;
varlineLen=-1;
varfromDot;
vartoDot;
for(vari=0;i<fromDotNum;i++){
for(varj=0;j<toDotNum;j++){
if(lineLen<0){
lineLen=this.getLineLength(fromDots[i].x,fromDots[i].y,toDots[j].x,toDots[j].y);
fromDot=fromDots[i];
toDot=toDots[j];
}elseif(lineLen>this.getLineLength(fromDots[i].x,fromDots[i].y,toDots[j].x,toDots[j].y)){
lineLen=this.getLineLength(fromDots[i].x,fromDots[i].y,toDots[j].x,toDots[j].y);
fromDot=fromDots[i];
toDot=toDots[j];
}
}
}
this.fromX=fromDot.x;
this.fromY=fromDot.y;
this.toX=toDot.x;
this.toY=toDot.y;
this.obj.from=this.fromX+','+this.fromY;
this.obj.to=this.toX+','+this.toY;
};
this.getLineLength=function(x1,y1,x2,y2){
returnMath.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
};
this.pointInObj=function(x,y){
varres=false;
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
varx1=this.fromX;
varx2=this.toX;
vary1=this.fromY;
vary2=this.toY;
varx21=x2-x1;
vary21=y2-y1;
if(x21==0){
res=(Math.abs(x-x1)<5)&&(Math.min(y1,y2)<=y)&&(Math.max(y1,y2)>=y);
}elseif(y21==0){
res=(Math.abs(y-y1)<5)&&(Math.min(x1,x2)<=x)&&(Math.max(x1,x2)>=x);
}else{
res=(Math.min(y1,y2)<=y)&&(Math.max(y1,y2)>=y)&&(Math.min(x1,x2)<=x)&&(Math.max(x1,x2)>=x)&&((Math.abs(Math.floor((x21/y21)*(y-y1)+x1-x))<5)||(Math.abs(Math.floor((y21/x21)*(x-x1)+y1-y))<5));
}
returnres;
};
this.pointInStroke=function(x,y){
varres=-1;
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
varx1=this.fromX;
varx2=this.toX;
vary1=this.fromY;
vary2=this.toY;
if((Math.abs(x2-x)<6)&&(Math.abs(y2-y)<6))res=0;
if((Math.abs(x1-x)<6)&&(Math.abs(y1-y)<6))res=1;
returnres;
};
this.setSelected=function(){
this.obj.strokecolor='green';
if(this.textObj)this.textObj.style.color='green';
this.selected=true;
this.obj.style.zIndex='22';
};
this.move=function(){};
this.moveEnd=function(){};
this.setMoveSelected=function(){
this.obj.strokecolor='red';
if(this.textObj)this.textObj.style.color='green';
this.selected=true;
this.obj.style.zIndex='22';
};
this.clearSelected=function(){
this.obj.strokecolor='blue';
if(this.textObj)this.textObj.style.color='blue';
this.selected=false;
this.obj.style.zIndex='2';
};
this.remove=function(){
vargroup=document.getElementById('group');
group.removeChild(this.obj);
}
}

functionMenu(){
this.id='menu';
this.left=10;
this.top=3;
this.height=30;
this.width=300;
this.selected=false;
this.obj=null;
this.menuObj=null;
this.x=-1;
this.y=-1;
this.img=newArray('folder.gif','save.gif','start.gif','end.gif','node.gif','member.gif','forward.gif','drop-yes.gif','delete.gif','grid.gif');
this.text=newArray('打开','保存','开始环节','结束环节','环节（长方形）','环节（图片）','路径（直线）','路径（折线）','删除','网格');
this.action=newArray('MenuAction.open()','MenuAction.save()','MenuAction.start()','MenuAction.end()','MenuAction.nodeRect()','MenuAction.nodeImg()','if(MenuAction.line())MenuAction.changeStyle(this)','if(MenuAction.polyline())MenuAction.changeStyle(this)','MenuAction.remove()','MenuAction.grid()');
this.init=function(){
vartoolObj=document.getElementById('tool');
varobj=document.createElement('div');
toolObj.appendChild(obj);
toolObj.appendChild(this.createMenu());
obj.id='movebar';
obj.setAttribute('bindClass',this);
this.obj=obj;
obj.onmousedown=MenuEvent.mouseDown;
obj.onmousemove=MenuEvent.mouseMove;
obj.onmouseup=MenuEvent.mouseUp;
obj.style.position='absolute';
obj.style.left=this.left;
obj.style.top=this.top;
vartd=document.createElement('div');
td.innerHTML='  ';
obj.appendChild(td);
};
this.createMenu=function(){
varobj=document.createElement('div');
this.menuObj=obj;
obj.id=this.id;
obj.style.position='absolute';
obj.style.height=this.height;
obj.style.left=this.left+8;
obj.style.top=this.top;
vartobj=document.createElement('table');
obj.appendChild(tobj);
vartb=document.createElement('tbody');
tobj.appendChild(tb);
vartr=document.createElement('tr');
tb.appendChild(tr);
vartd=null;
for(vari=0;i<this.img.length;i++){
td=document.createElement('td');
tr.appendChild(td);
td.innerHTML='<imgsrc="img/'+this.img[i]+'"><spanonmousemove="MenuAction.over(this)"onmouseout="MenuAction.out(this)"onclick="'+this.action[i]+'">'+this.text[i]+'</span><imgsrc="img/grid-blue-split.gif">';
}
returnobj;
};
this.down=function(){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
this.x=x-this.obj.offsetLeft;
this.y=y-this.obj.offsetTop;
this.selected=true;
};
this.move=function(){
if(this.selected){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
this.left=GroupEvent.getX(x)-this.x;
this.top=GroupEvent.getY(y)-this.y;
this.obj.style.left=this.left+'px';
this.obj.style.top=this.top+'px';
this.menuObj.style.left=(this.left+8)+'px';
this.menuObj.style.top=this.top+'px';
}
};
this.up=function(){
this.selected=false;
if(this.left<10){
this.left=10;
this.obj.style.left=this.left+'px';
this.menuObj.style.left=(this.left+8)+'px';
}
if(this.top<3){
this.top=3;
this.obj.style.top=this.top+'px';
this.menuObj.style.top=this.top+'px';
}
}
};
varMenuEvent={
mouseDown:function(){
varmenu=document.getElementById('movebar');
varmenuClass=menu.getAttribute('bindClass');
menu.setCapture();
menuClass.down();
},
mouseMove:function(){
varmenu=document.getElementById('movebar');
varmenuClass=menu.getAttribute('bindClass');
menuClass.move();
returnfalse;
},
mouseUp:function(){
varmenu=document.getElementById('movebar');
varmenuClass=menu.getAttribute('bindClass');
menuClass.up();
menu.releaseCapture();
document.getElementById('group').focus();
}
};
varMenuAction={
open:function(){
alert("打开");
},
save:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
clipboardData.setData("Text",Love.toJson());

document.getElementById("a").innerHTML=Love.toJson();

},
start:function(){
varn=newNodeOval();
n.init();
},
end:function(){
varn=newNodeOval();
n.setType('end');
n.init();
},
nodeRect:function(){
varn=newNode();
n.init();
},
nodeImg:function(){
varn=newNodeImg();
n.init();
},
line:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
if(Love.lineFlag==null){
Love.lineFlag='line';
}elseif(Love.lineFlag=='line'){
Love.lineFlag=null;
}else{
returnfalse;
}
returntrue;
},
polyline:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
if(Love.lineFlag==null){
Love.lineFlag='polyline';
}elseif(Love.lineFlag=='polyline'){
Love.lineFlag=null;
}else{
returnfalse;
}
returntrue;
},
remove:function(){
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
Love.removeSelected();
},
grid:function(){
varobj=document.body.style.backgroundImage;
if(obj=='')document.body.style.backgroundImage='url(img/bg.jpg)';
elsedocument.body.style.backgroundImage='';
},
changeStyle:function(obj){
if(obj.style.color=='')obj.style.color='#ffffff';
elseobj.style.color='';
},
over:function(obj){
obj.style.backgroundColor='#A8D0F9';
},
out:function(obj){
obj.style.backgroundColor='';
}
}

functionNode(){
this.id='node_';
this.name='NewNode';
this.number=-1;
this.type='node';
this.shape='rect';
this.property=null;
this.selected=false;
this.left=100;
this.top=80;
this.width=100;
this.height=40;
this.mouseX=-1;
this.mouseY=-1;
this.x=-1;
this.y=-1;
this.strokeFlag=false;
this.shadowFlag=true;
this.textFlag=true;
this.mirrorFlag=false;
this.obj=null;
this.shadowObj=null;
this.textObj=null;
this.strokeObj=null;
this.init=function(){
vargroupObj=document.getElementById('group');
varobj=document.createElement('v:roundrect');
groupObj.appendChild(obj);
obj.title=this.name;
obj.style.position='absolute';
obj.style.left=this.left;
obj.style.top=this.top;
obj.style.width=this.width;
obj.style.height=this.height;
obj.style.cursor='hand';
obj.style.zIndex='1';
obj.strokecolor='blue';
obj.background='red';
obj.strokeweight='1';
this.obj=obj;
if(this.shadowFlag){
varshadowObj=document.createElement('v:shadow');
shadowObj.on='T';
shadowObj.type='single';
shadowObj.color='#b3b3b3';
shadowObj.offset='5px,5px';
obj.appendChild(shadowObj);
this.shadowObj=shadowObj;
}
if(this.strokeFlag){
varstrokeObj=document.createElement('v:stroke');
obj.appendChild(strokeObj);
this.strokeObj=strokeObj;
}
if(this.textFlag){
vartextObj=document.createElement('v:textbox');
textObj.inset='2pt,5pt,2pt,5pt';
textObj.style.textAlign='center';
textObj.style.color='blue';
textObj.style.fontSize='9pt';
textObj.innerHTML=this.name;
obj.appendChild(textObj);
this.textObj=textObj;
}
if(!this.mirrorFlag){
varLove=groupObj.getAttribute('bindClass');
if(this.number<0){
this.number=Love.getObjectNum();
this.id=this.id+this.number;
obj.id=this.id;
this.name=this.id;
this.obj.title=this.id;
this.textObj.innerHTML=this.id;
}
Love.nodes[Love.nodes.length]=this;
}
};
this.setDisplay=function(flag){
this.obj.style.display=flag;
};
this.pointInObj=function(x,y){
varres=false;
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
varx1=this.left;
varx2=x1+this.width;
vary1=this.top;
vary2=y1+this.height;
if((x>=x1)&&(x<=x2)&&(y>=y1)&&(y<=y2)){
this.mouseX=x;
this.mouseY=y;
this.x=x-this.obj.offsetLeft;
this.y=y-this.obj.offsetTop;
res=true;
}
returnres;
};
this.move=function(x,y,mouseX,mouseY){
this.left=GroupEvent.getX(x)-this.x-GroupEvent.getX(mouseX)+this.mouseX;
this.top=GroupEvent.getY(y)-this.y-GroupEvent.getY(mouseY)+this.mouseY;
this.obj.style.left=this.left+'px';
this.obj.style.top=this.top+'px';
};
this.moveEnd=function(){
this.x=0;
this.y=0;
this.mouseX=this.left;
this.mouseY=this.top
};
this.setSelected=function(){
this.shadowObj.color='green';
this.obj.strokecolor='green';
this.textObj.style.color='green';
this.selected=true;
};
this.clearSelected=function(){
this.shadowObj.color='#b3b3b3';
this.obj.strokecolor='blue';
this.textObj.style.color='blue';
this.selected=false;
};
this.remove=function(){
vargroup=document.getElementById('group');
group.removeChild(this.obj);
};
this.setLeft=function(n){
this.left=n;
this.obj.style.left=n;
};
this.setTop=function(n){
this.top=n;
this.obj.style.top=n;
};
this.setWidth=function(n){
this.width=n;
this.obj.style.width=n;
};
this.setHeight=function(n){
this.height=n;
this.obj.style.height=n;
};
this.getDots=function(){
varl=this.left;
vart=this.top;
varw=this.width;
varh=this.height;
vardots=newArray();
vardot;
dots[dots.length]={
x:l,
y:t+h/2
};
dots[dots.length]={
x:l+w,
y:t+h/2
};
dots[dots.length]={
x:l+w/2,
y:t
};
dots[dots.length]={
x:l+w/2,
y:t+h
};
dots[dots.length]={
x:l,
y:t
};
dots[dots.length]={
x:l+w,
y:t
};
dots[dots.length]={
x:l,
y:t+h
};
dots[dots.length]={
x:l+w,
y:t+h
};
returndots;
};
this.setProperty=function(type){
Prop.clear();
document.getElementById(type+'_p_id').innerHTML=this.id;
document.getElementById(type+'_p_name').value=this.name;
if(this.property){
varnum=this.property.length;
for(vari=0;i<num;i++){
switch(this.property[i].text){
case'span':
document.getElementById(this.property[i].id).innerHTML=this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value=this.property[i].value;
break;
}
}
}
};
this.getProperty=function(property){
this.property=property;
this.name=property.n_p_name;
this.title=this.name;
};
this.toJson=function(){
varjson={
id:this.id,
name:this.name,
type:this.type,
shape:this.shape,
number:this.number,
left:this.left,
top:this.top,
width:this.width,
height:this.height,
property:this.property
};
returnjson;
};
this.jsonTo=function(json){
this.id=json.id;
this.name=json.name;
this.type=json.type;
this.shape=json.shape;
this.number=json.number;
this.left=json.left;
this.top=json.top;
this.width=json.width;
this.height=json.height;
this.property=json.property;
}
}
functiontest(){
alert('测试');
};
functionclickCheckBox(){};
varProp={
nodes:[[{
subject:'环节ID',
id:'n_p_id',
text:'span'
},
{
subject:'环节名称',
id:'n_p_name',
text:'input'
},
{
subject:'环节描述',
id:'n_p_desc',
text:'textarea'
}],[{
subject:'群组',
id:'n_p_group',
text:'input',
btn:{
click:test,
hide:true
}
},
{
subject:'处理人',
id:'n_p_role',
text:'input',
btn:{
click:test,
hide:true
}
},
{
subject:'1',
id:'n_p_node',
text:'input'
},
{
subject:'2',
id:'n_p_dgroup',
text:'input',
btn:{
click:test,
hide:true
}
},
{
subject:'3',
id:'n_p_dnode',
text:'input',
btn:{
click:test,
hide:true
}
},
{
subject:'4',
id:'n_p_dcur',
text:'select',
options:[{
id:'0',
text:'否'
},
{
id:'1',
text:'是'
}]
},
{
subject:'5',
id:'n_p_num',
text:'input'
},
{
subject:'6',
id:'n_p_other',
text:'input'
}],[{
subject:'1',
id:'n_p_in',
text:'input'
},
{
subject:'2',
id:'n_p_out',
text:'input'
}],[{
subject:'环节办理时限',
id:'n_p_time',
text:'input'
},
{
subject:'通知方式',
id:'n_p_timetype',
text:'input'
},
{
subject:'1',
id:'n_p_timeedit',
text:'input'
},
{
subject:'2',
id:'n_p_timesend',
text:'input'
}],[{
subject:'启动前调用',
id:'n_p_call1',
text:'input'
},
{
subject:'启动后调用',
id:'n_p_call2',
text:'input'
},
{
subject:'进行中调用',
id:'n_p_call3',
text:'input'
},
{
subject:'完成前调用',
id:'n_p_call4',
text:'input'
},
{
subject:'完成后调用',
id:'n_p_call5',
text:'input'
}]],
lines:[[{
subject:'ID',
id:'l_p_id',
text:'span'
},
{
subject:'名称',
id:'l_p_name',
text:'input'
},
{
subject:'描述',
id:'l_p_desc',
text:'textarea'
},
{
subject:'上一环节',
id:'l_p_pre',
text:'span'
},
{
subject:'下一环节',
id:'l_p_next',
text:'span'
},
{
subject:'1',
id:'l_p_type',
text:'input'
},
{
subject:'2',
id:'l_p_mp',
text:'input'
},
{
subject:'3',
id:'l_p_mpsel',
text:'input'
},
{
subject:'4',
id:'l_p_mptype',
text:'input'
},
{
subject:'5',
id:'l_p_mplx',
text:'input'
}],[{
subject:'可使用群组',
id:'l_p_group',
text:'input'
},
{
subject:'可使用角色',
id:'l_p_role',
text:'input'
},
{
subject:'不可使用群组',
id:'l_p_dgroup',
text:'input'
},
{
subject:'可使用角色',
id:'l_p_drole',
text:'input'
}]],
panels:[{
flag:'help',
id:'help',
type:0,
title:'帮助',
body:'1.环节可用鼠标拖拽<br>        鼠标选中环节后不释放，拖拽鼠标，环节将随鼠标移动，释放鼠标后，环节不再移动。<br>'+'2.路径的两个端点可以通过鼠标拖拽，改变路径指向的环节<br>        鼠标选中路径的端点后不释放，拖拽鼠标，路径被选中的端点将鼠标移动，在选中的环节释放鼠标后，路径被选中的端点将指向该选中的环节。<br>'+'3.ctrl+a，全选。<br>4.按住ctrl，鼠标选中对象，可以多选。<br>5.delete，删除选中对象。<br>6.使用鼠标多选<br>        鼠标点击空白处不释放，拖拽鼠标，会出现一个长方形虚框，虚框的范围随着鼠标移动而变化，虚框范围内的对象将被选中。'+'<br>'
},
{
flag:'n',
id:'n_prop_panel',
type:1,
title:'环节',
tabs:[{
id:'常规',
val:0,
type:'nodes'
},
{
id:'候选人',
val:1,
type:'nodes'
},
{
id:'控制',
val:2,
type:'nodes'
},
{
id:'时限',
val:3,
type:'nodes'
},
{
id:'调用',
val:4,
type:'nodes'
}]
},
{
flag:'l',
id:'l_prop_panel',
type:1,
title:'路径',
tabs:[{
id:'基本',
val:0,
type:'lines'
},
{
id:'人员',
val:1,
type:'lines'
}]
}],
clear:function(){
for(vari=0;i<this.nodes.length;i++){
varobj=this.nodes[i];
for(varj=0;j<obj.length;j++){
switch(obj[j].text){
case'span':
document.getElementById(obj[j].id).innerHTML='';
break;
default:
document.getElementById(obj[j].id).value='';
break;
}
}
}
for(vari=0;i<this.lines.length;i++){
varobj=this.lines[i];
for(varj=0;j<obj.length;j++){
switch(obj[j].text){
case'span':
document.getElementById(obj[j].id).innerHTML='';
break;
default:
document.getElementById(obj[j].id).value='';
break;
}
}
}
},
setProperty:function(type){
varobjs=null;
if(type=='n')objs=this.nodes;
elseobjs=this.lines;
vararr=[];
for(vari=0;i<objs.length;i++){
varobj=objs[i];
for(varj=0;j<obj.length;j++){
varv=null;
switch(obj[j].text){
case'span':
v=document.getElementById(obj[j].id).innerHTML;
break;
default:
v=document.getElementById(obj[j].id).value;
break;
}
varjson={
id:obj[j].id,
text:obj[j].text,
value:v
};
arr[arr.length]=json;
}
}
returnarr;
}
}

functionNodeImg(){
this.id='node_';
this.name='NewNode';
this.number=-1;
this.type='node';
this.shape='img';
this.property=null;
this.selected=false;
this.left=100;
this.top=80;
this.width=75;
this.height=70;
this.imgHeight=35;
this.imgWidth=35;
this.textHeight=35;
this.textWidth=75;
this.imgDLeft=20;
this.textDTop=40;
this.mouseX=-1;
this.mouseY=-1;
this.x=-1;
this.y=-1;
this.strokeFlag=false;
this.shadowFlag=true;
this.textFlag=true;
this.mirrorFlag=false;
this.obj=null;
this.shadowObj=null;
this.textObj=null;
this.strokeObj=null;
this.init=function(){
vargroupObj=document.getElementById('group');
varobj=document.createElement('img');
obj.src='img/img_1.gif';
groupObj.appendChild(obj);
obj.title=this.name;
obj.style.position='absolute';
obj.style.left=this.left+this.imgDLeft;
obj.style.top=this.top;
obj.style.width=this.imgWidth;
obj.style.height=this.imgHeight;
obj.style.cursor='hand';
obj.style.zIndex='1';
this.obj=obj;
if(this.textFlag){
vartextObj=document.createElement('div');
textObj.style.backgroundColor='#CEDEF0';
textObj.style.position='absolute';
textObj.style.left=this.left;
textObj.style.top=this.top+this.textDTop;
textObj.style.width=this.textWidth;
textObj.style.height=this.textHeight;
textObj.style.textAlign='center';
textObj.style.fontSize='9pt';
textObj.style.wordBreak='break-all';
textObj.style.overflow='hidden';
textObj.style.zIndex='0';
textObj.innerHTML=this.name;
textObj.style.zIndex='1';
groupObj.appendChild(textObj);
this.textObj=textObj;
}
if(!this.mirrorFlag){
varLove=groupObj.getAttribute('bindClass');
if(this.number<0){
this.number=Love.getObjectNum();
this.id=this.id+this.number;
obj.id=this.id;
this.name=this.id;
this.obj.title=this.id;
if(this.textObj)this.textObj.innerHTML=this.id;
}
Love.nodes[Love.nodes.length]=this;
}
};
this.setDisplay=function(flag){
this.obj.style.display=flag;
this.textObj.style.display=flag;
};
this.pointInObj=function(x,y){
varres=false;
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
varx1=this.left+this.imgDLeft;
varx2=x1+this.imgWidth;
vary1=this.top;
vary2=y1+this.imgHeight;
if((x>=x1)&&(x<=x2)&&(y>=y1)&&(y<=y2)){
this.mouseX=x;
this.mouseY=y;
this.x=x-this.obj.offsetLeft+this.imgDLeft;
this.y=y-this.obj.offsetTop;
res=true;
}
returnres;
};
this.move=function(x,y,mouseX,mouseY){
this.left=GroupEvent.getX(x)-this.x-GroupEvent.getX(mouseX)+this.mouseX;
this.top=GroupEvent.getY(y)-this.y-GroupEvent.getY(mouseY)+this.mouseY;
this.obj.style.left=this.left+this.imgDLeft;
this.obj.style.top=this.top;
this.textObj.style.left=this.left;
this.textObj.style.top=this.top+this.textDTop;
};
this.moveEnd=function(){
this.x=0;
this.y=0;
this.mouseX=this.left;
this.mouseY=this.top
};
this.setSelected=function(){
this.textObj.style.backgroundColor='green';
this.textObj.style.color='#ffffff';
this.selected=true;
};
this.clearSelected=function(){
this.textObj.style.backgroundColor='#CEDEF0';
this.textObj.style.color='';
this.selected=false;
};
this.remove=function(){
vargroup=document.getElementById('group');
group.removeChild(this.obj);
group.removeChild(this.textObj);
};
this.setLeft=function(n){
this.left=n;
this.obj.style.left=this.left+this.imgDLeft;
this.textObj.style.left=this.left;
};
this.setTop=function(n){
this.top=n;
this.obj.style.top=this.top;
this.textObj.style.top=this.top+this.textDTop;
};
this.setWidth=function(n){
this.width=n;
this.obj.style.width=n;
};
this.setHeight=function(n){
this.height=n;
this.obj.style.height=n;
};
this.getDots=function(){
varl=this.left;
vart=this.top;
varw=this.width;
varh=this.height;
vardots=newArray();
vardot;
dots[dots.length]={
x:l+this.imgDLeft,
y:t+this.imgHeight/2
};
dots[dots.length]={
x:l+this.imgDLeft+this.imgWidth,
y:t+this.imgHeight/2
};
dots[dots.length]={
x:l+w/2,
y:t
};
dots[dots.length]={
x:l+w/2,
y:t+h
};
returndots;
};
this.setProperty=function(type){
Prop.clear();
document.getElementById(type+'_p_id').innerHTML=this.id;
document.getElementById(type+'_p_name').value=this.name;
if(this.property){
varnum=this.property.length;
for(vari=0;i<num;i++){
switch(this.property[i].text){
case'span':
document.getElementById(this.property[i].id).innerHTML=this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value=this.property[i].value;
break;
}
}
}
};
this.getProperty=function(property){
this.property=property;
this.name=property.n_p_name;
this.title=this.name;
};
this.toJson=function(){
varjson={
id:this.id,
name:this.name,
type:this.type,
shape:this.shape,
number:this.number,
left:this.left,
top:this.top,
width:this.width,
height:this.height,
property:this.property
};
returnjson;
};
this.jsonTo=function(json){
this.id=json.id;
this.name=json.name;
this.type=json.type;
this.shape=json.shape;
this.number=json.number;
this.left=json.left;
this.top=json.top;
this.width=json.width;
this.height=json.height;
this.property=json.property;
}
}

JSON=new
function(){
this.decode=function(){
varfilter,result,self,tmp;
if($$("toString")){
switch(arguments.length){
case2:
self=arguments[0];
filter=arguments[1];
break;
case1:
if($[typeofarguments[0]](arguments[0])===Function){
self=this;
filter=arguments[0];
}elseself=arguments[0];
break;
default:
self=this;
break;
};
if(rc.test(self)){
try{
result=e("(".concat(self,")"));
if(filter&&result!==null&&(tmp=$[typeofresult](result))&&(tmp===Array||tmp===Object)){
for(selfinresult)result[self]=v(self,result)?filter(self,result[self]):result[self];
}
}catch(z){}
}else{
thrownewJSONError("baddata");
}
};
returnresult;
};
this.encode=function(){
varself=arguments.length?arguments[0]:this,
result,
tmp;
if(self===null)result="null";
elseif(self!==undefined&&(tmp=$[typeofself](self))){
switch(tmp){
caseArray:
result=[];
for(vari=0,
j=0,
k=self.length;j<k;j++){
if(self[j]!==undefined&&(tmp=JSON.encode(self[j])))result[i++]=tmp;
};
result="[".concat(result.join(","),"]");
break;
caseBoolean:
result=String(self);
break;
caseDate:
result='"'.concat(self.getFullYear(),'-',d(self.getMonth()+1),'-',d(self.getDate()),'T',d(self.getHours()),':',d(self.getMinutes()),':',d(self.getSeconds()),'"');
break;
caseFunction:
break;
caseNumber:
result=isFinite(self)?String(self):"null";
break;
caseString:
result='"'.concat(self.replace(rs,s).replace(ru,u),'"');
break;
default:
vari=0,
key;
result=[];
for(keyinself){
if(self[key]!==undefined&&(tmp=JSON.encode(self[key])))result[i++]='"'.concat(key.replace(rs,s).replace(ru,u),'":',tmp);
};
result="{".concat(result.join(","),"}");
break;
}
};
returnresult;
};
this.toDate=function(){
varself=arguments.length?arguments[0]:this,
result;
if(rd.test(self)){
result=newDate;
result.setHours(i(self,11,2));
result.setMinutes(i(self,14,2));
result.setSeconds(i(self,17,2));
result.setMonth(i(self,5,2)-1);
result.setDate(i(self,8,2));
result.setFullYear(i(self,0,4));
}elseif(rt.test(self))result=newDate(self*1000);
returnresult;
};
varc={
"\b":"b",
"\t":"t",
"\n":"n",
"\f":"f",
"\r":"r",
'"':'"',
"\\":"\\",
"/":"/"
},
d=function(n){
returnn<10?"0".concat(n):n
},
e=function(c,f,e){
e=eval;
deleteeval;
if(typeofeval==="undefined")eval=e;
f=eval(""+c);
eval=e;
returnf
},
i=function(e,p,l){
return1*e.substr(p,l)
},
p=["","000","00","0",""],
rc=null,
rd=/^[0-9]{4}\-[0-9]{2}\-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}$/,
rs=/(\x5c|\x2F|\x22|[\x0c-\x0d]|[\x08-\x0a])/g,
rt=/^([0-9]+|[0-9]+[,\.][0-9]{1,3})$/,
ru=/([\x00-\x07]|\x0b|[\x0e-\x1f])/g,
s=function(i,d){
return"\\".concat(c[d])
},
u=function(i,d){
varn=d.charCodeAt(0).toString(16);
return"\\u".concat(p[n.length],n)
},
v=function(k,v){
return$[typeofresult](result)!==Function&&(v.hasOwnProperty?v.hasOwnProperty(k):v.constructor.prototype[k]!==v[k])
},
$={
"boolean":function(){
returnBoolean
},
"function":function(){
returnFunction
},
"number":function(){
returnNumber
},
"object":function(o){
returnoinstanceofo.constructor?o.constructor:null
},
"string":function(){
returnString
},
"undefined":function(){
returnnull
}
},
$$=function(m){
function$(c,t){
t=c[m];
deletec[m];
try{
e(c)
}catch(z){
c[m]=t;
return1
}
};
return$(Array)&&$(Object)
};
try{
rc=newRegExp('^("(\\\\.|[^"\\\\\\n\\r])*?"|[,:{}\\[\\]0-9.\\-+Eaeflnr-u\\n\\r\\t])+?$')
}catch(z){
rc=/^(true|false|null|\[.*\]|\{.*\}|".*"|\d+|\d+\.\d+)$/
}
};

functionNodeOval(){
this.id='node_';
this.name='NewNode';
this.number=-1;
this.type='start';
this.shape='oval';
this.property=null;
this.selected=false;
this.left=100;
this.top=80;
this.width=20;
this.height=20;
this.mouseX=-1;
this.mouseY=-1;
this.x=-1;
this.y=-1;
this.strokeFlag=false;
this.shadowFlag=true;
this.textFlag=false;
this.mirrorFlag=false;
this.obj=null;
this.shadowObj=null;
this.textObj=null;
this.strokeObj=null;
this.init=function(){
vargroupObj=document.getElementById('group');
varobj=document.createElement('v:oval');
groupObj.appendChild(obj);
obj.title=this.name;
obj.style.position='absolute';
obj.style.left=this.left;
obj.style.top=this.top;
obj.style.width=this.width;
obj.style.height=this.height;
obj.style.cursor='hand';
obj.style.zIndex='1';
if(this.type=='start'){
obj.fillcolor='#33CC00';
obj.strokecolor='#33CC00';
}else{
obj.fillcolor='red';
obj.strokecolor='red';
}
obj.strokeweight='3';
this.obj=obj;
if(this.shadowFlag){
varshadowObj=document.createElement('v:shadow');
shadowObj.on=false;
shadowObj.type='single';
shadowObj.color='#b3b3b3';
shadowObj.offset='3px,3px';
obj.appendChild(shadowObj);
this.shadowObj=shadowObj;
}
if(this.strokeFlag){
varstrokeObj=document.createElement('v:stroke');
obj.appendChild(strokeObj);
this.strokeObj=strokeObj;
}
if(this.textFlag){
vartextObj=document.createElement('v:textbox');
textObj.inset='2pt,5pt,2pt,5pt';
textObj.style.textAlign='center';
textObj.style.color='blue';
textObj.style.fontSize='9pt';
textObj.innerHTML=this.name;
obj.appendChild(textObj);
this.textObj=textObj;
}
if(!this.mirrorFlag){
varLove=groupObj.getAttribute('bindClass');
if(this.number<0){
this.number=Love.getObjectNum();
this.id=this.id+this.number;
obj.id=this.id;
this.name=this.id;
this.obj.title=this.id;
if(this.textObj)this.textObj.innerHTML=this.id;
}
Love.nodes[Love.nodes.length]=this;
}
};
this.setType=function(type){
if(type)this.type=type;
};
this.setDisplay=function(flag){
this.obj.style.display=flag;
};
this.pointInObj=function(x,y){
varres=false;
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
varx1=this.left;
varx2=x1+this.width;
vary1=this.top;
vary2=y1+this.height;
varcenterX=x1+this.width/2;
varcenterY=y1+this.height/2;
varradius=this.width/2;
vard=(x-centerX)*(x-centerX)+(y-centerY)*(y-centerY);
if((radius*radius)>d){
this.mouseX=x;
this.mouseY=y;
this.x=x-this.obj.offsetLeft;
this.y=y-this.obj.offsetTop;
res=true;
}
returnres;
};
this.move=function(x,y,mouseX,mouseY){
this.obj.style.left=GroupEvent.getX(x)-this.x-GroupEvent.getX(mouseX)+this.mouseX;
this.obj.style.top=GroupEvent.getY(y)-this.y-GroupEvent.getY(mouseY)+this.mouseY;
this.left=parseInt(this.obj.style.left);
this.top=parseInt(this.obj.style.top);
};
this.moveEnd=function(){
this.x=0;
this.y=0;
this.mouseX=this.left;
this.mouseY=this.top
};
this.setSelected=function(){
this.shadowObj.on='T';
if(this.textObj)this.textObj.style.color='green';
this.selected=true;
};
this.clearSelected=function(){
this.shadowObj.on=false;
if(this.textObj)this.textObj.style.color='blue';
this.selected=false;
};
this.remove=function(){
vargroup=document.getElementById('group');
group.removeChild(this.obj);
};
this.setLeft=function(n){
this.left=n;
this.obj.style.left=n;
};
this.setTop=function(n){
this.top=n;
this.obj.style.top=n;
};
this.setWidth=function(n){
this.width=n;
this.obj.style.width=n;
};
this.setHeight=function(n){
this.height=n;
this.obj.style.height=n;
};
this.getDots=function(){
varl=this.left;
vart=this.top;
varw=this.width;
varh=this.height;
vardots=newArray();
vardot;
dots[dots.length]={
x:l,
y:t+h/2
};
dots[dots.length]={
x:l+w,
y:t+h/2
};
dots[dots.length]={
x:l+w/2,
y:t
};
dots[dots.length]={
x:l+w/2,
y:t+h
};
returndots;
};
this.setProperty=function(type){
Prop.clear();
document.getElementById(type+'_p_id').innerHTML=this.id;
document.getElementById(type+'_p_name').value=this.name;
if(this.property){
varnum=this.property.length;
for(vari=0;i<num;i++){
switch(this.property[i].text){
case'span':
document.getElementById(this.property[i].id).innerHTML=this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value=this.property[i].value;
break;
}
}
}
};
this.getProperty=function(property){
this.property=property;
this.name=property.n_p_name;
this.title=this.name;
};
this.toJson=function(){
varjson={
id:this.id,
name:this.name,
type:this.type,
shape:this.shape,
number:this.number,
left:this.left,
top:this.top,
width:this.width,
height:this.height,
property:this.property
};
returnjson;
};
this.jsonTo=function(json){
this.id=json.id;
this.name=json.name;
this.type=json.type;
this.shape=json.shape;
this.number=json.number;
this.left=json.left;
this.top=json.top;
this.width=json.width;
this.height=json.height;
this.property=json.property;
}
}

functionPolyLine(){
this.id='line_';
this.name='NewLine';
this.number=-1;
this.type='line';
this.shape='polyline';
this.property=null;
this.selected=false;
this.fromX=-1;
this.fromY=-1;
this.toX=-1;
this.toY=-1;
this.polyDot=[];
this.textFlag=false;
this.mirrorFlag=false;
this.obj=null;
this.strokeObj=null;
this.textObj=null;
this.fromObj=null;
this.toObj=null;
this.init=function(){
vargroupObj=document.getElementById('group');
varobj=document.createElement('v:polyline');
groupObj.appendChild(obj);
obj.title=this.name;
obj.points.value='0,2050,0100,20';
obj.strokecolor='blue';
obj.strokeweight='3';
obj.filled='false';
obj.style.position='absolute';
obj.style.zIndex='2';
obj.style.cursor='hand';
this.obj=obj;
varstrokeObj=document.createElement('v:stroke');
obj.appendChild(strokeObj);
strokeObj.endArrow="Classic";
this.strokeObj=strokeObj;
if(this.textFlag){
vartextObj=document.createElement('v:textbox');
textObj.inset='10pt,1pt,5pt,5pt';
textObj.style.textAlign='center';
textObj.style.verticalAlign='bottom';
textObj.style.color='blue';
textObj.style.fontSize='9pt';
textObj.innerHTML=this.name;
obj.appendChild(textObj);
this.textObj=textObj;
}
if(!this.mirrorFlag){
varLove=groupObj.getAttribute('bindClass');
if(this.number<0){
this.number=Love.getObjectNum();
this.id=this.id+this.number;
obj.id=this.id;
this.name=this.id;
this.obj.title=this.id;
}
Love.lines[Love.lines.length]=this;
}
};
this.setFrom=function(x,y,obj){
this.fromX=GroupEvent.getX(x);
this.fromY=GroupEvent.getY(y);
if(obj)this.fromObj=obj;
this.polyDot=[];
this.obj.points.value=this.getPointsValue();
};
this.setTo=function(x,y,obj){
this.toX=GroupEvent.getX(x);
this.toY=GroupEvent.getY(y);
if(obj)this.toObj=obj;
this.polyDot=[];
this.obj.points.value=this.getPointsValue();
};
this.setDisplay=function(flag){
this.obj.style.display=flag;
};
this.setShape=function(shape){
if(shape)this.shape=shape;
};
this.link=function(lineMirror){
this.fromObj=lineMirror.fromObj;
this.toObj=lineMirror.toObj;
this.relink();
this.fromObj.clearSelected();
};
this.relink=function(){
varfromDots=this.fromObj.getDots();
vartoDots=this.toObj.getDots();
switch(this.shape){
case'polyline':
this.relinkPolyline(fromDots,toDots);
break;
case'line':
this.relinkLine(fromDots,toDots);
break;
default:
}
};
this.relinkLine=function(fromDots,toDots){
varfromDotNum=fromDots.length;
vartoDotNum=toDots.length;
varlineLen=-1;
varfromDot;
vartoDot;
for(vari=0;i<fromDotNum;i++){
for(varj=0;j<toDotNum;j++){
if(lineLen<0){
lineLen=this.getLineLength(fromDots[i].x,fromDots[i].y,toDots[j].x,toDots[j].y);
fromDot=fromDots[i];
toDot=toDots[j];
}elseif(lineLen>this.getLineLength(fromDots[i].x,fromDots[i].y,toDots[j].x,toDots[j].y)){
lineLen=this.getLineLength(fromDots[i].x,fromDots[i].y,toDots[j].x,toDots[j].y);
fromDot=fromDots[i];
toDot=toDots[j];
}
}
}
this.fromX=fromDot.x;
this.fromY=fromDot.y;
this.toX=toDot.x;
this.toY=toDot.y;
this.obj.points.value=this.getPointsValue();
};
this.relinkPolyline=function(fromDots,toDots){
varfromDot;
vartoDot;
this.polyDot=[];
varxflag=-1;
varyflag=-1;
if((this.fromObj.left+this.fromObj.width)<toDots[2].x){
fromDot=fromDots[1];
toDot=toDots[0];
xflag=0;
}elseif(this.fromObj.left>toDots[2].x){
fromDot=fromDots[0];
toDot=toDots[1];
xflag=1;
}else{
fromDot=fromDots[1];
toDot=toDots[1];
xflag=2;
}
if(fromDots[0].y>toDots[3].y){
if(xflag==2){
fromDot=fromDots[0];
toDot=toDots[0];
this.polyDot[0]={
x:Math.min(fromDot.x,toDot.x)-30,
y:fromDot.y
};
this.polyDot[1]={
x:Math.min(fromDot.x,toDot.x)-30,
y:toDot.y
};
}else{
toDot=toDots[3];
this.polyDot[0]={
x:toDot.x,
y:fromDot.y
};
}
}elseif(fromDots[0].y<toDots[2].y){
if(xflag==2){
this.polyDot[0]={
x:Math.max(fromDot.x,toDot.x)+30,
y:fromDot.y
};
this.polyDot[1]={
x:Math.max(fromDot.x,toDot.x)+30,
y:toDot.y
};
}else{
toDot=toDots[2];
this.polyDot[0]={
x:toDot.x,
y:fromDot.y
};
}
}else{
if(xflag==0){
fromDot=fromDots[2];
toDot=toDots[2];
this.polyDot[0]={
x:fromDot.x,
y:Math.min(fromDot.y,toDot.y)-10
};
this.polyDot[1]={
x:toDot.x,
y:Math.min(fromDot.y,toDot.y)-10
};
}elseif(xflag==1){
fromDot=fromDots[3];
toDot=toDots[3];
this.polyDot[0]={
x:fromDot.x,
y:Math.max(fromDot.y,toDot.y)+10
};
this.polyDot[1]={
x:toDot.x,
y:Math.max(fromDot.y,toDot.y)+10
};
}
}
this.fromX=fromDot.x;
this.fromY=fromDot.y;
this.toX=toDot.x;
this.toY=toDot.y;
this.obj.points.value=this.getPointsValue();
};
this.getPointsValue=function(){
varres=this.fromX+','+this.fromY;
for(vari=0;i<this.polyDot.length;i++){
res+=''+this.polyDot[i].x+','+this.polyDot[i].y;
}
res+=''+this.toX+','+this.toY;
returnres;
};
this.getLineLength=function(x1,y1,x2,y2){
returnMath.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
};
this.pointInObj=function(x,y){
varres=false;
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
varx1=this.fromX;
vary1=this.fromY;
varx2=this.toX;
vary2=this.toY;
varx21=x2-x1;
vary21=y2-y1;
switch(this.shape){
case'polyline':
for(vari=0;i<this.polyDot.length;i++){
x2=this.polyDot[i].x;
y2=this.polyDot[i].y;
x21=x2-x1;
y21=y2-y1;
if(x21==0){
res=(Math.abs(x-x1)<5)&&(Math.min(y1,y2)<=y)&&(Math.max(y1,y2)>=y);
}elseif(y21==0){
res=(Math.abs(y-y1)<5)&&(Math.min(x1,x2)<=x)&&(Math.max(x1,x2)>=x);
}
if(res)break;
x1=x2;
y1=y2;
}
if(!res){
x2=this.toX;
y2=this.toY;
x21=x2-x1;
y21=y2-y1;
if(x21==0){
res=(Math.abs(x-x1)<5)&&(Math.min(y1,y2)<=y)&&(Math.max(y1,y2)>=y);
}elseif(y21==0){
res=(Math.abs(y-y1)<5)&&(Math.min(x1,x2)<=x)&&(Math.max(x1,x2)>=x);
}
}
break;
case'line':
if(x21==0){
res=(Math.abs(x-x1)<5)&&(Math.min(y1,y2)<=y)&&(Math.max(y1,y2)>=y);
}elseif(y21==0){
res=(Math.abs(y-y1)<5)&&(Math.min(x1,x2)<=x)&&(Math.max(x1,x2)>=x);
}else{
res=(Math.min(y1,y2)<=y)&&(Math.max(y1,y2)>=y)&&(Math.min(x1,x2)<=x)&&(Math.max(x1,x2)>=x)&&((Math.abs(Math.floor((x21/y21)*(y-y1)+x1-x))<5)||(Math.abs(Math.floor((y21/x21)*(x-x1)+y1-y))<5));
}
break;
default:
}
returnres;
};
this.pointInStroke=function(x,y){
varres=-1;
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
varx1=this.fromX;
varx2=this.toX;
vary1=this.fromY;
vary2=this.toY;
if((Math.abs(x2-x)<6)&&(Math.abs(y2-y)<6))res=0;
if((Math.abs(x1-x)<6)&&(Math.abs(y1-y)<6))res=1;
returnres;
};
this.setSelected=function(){
this.obj.strokecolor='green';
if(this.textObj)this.textObj.style.color='green';
this.selected=true;
this.obj.style.zIndex='22';
};
this.move=function(){};
this.moveEnd=function(){};
this.setMoveSelected=function(){
this.obj.strokecolor='red';
if(this.textObj)this.textObj.style.color='green';
this.selected=true;
this.obj.style.zIndex='22';
};
this.clearSelected=function(){
this.obj.strokecolor='blue';
if(this.textObj)this.textObj.style.color='blue';
this.selected=false;
this.obj.style.zIndex='2';
};
this.remove=function(){
vargroup=document.getElementById('group');
group.removeChild(this.obj);
};
this.setProperty=function(type){
Prop.clear();
document.getElementById(type+'_p_id').innerHTML=this.id;
document.getElementById(type+'_p_name').value=this.name;
document.getElementById(type+'_p_pre').innerHTML=this.fromObj.name;
document.getElementById(type+'_p_next').innerHTML=this.toObj.name;
if(this.property){
varnum=this.property.length;
for(vari=0;i<num;i++){
switch(this.property[i].text){
case'span':
document.getElementById(this.property[i].id).innerHTML=this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value=this.property[i].value;
break;
}
}
}
};
this.getProperty=function(property){
this.property=property;
this.name=property.l_p_name;
this.title=this.name;
};
this.toJson=function(){
varjson={
id:this.id,
name:this.name,
type:this.type,
shape:this.shape,
number:this.number,
from:this.fromObj.id,
to:this.toObj.id,
fromx:this.fromX,
fromy:this.fromY,
tox:this.toX,
toy:this.toY,
polydot:this.polyDot,
property:this.property
};
returnjson;
};
this.jsonTo=function(json){
this.id=json.id;
this.name=json.name;
this.type=json.type;
this.shape=json.shape;
this.number=json.number;
this.fromX=json.fromx;
this.fromY=json.fromy;
this.toX=json.tox;
this.toY=json.toy;
this.polyDot=json.polydot;
this.property=json.property;
vargroup=document.getElementById('group');
varLove=group.getAttribute('bindClass');
varnodes=Love.nodes;
varnodeNum=nodes.length;
varnode=null;
for(vari=0;i<nodeNum;i++){
node=nodes[i];
if(node.id==json.from){
this.fromObj=node;
}elseif(node.id==json.to){
this.toObj=node;
}
}
}
}

functionWindow(){
this.id='propWin';
this.left=100;
this.top=3;
this.height=300;
this.width=400;
this.title='帮助';
this.selected=false;
this.x=-1;
this.y=-1;
this.obj=null;
this.objBody=null;
this.init=function(){
vartoolObj=document.getElementById('tool');
varwin=document.createElement('div');
toolObj.appendChild(win);
this.obj=win;
win.setAttribute('bindClass',this);
win.id=this.id;
win.style.position='absolute';
win.style.left=this.left;
win.style.top=this.top;
win.style.width=this.width;
win.className='x-window';
vars='<divclass="x-window-tl">';
s+='<divclass="x-window-tr">';
s+='<divid="a1"class="x-window-tc"><divclass="x-tool-close"></div><span>标题</span>';
s+='</div>';
s+='</div>';
s+='</div>';
s+='<divclass="x-window-ml">';
s+='<divclass="x-window-mr">';
s+='<divclass="x-window-mc">';
s+='</div>';
s+='</div>';
s+='</div>';
s+='<divclass="x-window-bl">';
s+='<divclass="x-window-br">';
s+='<divclass="x-window-bc">';
s+='</div>';
s+='</div>';
s+='</div>';
win.appendChild(this.createTop());
win.appendChild(this.createMiddle());
win.appendChild(this.createBottom());
};
this.createTop=function(){
varl=document.createElement('div');
l.className='x-window-tl';
varr=document.createElement('div');
r.className='x-window-tr';
l.appendChild(r);
varc=document.createElement('div');
c.className='x-window-tc';
r.appendChild(c);
c.setAttribute('pid',this.id);
c.onmousedown=WindowEvent.mouseDown;
c.onmousemove=WindowEvent.mouseMove;
c.onmouseup=WindowEvent.mouseUp;
varcloseObj=document.createElement('div');
closeObj.className='x-tool-close';
c.appendChild(closeObj);
closeObj.setAttribute('pid',this.id);
closeObj.onclick=function(){
varp=document.getElementById(this.pid);
p.style.display='none';
};
vartitle=document.createElement('span');
title.innerHTML=this.title;
this.obj.t=title;
c.appendChild(title);
returnl;
};
this.createMiddle=function(){
varl=document.createElement('div');
l.className='x-window-ml';
varr=document.createElement('div');
r.className='x-window-mr';
l.appendChild(r);
varc=document.createElement('div');
c.className='x-window-mc';
r.appendChild(c);
for(vari=0;i<Prop.panels.length;i++){
varpanel=document.createElement('div');
panel.id=Prop.panels[i].id;
if(i>0)panel.style.display='none';
c.appendChild(panel);
if(Prop.panels[i].type==1){
vartabs=newTabPanel();
tabs.init();
panel.appendChild(tabs.obj);
panel.setAttribute('tabs',tabs);
for(varj=0;j<Prop.panels[i].tabs.length;j++){
vartab=newTab();
tab.init(Prop.panels[i].tabs[j].id,Prop[Prop.panels[i].tabs[j].type][Prop.panels[i].tabs[j].val]);
tabs.appendFuck(tab);
panel.appendChild(tab.bObj);
if(j==0)tabs.setSelected(tab);
}
}else{
panel.innerHTML=Prop.panels[i].body;
}
}
returnl;
};
this.createBottom=function(){
varl=document.createElement('div');
l.className='x-window-bl';
varr=document.createElement('div');
r.className='x-window-br';
l.appendChild(r);
varc=document.createElement('div');
c.className='x-window-bc';
r.appendChild(c);
varba=document.createElement('button');
ba.setAttribute('pid',this.id);
c.appendChild(ba);
ba.className='btn';
ba.value='应用';
ba.onclick=function(){
varwin=document.getElementById('propWin');
varobj=win.selected;
if(obj){
vartype=win.type;
if(obj){
obj.property=Prop.setProperty(type);
}
obj.name=document.getElementById(type+'_p_name').value;
if(obj.textObj)obj.textObj.innerHTML=obj.name;
obj.obj.title=obj.name;
}
};
varb=document.createElement('button');
b.setAttribute('pid',this.id);
c.appendChild(b);
b.className='btn';
b.value='关闭';
b.onclick=function(){
varp=document.getElementById(this.pid);
p.style.display='none';
};
returnl;
};
this.down=function(){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
x=GroupEvent.getX(x);
y=GroupEvent.getY(y);
this.x=x-this.obj.offsetLeft;
this.y=y-this.obj.offsetTop;
this.selected=true;
};
this.move=function(){
if(this.selected){
varx=GroupEvent.getMouseX();
vary=GroupEvent.getMouseY();
this.left=GroupEvent.getX(x)-this.x;
this.top=GroupEvent.getY(y)-this.y;
this.obj.style.left=this.left+'px';
this.obj.style.top=this.top+'px';
}
};
this.up=function(){
this.selected=false;
if(this.left<3){
this.left=10;
this.obj.style.left=this.left+'px';
}
if(this.top<3){
this.top=3;
this.obj.style.top=this.top+'px';
}
}
};
varWindowEvent={
mouseDown:function(){
varwin=document.getElementById(this.pid);
this.setCapture();
varwinClass=win.getAttribute('bindClass');
winClass.down();
},
mouseMove:function(){
varwin=document.getElementById(this.pid);
varwinClass=win.getAttribute('bindClass');
winClass.move();
returnfalse;
},
mouseUp:function(){
varwin=document.getElementById(this.pid);
varwinClass=win.getAttribute('bindClass');
winClass.up();
this.releaseCapture();
document.getElementById('group').focus();
}
}

functionTabPanel(){
this.tabs=[];
this.obj=null;
this.ulObj=null;
this.selected=null;
this.init=function(){
varobj=document.createElement('div');
obj.className='x-tab-panel-header';
obj.setAttribute('bindClass',this);
varwrapObj=document.createElement('div');
wrapObj.className='x-tab-strip-top';
obj.appendChild(wrapObj);
vartopObj=document.createElement('div');
topObj.className='x-tab-strip-wrap';
wrapObj.appendChild(topObj);
varulObj=document.createElement('ul');
topObj.appendChild(ulObj);
this.obj=obj;
this.ulObj=ulObj;
};
this.appendFuck=function(tab){
this.ulObj.appendChild(tab.obj);
tab.obj.pObj=this.obj;
this.tabs[this.tabs.length]=tab;
};
this.setSelected=function(tab){
if(!tab){
tab=this.tabs[0];
}
if(this.selected){
this.selected.obj.className='';
this.selected.bObj.className='x-tab-panel-body';
}
this.selected=tab;
tab.obj.className='x-tab-strip-active';
tab.bObj.className='x-tab-panel-body-show';
}
};
functionTab(){
this.obj=null;
this.bObj=null;
this.init=function(title,content){
varobj=document.createElement('li');
obj.setAttribute('bindClass',this);
this.obj=obj;
obj.onclick=function(){
vartabsClass=this.pObj.getAttribute('bindClass');
tabsClass.selected.obj.className='';
tabsClass.selected.bObj.className='x-tab-panel-body';
tabsClass.selected=this.getAttribute('bindClass');
this.className='x-tab-strip-active';
this.bObj.className='x-tab-panel-body-show';
};
varl=document.createElement('div');
l.className='x-tab-left';
obj.appendChild(l);
varr=document.createElement('div');
r.className='x-tab-right';
l.appendChild(r);
varc=document.createElement('div');
c.className='x-tab-middle';
r.appendChild(c);
c.innerHTML=title;
varbObj=document.createElement('div');
bObj.className='x-tab-panel-body';
this.bObj=bObj;
this.obj.bObj=bObj;
this.createBody(bObj,content);
};
this.createBody=function(pobj,content){
for(vari=0;i<content.length;i++){
varjson=content[i];
varobj=document.createElement('div');
pobj.appendChild(obj);
varhObj=document.createElement('span');
obj.appendChild(hObj);
hObj.innerHTML=json.subject+'：';
hObj.style.width='120px';
hObj.style.textAlign='center';
varbObj=document.createElement(json.text);
obj.appendChild(bObj);
bObj.id=json.id;
bObj.className='x-form-field';
switch(json.text){
case'select':
for(varj=0;j<json.options.length;j++){
bObj.options[j]=newOption(json.options[j].text,json.options[j].id);
}
break;
case'textarea':
bObj.rows=10;
break;
default:
}
if(json.btn){
varbtn=document.createElement('img');
btn.src='img/drop-add.gif';
btn.style.cursor='hand';
btn.onclick=json.btn.click;
obj.appendChild(btn);
}
}
}
}

</script>
</head>
<bodyclass='btype'onload="Prop.clear();document.getElementById('group').focus();">
<divid="tool">
</div>
<divid="group"onselectstart="returnfalse;">
</div>
<script>
varg=newGroup();
g.init();

g.setGroupArea();

varm=newMenu();
m.init();
varw=newWindow();
w.left=screen.availWidth-450;
w.init();

varjsonStr='{"id":null,"name":null,"count":37,"nodes":[{"id":"node_1","name":"开始","type":"start","shape":"oval","number":1,"left":258,"top":63,"width":20,"height":20,"property":[{"id":"n_p_id","text":"span","value":"node_1"},{"id":"n_p_name","text":"input","value":"开始"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_2","name":"结束","type":"end","shape":"oval","number":2,"left":612,"top":708,"width":20,"height":20,"property":[{"id":"n_p_id","text":"span","value":"node_2"},{"id":"n_p_name","text":"input","value":"结束"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_3","name":"部门主任审批","type":"node","shape":"img","number":3,"left":230,"top":140,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_3"},{"id":"n_p_name","text":"input","value":"部门主任审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_4","name":"办公室主任审批","type":"node","shape":"img","number":4,"left":230,"top":255,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_4"},{"id":"n_p_name","text":"input","value":"办公室主任审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_5","name":"公司副总审批","type":"node","shape":"img","number":5,"left":230,"top":364,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_5"},{"id":"n_p_name","text":"input","value":"公司副总审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_9","name":"公司老总审批","type":"node","shape":"img","number":9,"left":384,"top":367,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_9"},{"id":"n_p_name","text":"input","value":"公司老总审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_11","name":"部门人员办理","type":"node","shape":"rect","number":11,"left":368,"top":177,"width":100,"height":40,"property":[{"id":"n_p_id","text":"span","value":"node_11"},{"id":"n_p_name","text":"input","value":"部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_13","name":"相关部门领导办理","type":"node","shape":"img","number":13,"left":230,"top":501,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_13"},{"id":"n_p_name","text":"input","value":"相关部门领导办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_14","name":"相关部门人员办理","type":"node","shape":"img","number":14,"left":384,"top":504,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_14"},{"id":"n_p_name","text":"input","value":"相关部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_15","name":"部门人员办理","type":"node","shape":"img","number":15,"left":505,"top":213,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_15"},{"id":"n_p_name","text":"input","value":"部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_23","name":"相关人员办理","type":"node","shape":"img","number":23,"left":72,"top":277,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_23"},{"id":"n_p_name","text":"input","value":"相关人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_28","name":"财务部领导审批","type":"node","shape":"rect","number":28,"left":527,"top":437,"width":100,"height":40,"property":[{"id":"n_p_id","text":"span","value":"node_28"},{"id":"n_p_name","text":"input","value":"财务部领导审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_30","name":"相关部门人员办理","type":"node","shape":"img","number":30,"left":309,"top":660,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_30"},{"id":"n_p_name","text":"input","value":"相关部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_31","name":"相关部门人员办理","type":"node","shape":"img","number":31,"left":526,"top":578,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_31"},{"id":"n_p_name","text":"input","value":"相关部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]}],"lines":[{"id":"line_6","name":"line_6","type":"line","shape":"line","number":6,"from":"node_1","to":"node_3","fromx":268,"fromy":83,"tox":267.5,"toy":140,"polydot":[],"property":null},{"id":"line_7","name":"line_7","type":"line","shape":"line","number":7,"from":"node_3","to":"node_4","fromx":267.5,"fromy":210,"tox":267.5,"toy":255,"polydot":[],"property":null},{"id":"line_10","name":"line_10","type":"line","shape":"polyline","number":10,"from":"node_4","to":"node_9","fromx":285,"fromy":272.5,"tox":421.5,"toy":367,"polydot":[{"x":421.5,"y":272.5}],"property":null},{"id":"line_12","name":"送办理","type":"line","shape":"polyline","number":12,"from":"node_3","to":"node_11","fromx":285,"fromy":157.5,"tox":418,"toy":177,"polydot":[{"x":418,"y":157.5}],"property":[{"id":"l_p_id","text":"span","value":"line_12"},{"id":"l_p_name","text":"input","value":"送办理"},{"id":"l_p_desc","text":"textarea","value":""},{"id":"l_p_pre","text":"span","value":"部门主任审批"},{"id":"l_p_next","text":"span","value":"部门人员办理"},{"id":"l_p_type","text":"select","value":"1"},{"id":"l_p_mp","text":"select","value":"0"},{"id":"l_p_mpsel","text":"select","value":"0"},{"id":"l_p_mptype","text":"select","value":"1"},{"id":"l_p_mplx","text":"select","value":"0"},{"id":"l_p_group","text":"input","value":""},{"id":"l_p_role","text":"input","value":""},{"id":"l_p_dgroup","text":"input","value":""},{"id":"l_p_drole","text":"input","value":""}]},{"id":"line_16","name":"line_16","type":"line","shape":"line","number":16,"from":"node_5","to":"node_13","fromx":267.5,"fromy":434,"tox":267.5,"toy":501,"polydot":[],"property":null},{"id":"line_17","name":"line_17","type":"line","shape":"line","number":17,"from":"node_13","to":"node_14","fromx":285,"fromy":518.5,"tox":404,"toy":521.5,"polydot":[],"property":null},{"id":"line_18","name":"line_18","type":"line","shape":"line","number":18,"from":"node_13","to":"node_9","fromx":285,"fromy":518.5,"tox":421.5,"toy":437,"polydot":[],"property":null},{"id":"line_19","name":"line_19","type":"line","shape":"line","number":19,"from":"node_9","to":"node_5","fromx":404,"fromy":384.5,"tox":285,"toy":381.5,"polydot":[],"property":null},{"id":"line_21","name":"line_21","type":"line","shape":"line","number":21,"from":"node_4","to":"node_5","fromx":267.5,"fromy":325,"tox":267.5,"toy":364,"polydot":[],"property":null},{"id":"line_22","name":"line_22","type":"line","shape":"polyline","number":22,"from":"node_5","to":"node_4","fromx":250,"fromy":381.5,"tox":250,"toy":272.5,"polydot":[{"x":220,"y":381.5},{"x":220,"y":272.5}],"property":null},{"id":"line_24","name":"line_24","type":"line","shape":"polyline","number":24,"from":"node_3","to":"node_23","fromx":250,"fromy":157.5,"tox":109.5,"toy":277,"polydot":[{"x":109.5,"y":157.5}],"property":null},{"id":"line_26","name":"line_26","type":"line","shape":"polyline","number":26,"from":"node_13","to":"node_23","fromx":250,"fromy":518.5,"tox":109.5,"toy":347,"polydot":[{"x":109.5,"y":518.5}],"property":null},{"id":"line_27","name":"line_27","type":"line","shape":"polyline","number":27,"from":"node_9","to":"node_15","fromx":439,"fromy":384.5,"tox":542.5,"toy":283,"polydot":[{"x":542.5,"y":384.5}],"property":null},{"id":"line_29","name":"line_29","type":"line","shape":"polyline","number":29,"from":"node_9","to":"node_28","fromx":439,"fromy":384.5,"tox":577,"toy":437,"polydot":[{"x":577,"y":384.5}],"property":null},{"id":"line_32","name":"line_32","type":"line","shape":"line","number":32,"from":"node_13","to":"node_30","fromx":267.5,"fromy":571,"tox":346.5,"toy":660,"polydot":[],"property":null},{"id":"line_33","name":"line_33","type":"line","shape":"line","number":33,"from":"node_14","to":"node_30","fromx":421.5,"fromy":574,"tox":346.5,"toy":660,"polydot":[],"property":null},{"id":"line_34","name":"line_34","type":"line","shape":"line","number":34,"from":"node_31","to":"node_30","fromx":546,"fromy":595.5,"tox":364,"toy":677.5,"polydot":[],"property":null},{"id":"line_36","name":"line_36","type":"line","shape":"polyline","number":36,"from":"node_14","to":"node_31","fromx":439,"fromy":521.5,"tox":563.5,"toy":578,"polydot":[{"x":563.5,"y":521.5}],"property":null},{"id":"line_37","name":"line_37","type":"line","shape":"polyline","number":37,"from":"node_30","to":"node_2","fromx":364,"fromy":677.5,"tox":622,"toy":708,"polydot":[{"x":622,"y":677.5}],"property":null}]}';
varj=JSON.decode(jsonStr);
g.jsonTo(j);
</script>

<divid="a">

</div>
</body>
</html>

//解析成BPM流程定义文件
functionparseJSON(json){

varstartNode="<start-statename='{0}'>{1}</start-state>";
varendNode="<end-statename='{0}'></state>";
varstateNode="<statename='{0}'>{1}</state>";

varnodes=json.nodes;
varlines=json.lines;

vardefinistationXML="";

for(vari=0;i<nodes.length;i++){
varnode=nodes[i];
vartemp="";
if(node.type=="start"){
temp=startNode;
}
if(node.type=="node"){
temp=stateNode;
}
if(node.type=="end"){
temp=endNode;
}

temp=temp.replace("{0}",node.name);
varxtemp="";
for(varj=0;j<lines.length;j++){
if(lines[j].from==node.id){
xtemp=xtemp+"<transitionto='"+lines[j].to+"'/>";
}
}
temp=temp.replace("{1}",xtemp);
definistationXML=definistationXML+temp;
}
return"<process-definition>"+definistationXML+"</process-definition>";
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航