首页 > 代码库 > JS流程设计器(二)

JS流程设计器(二)

此代码接着JS流程设计器(一)续写,该代码主要是怎么将设计好的流程图用最基本字符串的方式传到后台,再由后台字符串的方式重新显示在页面上。

 1 //转化成后端的方法
 2     function changebe(firstbegin){
 3         for(var x=0;x<shapeobjjson.shapeobj.length;x++){
 4             if(shapeobjjson.shapeobj[x].id==firstbegin){
 5                 if(firstbegin.indexOf("begin-circle")>-1){
 6                     laststr=laststr+"begin("+$("#"+firstbegin).text()+")";
 7                 }else if(firstbegin.indexOf("tableform")>-1){
 8                     laststr=laststr+"tab("+$("#"+firstbegin).text()+")";
 9                 }else if(firstbegin.indexOf("approval-circle")>-1){
10                     laststr=laststr+"dug("+$("#"+firstbegin).text()+")";
11                 }else if(firstbegin.indexOf("end-circle")>-1){
12                     laststr=laststr+"end("+$("#"+firstbegin).text()+")";
13                 }
14                 for(var y=0;y<lineobjjson.lineobj.length;y++){
15                     if(firstbegin==lineobjjson.lineobj[y].startid){
16                         laststr=laststr+">";
17                         changebe(lineobjjson.lineobj[y].endid);
18                     }
19                 }
20             }
21         }
22     }

显示的主要字符串的样式为:"begin(开始)>tab(表单1)>dug(审批2)>tab(表单2)>dug(审批1)>dug(审批4)>tab(表单3)>dug(审批5)>dug(审批6)>tab(表单4)>dug(审批7)>dug(审批8)>dug(审批9)>end(结束1)";

从后端传入前端并显示在前台的代码如下:

  1 //定义每一行对象的宽度总和是多少
  2     var objsumwidth=0;
  3     //前一个对象的宽度和高度
  4     var beforewidth=0;
  5     var beforeheight=0;
  6     //*******************************将后台传过来的字符串转化为前台图形********************************//
  7     //假设后台传过来的字符串是开始,begin-circle>表单1,tableform>审批2,approval-circle>表单2,tableform>审批1,approval-circle>结束,end-circle
  8     var firststr="begin(开始)>tab(表单1)>dug(审批2)>tab(表单2)>dug(审批1)>dug(审批4)>tab(表单3)>dug(审批5)>dug(审批6)>tab(表单4)>dug(审批7)>dug(审批8)>dug(审批9)>end(结束1)";
  9     changefe(firststr);
 10     //转化成前端的方法
 11     function changefe(firststr){
 12         for(var a=0;a<firststr.split(">").length;a++){
 13             whichobj(firststr.split(">")[a].split("(")[0]);
 14             if(a%5==4){
 15                 var avgwidth=(parseFloat($("#right-area").width())-objsumwidth)/5.0;
 16                 //判断方向是从左往右还是从右往左的方向
 17                 if(a%10==4){//从左往右画对象
 18                     for(var b=a-4;b<=a;b++){
 19                         if(b==a-4){
 20                             shapeobjjson.shapeobj[b].offsettop = a*35;
 21                             shapeobjjson.shapeobj[b].offsetleft = avgwidth/2.0+$(".navbox").width();
 22                             shapeobjjson.shapeobj[b].leftcenterdot = avgwidth/2.0+$(".navbox").width()+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 23                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 24                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(a*35);
 25                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height));
 26                             beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+avgwidth/2.0+$(".navbox").width();
 27                             beforeheight=a*35;
 28                             console.log("beforewidth:"+beforewidth+";"+"beforeheight:"+beforeheight);
 29                         }else{
 30                             shapeobjjson.shapeobj[b].offsettop = a*35;
 31                             shapeobjjson.shapeobj[b].offsetleft = beforewidth+avgwidth;
 32                             shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth+avgwidth)+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 33                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 34                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(a*35);
 35                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height));
 36                             beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+beforewidth+avgwidth;
 37                             beforeheight=a*35;
 38                         }
 39                     }
 40                 }else if(a%10==9){//从右往左画对象
 41                     for(var b=a-4;b<=a;b++){
 42                         if(b==a-4){
 43                             shapeobjjson.shapeobj[b].offsettop = a*35;
 44                             shapeobjjson.shapeobj[b].offsetleft = $("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width();
 45                             shapeobjjson.shapeobj[b].leftcenterdot = ($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+";"+(parseFloat(a*35)+parseInt(shapeobjjson.shapeobj[b].height/2));
 46                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 47                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(a*35);
 48                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height));
 49                             beforewidth=$("#right-area").width()-avgwidth/2.0-parseFloat(shapeobjjson.shapeobj[b].width)+$(".navbox").width();
 50                             beforeheight=a*35;
 51                         }else{
 52                             shapeobjjson.shapeobj[b].offsettop = a*35;
 53                             shapeobjjson.shapeobj[b].offsetleft = beforewidth-avgwidth-shapeobjjson.shapeobj[b].width;
 54                             shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 55                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 56                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(a*35);
 57                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(a*35)+parseFloat(shapeobjjson.shapeobj[b].height));
 58                             beforewidth=beforewidth-avgwidth-parseFloat(shapeobjjson.shapeobj[b].width);
 59                             beforeheight=a*35;
 60                         }
 61                     }
 62                 }
 63                 //图形转到下一行的时候,宽度重新赋值为0,高度值继续累加
 64                 beforewidth=0;
 65                 objsumwidth=0;
 66             }else if(a==firststr.split(">").length-1){
 67                 var avgwidth=(parseFloat($("#right-area").width())-objsumwidth)/parseFloat(firststr.split(">").length%5);
 68                 for(var b=a-parseFloat(firststr.split(">").length%5)+1;b<=a;b++){
 69                     console.log(b);
 70                     if((parseInt(b/5)+1)%2==1){//从左往右画对象
 71                         if(b==firststr.split(">").length-firststr.split(">").length%5){
 72                             shapeobjjson.shapeobj[b].offsettop = beforeheight+140;
 73                             shapeobjjson.shapeobj[b].offsetleft = avgwidth/2.0+$(".navbox").width();
 74                             shapeobjjson.shapeobj[b].leftcenterdot = avgwidth/2.0+$(".navbox").width()+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 75                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 76                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(beforeheight+140);
 77                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(avgwidth/2.0+$(".navbox").width())+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height));
 78                             beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+avgwidth/2.0+$(".navbox").width();
 79                             beforeheight=beforeheight+140;
 80                             console.log("beforewidth:"+beforewidth+";"+"beforeheight:"+beforeheight);
 81                         }else{
 82                             shapeobjjson.shapeobj[b].offsettop = beforeheight;
 83                             shapeobjjson.shapeobj[b].offsetleft = beforewidth+avgwidth;
 84                             shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth+avgwidth)+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 85                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 86                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+parseFloat(beforeheight);
 87                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth+avgwidth)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height));
 88                             beforewidth=parseFloat(shapeobjjson.shapeobj[b].width)+beforewidth+avgwidth;
 89                             // beforeheight=beforeheight+140; 
 90                         }
 91                     }else if((parseInt(b/5)+1)%2==0){//从右往左画对象
 92                         if(b==firststr.split(">").length-firststr.split(">").length%5){
 93                             shapeobjjson.shapeobj[b].offsettop = beforeheight+140;
 94                             shapeobjjson.shapeobj[b].offsetleft = $("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width;
 95                             shapeobjjson.shapeobj[b].leftcenterdot = ($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[a].height/2));
 96                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height/2));
 97                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(beforeheight+140);
 98                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat($("#right-area").width()-avgwidth/2.0-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight+140)+parseFloat(shapeobjjson.shapeobj[b].height));
 99                             beforewidth=$("#right-area").width()-avgwidth/2.0-parseFloat(shapeobjjson.shapeobj[b].width);
100                             beforeheight=beforeheight+140;
101                         }else{
102                             shapeobjjson.shapeobj[b].offsettop = beforeheight;
103                             shapeobjjson.shapeobj[b].offsetleft = beforewidth-avgwidth-shapeobjjson.shapeobj[b].width;
104                             shapeobjjson.shapeobj[b].leftcenterdot = (beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2));
105                             shapeobjjson.shapeobj[b].rightcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height/2));
106                             shapeobjjson.shapeobj[b].topcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(beforeheight);
107                             shapeobjjson.shapeobj[b].bottomcenterdot = (parseFloat(beforewidth-avgwidth-shapeobjjson.shapeobj[b].width)+parseFloat(shapeobjjson.shapeobj[b].width/2))+";"+(parseFloat(beforeheight)+parseFloat(shapeobjjson.shapeobj[b].height));
108                             beforewidth=beforewidth-avgwidth-parseFloat(shapeobjjson.shapeobj[b].width);
109                             // beforeheight=beforeheight+140;
110                         }
111                     }
112                 }
113             }
114         }
115         beforewidth=0;
116         objsumwidth=0;
117         beforeheight=0;
118         console.log("shapeobjjson:"+JSON.stringify(shapeobjjson));
119         //加载到页面上
120         for(var c=0;c<shapeobjjson.shapeobj.length;c++){
121             $(".right-area").html($(".right-area").html()+‘<div class="‘+shapeobjjson.shapeobj[c].id.replace(/\d*/g,"")+‘" id="‘+shapeobjjson.shapeobj[c].id+‘" onclick="_click(\‘‘+shapeobjjson.shapeobj[c].id+‘\‘)" ondblclick="_dblclick(\‘‘+shapeobjjson.shapeobj[c].id+‘\‘)">‘
122                         +‘<div class="point" id="leftpoint"></div>‘
123                         +‘<div class="point" id="rightpoint"></div>‘
124                         +‘<div class="point" id="toppoint"></div>‘
125                         +‘<div class="point" id="bottompoint"></div>‘
126                         +‘<div id="showhidden"><div id="circle-center" style="display:none"></div></div>‘
127                         +‘<div id="‘+shapeobjjson.shapeobj[c].id+‘val" onselectstart="return false">‘+firststr.split(">")[c].split("(")[1].split(")")[0]+‘</div></div>‘);
128             $("#"+shapeobjjson.shapeobj[c].id).css("position","fixed");
129             $("#"+shapeobjjson.shapeobj[c].id).css("top",shapeobjjson.shapeobj[c].offsettop+"px");
130             $("#"+shapeobjjson.shapeobj[c].id).css("left",shapeobjjson.shapeobj[c].offsetleft+"px");
131             $("#"+shapeobjjson.shapeobj[c].id+" #showhidden").css("position","fixed");
132             $("#"+shapeobjjson.shapeobj[c].id+" #showhidden").css("top",parseInt(shapeobjjson.shapeobj[c].offsettop)+parseInt(shapeobjjson.shapeobj[c].height/2)-4+"px");
133             $("#"+shapeobjjson.shapeobj[c].id+" #showhidden").css("left",parseInt(shapeobjjson.shapeobj[c].offsetleft)+parseInt(shapeobjjson.shapeobj[c].width/2)-4+"px");
134             $("#"+shapeobjjson.shapeobj[c].id+" #showhidden #circle-center").css("position","fixed");
135             $("#"+shapeobjjson.shapeobj[c].id+" #showhidden #circle-center").css("top",parseInt(shapeobjjson.shapeobj[c].offsettop)+parseInt(shapeobjjson.shapeobj[c].height/2)-4+"px");
136             $("#"+shapeobjjson.shapeobj[c].id+" #showhidden #circle-center").css("left",parseInt(shapeobjjson.shapeobj[c].offsetleft)+parseInt(shapeobjjson.shapeobj[c].width/2)-4+"px");
137             //左方块
138             $("#"+shapeobjjson.shapeobj[c].id+" #leftpoint").css("position","fixed");
139             $("#"+shapeobjjson.shapeobj[c].id+" #leftpoint").css("top",(shapeobjjson.shapeobj[c].leftcenterdot.split(";")[1]-2)+"px");
140             $("#"+shapeobjjson.shapeobj[c].id+" #leftpoint").css("left",(shapeobjjson.shapeobj[c].leftcenterdot.split(";")[0]-2)+"px");
141             //右方块
142             $("#"+shapeobjjson.shapeobj[c].id+" #rightpoint").css("position","fixed");
143             $("#"+shapeobjjson.shapeobj[c].id+" #rightpoint").css("top",(shapeobjjson.shapeobj[c].rightcenterdot.split(";")[1]-2)+"px");
144             $("#"+shapeobjjson.shapeobj[c].id+" #rightpoint").css("left",(shapeobjjson.shapeobj[c].rightcenterdot.split(";")[0]-2)+"px");
145             //上方块
146             $("#"+shapeobjjson.shapeobj[c].id+" #toppoint").css("position","fixed");
147             $("#"+shapeobjjson.shapeobj[c].id+" #toppoint").css("top",(shapeobjjson.shapeobj[c].topcenterdot.split(";")[1]-2)+"px");
148             $("#"+shapeobjjson.shapeobj[c].id+" #toppoint").css("left",(shapeobjjson.shapeobj[c].topcenterdot.split(";")[0]-2)+"px");
149             //下方快
150             $("#"+shapeobjjson.shapeobj[c].id+" #bottompoint").css("position","fixed");
151             $("#"+shapeobjjson.shapeobj[c].id+" #bottompoint").css("top",(shapeobjjson.shapeobj[c].bottomcenterdot.split(";")[1]-2)+"px");
152             $("#"+shapeobjjson.shapeobj[c].id+" #bottompoint").css("left",(shapeobjjson.shapeobj[c].bottomcenterdot.split(";")[0]-2)+"px");
153         }
154         //更新坐标
155         var startdot=new Array(4);
156         var enddot=new Array(4);
157         for(var q=1;q<shapeobjjson.shapeobj.length;q++){
158             //获取线起始点的左中点,右中点,上中点和下中点的坐标
159             startdot[0]=shapeobjjson.shapeobj[q-1].leftcenterdot;
160             startdot[1]=shapeobjjson.shapeobj[q-1].rightcenterdot;
161             startdot[2]=shapeobjjson.shapeobj[q-1].topcenterdot;
162             startdot[3]=shapeobjjson.shapeobj[q-1].bottomcenterdot;
163                 
164             //获取线終点的左中点,右中点,上中点和下中点的坐标
165             enddot[0]=shapeobjjson.shapeobj[q].leftcenterdot;
166             enddot[1]=shapeobjjson.shapeobj[q].rightcenterdot;
167             enddot[2]=shapeobjjson.shapeobj[q].topcenterdot;
168             enddot[3]=shapeobjjson.shapeobj[q].bottomcenterdot;
169             //连接起始点和终点连线最短的线
170             var minline=Math.sqrt(Math.pow((startdot[0].split(";")[0]-enddot[0].split(";")[0]),2)+Math.pow((startdot[0].split(";")[1]-enddot[0].split(";")[1]),2));
171             //start和end的值0,1,2,3代表是该对象左中点,右中点,上中点还是下中点
172             var start=0;
173             var end=0;
174             //获取线最短的两个点的位置
175             for(var x=0;x<startdot.length;x++){
176                 for(var y=0;y<enddot.length;y++){
177                     if((minline-Math.sqrt(Math.pow((startdot[x].split(";")[0]-enddot[y].split(";")[0]),2)+Math.pow((startdot[x].split(";")[1]-enddot[y].split(";")[1]),2)))>0){
178                         minline=Math.sqrt(Math.pow((startdot[x].split(";")[0]-enddot[y].split(";")[0]),2)+Math.pow((startdot[x].split(";")[1]-enddot[y].split(";")[1]),2));    
179                         start=x;
180                         end=y;
181                     }
182                 }
183             }
184             lineobjjson.lineobj.push({
185                 lineid: "flow"+chartj,
186                 startid: shapeobjjson.shapeobj[q-1].id,
187                 endid: shapeobjjson.shapeobj[q].id,
188                 startpos:start,
189                 endpos:end,
190                 startcsys:startdot[start],
191                 endcsys:enddot[end],
192             });
193             $(".right-area").html($(".right-area").html()+‘<canvas id="flow‘+chartj+‘" onclick="_click(\‘flow‘+chartj+‘\‘)"></canvas>‘);
194             chartj++;
195         }
196         for(var p=0;p<lineobjjson.lineobj.length;p++){
197             drawarrow(lineobjjson.lineobj[p].lineid,0,0,lineobjjson.lineobj[p].startcsys.split(";")[0],lineobjjson.lineobj[p].startcsys.split(";")[1],lineobjjson.lineobj[p].endcsys.split(";")[0],lineobjjson.lineobj[p].endcsys.split(";")[1]);
198         }
199         showcenterobj(‘begin-circle‘);
200         moveshape(‘begin-circle‘);
201         for(var x=1;x<=charti;x++){
202             moveshape(‘tableform‘+x);
203             showcenterobj(‘tableform‘+x);
204         }
205         for(var x=1;x<=chartm;x++){
206             moveshape(‘approval-circle‘+x);
207             showcenterobj(‘approval-circle‘+x);
208         }
209         for(var x=1;x<=chartn;x++){
210             moveshape(‘end-circle‘+x);
211             showcenterobj(‘end-circle‘+x);
212         }
213     }
214     function addjsonobj(id,width,height){
215         shapeobjjson.shapeobj.push({
216             id : id,
217             width : width,
218             height : height,
219             offsettop : "",
220             offsetleft : "",
221             leftcenterdot : "",
222             rightcenterdot : "",
223             topcenterdot : "",
224             bottomcenterdot : "",
225         });
226         objsumwidth=objsumwidth+parseInt(width);
227     }
228     function whichobj(idconstr){
229         if(idconstr=="begin"){
230             addjsonobj("begin-circle","132","67");
231         }else if(idconstr=="tab"){
232             addjsonobj("tableform"+charti,"132","67");
233             charti++;
234         }else if(idconstr=="dug"){
235             addjsonobj("approval-circle"+chartm,"102","102");
236             chartm++;
237         }else if(idconstr=="end"){
238             addjsonobj("end-circle"+chartn,"132","67");
239             chartn++;
240         }
241     }

具体位置是由对象的个数决定的,距离顶部的位置暂时设为定值。

本文需要先阅读JS流程设计器(一),以便于读懂JS流程设计器(二)的代码。如有任何建议,还望提出。

JS流程设计器(二)