dooperation.js

Web版的WorkFlow流程设计器.采用Javascript编写,不需要服务器端,直接在客户端运行.

// some methods of designing the graph
/*
 * @author: shennan , [e-mail]
 */
////////////////////////////////////the panel function
function setPanelPosition(){
	$('panel1').style.left=event.left;
	$('panel1').style.top=event.top;
}
function setPanelScroll(){
	$('panel1').style.top=parseInt(document.body.scrollTop);
	$('panel1').style.left=parseInt(document.body.scrollLeft);
	$('panelDraghandle').style.top=parseInt(document.body.scrollTop);
	$('panelDraghandle').style.left=parseInt(document.body.scrollLeft);
	//set the position of propertiesPane
	initPropPos();
	
}
function hideOrShowPane(){
	var v=$('panel1').style.visibility;
	if(v=="visible")v="hidden";
	else v="visible";
	$('panel1').style.visibility=v;
}

/////////////////////////////////
function beginCreateNode(type){
	selectState=type;
	showHip("请点击画图区域以确定任务位置");	
	event.cancelBubble=true;	
	document.body.attachEvent("onclick",readyForCreateNode);
}
function beginCreateLine(){
	selectState=100;
	showHip("请选择源任务节点");
	event.cancelBubble=true;
}

function readyForCreateNode(){
	if(selectState<1||selectState>99)return;	
	var top=event.y+document.body.scrollTop;
	var left=event.x+document.body.scrollLeft;
	var node=new Node();
	node.index=nodes.length;
	node.name="未命名任务"+node.index;
	node.position=new Position(top,left);
	node.type=selectState;
	nodes[node.index]=node;
	createNode(node);	
	canDragOfNode(node.index);
	selectState=0;	
	showHip("创建任务完成");
	document.body.detachEvent("onclick",readyForCreateNode);
}

function readyForCreateLine(){
	if(selectedOne==selectedTwo){
		showHip("请选择不同的任务");
		return;
	}
	var line=new Line();
	line.source=selectedTwo;
	line.destination=selectedOne;	
	line.index=lines.length;
	line.name="";
	line=getLineSDPoint(line);
	lines[line.index]=line;
	createLine(line);
	canDragOfLine(line.index);
	showHip("创建连线完成");
}

function _deleteLine(index){
	//delete a Line
	if(lines[index]==null)return;
	lines[index]=null;
	var lc=$('lc'+index);	
	try{
		lc.innerHTML="";
		document.body.removeChild(lc);	
	}catch(e){}
}
function _deleteNode(index){
	//delete a node;
	//first delete relavent line
		if(nodes[index]==null)return;
		calcInOutLine(index);
		var rlines=nodes[index].inLine;
		for(var i=0;rlines!=null&&i<rlines.length;i++){
			_deleteLine(rlines[i]);
		}
		rlines=nodes[index].outLine;
		for(var i=0;rlines!=null&&i<rlines.length;i++){
			_deleteLine(rlines[i]);
		}
		//second delete node
		nodes[index]=null;
		var nc=$('nc'+index);
		nc.innerHTML="";
		try{
			document.body.removeChild(nc);
		}catch(e){}
}

function _deleteGraphElement(){
	if(selectedLine!=null){
		_deleteLine(selectedLine);
		selectedLine=null;
	}else if(selectedOne!=null){		
		_deleteNode(selectedOne);
		selectedOne=null;
		selectedTwo=null;
	}else if(selectedArray!=null&&selectedArray.length>0){
		for(var i=0;i<selectedArray.length;i++)
			if(selectedArray[i].type==1)
				_deleteNode(selectedArray[i].index);
			else if(selectedArray[i].type==2)
				_deleteLine(selectedArray[i].index);
		
	}
}

function deleteGraphElement(){
	if(!confirm("确定要删除么?"))return;
	_deleteGraphElement();
}

////区域选择功能
function beginSelectRange(){
	//开始选择一个区域
	_detachEventWhenRange();
	document.body.attachEvent("onmousedown",beginRange);
	document.body.attachEvent("onmouseup",endRange);
	document.body.attachEvent("onmousemove",createRange);
	beginPosition=null;	
	_lockAll();
	//showHip("请选择区域");
	$('rangeBt').style.border="solid 2px red";
	$('arrowbt').style.border="solid 1px black";
	document.body.style.cursor="url(../image/icon_arrow1.gif)";
}

function _detachEventWhenRange(){
	try{
		document.body.detachEvent("onmousedown",beginRange);
		document.body.detachEvent("onmouseup",endRange);
		document.body.detachEvent("onmousemove",createRange);
	}catch(e){}
	
}

function beginRange(){
	_clearSelected();
	beginPosition=new Position(event.y+document.body.scrollTop,event.x+document.body.scrollLeft);
	var img=document.createElement("img");
	img.id="range1";
	img.src="../image/blank.gif";
	img.style.position="absolute";
	img.style.top=beginPosition.top;
	img.style.left=beginPosition.left;
	img.style.width="0px";
	img.style.height="0px";
	img.style.zIndex="9999";
	img.style.border="solid 1px #000000";
	img.style.backgroundColor="#9999ff";
	img.style.filter="Alpha(Opacity=50)";
	document.body.appendChild(img);
}
function endRange(){
	_detachEventWhenRange();
	try{
		document.body.removeChild($('range1'));
	}catch(e){}
	beginPosition=null;
	// set the selectedObject into Array
	selectedArray=new Array();
	var i,obj;
	for(i=0;i<nodes.length;i++)
		if(nodes[i]!=null){
			if($('node'+i).style.borderColor=="red"){
				obj=new Object();
				obj.type=1;
				obj.index=i;
				selectedArray[selectedArray.length]=obj;
				calcInOutLine(i);
				//showHip("1+"+i);
			}
		}
	for(i=0;i<lines.length;i++)
		if(lines[i]!=null){
			if($('mid'+i).style.borderColor=="red"){
				obj=new Object();
				obj.type=2;
				obj.index=i;
				selectedArray[selectedArray.length]=obj;
				//showHip("2+"+i);
			}	
		}
	//showHip(selectedArray.length);
	beginSelectRange();
}

function showRangeBt(){
	//hiden the button of arrow ,and display rangeBt
	$('arrowBt').style.border="solid 2px red";
	$('rangeBt').style.border="solid 1px black";
	document.body.style.cursor="auto";
	
}

function _judgeObjInRange(objPos,rangePos,rangeWidth,rangeHeight){
	if(objPos.top>=rangePos.top&&objPos.top<=rangePos.top+rangeHeight&&
	   objPos.left>=rangePos.left&&objPos.left<=rangePos.left+rangeWidth)
		return true;
	return false;	
}

function _clearSelected(){
//clear all the selected object
	selectedLine=null;
	selectedOne=null;
	selectedTwo=null;
	for(var i=0;i<nodes.length;i++)
		if(nodes[i]!=null){
			$('node'+i).style.border="solid 1px black";	
		}
	for(var i=0;i<lines.length;i++)
		if(lines[i]!=null){
			$('mid'+i).style.border="solid 1px black";	
		}
}

function _clearSelectedArray(){
	selectedArray=null;	
	for(var i=0;i<nodes.length;i++)
		if(nodes[i]!=null){
			$('node'+i).style.border="solid 1px black";	
		}
	for(var i=0;i<lines.length;i++)
		if(lines[i]!=null){
			$('mid'+i).style.border="solid 1px black";	
		}
}

function createRange(){
	if(beginPosition==null)return;
	// change the range at time
	var pos=new Position(event.y+document.body.scrollTop,event.x+document.body.scrollLeft);
	var _w=Math.abs(beginPosition.left-pos.left);
	var _h=Math.abs(beginPosition.top-pos.top);
	var rng=$('range1');
	var _t,_l;
	if(beginPosition.top>pos.top)_t=pos.top;
	else _t=beginPosition.top;
	if(beginPosition.left>pos.left)_l=pos.left;
	else _l=beginPosition.left;
	rng.style.top=_t+"px";
	rng.style.left=_l+"px";
	rng.style.width=_w+"px";
	rng.style.height=_h+"px";
	var rangePos=new Position(_t,_l);
	//select the objects when which are in the range	
	//TODO  优化下面的代码
	var i;
	for(i=0;i<nodes.length;i++)
		if(nodes[i]!=null){
			if(_judgeObjInRange(nodes[i].position,rangePos,_w,_h))//在区域内									
				$('node'+i).style.border="solid 2px red";
			else
				$('node'+i).style.border="solid 1px black";			
		}
	for(i=0;i<lines.length;i++)
		if(lines[i]!=null){
			if(_judgeObjInRange(lines[i].midPoint,rangePos,_w,_h))	
				$('mid'+i).style.border="solid 2px red";				
			else
				$('mid'+i).style.border="solid 1px black";
		}	
}
////////////////////////////////general operation,not be triged bt the buttons 
function _lockAll(){
	var i;
	for(i=0;i<nodes.length;i++)
		if(nodes[i]!=null)
			$('node'+i).locked();
	for(i=0;i<lines.length;i++)
		if(lines[i]!=null)
			$('mid'+i).locked();	
}

function _unlockAll(){
	var i;
	for(i=0;i<nodes.length;i++)
		if(nodes[i]!=null)
			$('node'+i).unlocked();
	for(i=0;i<lines.length;i++)
		if(lines[i]!=null)
			$('mid'+i).unlocked();	
}

function selectThisNode(index){
	event.cancelBubble=true
	_clearSelectedArray();
	
	if(selectedOne!=null){
		$('node'+selectedOne).style.border="solid 1px black";
	}
	if(selectedLine!=null){
		$('mid'+selectedLine).style.border="solid 1px black";
		selectedLine=null;		
	}
	selectedTwo=selectedOne;
	selectedOne=index;
	if(selectedOne!=null){
		$('node'+selectedOne).style.border="solid 2px red";
	}
	
	if(selectState==0){
		showPropertiesPane();		
		return;
	}
	if(selectState==100){
		selectState=101;
		showHip("请选择目标任务");
		return;
	}
	if(selectState==101){		
		selectState=0;
		readyForCreateLine();
		return;
	}	
}
function selectThisLine(index){
	event.cancelBubble=true;	
	_clearSelectedArray();
	if(selectState!=0)return;
	if(selectedOne!=null){
		$('node'+selectedOne).style.border="solid 1px black";
	}
	if(selectedLine!=null){
		$('mid'+selectedLine).style.border="solid 1px black";
		selectedLine=null;		
	}
	selectedOne=null;
	selectedTwo=null;
	selectedLine=index;
	if(selectedLine!=null){
		$('mid'+selectedLine).style.border="solid 2px red";
	}
	
	showPropertiesPane();
}
//////////////////////属性设置

function showPropertiesPane(){
	if(flag_hideAll)return;
	initPropPos();
	if($('props').src!="setProperties.htm")
		$('props').src="setProperties.htm";
	$('props').style.visibility="visible";	

	if(selectedOne!=null){
		var obj=new Object();
		obj.index=selectedOne;
		obj.name=nodes[selectedOne].name;
		obj.comment=nodes[selectedOne].comment;
		obj.info=nodes[selectedOne].info;
		window["props"].show(obj);
	}
	if(selectedLine!=null){
		var obj=new Object();
		obj.index=selectedLine;
		obj.name=lines[selectedLine].name;
		obj.comment=lines[selectedLine].commnet;
		window["props"].show(obj);
	}
}
function hidePropertiesPane(){
	$('props').style.visibility="hidden";	
	if($('props').src!="setProperties.htm")
		$('props').src="setProperties.htm";
}

function setProperties(/*object*/ info){
	//由设置页面调用，传入设置的内容
	if(selectedOne!=null){
		nodes[selectedOne].name=info.name;
		nodes[selectedOne].comment=info.comment;
		if(info.info!=null)nodes[selectedOne].info=info.info;
		setNodeName(selectedOne);
	}else if(selectedLine!=null){
		lines[selectedLine].name=info.name;
		lines[selectedLine].comment=info.comment;
		setLineName(selectedLine);
	}else{
		showHip("设置失败：未选择任务");	
	}
}

function clearAll(){
//删除所有的节点
	var i;
	selectedOne=null;
	selectedLine=null;
	selectedArray=new Array();
	for(i=0;i<nodes.length;i++)
		if(nodes[i]!=null){
			var obj=new Object();
			obj.type=1;
			obj.index=i;
			selectedArray[selectedArray.length]=obj;	
		}
	for(i=0;i<lines.length;i++)
		if(lines[i]!=null){
			var obj=new Object();
			obj.type=2;
			obj.index=i;
			selectedArray[selectedArray.length]=obj;	
		}
	_deleteGraphElement();	
}

function clearAllDom(){
//只删除所有的HTML对象，不删除nodes数组
	var i;
	selectedOne=null;
	selectedLine=null;
	selectedArray=new Array();
	for(i=0;i<nodes.length;i++)
		if(nodes[i]!=null){
			var nc=$('nc'+i);
			nc.innerHTML="";
			try{
				document.body.removeChild(nc);
			}catch(e){}
		}
	for(i=0;i<lines.length;i++)
		if(lines[i]!=null){
			var lc=$('lc'+i);	
			try{
				lc.innerHTML="";
				document.body.removeChild(lc);	
			}catch(e){}	
		}
}

/////////////////
function initPropPos(){
//初始化设置属性的窗口的位置
var pp=$('props');
pp.style.top=window.document.body.clientHeight+window.document.body.scrollTop-pp.offsetHeight-2;
pp.style.left=window.document.body.scrollLeft+1;
pp.style.border="solid 1px black";
}

function init(){
	loadJsFile("../objects/line.js","js_line");
	loadJsFile("../objects/node.js","js_node");
	loadJsFile("../objects/position.js","js_pos");
	loadJsFile("../acting/doGraphElement.js","js_dge");
	loadJsFile("../acting/saveOrLoad.js","js_sl");
	loadJsFile("../acting/dataTrans.js","js_trans");
	loadJsFile("../posing/treePos.js","js_tp");
	
	if(flag_hideAll){
		$('panelDraghandle').style.visibility="hidden";
		$('panel1').style.visibility="hidden";
	}
}

/////////////////////////////
function autoTreePos(){
	//自动布局
	clearAllDom();	
	initPosing();
	setNodeRelation();	
	treePosing();
	$('panel1').style.visibility="hidden";
//	_testShow();
}

function autoPoseNodes(){	
	if(nodeDatas==null)return;
	_initNodesFromExt(nodeDatas);
	initPosing();
	treePosing();
	//_testShow();
}