flow.js

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

var flow = new Flow();

function div(x, y)
{
	var n = x % y;
	return (x - n) / y;
}

function toInt(str)
{
	if (str.indexOf('px') != -1)
		return parseInt(str.substring(0, str.length - 2));
	else
		return parseInt(str);
}

var _DragX, _DragY;

// 鼠标左键拖动
var _Draging = false;
// 绘制Action时状态
var _DrawingAction = false;

// 当前状态
var _FlowState = 0;    // 0 选择状态  1 新建起始步骤  2 新建结束步骤  3 新建普通步骤  4 移动对象

function setWorkState(st)
{
	if (_FlowState == 4)
	{
		_DrawingAction = false;
		flow.eraseLastAction();
	}
	flow.drawingAction = null;
	_FlowState = st;
}

function flowMouseDown()
{
	if (flow.drawer == null)
	{
		alert(getMsg('NODRAWER'));
		return;
	}

	//flowBeginDrag();
	
	var evt = window.event;
	if (evt.button == 1)
	{
		if (evt.ctrlKey)
			_FlowState = 3;
		if (evt.altKey)
			_FlowState = 4;

		switch (_FlowState)
		{
			case 0:   // 不操作 
				var obj = flow.getSelect();
				if (obj == null)
				{					
				}
				//alert(obj);
				break;
			case 1:
				//var stp = new FlowStep(window.event.x, window.event.y, flow.getObjID('step'), '开始', 'start');
				//flow.addStep(stp);
				//stp.draw(flow.drawer);
				setWorkState(0);
				break;
			case 2:
				//var stp = new FlowStep(window.event.x, window.event.y, flow.getObjID('step'), '结束', 'end');
				//flow.addStep(stp);
				//stp.draw(flow.drawer);
				setWorkState(0);
				break;
			case 3:
				var id = flow.getObjID('step');
				var xobj = parent.newStep(id, id, 'normal');
				xobj.left = window.event.x;
				xobj.top = window.event.y;

				var stp = flow.newStep(xobj); //new FlowStep(xobj); //window.event.x, window.event.y, flow.getObjID('step'), flow.getObjID('step'), 'normal');
				//flow.addStep(stp);
				//stp.draw(flow.drawer);
				setWorkState(0);
				// XML数据
				//alert(xobj.toXML());
				break;
			case 4:
				var obj = flow.getSelect();

				if ((obj != null) && (flow.selObjType == 0))
				{
					if (! _DrawingAction)
					{
						var id = flow.getObjID('action');
						//alert(id);
						flow.drawingAction = new Action(obj, id); 
						flow.drawingAction.draw(flow.drawer);
						_DrawingAction = true;
					}
					else
					{
						if (obj.getid().trim() != flow.drawingAction.from.getid().trim())
						{
							if (flow.existsAction2(flow.drawingAction.from, obj))
							{
								alert('动作重复!');
							}
							else
							{
								flow.drawingAction.setTo(obj);
								flow.drawingAction.adjust();
								flow.addAction(flow.drawingAction);
								_DrawingAction = false;

								// XML数据
								var act = flow.drawingAction;
								var xobj = parent.newAction(act.getid(), act.getid(), act.from.getid(), act.to.getid());
								act.setXMLAct(xobj);
								_FlowState = 0;
							}
						}
					}
				}
				break;
		}	
		
	}	
	else
		if (window.event.button == 2)
		{
			if (_FlowState == 4)
			{
				_DrawingAction = false;

				//alert(flow.drawingAction);
				flow.eraseLastAction();
			}
			_FlowState = 0;
		}
}

function flowBeginDrag()
{
	var obj = flow.getSelect();
	if (obj != null)
	{
		_Draging = true;
		_DragX = window.event.clientX;
		_DragY = window.event.clientY;
	}
}

function flowEndDrag()
{
	_Draging = false;
}

function flowDraging()
{
	// 添加新的Action时的拖动动作
	if (_DrawingAction)
	{
		flow.drawingAction.adjust(window.event.x, window.event.y);
	}
	else
	{
		// 鼠标左键按下时的拖动动作
		if (window.event.button == 1)
		{
			var obj = flow.getSelect();
			if ((obj != null) && _Draging)
			{					
				//alert(obj.left - _DragX + window.event.clientX);
				obj.moveto(obj.XMLSTEP.left - _DragX + window.event.clientX, obj.getTop() - _DragY + window.event.clientY);
				_DragX = window.event.clientX;
				_DragY = window.event.clientY;

				// 实时显示坐标
				if (flow.selObjType == 0)
				{
					parent.showProperty(0, obj);
				}
			}
		}
	}
}


// *************************************************************
// 流程步骤
function FlowStep(xmlstep)
{
	this.XMLSTEP = xmlstep;

	this.imgWidth = 45;
	this.imgHeight = 45;
	this.txtHeight = 9;
	// 显示属性
	this.left = this.XMLSTEP.left;
	this.top = this.XMLSTEP.top;

	this.redraw = function()
	{
		if (this.Obj != null)
		{
			this.Obj.style.left = this.XMLSTEP.left;
			this.Obj.style.top = this.XMLSTEP.top;
			//alert(this.XMLSTEP.text);
			this.txtObj.innerText = this.XMLSTEP.text;

			this.setSteptype(this.XMLSTEP.type);
			
			this.adjust();
		}
	}

	this.getTop = function()
	{
		return parseInt(this.XMLSTEP.top);
	}

	this.getLeft = function()
	{
		return parseInt(this.XMLSTEP.left + (this.Obj.clientWidth - this.imgObj.clientWidth) / 2);
	}
	this.getWidth = function()
	{
		return parseInt(this.imgWidth);
	}

	this.getHeight = function()
	{
		return parseInt(this.imgHeight + this.txtHeight);
	}

	this.getid = function()
	{
		return this.XMLSTEP.id.trim();
	}

	this.imgNormalSrc = 'steppics/step.gif';
	this.imgStartSrc = 'steppics/start.gif';
	this.imgEndSrc = 'steppics/end.gif';
	// 基本属性
	this.stepid = this.XMLSTEP.id;
	this.steptext = this.XMLSTEP.text;
	this.steptype = this.XMLSTEP.type;

	this.setSteptype = function(ftype)
	{
		this.steptype = ftype;
		if (this.imgObj)
		{
			switch (ftype)
			{
				case 'normal':
					this.imgObj.style.backgroundImage = 'url(' + this.imgNormalSrc + ')';
					break;
				case 'start':
					this.imgObj.style.backgroundImage = 'url(' + this.imgStartSrc + ')';
					break;
				case 'end':
					this.imgObj.style.backgroundImage = 'url(' + this.imgEndSrc + ')';
					break;
				default:
					this.imgObj.style.backgroundImage = 'url(' + this.imgNormalSrc + ')';
			}
		}

	}

	

	// 对象
	this.Obj = null;
	this.txtObj = null;
	this.imgObj = null;

	this.init = function()
	{
		// 初始化操作
	}

	// 属性设置
	this.setSteptext = function(stptxt)
	{
		this.steptext = stptxt;
		if (this.txtObj != null)
		{
			this.txtObj.innerText = this.steptext;
		}
	}
	this.getSteptext = function()
	{
		return this.XMLSTEP.text;
	}
	this.getType = function()
	{
		return this.XMLSTEP.type;
	}

	this.init();

	// 移动
	this.moveto = function(left, top)
	{
		this.XMLSTEP.left = left;
		this.XMLSTEP.top = top;
		if (this.Obj != null)
		{
			this.Obj.style.left = left;
			this.Obj.style.top = top;
		}
		this.adjust();
	}

	// 相对移动
	this.move = function(offsetX, offsetY)
	{
		this.moveto(this.XMLSTEP.left + offsetX, this.getTop() + offsetY);
		//this.adjust();
	}

	// 是否选中
	this.hitTest = function(obj)
	{
		return this.Obj.contains(obj);
		//return (obj == this.txtObj) || (obj == this.Obj);
	}

	// 是否选中连线
	this.hitTestAction = function(obj)
	{
		if (this.Actions == null)
		{
			return null;
		}
		for (var n = 0; n < this.Actions.length; n ++)
		{
			if (this.Actions[n].hitTest(obj))
			{
				return this.Actions[n];
			}
		}

	}

	// 绘制
	this.draw = function(canvas)
	{
		this.Obj = document.createElement('div');
		this.Obj.style.position = 'absolute';
		this.Obj.style.left = this.XMLSTEP.left;
		this.Obj.style.top = this.getTop();
		this.Obj.style.overflow = 'visible';
		this.Obj.align = 'center';
		this.Obj.attachEvent("onmousedown", flowBeginDrag);
		this.Obj.style.cursor = 'hand';
		canvas.appendChild(this.Obj);

		this.imgObj = document.createElement('span');
		//this.imgObj.style.backgroundImage = 'url(' + this.imgsrc + ')';
		this.imgObj.style.width = this.imgWidth;
		this.imgObj.style.height = this.imgHeight;
		this.imgObj.style.cursor = 'hand';
		this.imgObj.style.border = 'blue 2px solid';
		//img.attachEvent("onmousedown", begindrag);
		this.setSteptype(this.getType());
		this.Obj.appendChild(this.imgObj);

		var br = document.createElement('br');
		this.Obj.appendChild(br);

		this.txtObj = document.createElement('span');
		this.txtObj.innerText = this.getSteptext();
		this.txtObj.style.cursor = 'hand';
		//this.txtObj.attachEvent("onmousedown", begindrag);
		this.Obj.appendChild(this.txtObj);
	}

	this.setSelect = function(select)
	{
		if (select)
			this.imgObj.style.borderColor = 'red';
		else
			this.imgObj.style.borderColor = 'blue';
	}

	// 删除
	this.erase = function(canvas)
	{
		//alert(this.Actions.length);
		if (this.Actions != null)
			for (var n = this.Actions.length - 1; n >=0 ; n --)
			{
				//alert('删除' + n);
				this.Actions[n].erase(canvas);
			}

		canvas.removeChild(this.Obj);
	}

	// 连线调整
	this.Actions = null;
	this.indexOfAct = 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.addAction = function(act)
	{
		if (this.Actions == null)
		{
			this.Actions = new Array();
			this.Actions[0] = act;
		}
		else
			this.Actions[this.Actions.length] = act;
	}
	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.removeAction = function(act)
	{

		var idx = this.indexOfAct(act);
		//alert(idx);
		if (idx != -1)
		{
			this.rmvAction(idx);
		}
	}
	this.adjust = function()
	{
		if (this.Actions == null)
		{
			return;
		}
		for (var n = 0; n < this.Actions.length; n ++)
		{
			this.Actions[n].adjust();
		}
	}
}

// ************************************************************
// 动作
function Action(from, actid)
{
	this.XMLACT = null;
	var ARROWSIZE = 7;
	var ARIGHT = '1';
	var ADOWN  = '2';
	var ALEFT  = '3';
	var AUP    = '4';

	this.from = from;

	this.to = null;
	this.Obj = null;
	this.Arrow = null;
	this.actionid = actid;

	this.getid = function()
	{
		if (this.XMLACT == null)
			return this.actionid.trim();

		return this.XMLACT.id.trim();
	}

	this.setXMLAct = function(xmlact)
	{
		this.XMLACT = xmlact;
	}

	this.setTo = function(to)
	{
		this.to = to;
		this.to.addAction(this);
	}
	this.from.addAction(this);

	this.hitTest = function(obj)
	{
		return this.Obj.contains(obj) || this.Arrow.contains(obj);
	}


	function eraseBorder(ls)
	{
		ls.border = 0;
	}

	function drawTop(ls)
	{
		ls.borderTop = 'blue 1px solid';
	}
	function drawBottom(ls)
	{
		ls.borderBottom = 'blue 1px solid';
	}
	function drawLeft(ls)
	{
		ls.borderLeft = 'blue 1px solid';
	}
	function drawRight(ls)
	{
		ls.borderRight = 'blue 1px solid';
	}

	this.calcPoint = function(x, y)
	{
		if (this.from == null)
		{
			return null;
		}

		var frect = new Array();
		//alert(this.from.Obj.clientWidth);
		frect[0] = this.from.getLeft();
		frect[1] = this.from.getTop();
		frect[2] = this.from.getLeft() + this.from.getWidth();
		frect[3] = this.from.getTop() + this.from.getHeight();

		var ret = new Array();
		ret[0] = x;
		ret[1] = y;
		
		if ((x >= frect[0]) && (x <= frect[2]))
		{
			ret[0] = x;
			if (y < frect[1])
			{
				ret[1] = frect[1];
			}
			else
				ret[1] = frect[3];
		}

		if ((y >= frect[1]) && (y <= frect[3]))
		{
			ret[1] = y;
			if (x < frect[0])
			{
				ret[0] = frect[0];
			}
			else
				ret[0] = frect[2];

		}

		if (y < frect[1])
		{
			ret[0] = frect[0] + (frect[2] - frect[0]) / 2;
			ret[1] = frect[1];
		}

		if (y > frect[3])
		{
			ret[0] = frect[0] + (frect[2] - frect[0]) / 2;
			ret[1] = frect[3];
		}

		return ret;
	}

	this.calcFromTo = function()
	{
		if ((this.from == null) || (this.to == null))
		{
			return null;
		}

		var fx1 = this.from.getLeft(), fy1 = this.from.getTop(), fx2 = this.from.getLeft() + this.from.getWidth(), fy2 = this.from.getTop() + this.from.getHeight();
		var tx1 = this.to.getLeft(), ty1 = this.to.getTop(), tx2 = this.to.getLeft() + this.to.getWidth(), ty2 = this.to.getTop() + this.to.getHeight();

		//alert(tx1 + ',' +ty1 + '=' +tx2 + ',' +ty2);
		var ret = new Array();

		if ((fx1 < tx2) && (fx2 > tx1))
		{
			if (fx1 < tx1)
				ret[0] = (fx2 + tx1) / 2;
			else
				ret[0] = (tx2 + fx1) / 2;
			ret[2] = ret[0];

			if (fy1 < ty1)
			{