var wf_r = null;
|
var wf_steps = [];
|
var wf_texts = [];
|
var wf_conns = [];
|
var wf_option = "";
|
var wf_focusObj = null;
|
var wf_width = 108;
|
var wf_height = 50;
|
var wf_rect = 8;
|
var wf_designer = false;
|
var wf_connColor = "#898a89";
|
var wf_connColor1 = "green";
|
var wf_nodeBorderColor = isshowDesign ? "#23508e" : "#7a7a7a";
|
var wf_noteColor = "#efeff0";
|
var wf_nodeBorderColor1 = "green";
|
var wf_noteColor1 = "#e7f0c7";
|
var wf_stepDefaultName = "";
|
|
var tempArrPath = [];
|
var mouseX = 0;
|
var mouseY = 0;
|
|
var wf_json = {};
|
var wf_id = "";
|
var links_tables_fields = [];
|
var wf_r_width = 0;
|
var wf_r_height = 0;
|
|
$(function ()
|
{
|
wf_r_width = $(window).width() - 20;
|
wf_r_height = $(window).height() - 80;
|
wf_r = Raphael(0, 30, wf_r_width, wf_r_height);
|
wf_r.customAttributes.type1 = function () { };
|
wf_r.customAttributes.fromid = function () { };
|
wf_r.customAttributes.toid = function () { };
|
});
|
|
function addStep(x, y, text, id, isIn)
|
{
|
var guid = getGuid();
|
var xy = getNewXY();
|
x = x || xy.x;
|
y = y || xy.y;
|
text = text || wf_stepDefaultName;
|
id = id || guid;
|
if (x > wf_r_width)
|
{
|
wf_r_width = wf_r_width + wf_width + 50;
|
wf_r.setViewBox(0, 10, wf_r_width, wf_r_height);
|
}
|
if (y > wf_r_height)
|
{
|
wf_r_height = wf_r_height + wf_height + 100;
|
wf_r.setViewBox(0, 10, wf_r_width, wf_r_height);
|
}
|
var rect = wf_r.rect(x, y, wf_width, wf_height, wf_rect);
|
var fillcolor = wf_noteColor;
|
var strokecolor = wf_nodeBorderColor;
|
if (isIn)
|
{
|
fillcolor = wf_noteColor1;
|
strokecolor = wf_nodeBorderColor1;
|
}
|
rect.attr({
|
"fill": fillcolor, "stroke": strokecolor, "stroke-width": 1.4, "cursor": "default"
|
});
|
rect.id = id;
|
rect.type1 = "step";
|
wf_steps.push(rect);
|
var text2 = text.length > 8 ? text.substr(0, 7) + "..." : text;
|
var text1 = wf_r.text(x + 52, y + 25, text2);
|
text1.attr({ "font-size": "12px" });
|
if (text.length > 8) text1.attr({ "title": text });
|
text1.id = "text_" + id;
|
text1.type1 = "text";
|
wf_texts.push(text1);
|
}
|
|
function setStepText(id, txt)
|
{
|
var stepText = wf_r.getById("text_" + id);
|
if (stepText != null)
|
{
|
if (txt.length > 8)
|
{
|
stepText.attr({ "title": txt });
|
txt = txt.substr(0, 7) + "...";
|
}
|
stepText.attr({ "text": txt });
|
}
|
}
|
|
function setLineText(id, txt)
|
{
|
var line;
|
for (var i = 0; i < wf_conns.length; i++)
|
{
|
if (wf_conns[i].id === id)
|
{
|
line = wf_conns[i];
|
break;
|
}
|
}
|
if (!line)
|
{
|
return;
|
}
|
var bbox = line.arrPath.getBBox();
|
var txtX = (bbox.x + bbox.x2) / 2;
|
var txtY = (bbox.y + bbox.y2) / 2;
|
|
var lineText = wf_r.getById("line_" + id);
|
if (lineText != null)
|
{
|
if (!txt)
|
{
|
lineText.remove();
|
}
|
else
|
{
|
lineText.attr("x", txtX);
|
lineText.attr("y", txtY);
|
lineText.attr("text", true);
|
}
|
return;
|
}
|
if (txt)
|
{
|
var textObj = wf_r.text(txtX, txtY, txt);
|
textObj.type1 = "line";
|
textObj.id = "line_" + id;
|
}
|
}
|
|
|
function connObj(obj, isIn, text)
|
{
|
if (isLine(obj))
|
{
|
wf_conns.push(wf_r.drawArr(obj, isIn));
|
setLineText(obj.id, text);
|
}
|
}
|
|
function isLine(obj)
|
{
|
if (!obj || !obj.obj1 || !obj.obj2)
|
{
|
return false;
|
}
|
if (obj.obj1 === obj.obj2)
|
{
|
return false;
|
}
|
if (!isStepObj(obj.obj1) || !isStepObj(obj.obj2))
|
{
|
return false;
|
}
|
for (var i = 0; i < wf_conns.length; i++)
|
{
|
if (obj.obj1 === obj.obj2 || (wf_conns[i].obj1 === obj.obj1 && wf_conns[i].obj2 === obj.obj2))
|
{
|
return false;
|
}
|
}
|
return true;
|
}
|
|
function isStepObj(obj)
|
{
|
return obj && obj.type1 && obj.type1.toString() === "step";
|
}
|
|
function dragger()
|
{
|
this.ox = this.attr("x");
|
this.oy = this.attr("y");
|
changeStyle(this);
|
};
|
|
Raphael.fn.drawArr = function (obj, isIn)
|
{
|
if (!obj || !obj.obj1)
|
{
|
return obj;
|
}
|
|
if (!obj.obj2)
|
{
|
var point1 = getStartEnd(obj.obj1, obj.obj2);
|
var path2 = getArr(point1.start.x, point1.start.y, mouseX, mouseY, 7);
|
for (var i = 0; i < tempArrPath.length; i++)
|
{
|
tempArrPath[i].arrPath.remove();
|
}
|
tempArrPath = [];
|
obj.arrPath = this.path(path2);
|
obj.arrPath.attr({ "stroke-width": 1.7, "stroke": isIn ? wf_connColor1 : wf_connColor, "fill": wf_connColor });
|
tempArrPath.push(obj);
|
return obj;
|
}
|
|
var point = getStartEnd(obj.obj1, obj.obj2);
|
var path1 = getArr(point.start.x, point.start.y, point.end.x, point.end.y, 7);
|
try
|
{
|
if (obj.arrPath)
|
{
|
obj.arrPath.attr({ path: path1 });
|
}
|
else
|
{
|
obj.arrPath = this.path(path1);
|
obj.arrPath.attr({ "stroke-width": 1.7, "stroke": isIn ? wf_connColor1 : wf_connColor, "fill": wf_connColor });
|
if (wf_designer)
|
{
|
obj.arrPath.click(connClick);
|
obj.arrPath.dblclick(connSetting);
|
obj.arrPath.id = obj.id;
|
obj.arrPath.fromid = obj.obj1.id;
|
obj.arrPath.toid = obj.obj2.id;
|
}
|
}
|
} catch (e) { }
|
return obj;
|
};
|
|
function getStartEnd(obj1, obj2)
|
{
|
var bb1 = obj1 ? obj1.getBBox() : null;
|
var bb2 = obj2 ? obj2.getBBox() : null;
|
var p = [
|
{ x: bb1.x + bb1.width / 2, y: bb1.y - 1 },
|
{ x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1 },
|
{ x: bb1.x - 1, y: bb1.y + bb1.height / 2 },
|
{ x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2 },
|
bb2 ? { x: bb2.x + bb2.width / 2, y: bb2.y - 1 } : {},
|
bb2 ? { x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1 } : {},
|
bb2 ? { x: bb2.x - 1, y: bb2.y + bb2.height / 2 } : {},
|
bb2 ? { x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2 } : {}
|
];
|
var d = {}, dis = [];
|
for (var i = 0; i < 4; i++)
|
{
|
for (var j = 4; j < 8; j++)
|
{
|
var dx = Math.abs(p[i].x - p[j].x),
|
dy = Math.abs(p[i].y - p[j].y);
|
if (
|
(i === j - 4) ||
|
(((i !== 3 && j != 6) || p[i].x < p[j].x) &&
|
((i != 2 && j != 7) || p[i].x > p[j].x) &&
|
((i != 0 && j != 5) || p[i].y > p[j].y) &&
|
((i != 1 && j != 4) || p[i].y < p[j].y))
|
)
|
{
|
dis.push(dx + dy);
|
d[dis[dis.length - 1]] = [i, j];
|
}
|
}
|
}
|
if (dis.length == 0)
|
{
|
var res = [0, 4];
|
} else
|
{
|
res = d[Math.min.apply(Math, dis)];
|
}
|
var result = {};
|
result.start = {};
|
result.end = {};
|
result.start.x = p[res[0]].x;
|
result.start.y = p[res[0]].y;
|
result.end.x = p[res[1]].x;
|
result.end.y = p[res[1]].y;
|
return result;
|
}
|
|
function getArr(x1, y1, x2, y2, size)
|
{
|
var angle = Raphael.angle(x1, y1, x2, y2);
|
var a45 = Raphael.rad(angle - 28);
|
var a45m = Raphael.rad(angle + 28);
|
var x2a = x2 + Math.cos(a45) * size;
|
var y2a = y2 + Math.sin(a45) * size;
|
var x2b = x2 + Math.cos(a45m) * size;
|
var y2b = y2 + Math.sin(a45m) * size;
|
return ["M", x1, y1, "L", x2, y2, "M", x2, y2, "L", x2b, y2b, "L", x2a, y2a, "z"].join(",");
|
}
|
function getNewXY()
|
{
|
var x = 10, y = 50;
|
if (wf_steps.length > 0)
|
{
|
var step = wf_steps[wf_steps.length - 1];
|
x = parseInt(step.attr("x")) + 170;
|
y = parseInt(step.attr("y"));
|
if (x > wf_r.width - wf_width)
|
{
|
x = 10;
|
y = y + 100;
|
}
|
|
if (y > wf_r.height - wf_height)
|
{
|
y = wf_r.height - wf_height;
|
}
|
}
|
return { x: x, y: y };
|
}
|
function getGuid()
|
{
|
return Raphael.createUUID().toLowerCase();
|
}
|
function initwf()
|
{
|
wf_json = {};
|
wf_steps = new Array();
|
wf_texts = new Array();
|
wf_conns = new Array();
|
wf_r.clear();
|
}
|
|
Array.prototype.remove = function (n)
|
{
|
if (isNaN(n) || n > this.length) { return false; }
|
this.splice(n, 1);
|
}
|
|
function removeArray(array, n)
|
{
|
if (isNaN(n) || n > array.length) { return false; }
|
array.splice(n, 1);
|
}
|
|
function reloadFlow(json)
|
{
|
if (!json || !json.id || $.trim(json.id) === "") return false;
|
wf_json = json;
|
wf_id = wf_json.id;
|
wf_r.clear();
|
wf_steps = [];
|
wf_conns = [];
|
wf_texts = [];
|
var steps = wf_json.steps;
|
if (steps && steps.length > 0)
|
{
|
for (var i = 0; i < steps.length; i++)
|
{
|
var isIn = false;//该步骤是否走过
|
for (var j = 0; j < window.taskJSON.length; j++)
|
{
|
if (window.taskJSON[j].stepid.toLowerCase() == steps[i].id.toLowerCase())
|
{
|
isIn = true;
|
break;
|
}
|
}
|
addStep(steps[i].position.x, steps[i].position.y, steps[i].name, steps[i].id, isIn);
|
}
|
for (var x = 0; x < window.taskJSON.length; x++)
|
{
|
if (window.taskJSON[x].status === "0" || window.taskJSON[x].status === "1")
|
{
|
var id = window.taskJSON[x].stepid;
|
var step = wf_r.getById(id);
|
if (step)
|
{
|
step.attr({ "fill": "#fdddb3", "stroke": "#fd6703" });
|
}
|
}
|
}
|
}
|
var lines = wf_json.lines;
|
if (lines && lines.length > 0)
|
{
|
for (var i = 0; i < lines.length; i++)
|
{
|
var isIn = false; //该线是否走过
|
for (var j = 0; j < window.taskJSON.length; j++)
|
{
|
if (window.taskJSON[j].prevstepid.toLowerCase() === lines[i].from.toLowerCase() && window.taskJSON[j].stepid.toLowerCase() === lines[i].to.toLowerCase())
|
{
|
isIn = true;
|
break;
|
}
|
}
|
connObj({ id: lines[i].id, obj1: wf_r.getById(lines[i].from), obj2: wf_r.getById(lines[i].to) }, isIn, lines[i].text);
|
}
|
}
|
}
|
|
function showGraph(id)
|
{
|
var json = $.ajax({
|
url: "/WorkFlowDesigner/GetJson?instanceid=" + id, async: false, cache: false, dataType: "json", success: function (json)
|
{
|
reloadFlow(json);
|
}
|
});
|
}
|
|
function showGraphByFlowId(id) {
|
var json = $.ajax({
|
url: "/WorkFlowDesigner/GetJsonByFlowId?flowid=" + id, async: false, cache: false, dataType: "json", success: function (json) {
|
reloadFlow(json);
|
}
|
});
|
}
|
