flow.js

一个用javascript实现的工作流定义工具

				ret[1] = fy2;
				ret[3] = ty1;
			}
			else
			{
				ret[1] = fy1;
				ret[3] = ty2;
			}

			return ret;
		}

		if ((fy1 < ty2) && (fy2 > ty1))
		{
			if (fy1 < ty1)
				ret[1] = (fy2 + ty1) / 2;
			else
				ret[1] = (ty2 + fy1) / 2;
			ret[3] = ret[1];

			if (fx1 < tx1)
			{
				ret[0] = fx2;
				ret[2] = tx1;
			}
			else
			{
				ret[0] = fx1;
				ret[2] = tx2;
			}

			return ret;
		}

		ret[0] = (fx1 + fx2) / 2;

		if (fx1 > tx1)
			ret[2] = tx2;
		else
			ret[2] = tx1;

		if (fy1 > ty1)
		{
			ret[1] = fy1;
			ret[3] = (ty1 + ty2) /2;
		}
		else
		{
			ret[1] = fy2;
			ret[3] = (ty1 + ty2) /2;
		}
		//alert(ret);
		return ret;
	}

	var DRECT = 0;

	this.drawArrow = function(direction, x2, y2, yoffset)
	{
		DRECT = direction;
		//alert(this.Arrow);
		if (this.Arrow == null)
		{
			return;
		}
		var as = this.Arrow.style;

		as.backgroundImage = 'url(steppics/a' + direction + '.gif)';
		//txtXY.value = 'w:' + as.width + ',h:' +  as.height;
		switch(direction)
		{
			case ARIGHT:
				as.left = x2 - ARROWSIZE;
				as.top = y2 - div(ARROWSIZE, 2) - yoffset;
				break;
			case ADOWN:
				as.left = x2 - div(ARROWSIZE, 2);
				as.top = y2 - ARROWSIZE;
				break;
			case ALEFT:
				as.left = x2;
				as.top = y2 - div(ARROWSIZE, 2) - yoffset;
				break;
			case AUP:
				as.left = x2 - div(ARROWSIZE, 2);
				as.top = y2;
				break;
		}		  
	}	

	this.setSelect = function(select)
	{
		if (select)
		{
			this.Arrow.style.backgroundImage = 'url(steppics/as' + DRECT + '.gif)';
			this.Obj.style.borderColor = 'red';
		}
		else
		{
			this.Arrow.style.backgroundImage = 'url(steppics/a' + DRECT + '.gif)';
			this.Obj.style.borderColor = 'blue';
		}
	}

					    
	this.drawLine = function(x1, y1, x2, y2)
	{
		if (this.Obj == null)
		{
			return;
		}
		var ls = this.Obj.style;
		eraseBorder(ls);
		// 一条横线
		var ADirect = '1';
		var left, top, width, height;

		var offset = y1 < y2 ? 1 : 0;

		if (y1 == y2)
		{
			left = x1;
			width = x2 - x1;
			ADirect = ARIGHT;

			if (x1 > x2)
			{
				left = x2;
				width = x1 - x2;
				ADirect = ALEFT;
			}
			ls.top = y1;
			ls.left = left;
			ls.width = width;

			drawTop(ls);
			
			this.drawArrow(ADirect, x2, y2, offset);

			return;
		}

		// 一条竖线
		if (x1 == x2)
		{
			
			top = y1;
			height = y2 - y1;
			ADirect = ADOWN;
			if (y1 > y2)
			{
				top = y2;
				height = y1 - y2;
				ADirect = AUP;
			}
			ls.left = x1;
			ls.top = top;
			ls.height = height;

			drawLeft(ls);
			this.drawArrow(ADirect, x2, y2, offset);

			return;
		}

		ls.left = x1 > x2 ? x2 : x1;
		ls.top = y1 > y2 ? y2 : y1;
		ls.width = x1 > x2 ? x1 - x2 : x2 - x1;
		ls.height = y1 > y2 ? y1 - y2 : y2 - y1;
		ADirect = x1 < x2 ? ARIGHT : ALEFT;
		this.drawArrow(ADirect, x2, y2, offset);
		
		if (x1 < x2)
			drawLeft(ls);
		else
			drawRight(ls);
		if (y1 < y2)
			drawBottom(ls);
		else
			drawTop(ls);
	}

	this.draw = function(canvas)
	{
		//if ((this.from == null) || (this.to == null))
		//{
		//	return;
		//}
		this.Obj = document.createElement('div');
		this.Obj.style.position = 'absolute';
		canvas.appendChild(this.Obj);

		this.Arrow = document.createElement('span');
		this.Arrow.style.position = 'absolute';
		this.Arrow.style.width = ARROWSIZE;
		this.Arrow.style.height = ARROWSIZE;
		this.Arrow.style.fontSize = 1;

		canvas.appendChild(this.Arrow);
	}

	this.adjust = function(x, y)
	{
		var xy = null; 
		if ((x != null) && (y != null))
		{
			xy = this.calcPoint(x, y);
			if (x < xy[0])
			{
				x = x + 10;
			}
			
			this.drawLine(xy[0], xy[1], x, y);
		}
		else
		{
			xy = this.calcFromTo();
			this.drawLine(xy[0], xy[1], xy[2], xy[3]);
		}
	}


	this.erase = function(canvas)
	{

		if (this.from != null)
		{
			//alert(0);
			this.from.removeAction(this);
		}

		if (this.to != null)
		{
			//alert(1);
			this.to.removeAction(this);
		}

		canvas.removeChild(this.Obj);
		canvas.removeChild(this.Arrow);
	}
}

// ************************************************************
// 流程
function Flow()
{
	this.drawingAction = null;

	this.drawer = null;
	this.setDrawer = function(dr)
	{
		this.drawer = dr;
	}

	this.objIndex = 1;
	this.getObjID = function(tag)
	{
		var ret = tag + this.objIndex;

		while ((this.existsAction(ret)) || (this.existsSetp(ret)))
		{
			this.objIndex ++;
			ret = tag + this.objIndex;
		}
		this.objIndex ++;

		return ret;
	}

	// 动作集合
	this.actions = null;
	this.indexOfAction = function(act)
	{
		var ret = -1;
		if (this.actions == null)
			return ret;

		for (var n = 0; n < this.actions.length; n ++)
		{
			if (this.actions[n].hitTest(act.Obj))
			{
				ret = n;
				break;
			}
		}

		return ret;
	}

	this.existsAction2 = function(from, to)
	{
		if (this.actions == null)
		{			
			return false;
		}
		else
		{
			var exists = false;
			for (var n = 0; n < this.actions.length; n ++)
			{
				if ((this.actions[n].from.getid().trim() == from.getid().trim()) && (this.actions[n].to.getid().trim() == to.getid().trim()))
				{
					exists = true;
					break;
				}
			}

			return exists;
		}
	}

	this.findAction = function(actid)
	{
		var ret = null;
		if (this.actions == null)
			return ret;

		for (var n = 0; n < this.actions.length; n ++)
		{
			if (this.actions[n].getid() == actid.trim())
			{
				ret = this.actions[n];
				break;
			}
		}

		return ret;
	}

	this.existsAction = function(actid)
	{
		return this.findAction(actid) != null;
	}

	this.addAction = function(act)
	{

		if (this.actions == null)
		{	
			this.actions = new Array();
			this.actions[0] = act;
		}
		else
		{
			this.actions[this.actions.length] = act;
		}
	}

	this.removeAction = function(act)
	{
		var idx = this.indexOfAction(act);
		if (idx != -1)
			this.rmvAction(idx);
	}

	this.rmvAction = function(idx)
	{
		if (this.actions == null)
			return;

		for (var n = idx; n < this.actions.length - 1; n ++)
		{
			this.actions[n] = this.actions[n + 1];
		}

		this.actions.length = this.actions.length - 1;
	}


	// -------------------  步骤集合    -------------------------------
 	this.steps = null;
	this.indexOf = function(stp)
	{
		var ret = -1;
		if (this.steps == null)
			return ret;

		for (var n = 0; n < this.steps.length; n ++)
		{
			if (this.steps[n].hitTest(stp.Obj))
			{
				ret = n;
				break;
			}
		}

		return ret;
	}

	this.existsSetp = function(stepid)
	{
		var exists = this.findStep(stepid) != null;

		return exists;
	}

	this.findStep = function(stepid)
	{
		var ret = null;

		if (this.steps == null)
			return ret;
		for (var n = 0; n < this.steps.length; n ++)
		{
			//alert(this.steps[n].stepid + '==' + stepid);
			//alert(this.steps[n].stepid == stepid);
			if (this.steps[n].getid().trim() == stepid.trim())
			{
				ret = this.steps[n];
				break;
			}
		}

		return ret;
	}

	this.addStep = function(stp)
	{

		if (this.steps == null)
		{	
			this.steps = new Array();
			this.steps[0] = stp;
		}
		else
		{
			this.steps[this.steps.length] = stp;
		}
	}

	this.removeStep = function(stp)
	{
		var idx = this.indexOf(stp);
		this.rmvStep(idx);
	}

	this.rmvStep = function(idx)
	{
		if (this.steps == null)
			return;

		for (var n = idx; n < this.steps.length - 1; n ++)
		{
			this.steps[n] = this.steps[n + 1];
		}

		this.steps.length = this.steps.length - 1;
	}

	this.selObj = null;
	this.selObjType = 0;     // 0 setp   1 action
	this.getSelect = function(force)
	{
		if (_Draging && this.selObj)
		{			
			return this.selObj;
		}

		var obj = window.event.srcElement;	
		//alert(obj.outerHTML);
		
		if (this.selObj != null)
			this.selObj.setSelect(false);

		var find = false;
		if (this.steps != null)
			for (var n = 0; n < this.steps.length; n ++)
			{
				if (this.steps[n].hitTest(obj))
				{
					this.selObjType = 0; 
					this.selObj = this.steps[n];		
					
					this.selObj.setSelect(true);
					find = true;

					break;
				}
			}
		if ((! find) && (this.actions != null))
		{
			for (var n = 0; n < this.actions.length; n ++)
			{
				if (this.actions[n].hitTest(obj))
				{
					this.selObjType = 1; 
					this.selObj = this.actions[n];		
					
					this.selObj.setSelect(true);
					find = true;
					break;
				}
			}
		}

		// 显示属性
		if (find)
			parent.showProperty(this.selObjType, this.selObj);
		else
		{
			parent.showFlowProp();
			this.selObj = null;
		}
		return this.selObj;
	}

	this.eraseLastAction = function()
	{
		this.deleteAction(this.drawingAction);
	}

	this.deleteAction = function(act)
	{
		if (act == null)
		{
			return ;
		}
		act.erase(this.drawer);
		this.removeAction(act);
		this.selObj = null;
	}

	this.deleteStep = function(stp)
	{
		stp.erase(this.drawer);
		//alert(stp.Actions.length);
		this.removeStep(stp);
		this.selObj = null;
	}

	this.deleteSel = function()
	{
		var sel = this.selObj;
		if (sel == null)
		{
			return;
		}
		if (this.selObjType == 0)
		{
			this.deleteStep(sel);
		}
		else
		{
			this.deleteAction(sel);
		}
	}

	this.clearAll = function()
	{
		if (this.actions != null)
		{
			for (var n = this.actions.length - 1; n >= 0; n --)
				this.deleteAction(this.actions[n]);
		}

		if (this.steps != null)
		{
			for (var n = this.steps.length - 1; n >= 0; n --)
				this.deleteStep(this.steps[n]);
		}
	}

	this.newAction = function(from, to, id)
	{
		var act = new Action(from, id); 
		act.draw(this.drawer);
		act.setTo(to);
		act.adjust();
		this.addAction(act);

		return act;
	}

	this.newStep = function(xo)
	{
		var stp = new FlowStep(xo);
		this.addStep(stp);
		stp.draw(this.drawer);
		return stp;
	}

	this.redraw = function()
	{
		if ((this.selObjType == 0) && (this.selObj != null))
		{
			this.selObj.redraw();
		}
	}

	this.draw = function(flowxml)
	{
		if ((flowxml.steps != null) && (flowxml.steps.steps != null))
		{
			for (var n = 0; n < flowxml.steps.steps.length; n ++)
			{
				var xo = flowxml.steps.steps[n];
				//alert(xo.id);
				this.newStep(xo);
			}
			if ((flowxml.actions != null) && (flowxml.actions.actions != null))
			{
				for (var n = 0; n < flowxml.actions.actions.length; n ++)
				{
					xo = flowxml.actions.actions[n];
					var from = this.findStep(xo.from);
					var to = this.findStep(xo.to);
					var act = this.newAction(from, to, xo.id);
					act.setXMLAct(xo);

				}
			}
		}
	}
}