?? dographelement.js
字號:
// this file contains the basic method for graph-element eg.NodeCreate NodeRedraw and so on.
/*
* @author: shennan , amushen@yahoo.com.cn
*/
function calcArrowPoint(sPoint,dPoint){
//determine the arrowPoints regarded by the source and the destination point
var ret=new Array(2);
var p1=new Position();
var p2=new Position();
var d=Math.sqrt((dPoint.top-sPoint.top)*(dPoint.top-sPoint.top)+(dPoint.left-sPoint.left)*(dPoint.left-sPoint.left));
p1.left = dPoint.left + 10 * ((sPoint.left - dPoint.left) + (sPoint.top - dPoint.top) / 2) / d;
p1.top = dPoint.top + 10 * ((sPoint.top - dPoint.top) - (sPoint.left - dPoint.left) / 2) / d;
p2.left = dPoint.left + 10 * ((sPoint.left - dPoint.left) - (sPoint.top - dPoint.top) / 2) / d;
p2.top = dPoint.top + 10 * ((sPoint.top - dPoint.top) + (sPoint.left - dPoint.left) / 2) / d;
ret[0]=p1;ret[1]=p2;
return ret;
}
function getLineSDPoint(line){
// according the sourceNode and DetinationNode to determine the line's sPoint midPoint and dPoint
if(line.source==null||line.destination==null)return;
if(nodes.length<2)return; //if there is not at least two node , then return
var sDom=$("node"+line.source);
var dDom=$("node"+line.destination);
var p1,p2,p3,p4;
var d1,d2,d3,d4;
p1=new Position(sDom.style.posTop,sDom.style.posLeft); //top-left
p2=new Position(p1.top,p1.left+sDom.offsetWidth); //top-right;
p3=new Position(p1.top+sDom.offsetHeight,p1.left); //bottem-left;
p4=new Position(p1.top+sDom.offsetHeight,p1.left+sDom.offsetWidth); //bottom-right
d1=new Position(dDom.style.posTop,dDom.style.posLeft); //top-left
d2=new Position(d1.top,d1.left+dDom.offsetWidth); //top-right;
d3=new Position(d1.top+dDom.offsetHeight,d1.left); //bottem-left;
d4=new Position(d1.top+dDom.offsetHeight,d1.left+dDom.offsetWidth);
if((p1.top+sDom.offsetHeight)<d1.top){
//source is above the destination
line.sPoint=new Position(p3.top,(p3.left+p4.left)/2);
line.dPoint=new Position(d1.top,(d1.left+d2.left)/2);
line.midPoint=new Position((p3.top+d1.top)/2,(line.sPoint.left+line.dPoint.left)/2);
}else if((d1.top+dDom.offsetHeight)<p1.top){
//destination is above the source
line.sPoint=new Position(p1.top,(p1.left+p2.left)/2);
line.dPoint=new Position(d3.top,(d3.left+d4.left)/2);
line.midPoint=new Position((d3.top+p1.top)/2,(line.sPoint.left+line.dPoint.left)/2);
}else if(p1.left<d1.left){
//source is at the left of the destination
line.sPoint=new Position((p2.top+p4.top)/2,p2.left);
line.dPoint=new Position((d1.top+d3.top)/2,d1.left);
line.midPoint=new Position((line.sPoint.top+line.dPoint.top)/2,(line.sPoint.left+line.dPoint.left)/2);
}else{
//source is at the right of the destination
line.sPoint=new Position((p1.top+p3.top)/2,p1.left);
line.dPoint=new Position((d2.top+d4.top)/2,d2.left);
line.midPoint=new Position((line.sPoint.top+line.dPoint.top)/2,(line.sPoint.left+line.dPoint.left)/2);
}
return line;
}
function calcInOutLine(index){
//calculate the inlines and outlines of a node which index is parameter : index
var i,inline=new Array(),outline=new Array();
for(i=0;i<lines.length;i++){
if(lines[i]==null)continue;
if(lines[i].source==index) outline[outline.length]=i;
if(lines[i].destination==index) inline[inline.length]=i;
}
nodes[index].inLine=inline;
nodes[index].outLine=outline;
}
function _judgeNodeAndMidPos(nodeId,lineId,/* flag==1?source:destination*/flag){
//判斷節點和線中間塊的位置關系
//返回：1 左；2上；3右；4下
var node=$("node"+nodeId);
var mid=$("mid"+lineId);
var p1,p2,p3,p4,d1,d2,d3,d4;
p1=new Position(node.style.posTop,node.style.posLeft); //top-left
p2=new Position(p1.top,p1.left+node.offsetWidth); //top-right;
p3=new Position(p1.top+node.offsetHeight,p1.left); //bottem-left;
p4=new Position(p1.top+node.offsetHeight,p1.left+node.offsetWidth); //bottom-right
d1=new Position(mid.style.posTop,mid.style.posLeft); //top-left
d2=new Position(d1.top,d1.left+mid.offsetWidth); //top-right;
d3=new Position(d1.top+mid.offsetHeight,d1.left); //bottem-left;
d4=new Position(d1.top+mid.offsetHeight,d1.left+mid.offsetWidth);
var pp=flag==1?lines[lineId].sPoint:lines[lineId].dPoint; //the target which is to be changed
if((p1.top+node.offsetHeight)<d1.top){
pp.top=p3.top;
pp.left=(p3.left+p4.left)/2;
return 2;
}else if((d1.top+mid.offsetHeight)<p1.top){
pp.top=p1.top;
pp.left=(p1.left+p2.left)/2;
return 4;
}else if(p1.left<d1.left){
pp.left=p2.left;
pp.top=(p2.top+p4.top)/2;
return 1;
}else{
pp.left=p1.left;
pp.top=(p1.top+p3.top)/2;
return 3;
}
}
function moveRelevantLines(index){
// redraw the lines that is connected on the nodes[index]
var atop=nodes[index].position.top-event.top; //the - between the new top and old top
var aleft=nodes[index].position.left-event.left;
var i;
for(i=0;nodes[index].inLine!=null&&i<nodes[index].inLine.length;i++){
lines[nodes[index].inLine[i]].dPoint.top-=atop;
lines[nodes[index].inLine[i]].dPoint.left-=aleft;
//judge the posiiton with the midPoint
_judgeNodeAndMidPos(index,nodes[index].inLine[i],2);
reDrawLine(nodes[index].inLine[i]);
}
for(i=0;nodes[index].outLine!=null&&i<nodes[index].outLine.length;i++){
lines[nodes[index].outLine[i]].sPoint.top-=atop;
lines[nodes[index].outLine[i]].sPoint.left-=aleft;
//judge the posiiton with the midPoint
_judgeNodeAndMidPos(index,nodes[index].outLine[i],1);
reDrawLine(nodes[index].outLine[i]);
}
//update new position
nodes[index].position.top=event.top;
nodes[index].position.left=event.left;
}
function reDrawLine(index){
// for some reasons , the line's position is changed,so we must redraw the line
//showHip('redrawline'+index);
var pp=calcArrowPoint(lines[index].midPoint,lines[index].dPoint);
var line=lines[index];
//var cmd="line"+index+".points.value='"+lines[index].sPoint.left+","+lines[index].sPoint.top+","+lines[index].midPoint.left+","+lines[index].midPoint.top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[0].left+","+pp[0].top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[1].left+","+pp[1].top+"'";
var old=$("line"+line.index);
old.points.value="'"+lines[index].sPoint.left+","+lines[index].sPoint.top+","+lines[index].midPoint.left+","+lines[index].midPoint.top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[0].left+","+pp[0].top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[1].left+","+pp[1].top+"'";
// var html="<v:polyline id='line"+line.index+"' style='position:absolute;top:0px;left:0px;Z-INDEX:1;' points='"+line.sPoint.left+","+line.sPoint.top+","+line.midPoint.left+","+line.midPoint.top+","+line.dPoint.left+","+line.dPoint.top+","+pp[0].left+","+pp[0].top+","+line.dPoint.left+","+line.dPoint.top+","+pp[1].left+","+pp[1].top+"' filled='f' />";
// var newLine=document.createElement(html);
// newLine.id="line"+index;
// newLine.style.position="absolute";
// newLine.style.top=0;
// newLine.style.left=0;
// newLine.points.value="'"+lines[index].sPoint.left+","+lines[index].sPoint.top+","+lines[index].midPoint.left+","+lines[index].midPoint.top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[0].left+","+pp[0].top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[1].left+","+pp[1].top+"'";
// newLine.filled="f";
// container.removeChild(old);
// container.appendChild(newLine);
}
function reDrawLineMid(index){
//move the midPoint so we must redraw line
var left,top;
top=event.top+3;
left=event.left+3;
lines[index].midPoint.left=left;
lines[index].midPoint.top=top;
//judge the position with the sPoint and dPoint
_judgeNodeAndMidPos(lines[index].source,index,1);
_judgeNodeAndMidPos(lines[index].destination,index,2);
var line=lines[index];
var pp=calcArrowPoint(lines[index].midPoint,lines[index].dPoint);
var old=$("line"+line.index);
old.points.value="'"+lines[index].sPoint.left+","+lines[index].sPoint.top+","+lines[index].midPoint.left+","+lines[index].midPoint.top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[0].left+","+pp[0].top+","+lines[index].dPoint.left+","+lines[index].dPoint.top+","+pp[1].left+","+pp[1].top+"'";
cmd="lineText"+index+".style.top='"+(lines[index].midPoint.top-6)+"px';";
eval(cmd);
cmd="lineText"+index+".style.left='"+(lines[index].midPoint.left+10)+"px';";
eval(cmd);
}
////////////////crete the HtmlObject
function _getNodeClass(type){
//select the different style accroding to the type
var rst="node";
switch(type){
case 1:
rst="beginNode";
break;
case 2:
rst="generalNode";
break;
case 3:
rst="forkNode";
break;
case 4:
rst="joinNode";
break;
case 99:
rst="endNode";
break;
}
return rst;
}
function createNode(node){
var html="";
var clazz=_getNodeClass(node.type);
html="<div id='node"+node.index+"' onBeginDrag='calcInOutLine("+node.index+");' onSelected='selectThisNode("+node.index+");' onDraging='moveRelevantLines("+node.index+")' class='"+clazz+"' style='top:"+node.position.top+";left:"+node.position.left+";z-index:"+(currentIndex++)+"'><table border=0 width=100% height=100%><tr><td align=center valign=middle style='font-size:12px'>"+node.name+"</td></tr></table></div>";
var nc=document.createElement("div");
nc.id="nc"+node.index;
document.body.appendChild(nc);
nc.innerHTML+=html;
}
function canDragOfNode(index){
if(index!=null){
eval("$('node"+index+"').style.behavior='url(../htc/sndrag.htc)';");
return;
}
var i;
for(i=0;i<nodes.length;i++)
eval("$('node"+i+"').style.behavior='url(../htc/sndrag.htc)';");
}
function canDragOfLine(index){
if(index!=null){
eval("$('mid"+index+"').style.behavior='url(../htc/sndrag.htc)';");
return;
}
var i;
for(i=0;i<nodes.length;i++)
eval("$('mid"+i+"').style.behavior='url(../htc/sndrag.htc)';");
}
function createLine(line){
//alert(line.name);
var html;
var pp=calcArrowPoint(line.midPoint,line.dPoint);
html="<v:polyline id='line"+line.index+"' style='position:absolute;top:0px;left:0px;Z-INDEX:"+(currentIndex)+";' points='"+line.sPoint.left+","+line.sPoint.top+","+line.midPoint.left+","+line.midPoint.top+","+line.dPoint.left+","+line.dPoint.top+","+pp[0].left+","+pp[0].top+","+line.dPoint.left+","+line.dPoint.top+","+pp[1].left+","+pp[1].top+"' filled='f' />";
html+="<img id='mid"+line.index+"' onselected='selectThisLine("+line.index+")' onDraging='reDrawLineMid("+line.index+")' class='mid' style='Z-INDEX:"+(currentIndex)+";top:"+(line.midPoint.top-3)+";left:"+(line.midPoint.left-3)+"' />";
html+="<div id='lineText"+line.index+"' style='top:"+(line.midPoint.top-6)+";left:"+(line.midPoint.left+10)+";z-index:"+(currentIndex++)+"' class='linetext' >"+line.name+"</div>";
var lc=document.createElement("div");
lc.id="lc"+line.index;
document.body.appendChild(lc);
lc.innerHTML+=html;
}
function setNodeName(index){
if(nodes[index]==null)return;
$('node'+index).children[0].rows[0].cells[0].innerHTML=nodes[index].name;
}
function setLineName(index){
if(lines[index]==null)return;
$('lineText'+index).innerHTML=lines[index].name;
}?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -