+(function (global, $, Raphael, factory) {
|
typeof exports == "object" && typeof module != "undefined" ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.FlowDesigner = factory());
|
|
})(this, jQuery, Raphael, function () {
|
|
function Start(flow, options) {
|
this.flow = flow; //FlowDesigner类
|
this.paper = flow.paper; //画布
|
this.options = options;
|
this.type = "start";
|
this.selected = false;
|
this.id = options.id ? options.id : "";
|
this.isLoad = options.isLoad ? true : false; //是否是加载的元素
|
|
this.parentElem = null; //所属父级
|
this.parentElemStr = options.parentElem; //加载时所属父级的名称
|
//this.stopmatching=false; //停止匹配线，只进入的子流程才为true,其它时候是false
|
this.element = null; //start圆
|
|
this.bmargin = 4; //外框和元素的边距
|
this.elementbox = null; //start圆的外框，加厚边距
|
this.bbox = null; //圆的真实外框
|
//this.$moveDiv=null; //外框拖动虚框
|
this.coordinate = []; //圆元素的上下左右四条边坐标
|
this.centerLineCoordinate = []; //圆元素的上下左右四条边坐标，为显示中心线，小一点
|
this.centerMargin = 10; //向中心点向外4个方向扩展的距离
|
|
//元素
|
this.cx = options.cx;
|
this.cy = options.cy;
|
this.centerpoint = [this.cx, this.cy];
|
this.r = options.r;
|
this.ccelement = null; //圆心
|
this.centerLineY = null;
|
this.centerLineX = null;
|
this.lineout = []; //所有的有关出去的线
|
this.text = null; //文本
|
this.content = {}; //start数据
|
this.completeState = options.completeState || 0; //0 代表否 1代表已完 2代表正当 3代表还未开始
|
|
}
|
|
Start.prototype = $.extend(Start.prototype, {
|
init: function () {
|
var number = this.flow.createStartNodeNum();
|
var tempName = (new Date()).getTime();
|
if (!this.isLoad) {
|
this.id = "start_" + tempName;
|
}
|
|
//圆
|
switch (this.completeState) {
|
|
case 1://蓝色
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#e0e9fe",
|
"cursor": "pointer",
|
"stroke": "#2632aa"
|
});
|
break;
|
case 2://绿色
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#ebf8eb",
|
"cursor": "pointer",
|
"stroke": "#017501"
|
});
|
break;
|
case 3://灰色
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#dadada",
|
"cursor": "pointer",
|
"stroke": "#acacac"
|
});
|
break;
|
default:
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#ffffff",
|
"cursor": "pointer"
|
});
|
break;
|
}
|
|
|
this.centerpoint = [this.cx, this.cy];
|
this.ccelement = this.paper.circle(this.centerpoint[0], this.centerpoint[1], 2).attr({
|
"fill": "#ff0000",
|
"stroke": "ff0000"
|
}).hide(); //圆心
|
|
//真外框
|
this.bbox = this.element.getBBox();
|
|
//扩大的外框
|
this.elementbox = this.paper.rect(this.bbox.x - this.bmargin, this.bbox.y - this.bmargin, this.bbox.width + this.bmargin * 2, this.bbox.height + this.bmargin * 2).attr({
|
"stroke-dasharray": "- ",
|
"stroke": "#000000",
|
"stroke-width": 0.5,
|
"fill": "#ff0000",
|
"fill-opacity": 0
|
});
|
|
//坐标(L,R,T,B)
|
this.coordinate.push(this.bbox.x, this.bbox.x + this.bbox.width, this.bbox.y, this.bbox.y + this.bbox.height);
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
//文字
|
if (!this.isLoad) {
|
this.text = this.paper.text(this.centerpoint[0], this.centerpoint[1] + this.r + 12, "开始").attr({"font-size": "12px"}).toBack();
|
} else {
|
this.text = this.paper.text(this.centerpoint[0], this.centerpoint[1] + this.r + 12, this.options.text).attr({"font-size": "12px"}).toBack();
|
|
}
|
|
//隐藏的中心竖线
|
this.centerLineY = this.paper.path("M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
//隐藏的中心横线
|
this.centerLineX = this.paper.path("M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
//添加父元素
|
if (!this.isLoad) {
|
this.addParent();
|
}
|
|
var _that = this;
|
|
if (this.completeState == 0) {
|
//圆的外框点击
|
this.elementbox.click(function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) { //不在加减点状态时
|
|
//小菜单
|
$(".right").css({
|
"left": _that.cx + _that.r + 10 - _that.flow.getScrollx(),
|
"top": _that.cy - _that.r + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
|
_that.selected = true; //选中元素
|
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
_that.setText(wenbenid);
|
}
|
_that.text.show();
|
}
|
|
|
});
|
|
//圆的外框双击
|
this.elementbox.dblclick(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var tvalue = _that.text.attr("text");
|
$(".taskinput input").val(tvalue);
|
$(".taskinput input").attr("wenbenid", _that.id);
|
//显示文本框,15是宽度为60，取中间
|
$(".taskinput").css({
|
"left": _that.cx - _that.r - 15 - _that.flow.getScrollx(),
|
"top": (_that.cy - 10 + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()),
|
"width": 60
|
});
|
|
_that.selected = true;
|
//文本框本身隐藏
|
_that.text.hide();
|
}
|
|
});
|
|
//圆的点击元素
|
this.element.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
_that.elementbox.show();
|
$(".right").css({
|
"left": _that.cx + _that.r + 10 - _that.flow.getScrollx(),
|
"top": _that.cy - _that.r + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
}
|
});
|
|
//圆的外层框拖动
|
var weiyiX = 0;
|
var weiyiY = 0;
|
var dropStatus = false;
|
var startX = 0;
|
var startY = 0;
|
var bpz = null;
|
var bpzcenter = null;
|
this.elementbox.drag(function (tx, ty, x, y, e) { //move中
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
dropStatus = true;
|
//限制去菜单那块
|
if (e.clientX < (134 + _that.flow._DEFALUTS_.dx + weiyiX)) {
|
e.clientX = 134 + _that.flow._DEFALUTS_.dx;
|
dropStatus = false;
|
return;
|
}
|
//限制画布最右侧边界
|
if (e.clientX > _that.flow._DEFALUTS_.width - (_that.r + _that.bmargin) * 2 + _that.flow._DEFALUTS_.dx + weiyiX) {
|
dropStatus = false;
|
return;
|
}
|
|
//限制头部
|
if (e.clientY < (0 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
e.clientY = 0 + _that.flow._DEFALUTS_.dy;
|
dropStatus = false;
|
return;
|
}
|
|
//限制画布底部边界
|
if (e.clientY > (0 + _that.flow._DEFALUTS_.height - (_that.r + _that.bmargin) * 2 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
dropStatus = false;
|
return;
|
}
|
|
this.attr({
|
"x": e.clientX - _that.flow._DEFALUTS_.dx - weiyiX,
|
"y": e.clientY - _that.flow._DEFALUTS_.dy - weiyiY
|
});
|
|
//碰撞检测
|
var L = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var R = L + _that.r * 2;
|
var T = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
var B = T + _that.r * 2;
|
bpz = _that.flow.collision(_that, L, R, T, B); //被碰撞
|
if (bpz != null && bpz.type != "subProcess") {
|
dropStatus = false;
|
}
|
bpzcenter = _that.flow.collisionCenterLine(_that, L, R, T, B); //中心线匹配
|
}
|
|
|
}, function (x, y, e) { //move开始
|
|
weiyiX = e.clientX - _that.flow._DEFALUTS_.dx - _that.bbox.x + _that.bmargin; //offsetX，不需要减1
|
weiyiY = e.clientY - _that.flow._DEFALUTS_.dy - _that.bbox.y + _that.bmargin; //offsetY，不需要减32
|
//console.log(e.clientY , _that.flow._DEFALUTS_.dy, _that.bbox.y , _that.bmargin);
|
startX = _that.bbox.x - _that.bmargin;
|
startY = _that.bbox.y - _that.bmargin;
|
|
}, function (e) {//move结束
|
|
if (dropStatus == true) {
|
var elemnetboxbbox = this.getBBox();
|
var cx = elemnetboxbbox.cx;
|
var cy = elemnetboxbbox.cy;
|
|
//判断是否进入子流程
|
if (bpz && bpz.type == "subProcess") {
|
//说明进入在子流程中
|
if (_that.parentElem == null || _that.parentElem.id != bpz.id) {
|
//表示新的入到一个子流程中
|
if (_that.lineout.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
$.messager.confirm('再次确认', '该开始节点进入子流程会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
_that.render(cx, cy, bpzcenter); //重新渲染start的圆
|
}
|
})
|
} else {
|
//没有线段
|
_that.render(cx, cy, bpzcenter); //重新渲染start的圆
|
}
|
}
|
} else if (bpz == null) {
|
if (_that.parentElem != null) {
|
//原来在小空间中
|
if (_that.lineout.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
var L = elemnetboxbbox.x;
|
var R = L + _that.r * 2;
|
var T = elemnetboxbbox.y;
|
var B = T + _that.r * 2;
|
//判断当前是否已经出了小空间
|
if (!_that.comeInSubProcess2(L, R, T, B)) {
|
$.messager.confirm('再次确认', '该开始节点原属于子流程空间，进入父空间时会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
|
_that.render(cx, cy, bpzcenter); //重新渲染start的圆
|
}
|
})
|
} else {
|
//没有出小空间
|
_that.render(cx, cy, bpzcenter); //重新渲染start的圆
|
}
|
} else {
|
//没有线段
|
|
_that.render(cx, cy, bpzcenter); //重新渲染start的圆
|
}
|
} else {
|
//原来在大空间中
|
_that.render(cx, cy, bpzcenter); //重新渲染start的圆
|
}
|
}
|
|
|
} else {
|
this.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
}
|
dropStatus = false;
|
|
return false;
|
|
});
|
} else if (this.completeState == 1 || this.completeState == 2) {
|
|
this.element.mouseover(function (e) {
|
$("[id*=divshow_]").hide();
|
var wheight = e.view.innerHeight; //屏幕大小
|
var wheight2 = Math.floor(wheight / 2);//屏幕大小的一半
|
var name = "divshow_" + _that.id;
|
if ($("#" + name).length == 0) {
|
//创建
|
if (e.pageY <= wheight2) {
|
var str = "<div id='" + name + "' class='show' style='left:" + (e.pageX + 0) + "px; top:" + (e.pageY + 0) + "px;'><p class='title'>" + _that.getText() + "</p><div class='con' style='max-height:" + wheight2 + "px'>";
|
} else {
|
var str = "<div id='" + name + "' class='show' style='left:" + (e.pageX + 0) + "px; bottom:" + (wheight - e.pageY + 0) + "px;'><p class='title'>" + _that.getText() + "</p><div class='con' style='max-height:" + wheight2 + "px'>";
|
}
|
|
if (_that.completeState == 1) {
|
|
str += "<h4 class='yi'>已办理</h4>";
|
if (_that.content.activityUsers && _that.content.activityUsers.length > 0) {
|
|
$.each(_that.content.activityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>办理时间</strong><span>" + el.time + "</span></p><p><strong>办理意见</strong><span>" + el.advice + "</span></p>";
|
})
|
}
|
} else if (_that.completeState == 2) {
|
|
if (_that.content.waitActivityUsers && _that.content.waitActivityUsers.length > 0) {
|
str += "<h4 class='zhengzai'>正在办理</h4>";
|
$.each(_that.content.waitActivityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>开始时间</strong><span>" + el.time + "</span></p>";
|
})
|
}
|
|
if (_that.content.activityUsers && _that.content.activityUsers.length > 0) {
|
str += "<h4 class='yi'>已办理</h4>";
|
$.each(_that.content.activityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>办理时间</strong><span>" + el.time + "</span></p><p><strong>办理意见</strong><span>" + el.advice + "</span></p>";
|
})
|
}
|
|
|
}
|
|
str += "</div></div>";
|
|
$("#" + _that.flow._DEFALUTS_.id).append(str);
|
} else {
|
|
if (e.pageY <= wheight2) {
|
$("#" + name).css({"left": (e.pageX + 0), "top": (e.pageY + 0), "bottom": "auto"}).show();
|
$("#" + name).find(".con").css({"maxHeight": wheight2});
|
} else {
|
$("#" + name).css({
|
"left": (e.pageX + 0),
|
"bottom": (wheight - e.pageY + 0),
|
"top": "auto"
|
}).show();
|
$("#" + name).find(".con").css({"maxHeight": wheight2});
|
}
|
|
}
|
|
|
})
|
|
}
|
},
|
render: function (cx, cy, bpzcenter) { //start元素重新渲染
|
|
if (bpzcenter != null) { //碰撞吸附
|
if (bpzcenter[0] != null && bpzcenter[1] == null) {
|
//y轴吸附，x轴不吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
cx = bpzcenter[0].cx;
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
cx = bpzcenter[0].x + bpzcenter[0].w / 2;
|
}
|
|
} else if (bpzcenter[0] == null && bpzcenter[1] != null) {
|
|
//x轴吸附，y轴不吸附
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
cy = bpzcenter[1].cy;
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
cy = bpzcenter[1].y + bpzcenter[1].h / 2;
|
}
|
|
} else if (bpzcenter[0] != null && bpzcenter[1] != null) {
|
//y轴吸附，x轴吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
cx = bpzcenter[0].cx;
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
cx = bpzcenter[0].x + bpzcenter[0].w / 2;
|
}
|
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
cy = bpzcenter[1].cy;
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
cy = bpzcenter[1].y + bpzcenter[1].h / 2;
|
}
|
}
|
|
}
|
|
this.cx = cx;
|
this.cy = cy;
|
this.element.attr({"cx": cx, "cy": cy});
|
this.bbox = this.element.getBBox();
|
this.centerpoint = [cx, cy];
|
//圆心
|
this.ccelement.attr({"cx": this.centerpoint[0], "cy": this.centerpoint[1]});
|
//扩大的外框
|
this.elementbox.attr({"x": this.bbox.x - this.bmargin, "y": this.bbox.y - this.bmargin});
|
|
//修改坐标(L,R,T,B)
|
this.coordinate[0] = this.bbox.x;
|
this.coordinate[1] = this.bbox.x + this.bbox.width;
|
this.coordinate[2] = this.bbox.y;
|
this.coordinate[3] = this.bbox.y + this.bbox.height;
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate = [];
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
//文字
|
this.text.attr({"x": this.centerpoint[0], "y": this.centerpoint[1] + this.r + 12});
|
|
//移动隐藏的中心竖线
|
this.centerLineY.attr("path", "M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height);
|
|
//移动隐藏的中心横线
|
this.centerLineX.attr("path", "M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]);
|
|
//所有出去的点，因为坐标变了，需要重绘
|
var _that = this;
|
$.each(this.lineout, function (index, lineElem) {
|
|
lineElem.redrawStart(_that.cx, _that.cy);
|
});
|
|
//父元素处理
|
var parent = this.comeInSubProcess();
|
if (parent != null) {
|
//目前进入到子流程中
|
parent.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5});
|
}
|
//无论是否有父元素，都需要进入这个方法
|
this.addParent(parent);
|
},
|
unSelect: function () {//非选中状态
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
//外框隐藏
|
this.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5}).hide();
|
|
//文本框
|
if (this.selected == true) {
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
this.setText(wenbenid);
|
}
|
this.text.show();
|
|
}
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
|
//中心线隐藏
|
this.centerLineX.hide();
|
this.centerLineY.hide();
|
this.selected = false;
|
this.ccelement.hide();
|
//完成情况的显示
|
if (this.completeState != 0) {
|
var name = "divshow_" + this.id;
|
$("#" + name).hide();
|
}
|
},
|
setText: function (wenbenid) {
|
//得到文本框的值，重新赋值给text //Raphaël\nkicks\nbutt!
|
var tvalue = $(".taskinput input").val();
|
var temp = tvalue;
|
if ($.trim(tvalue) != "" && wenbenid == this.id) {
|
this.text.attr({"text": temp});
|
$(".taskinput input").val("");//清空
|
}
|
},
|
removeElement: function () {//删除元素
|
this.element.remove();
|
this.centerLineX.remove();
|
this.centerLineY.remove();
|
this.elementbox.remove();
|
this.ccelement.remove();
|
this.text.remove();
|
//文本框回归
|
$(".taskinput").css({"left": -100, "top": -100});
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
//父元素
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
}
|
|
|
//移除相关的线
|
var templines = [];
|
$.each(this.lineout, function (index, line) {
|
templines.push(line);
|
});
|
$.each(templines, function (index, line) {
|
line && line.removeElement();
|
});
|
|
},
|
removeOutLine: function (line) {
|
var _that = this;
|
$.each(this.lineout, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.lineout.splice(index, 1);
|
}
|
|
})
|
},
|
|
comeInSubProcess: function () { //判断是否在子流程里面
|
var parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
return parent;
|
},
|
comeInSubProcess2: function (L, R, T, B) {//判断是否在子流程里面
|
var parent = this.flow.collisionSubProcess(L, R, T, B); //被碰撞
|
return parent;
|
},
|
addParent: function (parent) {//在子流程里的处理
|
//判断落点是否在子流程内，如果落在子流程内，则需要修改parentElem
|
if (!parent) {
|
parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
}
|
if (parent != null) {
|
|
var ids = [];
|
$.each(parent.subElement, function (index, elem) {
|
ids.push(elem.id);
|
})
|
if ($.inArray(this.id, ids) == -1) {
|
this.parentElem = parent;
|
parent.subElement.push(this);
|
//表示新加入的到某个节点上，则原来的所有的线段需要移除
|
//移除相关的线
|
this.removeLine();
|
//节点置前
|
//this.element.toFront();
|
this.elementbox.toFront();
|
|
}
|
} else {//没有父元素
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
//表示新加入的到其他的，则原来子流程中的所有的线段需要移除
|
this.removeLine();
|
}
|
}
|
|
},
|
|
getText: function () {
|
return this.text.attr("text");
|
},
|
|
removeLine: function () { //删除线段
|
|
var tempoutlines = [];
|
$.each(this.lineout, function (index, line) {
|
if (!line.self) {
|
tempoutlines.push(line);
|
}
|
});
|
$.each(tempoutlines, function (index, line) {
|
line && line.removeElement();
|
if (line) {
|
delete this.flow.alllines[line.id]; //删除线元素
|
}
|
});
|
}
|
|
});
|
|
//任务节点
|
function UserTask(flow, options) {
|
this.flow = flow; //FlowDesigner类的实例
|
this.paper = flow.paper; //画布rapheal
|
this.options = options;
|
this.type = "userTask";
|
this.selected = false;
|
this.id = options.id ? options.id : "";
|
this.isLoad = options.isLoad ? true : false; //是否是加载的元素
|
this.parentElem = null; //所属父级
|
this.parentElemStr = options.parentElem; //加载时所属父级的名称
|
this.element = null; //任务方块
|
this.elementbox = null; //扩大外框
|
this.bbox = null; //外框
|
this.coordinate = []; //当前元素的上下左右四条边坐标
|
this.fourpoint = []; //四个元素顶点坐标
|
this.centerLineCoordinate = []; //圆元素的上下左右四条边坐标，为显示中心线，小一点
|
this.centerMargin = 10; //向中心点向外4个方向扩展的距离
|
|
|
//控制点
|
//this.$elementctrl1 = null;
|
//this.$elementctrl4 = null;
|
//元素
|
this.x = options.x; //顶点坐标x
|
this.y = options.y;//顶点坐标y
|
this.w = options.w;//宽
|
this.h = options.h;//高
|
this.angle = 4; //弧度
|
this.bmargin = 4; //外框和元素的边距
|
this.text = null; //文本
|
this.ccelement = null; //圆心
|
this.centerpoint = []; //矩形的中心点
|
this.linein = []; //所有进来的线
|
this.lineout = [];//所有出去的线
|
this.content = {}; //任务节点的数据
|
this.completeState = options.completeState || 0; //0 代表否 1代表已完 2代表正当 3代表还未开始
|
|
}
|
|
UserTask.prototype = $.extend(UserTask.prototype, {
|
init: function () {
|
var number = this.flow.createTaskNum();
|
var tempName = (new Date()).getTime();
|
if (!this.isLoad) {
|
this.id = "userTask_" + tempName;
|
}
|
//矩形框
|
switch (this.completeState) {
|
|
case 1://蓝色
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#e0e9fe",
|
"cursor": "pointer",
|
"stroke": "#2632aa"
|
}).toFront();
|
break;
|
case 2://绿色
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#ebf8eb",
|
"cursor": "pointer",
|
"stroke": "#017501"
|
}).toFront();
|
break;
|
case 3://灰色
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#dadada",
|
"cursor": "pointer",
|
"stroke": "#acacac"
|
}).toFront();
|
break;
|
default:
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#f9f9f9",
|
"cursor": "pointer"
|
}).toFront();
|
break;
|
}
|
|
//外框
|
this.bbox = this.element.getBBox();
|
//扩大外框
|
this.elementbox = this.paper.rect(this.bbox.x - this.bmargin, this.bbox.y - this.bmargin, this.bbox.width + this.bmargin * 2, this.bbox.height + this.bmargin * 2).attr({
|
"stroke-dasharray": "- ",
|
stroke: "#000000",
|
"stroke-width": 0.5,
|
"fill": "#ff0000",
|
"fill-opacity": 0
|
});
|
|
//坐标(L,R,T,B)
|
this.coordinate.push(this.bbox.x, this.bbox.x + this.bbox.width, this.bbox.y, this.bbox.y + this.bbox.height);
|
|
|
//文字
|
if (!this.isLoad) {
|
this.text = this.paper.text(this.bbox.x + this.bbox.width / 2, this.bbox.y + this.bbox.height / 2, "任务" + number).attr({"font-size": "14px"});
|
} else {
|
this.text = this.paper.text(this.bbox.x + this.bbox.width / 2, this.bbox.y + this.bbox.height / 2, this.options.text).attr({"font-size": "14px"});
|
}
|
|
|
//中心点坐标
|
this.centerpoint = [this.bbox.x + this.bbox.width / 2, this.bbox.y + this.bbox.height / 2];
|
|
//根据中心点和宽度高度得到四个顶点 //定点开始顺时针
|
this.fourpoint = [{"x": this.x, "y": this.y}, {"x": this.x + this.w, "y": this.y}, {
|
"x": this.x + this.w,
|
"y": this.y + this.h
|
}, {"x": this.x, "y": this.y + this.h}];
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
//隐藏的中心竖线
|
this.centerLineY = this.paper.path("M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
//隐藏的中心横线
|
this.centerLineX = this.paper.path("M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
|
this.ccelement = this.paper.circle(this.centerpoint[0], this.centerpoint[1], 2).attr({
|
"fill": "#ff0000",
|
"stroke": "ff0000"
|
}).hide(); //圆心
|
|
if (!this.isLoad) {
|
//添加父元素
|
this.addParent();
|
}
|
|
|
var _that = this;
|
if (this.completeState == 0) {
|
//方块的外框点击
|
this.elementbox.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
//小菜单
|
$(".right").css({
|
"left": _that.x + _that.w + 10 - _that.flow.getScrollx(),
|
"top": _that.y + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
|
//_that.$elementctrl1.hide();
|
//_that.$elementctrl4.hide();
|
|
_that.selected = true; //选中元素
|
_that.elementbox.show();
|
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
_that.setText(wenbenid);
|
}
|
_that.text.show();
|
|
}
|
|
});
|
|
//方块的外框双击
|
this.elementbox.dblclick(function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var tvalue = _that.text.attr("text");
|
$(".taskinput input").val(tvalue);
|
$(".taskinput input").attr("wenbenid", _that.id);
|
//显示文本框
|
$(".taskinput").css({
|
"left": _that.x - _that.flow.getScrollx(),
|
"top": (_that.y + _that.h / 2 - 10 + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()),
|
"width": _that.w - 2
|
});
|
_that.selected = true;
|
//文本框本身隐藏
|
_that.text.hide();
|
}
|
|
});
|
//方块的单击
|
this.element.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
_that.elementbox.show();
|
$(".right").css({
|
"left": _that.x + _that.w + 10 - _that.flow.getScrollx(),
|
"top": _that.y + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
//显示控制点
|
//_that.$elementctrl1.show();
|
//_that.$elementctrl4.show();
|
|
}
|
});
|
|
|
//方块任务节点的外层框拖动
|
var weiyiX = 0;
|
var weiyiY = 0;
|
var dropStatus = false;
|
var startX = 0;
|
var startY = 0;
|
var bpz = null;
|
var bpzcenter = null;
|
var startpointx = 0;
|
var startpointy = 0;
|
this.elementbox.drag(function (tx, ty, x, y, e) { //move中
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
|
dropStatus = true;
|
//限制去菜单那块
|
if (e.clientX < (134 + _that.flow._DEFALUTS_.dx + weiyiX)) {
|
e.clientX = 134 + _that.flow._DEFALUTS_.dx;
|
dropStatus = false;
|
return;
|
}
|
//限制画布最右侧边界
|
if (e.clientX > _that.flow._DEFALUTS_.width - (_that.w + _that.bmargin * 2) + _that.flow._DEFALUTS_.dx + weiyiX) {
|
dropStatus = false;
|
return;
|
}
|
|
//限制头部
|
if (e.clientY < (0 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
e.clientY = 0 + _that.flow._DEFALUTS_.dy;
|
dropStatus = false;
|
return;
|
}
|
|
//限制画布底部边界
|
if (e.clientY > (0 + _that.flow._DEFALUTS_.height - (_that.h + _that.bmargin * 2) + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
dropStatus = false;
|
return;
|
}
|
|
this.attr({
|
"x": e.clientX - _that.flow._DEFALUTS_.dx - weiyiX,
|
"y": e.clientY - _that.flow._DEFALUTS_.dy - weiyiY
|
});
|
|
|
//碰撞检测
|
var L = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var R = L + _that.w;
|
var T = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
var B = T + _that.h;
|
bpz = _that.flow.collision(_that, L, R, T, B); //被碰撞
|
if (bpz != null && bpz.type != "subProcess") {//1.当碰到元素并且元素不是子流程 不可落下
|
dropStatus = false;
|
}
|
|
bpzcenter = _that.flow.collisionCenterLine(_that, L, R, T, B); //中心线匹配
|
}
|
|
|
}, function (x, y, e) { //move开始
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
weiyiX = e.clientX - _that.flow._DEFALUTS_.dx - _that.bbox.x + _that.bmargin; //offsetX，不需要减1
|
weiyiY = e.clientY - _that.flow._DEFALUTS_.dy - _that.bbox.y + _that.bmargin; //offsetY，不需要减32
|
startX = _that.bbox.x - _that.bmargin;
|
startY = _that.bbox.y - _that.bmargin;
|
|
startpointx = e.clientX;
|
startpointy = e.clientY;
|
|
|
}, function (e) {//move结束
|
|
var endpointx = e.clientX;
|
var endpointy = e.clientY;
|
if (Math.abs(endpointx - startpointx) < 2 && Math.abs(endpointy - startpointy) < 2) {//阻止点击就移动
|
dropStatus = false;
|
}
|
|
if (dropStatus == true) {
|
var x = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var y = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
//判断是否进入子流程
|
if (bpz && bpz.type == "subProcess") {
|
//说明进入在子流程中
|
if (_that.parentElem == null || _that.parentElem.id != bpz.id) {
|
//表示新的入到一个子流程中
|
if (_that.linein.length > 0 || _that.lineout.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
$.messager.confirm('再次确认', '该任务节点进入子流程会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
_that.render(x, y, bpzcenter);
|
}
|
})
|
} else {
|
//没有线段
|
_that.render(x, y, bpzcenter);
|
}
|
}
|
} else if (bpz == null) {
|
if (_that.parentElem != null) {
|
//原来在小空间中
|
if (_that.linein.length > 0 || _that.lineout.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
var L = x;
|
var R = L + _that.w;
|
var T = y;
|
var B = T + _that.h;
|
//判断当前是否已经出了小空间
|
if (!_that.comeInSubProcess2(L, R, T, B)) {
|
$.messager.confirm('再次确认', '该任务节点原属于子流程空间，进入父空间时会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
|
_that.render(x, y, bpzcenter);
|
}
|
})
|
} else {
|
//没有出小空间
|
|
_that.render(x, y, bpzcenter);
|
}
|
} else {
|
//没有线段
|
|
_that.render(x, y, bpzcenter);
|
}
|
} else {
|
//原来在大空间中
|
_that.render(x, y, bpzcenter);
|
}
|
}
|
|
} else {
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
}
|
|
dropStatus = false;
|
return false;
|
|
});
|
} else if (this.completeState == 1 || this.completeState == 2) {
|
this.element.mouseover(function (e) {
|
$("[id*=divshow_]").hide();
|
var wheight = e.view.innerHeight; //屏幕大小
|
var wheight2 = Math.floor(wheight / 2);//屏幕大小的一半
|
var name = "divshow_" + _that.id;
|
if ($("#" + name).length == 0) {
|
//创建
|
if (e.pageY <= wheight2) {
|
var str = "<div id='" + name + "' class='show' style='left:" + (e.pageX + 0) + "px; top:" + (e.pageY + 0) + "px;'><p class='title'>" + _that.getText() + "</p><div class='con' style='max-height:" + wheight2 + "px'>";
|
} else {
|
var str = "<div id='" + name + "' class='show' style='left:" + (e.pageX + 0) + "px; bottom:" + (wheight - e.pageY + 0) + "px;'><p class='title'>" + _that.getText() + "</p><div class='con' style='max-height:" + wheight2 + "px'>";
|
}
|
|
if (_that.completeState == 1) {
|
|
str += "<h4 class='yi'>已办理</h4>";
|
if (_that.content.activityUsers && _that.content.activityUsers.length > 0) {
|
|
$.each(_that.content.activityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>办理时间</strong><span>" + el.time + "</span></p><p><strong>办理意见</strong><span>" + el.advice + "</span></p>";
|
})
|
}
|
} else if (_that.completeState == 2) {
|
|
if (_that.content.waitActivityUsers && _that.content.waitActivityUsers.length > 0) {
|
str += "<h4 class='zhengzai'>正在办理</h4>";
|
$.each(_that.content.waitActivityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>开始时间</strong><span>" + el.time + "</span></p>";
|
})
|
}
|
|
if (_that.content.activityUsers && _that.content.activityUsers.length > 0) {
|
str += "<h4 class='yi'>已办理</h4>";
|
$.each(_that.content.activityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>办理时间</strong><span>" + el.time + "</span></p><p><strong>办理意见</strong><span>" + el.advice + "</span></p>";
|
})
|
}
|
|
|
}
|
|
str += "</div></div>";
|
|
$("#" + _that.flow._DEFALUTS_.id).append(str);
|
} else {
|
|
if (e.pageY <= wheight2) {
|
$("#" + name).css({"left": (e.pageX + 0), "top": (e.pageY + 0), "bottom": "auto"}).show();
|
$("#" + name).find(".con").css({"maxHeight": wheight2});
|
} else {
|
$("#" + name).css({
|
"left": (e.pageX + 0),
|
"bottom": (wheight - e.pageY + 0),
|
"top": "auto"
|
}).show();
|
$("#" + name).find(".con").css({"maxHeight": wheight2});
|
}
|
|
}
|
|
|
})
|
|
}
|
|
/* 控制点4的移动
|
//控制点4的移动
|
var ctrl4startx = 0;
|
var ctrl4starty = 0;
|
var ctrl4oldstartx = 0;
|
var ctrl4oldstarty = 0;
|
|
this.$elementctrl4.draggable({
|
cursor: "se-resize",
|
revert: true,
|
onStartDrag: function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
ctrl4oldstartx = ctrl4startx = e.clientX;
|
ctrl4oldstarty = ctrl4starty = e.clientY;
|
}
|
},
|
onDrag: function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var elementboxbox = _that.elementbox.getBBox();
|
|
var width = elementboxbox.width;
|
var height = elementboxbox.height;
|
var ctrl4dragpointx = e.clientX;
|
var ctrl4dragpointy = e.clientY;
|
width = width + ctrl4dragpointx - ctrl4startx;
|
height = height + ctrl4dragpointy - ctrl4starty;
|
|
_that.elementbox.attr({ "width": width, "height": height });
|
ctrl4startx = ctrl4dragpointx;
|
ctrl4starty = ctrl4dragpointy;
|
}
|
|
},
|
onStopDrag: function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var ctrl4endx = e.clientX;
|
var ctrl4endy = e.clientY;
|
var dwidth = ctrl4endx - ctrl4oldstartx;
|
var dheight = ctrl4endy - ctrl4oldstarty;
|
|
var elementWidth = _that.element.attr("width");
|
var elementHeight = _that.element.attr("height");
|
_that.element.attr({ "width": elementWidth + dwidth, "height": elementHeight + dheight });
|
|
_that.w = elementWidth + dwidth;
|
_that.h = elementHeight + dheight;
|
|
_that.render(_that.bbox.x,_that.bbox.y,null);
|
|
}
|
}
|
|
})
|
*/
|
/* 控制点1的移动(移动的是left，top，width，height)
|
// //控制点1的移动(移动的是left，top，width，height)
|
// var ctrl1startx = 0;
|
// var ctrl1starty = 0;
|
// var ctrl1oldstartx = 0;
|
// var ctrl1oldstarty = 0;
|
// var ctr1tx = 0;
|
// var ctr1ty = 0;
|
// this.$elementctrl1.draggable({
|
// cursor: "nw-resize",
|
// revert: true,
|
// onStartDrag: function (e) {
|
// ctrl1oldstartx = ctrl1startx = e.clientX;
|
// ctrl1oldstarty = ctrl1starty = e.clientY;
|
// var oldleft = $(this).css("left");
|
// var oldtop = $(this).css("top");
|
// ctr1tx = e.clientX - parseFloat(oldleft);
|
// ctr1ty = e.clientY - parseFloat(oldtop);
|
|
// },
|
// onDrag: function (e) {
|
// var elementboxbox = _that.elementbox.getBBox();
|
// var width = elementboxbox.width;
|
// var height = elementboxbox.height;
|
|
// var ctrl1dragpointx = e.clientX;
|
// var ctrl1dragpointy = e.clientY;
|
// width = width - (ctrl1dragpointx - ctrl1startx);
|
// height = height - (ctrl1dragpointy - ctrl1starty);
|
// var ctr1left = e.clientX - ctr1tx - _that.flow._DEFALUTS_.dx + 10;
|
// var ctr1top = e.clientY - ctr1ty - _that.flow._DEFALUTS_.dy + 10;
|
// _that.elementbox.attr({ "x": ctr1left, "y": ctr1top, "width": width, "height": height });
|
// ctrl1startx = ctrl1dragpointx;
|
// ctrl1starty = ctrl1dragpointy;
|
|
// },
|
// onStopDrag: function (e) {
|
// var ctrl1endx = e.clientX;
|
// var ctrl1endy = e.clientY;
|
// var x = ctrl1endx - ctr1tx - _that.flow._DEFALUTS_.dx + _that.bmargin + 10;
|
// var y = ctrl1endy - ctr1ty - _that.flow._DEFALUTS_.dy + _that.bmargin + 10;
|
|
// var dwidth = -(ctrl1endx - ctrl1oldstartx);
|
// var dheight = -(ctrl1endy - ctrl1oldstarty);
|
|
// var elementWidth = _that.element.attr("width");
|
// var elementHeight = _that.element.attr("height");
|
// //元素
|
// _that.element.attr({ "x": x, "y": y, "width": elementWidth + dwidth, "height": elementHeight + dheight });
|
// //属性
|
// _that.x = x;
|
// _that.y = y;
|
// _that.w = elementWidth + dwidth;
|
// _that.h = elementHeight + dheight;
|
|
// _that.render(x,y,null);
|
|
// }
|
|
|
// })
|
*/
|
|
},
|
render: function (x, y, bpzcenter) { //userTask的渲染
|
|
if (bpzcenter != null) {
|
if (bpzcenter[0] != null && bpzcenter[1] == null) {
|
//y轴吸附，x轴不吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
x = bpzcenter[0].cx - this.w / 2;
|
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
x = bpzcenter[0].x + bpzcenter[0].w / 2 - this.w / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
}
|
|
} else if (bpzcenter[0] == null && bpzcenter[1] != null) {
|
|
//x轴吸附，y轴不吸附
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
y = bpzcenter[1].cy - this.h / 2;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
y = bpzcenter[1].y + bpzcenter[1].h / 2 - this.h / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
}
|
|
} else if (bpzcenter[0] != null && bpzcenter[1] != null) {
|
//y轴吸附，x轴吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
x = bpzcenter[0].cx - this.w / 2;
|
|
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
x = bpzcenter[0].x + bpzcenter[0].w / 2 - this.w / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
|
}
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
y = bpzcenter[1].cy - this.h / 2;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
y = bpzcenter[1].y + bpzcenter[1].h / 2 - this.h / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
}
|
|
}
|
}
|
|
this.x = x;
|
this.y = y;
|
this.element.attr({"x": x, "y": y});
|
this.bbox = this.element.getBBox();
|
|
this.text.attr({"x": this.bbox.x + this.bbox.width / 2, "y": this.bbox.y + this.bbox.height / 2})
|
//扩大的外框
|
this.elementbox.attr({"x": this.bbox.x - this.bmargin, "y": this.bbox.y - this.bmargin});
|
|
//修改坐标(L,R,T,B)
|
this.coordinate[0] = this.bbox.x;
|
this.coordinate[1] = this.bbox.x + this.bbox.width;
|
this.coordinate[2] = this.bbox.y;
|
this.coordinate[3] = this.bbox.y + this.bbox.height;
|
|
this.centerpoint = [this.bbox.x + this.w / 2, this.bbox.y + this.h / 2];
|
//圆心
|
this.ccelement.attr({"cx": this.centerpoint[0], "cy": this.centerpoint[1]});
|
|
//根据中心点和宽度高度得到四个顶点 //定点开始顺时针
|
this.fourpoint = [{"x": this.x, "y": this.y}, {"x": this.x + this.w, "y": this.y}, {
|
"x": this.x + this.w,
|
"y": this.y + this.h
|
}, {"x": this.x, "y": this.y + this.h}];
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate = [];
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
//移动隐藏的中心竖线
|
this.centerLineY.attr("path", "M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height);
|
|
//移动隐藏的中心横线
|
this.centerLineX.attr("path", "M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]);
|
|
//控制点
|
//this.$elementctrl1.css({ "left": (this.bbox.x - this.bmargin - 10), "top": (this.bbox.y - this.bmargin - 10) });
|
|
//this.$elementctrl4.css({ "left": (this.bbox.x - this.bmargin + this.bbox.width + 8), "top": (this.bbox.y - this.bmargin + this.bbox.height + 8) });
|
|
// //是否有父元素
|
// var parent = this.addParent();
|
// if (parent != null) {
|
// //目前进入到子流程中
|
// parent.elementbox.attr({ "stroke": "#000000", "stroke-width": 0.5 });
|
// } else {
|
// //在子流程外
|
// if (this.parentElem) {
|
// this.parentElem.removeSubElement(this);
|
// this.parentElem = null;
|
// //表示新加入的到某个，则原来子流程中的所有的线段需要移除
|
// this.removeLine();
|
// }
|
// }
|
|
//父元素处理
|
var parent = this.comeInSubProcess();
|
if (parent != null) {
|
//目前进入到子流程中
|
parent.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5});
|
}
|
//无论是否有父元素，都需要进入这个方法
|
this.addParent(parent);
|
|
|
var _that = this;
|
//所有出去的点，因为坐标变了，需要重绘
|
$.each(this.lineout, function (index, lineElem) {
|
if (!lineElem.self) { //不是指向自身的点除外
|
lineElem.redrawStart(_that.bbox.cx, _that.bbox.cy);
|
} else {
|
//是指向自身的线，需要和节点一起变化，重绘
|
lineElem.renderMoveSelf();
|
}
|
|
});
|
|
//所有进入的点，因为坐标变了，需要重绘
|
$.each(this.linein, function (index, lineElem) {
|
//得到点
|
if (!lineElem.self) {
|
lineElem.redrawEnd(_that.bbox.cx, _that.bbox.cy);
|
}
|
});
|
|
|
},
|
unSelect: function () {//非选中状态
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
|
if (this.selected == true) {
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
this.setText(wenbenid);
|
}
|
this.text.show();
|
}
|
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
|
//圆心
|
this.ccelement.hide();
|
//外框隐藏
|
this.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5}).hide();
|
//中心线隐藏
|
this.centerLineX.hide();
|
this.centerLineY.hide();
|
//this.$elementctrl1.hide();
|
//this.$elementctrl4.hide();
|
this.selected = false;
|
|
//完成情况的显示
|
if (this.completeState != 0) {
|
var name = "divshow_" + this.id;
|
$("#" + name).hide();
|
}
|
},
|
|
setText: function (wenbenid) {
|
//得到文本框的值，重新赋值给text //Raphaël\nkicks\nbutt!
|
var tvalue = $(".taskinput input").val();
|
var temp = tvalue;
|
if ($.trim(tvalue) != "" && wenbenid == this.id) {
|
var zishu = Math.floor(this.w / 14); //一行可显示的中文字数
|
var hangshu = parseInt(tvalue.length / zishu) + 1; //行数
|
var arr = [];
|
if (tvalue.length > zishu) {
|
for (var j = 0; j < hangshu; j++) {
|
for (var i = j * zishu; i < (j + 1) * zishu; i = i + 1) {
|
if (tvalue[i]) {
|
if (arr[j]) {
|
arr[j] += tvalue[i];
|
} else {
|
arr[j] = tvalue[i];
|
}
|
}
|
}
|
}
|
temp = arr.join('\n');
|
}
|
|
|
this.text.attr({"text": temp});
|
$(".taskinput input").val("");//清空
|
}
|
},
|
removeElement: function () {
|
this.element.remove();
|
this.centerLineX.remove();
|
this.centerLineY.remove();
|
this.elementbox.remove();
|
//this.$elementctrl1.remove();
|
//this.$elementctrl4.remove();
|
this.text.remove();
|
this.ccelement.remove();
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
//文本框回归
|
$(".taskinput").css({"left": -100, "top": -100});
|
//父元素
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
}
|
|
//移除相关的线
|
var tempoutlines = [];
|
$.each(this.lineout, function (index, line) {
|
tempoutlines.push(line);
|
});
|
$.each(tempoutlines, function (index, line) {
|
line && line.removeElement();
|
});
|
|
var tempinlines = [];
|
$.each(this.linein, function (index, line) {
|
tempinlines.push(line);
|
});
|
$.each(tempinlines, function (index, line) {
|
line && line.removeElement();
|
});
|
|
|
},
|
removeOutLine: function (line) {
|
var _that = this;
|
$.each(this.lineout, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.lineout.splice(index, 1);
|
}
|
})
|
},
|
removeInLine: function (line) {
|
var _that = this;
|
$.each(this.linein, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.linein.splice(index, 1);
|
}
|
})
|
},
|
comeInSubProcess: function () { //判断是否在子流程里面
|
var parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
return parent;
|
},
|
comeInSubProcess2: function (L, R, T, B) {//判断是否在子流程里面
|
var parent = this.flow.collisionSubProcess(L, R, T, B); //被碰撞
|
return parent;
|
},
|
|
addParent: function (parent) {//在子流程里的处理
|
//判断落点是否在子流程内，如果落在子流程内，则需要修改parentElem
|
if (!parent) {
|
parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
}
|
if (parent != null) {
|
|
var ids = [];
|
$.each(parent.subElement, function (index, elem) {
|
ids.push(elem.id);
|
})
|
if ($.inArray(this.id, ids) == -1) {
|
this.parentElem = parent;
|
parent.subElement.push(this);
|
//表示新加入的到某个节点上，则原来的所有的线段需要移除
|
//移除相关的线
|
this.removeLine();
|
//节点置前
|
//this.element.toFront();
|
this.elementbox.toFront();
|
|
}
|
} else {//没有父元素
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
//表示新加入的到其他的，则原来子流程中的所有的线段需要移除
|
this.removeLine();
|
}
|
}
|
//return parent;
|
},
|
getText: function () {
|
return this.text.attr("text");
|
},
|
removeLine: function () { //删除线段
|
|
var tempoutlines = [];
|
$.each(this.lineout, function (index, line) {
|
if (!line.self) {
|
tempoutlines.push(line);
|
}
|
});
|
$.each(tempoutlines, function (index, line) {
|
line && line.removeElement();
|
if (line) {
|
delete this.flow.alllines[line.id]; //删除线元素
|
}
|
});
|
|
var tempinlines = [];
|
$.each(this.linein, function (index, line) {
|
if (!line.self) {
|
tempinlines.push(line);
|
}
|
});
|
$.each(tempinlines, function (index, line) {
|
line && line.removeElement();
|
if (line) {
|
delete this.flow.alllines[line.id]; //删除线元素
|
}
|
});
|
|
}
|
|
|
});
|
|
function Line(flow, options) {
|
this.flow = flow; //FlowDesigner类的实例
|
this.paper = flow.paper; //画布rapheal
|
this.options = options;
|
this.type = "line";
|
this.selected = false;
|
this.id = options.id ? options.id : "";
|
this.isLoad = options.isLoad ? true : false; //是否是加载的元素
|
this.linetype = options.linetype ? options.linetype : 0;
|
|
//元素
|
this.x1 = options.x1; //起点坐标x
|
this.y1 = options.y1;//起点坐标y
|
this.x2 = options.x2;//终点坐标x
|
this.y2 = options.y2;//终点坐标y
|
|
this.nodestart = options.nodestart;
|
this.nodeend = options.nodeend;
|
this.self = options.self; //起点和终点是否是同一个
|
//添加节点
|
this.linestr = ""; //线的字符串
|
this.line = null;//线
|
this.bbox = null; //线的外框
|
this.linebox = null; //线的可见外框
|
this.text = null; //线的文字
|
this.textPosWord = 0; //线上的文字向左偏移字的个数
|
|
this.linepoints = []; //线上的小圆点
|
this.linepointsxy = []; //线上的线段集合
|
|
this.content = {}; //线段数据
|
|
}
|
|
Line.prototype = $.extend(Line.prototype, {
|
init: function () {
|
var linenumber = this.flow.createLineNum();
|
var tempName = (new Date()).getTime();
|
if (!this.isLoad) {
|
this.id = "line_" + tempName;
|
}
|
|
//线
|
if (!this.self) {
|
if (!this.isLoad) {
|
//如果类型是双向,则需要画双箭头
|
if (this.linetype == 1) {
|
var arrowPos = computeArrowPos(this.x2, this.y2, this.x1, this.y1);
|
var x1a = arrowPos[0][0];
|
var y1a = arrowPos[0][1];
|
var x1b = arrowPos[1][0];
|
var y1b = arrowPos[1][1];
|
|
var result = ["M", this.x1, this.y1, "L", x1a, y1a, "M", this.x1, this.y1, "L", x1b, y1b, "M", this.x1, this.y1, "L", this.x2, this.y2];
|
|
this.linestr = result.join(",");
|
} else {
|
this.linestr = "M" + this.x1 + "," + this.y1 + "L" + this.x2 + "," + this.y2;
|
}
|
} else {
|
this.linestr = this.options.linestr;
|
}
|
|
this.line = this.paper.path(this.linestr).attr({
|
"stroke-width": 2,
|
"stroke": "#000000",
|
"arrow-end": "open-wide",
|
"cursor": "pointer",
|
"stroke-linecap": "round",
|
"stroke-linejoin": "round"
|
});
|
|
|
this.bbox = this.line.getBBox();
|
|
//可见外框
|
this.linebox = this.paper.rect(this.bbox.x, this.bbox.y, this.bbox.width, this.bbox.height).attr({
|
"stroke-dasharray": "- ",
|
"stroke": "#000000",
|
"stroke-width": 0.5
|
}).hide();
|
//中间的圆点
|
if (!this.isLoad) {
|
var centercircle = new SmallCircle(this.flow, this, {"cx": this.bbox.cx, "cy": this.bbox.cy});
|
centercircle.init();
|
this.linepoints.push(centercircle);
|
this.linestr = "M" + this.x1 + "," + this.y1 + "L" + this.bbox.cx + "," + this.bbox.cy + "L" + this.x2 + "," + this.y2;
|
this.linepointsxy = Raphael.parsePathString(this.linestr);
|
} else {
|
this.linepointsxy = Raphael.parsePathString(this.linestr);
|
|
//如果类型是双向,则需要删除前面几个节点
|
if (this.linetype == 1) {
|
this.linepointsxy.splice(0, 4);
|
}
|
|
//中间小圆点
|
for (var i = 1; i < this.linepointsxy.length - 1; i++) {
|
var centercircle = new SmallCircle(this.flow, this, {
|
"cx": this.linepointsxy[i][1],
|
"cy": this.linepointsxy[i][2]
|
});
|
centercircle.init();
|
this.linepoints.push(centercircle);
|
}
|
}
|
|
|
//文字 中心节点
|
if (!this.isLoad) {
|
this.text = this.paper.text(this.bbox.cx + 12, this.bbox.cy - 6, "线" + linenumber).attr({"font-size": "12px"}).toBack();
|
|
} else {
|
|
//第一个小圆点的位置
|
if (this.linepoints.length > 0) {
|
this.text = this.paper.text(this.linepoints[0].cx + 12, this.linepoints[0].cy - 6, this.options.text).attr({"font-size": "12px"}).toBack();
|
} else {
|
this.text = this.paper.text(this.bbox.cx + 12, this.bbox.cy - 6, this.options.text).attr({"font-size": "12px"}).toBack();
|
}
|
|
}
|
|
} else {
|
if (!this.isLoad) {
|
//开始节点自身线
|
var x3 = this.x1;
|
var y3 = this.y1 + this.nodestart.h * 1 / 4;
|
var x4 = x3 - this.nodestart.w * 3 / 4;
|
var y4 = y3;
|
var x5 = x4;
|
var y5 = y4 - this.nodestart.h * 3 / 4;
|
|
|
this.linestr = "M" + this.x1 + "," + this.y1 + "L" + x3 + "," + y3 + "L" + x4 + "," + y4 + "L" + x5 + "," + y5 + "L" + this.x2 + "," + this.y2;
|
} else {
|
this.linestr = this.options.linestr;
|
}
|
|
this.line = this.paper.path(this.linestr).attr({
|
"stroke-width": 2,
|
"stroke": "#000000",
|
"arrow-end": "open-wide",
|
"cursor": "pointer",
|
"stroke-linecap": "round",
|
"stroke-linejoin": "round"
|
});
|
|
//外框
|
this.bbox = this.line.getBBox();
|
|
//可见外框
|
this.linebox = this.paper.rect(this.bbox.x, this.bbox.y, this.bbox.width, this.bbox.height).attr({
|
"stroke-dasharray": "- ",
|
"stroke": "#000000",
|
"stroke-width": 0.5
|
}).hide();
|
this.linepointsxy = Raphael.parsePathString(this.linestr);
|
this.redrawSmallCircle(false);
|
|
//文字 第一个小圆点
|
if (!this.isLoad) {
|
this.text = this.paper.text(x3 + 12, y3, "线" + linenumber).attr({"font-size": "12px"}).toBack();
|
} else {
|
this.text = this.paper.text(x3 + 12, y3, this.options.text).attr({"font-size": "12px"}).toBack();
|
}
|
|
}
|
|
//开始节点增加出去的线
|
this.nodestart && this.nodestart.lineout.push(this);
|
//目标节点增加进入的线
|
this.nodeend && this.nodeend.linein.push(this);
|
|
|
var _that = this;
|
if (this.flow._DEFALUTS_.mode == "design") {
|
//线的点击
|
this.line.click(function (event) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
_that.linebox.show();
|
//小菜单
|
$(".right").css({
|
"left": _that.bbox.x + _that.bbox.width + 10 - _that.flow.getScrollx(),
|
"top": _that.bbox.y + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").hide();
|
//显示线上的圆点
|
$.each(_that.linepoints, function (index, circle) {
|
circle.element.show();
|
|
});
|
//显示两头节点上的圆心
|
_that.nodestart && _that.nodestart.ccelement.show();
|
_that.nodeend && _that.nodeend.ccelement.show();
|
|
_that.selected = true; //选中元素
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
_that.setText(wenbenid);
|
}
|
_that.text.show();
|
}
|
});
|
|
//线的双击
|
this.line.dblclick(function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var tvalue = _that.text.attr("text");
|
$(".taskinput input").val(tvalue);
|
$(".taskinput input").attr("wenbenid", _that.id);
|
//显示文本框
|
//线的宽度可能很细，需要取Max
|
$(".taskinput").css({
|
"left": _that.bbox.cx - 15 - _that.flow.getScrollx(),
|
"top": (_that.bbox.cy - 10 + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()),
|
"width": Math.max(_that.bbox.width, 60)
|
});
|
_that.selected = true;
|
//文本框本身隐藏
|
_that.text.hide();
|
}
|
|
});
|
|
|
this.line.mouseover(function () {
|
//只有当lining状态为true时，使用
|
if (_that.flow.addPoint == true || _that.flow.subtractPoint == true) {
|
//_that.linebox.show();
|
$.each(_that.linepoints, function (index, circle) {
|
circle.element.show();
|
});
|
}
|
|
});
|
|
}
|
|
|
},
|
unSelect: function () { //非选中状态
|
|
//可见外框隐藏
|
this.linebox.hide();
|
//所有的线上的圆不显示
|
$.each(this.linepoints, function (index, circle) {
|
|
circle.element.hide();
|
});
|
//文本框
|
if (this.selected == true) {
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid && wenbenid == this.id) {
|
var value = $(".taskinput input").val();
|
value = $.trim(value);
|
if (value) {
|
this.setText(wenbenid);
|
} else {
|
this.setNullText();
|
}
|
|
$(".taskinput input").attr("wenbenid", "");
|
}
|
this.text.show();
|
}
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
this.selected = false;
|
|
},
|
removeElement: function () {
|
this.line.remove();
|
this.linebox.remove();
|
this.text.remove();
|
//文本框回归
|
$(".taskinput").css({"left": -100, "top": -100});
|
|
//小圆点
|
$.each(this.linepoints, function (index, circle) {
|
circle.removeElement();
|
});
|
|
this.nodestart && this.nodestart.removeOutLine(this);
|
this.nodeend && this.nodeend.removeInLine(this);
|
//
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
|
|
},
|
redrawStart: function (startcx, startcy) { //开始坐标修改后，重绘
|
|
//重写线段
|
this.linestr = this.combPathFromStart(startcx, startcy); //找到合适的下一个点，作为目标点，做连线
|
this.line.attr("path", this.linestr);
|
|
this.bbox = this.line.getBBox();
|
//外框
|
this.linebox.attr({
|
"x": this.bbox.x,
|
"y": this.bbox.y,
|
"width": this.bbox.width,
|
"height": this.bbox.height
|
});
|
//this.linestr = this.combPath();
|
//console.log("整理好后str", this.linestr);
|
//根据坐标点重新渲染小圆点
|
this.redrawSmallCircle(false);
|
//重绘文本位置
|
this.renderText();
|
|
},
|
redrawEnd: function (endcx, endcy) {
|
|
|
//重写线段,endcx,endcy是中心点调整,重新计算开始坐标，需要得到箭头的坐标，如果中间点还在一条直线上，则还需要计算新的中间点坐标
|
|
this.linestr = this.combPathFromEnd(endcx, endcy);
|
//console.log(this.linestr);
|
this.line.attr("path", this.linestr);
|
|
this.bbox = this.line.getBBox();
|
//外框
|
this.linebox.attr({
|
"x": this.bbox.x,
|
"y": this.bbox.y,
|
"width": this.bbox.width,
|
"height": this.bbox.height
|
});
|
//this.linestr = this.combPath();
|
//console.log("整理好后str", this.linestr);
|
//根据坐标点重新渲染小圆点
|
this.redrawSmallCircle(false);
|
//重绘文本位置
|
this.renderText();
|
},
|
linePointsDrag: function () {
|
//线上的点拖动
|
var _that = this;
|
$.each(this.linepoints, function (index, elem) {
|
var circlecx = 0;
|
var circlecy = 0;
|
var circlepxindex = 0;
|
elem.drag(function (tx, ty, x, y, e) { //拖动中
|
|
_lineCircleMove(tx, ty, x, y, e, _that, circlecx, circlecy, this, circlepxindex);
|
},
|
function (x, y, e) { //开始
|
var bbox = this.getBBox();
|
//得到圆点的中心点坐标
|
circlecx = bbox.cx;
|
circlecy = bbox.cy;
|
circlepxindex = _lineCircleStart(x, y, e, _that, circlecx, circlecy);
|
//console.log(circlepxindex);
|
}, function (e) { //结束拖动
|
|
_lineCircleEnd(e, _that);
|
});
|
});
|
},
|
|
combPath: function () { //通过线段集合重新组合path
|
var path = "";
|
$.each(this.linepointsxy, function (index, elem) {
|
path += elem[0] + elem[1] + "," + elem[2];
|
})
|
return path;
|
},
|
combPathFromStart: function (nsx, nsy) { //通过线段集合重新组合path,从start出发
|
var path = "";
|
//判断相邻的两个点连成的直线，第三个点是否在上面，如果在，则把第二个点去掉，再判断第四个点是否在上面，如果在则把第三个点去掉，如果不在，则到第三个点位置。
|
//这个方法就是判断到两个点直线直到转折为止。
|
var temp = [];
|
temp.push(["M", nsx, nsy]); //这个赋值只是个占位，后面还得改下
|
var x1 = this.linepointsxy[0][1];
|
var y1 = this.linepointsxy[0][2];
|
var x2 = this.linepointsxy[1][1];
|
var y2 = this.linepointsxy[1][2];
|
var zhixianindex = 1;
|
var _that = this;
|
var modifyNodes = []; //需要修改的小圆点的坐标
|
var modifyNodesIndexs = [];//需要修改的小圆点的位置
|
var length = this.linepointsxy.length;
|
$.each(this.linepointsxy, function (index, elem) {
|
|
if (index > 1) {
|
if (floatToFix4(x1) != floatToFix4(x2)) {
|
var y = _that.flow.getYLinePointFormula(x1, y1, x2, y2, elem[1]);
|
//console.log(y,elem[2])
|
if (floatToFix4(y) == floatToFix4(elem[2])) {
|
zhixianindex = index;
|
modifyNodes.push(_that.linepointsxy[index - 1]);
|
modifyNodesIndexs.push(index - 1);
|
} else {
|
return false;
|
}
|
|
} else {
|
var x = _that.flow.getXLinePointFormula(x1, y1, x2, y2, elem[2]);
|
//console.log(x,elem[1])
|
if (floatToFix4(x) == floatToFix4(elem[1])) {
|
zhixianindex = index;
|
modifyNodes.push(_that.linepointsxy[index - 1]);
|
modifyNodesIndexs.push(index - 1);
|
} else {
|
return false;
|
}
|
}
|
}
|
|
});
|
|
//zhixianindex的值当等于最后一个节点时，重新计算箭头节点
|
if (zhixianindex == length - 1) {
|
if (this.nodeend.type == "end") {
|
var arrow = this.flow.getCircleArrowPosXY(this.nodestart, this.nodeend);
|
} else if (this.nodeend.type == "gateway") {
|
var arrow = this.flow.getGatewayArrowPosXY(this.nodestart, this.nodeend);
|
} else if (this.nodeend.type == "userTask" || this.nodeend.type == "subProcess") {
|
var arrow = this.flow.getArrowPosXY(this.nodestart, this.nodeend);
|
}
|
|
this.linepointsxy[length - 1][1] = arrow.x;
|
this.linepointsxy[length - 1][2] = arrow.y;
|
|
}
|
if (zhixianindex == length - 1) {
|
var tempEnd = this.nodeend;
|
} else {
|
tempEnd = this.linepoints[zhixianindex - 1];
|
}
|
|
//重新计算开始节点
|
var startPoint = flowDesigner.getStartPosXY(this.nodestart, tempEnd);
|
this.x1 = startPoint.x;
|
this.y1 = startPoint.y;
|
this.linepointsxy[0][1] = startPoint.x;
|
this.linepointsxy[0][2] = startPoint.y;
|
|
temp[0] = ["M", startPoint.x, startPoint.y];
|
|
$.each(this.linepointsxy, function (index, elem) {
|
if (index >= zhixianindex) {
|
temp.push(elem);
|
}
|
});
|
|
if (modifyNodes.length > 0) {
|
//根据坐标修改小圆点
|
this.modifyLineCircle(modifyNodes, modifyNodesIndexs, startPoint, {"x": temp[1][1], "y": temp[1][2]});
|
}
|
|
//如果节点类型是1,则表明是双向,需要画双箭头
|
if (this.content && this.content.nodeType && this.content.nodeType == "1") {
|
var arrowPos = computeArrowPos(temp[1][1], temp[1][2], temp[0][1], temp[0][2]);
|
var x1a = arrowPos[0][0];
|
var y1a = arrowPos[0][1];
|
var x1b = arrowPos[1][0];
|
var y1b = arrowPos[1][1];
|
|
temp.splice(1, 0, ["L", x1a, y1a], ["M", startPoint.x, startPoint.y], ["L", x1b, y1b], ["M", startPoint.x, startPoint.y]);
|
}
|
|
$.each(temp, function (index, elem) {
|
path += elem[0] + elem[1] + "," + elem[2];
|
});
|
|
return path;
|
},
|
|
combPathFromEnd: function (nex, ney) { //通过线段集合重新组合path,从end向上找出合适的出发点，和新的目的中心点连接，找出箭头点。
|
var path = "";
|
//判断相邻的两个点连成的直线，第三个点是否在上面，如果在，则把第二个点去掉，再判断第四个点是否在上面，如果在则把第三个点去掉，如果不在，则到第三个点位置。
|
//这个方法就是判断到两个点直线直到转折为止。
|
var temp = [];
|
var length = this.linepointsxy.length;
|
temp.push(["L", nex, ney]); //这个赋值只是个占位，最终箭头的nex和ney还是要计算获得
|
var x1 = this.linepointsxy[length - 1][1];
|
var y1 = this.linepointsxy[length - 1][2];
|
var x2 = this.linepointsxy[length - 2][1];
|
var y2 = this.linepointsxy[length - 2][2];
|
var zhixianindex = length - 2;
|
var _that = this;
|
var modifyNodes = []; //需要修改的小圆点的坐标
|
var modifyNodesIndexs = [];//需要修改的小圆点的位置
|
|
//console.log(_that.linepointsxy);
|
for (var i = length - 3; i >= 0; i--) {
|
//console.log(x1, y1, x2, y2, _that.linepointsxy[i][1]);
|
|
if (floatToFix4(x1) != floatToFix4(x2)) { //求y值时，会出现x1-x2为0的情况
|
var y = _that.flow.getYLinePointFormula(x1, y1, x2, y2, _that.linepointsxy[i][1]);
|
//console.log(floatToFix4(y) ,floatToFix4(_that.linepointsxy[i][2]));
|
if (floatToFix4(y) == floatToFix4(_that.linepointsxy[i][2])) {
|
zhixianindex = i;
|
modifyNodes.unshift(_that.linepointsxy[i + 1]); //向前插入
|
modifyNodesIndexs.unshift(i + 1);
|
} else {
|
break;
|
}
|
} else {//求y值时，会出现x1-x2为0的情况，当出现时，求x值，来进行判断
|
var x = _that.flow.getXLinePointFormula(x1, y1, x2, y2, _that.linepointsxy[i][2]);
|
if (floatToFix4(x) == floatToFix4(_that.linepointsxy[i][1])) {
|
zhixianindex = i;
|
modifyNodes.unshift(_that.linepointsxy[i + 1]);
|
modifyNodesIndexs.unshift(i + 1);
|
} else {
|
break;
|
}
|
|
}
|
|
}
|
// $.each(this.linepointsxy, function (index, elem) {
|
// if (index >= zhixianindex) {
|
// temp.unshift(elem);
|
// }
|
// });
|
for (var i = zhixianindex; i >= 0; i--) {
|
temp.unshift(_that.linepointsxy[i]);
|
}
|
|
//根据两点得到箭头坐标
|
//1.首先得到是从哪个小圆点出发的
|
var nearx = temp[temp.length - 2][1];
|
var neary = temp[temp.length - 2][2];
|
var source = null;
|
$.each(this.linepoints, function (index, circle) {
|
if (floatToFix4(nearx) == floatToFix4(circle.cx) && floatToFix4(neary) == floatToFix4(circle.cy)) {
|
source = circle;
|
return false;
|
}
|
});
|
|
if (source == null) {
|
source = this.nodestart;
|
//修改开始节点
|
var startPoint = flowDesigner.getStartPosXY(source, this.nodeend);
|
this.x1 = startPoint.x;
|
this.y1 = startPoint.y;
|
this.linepointsxy[0][1] = startPoint.x;
|
this.linepointsxy[0][2] = startPoint.y;
|
temp[0][1] = startPoint.x;
|
temp[0][2] = startPoint.y;
|
}
|
|
|
switch (this.nodeend.type) {
|
case "end":
|
arrow = this.flow.getCircleArrowPosXY(source, this.nodeend);
|
break;
|
case "gateway":
|
arrow = this.flow.getGatewayArrowPosXY(source, this.nodeend);
|
break;
|
case "subProcess":
|
case "userTask":
|
arrow = this.flow.getArrowPosXY(source, this.nodeend);
|
break;
|
}
|
|
//console.log("arrow",arrow);
|
temp[temp.length - 1][1] = arrow.x;
|
temp[temp.length - 1][2] = arrow.y;
|
|
//console.log("modifyNodes",modifyNodes);
|
if (modifyNodes.length > 0) {
|
//根据坐标修改小圆点
|
|
this.modifyLineCircle(modifyNodes, modifyNodesIndexs, {
|
"x": temp[temp.length - 2][1],
|
"y": temp[temp.length - 2][2]
|
}, {"x": arrow.x, "y": arrow.y});
|
|
}
|
this.linepointsxy[length - 1][1] = arrow.x;
|
this.linepointsxy[length - 1][2] = arrow.y;
|
this.x2 = arrow.x;
|
this.y2 = arrow.y;
|
|
//如果节点类型是1,则表明是双向,需要画双箭头
|
if (this.content && this.content.nodeType && this.content.nodeType == "1") {
|
var arrowPos = computeArrowPos(temp[1][1], temp[1][2], temp[0][1], temp[0][2]);
|
var x1a = arrowPos[0][0];
|
var y1a = arrowPos[0][1];
|
var x1b = arrowPos[1][0];
|
var y1b = arrowPos[1][1];
|
|
temp.splice(1, 0, ["L", x1a, y1a], ["M", startPoint.x, startPoint.y], ["L", x1b, y1b], ["M", startPoint.x, startPoint.y]);
|
}
|
|
$.each(temp, function (index, elem) {
|
path += elem[0] + elem[1] + "," + elem[2];
|
});
|
|
return path;
|
},
|
|
//修改线上的小圆点的坐标， modifypoints需要修改的小圆点，modifyNodesIndexs需要修改的小圆点的在linepointsxy的索引，startpoint 线上的开始节点，endpoint 线上的结束节点
|
modifyLineCircle: function (modifypoints, modifyNodesIndexs, startpoint, endpoint) {
|
var length = modifypoints.length;
|
var newPoint;
|
//console.log("startpoint",startpoint);
|
//console.log("endpoint",endpoint);
|
for (var i = 0; i < length; i++) {
|
|
//循环需要修改的小圆点
|
// nx = (startpoint.x + endpoint.x) * (i + 1) / (length + 1);
|
// ny = (startpoint.y + endpoint.y) * (i + 1) / (length + 1);
|
newPoint = this.flow.getNewSmallCirclePosXY(startpoint, endpoint, modifypoints, length + 1, i + 1);
|
|
//得到新的坐标的值
|
var _that = this;
|
_that.linepointsxy[modifyNodesIndexs[i]][1] = newPoint.x;
|
_that.linepointsxy[modifyNodesIndexs[i]][2] = newPoint.y;
|
|
|
// $.each(this.linepoints, function (index, circle) {
|
|
// if (floatToFix4(modifypoints[i][1]) == floatToFix4(circle.cx) && floatToFix4(modifypoints[i][2]) == floatToFix4(circle.cy)) {
|
// //circle.element.attr({ "cx": nx, "cy": ny });
|
// circle.render({ "cx": newPoint.x, "cy": newPoint.y });
|
// console.log("新坐标", newPoint.x, newPoint.y);
|
// console.log(_that.linepointsxy);
|
// console.log("所在位置", modifyNodesIndexs[i]);
|
// _that.linepointsxy[modifyNodesIndexs[i]][1] = newPoint.x;
|
// _that.linepointsxy[modifyNodesIndexs[i]][2] = newPoint.y;
|
// }
|
// });
|
}
|
},
|
|
|
currentPointInPathIndex: function (x, y) { //当前节点在线段上的所属位置
|
var curIndex = 0;
|
//console.log("当前节点在线段上的所属位置", this.linepointsxy);
|
$.each(this.linepointsxy, function (index, elem) {
|
|
if (floatToFix4(elem[1]) == floatToFix4(x) && floatToFix4(elem[2]) == floatToFix4(y)) {
|
curIndex = index;
|
return false;
|
}
|
});
|
return curIndex;
|
},
|
|
//重绘线上所有的小圆点 show:true表示小圆点显示
|
redrawSmallCircle: function (show) {
|
//先去掉线上的小圆点
|
$.each(this.linepoints, function (index, circle) {
|
circle.removeElement();
|
});
|
this.linepoints = [];
|
//重新获取设置线上的小圆点
|
var newlength = this.linepointsxy.length;
|
_that = this;
|
$.each(this.linepointsxy, function (index, arr) {
|
if (index > 0 && index < newlength - 1) { //去掉头尾两个小圆点
|
//生成小圆点
|
var tempCircle = new SmallCircle(_that.flow, _that, {"cx": arr[1], "cy": arr[2], "show": show});
|
tempCircle.init();
|
_that.linepoints.push(tempCircle);
|
}
|
});
|
},
|
|
//删除线上的小圆点
|
removeSmallCircle: function (circle) {
|
|
if (this.linepoints.length <= 1) {
|
$.messager.alert("删除线上小圆点-提示", "当线段只有唯一一个小圆点时，该小圆点不能被删除！");
|
return false;
|
}
|
var deleindex = 0;
|
var oldlength = this.linepointsxy.length;
|
$.each(this.linepointsxy, function (index, attr) {
|
if (floatToFix4(circle.cx) == floatToFix4(attr[1]) && floatToFix4(circle.cy) == floatToFix4(attr[2])) {
|
deleindex = index;
|
return false;
|
}
|
});
|
|
this.linepointsxy.splice(deleindex, 1);
|
var newlength = this.linepointsxy.length;
|
var _that = this;
|
if (deleindex == oldlength - 2) {
|
//重新计算箭头节点
|
var source = null;
|
if (newlength == 2) {
|
source = this.nodestart;
|
} else {
|
|
$.each(this.linepoints, function (index, elem) {
|
|
if (floatToFix4(_that.linepointsxy[newlength - 2][1]) == floatToFix4(elem.cx) && floatToFix4(_that.linepointsxy[newlength - 2][2]) == floatToFix4(elem.cy)) {
|
source = elem;
|
}
|
});
|
}
|
if (this.nodeend.type == "end") {
|
var arrow = this.flow.getCircleArrowPosXY(source, this.nodeend);
|
} else if (this.nodeend.type == "gateway") {
|
var arrow = this.flow.getGatewayArrowPosXY(source, this.nodeend);
|
} else if (this.nodeend.type == "userTask" || this.nodeend.type == "subProcess") {
|
var arrow = this.flow.getArrowPosXY(source, this.nodeend);
|
}
|
|
this.linepointsxy[newlength - 1][1] = arrow.x;
|
this.linepointsxy[newlength - 1][2] = arrow.y;
|
|
}
|
|
this.linestr = Raphael.parsePathString(this.linepointsxy);
|
//重绘小圆点
|
this.redrawSmallCircle(true); //this.linepoints的改变在线段的重绘小圆点里面
|
//重新画线
|
this.line.attr("path", this.linestr);
|
|
},
|
//重绘文本位置
|
renderText: function () {
|
//跟着小圆点的位置，如果有小圆点，就跟着第一个小圆点，如果没有去中心点
|
if (this.linepoints.length > 0) {
|
this.text.attr({"x": this.linepoints[0].cx + 12, "y": this.linepoints[0].cy - 6})
|
} else {
|
this.bbox = this.line.getBBox();
|
this.text.attr({"x": this.bbox.cx + 12, "y": this.bbox.cy - 6});
|
}
|
|
},
|
setNullText: function () {
|
this.text.attr({"text": ""});
|
},
|
setText: function (wenbenid) {
|
//得到文本框的值，重新赋值给text //Raphaël\nkicks\nbutt!
|
var tvalue = $(".taskinput input").val();
|
|
var temp = tvalue;
|
if ($.trim(tvalue) != "" && wenbenid == this.id) {
|
var zishu = Math.floor(Math.max(this.bbox.width, 60) / 12); //一行可显示的中文字数
|
var hangshu = parseInt(tvalue.length / zishu) + 1; //行数
|
var arr = [];
|
if (tvalue.length > zishu) {
|
for (var j = 0; j < hangshu; j++) {
|
for (var i = j * zishu; i < (j + 1) * zishu; i = i + 1) {
|
if (tvalue[i]) {
|
if (arr[j]) {
|
arr[j] += tvalue[i];
|
} else {
|
arr[j] = tvalue[i];
|
}
|
}
|
}
|
}
|
temp = arr.join('\n');
|
}
|
|
|
this.text.attr({"text": temp});
|
$(".taskinput input").val("");//清空
|
}
|
},
|
getText: function () {
|
return this.text.attr("text");
|
},
|
//移动节点含有自身线时，重绘
|
renderMoveSelf: function () {
|
//开始节点自身线
|
this.x1 = this.nodestart.centerpoint[0];
|
this.y1 = this.nodestart.centerpoint[1] + this.nodestart.h / 2;
|
this.x2 = this.nodestart.x;
|
this.y2 = this.nodestart.centerpoint[1];
|
var x3 = this.x1;
|
var y3 = this.y1 + this.nodestart.h * 1 / 4;
|
var x4 = x3 - this.nodestart.w * 3 / 4;
|
var y4 = y3;
|
var x5 = x4;
|
var y5 = y4 - this.nodestart.h * 3 / 4;
|
this.linestr = "M" + this.x1 + "," + this.y1 + "L" + x3 + "," + y3 + "L" + x4 + "," + y4 + "L" + x5 + "," + y5 + "L" + this.x2 + "," + this.y2;
|
this.linepointsxy = [];
|
this.linepointsxy = Raphael.parsePathString(this.linestr);
|
this.render2();
|
},
|
recalculatePath: function () { //重新计算路径
|
if (!this.self) {
|
this.redrawStart(this.x1, this.y1);
|
} else {
|
this.renderMoveSelf();
|
}
|
},
|
render2: function () {//重绘线段
|
this.line.attr("path", this.linestr);
|
|
//外框
|
this.bbox = this.line.getBBox();
|
|
//可见外框
|
this.linebox.attr({
|
"x": this.bbox.x,
|
"y": this.bbox.y,
|
"width": this.bbox.width,
|
"height": this.bbox.height
|
});
|
//线上原来的小圆点删除
|
for (var i = 0; i < this.linepoints.length; i++) {
|
this.linepoints[i].removeElement();
|
}
|
this.linepoints = [];
|
//中间小圆点
|
for (var i = 1; i < this.linepointsxy.length - 1; i++) {
|
var centercircle = new SmallCircle(this.flow, this, {
|
"cx": this.linepointsxy[i][1],
|
"cy": this.linepointsxy[i][2]
|
});
|
centercircle.init();
|
this.linepoints.push(centercircle);
|
}
|
this.renderText();
|
}
|
|
});
|
|
//计算自定义箭头坐标
|
function computeArrowPos(x1, y1, x2, y2) {
|
var angle = Raphael.angle(x1, y1, x2, y2);//得到两点之间的角度
|
var a45 = Raphael.rad(angle - 30);//角度转换成弧度
|
var a45m = Raphael.rad(angle + 30);
|
var x1a = x2 + Math.cos(a45) * 10;
|
var y1a = y2 + Math.sin(a45) * 10;
|
var x1b = x2 + Math.cos(a45m) * 10;
|
var y1b = y2 + Math.sin(a45m) * 10;
|
|
return [[x1a, y1a], [x1b, y1b]];
|
}
|
|
//线上的小圆点
|
function SmallCircle(flow, belongLine, options) {
|
this.flow = flow; //FlowDesigner类
|
this.paper = flow.paper;
|
this.belongLine = belongLine;
|
this.type = "smallcircle";
|
|
this.options = options;
|
this.id = "";
|
this.element = null; //start圆
|
this.bbox = null; //圆的真实外框
|
this.coordinate = []; //圆元素的上下左右坐标
|
//元素
|
this.cx = options.cx;
|
this.cy = options.cy;
|
this.centerpoint = [this.cx, this.cy];
|
this.r = 3;
|
this.show = options.show;
|
|
}
|
|
SmallCircle.prototype = $.extend(SmallCircle.prototype, {
|
init: function () {
|
var number = this.flow.createSmallCircleNodeNum();
|
var tempName = (new Date()).getTime();
|
this.id = "smallcircle_" + tempName;
|
//圆
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#ff00ff",
|
"cursor": "move"
|
}).hide();
|
if (this.show) {
|
this.element.show();
|
}
|
this.centerpoint = [this.cx, this.cy];
|
//真外框
|
this.bbox = this.element.getBBox();
|
//坐标(L,R,T,B)
|
this.coordinate.push(this.bbox.x, this.bbox.x + this.bbox.width, this.bbox.y, this.bbox.y + this.bbox.height);
|
var _that = this;
|
|
//圆点的移动
|
var circlecx = 0;
|
var circlecy = 0;
|
var circlepxindex = 0;
|
var weiyiX = 0;
|
var weiyiY = 0;
|
var bpzcenter = null;
|
this.element.drag(function (tx, ty, x, y, e) { //move
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
|
var currentX = circlecx + tx;
|
var currentY = circlecy + ty;
|
//碰撞自身的中心线
|
var L = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var R = L + _that.r * 2;
|
var T = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
var B = T + _that.r * 2;
|
bpzcenter = _that.flow.collisionSelfCenterLine(_that, L, R, T, B); //中心线匹配
|
if (bpzcenter[0] != null) {
|
currentX = bpzcenter[0];
|
}
|
if (bpzcenter[1] != null) {
|
currentY = bpzcenter[1];
|
}
|
|
_that.belongLine.linepointsxy[circlepxindex][1] = currentX;
|
_that.belongLine.linepointsxy[circlepxindex][2] = currentY;
|
//重写线段
|
_that.belongLine.linestr = _that.belongLine.combPath();
|
_that.belongLine.line.attr("path", _that.belongLine.linestr);
|
//修改text坐标
|
_that.belongLine.renderText();
|
//自身渲染，这个渲染可能包含重绘线段开始和结束坐标
|
_that.render({"cx": currentX, "cy": currentY});
|
|
}
|
|
|
}, function (x, y, e) { //start
|
//得到圆点的中心点坐标
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
circlecx = _that.bbox.cx;
|
circlecy = _that.bbox.cy;
|
circlepxindex = _that.belongLine.currentPointInPathIndex(circlecx, circlecy);
|
|
weiyiX = e.clientX - _that.flow._DEFALUTS_.dx - _that.bbox.x;//offsetX，不需要减1
|
weiyiY = e.clientY - _that.flow._DEFALUTS_.dy - _that.bbox.y; //offsetY，不需要减32
|
}
|
}, function (e) { //end
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
_that.belongLine.bbox = _that.belongLine.line.getBBox();
|
_that.belongLine.linebox.attr({
|
"x": _that.belongLine.bbox.x,
|
"y": _that.belongLine.bbox.y,
|
"width": _that.belongLine.bbox.width,
|
"height": _that.belongLine.bbox.height
|
});
|
_that.belongLine.linepointsxy = Raphael.parsePathString(_that.belongLine.linestr);
|
}
|
})
|
//小圆点双击减点自身
|
this.element.dblclick(function () {
|
if (_that.flow.subtractPoint == true) {
|
_that.belongLine.removeSmallCircle(_that);
|
}
|
|
});
|
},
|
render: function (options) { //小圆点
|
this.cx = options.cx;
|
this.cy = options.cy;
|
this.centerpoint = [this.cx, this.cy];
|
this.element.attr({"cx": this.cx, "cy": this.cy});
|
this.centerpoint = [this.cx, this.cy];
|
//真外框
|
this.bbox = this.element.getBBox();
|
//坐标(L,R,T,B)
|
this.coordinate = [];
|
this.coordinate.push(this.bbox.x, this.bbox.x + this.bbox.width, this.bbox.y, this.bbox.y + this.bbox.height);
|
|
//如果该点是连接线段是两个节点，则需要重绘开始节点和箭头节点
|
var length = this.belongLine.linepointsxy.length;
|
var circlepxindex = this.belongLine.currentPointInPathIndex(this.cx, this.cy);
|
if (circlepxindex == 1) {
|
//重绘开始节点
|
var startPoint = flowDesigner.getStartPosXY(this.belongLine.nodestart, this);
|
this.belongLine.x1 = startPoint.x;
|
this.belongLine.y1 = startPoint.y;
|
this.belongLine.linepointsxy[0][1] = startPoint.x;
|
this.belongLine.linepointsxy[0][2] = startPoint.y;
|
}
|
if (length == 3 || circlepxindex == length - 2) {
|
//重绘结束节点
|
switch (this.belongLine.nodeend.type) {
|
|
case "end":
|
var arrow = this.flow.getCircleArrowPosXY(this, this.belongLine.nodeend);
|
break;
|
case "gateway":
|
arrow = this.flow.getGatewayArrowPosXY(this, this.belongLine.nodeend);
|
break;
|
case "subProcess":
|
case "userTask":
|
arrow = this.flow.getArrowPosXY(this, this.belongLine.nodeend);
|
break;
|
}
|
|
this.belongLine.x2 = arrow.x;
|
this.belongLine.y2 = arrow.y;
|
this.belongLine.linepointsxy[length - 1][1] = arrow.x;
|
this.belongLine.linepointsxy[length - 1][2] = arrow.y;
|
|
}
|
this.belongLine.linestr = this.belongLine.combPath();
|
this.belongLine.line.attr("path", this.belongLine.linestr);
|
|
},
|
removeElement: function () {
|
this.element.remove();
|
delete this;
|
}
|
});
|
|
function End(flow, options) {
|
this.flow = flow; //FlowDesigner类
|
this.paper = flow.paper; //画布
|
this.options = options;
|
this.type = "end";
|
this.selected = false;
|
this.id = options.id ? options.id : "";
|
this.isLoad = options.isLoad ? true : false; //是否是加载的元素
|
|
this.parentElem = null; //所属父级
|
this.parentElemStr = options.parentElem; //加载时所属父级的名称
|
this.element = null; //start圆
|
|
this.bmargin = 4; //外框和元素的边距
|
this.elementbox = null; //start圆的外框，加厚边距
|
this.bbox = null; //圆的真实外框
|
//this.$moveDiv=null; //外框拖动虚框
|
this.coordinate = []; //圆元素的上下左右四条边坐标
|
this.centerLineCoordinate = []; //圆元素的上下左右四条边坐标，为显示中心线，小一点
|
this.centerMargin = 10; //向中心点向外4个方向扩展的距离
|
this.centerLineX = null;
|
this.centerLineY = null;
|
|
//元素
|
this.cx = options.cx;
|
this.cy = options.cy;
|
this.centerpoint = [this.cx, this.cy];
|
this.r = options.r;
|
this.ccelement = null; //圆心
|
|
this.linein = []; //所有的有关进入的线
|
this.text = null; //文本
|
this.content = {}; //结束节点内容
|
this.completeState = options.completeState || 0; //0 代表否 1代表已完 2代表正当 3代表还未开始
|
|
}
|
|
End.prototype = $.extend(End.prototype, {
|
init: function () {
|
var number = this.flow.createEndNodeNum();
|
var tempName = (new Date()).getTime();
|
if (!this.isLoad) {
|
this.id = "end_" + tempName;
|
}
|
|
//圆
|
switch (this.completeState) {
|
|
case 1: //蓝色
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#e0e9fe",
|
"cursor": "pointer",
|
"stroke": "#2632aa",
|
"stroke-width": 3
|
});
|
break;
|
case 2://绿色
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#ebf8eb",
|
"cursor": "pointer",
|
"stroke": "#017501",
|
"stroke-width": 3
|
});
|
break;
|
case 3://灰色
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#dadada",
|
"cursor": "pointer",
|
"stroke": "#acacac",
|
"stroke-width": 3
|
});
|
break;
|
default:
|
this.element = this.paper.circle(this.cx, this.cy, this.r).attr({
|
"fill": "#ffffff",
|
"stroke-width": 3,
|
"cursor": "pointer"
|
});
|
break;
|
}
|
|
this.centerpoint = [this.cx, this.cy];
|
this.ccelement = this.paper.circle(this.centerpoint[0], this.centerpoint[1], 2).attr({
|
"fill": "#ff0000",
|
"stroke": "ff0000"
|
}).hide(); //圆心
|
|
//end真外框
|
this.bbox = this.element.getBBox();
|
//end扩大的外框
|
this.elementbox = this.paper.rect(this.bbox.x - this.bmargin, this.bbox.y - this.bmargin, this.bbox.width + this.bmargin * 2, this.bbox.height + this.bmargin * 2).attr({
|
"stroke-dasharray": "- ",
|
"stroke": "#000000",
|
"stroke-width": 0.5,
|
"fill": "#ff0000",
|
"fill-opacity": 0
|
});
|
//坐标(L,R,T,B)
|
this.coordinate.push(this.bbox.x, this.bbox.x + this.bbox.width, this.bbox.y, this.bbox.y + this.bbox.height);
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
//文字
|
if (!this.isLoad) {
|
this.text = this.paper.text(this.centerpoint[0], this.centerpoint[1] + this.r + 12, "结束" + number).attr({"font-size": "12px"}).toBack();
|
} else {
|
this.text = this.paper.text(this.centerpoint[0], this.centerpoint[1] + this.r + 12, this.options.text).attr({"font-size": "12px"}).toBack();
|
}
|
|
|
//隐藏的中心竖线
|
this.centerLineY = this.paper.path("M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
//隐藏的中心横线
|
this.centerLineX = this.paper.path("M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
|
//添加父元素
|
if (!this.isLoad) {
|
this.addParent();
|
}
|
|
|
var _that = this;
|
//end圆的外框点击
|
if (this.completeState == 0) {
|
this.elementbox.click(function (e) {
|
//小菜单
|
$(".right").css({
|
"left": _that.cx + _that.r + 10 - _that.flow.getScrollx(),
|
"top": _that.cy - _that.r + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").hide();
|
//显示外框
|
_that.selected = true; //选中元素
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
_that.setText(wenbenid);
|
}
|
_that.text.show();
|
|
});
|
|
//end圆的外框双击
|
this.elementbox.dblclick(function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var tvalue = _that.text.attr("text");
|
$(".taskinput input").val(tvalue);
|
$(".taskinput input").attr("wenbenid", _that.id);
|
//显示文本框
|
$(".taskinput").css({
|
"left": _that.cx - _that.r - 15 - _that.flow.getScrollx(),
|
"top": (_that.cy - 10 + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()),
|
"width": 60
|
});
|
_that.selected = true;
|
//文本框本身隐藏
|
_that.text.hide();
|
}
|
|
});
|
|
//end圆的点击元素
|
this.element.click(function (e) {
|
_that.elementbox.show();
|
$(".right").css({
|
"left": _that.cx + _that.r + 10 - _that.flow.getScrollx(),
|
"top": _that.cy - _that.r + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").hide(); //这个8，是为了对齐随便写的
|
});
|
|
//end圆的外层框拖动
|
var weiyiX = 0;
|
var weiyiY = 0;
|
var dropStatus = false;
|
var startX = 0;
|
var startY = 0;
|
var bpz = null;
|
var bpzcenter = null;
|
this.elementbox.drag(function (tx, ty, x, y, e) { //move中
|
dropStatus = true;
|
//限制去菜单那块
|
if (e.clientX < (134 + _that.flow._DEFALUTS_.dx + weiyiX)) {
|
e.clientX = 134 + _that.flow._DEFALUTS_.dx;
|
dropStatus = false;
|
return;
|
}
|
//限制画布最右侧边界
|
if (e.clientX > _that.flow._DEFALUTS_.width - (_that.r + _that.bmargin) * 2 + _that.flow._DEFALUTS_.dx + weiyiX) {
|
dropStatus = false;
|
return;
|
}
|
|
//限制头部
|
if (e.clientY < (0 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
e.clientY = 0 + _that.flow._DEFALUTS_.dy;
|
dropStatus = false;
|
return;
|
}
|
|
//限制画布底部边界
|
if (e.clientY > (0 + _that.flow._DEFALUTS_.height - (_that.r + _that.bmargin) * 2 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
dropStatus = false;
|
return;
|
}
|
|
this.attr({
|
"x": e.clientX - _that.flow._DEFALUTS_.dx - weiyiX,
|
"y": e.clientY - _that.flow._DEFALUTS_.dy - weiyiY
|
});
|
|
//碰撞检测
|
var L = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var R = L + _that.r * 2;
|
var T = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
var B = T + _that.r * 2;
|
bpz = _that.flow.collision(_that, L, R, T, B); //被碰撞
|
if (bpz != null && bpz.type != "subProcess") {
|
dropStatus = false;
|
}
|
bpzcenter = _that.flow.collisionCenterLine(_that, L, R, T, B); //中心线匹配
|
|
|
}, function (x, y, e) { //move开始
|
|
weiyiX = e.clientX - _that.flow._DEFALUTS_.dx - _that.bbox.x + _that.bmargin; //offsetX，不需要减1
|
weiyiY = e.clientY - _that.flow._DEFALUTS_.dy - _that.bbox.y + _that.bmargin; //offsetY，不需要减32
|
startX = _that.bbox.x - _that.bmargin;
|
startY = _that.bbox.y - _that.bmargin;
|
|
}, function (e) {//move结束
|
|
if (dropStatus == true) {
|
var elemnetboxbbox = this.getBBox();
|
var cx = elemnetboxbbox.cx;
|
var cy = elemnetboxbbox.cy;
|
|
|
//判断是否进入子流程
|
if (bpz && bpz.type == "subProcess") {
|
//说明进入在子流程中
|
if (_that.parentElem == null || _that.parentElem.id != bpz.id) {
|
//表示新的入到一个子流程中
|
if (_that.linein.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
$.messager.confirm('再次确认', '该结束节点进入子流程会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
_that.render(cx, cy, bpzcenter);
|
|
}
|
})
|
} else {
|
//没有线段
|
_that.render(cx, cy, bpzcenter);
|
}
|
}
|
} else if (bpz == null) {
|
if (_that.parentElem != null) {
|
//原来在小空间中
|
if (_that.linein.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
var L = elemnetboxbbox.x;
|
var R = L + _that.r * 2;
|
var T = elemnetboxbbox.y;
|
var B = T + _that.r * 2;
|
//判断当前是否已经出了小空间
|
if (!_that.comeInSubProcess2(L, R, T, B)) {
|
$.messager.confirm('再次确认', '该结束节点原属于子流程空间，进入父空间时会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
|
_that.render(cx, cy, bpzcenter);
|
}
|
})
|
} else {
|
//没有出小空间
|
|
_that.render(cx, cy, bpzcenter);
|
}
|
} else {
|
//没有线段
|
|
_that.render(cx, cy, bpzcenter);
|
}
|
} else {
|
//原来在大空间中
|
_that.render(cx, cy, bpzcenter);
|
}
|
}
|
|
} else {
|
this.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
}
|
dropStatus = false;
|
|
return false;
|
|
});
|
} else if (this.completeState == 1 || this.completeState == 2) {
|
|
this.element.mouseover(function (e) {
|
$("[id*=divshow_]").hide();
|
var wheight = e.view.innerHeight; //屏幕大小
|
var wheight2 = Math.floor(wheight / 2);//屏幕大小的一半
|
var name = "divshow_" + _that.id;
|
if ($("#" + name).length == 0) {
|
//创建
|
if (e.pageY <= wheight2) {
|
var str = "<div id='" + name + "' class='show' style='left:" + (e.pageX + 0) + "px; top:" + (e.pageY + 0) + "px;'><p class='title'>" + _that.getText() + "</p><div class='con' style='max-height:" + wheight2 + "px'>";
|
} else {
|
var str = "<div id='" + name + "' class='show' style='left:" + (e.pageX + 0) + "px; bottom:" + (wheight - e.pageY + 0) + "px;'><p class='title'>" + _that.getText() + "</p><div class='con' style='max-height:" + wheight2 + "px'>";
|
}
|
|
if (_that.completeState == 1) {
|
|
str += "<h4 class='yi'>已办理</h4>";
|
if (_that.content.activityUsers && _that.content.activityUsers.length > 0) {
|
|
$.each(_that.content.activityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>办理时间</strong><span>" + el.time + "</span></p><p><strong>办理意见</strong><span>" + el.advice + "</span></p>";
|
})
|
}
|
} else if (_that.completeState == 2) {
|
|
if (_that.content.waitActivityUsers && _that.content.waitActivityUsers.length > 0) {
|
str += "<h4 class='zhengzai'>正在办理</h4>";
|
$.each(_that.content.waitActivityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>开始时间</strong><span>" + el.time + "</span></p>";
|
})
|
}
|
|
if (_that.content.activityUsers && _that.content.activityUsers.length > 0) {
|
str += "<h4 class='yi'>已办理</h4>";
|
$.each(_that.content.activityUsers, function (i, el) {
|
str += "<p><strong>办理人员</strong><span>" + el.name + "</span><strong>办理时间</strong><span>" + el.time + "</span></p><p><strong>办理意见</strong><span>" + el.advice + "</span></p>";
|
})
|
}
|
|
|
}
|
|
str += "</div></div>";
|
|
$("#" + _that.flow._DEFALUTS_.id).append(str);
|
} else {
|
|
if (e.pageY <= wheight2) {
|
$("#" + name).css({"left": (e.pageX + 0), "top": (e.pageY + 0), "bottom": "auto"}).show();
|
$("#" + name).find(".con").css({"maxHeight": wheight2});
|
|
} else {
|
$("#" + name).css({
|
"left": (e.pageX + 0),
|
"bottom": (wheight - e.pageY + 0),
|
"top": "auto"
|
}).show();
|
$("#" + name).find(".con").css({"maxHeight": wheight2});
|
}
|
|
}
|
|
|
})
|
|
}
|
},
|
render: function (cx, cy, bpzcenter) { //end渲染
|
if (bpzcenter != null) { //碰撞吸附
|
if (bpzcenter[0] != null && bpzcenter[1] == null) {
|
//y轴吸附，x轴不吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
cx = bpzcenter[0].cx;
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
cx = bpzcenter[0].x + bpzcenter[0].w / 2;
|
}
|
|
} else if (bpzcenter[0] == null && bpzcenter[1] != null) {
|
|
//x轴吸附，y轴不吸附
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
cy = bpzcenter[1].cy;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
|
cy = bpzcenter[1].y + bpzcenter[1].h / 2;
|
|
}
|
|
} else if (bpzcenter[0] != null && bpzcenter[1] != null) {
|
//y轴吸附，x轴吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
cx = bpzcenter[0].cx;
|
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
cx = bpzcenter[0].x + bpzcenter[0].w / 2;
|
}
|
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
cy = bpzcenter[1].cy;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
cy = bpzcenter[1].y + bpzcenter[1].h / 2;
|
}
|
}
|
|
}
|
//end圆的重新渲染
|
this.cx = cx;
|
this.cy = cy;
|
this.element.attr({"cx": cx, "cy": cy});
|
this.bbox = this.element.getBBox();
|
this.centerpoint = [cx, cy];
|
|
//扩大的外框
|
this.elementbox.attr({"x": this.bbox.x - this.bmargin, "y": this.bbox.y - this.bmargin});
|
|
//修改坐标(L,R,T,B)
|
this.coordinate[0] = this.bbox.x;
|
this.coordinate[1] = this.bbox.x + this.bbox.width;
|
this.coordinate[2] = this.bbox.y;
|
this.coordinate[3] = this.bbox.y + this.bbox.height;
|
|
//圆心
|
this.ccelement.attr({"cx": this.centerpoint[0], "cy": this.centerpoint[1]});
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate = [];
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
//文字
|
this.text.attr({"x": this.centerpoint[0], "y": this.centerpoint[1] + this.r + 12});
|
//移动隐藏的中心竖线
|
this.centerLineY.attr("path", "M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height);
|
|
//移动隐藏的中心横线
|
this.centerLineX.attr("path", "M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]);
|
|
var _that = this;
|
//所有进入的线，因为坐标变了，需要重绘
|
$.each(this.linein, function (index, lineElem) {
|
|
lineElem.redrawEnd(_that.cx, _that.cy);
|
});
|
|
//父元素处理
|
var parent = this.comeInSubProcess();
|
if (parent != null) {
|
//目前进入到子流程中
|
parent.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5});
|
}
|
//无论是否有父元素，都需要进入这个方法
|
this.addParent(parent);
|
},
|
setText: function (wenbenid) {
|
//得到文本框的值，重新赋值给text //Raphaël\nkicks\nbutt!
|
var tvalue = $(".taskinput input").val();
|
var temp = tvalue;
|
if ($.trim(tvalue) != "" && wenbenid == this.id) {
|
|
this.text.attr({"text": temp});
|
$(".taskinput input").val("");//清空
|
}
|
},
|
unSelect: function () {//非选中状态
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
//外框隐藏
|
this.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5}).hide();
|
this.ccelement.hide();
|
|
//文本框
|
if (this.selected == true) {
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
this.setText(wenbenid);
|
}
|
this.text.show();
|
|
}
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
|
//中心线隐藏
|
this.centerLineX.hide();
|
this.centerLineY.hide();
|
this.selected = false;
|
|
//完成情况的显示
|
if (this.completeState != 0) {
|
var name = "divshow_" + this.id;
|
$("#" + name).hide();
|
}
|
},
|
removeElement: function () {//end圆删除元素
|
this.element.remove();
|
this.centerLineX.remove();
|
this.centerLineY.remove();
|
this.elementbox.remove();
|
this.ccelement.remove();
|
this.text.remove();
|
//文本框回归
|
$(".taskinput").css({"left": -100, "top": -100});
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
//父元素
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
}
|
|
//移除相关的线
|
var tempinlines = [];
|
$.each(this.linein, function (index, line) {
|
tempinlines.push(line);
|
});
|
$.each(tempinlines, function (index, line) {
|
line && line.removeElement();
|
});
|
},
|
removeInLine: function (line) {
|
var _that = this;
|
$.each(this.linein, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.linein.splice(index, 1);
|
}
|
})
|
},
|
|
comeInSubProcess: function () { //判断是否在子流程里面
|
var parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
return parent;
|
},
|
comeInSubProcess2: function (L, R, T, B) {//判断是否在子流程里面
|
var parent = this.flow.collisionSubProcess(L, R, T, B); //被碰撞
|
return parent;
|
},
|
|
addParent: function (parent) {//在子流程里的处理
|
//判断落点是否在子流程内，如果落在子流程内，则需要修改parentElem
|
if (!parent) {
|
parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
}
|
if (parent != null) {
|
|
var ids = [];
|
$.each(parent.subElement, function (index, elem) {
|
ids.push(elem.id);
|
})
|
if ($.inArray(this.id, ids) == -1) {
|
this.parentElem = parent;
|
parent.subElement.push(this);
|
//表示新加入的到某个节点上，则原来的所有的线段需要移除
|
//移除相关的线
|
this.removeLine();
|
//节点置前
|
//this.element.toFront();
|
this.elementbox.toFront();
|
|
}
|
} else {//没有父元素
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
//表示新加入的到其他的，则原来子流程中的所有的线段需要移除
|
this.removeLine();
|
}
|
}
|
//return parent;
|
},
|
getText: function () {
|
return this.text.attr("text");
|
},
|
removeLine: function () { //删除线段
|
|
var tempinlines = [];
|
$.each(this.linein, function (index, line) {
|
if (!line.self) {
|
tempinlines.push(line);
|
}
|
});
|
$.each(tempinlines, function (index, line) {
|
line && line.removeElement();
|
if (line) {
|
delete this.flow.alllines[line.id]; //删除线元素
|
}
|
});
|
|
}
|
|
});
|
|
|
//转数字判断
|
function floatToFix4(num) {
|
return parseFloat(num).toFixed(4);
|
}
|
|
//线上的圆点移动 lineintance是Line的实例,
|
function _lineCircleMove(tx, ty, x, y, e, lineintance, circlecx, circlecy, circle, circlepxindex) {
|
//console.log(tx,ty,x,y,e);
|
|
lineintance.linepointsxy[circlepxindex][1] = circlecx + tx;
|
lineintance.linepointsxy[circlepxindex][2] = circlecy + ty;
|
//重写线段
|
lineintance.linestr = lineintance.combPath();
|
|
//lineintance.linestr="M"+lineintance.x1+","+lineintance.y1+"L"+(circlecx+tx)+","+(circlecy+ty)+"L"+lineintance.x2+","+lineintance.y2;
|
|
lineintance.line.attr("path", lineintance.linestr);
|
//lineintance.paper.circle(lineintance.bbox.cx+tx,lineintance.bbox.cy+ty,"3").attr("fill","#ff00ff");
|
|
circle.attr({"cx": circlecx + tx, "cy": circlecy + ty});
|
}
|
|
function _lineCircleStart(x, y, e, lineintance, circlecx, circlecy) {
|
return lineintance.currentPointInPathIndex(circlecx, circlecy);
|
|
}
|
|
function _lineCircleEnd(e, lineintance) {
|
|
lineintance.bbox = lineintance.line.getBBox();
|
lineintance.linebox.attr({
|
"x": lineintance.bbox.x,
|
"y": lineintance.bbox.y,
|
"width": lineintance.bbox.width,
|
"height": lineintance.bbox.height
|
});
|
lineintance.linepointsxy = Raphael.parsePathString(lineintance.linestr);
|
}
|
|
function Gateway(flow, options) {
|
this.flow = flow; //FlowDesigner类的实例
|
this.paper = flow.paper; //画布rapheal
|
this.options = options;
|
this.type = "gateway";
|
this.selected = false;
|
this.id = options.id ? options.id : "";
|
this.isLoad = options.isLoad ? true : false; //是否是加载的元素
|
this.detail = options.detail;
|
this.parentElem = null; //所属父级
|
this.parentElemStr = options.parentElem; //加载时所属父级的名称
|
this.element = null; //path 正菱形
|
this.img = null;
|
|
this.elementbox = null; //扩大外框
|
this.bbox = null; //外框
|
this.coordinate = []; //当前元素的四条边坐标
|
this.fourpoint = []; //四个元素顶点坐标
|
this.centerLineCoordinate = []; //圆元素的上下左右四条边坐标，为显示中心线，小一点
|
this.centerMargin = 10; //向中心点向外4个方向扩展的距离
|
|
//元素
|
this.cx = options.cx; //中心点坐标x
|
this.cy = options.cy;//中心点坐标y
|
this.r = options.r; //正菱形中心点到其他4个点的垂直距离
|
|
this.bmargin = 4; //外框和元素的边距
|
this.centerLineX = null;
|
this.centerLineY = null;
|
this.ccelement = null; //圆心
|
this.centerpoint = []; //矩形的中心点
|
this.linein = []; //所有进来的线
|
this.lineout = [];//所有出去的线
|
this.text = null; //文本
|
this.content = {}; //网关内容
|
this.completeState = options.completeState || 0; //0 代表否 1代表已完 2代表正当 3代表还未开始
|
|
|
}
|
|
Gateway.prototype = $.extend(Gateway.prototype, {
|
init: function () {
|
|
var number = this.flow.createGatewayNum();
|
var tempName = (new Date()).getTime();
|
//根据中心点和垂直半径得到四个顶点 //左上右下
|
this.fourpoint = [{"x": this.cx - this.r, "y": this.cy}, {
|
"x": this.cx,
|
"y": this.cy - this.r
|
}, {"x": this.cx + this.r, "y": this.cy}, {"x": this.cx, "y": this.cy + this.r}];
|
|
//var c = paper.path("M10 10L90 90");
|
var str = "M" + this.fourpoint[0].x + "," + this.fourpoint[0].y + "L" + this.fourpoint[1].x + "," + this.fourpoint[1].y + "L" + this.fourpoint[2].x + "," + this.fourpoint[2].y + "L" + this.fourpoint[3].x + "," + this.fourpoint[3].y + "Z";
|
|
|
//菱形元素
|
switch (this.completeState) {
|
|
case 1: //蓝色
|
this.element = this.paper.path(str).attr({
|
"fill": "#e0e9fe",
|
"cursor": "pointer",
|
"stroke": "#2632aa",
|
"stroke-width": 1
|
});
|
break;
|
case 2://绿色
|
this.element = this.paper.path(str).attr({
|
"fill": "#ebf8eb",
|
"cursor": "pointer",
|
"stroke": "#017501",
|
"stroke-width": 1
|
});
|
break;
|
case 3://灰色
|
this.element = this.paper.path(str).attr({
|
"fill": "#dadada",
|
"cursor": "pointer",
|
"stroke": "#acacac",
|
"stroke-width": 1
|
});
|
break;
|
default:
|
this.element = this.paper.path(str).attr({
|
"cursor": "pointer",
|
"fill": "#ffffff",
|
"stroke": "#585858",
|
"stroke-width": 1
|
});
|
break;
|
}
|
|
//正菱形
|
switch (this.detail) {
|
case "exclusiveGateway":
|
//this.img=this.paper.image("/flowmodify/images/exclusive_bg.png", this.cx-9, this.cy-9, 18, 18);
|
if (this.completeState == 0) {
|
this.img = this.paper.image(GatewayImgs.exclusiveGateway, this.cx - 9, this.cy - 9, 18, 18).attr({"cursor": "pointer"});
|
} else if (this.completeState == 1) { //蓝色
|
this.img = this.paper.image(GatewayImgsBlue.exclusiveGateway, this.cx - 9, this.cy - 9, 18, 18).attr({"cursor": "pointer"});
|
} else if (this.completeState == 2) {//绿色
|
this.img = this.paper.image(GatewayImgsGreen.exclusiveGateway, this.cx - 9, this.cy - 9, 18, 18).attr({"cursor": "pointer"});
|
} else if (this.completeState == 3) {//灰色
|
this.img = this.paper.image(GatewayImgsGray.exclusiveGateway, this.cx - 9, this.cy - 9, 18, 18).attr({"cursor": "pointer"});
|
}
|
|
if (!this.isLoad) {
|
this.id = "exclusiveGateway_" + tempName;
|
}
|
break;
|
case "parallelGateway":
|
if (this.completeState == 0) {
|
this.img = this.paper.image(GatewayImgs.parallelGateway, this.cx - 10, this.cy - 10, 20, 20).attr({"cursor": "pointer"});
|
} else if (this.completeState == 1) {//蓝色
|
this.img = this.paper.image(GatewayImgsBlue.parallelGateway, this.cx - 10, this.cy - 10, 20, 20).attr({"cursor": "pointer"});
|
} else if (this.completeState == 2) {//绿色
|
this.img = this.paper.image(GatewayImgsGreen.parallelGateway, this.cx - 10, this.cy - 10, 20, 20).attr({"cursor": "pointer"});
|
} else if (this.completeState == 3) {//灰色
|
this.img = this.paper.image(GatewayImgsGray.parallelGateway, this.cx - 10, this.cy - 10, 20, 20).attr({"cursor": "pointer"});
|
}
|
|
if (!this.isLoad) {
|
this.id = "parallelGateway_" + tempName;
|
}
|
break;
|
case "inclusiveGateway":
|
if (this.completeState == 0) {
|
this.img = this.paper.image(GatewayImgs.inclusiveGateway, this.cx - 11, this.cy - 11, 22, 22).attr({"cursor": "pointer"});
|
} else if (this.completeState == 1) {//蓝色
|
this.img = this.paper.image(GatewayImgsBlue.inclusiveGateway, this.cx - 11, this.cy - 11, 22, 22).attr({"cursor": "pointer"});
|
} else if (this.completeState == 2) {//绿色
|
this.img = this.paper.image(GatewayImgsGreen.inclusiveGateway, this.cx - 11, this.cy - 11, 22, 22).attr({"cursor": "pointer"});
|
} else if (this.completeState == 3) {//灰色
|
this.img = this.paper.image(GatewayImgsGray.inclusiveGateway, this.cx - 11, this.cy - 11, 22, 22).attr({"cursor": "pointer"});
|
}
|
if (!this.isLoad) {
|
this.id = "inclusiveGateway_" + tempName;
|
}
|
break;
|
|
}
|
|
|
//外框
|
this.bbox = this.element.getBBox();
|
|
//console.log(this.bbox);
|
//扩大外框
|
this.elementbox = this.paper.rect(this.bbox.x - this.bmargin, this.bbox.y - this.bmargin, this.bbox.width + this.bmargin * 2, this.bbox.height + this.bmargin * 2).attr({
|
"stroke-dasharray": "- ",
|
stroke: "#000000",
|
"stroke-width": 0.5,
|
"fill": "#ff0000",
|
"fill-opacity": 0
|
});
|
|
//坐标(L,R,T,B)
|
this.coordinate.push(this.bbox.x, this.bbox.x + this.bbox.width, this.bbox.y, this.bbox.y + this.bbox.height);
|
|
//中心点坐标
|
this.centerpoint = [this.bbox.x + this.bbox.width / 2, this.bbox.y + this.bbox.height / 2];
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
//文字
|
if (!this.isLoad) {
|
this.text = this.paper.text(this.centerpoint[0], this.centerpoint[1] + this.r + 12, "网关" + number).attr({"font-size": "12px"});
|
} else {
|
this.text = this.paper.text(this.centerpoint[0], this.centerpoint[1] + this.r + 12, this.options.text).attr({"font-size": "12px"});
|
}
|
|
//隐藏的中心竖线
|
this.centerLineY = this.paper.path("M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
//隐藏的中心横线
|
this.centerLineX = this.paper.path("M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
this.ccelement = this.paper.circle(this.centerpoint[0], this.centerpoint[1], 2).attr({
|
"fill": "#ff0000",
|
"stroke": "ff0000"
|
}).hide(); //圆心
|
|
//添加父元素
|
if (!this.isLoad) {
|
this.addParent();
|
}
|
|
var _that = this;
|
if (this.completeState == 0) {
|
//菱形的外框点击
|
this.elementbox.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
//小菜单
|
$(".right").css({
|
"left": _that.cx + _that.r + 10 - _that.flow.getScrollx(),
|
"top": _that.cy - _that.r + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
_that.selected = true; //选中元素
|
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
_that.setText(wenbenid);
|
}
|
_that.text.show();
|
|
}
|
|
});
|
|
//菱形的外框双击
|
this.elementbox.dblclick(function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var tvalue = _that.text.attr("text");
|
$(".taskinput input").val(tvalue);
|
$(".taskinput input").attr("wenbenid", _that.id);
|
//显示文本框，-10任意调整的，为了显示在中间
|
$(".taskinput").css({
|
"left": _that.cx - _that.r - 10 - _that.flow.getScrollx(),
|
"top": (_that.cy - 10 + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()),
|
"width": 60
|
});
|
_that.selected = true;
|
//文本框本身隐藏
|
_that.text.hide();
|
}
|
|
});
|
|
//菱形的单击
|
this.element.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
_that.elementbox.show();
|
$(".right").css({
|
"left": _that.cx + _that.r + 10 - _that.flow.getScrollx(),
|
"top": _that.cy - _that.r + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
}
|
});
|
//菱形中图片的单击
|
this.img.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
_that.elementbox.show();
|
$(".right").css({
|
"left": _that.cx + _that.r + 10 - _that.flow.getScrollx(),
|
"top": _that.cy - _that.r + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
|
}
|
});
|
|
|
//网关节点的外层框拖动
|
var weiyiX = 0;
|
var weiyiY = 0;
|
var dropStatus = false;
|
var startX = 0;
|
var startY = 0;
|
var bpz = null;
|
var bpzcenter = null;
|
var startpointx = 0;
|
var startpointy = 0;
|
this.elementbox.drag(function (tx, ty, x, y, e) { //move中
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
|
dropStatus = true;
|
//限制去菜单那块
|
if (e.clientX < (134 + _that.flow._DEFALUTS_.dx + weiyiX)) {
|
e.clientX = 134 + _that.flow._DEFALUTS_.dx;
|
dropStatus = false;
|
return;
|
}
|
//限制画布最右侧边界
|
if (e.clientX > _that.flow._DEFALUTS_.width - (_that.r + _that.bmargin) * 2 + _that.flow._DEFALUTS_.dx + weiyiX) {
|
|
dropStatus = false;
|
return;
|
}
|
|
//限制头部
|
if (e.clientY < (0 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
e.clientY = 0 + _that.flow._DEFALUTS_.dy;
|
dropStatus = false;
|
return;
|
}
|
|
//限制画布底部边界
|
if (e.clientY > (0 + _that.flow._DEFALUTS_.height - (_that.r + _that.bmargin) * 2 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
dropStatus = false;
|
return;
|
}
|
|
this.attr({
|
"x": e.clientX - _that.flow._DEFALUTS_.dx - weiyiX,
|
"y": e.clientY - _that.flow._DEFALUTS_.dy - weiyiY
|
});
|
|
//碰撞检测
|
var L = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var R = L + _that.r * 2;
|
var T = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
var B = T + _that.r * 2;
|
bpz = _that.flow.collision(_that, L, R, T, B); //被碰撞
|
if (bpz != null && bpz.type != "subProcess") {
|
dropStatus = false;
|
}
|
bpzcenter = _that.flow.collisionCenterLine(_that, L, R, T, B); //中心线匹配
|
}
|
|
|
}, function (x, y, e) { //move开始
|
|
weiyiX = e.clientX - _that.flow._DEFALUTS_.dx - _that.bbox.x + _that.bmargin; //offsetX，不需要减1
|
weiyiY = e.clientY - _that.flow._DEFALUTS_.dy - _that.bbox.y + _that.bmargin; //offsetY，不需要减32
|
startX = _that.bbox.x - _that.bmargin;
|
startY = _that.bbox.y - _that.bmargin;
|
|
startpointx = e.clientX;
|
startpointy = e.clientY;
|
|
|
}, function (e) {//move结束
|
|
var endpointx = e.clientX;
|
var endpointy = e.clientY;
|
if (Math.abs(endpointx - startpointx) < 2 && Math.abs(endpointy - startpointy) < 2) {//阻止点击就移动
|
dropStatus = false;
|
}
|
|
if (dropStatus == true) {
|
|
var elemnetboxbbox = this.getBBox();
|
|
//判断是否进入子流程
|
if (bpz && bpz.type == "subProcess") {
|
//说明进入在子流程中
|
if (_that.parentElem == null || _that.parentElem.id != bpz.id) {
|
//表示新的入到一个子流程中
|
if (_that.linein.length > 0 || _that.lineout.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
$.messager.confirm('再次确认', '该网关节点进入子流程会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
_that.render(elemnetboxbbox.cx, elemnetboxbbox.cy, bpzcenter);
|
|
}
|
})
|
} else {
|
//没有线段
|
_that.render(elemnetboxbbox.cx, elemnetboxbbox.cy, bpzcenter);
|
|
}
|
}
|
} else if (bpz == null) {
|
if (_that.parentElem != null) {
|
//原来在小空间中
|
if (_that.linein.length > 0 || _that.lineout.length > 0) {
|
//如果含有线段，则必须提示，因为进入新的空间，旧的空间中的线段需要删除
|
var L = elemnetboxbbox.x;
|
var R = L + _that.r * 2;
|
var T = elemnetboxbbox.y;
|
var B = T + _that.r * 2;
|
|
//判断当前是否已经出了小空间
|
if (!_that.comeInSubProcess2(L, R, T, B)) {
|
$.messager.confirm('再次确认', '该网关节点原属于子流程空间，进入父空间时会删除原来的线段，还要继续进入吗?', function (r) {
|
if (!r) {
|
|
_that.elementbox.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
} else {
|
|
_that.render(elemnetboxbbox.cx, elemnetboxbbox.cy, bpzcenter);
|
|
}
|
})
|
} else {
|
//没有出小空间
|
_that.render(elemnetboxbbox.cx, elemnetboxbbox.cy, bpzcenter);
|
|
}
|
} else {
|
//没有线段
|
|
_that.render(elemnetboxbbox.cx, elemnetboxbbox.cy, bpzcenter);
|
|
}
|
} else {
|
//原来在大空间中
|
_that.render(elemnetboxbbox.cx, elemnetboxbbox.cy, bpzcenter);
|
|
}
|
}
|
|
} else {
|
this.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
}
|
|
dropStatus = false;
|
|
return false;
|
|
});
|
}
|
|
},
|
render: function (cx, cy, bpzcenter) { //网关的渲染
|
if (bpzcenter != null) {
|
if (bpzcenter[0] != null && bpzcenter[1] == null) {
|
//y轴吸附，x轴不吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
cx = bpzcenter[0].cx;
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
|
cx = bpzcenter[0].x + bpzcenter[0].w / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
}
|
|
} else if (bpzcenter[0] == null && bpzcenter[1] != null) {
|
|
//x轴吸附，y轴不吸附
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
cy = bpzcenter[1].cy;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
|
cy = bpzcenter[1].y + bpzcenter[1].h / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
|
}
|
|
} else if (bpzcenter[0] != null && bpzcenter[1] != null) {
|
//y轴吸附，x轴吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
cx = bpzcenter[0].cx;
|
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
|
cx = bpzcenter[0].x + bpzcenter[0].w / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
}
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
cy = bpzcenter[1].cy;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
|
cy = bpzcenter[1].y + bpzcenter[1].h / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
|
}
|
|
}
|
}
|
|
// this.cx = x + this.r;
|
// this.cy = y + this.r;
|
|
this.cx = cx;
|
this.cy = cy;
|
this.fourpoint = [{"x": this.cx - this.r, "y": this.cy}, {
|
"x": this.cx,
|
"y": this.cy - this.r
|
}, {"x": this.cx + this.r, "y": this.cy}, {"x": this.cx, "y": this.cy + this.r}];
|
|
//var c = paper.path("M10 10L90 90");
|
var str = "M" + this.fourpoint[0].x + "," + this.fourpoint[0].y + "L" + this.fourpoint[1].x + "," + this.fourpoint[1].y + "L" + this.fourpoint[2].x + "," + this.fourpoint[2].y + "L" + this.fourpoint[3].x + "," + this.fourpoint[3].y + "Z";
|
|
this.element.attr("path", str);
|
|
|
switch (this.detail) {
|
case "exclusiveGateway":
|
this.img.attr({"x": this.cx - 9, "y": this.cy - 9});
|
break;
|
case "parallelGateway":
|
this.img.attr({"x": this.cx - 10, "y": this.cy - 10});
|
break;
|
case "inclusiveGateway":
|
this.img.attr({"x": this.cx - 11, "y": this.cy - 11});
|
break;
|
|
}
|
|
this.bbox = this.element.getBBox();
|
|
|
//扩大的外框
|
this.elementbox.attr({"x": this.bbox.x - this.bmargin, "y": this.bbox.y - this.bmargin});
|
|
//修改坐标(L,R,T,B)
|
this.coordinate[0] = this.bbox.x;
|
this.coordinate[1] = this.bbox.x + this.bbox.width;
|
this.coordinate[2] = this.bbox.y;
|
this.coordinate[3] = this.bbox.y + this.bbox.height;
|
|
//中心点坐标
|
this.centerpoint = [this.cx, this.cy];
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate = [];
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
//文字
|
this.text.attr({"x": this.centerpoint[0], "y": this.centerpoint[1] + this.r + 12});
|
|
//移动隐藏的中心竖线
|
this.centerLineY.attr("path", "M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height);
|
|
//移动隐藏的中心横线
|
this.centerLineX.attr("path", "M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]);
|
|
|
this.ccelement.attr({"cx": this.centerpoint[0], "cy": this.centerpoint[1]});
|
|
//父元素处理
|
var parent = this.comeInSubProcess();
|
if (parent != null) {
|
//目前进入到子流程中
|
parent.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5});
|
}
|
//无论是否有父元素，都需要进入这个方法
|
this.addParent(parent);
|
|
var _that = this;
|
//所有出去的点，因为坐标变了，需要重绘
|
$.each(this.lineout, function (index, lineElem) {
|
|
lineElem.redrawStart(_that.cx, _that.cy);
|
});
|
|
//所有进入的点，因为坐标变了，需要重绘
|
$.each(this.linein, function (index, lineElem) {
|
//得到点
|
lineElem.redrawEnd(_that.cx, _that.cy);
|
});
|
|
|
},
|
setText: function (wenbenid) {
|
//得到文本框的值，重新赋值给text //Raphaël\nkicks\nbutt!
|
var tvalue = $(".taskinput input").val();
|
var temp = tvalue;
|
if ($.trim(tvalue) != "" && wenbenid == this.id) {
|
|
this.text.attr({"text": temp});
|
$(".taskinput input").val("");//清空
|
}
|
},
|
unSelect: function () { //gateway的unSelect
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
//外框隐藏
|
this.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5}).hide();
|
//圆心
|
this.ccelement.hide();
|
//文本框
|
if (this.selected == true) {
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
this.setText(wenbenid);
|
}
|
this.text.show();
|
|
}
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
|
//中心线隐藏
|
this.centerLineX.hide();
|
this.centerLineY.hide();
|
this.selected = false;
|
//完成情况的显示
|
if (this.completeState != 0) {
|
var name = "divshow_" + this.id;
|
$("#" + name).hide();
|
}
|
},
|
removeElement: function () {
|
this.element.remove();
|
this.centerLineX.remove();
|
this.centerLineY.remove();
|
this.elementbox.remove();
|
this.img.remove();
|
this.ccelement.remove();
|
this.text.remove();
|
//文本框回归
|
$(".taskinput").css({"left": -100, "top": -100});
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
|
//删除父元素中对本元素的调用
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
}
|
|
//移除相关的线
|
var tempoutlines = [];
|
$.each(this.lineout, function (index, line) {
|
tempoutlines.push(line);
|
});
|
$.each(tempoutlines, function (index, line) {
|
line && line.removeElement();
|
});
|
|
var tempinlines = [];
|
$.each(this.linein, function (index, line) {
|
tempinlines.push(line);
|
});
|
$.each(tempinlines, function (index, line) {
|
line && line.removeElement();
|
});
|
|
},
|
removeOutLine: function (line) {
|
var _that = this;
|
$.each(this.lineout, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.lineout.splice(index, 1);
|
}
|
})
|
},
|
removeInLine: function (line) {
|
var _that = this;
|
$.each(this.linein, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.linein.splice(index, 1);
|
}
|
})
|
},
|
comeInSubProcess: function () { //判断是否在子流程里面
|
var parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
return parent;
|
},
|
comeInSubProcess2: function (L, R, T, B) {//判断是否在子流程里面
|
console.log(L, R, T, B)
|
var parent = this.flow.collisionSubProcess(L, R, T, B); //被碰撞
|
return parent;
|
},
|
|
addParent: function (parent) {//在子流程里的处理
|
//判断落点是否在子流程内，如果落在子流程内，则需要修改parentElem
|
if (!parent) {
|
parent = this.flow.collisionSubProcess(this.coordinate[0], this.coordinate[1], this.coordinate[2], this.coordinate[3]); //被碰撞
|
}
|
if (parent != null) {
|
|
var ids = [];
|
$.each(parent.subElement, function (index, elem) {
|
ids.push(elem.id);
|
})
|
if ($.inArray(this.id, ids) == -1) {
|
this.parentElem = parent;
|
parent.subElement.push(this);
|
//表示新加入的到某个节点上，则原来的所有的线段需要移除
|
//移除相关的线
|
this.removeLine();
|
//节点置前
|
//this.element.toFront();
|
this.elementbox.toFront();
|
|
}
|
} else {//没有父元素
|
if (this.parentElem) {
|
this.parentElem.removeSubElement(this);
|
this.parentElem = null;
|
//表示新加入的到其他的，则原来子流程中的所有的线段需要移除
|
this.removeLine();
|
}
|
}
|
//return parent;
|
},
|
getText: function () {
|
return this.text.attr("text");
|
},
|
removeLine: function () { //删除线段
|
|
var tempoutlines = [];
|
$.each(this.lineout, function (index, line) {
|
if (!line.self) {
|
tempoutlines.push(line);
|
}
|
});
|
$.each(tempoutlines, function (index, line) {
|
line && line.removeElement();
|
if (line) {
|
delete this.flow.alllines[line.id]; //删除线元素
|
}
|
});
|
|
var tempinlines = [];
|
$.each(this.linein, function (index, line) {
|
if (!line.self) {
|
tempinlines.push(line);
|
}
|
});
|
$.each(tempinlines, function (index, line) {
|
line && line.removeElement();
|
if (line) {
|
delete this.flow.alllines[line.id]; //删除线元素
|
}
|
});
|
|
}
|
});
|
|
//子流程
|
function SubProcess(flow, options) {
|
this.flow = flow; //FlowDesigner类的实例
|
this.paper = flow.paper; //画布rapheal
|
this.options = options;
|
this.type = "subProcess";
|
this.selected = false;
|
this.id = options.id ? options.id : "";
|
this.isLoad = options.isLoad ? true : false; //是否是加载的元素
|
this.parentElem = null; //所属父级
|
//this.parentElemStr=options.parentElem; //加载时所属父级的名称
|
this.element = null; //任务方块
|
this.elementbox = null; //扩大外框
|
this.bbox = null; //外框
|
this.coordinate = []; //当前元素的上下左右坐标
|
this.fourpoint = []; //四个元素顶点坐标
|
this.centerLineCoordinate = []; //圆元素的上下左右四条边坐标，为显示中心线，小一点
|
this.centerMargin = 10; //向中心点向外4个方向扩展的距离
|
|
this.centerLineY = null;
|
this.centerLineX = null;
|
//控制点
|
this.$elementctrl1 = null;
|
this.$elementctrl4 = null;
|
//元素
|
this.x = options.x; //顶点坐标x
|
this.y = options.y;//顶点坐标y
|
this.w = options.w;//宽
|
this.h = options.h;//高
|
this.angle = 4; //弧度
|
this.bmargin = 4; //外框和元素的边距
|
this.ccelement = null; //圆心
|
this.centerpoint = []; //矩形的中心点
|
this.linein = []; //所有进来的线
|
this.lineout = [];//所有出去的线
|
this.subElement = [];//所有子元素
|
this.content = {}; //子流程内容
|
this.completeState = options.completeState || 0; //0 代表否 1代表已完 2代表正当 3代表还未开始
|
|
}
|
|
SubProcess.prototype = $.extend(SubProcess.prototype, {
|
init: function () {
|
var number = this.flow.createSubprocessNum();
|
var tempName = (new Date()).getTime();
|
if (!this.isLoad) {
|
this.id = "subProcess_" + tempName;
|
}
|
|
//矩形框
|
|
switch (this.completeState) {
|
|
case 1://蓝色
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#e0e9fe",
|
"cursor": "pointer",
|
"stroke": "#2632aa"
|
}).toBack();
|
break;
|
case 2://绿色
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#ebf8eb",
|
"cursor": "pointer",
|
"stroke": "#017501"
|
}).toBack();
|
break;
|
case 3://灰色
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#dadada",
|
"cursor": "pointer",
|
"stroke": "#acacac"
|
}).toBack();
|
break;
|
default:
|
this.element = this.paper.rect(this.x, this.y, this.w, this.h, this.angle).attr({
|
"fill": "#ffffff",
|
"fill-opacity": 0,
|
"cursor": "pointer"
|
}).toBack();
|
break;
|
}
|
|
//外框
|
this.bbox = this.element.getBBox();
|
//扩大外框
|
this.elementbox = this.paper.rect(this.bbox.x - this.bmargin, this.bbox.y - this.bmargin, this.bbox.width + this.bmargin * 2, this.bbox.height + this.bmargin * 2, false).attr({
|
"stroke-dasharray": "- ",
|
stroke: "#000000",
|
"stroke-width": 0.5,
|
"fill": "#ff0000",
|
"fill-opacity": 0
|
});
|
|
//坐标(L,R,T,B)
|
this.coordinate.push(this.bbox.x, this.bbox.x + this.bbox.width, this.bbox.y, this.bbox.y + this.bbox.height);
|
|
//根据中心点和宽度得到四个顶点 //定点开始顺时针
|
this.fourpoint = [{"x": this.x, "y": this.y}, {"x": this.x + this.w, "y": this.y}, {
|
"x": this.x + this.w,
|
"y": this.y + this.h
|
}, {"x": this.x, "y": this.y + this.h}];
|
//文字
|
if (!this.isLoad) {
|
this.text = this.paper.text(this.bbox.x + this.bbox.width / 2, this.bbox.y + 14, "子流程" + number).attr({"font-size": "14px"});
|
|
} else {
|
this.text = this.paper.text(this.bbox.x + this.bbox.width / 2, this.bbox.y + 14, this.options.text).attr({"font-size": "14px"});
|
}
|
|
//控制点,-10.+8就是想放在框外边
|
this.$elementctrl1 = $("<div class='resizehandle1' style='left:" + (this.bbox.x - this.bmargin - 10 - this.flow.getScrollx()) + "px; top:" + (this.bbox.y - this.bmargin - 10 + this.flow._DEFALUTS_.dy - this.flow.getScrolly()) + "px;'></div>");
|
$("#" + this.flow._DEFALUTS_.id).append(this.$elementctrl1);
|
|
this.$elementctrl4 = $("<div class='resizehandle4' style='left:" + (this.bbox.x - this.bmargin + this.bbox.width + 8 - this.flow.getScrollx()) + "px; top:" + (this.bbox.y - this.bmargin + this.bbox.height + 8 + this.flow._DEFALUTS_.dy - this.flow.getScrolly()) + "px;'></div>");
|
$("#" + this.flow._DEFALUTS_.id).append(this.$elementctrl4);
|
|
//中心点坐标
|
this.centerpoint = [this.bbox.x + this.bbox.width / 2, this.bbox.y + this.bbox.height / 2];
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
//隐藏的中心竖线
|
this.centerLineY = this.paper.path("M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
//隐藏的中心横线
|
this.centerLineX = this.paper.path("M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]).attr({
|
"stroke-width": 2,
|
"stroke": "#c1c1c1",
|
"stroke-dasharray": "- "
|
}).hide();
|
|
|
this.ccelement = this.paper.circle(this.centerpoint[0], this.centerpoint[1], 2).attr({
|
"fill": "#ff0000",
|
"stroke": "ff0000"
|
}).hide(); //圆心
|
var _that = this;
|
if (this.completeState == 0) {
|
//子流程的外框点击
|
this.elementbox.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
//小菜单
|
$(".right").css({
|
"left": _that.x + _that.w + 10 - _that.flow.getScrollx(),
|
"top": _that.y + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
|
//隐藏控制点
|
_that.$elementctrl1.hide();
|
_that.$elementctrl4.hide();
|
|
_that.selected = true; //选中元素
|
_that.elementbox.show();
|
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
_that.setText(wenbenid);
|
}
|
_that.text.show();
|
|
}
|
|
|
});
|
|
//子流程的外框双击
|
this.elementbox.dblclick(function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var tvalue = _that.text.attr("text");
|
$(".taskinput input").val(tvalue);
|
$(".taskinput input").attr("wenbenid", _that.id);
|
//显示文本框
|
$(".taskinput").css({
|
"left": _that.x - _that.flow.getScrollx(),
|
"top": (_that.y + 2 + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()),
|
"width": _that.w
|
});
|
_that.selected = true;
|
//文本框本身隐藏
|
_that.text.hide();
|
|
}
|
|
});
|
//子流程的单击
|
this.element.click(function (e) {
|
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
_that.elementbox.show();
|
$(".right").css({
|
"left": _that.x + _that.w + 10 - _that.flow.getScrollx(),
|
"top": _that.y + _that.flow._DEFALUTS_.dy - _that.flow.getScrolly()
|
}).attr("tempid", _that.id).end().find(".sequence").attr("tempid", _that.id).show();
|
//显示控制点
|
_that.$elementctrl1.show();
|
_that.$elementctrl4.show();
|
|
}
|
});
|
|
|
//子流程节点的外层框拖动
|
var weiyiX = 0;
|
var weiyiY = 0;
|
var dropStatus = false;
|
var startX = 0;
|
var startY = 0;
|
var bpz = null;
|
var bpzcenter = null;
|
var startpointx = 0;
|
var startpointy = 0;
|
this.elementbox.drag(function (tx, ty, x, y, e) { //move中
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
|
dropStatus = true;
|
//限制去菜单那块
|
if (e.clientX < (134 + _that.flow._DEFALUTS_.dx + weiyiX)) {
|
e.clientX = 134 + _that.flow._DEFALUTS_.dx;
|
dropStatus = false;
|
|
return;
|
}
|
|
//限制画布最右侧边界
|
if (e.clientX > _that.flow._DEFALUTS_.width - (_that.w + _that.bmargin * 2) + _that.flow._DEFALUTS_.dx + weiyiX) {
|
dropStatus = false;
|
return;
|
}
|
|
//限制头部
|
if (e.clientY < (0 + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
e.clientY = 0 + _that.flow._DEFALUTS_.dy;
|
dropStatus = false;
|
return;
|
}
|
|
//限制画布底部边界
|
if (e.clientY > (0 + _that.flow._DEFALUTS_.height - (_that.h + _that.bmargin * 2) + _that.flow._DEFALUTS_.dy + weiyiY)) {
|
dropStatus = false;
|
return;
|
}
|
|
this.attr({
|
"x": e.clientX - _that.flow._DEFALUTS_.dx - weiyiX,
|
"y": e.clientY - _that.flow._DEFALUTS_.dy - weiyiY
|
});
|
|
//碰撞检测
|
var L = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var R = L + _that.w;
|
var T = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
var B = T + _that.h;
|
//console.log(_that.id, L, R, T, B);
|
bpz = _that.flow.collision(_that, L, R, T, B); //被碰撞
|
if (bpz != null) {
|
dropStatus = false;
|
}
|
bpzcenter = _that.flow.subProcessCollisionCenterLine(_that, L, R, T, B); //中心线匹配
|
|
}
|
|
|
}, function (x, y, e) { //move开始
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
weiyiX = e.clientX - _that.flow._DEFALUTS_.dx - _that.bbox.x + _that.bmargin; //offsetX，不需要减1
|
weiyiY = e.clientY - _that.flow._DEFALUTS_.dy - _that.bbox.y + _that.bmargin; //offsetY，不需要减32
|
startX = _that.bbox.x - _that.bmargin;
|
startY = _that.bbox.y - _that.bmargin;
|
|
startpointx = e.clientX;
|
startpointy = e.clientY;
|
|
|
}, function (e) {//move结束
|
|
var endpointx = e.clientX;
|
var endpointy = e.clientY;
|
if (Math.abs(endpointx - startpointx) < 2 && Math.abs(endpointy - startpointy) < 2) {//阻止点击就移动
|
dropStatus = false;
|
}
|
|
if (dropStatus == true) {
|
var x = e.clientX - _that.flow._DEFALUTS_.dx - weiyiX;
|
var y = e.clientY - _that.flow._DEFALUTS_.dy - weiyiY;
|
|
//本身渲染
|
var dxy = _that.render(x, y, bpzcenter);
|
|
|
//子元素的移动
|
//var dx=endpointx - startpointx;
|
//var dy=endpointy - startpointy;
|
var dx = dxy.dx;
|
var dy = dxy.dy;
|
var lines = [];
|
var linestrs = [];
|
//收集线段，必须先收集线段，修改小圆点坐标，再收集节点。因为节点上需要修改起始和结束的位置，需要已经修改好的小圆点
|
$.each(_that.subElement, function (index, elem) {
|
|
switch (elem.type) {
|
case "end":
|
|
$.each(elem.linein, function (index, line) {
|
if ($.inArray(line.id, linestrs) == -1) {
|
linestrs.push(line.id);
|
lines.push(line);
|
}
|
});
|
break;
|
|
case "start":
|
$.each(elem.lineout, function (index, line) {
|
|
if ($.inArray(line.id, linestrs) == -1) {
|
linestrs.push(line.id);
|
lines.push(line);
|
}
|
});
|
break;
|
case "gateway":
|
case "userTask":
|
$.each(elem.linein, function (index, line) {
|
if ($.inArray(line.id, linestrs) == -1) {
|
linestrs.push(line.id);
|
lines.push(line);
|
}
|
});
|
$.each(elem.lineout, function (index, line) {
|
if ($.inArray(line.id, linestrs) == -1) {
|
linestrs.push(line.id);
|
lines.push(line);
|
}
|
})
|
break;
|
}
|
})
|
//修改线段上的小圆点坐标
|
//线上小圆点的渲染
|
$.each(lines, function (index, line) {
|
$.each(line.linepoints, function (index, sc) {
|
var circlepxindex = sc.belongLine.currentPointInPathIndex(sc.cx, sc.cy);
|
var newcx = sc.cx + dx, newcy = sc.cy + dy;
|
sc.render({"cx": newcx, "cy": newcy});
|
sc.belongLine.linepointsxy[circlepxindex][1] = newcx;
|
sc.belongLine.linepointsxy[circlepxindex][2] = newcy;
|
|
//重写线段
|
sc.belongLine.linestr = sc.belongLine.combPath();
|
sc.belongLine.line.attr("path", sc.belongLine.linestr);
|
//修改text坐标
|
sc.belongLine.renderText();
|
})
|
|
})
|
|
//收集元素
|
$.each(_that.subElement, function (index, elem) {
|
|
switch (elem.type) {
|
case "end":
|
case "gateway":
|
case "start":
|
var cx = elem.cx + dx, cy = elem.cy + dy;
|
elem.render(cx, cy, null);
|
break;
|
|
case "userTask":
|
var x = elem.x + dx, y = elem.y + dy;
|
elem.render(x, y, null);
|
break;
|
}
|
});
|
|
|
} else {
|
this.attr({"x": startX, "y": startY}); //不能落下的地方就返回
|
}
|
|
dropStatus = false;
|
|
return false;
|
|
});
|
|
|
//子流程的控制点4的移动
|
var ctrl4startx = 0;
|
var ctrl4starty = 0;
|
var ctrl4oldstartx = 0;
|
var ctrl4oldstarty = 0;
|
|
this.$elementctrl4.draggable({
|
cursor: "se-resize",
|
revert: true,
|
onStartDrag: function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
ctrl4oldstartx = ctrl4startx = e.clientX;
|
ctrl4oldstarty = ctrl4starty = e.clientY;
|
}
|
},
|
onDrag: function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var elementboxbox = _that.elementbox.getBBox();
|
|
var width = elementboxbox.width;
|
var height = elementboxbox.height;
|
var ctrl4dragpointx = e.clientX;
|
var ctrl4dragpointy = e.clientY;
|
width = width + ctrl4dragpointx - ctrl4startx;
|
height = height + ctrl4dragpointy - ctrl4starty;
|
|
_that.elementbox.attr({"width": width, "height": height});
|
ctrl4startx = ctrl4dragpointx;
|
ctrl4starty = ctrl4dragpointy;
|
}
|
|
},
|
onStopDrag: function (e) {
|
if (_that.flow.addPoint == false && _that.flow.subtractPoint == false) {
|
var ctrl4endx = e.clientX;
|
var ctrl4endy = e.clientY;
|
var dwidth = ctrl4endx - ctrl4oldstartx;
|
var dheight = ctrl4endy - ctrl4oldstarty;
|
|
var elementWidth = _that.element.attr("width");
|
var elementHeight = _that.element.attr("height");
|
_that.element.attr({"width": elementWidth + dwidth, "height": elementHeight + dheight});
|
|
_that.w = elementWidth + dwidth;
|
_that.h = elementHeight + dheight;
|
|
_that.render(_that.bbox.x, _that.bbox.y, null);
|
|
}
|
}
|
|
})
|
|
//子流程的控制点1的移动(移动的是left，top，width，height)
|
var ctrl1startx = 0;
|
var ctrl1starty = 0;
|
var ctrl1oldstartx = 0;
|
var ctrl1oldstarty = 0;
|
var ctr1tx = 0;
|
var ctr1ty = 0;
|
this.$elementctrl1.draggable({
|
cursor: "nw-resize",
|
revert: true,
|
onStartDrag: function (e) {
|
ctrl1oldstartx = ctrl1startx = e.clientX;
|
ctrl1oldstarty = ctrl1starty = e.clientY;
|
var oldleft = $(this).css("left");
|
var oldtop = $(this).css("top");
|
ctr1tx = e.clientX - parseFloat(oldleft);
|
ctr1ty = e.clientY - parseFloat(oldtop);
|
|
},
|
onDrag: function (e) {
|
var elementboxbox = _that.elementbox.getBBox();
|
var width = elementboxbox.width;
|
var height = elementboxbox.height;
|
|
var ctrl1dragpointx = e.clientX;
|
var ctrl1dragpointy = e.clientY;
|
width = width - (ctrl1dragpointx - ctrl1startx);
|
height = height - (ctrl1dragpointy - ctrl1starty);
|
var ctr1left = e.clientX - ctr1tx - _that.flow._DEFALUTS_.dx + 10;
|
var ctr1top = e.clientY - ctr1ty - _that.flow._DEFALUTS_.dy + 10;
|
_that.elementbox.attr({"x": ctr1left, "y": ctr1top, "width": width, "height": height});
|
ctrl1startx = ctrl1dragpointx;
|
ctrl1starty = ctrl1dragpointy;
|
|
},
|
onStopDrag: function (e) {
|
var ctrl1endx = e.clientX;
|
var ctrl1endy = e.clientY;
|
var x = ctrl1endx - ctr1tx - _that.flow._DEFALUTS_.dx + _that.bmargin + 10;
|
var y = ctrl1endy - ctr1ty - _that.flow._DEFALUTS_.dy + _that.bmargin + 10;
|
|
var dwidth = -(ctrl1endx - ctrl1oldstartx);
|
var dheight = -(ctrl1endy - ctrl1oldstarty);
|
|
var elementWidth = _that.element.attr("width");
|
var elementHeight = _that.element.attr("height");
|
//元素
|
_that.element.attr({
|
"x": x,
|
"y": y,
|
"width": elementWidth + dwidth,
|
"height": elementHeight + dheight
|
});
|
//属性
|
_that.x = x;
|
_that.y = y;
|
_that.w = elementWidth + dwidth;
|
_that.h = elementHeight + dheight;
|
|
_that.render(x, y, null);
|
|
}
|
|
|
})
|
|
}
|
},
|
render: function (x, y, bpzcenter) { //子流程的渲染
|
if (bpzcenter != null) {
|
if (bpzcenter[0] != null && bpzcenter[1] == null) {
|
//y轴吸附，x轴不吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
x = bpzcenter[0].cx - this.w / 2;
|
|
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
|
x = bpzcenter[0].x + bpzcenter[0].w / 2 - this.w / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
|
}
|
|
} else if (bpzcenter[0] == null && bpzcenter[1] != null) {
|
|
//x轴吸附，y轴不吸附
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
y = bpzcenter[1].cy - this.h / 2;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
y = bpzcenter[1].y + bpzcenter[1].h / 2 - this.h / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
|
}
|
|
} else if (bpzcenter[0] != null && bpzcenter[1] != null) {
|
//y轴吸附，x轴吸附
|
if (bpzcenter[0].type == "start" || bpzcenter[0].type == "end" || bpzcenter[0].type == "gateway") {
|
x = bpzcenter[0].cx - this.w / 2;
|
|
} else if (bpzcenter[0].type == "userTask" || bpzcenter[0].type == "subProcess") {
|
|
x = bpzcenter[0].x + bpzcenter[0].w / 2 - this.w / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
|
}
|
if (bpzcenter[1].type == "start" || bpzcenter[1].type == "end" || bpzcenter[1].type == "gateway") {
|
y = bpzcenter[1].cy - this.h / 2;
|
|
} else if (bpzcenter[1].type == "userTask" || bpzcenter[1].type == "subProcess") {
|
|
y = bpzcenter[1].y + bpzcenter[1].h / 2 - this.h / 2; //因为2个元素的大小不一定相同，先到中心点，再减去自身的一半
|
|
}
|
|
}
|
}
|
|
var oldx = this.x;
|
var oldy = this.y;
|
this.x = x;
|
this.y = y;
|
this.element.attr({"x": x, "y": y});
|
this.bbox = this.element.getBBox();
|
|
this.text.attr({"x": this.bbox.x + this.bbox.width / 2, "y": this.bbox.y + 14})
|
//扩大的外框
|
this.elementbox.attr({"x": this.bbox.x - this.bmargin, "y": this.bbox.y - this.bmargin});
|
|
//修改坐标(L,R,T,B)
|
this.coordinate[0] = this.bbox.x;
|
this.coordinate[1] = this.bbox.x + this.bbox.width;
|
this.coordinate[2] = this.bbox.y;
|
this.coordinate[3] = this.bbox.y + this.bbox.height;
|
|
|
//中心点坐标
|
this.centerpoint = [this.bbox.x + this.w / 2, this.bbox.y + this.h / 2];
|
//圆心
|
this.ccelement.attr({"cx": this.centerpoint[0], "cy": this.centerpoint[1]});
|
|
//根据中心点和宽度高度得到四个顶点 //定点开始顺时针
|
this.fourpoint = [{"x": this.x, "y": this.y}, {"x": this.x + this.w, "y": this.y}, {
|
"x": this.x + this.w,
|
"y": this.y + this.h
|
}, {"x": this.x, "y": this.y + this.h}];
|
|
//中心点向外扩展centerMargin=10,得到4条边，坐标(L,R,T,B)
|
this.centerLineCoordinate = [];
|
this.centerLineCoordinate.push(this.centerpoint[0] - this.centerMargin, this.centerpoint[0] + this.centerMargin, this.centerpoint[1] - this.centerMargin, this.centerpoint[1] + this.centerMargin);
|
|
|
//移动隐藏的中心竖线
|
this.centerLineY.attr("path", "M" + this.centerpoint[0] + ",0L" + this.centerpoint[0] + "," + this.flow._DEFALUTS_.height);
|
|
//移动隐藏的中心横线
|
this.centerLineX.attr("path", "M0," + this.centerpoint[1] + "L" + this.flow._DEFALUTS_.width + "," + this.centerpoint[1]);
|
|
|
//控制点
|
this.$elementctrl1.css({
|
"left": (this.bbox.x - this.bmargin - 10),
|
"top": (this.bbox.y - this.bmargin - 10 + this.flow._DEFALUTS_.dy)
|
});
|
|
this.$elementctrl4.css({
|
"left": (this.bbox.x - this.bmargin + this.bbox.width + 8),
|
"top": (this.bbox.y - this.bmargin + this.bbox.height + 8 + this.flow._DEFALUTS_.dy)
|
});
|
|
//所有出去的点，因为坐标变了，需要重绘
|
var _that = this;
|
$.each(this.lineout, function (index, lineElem) {
|
if (!lineElem.self) { //不是指向自身的点
|
lineElem.redrawStart(_that.bbox.cx, _that.bbox.cy);
|
} else {
|
//是指向自身的线，需要和节点一起变化，重绘
|
lineElem.renderMoveSelf();
|
}
|
});
|
|
//所有进入的点，因为坐标变了，需要重绘
|
$.each(this.linein, function (index, lineElem) {
|
//得到点
|
if (!lineElem.self) {
|
lineElem.redrawEnd(_that.bbox.cx, _that.bbox.cy);
|
} else {
|
//是指向自身的线，需要和节点一起变化，重绘
|
lineElem.renderMoveSelf();
|
}
|
});
|
|
return {"dx": x - oldx, "dy": y - oldy};
|
},
|
unSelect: function () {//非选中状态
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
|
if (this.selected == true) {
|
var wenbenid = $(".taskinput input").attr("wenbenid");
|
if (wenbenid) {
|
this.setText(wenbenid);
|
}
|
this.text.show();
|
|
}
|
|
//文本框回归原位
|
$(".taskinput").css({"left": -100, "top": -100});
|
|
//圆心
|
this.ccelement.hide();
|
//外框隐藏
|
this.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5}).hide();
|
//中心线隐藏
|
this.centerLineX.hide();
|
this.centerLineY.hide();
|
this.$elementctrl1.hide();
|
this.$elementctrl4.hide();
|
this.selected = false;
|
//完成情况的显示
|
if (this.completeState != 0) {
|
var name = "divshow_" + this.id;
|
$("#" + name).hide();
|
}
|
},
|
|
setText: function (wenbenid) {
|
//得到文本框的值，重新赋值给text //Raphaël\nkicks\nbutt!
|
var tvalue = $(".taskinput input").val();
|
var temp = tvalue;
|
if ($.trim(tvalue) != "" && wenbenid == this.id) {
|
var zishu = Math.floor(this.w / 14); //一行可显示的中文字数
|
var hangshu = parseInt(tvalue.length / zishu) + 1; //行数
|
var arr = [];
|
if (tvalue.length > zishu) {
|
for (var j = 0; j < hangshu; j++) {
|
for (var i = j * zishu; i < (j + 1) * zishu; i = i + 1) {
|
if (tvalue[i]) {
|
if (arr[j]) {
|
arr[j] += tvalue[i];
|
} else {
|
arr[j] = tvalue[i];
|
}
|
}
|
}
|
}
|
temp = arr.join('\n');
|
}
|
|
|
this.text.attr({"text": temp});
|
$(".taskinput input").val("");//清空
|
}
|
},
|
removeSubElement: function (elem) { //删除子元素
|
var _that = this;
|
$.each(this.subElement, function (index, ele) {
|
if (ele && ele.id == elem.id) {
|
_that.subElement.splice(index, 1);
|
}
|
});
|
},
|
removeElement: function () { //子流程删除本身
|
this.element.remove();
|
this.centerLineX.remove();
|
this.centerLineY.remove();
|
this.elementbox.remove();
|
this.$elementctrl1.remove();
|
this.$elementctrl4.remove();
|
this.text.remove();
|
this.ccelement.remove();
|
//小菜单回归原位
|
$(".right").css({"left": -100, "top": -100});
|
//文本框回归
|
$(".taskinput").css({"left": -100, "top": -100});
|
|
//移除相关的线
|
var tempoutlines = [];
|
$.each(this.lineout, function (index, line) {
|
tempoutlines.push(line);
|
});
|
$.each(tempoutlines, function (index, line) {
|
line && line.removeElement();
|
});
|
|
var tempinlines = [];
|
$.each(this.linein, function (index, line) {
|
tempinlines.push(line);
|
});
|
$.each(tempinlines, function (index, line) {
|
line && line.removeElement();
|
});
|
},
|
removeOutLine: function (line) {
|
var _that = this;
|
$.each(this.lineout, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.lineout.splice(index, 1);
|
}
|
})
|
},
|
removeInLine: function (line) {
|
var _that = this;
|
$.each(this.linein, function (index, elem) {
|
if (elem && elem.id == line.id) {
|
_that.linein.splice(index, 1);
|
}
|
})
|
},
|
getText: function () {
|
return this.text.attr("text");
|
}
|
|
})
|
|
var FlowDesigner = function (options) { //构造函数
|
if (!(this instanceof FlowDesigner)) {
|
console.log("FlowDesigner 是一个构造函数，应该用new关键字调用!");
|
return;
|
}
|
this.allnodes = {};//设计器上所有节点集合
|
this.alllines = {};//设计器上所有线条
|
this.addPoint = false;//是否正在线上加圆点的状态
|
this.subtractPoint = false; //是否减点状态
|
|
//默认配置参数
|
this._DEFALUTS_ = {
|
"id": "container",
|
"mode": "design", //设计模式design 查看模式view
|
"height": 500,
|
"width": 500,
|
|
"dx": 0, //画布距离屏幕的x偏移量
|
"dy": 46, //画布距离屏幕的y偏移量
|
|
"startmax": 0, //计数
|
"taskmax": 0 //任务编号计数
|
, "linemax": 0 //线段编号计数
|
, "smallcirclemax": 0 //线上的小圆点编号累加
|
, "endmax": 0 //end节点计数
|
, "gatewaymax": 0 //网关的计数
|
, "subprocessmax": 0 //子流程的计数
|
|
}
|
|
$.extend(this._DEFALUTS_, options || {});
|
this.paper = Raphael(this._DEFALUTS_.id, this._DEFALUTS_.width, this._DEFALUTS_.height);
|
$("#" + this._DEFALUTS_.id).css({
|
"width": this._DEFALUTS_.width,
|
"height": this._DEFALUTS_.height
|
});
|
var _that = this;
|
$("#" + this._DEFALUTS_.id).click(function (e) {
|
|
//IE8下点击画布是DIV
|
if ((e.target.nodeName == "DIV" || e.target.nodeName == "svg") && (_that.addPoint == false && _that.subtractPoint == false)) {
|
_that.allUnSelect();
|
} else if (_that.addPoint == true) {
|
|
//检查落点是否在线上
|
var x = e.clientX - _that._DEFALUTS_.dx;
|
var y = e.clientY - _that._DEFALUTS_.dy;
|
//console.log("x,y",x,y);
|
var x1, y1, x2, y2, tempy, tempx;
|
var arrLen = 0;
|
$.each(_that.alllines, function (i, line) {
|
arrLen = line.linepointsxy.length;
|
//console.log(line.linepointsxy);
|
$.each(line.linepointsxy, function (index, arr) {
|
if (index + 1 < arrLen) {
|
var x1 = arr[1];
|
var y1 = arr[2];
|
var x2 = line.linepointsxy[index + 1][1];
|
var y2 = line.linepointsxy[index + 1][2];
|
//console.log("察看",x1,y1,x2,y2);
|
if (floatToFix4(x1) != floatToFix4(x2)) { //x1!=x2
|
tempy = _that.getYLinePointFormula(x1, y1, x2, y2, x);
|
var max = Math.max(x1, x2);
|
var min = Math.min(x1, x2);
|
//console.log("tempy",tempy);
|
if (floatToFix4(tempy - 1.5) <= floatToFix4(y) && floatToFix4(y) <= floatToFix4(tempy + 1.5) && x > min && x < max) {
|
//表示找到线和点的位置
|
//加入到该线段上
|
|
_that.addLinePosition(line, index + 1, x, y);
|
// //关掉加点状态
|
// _that.addPoint=false;
|
|
return false;
|
}
|
|
} else {
|
tempx = _that.getXLinePointFormula(x1, y1, x2, y2, y);
|
//console.log("tempx",tempx);
|
var max = Math.max(y1, y2);
|
var min = Math.min(y1, y2);
|
if (floatToFix4(tempx - 1.5) <= floatToFix4(x) && floatToFix4(x) <= floatToFix4(tempx + 1.5) && y > min && y < max) {
|
//表示找到线和点的位置
|
//加入到该线段上
|
_that.addLinePosition(line, index + 1, x, y);
|
|
// //关掉加点状态
|
// _that.addPoint=false;
|
|
|
return false;
|
}
|
|
}
|
|
}
|
|
});
|
|
})
|
}
|
|
|
})
|
}
|
|
FlowDesigner.prototype.getScrollx = function () { //出现滚动条时的dx
|
|
return parseInt($("#" + this._DEFALUTS_.id).parent().scrollLeft());
|
}
|
|
FlowDesigner.prototype.getScrolly = function () { //出现滚动条时的dx
|
return parseInt($("#" + this._DEFALUTS_.id).parent().scrollTop());
|
}
|
|
FlowDesigner.prototype.zoomin = function () {
|
var options = this.getOptions();
|
var width = options.width * 1.1;
|
var height = options.height * 1.1;
|
options.width = width;
|
options.height = height;
|
|
this.paper.setSize(width, height);
|
|
$("#" + this._DEFALUTS_.id).css({"height": height, "width": width});
|
|
}
|
|
FlowDesigner.prototype.zoomout = function () {
|
var options = this.getOptions();
|
var width = options.width / 1.1;
|
var height = options.height / 1.1;
|
options.width = width;
|
options.height = height;
|
|
this.paper.setSize(width, height);
|
$("#" + this._DEFALUTS_.id).css({"height": height, "width": width});
|
|
}
|
|
FlowDesigner.prototype.getOptions = function () {
|
|
return this._DEFALUTS_;
|
}
|
/*start编号累加*/
|
FlowDesigner.prototype.createStartNodeNum = function () {
|
this._DEFALUTS_.startmax++;
|
return this._DEFALUTS_.startmax;
|
}
|
|
/*usertask编号累加*/
|
FlowDesigner.prototype.createTaskNum = function () {
|
this._DEFALUTS_.taskmax++;
|
return this._DEFALUTS_.taskmax;
|
}
|
|
/*线编号累加*/
|
FlowDesigner.prototype.createLineNum = function () {
|
this._DEFALUTS_.linemax++;
|
return this._DEFALUTS_.linemax;
|
}
|
|
/*线上的小圆点编号累加*/
|
FlowDesigner.prototype.createSmallCircleNodeNum = function () {
|
this._DEFALUTS_.smallcirclemax++;
|
return this._DEFALUTS_.smallcirclemax;
|
}
|
|
/*线上的end编号累加*/
|
FlowDesigner.prototype.createEndNodeNum = function () {
|
this._DEFALUTS_.endmax++;
|
return this._DEFALUTS_.endmax;
|
|
}
|
|
/*线上的gateway编号累加*/
|
FlowDesigner.prototype.createGatewayNum = function () {
|
this._DEFALUTS_.gatewaymax++;
|
return this._DEFALUTS_.gatewaymax;
|
|
}
|
|
/*线上的子流程编号累加*/
|
FlowDesigner.prototype.createSubprocessNum = function () {
|
this._DEFALUTS_.subprocessmax++;
|
return this._DEFALUTS_.subprocessmax;
|
|
}
|
|
|
/*清除画布所有元素*/
|
FlowDesigner.prototype.clear = function () {
|
var _that = this;
|
$.messager.confirm('再次确认', '您确定要清除画布中所有元素?', function (r) {
|
if (r) {
|
$.each(_that.allnodes, function (name, elem) {
|
elem.removeElement();
|
});
|
$.each(_that.alllines, function (name, elem) {
|
elem.removeElement();
|
})
|
_that.paper.clear(); //全部元素移除
|
_that.allnodes = {};
|
_that.alllines = {};
|
}
|
});
|
|
|
}
|
|
/*清除画布所有元素,不需要确认*/
|
FlowDesigner.prototype.clear2 = function () {
|
var _that = this;
|
|
$.each(_that.allnodes, function (name, elem) {
|
elem.removeElement();
|
});
|
$.each(_that.alllines, function (name, elem) {
|
elem.removeElement();
|
})
|
_that.paper.clear(); //全部元素移除
|
_that.allnodes = {};
|
_that.alllines = {};
|
|
}
|
|
|
/*去掉所有元素的选择状态*/
|
FlowDesigner.prototype.allUnSelect = function () {
|
//循环所有节点，调用自身的unselect方法
|
$.each(this.allnodes, function (name, elem) {
|
|
elem.unSelect();
|
|
});
|
|
//循环所有线，调用自身的unselect方法
|
$.each(this.alllines, function (name, elem) {
|
|
elem.unSelect();
|
|
});
|
|
}
|
|
/*找出所有指定类型的节点*/
|
FlowDesigner.prototype.findAllNodeByType = function (type) {
|
|
var findAll = [];
|
$.each(this.allnodes, function (name, elem) {
|
|
if (elem.type == type) {
|
findAll.push({"id": elem.id, "text": elem.getText()});
|
}
|
|
});
|
return findAll;
|
}
|
|
|
/*两个方块间的碰撞检测moveid是正在移动元素的类实例的id ，后面的4个参数是移动元素的四个坐标，返回一个被撞元素 */
|
FlowDesigner.prototype.collision = function (move, L1, R1, T1, B1) {
|
|
var bpz = null; //被碰撞元素
|
if (move.type != "subProcess") {
|
$.each(this.allnodes, function (id, elem) {
|
if (id != move.id) {
|
if (elem.type != "subProcess") {
|
if (pz(L1, R1, T1, B1, elem.coordinate[0], elem.coordinate[1], elem.coordinate[2], elem.coordinate[3])) {
|
bpz = elem;
|
elem.elementbox.show().attr({"stroke": "#ff0000", "stroke-width": 2});
|
//elem.$moveDiv.css({"borderColor":"#ff0000","zIndex":0});
|
return false;
|
} else {
|
elem.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5});
|
//elem.$moveDiv.css({"borderColor":"#000000","zIndex":-1});
|
}
|
} else {
|
if (pz(L1, R1, T1, B1, elem.coordinate[0], elem.coordinate[1], elem.coordinate[2], elem.coordinate[3]) && (move.parentElem == null || elem.id != move.parentElem.id)) {
|
bpz = elem;
|
|
//绿色
|
elem.elementbox.show().attr({"stroke": "#84ff20", "stroke-width": 2});
|
//elem.$moveDiv.css({"borderColor":"#ff0000","zIndex":0});
|
return false;
|
} else {
|
elem.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5});
|
//elem.$moveDiv.css({"borderColor":"#000000","zIndex":-1});
|
}
|
}
|
|
}
|
});
|
} else {//移动元素是子流程时
|
$.each(this.allnodes, function (id, elem) {
|
if (id != move.id) {
|
if (elem.parentElem == null) {//只有外部元素才匹配
|
if (pz(L1, R1, T1, B1, elem.coordinate[0], elem.coordinate[1], elem.coordinate[2], elem.coordinate[3])) {
|
bpz = elem;
|
elem.elementbox.show().attr({"stroke": "#ff0000", "stroke-width": 2});
|
//elem.$moveDiv.css({"borderColor":"#ff0000","zIndex":0});
|
return false;
|
} else {
|
elem.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5});
|
//elem.$moveDiv.css({"borderColor":"#000000","zIndex":-1});
|
}
|
}
|
}
|
});
|
}
|
|
return bpz;
|
}
|
|
FlowDesigner.prototype.collisionSubProcess = function (L1, R1, T1, B1) {
|
var bpz = null; //被碰撞元素
|
|
$.each(this.allnodes, function (id, elem) {
|
if (elem.type == "subProcess") {
|
if (pz(L1, R1, T1, B1, elem.coordinate[0], elem.coordinate[1], elem.coordinate[2], elem.coordinate[3])) {
|
bpz = elem;
|
return false;
|
}
|
}
|
});
|
return bpz;
|
}
|
|
|
//判断当前点是否在区域内
|
FlowDesigner.prototype.lineFootholdDraging = function (startNode, sourcex, sourcey) {
|
|
$.each(this.allnodes, function (id, elem) {
|
if (elem.type == "userTask" || elem.type == "end" || elem.type == "gateway" || (elem.type == "subProcess" && (startNode.parentElem == null || startNode.parentElem.id != elem.id))) {
|
if (elem.coordinate[0] <= sourcex && sourcex <= elem.coordinate[1] && elem.coordinate[2] <= sourcey && sourcey < elem.coordinate[3]) {
|
//在区域内
|
elem.elementbox.attr({"stroke": "#84ff20", "stroke-width": 4}).show();
|
} else {
|
elem.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5}).hide();
|
}
|
|
|
}
|
});
|
|
|
}
|
|
//判断当前的点是否落在区域块中，并返回该对象
|
FlowDesigner.prototype.lineFoothold = function (startNode, sourcex, sourcey) {
|
var target = null;
|
$.each(this.allnodes, function (id, elem) {
|
if (elem.type == "userTask" || elem.type == "end" || elem.type == "gateway" || (elem.type == "subProcess" && (startNode.parentElem == null || startNode.parentElem.id != elem.id))) {
|
if (elem.coordinate[0] <= sourcex && sourcex <= elem.coordinate[1] && elem.coordinate[2] <= sourcey && sourcey < elem.coordinate[3]) {
|
//在区域内
|
target = elem;
|
return false;
|
}
|
}
|
});
|
|
return target;
|
}
|
|
/*元素碰撞：前4个是移动元素坐标，后面4个被撞元素坐标 */
|
function pz(L1, R1, T1, B1, L2, R2, T2, B2) {
|
if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) {//碰不着
|
return false;
|
} else {
|
return true;
|
}
|
|
}
|
|
/*其他元素的中心线显示：两个方块间的碰撞检测move是正在移动元素的类实例，后面的4个参数是移动元素的四个坐标 */
|
FlowDesigner.prototype.collisionCenterLine = function (move, L1, R1, T1, B1) {
|
|
var bpzcentery = []; //被碰撞中心元素集合,选出最近的元素，做吸附对齐,y方向。
|
var bpzcenterx = []; //被碰撞中心元素集合,选出最近的元素，做吸附对齐,x方向。
|
var bpzcenter = [null, null]; //有2个元素，第一个元素是y方向上的对齐元素，第二个元素是x方向上的对齐元素。
|
|
$.each(this.allnodes, function (id, elem) {
|
|
if (move.parentElem != null) { //有父元素的时候
|
if (elem.type == "subProcess" && elem.id == move.parentElem.id) { //基本元素move，在自家子流程之内移动，不匹配自家父元素
|
return true; //跳出本次循环
|
} else {
|
if (id != move.id && elem.parentElem != null && elem.parentElem.id == move.parentElem.id) { //2.基本元素move，自家子流程内，只有和自家的其它元素匹配
|
switch (pz2(L1, R1, T1, B1, elem.coordinate[0], elem.coordinate[1], elem.coordinate[2], elem.coordinate[3])) {
|
case "竖线":
|
elem.centerLineY.show().toBack();
|
|
bpzcentery.push(elem);
|
|
break;
|
case "横线":
|
elem.centerLineX.show().toBack();
|
|
bpzcenterx.push(elem);
|
|
break;
|
|
case "":
|
elem.centerLineX.hide();
|
elem.centerLineY.hide();
|
|
break;
|
|
}
|
|
}
|
}
|
|
} else {//没有父元素的时候,也不匹配子流程内部的元素
|
|
if (id != move.id && elem.parentElem == null) {
|
|
switch (pz2(L1, R1, T1, B1, elem.centerLineCoordinate[0], elem.centerLineCoordinate[1], elem.centerLineCoordinate[2], elem.centerLineCoordinate[3])) {
|
case "竖线":
|
elem.centerLineY.show().toBack();
|
|
bpzcentery.push(elem);
|
|
break;
|
case "横线":
|
elem.centerLineX.show().toBack();
|
|
bpzcenterx.push(elem);
|
|
break;
|
|
case "":
|
elem.centerLineX.hide();
|
elem.centerLineY.hide();
|
|
break;
|
|
}
|
}
|
}
|
|
});
|
//得到最贴近的2个元素，第一个是y方向，第二个是x方向
|
if (bpzcentery.length >= 2) {
|
var centerx = (L1 + R1) / 2;
|
var minIndex = 0;
|
$.each(bpzcentery, function (index, elem) {
|
|
if (index > 0 && Math.abs((elem.centerLineCoordinate[0] + elem.centerLineCoordinate[1]) / 2 - centerx) < Math.abs((bpzcentery[minIndex].centerLineCoordinate[0] + bpzcentery[minIndex].centerLineCoordinate[0]) / 2 - centerx)) {
|
minIndex = index;
|
}
|
})
|
|
bpzcenter[0] = bpzcentery[minIndex];
|
} else if (bpzcentery.length == 1) {
|
bpzcenter[0] = bpzcentery[0];
|
} else if (bpzcentery.length == 0) {
|
bpzcenter[0] = null;
|
}
|
|
//第二个是x方向
|
if (bpzcenterx.length >= 2) {
|
var centery = (T1 + B1) / 2;
|
var minIndex = 0;
|
$.each(bpzcenterx, function (index, elem) {
|
|
if (index > 0 && Math.abs((elem.centerLineCoordinate[2] + elem.centerLineCoordinate[3]) / 2 - centery) < Math.abs((bpzcenterx[minIndex].centerLineCoordinate[2] + bpzcenterx[minIndex].centerLineCoordinate[3]) / 2 - centery)) {
|
minIndex = index;
|
}
|
})
|
|
bpzcenter[1] = bpzcenterx[minIndex];
|
} else if (bpzcenterx.length == 1) {
|
bpzcenter[1] = bpzcenterx[0];
|
} else if (bpzcenterx.length == 0) {
|
bpzcenter[1] = null;
|
}
|
|
return bpzcenter;
|
|
}
|
|
|
/*子流程的中心线碰撞move是子流程 其他元素的中心线显示：两个方块间的碰撞检测move是正在移动元素的类实例的 ，后面的4个参数是移动元素的四个坐标 */
|
FlowDesigner.prototype.subProcessCollisionCenterLine = function (move, L1, R1, T1, B1) {
|
|
var bpzcentery = []; //被碰撞中心元素集合,选出最近的元素，做吸附对齐,y方向。
|
var bpzcenterx = []; //被碰撞中心元素集合,选出最近的元素，做吸附对齐,x方向。
|
var bpzcenter = [null, null]; //有2个元素，第一个元素是y方向上的对齐元素，第二个元素是x方向上的对齐元素。
|
|
$.each(this.allnodes, function (id, elem) {
|
|
if (id != move.id && elem.parentElem == null) { //只和外部元素碰撞
|
|
switch (pz2(L1, R1, T1, B1, elem.centerLineCoordinate[0], elem.centerLineCoordinate[1], elem.centerLineCoordinate[2], elem.centerLineCoordinate[3])) {
|
case "竖线":
|
elem.centerLineY.show().toBack();
|
bpzcentery.push(elem);
|
break;
|
case "横线":
|
elem.centerLineX.show().toBack();
|
|
bpzcenterx.push(elem);
|
|
break;
|
|
case "":
|
elem.centerLineX.hide();
|
elem.centerLineY.hide();
|
|
break;
|
|
}
|
}
|
|
|
});
|
//得到最贴近的2个元素，第一个是y方向，第二个是x方向
|
if (bpzcentery.length >= 2) {
|
var centerx = (L1 + R1) / 2;
|
var minIndex = 0;
|
$.each(bpzcentery, function (index, elem) {
|
|
if (index > 0 && Math.abs((elem.centerLineCoordinate[0] + elem.centerLineCoordinate[1]) / 2 - centerx) < Math.abs((bpzcentery[minIndex].centerLineCoordinate[0] + bpzcentery[minIndex].centerLineCoordinate[0]) / 2 - centerx)) {
|
minIndex = index;
|
}
|
})
|
|
bpzcenter[0] = bpzcentery[minIndex];
|
} else if (bpzcentery.length == 1) {
|
bpzcenter[0] = bpzcentery[0];
|
} else if (bpzcentery.length == 0) {
|
bpzcenter[0] = null;
|
}
|
|
//第二个是x方向
|
if (bpzcenterx.length >= 2) {
|
var centery = (T1 + B1) / 2;
|
var minIndex = 0;
|
$.each(bpzcenterx, function (index, elem) {
|
|
if (index > 0 && Math.abs((elem.centerLineCoordinate[2] + elem.centerLineCoordinate[3]) / 2 - centery) < Math.abs((bpzcenterx[minIndex].centerLineCoordinate[2] + bpzcenterx[minIndex].centerLineCoordinate[3]) / 2 - centery)) {
|
minIndex = index;
|
}
|
})
|
|
bpzcenter[1] = bpzcenterx[minIndex];
|
} else if (bpzcenterx.length == 1) {
|
bpzcenter[1] = bpzcenterx[0];
|
} else if (bpzcenterx.length == 0) {
|
bpzcenter[1] = null;
|
}
|
|
return bpzcenter;
|
|
}
|
|
//小圆点的碰撞
|
FlowDesigner.prototype.collisionSelfCenterLine = function (small, L1, R1, T1, B1) {
|
var bpzcenter = [null, null];
|
var start = small.belongLine.nodestart;
|
var L2 = start.centerLineCoordinate[0];
|
var R2 = start.centerLineCoordinate[1];
|
var T2 = start.centerLineCoordinate[2];
|
var B2 = start.centerLineCoordinate[3];
|
var end = small.belongLine.nodeend;
|
var L3 = end.centerLineCoordinate[0];
|
var R3 = end.centerLineCoordinate[1];
|
var T3 = end.centerLineCoordinate[2];
|
var B3 = end.centerLineCoordinate[3];
|
if (L2 < L1 && R1 < R2) {
|
bpzcenter[0] = start.centerpoint[0];
|
}
|
if (T3 < T1 && B1 < B3) {
|
bpzcenter[1] = end.centerpoint[1];
|
}
|
|
if (L3 < L1 && R1 < R3) {
|
bpzcenter[0] = end.centerpoint[0];
|
}
|
if (T2 < T1 && B1 < B2) {
|
bpzcenter[1] = start.centerpoint[1];
|
}
|
return bpzcenter;
|
}
|
|
/*元素中心线碰撞：前4个是移动元素坐标，后面4个被撞元素坐标*/
|
function pz2(L1, R1, T1, B1, L2, R2, T2, B2) {
|
var ret = "";
|
|
if ((L1 < L2 && R1 > L2) || (L1 < R2 && R1 > R2) || (L1 < L2 && R2 < R1)) {
|
ret = "竖线";
|
} else if ((T1 < T2 && B1 > T2) || (T1 < B2 && B1 > B2) || (T1 < T2 && B2 < B1)) {
|
//console.log(L1, R1, T1, B1,"," ,L2, R2, T2, B2);
|
ret = "横线";
|
}
|
return ret;
|
}
|
|
/*两个点之间形成公式,输入x,得到y轴坐标 */
|
FlowDesigner.prototype.getYLinePointFormula = function (x1, y1, x2, y2, x) {
|
if (floatToFix4(x1) != floatToFix4(x2)) {
|
var y = y2 + (x - x2) * (y1 - y2) / (x1 - x2);
|
} else {
|
|
y = y2;
|
}
|
|
return y;
|
}
|
|
/*两个点之间形成公式,输入y,得到x轴坐标 */
|
FlowDesigner.prototype.getXLinePointFormula = function (x1, y1, x2, y2, y) {
|
if (floatToFix4(y1) != floatToFix4(y2)) {
|
var x = x2 + (x1 - x2) * (y - y2) / (y1 - y2);
|
} else {
|
var x = x2;
|
}
|
return x;
|
}
|
|
//通过对象id找到指定元素类实例
|
FlowDesigner.prototype.FindElementById = function (id) {
|
var find = null;
|
$.each(this.allnodes, function (name, elem) {
|
if (name == id) {
|
find = elem;
|
}
|
});
|
|
if (find == null) { //如果不是元素，则查找线段
|
$.each(this.alllines, function (name, elem) {
|
if (name == id) {
|
find = elem;
|
}
|
});
|
}
|
return find;
|
}
|
|
|
//删除元素
|
FlowDesigner.prototype.removeElement = function (obj) {
|
var _that = this;
|
$.messager.confirm('再次确认', '您确定要删除该元素吗?', function (r) {
|
if (r) {
|
var elemid = $(obj).closest(".right").attr("tempid");
|
var elem = _that.FindElementById(elemid);
|
|
elem && elem.removeElement();//画布上的元素清除
|
if (elem && elem.type != "line") {
|
delete _that.allnodes[elemid]; //删除元素
|
}
|
if (elem && elem.type == "line") {
|
delete _that.alllines[elemid]; //删除线
|
}
|
}
|
});
|
|
|
}
|
|
//得到目标的箭头坐标 ，只适合于目标是矩形
|
FlowDesigner.prototype.getArrowPosXY = function (startNode, dropElem) {
|
|
//线的开始坐标，即startNode的中心点，但需要获得目标节点边框上的点，作为线的（箭头)的最终点
|
//1.判断开始节点和目标节点的位置关系。2.得到两个节点中心点间的直线公式，算出箭头中心点。3.通过startNode的中心点和箭头中心点，创建线段对象。
|
var pos = -1;
|
if (startNode.coordinate[0] >= dropElem.coordinate[1] && startNode.coordinate[3] <= dropElem.coordinate[2]) { //Start元素在目标元素的右上面
|
pos = 21;
|
} else if (startNode.coordinate[1] <= dropElem.coordinate[0] && startNode.coordinate[3] <= dropElem.coordinate[2]) { //Start元素在目标元素的左上面
|
pos = 20;
|
} else if (startNode.coordinate[1] <= dropElem.coordinate[0] && startNode.coordinate[2] >= dropElem.coordinate[3]) { //Start元素在目标元素的左下面
|
pos = 30;
|
} else if (startNode.coordinate[0] >= dropElem.coordinate[1] && startNode.coordinate[2] >= dropElem.coordinate[3]) { //Start元素在目标元素的右下面
|
pos = 13;
|
} else if (startNode.coordinate[3] <= dropElem.coordinate[2]) {
|
pos = 2; //Start元素在目标元素的上面
|
} else if (startNode.coordinate[1] < dropElem.coordinate[0]) {
|
pos = 0;//Start元素在目标元素的左边
|
} else if (startNode.coordinate[2] >= dropElem.coordinate[3]) {
|
pos = 3; //Start元素在目标元素的下面
|
} else if (startNode.coordinate[0] >= dropElem.coordinate[1]) {
|
pos = 1; //Start元素在目标元素的右面
|
}
|
var x = 0;
|
var y = 0;
|
var x1 = 0, y1 = 0;
|
if (pos != -1) {
|
switch (pos) {
|
case 0: //Start元素在目标元素的左边
|
x = dropElem.coordinate[0];
|
y = flowDesigner.getYLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], x);
|
break;
|
case 1: //Start元素在目标元素的右面
|
x = dropElem.coordinate[1];
|
y = flowDesigner.getYLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], x);
|
break;
|
case 2://Start元素在目标元素的上面
|
y = dropElem.coordinate[2];
|
x = flowDesigner.getXLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], y);
|
|
break;
|
case 3://Start元素在目标元素的下面
|
y = dropElem.coordinate[3];
|
x = flowDesigner.getXLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], y);
|
break;
|
case 21: //Start元素在目标元素的右上
|
y1 = dropElem.coordinate[2]; //2
|
x1 = flowDesigner.getXLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], y1);
|
if (dropElem.x < x1 && x1 < (dropElem.x + dropElem.w)) {
|
x = x1;
|
y = y1;
|
} else {
|
x1 = dropElem.coordinate[1];
|
y1 = flowDesigner.getYLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], x1);
|
x = x1;
|
y = y1;
|
}
|
break;
|
case 20: //2和0 ,Start元素在目标元素的左上
|
y1 = dropElem.coordinate[2]; //2
|
x1 = flowDesigner.getXLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], y1);
|
if (dropElem.x < x1 && x1 < (dropElem.x + dropElem.w)) {
|
x = x1;
|
y = y1;
|
} else {
|
x1 = dropElem.coordinate[0]; //0
|
y1 = flowDesigner.getYLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], x1);
|
x = x1;
|
y = y1;
|
|
}
|
break;
|
case 13: //1和3,Start元素在目标元素的右下面
|
y1 = dropElem.coordinate[3]; //3
|
x1 = flowDesigner.getXLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], y1);
|
if (dropElem.x < x1 && x1 < dropElem.x + dropElem.w) {
|
x = x1;
|
y = y1;
|
|
} else {
|
x1 = dropElem.coordinate[1]; //1的判断 Start元素在目标元素的右面
|
y1 = flowDesigner.getYLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], x1);
|
x = x1;
|
y = y1;
|
|
}
|
break;
|
case 30: //0和3,Start元素在目标元素的左下
|
y1 = dropElem.coordinate[3]; //3
|
x1 = flowDesigner.getXLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], y1);
|
if (dropElem.x < x1 && x1 < (dropElem.x + dropElem.w)) {
|
x = x1;
|
y = y1;
|
} else {
|
x1 = dropElem.coordinate[0]; //0
|
y1 = flowDesigner.getYLinePointFormula(startNode.centerpoint[0], startNode.centerpoint[1], dropElem.centerpoint[0], dropElem.centerpoint[1], x1);
|
x = x1;
|
y = y1;
|
}
|
|
break;
|
}
|
}
|
return {"x": x, "y": y}
|
}
|
|
//得到目标的箭头坐标，目标是end节点
|
FlowDesigner.prototype.getCircleArrowPosXY = function (startNode, dropElem) {
|
|
var linestr = "M" + startNode.centerpoint
|
[0] + "," + startNode.centerpoint[1] + "L" + dropElem.centerpoint[0] + "," + dropElem.centerpoint[1];
|
|
var linehide = this.paper.path(linestr).hide();
|
var linelength = linehide.getTotalLength();
|
var point = linehide.getPointAtLength(linelength - dropElem.r);
|
|
linehide.remove();
|
return {"x": point.x, "y": point.y}
|
}
|
|
//得到线的出发点
|
FlowDesigner.prototype.getStartPosXY = function (startNode, dropElem) {
|
var retPoint = null;
|
switch (startNode.type) {
|
case "smallcircle":
|
case "start":
|
retPoint = this.getCircleStartPosXY(startNode, dropElem);
|
break;
|
case "gateway":
|
case "subProcess":
|
case "userTask":
|
retPoint = this.getQuadrangleStartPosXY(startNode, dropElem);
|
break;
|
|
}
|
return retPoint;
|
}
|
//得到线的出发点，开始节点是圆
|
FlowDesigner.prototype.getCircleStartPosXY = function (startNode, dropElem) {
|
|
var linestr = "M" + startNode.centerpoint
|
[0] + "," + startNode.centerpoint[1] + "L" + dropElem.centerpoint[0] + "," + dropElem.centerpoint[1];
|
|
var linehide = this.paper.path(linestr).hide();
|
var point = linehide.getPointAtLength(startNode.r);
|
|
linehide.remove();
|
return {"x": point.x, "y": point.y}
|
}
|
|
//得到线的出发点，开始节点是四边形
|
FlowDesigner.prototype.getQuadrangleStartPosXY = function (startNode, dropElem) {
|
var point = null;
|
var a = {"x": startNode.centerpoint[0], "y": startNode.centerpoint[1]};
|
var b = {"x": dropElem.centerpoint[0], "y": dropElem.centerpoint[1]};
|
//console.log("startNode",startNode);
|
//console.log("dropElem",dropElem);
|
$.each(startNode.fourpoint, function (index, elem) {
|
//循环4个点，依次形成4条线cd，分别和ab，求交点，求到一个交点就结束
|
//console.log(a,b,dropElem.fourpoint[index%4],dropElem.fourpoint[(index+1)%4]);
|
point = segmentsIntr(a, b, startNode.fourpoint[index % 4], startNode.fourpoint[(index + 1) % 4]);
|
|
if (point != false) {
|
return false;
|
}
|
});
|
return point;
|
}
|
|
//得到目标的箭头坐标，目标是Gateway节点
|
FlowDesigner.prototype.getGatewayArrowPosXY = function (startNode, dropElem) {
|
var point = null;
|
var a = {"x": startNode.centerpoint[0], "y": startNode.centerpoint[1]};
|
var b = {"x": dropElem.centerpoint[0], "y": dropElem.centerpoint[1]};
|
//console.log("startNode",startNode);
|
//console.log("dropElem",dropElem);
|
$.each(dropElem.fourpoint, function (index, elem) {
|
//循环4个点，依次形成4条线cd，分别和ab，求交点，求到一个交点就结束
|
//console.log(a,b,dropElem.fourpoint[index%4],dropElem.fourpoint[(index+1)%4]);
|
point = segmentsIntr(a, b, dropElem.fourpoint[index % 4], dropElem.fourpoint[(index + 1) % 4]);
|
|
if (point != false) {
|
return false;
|
}
|
});
|
return point;
|
|
}
|
|
//得到两线的交点（ab是一条线，cd是另一条线）
|
function segmentsIntr(a, b, c, d) {
|
|
/** 1 解线性方程组, 求线段交点. **/
|
// 如果分母为0 则平行或共线, 不相交
|
var denominator = (b.y - a.y) * (d.x - c.x) - (a.x - b.x) * (c.y - d.y);
|
if (denominator == 0) {
|
return false;
|
}
|
|
// 线段所在直线的交点坐标 (x , y)
|
var x = ((b.x - a.x) * (d.x - c.x) * (c.y - a.y)
|
+ (b.y - a.y) * (d.x - c.x) * a.x
|
- (d.y - c.y) * (b.x - a.x) * c.x) / denominator;
|
var y = -((b.y - a.y) * (d.y - c.y) * (c.x - a.x)
|
+ (b.x - a.x) * (d.y - c.y) * a.y
|
- (d.x - c.x) * (b.y - a.y) * c.y) / denominator;
|
|
/** 2 判断交点是否在两条线段上 **/
|
if (
|
// 交点在线段1上
|
(x - a.x) * (x - b.x) <= 0 && (y - a.y) * (y - b.y) <= 0
|
// 且交点也在线段2上
|
&& (x - c.x) * (x - d.x) <= 0 && (y - c.y) * (y - d.y) <= 0
|
) {
|
|
// 返回交点p
|
return {
|
x: x,
|
y: y
|
}
|
}
|
//否则不相交
|
return false;
|
|
}
|
|
//得到线上的点,并且判断自身是否在直线上，如果在者不变，如果不在就按两点的距离存在的点数来设置。startNode：开始节点，endNode:结束节点，selfNode：自身本来的节点，length ，节点数+1，线被节点分成几段,index：第几个
|
FlowDesigner.prototype.getNewSmallCirclePosXY = function (startNode, endNode, selfNode, length, index) {
|
|
//先判断是否在直线上
|
if (floatToFix4(startNode.x) == floatToFix4(selfNode[1]) || floatToFix4(startNode.y) == floatToFix4(selfNode[2])) {
|
return {"x": selfNode[1], "y": selfNode[2]};
|
}
|
//不在直线上
|
var linestr = "M" + startNode.x + "," + startNode.y + "L" + endNode.x + "," + endNode.y;
|
var linehide = this.paper.path(linestr).hide();
|
var linelength = linehide.getTotalLength();
|
var point = linehide.getPointAtLength(linelength * index / length);
|
linehide.remove();
|
return {"x": point.x, "y": point.y};
|
}
|
|
|
//添加元素
|
FlowDesigner.prototype.addElement = function (options) {
|
switch (options.type) {
|
case "start":
|
var startNode = new Start(this, options);
|
startNode.init();
|
this.allnodes[startNode.id] = startNode;
|
return startNode;
|
break;
|
case "userTask":
|
var userTaskNode = new UserTask(this, options);
|
userTaskNode.init();
|
this.allnodes[userTaskNode.id] = userTaskNode;
|
return userTaskNode;
|
break;
|
|
case "line":
|
var line = new Line(this, options);
|
line.init();
|
this.alllines[line.id] = line;
|
return line;
|
break;
|
|
case "end":
|
var endNode = new End(this, options);
|
endNode.init();
|
this.allnodes[endNode.id] = endNode;
|
return endNode;
|
break;
|
case "gateway":
|
var gatewayNode = new Gateway(this, options);
|
gatewayNode.init();
|
this.allnodes[gatewayNode.id] = gatewayNode;
|
return gatewayNode;
|
break;
|
case "subProcess":
|
var subProcessNode = new SubProcess(this, options);
|
subProcessNode.init();
|
this.allnodes[subProcessNode.id] = subProcessNode;
|
return subProcessNode;
|
break;
|
|
}
|
|
|
}
|
|
//设置线的加点状态
|
FlowDesigner.prototype.setAddPointStatus = function () {
|
this.addPoint = !this.addPoint;
|
if (this.addPoint) {
|
this.allUnSelect();
|
}
|
return this.addPoint;
|
}
|
|
FlowDesigner.prototype.setSubtractPointStatus = function () {
|
this.subtractPoint = !this.subtractPoint;
|
if (this.subtractPoint) {
|
this.allUnSelect();
|
}
|
return this.subtractPoint;
|
}
|
|
//加入线上的小圆点 line表示所加入的线，在index位置上插入点(pointx,pointy)
|
FlowDesigner.prototype.addLinePosition = function (line, index, pointx, pointy) {
|
|
line.linepointsxy.splice(index, 0, ["L", pointx, pointy]);
|
line.linestr = Raphael.parsePathString(line.linepointsxy);
|
|
//重绘小圆点
|
line.redrawSmallCircle(true);
|
}
|
|
|
return FlowDesigner;
|
});
|
