|
|
@ -85,6 +85,7 @@ function GooFlow(bgDiv, property) {
|
|
|
this.$nodeCount = 0; // 数量
|
|
|
this.$nodeDom = {}; // DOM
|
|
|
this.$newNodeValue = ''; // 值
|
|
|
this.$nodeConfig = ''; // 配置项
|
|
|
this.$nodeType = ''; // 结点类型
|
|
|
this.$deteNodeId = ''; // 删除指定ID
|
|
|
this.$ghost = null; // 结点镜像
|
|
|
@ -239,7 +240,7 @@ function GooFlow(bgDiv, property) {
|
|
|
htmlStr += "<div class='GooFlow_app_list_box'><ul>";
|
|
|
for (var j = 0; j < list[i].list.length; j++) {
|
|
|
htmlStr += "<li class='GooFlow_app_item' data-type='" + list[i].list[j].nodeType +
|
|
|
"' data-value ='" + list[i].list[j].value +
|
|
|
"' data-value ='" + list[i].list[j].value + "' data-config='" + list[i].list[j].config +
|
|
|
"'><div class='app_icon'></div> <div class='app_name'>" + list[i].list[j].name + "</div></li>"
|
|
|
}
|
|
|
htmlStr += "</ul></li>";
|
|
|
@ -274,7 +275,7 @@ function GooFlow(bgDiv, property) {
|
|
|
htmlStr += "<li class='GooFlow_app_list_item'><div class='GooFlow_app_list_box'><ul>";
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
|
htmlStr += "<li class='GooFlow_app_item' data-type='" + list[i].nodeType +
|
|
|
"' data-value='" + list[i].value +
|
|
|
"' data-value='" + list[i].value + "' data-config='" + list[i].config +
|
|
|
"'><div class='app_icon'></div> <div class='app_name'>" + list[i].name + "</div></li>"
|
|
|
}
|
|
|
htmlStr += "</ul></li>";
|
|
|
@ -337,6 +338,7 @@ function GooFlow(bgDiv, property) {
|
|
|
that.$newNodeTxt = $(this).children('.app_name').text();
|
|
|
that.$newNodeValue = $(this).attr('data-value');
|
|
|
that.$nodeType = $(this).attr('data-type');
|
|
|
that.$nodeConfig = $(this).attr('data-config');
|
|
|
});
|
|
|
$(document).mouseup(function () {
|
|
|
onDrag = false;
|
|
|
@ -604,30 +606,29 @@ GooFlow.prototype = {
|
|
|
// 编辑
|
|
|
dblclick: function () {
|
|
|
var id = $(this).attr('id'),
|
|
|
oldTxt = that.$nodeData[id].param,
|
|
|
objPosition = $(this).position(),
|
|
|
objLeft = objPosition.left,
|
|
|
objTop = objPosition.top;
|
|
|
objTop = objPosition.top,
|
|
|
oldTxt = that.$nodeData[id].config;
|
|
|
console.log(that.$nodeData[id]);
|
|
|
|
|
|
// 编辑的时候禁止delete键删除
|
|
|
that.$canDelLine = false;
|
|
|
that.$deteNodeId = '';
|
|
|
that.$deteLineId = '';
|
|
|
|
|
|
var thisType = that.$nodeData[id].type;
|
|
|
if (thisType != 'start' && thisType != 'task') {
|
|
|
clearTimeout(timeId);
|
|
|
that.$textArea.val(oldTxt).css({
|
|
|
display: "block",
|
|
|
left: objLeft + 170,
|
|
|
top: objTop + 50
|
|
|
}).data("id", that.$focus).focus();
|
|
|
clearTimeout(timeId);
|
|
|
that.$textArea.val(oldTxt).css({
|
|
|
display: "block",
|
|
|
left: objLeft + 170,
|
|
|
top: objTop + 50
|
|
|
}).data("id", that.$focus).focus();
|
|
|
|
|
|
that.$workArea.parent().one("mousedown", function () {
|
|
|
that.setName(that.$textArea.data("id"), that.$textArea.val(), "node");
|
|
|
that.$textArea.val("").removeData("id").hide();
|
|
|
});
|
|
|
|
|
|
that.$workArea.parent().one("mousedown", function () {
|
|
|
that.setName(that.$textArea.data("id"), that.$textArea.val(), "node");
|
|
|
that.$textArea.val("").removeData("id").hide();
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 移动
|
|
|
mousedown: function (e) {
|
|
|
@ -895,7 +896,7 @@ GooFlow.prototype = {
|
|
|
top: y
|
|
|
}).data("id", that.$focus).focus();
|
|
|
|
|
|
that.$workArea.parent().one("mousedown", function (e) {
|
|
|
that.$workArea.parent().one("mousedown", function () {
|
|
|
that.setName(that.$textArea.data("id"), that.$textArea.val(), "line");
|
|
|
that.$textArea.val("").removeData("id").hide();
|
|
|
});
|
|
|
@ -1128,32 +1129,34 @@ GooFlow.prototype = {
|
|
|
switch (json.type) {
|
|
|
case "state":
|
|
|
json.name = '判断';
|
|
|
json.value = '';
|
|
|
json.config = '';
|
|
|
json.nodeType = 'judgement'
|
|
|
break;
|
|
|
case "complex":
|
|
|
json.name = '循环';
|
|
|
json.value = '';
|
|
|
json.config = '';
|
|
|
json.nodeType = 'circle'
|
|
|
break;
|
|
|
case "join":
|
|
|
json.name = '聚合';
|
|
|
json.value = '';
|
|
|
json.config = '';
|
|
|
json.nodeType = 'aggregate'
|
|
|
break;
|
|
|
case "fork":
|
|
|
json.name = '分流';
|
|
|
json.value = '';
|
|
|
json.config = '';
|
|
|
json.nodeType = 'multicast'
|
|
|
break;
|
|
|
case "task":
|
|
|
json.name = this.$newNodeTxt || json.name;
|
|
|
json.value = this.$newNodeValue || json.value;
|
|
|
json.config = this.$nodeConfig || json.config;
|
|
|
json.nodeType = this.$nodeType || json.nodeType;
|
|
|
break;
|
|
|
case "plug":
|
|
|
json.name = this.$newNodeTxt || json.name;
|
|
|
json.value = this.$newNodeValue || json.value;
|
|
|
json.config = this.$nodeConfig || json.config;
|
|
|
json.nodeType = this.$nodeType || json.nodeType;
|
|
|
break;
|
|
|
}
|
|
|
@ -1223,42 +1226,21 @@ GooFlow.prototype = {
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:54
|
|
|
* */
|
|
|
setName: function (id, name, type) {
|
|
|
setName: function (id, config, type) {
|
|
|
var oldName;
|
|
|
|
|
|
if (type == "node") {//如果是结点
|
|
|
if (!this.$nodeData[id]) return;
|
|
|
var thisType = this.$nodeData[id].type
|
|
|
if (thisType == 'plug') {
|
|
|
this.$nodeData[id].param = name;
|
|
|
} else {
|
|
|
this.$nodeData[id].value = name;
|
|
|
}
|
|
|
this.$nodeData[id].config = config;
|
|
|
}
|
|
|
else if (type == "line") {//如果是线
|
|
|
if (!this.$lineData[id]) return;
|
|
|
if (this.$lineData[id].name == name) return;
|
|
|
if (this.onItemRename != null && !this.onItemRename(id, name, "line")) return;
|
|
|
oldName = this.$lineData[id].name;
|
|
|
this.$lineData[id].name = name;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
this.$lineDom[id].childNodes[2].textContent = name;
|
|
|
}
|
|
|
else {
|
|
|
this.$lineDom[id].childNodes[1].innerHTML = name;
|
|
|
var n = this.$lineDom[id].getAttribute("fromTo").split(",");
|
|
|
var x;
|
|
|
if (this.$lineData[id].type != "lr") {
|
|
|
x = (n[2] - n[0]) / 2;
|
|
|
}
|
|
|
else {
|
|
|
var Min = n[2] > n[0] ? n[0] : n[2];
|
|
|
if (Min > this.$lineData[id].M) Min = this.$lineData[id].M;
|
|
|
x = this.$lineData[id].M - Min;
|
|
|
}
|
|
|
if (x < 0) x = x * -1;
|
|
|
this.$lineDom[id].childNodes[1].style.left = x - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4 + "px";
|
|
|
}
|
|
|
if (this.$lineData[id].config == config) return;
|
|
|
oldName = this.$lineData[id].value;
|
|
|
this.$lineData[id].config = config;
|
|
|
this.$lineDom[id].childNodes[2].textContent = config;
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
@ -1360,7 +1342,7 @@ GooFlow.prototype = {
|
|
|
|
|
|
this.$lineData[id].from = json.from;
|
|
|
this.$lineData[id].to = json.to;
|
|
|
this.$lineData[id].value = json.name;
|
|
|
this.$lineData[id].config = json.name;
|
|
|
|
|
|
if (json.mark) {
|
|
|
this.$lineData[id].marked = json.mark;
|
|
|
@ -1911,8 +1893,10 @@ GooFlow.prototype = {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
keyJson(this.$nodeData, nodes, ['name', 'value', 'nodeType', 'param']);
|
|
|
keyJson(this.$lineData, lines, ['from', 'to', 'value']);
|
|
|
keyJson(this.$nodeData, nodes, ['name', 'value', 'nodeType', 'config']);
|
|
|
keyJson(this.$lineData, lines, ['from', 'to', 'config']);
|
|
|
|
|
|
console.log(this.$lineData);
|
|
|
|
|
|
var positionData = {
|
|
|
nodes: this.$nodeData,
|
|
|
@ -1934,6 +1918,7 @@ GooFlow.prototype = {
|
|
|
var toArr = [];
|
|
|
var noError = true;
|
|
|
|
|
|
|
|
|
// 存储所有结点名，并将判断和循环结点单独存储
|
|
|
for (var i in nodes) {
|
|
|
nodeArr.push(i);
|
|
|
@ -1943,14 +1928,15 @@ GooFlow.prototype = {
|
|
|
}
|
|
|
|
|
|
// 存储所有的线条的开始结点和结束结点
|
|
|
for (var j in lines) {
|
|
|
|
|
|
for (var j in lines) {
|
|
|
fromArr.push(lines[j].from);
|
|
|
toArr.push(lines[j].to);
|
|
|
}
|
|
|
|
|
|
// 如果存在没有连线的结点则报错
|
|
|
nodeArr.forEach(function (elem) {
|
|
|
var nodeWithoutLines = (fromArr.indexOf(elem) === -1) && (toArr.indexOf(elem) === -1)
|
|
|
var nodeWithoutLines = (fromArr.indexOf(elem) === -1) && (toArr.indexOf(elem) === -1) || (nodes[elem].config === '')
|
|
|
if (nodeWithoutLines) {
|
|
|
noError = false;
|
|
|
$('#' + elem).addClass('node-error');
|
|
|
@ -1960,7 +1946,8 @@ GooFlow.prototype = {
|
|
|
});
|
|
|
|
|
|
// 判断和循环必须有两条线
|
|
|
specialArr.forEach(function (elem) {
|
|
|
// 每个节点都必须有配置项
|
|
|
specialArr.forEach(function (elem) {
|
|
|
var i = 0;
|
|
|
fromArr.forEach(function (el) {
|
|
|
if (elem === el) {
|
|
|
@ -1969,17 +1956,18 @@ GooFlow.prototype = {
|
|
|
})
|
|
|
if (i < 2) {
|
|
|
noError = false;
|
|
|
$('#' + elem).addClass('node-error');
|
|
|
$('#' + elem).addClass('special-error');
|
|
|
} else {
|
|
|
$('#' + elem).removeClass('node-error');
|
|
|
$('#' + elem).removeClass('special-error');
|
|
|
for (var e in lines) {
|
|
|
if (lines[e].from === elem) {
|
|
|
if (lines[e].name == '') {
|
|
|
console.log(lines[e]);
|
|
|
if (lines[e].config === '') {
|
|
|
noError = false;
|
|
|
$('#' + e + ' path').addClass('line-error').attr("marker-end", "url(#arrow3)");
|
|
|
$('#' + elem).addClass('node-error');
|
|
|
$('#' + e + ' path').attr({"marker-end":"url(#arrow3)","stroke":"#f00"});
|
|
|
$('#' + elem).addClass('special-error');
|
|
|
} else {
|
|
|
$('#' + e + ' path').removeClass('line-error').attr("marker-end", "url(#arrow1)");
|
|
|
$('#' + e + ' path').attr({"marker-end":"url(#arrow1)","stroke":"#323232"});
|
|
|
}
|
|
|
}
|
|
|
}
|
lee