|
|
@ -1,31 +1,46 @@
|
|
|
//公共方法
|
|
|
var GooFunc = {
|
|
|
getElCoordinate: function (dom) {
|
|
|
var t = dom.offsetTop;
|
|
|
var l = dom.offsetLeft;
|
|
|
dom = dom.offsetParent;
|
|
|
while (dom) {
|
|
|
t += dom.offsetTop;
|
|
|
l += dom.offsetLeft;
|
|
|
dom = dom.offsetParent;
|
|
|
}
|
|
|
;
|
|
|
return {top: t, left: l};
|
|
|
},
|
|
|
mousePosition: function (ev) {
|
|
|
var dom = document.getElementById('divIndexContent');
|
|
|
var domX = dom.scrollLeft;
|
|
|
var domY = dom.scrollTop;
|
|
|
//兼容各种浏览器的,获取鼠标真实位置
|
|
|
if (!ev) ev = window.event;
|
|
|
if (ev.pageX || ev.pageY) {
|
|
|
return {x: ev.pageX + domX, y: ev.pageY + domY};
|
|
|
}
|
|
|
return {
|
|
|
x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
|
|
|
y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
|
|
|
};
|
|
|
}
|
|
|
getElCoordinate: function (dom) {
|
|
|
var t = dom.offsetTop;
|
|
|
var l = dom.offsetLeft;
|
|
|
dom = dom.offsetParent;
|
|
|
while (dom) {
|
|
|
t += dom.offsetTop;
|
|
|
l += dom.offsetLeft;
|
|
|
dom = dom.offsetParent;
|
|
|
}
|
|
|
;
|
|
|
return {top: t, left: l};
|
|
|
},
|
|
|
mousePosition: function (ev) {
|
|
|
var dom = document.getElementById('divIndexContent');
|
|
|
var domX = dom.scrollLeft;
|
|
|
var domY = dom.scrollTop;
|
|
|
//兼容各种浏览器的,获取鼠标真实位置
|
|
|
if (!ev) ev = window.event;
|
|
|
if (ev.pageX || ev.pageY) {
|
|
|
return {x: ev.pageX + domX, y: ev.pageY + domY};
|
|
|
}
|
|
|
return {
|
|
|
x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
|
|
|
y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
|
|
|
};
|
|
|
},
|
|
|
getAjaxData: function (url, successFn, completeFn) {
|
|
|
$.ajax({
|
|
|
url: url,
|
|
|
type: 'GET',
|
|
|
async: true,
|
|
|
dataType: 'json',
|
|
|
success: successFn,
|
|
|
error: function (data, xhr, textStatus) {
|
|
|
console.log('错误')
|
|
|
console.log(xhr)
|
|
|
console.log(textStatus)
|
|
|
},
|
|
|
complete: completeFn
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
@ -41,50 +56,61 @@ function GooFlow(bgDiv, property) {
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:17
|
|
|
* */
|
|
|
|
|
|
// *************************************************** 【UI相关】
|
|
|
// *************************************************** 【UI相关】
|
|
|
this.$id = property.id || bgDiv.attr("id"); // 容器id
|
|
|
this.$bgDiv = bgDiv; // 容器对象
|
|
|
this.$headBox = null; // 头部容器对象
|
|
|
this.$bgDiv = bgDiv; // 容器对象
|
|
|
this.$headBox = null; // 头部容器对象
|
|
|
this.$toolBar = null; // 工具栏操作
|
|
|
this.$flowChart = null; // 流程图工具
|
|
|
this.$contBox = null; // 主内容区
|
|
|
this.$flowChart = null; // 流程图工具
|
|
|
this.$contBox = null; // 主内容容器
|
|
|
this.$contBoxLeft = null; // 端点内容
|
|
|
this.$contBoxRight = null; // 转换器内容
|
|
|
this.$workAreaWrap = null; // 流程图区域容器
|
|
|
this.$workArea = null; // 流程图区域
|
|
|
this.$draw = null; // SVG绘制区
|
|
|
|
|
|
// *************************************************** 【线条相关】
|
|
|
this.$lineData = {}; // 数据
|
|
|
this.$lineData = {}; // 数据
|
|
|
this.$lineType = ''; // 类型
|
|
|
this.$lineCount = 0; // 数量
|
|
|
this.$lineDom = {}; // DOM
|
|
|
this.$lineMoveing = false; // 是否在移动
|
|
|
this.$deteLineId = ''; // 删除指定ID
|
|
|
this.$lineMove = null; // 线条移动镜像
|
|
|
this.$canDelLine = false; // 是否使用Delete删除线条
|
|
|
|
|
|
// *************************************************** 【结点相关】
|
|
|
this.$nodeData = {}; // 数据
|
|
|
this.$nodeCount = 0; // 数量
|
|
|
this.$nodeData = {}; // 数据
|
|
|
this.$nodeCount = 0; // 数量
|
|
|
this.$nodeDom = {}; // DOM
|
|
|
this.$newNodeValue = ''; // 值
|
|
|
this.$deteNodeId = ''; // 删除指定ID
|
|
|
this.$ghost = null; // 结点镜像
|
|
|
|
|
|
// *************************************************** 【当前选中】
|
|
|
this.$nowType = "cursor"; // 当前操作类型
|
|
|
this.$focus = ""; // SVG操作区中选中对象
|
|
|
this.$nowType = "cursor"; // 当前操作类型
|
|
|
this.$focus = ""; // SVG操作区中选中对象
|
|
|
|
|
|
// *************************************************** 【其他】
|
|
|
this.$MainContener = property.MainContener; // 重要内容
|
|
|
this.$editable = property.editable; // 是否可编辑
|
|
|
this.$max = property.initNum; // 操作顺序
|
|
|
this.$editable = property.editable; // 是否可编辑
|
|
|
|
|
|
// *************************************************** 【公用变量】
|
|
|
var that = this;
|
|
|
|
|
|
// *************************************************** 【请求地址】
|
|
|
var URL = "http://192.168.131.110:8080",
|
|
|
getAllEndpointsURL = URL + "/esb/process/getAllEndpoints",
|
|
|
getAllProcessorsURL = URL + "/esb/process/getAllProcessors";
|
|
|
|
|
|
/*
|
|
|
* Todo: 初始化布局 【初始化】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:17
|
|
|
* */
|
|
|
this.$headBox = $("<div class='GooFlow_top_box'></div>");
|
|
|
this.$contBox = $("<div class='GooFlow_cont_box'></div>");
|
|
|
this.$headBox = $("<div class='GooFlow_top_box'></div>"); // 头部
|
|
|
this.$contBox = $("<div class='GooFlow_cont_box'></div>"); // 中间主体内容
|
|
|
this.$bgDiv.append(this.$headBox).append(this.$contBox);
|
|
|
|
|
|
/*
|
|
|
@ -93,617 +119,376 @@ function GooFlow(bgDiv, property) {
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:17
|
|
|
* */
|
|
|
if (property.haveTool) {
|
|
|
var
|
|
|
HtmlStr = "",
|
|
|
i = 0,
|
|
|
length = property.toolBtns.length;
|
|
|
|
|
|
// 工具栏UI构建
|
|
|
HtmlStr = "<div class='GooFlow_tool'>";
|
|
|
for (; i < length; ++i) {
|
|
|
HtmlStr += "<i class='ico_" + property.toolBtns[i] + "'></i>";
|
|
|
}
|
|
|
HtmlStr += "</div>";
|
|
|
this.$toolBar = $(HtmlStr);
|
|
|
this.$headBox.append(this.$toolBar);
|
|
|
|
|
|
// 工具栏功能绑定
|
|
|
this.$toolBar.children().on("click",function () {
|
|
|
var icoName = $(this).attr("class").match(/ico_\w+/g)[0];
|
|
|
switch (icoName) {
|
|
|
case "ico_save":
|
|
|
that.exportData();
|
|
|
break;
|
|
|
case "ico_undo":
|
|
|
that.undo();
|
|
|
break;
|
|
|
case "ico_redo":
|
|
|
that.redo();
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 流程图结点构建 【UI相关--HEAD】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:17
|
|
|
* */
|
|
|
if (property.flowChart) {
|
|
|
var
|
|
|
HtmlStr = "",
|
|
|
i = 0,
|
|
|
length = property.flowBtns.length;
|
|
|
// 流程图结点UI构建
|
|
|
HtmlStr += "<div class='GooFlow_flowChart'>"
|
|
|
// 加入用户自定义工具栏
|
|
|
for (; i < length; ++i) {
|
|
|
HtmlStr += "<i id='" + this.$id + "_btn_" + property.flowBtns[i] + "' class='ico_" + property.flowBtns[i] + "'/></i>";
|
|
|
}
|
|
|
HtmlStr += "</div>"
|
|
|
this.$flowChart = $(HtmlStr);
|
|
|
this.$headBox.append(this.$flowChart);
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 初始化工作区 【UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:18
|
|
|
* */
|
|
|
var width = ( property.width == 'auto' ) ? (this.$bgDiv.parent().width()) : property.width;
|
|
|
var height = property.height;
|
|
|
var workWidth = workWidth ? property.workWidth : width;
|
|
|
var workHeight = workHeight ? property.workHeight : height;
|
|
|
|
|
|
// 创建工作区JQ对象
|
|
|
|
|
|
|
|
|
/*
|
|
|
* Todo: 端点及转换数据加载 【ajax相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
|
|
|
function getAppData(url, className, title) {
|
|
|
$.ajax({
|
|
|
url: url,
|
|
|
type: 'GET',
|
|
|
async: true,
|
|
|
dataType: 'json',
|
|
|
success: function (data) {
|
|
|
var contData = $.parseJSON(data.message);
|
|
|
appHtml(contData, className, title);
|
|
|
},
|
|
|
error: function (data, xhr, textStatus) {
|
|
|
console.log('错误')
|
|
|
console.log(xhr)
|
|
|
console.log(textStatus)
|
|
|
},
|
|
|
complete: function () {
|
|
|
// 数据加载完成后添加端点或转换器点击函数
|
|
|
completeFn();
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
getAppData('http://192.168.131.110:8080/esb/process/getAllEndpoints', 'GooFlow_left', '端点');
|
|
|
getAppData('http://192.168.131.110:8080/esb/process/getAllProcessors', 'GooFlow_right', '转换器');
|
|
|
|
|
|
/*
|
|
|
* Todo: 端点及转换器事件添加 【端点&转换器--事件】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
|
|
|
function completeFn() {
|
|
|
|
|
|
addNodeByDrag($('.GooFlow_left .GooFlow_app_item'), 'task');
|
|
|
addNodeByDrag($('.GooFlow_right .GooFlow_app_item'), 'plug');
|
|
|
|
|
|
$('.GooFlow_left .GooFlow_app_list_tit').on("click", {inthis: that}, function () {
|
|
|
$('.GooFlow_left .GooFlow_app_item').show();
|
|
|
$(this).parent().toggleClass('selected').siblings().removeClass('selected');
|
|
|
});
|
|
|
|
|
|
function itemSearchFn(obj) {
|
|
|
var $list = obj.find($('.GooFlow_app_list_item'));
|
|
|
var $input = obj.find($('.GooFlow_app_search_input'));
|
|
|
var $item = obj.find($('.GooFlow_app_item'));
|
|
|
$input.on('keyup', {inthis: that}, function (e) {
|
|
|
var input = $input.val()
|
|
|
if (input.length > 0) {
|
|
|
$item.hide();
|
|
|
var filterObj = $item.filter(function (index) {
|
|
|
return $(this).text().indexOf(input) >= 0;
|
|
|
})
|
|
|
if (filterObj.length > 0) {
|
|
|
filterObj.css("display", "block").parent().parent().parent().addClass('selected');
|
|
|
} else {
|
|
|
$item.show();
|
|
|
$list.removeClass('selected');
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
$item.show();
|
|
|
$list.removeClass('selected');
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
itemSearchFn($('.GooFlow_left'));
|
|
|
itemSearchFn($('.GooFlow_right'));
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 端点及转换器HTML结构搭建 【UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
function appHtml(data, className, title) {
|
|
|
var list = data, htmlStr;
|
|
|
htmlStr = "<div class='GooFlow_app " +
|
|
|
className +
|
|
|
"'><div class='GooFlow_app_head'><h1 class='GooFlow_app_tit'>"
|
|
|
+ title +
|
|
|
"</h1><div class='GooFlow_app_search'><input class='GooFlow_app_search_input' type='text' placeholder='搜索"
|
|
|
+ title +
|
|
|
"'><div class='GooFlow_search_btn'></div></div></div><div class='GooFlow_app_cont'><ul" +
|
|
|
" class='GooFlow_app_list'>"
|
|
|
|
|
|
if (title == '端点') {
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
|
htmlStr += "<li class='GooFlow_app_list_item'>";
|
|
|
htmlStr += "<div class='GooFlow_app_list_tit'>" + list[i].title + "</div>";
|
|
|
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 ='" + list[i].list[j].value +
|
|
|
"'><div class='app_icon'></div> <div class='app_name'>" + list[i].list[j].name + "</div></li>"
|
|
|
}
|
|
|
htmlStr += "</ul></li>";
|
|
|
}
|
|
|
} else if (title == '转换器'){
|
|
|
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='" + list[i].value +
|
|
|
"'><div class='app_icon'></div> <div class='app_name'>" + list[i].name + "</div></li>"
|
|
|
}
|
|
|
htmlStr += "</ul></li></ul></div></div>";
|
|
|
}
|
|
|
that.$contBox.prepend(htmlStr);
|
|
|
}
|
|
|
if (property.haveTool) {
|
|
|
var HtmlStr = "",
|
|
|
i = 0,
|
|
|
length = property.toolBtns.length;
|
|
|
|
|
|
// 工具栏UI构建
|
|
|
HtmlStr = "<div class='GooFlow_tool'>";
|
|
|
for (; i < length; ++i) {
|
|
|
HtmlStr += "<i class='ico_" + property.toolBtns[i] + "'></i>";
|
|
|
}
|
|
|
HtmlStr += "</div>";
|
|
|
this.$toolBar = $(HtmlStr);
|
|
|
this.$headBox.append(this.$toolBar);
|
|
|
|
|
|
// 工具栏功能绑定
|
|
|
this.$toolBar.children().on("click", function () {
|
|
|
var icoName = $(this).attr("class").match(/ico_\w+/g)[0];
|
|
|
switch (icoName) {
|
|
|
case "ico_save":
|
|
|
that.exportData();
|
|
|
break;
|
|
|
case "ico_undo":
|
|
|
that.undo();
|
|
|
break;
|
|
|
case "ico_redo":
|
|
|
that.redo();
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 流程图结点构建 【UI相关--HEAD】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:17
|
|
|
* */
|
|
|
if (property.flowChart) {
|
|
|
var HtmlStr = "",
|
|
|
i = 0,
|
|
|
length = property.flowBtns.length;
|
|
|
// 流程图结点UI构建
|
|
|
HtmlStr += "<div class='GooFlow_flowChart'>"
|
|
|
// 加入用户自定义工具栏
|
|
|
for (; i < length; ++i) {
|
|
|
HtmlStr += "<i id='" + this.$id + "_btn_" + property.flowBtns[i] + "' class='ico_" + property.flowBtns[i] + "'/></i>";
|
|
|
}
|
|
|
HtmlStr += "</div>"
|
|
|
this.$flowChart = $(HtmlStr);
|
|
|
this.$headBox.append(this.$flowChart);
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 端点及转换器公共筛选方法
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
function itemSearchFn(obj) {
|
|
|
var $list = obj.find($('.GooFlow_app_list_item'));
|
|
|
var $input = obj.find($('.GooFlow_app_search_input'));
|
|
|
var $item = obj.find($('.GooFlow_app_item'));
|
|
|
$input.on('keyup', {inthis: that}, function () {
|
|
|
var input = $input.val()
|
|
|
if (input.length > 0) {
|
|
|
$item.hide();
|
|
|
var filterObj = $item.filter(function (index) {
|
|
|
return $(this).text().indexOf(input) >= 0;
|
|
|
})
|
|
|
if (filterObj.length > 0) {
|
|
|
filterObj.css("display", "block").parent().parent().parent().addClass('selected');
|
|
|
} else {
|
|
|
$item.show();
|
|
|
$list.removeClass('selected');
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
$item.show();
|
|
|
$list.removeClass('selected');
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 端点及转换器公共HTML结构搭建 【UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
function renderHtml(title, className, htmlStr) {
|
|
|
var appBox = $("<div class='GooFlow_app'></div>");
|
|
|
var appHead = $("<div class='GooFlow_app_head'><h1 class='GooFlow_app_tit'></h1><div class='GooFlow_app_search'><input class='GooFlow_app_search_input' type='text' placeholder='快速搜索'><div class='GooFlow_search_btn'></div></div></div>");
|
|
|
var appCont = $("<div class='GooFlow_app_cont'><ul class='GooFlow_app_list'></ul></div>");
|
|
|
|
|
|
appHead.children('.GooFlow_app_tit').text(title);
|
|
|
appCont.children('.GooFlow_app_list').append(htmlStr);
|
|
|
appBox.prepend(appHead).append(appCont).addClass(className);
|
|
|
return appBox;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 端点数据渲染及事件添加 【UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
function getAllEndpointsFn(data) {
|
|
|
var list = $.parseJSON(data.message),
|
|
|
htmlStr = '';
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
|
htmlStr += "<li class='GooFlow_app_list_item'>";
|
|
|
htmlStr += "<div class='GooFlow_app_list_tit'>" + list[i].title + "</div>";
|
|
|
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 ='" + list[i].list[j].value +
|
|
|
"'><div class='app_icon'></div> <div class='app_name'>" + list[i].list[j].name + "</div></li>"
|
|
|
}
|
|
|
htmlStr += "</ul></li>";
|
|
|
}
|
|
|
if (htmlStr) {
|
|
|
that.$contBoxLeft = renderHtml('端点', 'GooFlow_left', htmlStr);
|
|
|
that.$contBox.prepend(that.$contBoxLeft)
|
|
|
|
|
|
// tab标签页
|
|
|
$('.GooFlow_app_list_tit', that.$contBoxLeft).on("click", function () {
|
|
|
$('.GooFlow_app_item', that.$contBoxLeft).show();
|
|
|
$(this).parent().toggleClass('selected').siblings().removeClass('selected');
|
|
|
});
|
|
|
// 拖拽
|
|
|
addNodeByDrag($('.GooFlow_app_item', that.$contBoxLeft), 'task');
|
|
|
// 筛选
|
|
|
itemSearchFn(that.$contBoxLeft);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 转换器数据渲染及事件添加 【UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
function getAllProcessorsFn(data) {
|
|
|
|
|
|
var list = $.parseJSON(data.message),
|
|
|
htmlStr = '';
|
|
|
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='" + list[i].value +
|
|
|
"'><div class='app_icon'></div> <div class='app_name'>" + list[i].name + "</div></li>"
|
|
|
}
|
|
|
htmlStr += "</ul></li>";
|
|
|
if (htmlStr) {
|
|
|
that.$contBoxRight = renderHtml('转换器', 'GooFlow_right', htmlStr);
|
|
|
that.$contBox.prepend(that.$contBoxRight)
|
|
|
|
|
|
// 拖拽
|
|
|
addNodeByDrag($('.GooFlow_app_item', that.$contBoxRight), 'plug');
|
|
|
// 筛选
|
|
|
itemSearchFn(that.$contBoxRight);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Todo: 端点及转换数据加载 【ajax相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
GooFunc.getAjaxData(getAllEndpointsURL, getAllEndpointsFn);
|
|
|
GooFunc.getAjaxData(getAllProcessorsURL, getAllProcessorsFn);
|
|
|
|
|
|
/*
|
|
|
* Todo: 画布区域 【UI相关】
|
|
|
* Todo: 画布区域HTML结构搭建 【UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:09
|
|
|
* */
|
|
|
this.$contBox.append("<div class='GooFlow_work'></div>");
|
|
|
this.$workArea = $("<div class='GooFlow_work_inner'></div>").attr({
|
|
|
"unselectable": "on",
|
|
|
"onselectstart": 'return false',
|
|
|
"onselect": 'document.selection.empty()'
|
|
|
});
|
|
|
this.$contBox.children(".GooFlow_work").append(this.$workArea);
|
|
|
|
|
|
this.$draw = null;
|
|
|
this.initDraw("draw_" + this.$id, width, height, workWidth, workHeight);
|
|
|
|
|
|
/*
|
|
|
* Todo: ### 画布区域功能设置 ******************************************* //
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:15
|
|
|
* */
|
|
|
if (this.$editable) {
|
|
|
|
|
|
/*
|
|
|
* Todo: 空白区域点击事件 【画布--click事件】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:05
|
|
|
* */
|
|
|
this.$workArea.on("click", {inthis: this}, function (e) {
|
|
|
// 获取事件对象
|
|
|
var This = e.data.inthis;
|
|
|
This.$canDelLine = false;
|
|
|
|
|
|
if (!e) {
|
|
|
e = window.event;
|
|
|
}
|
|
|
if (!e.data.inthis.$editable) {
|
|
|
return;
|
|
|
}
|
|
|
// 获取当前工具类型
|
|
|
var type = e.data.inthis.$nowType;
|
|
|
// 如果当前所选工具类型为指针时
|
|
|
if (type == "cursor") {
|
|
|
var t = $(e.target);
|
|
|
var n = t.prop("tagName");
|
|
|
if (n == "svg" || (n == "DIV" && t.prop("class").indexOf("GooFlow_work") > -1) || n == "LABEL") {
|
|
|
// 点击空白处取消所有结点/连线被选定的状态
|
|
|
e.data.inthis.blurItem();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 对结点进行移动或者RESIZE时用来显示的遮罩层
|
|
|
this.$ghost = $("<div class='rs_ghost GooFlow_item'></div>").attr({
|
|
|
"unselectable": "on",
|
|
|
"onselectstart": 'return false',
|
|
|
"onselect": 'document.selection.empty()'
|
|
|
});
|
|
|
this.$bgDiv.append(this.$ghost);
|
|
|
|
|
|
/*
|
|
|
* Todo: 线条绘制 【线条--mousemove & mouseup事件】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:04
|
|
|
* */
|
|
|
this.$workArea.mousemove({inthis: this}, function (e) {
|
|
|
|
|
|
var This = e.data.inthis;
|
|
|
if (This.$nowType == "cursor") {
|
|
|
var lineStart = $(this).data("lineStart");
|
|
|
if (!lineStart)return;
|
|
|
|
|
|
var ev = GooFunc.mousePosition(e), t = GooFunc.getElCoordinate(this);
|
|
|
var X, Y;
|
|
|
X = ev.x - t.left + this.parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + this.parentNode.scrollTop;
|
|
|
|
|
|
var line = document.getElementById("GooFlow_tmp_line");
|
|
|
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
line.childNodes[0].setAttribute("d", "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y);
|
|
|
line.childNodes[1].setAttribute("d", "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y);
|
|
|
|
|
|
if (line.childNodes[1].getAttribute("marker-end") == "url(\"#arrow2\")") {
|
|
|
line.childNodes[1].setAttribute("marker-end", "url(#arrow3)");
|
|
|
}
|
|
|
else {
|
|
|
line.childNodes[1].setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
line.points.value = lineStart.x + "," + lineStart.y + " " + X + "," + Y;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
this.$workArea.mouseup({inthis: this}, function (e) {
|
|
|
if (e.data.inthis.$nowType != "cursor") {
|
|
|
return;
|
|
|
}
|
|
|
$(this).css("cursor", "auto").removeData("lineStart");
|
|
|
var HtmlStr = document.getElementById("GooFlow_tmp_line");
|
|
|
if (HtmlStr) {
|
|
|
e.data.inthis.$draw.removeChild(HtmlStr);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点拖拽 【结点- document.mousemove@@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:03
|
|
|
* */
|
|
|
var onDrag = false;
|
|
|
function addNodeByDrag(obj, type) {
|
|
|
obj.mousedown(function () {
|
|
|
that.$nowType = type;
|
|
|
if (!type) {
|
|
|
var thisType = $(this).attr("id").split("btn_")[1];
|
|
|
that.$nowType = thisType;
|
|
|
}
|
|
|
onDrag = true;
|
|
|
that.$newNodeTxt = $(this).children('.app_name').text();
|
|
|
that.$newNodeValue = $(this).attr('data');
|
|
|
console.log( $(this));
|
|
|
});
|
|
|
$(document).mouseup(function () {
|
|
|
onDrag = false;
|
|
|
});
|
|
|
that.$workArea.mousemove(function () {
|
|
|
if (onDrag) {
|
|
|
var X, Y;
|
|
|
var ev = GooFunc.mousePosition();
|
|
|
X = ev.x - 433 + this.parentNode.scrollLeft;
|
|
|
Y = ev.y - 262 + this.parentNode.scrollTop;
|
|
|
that.$workArea.children('#node-ghost').attr({class: 'node-' + that.$nowType});
|
|
|
that.$workArea.css({cursor: 'move'}).children('#node-ghost').css({
|
|
|
display: "block",
|
|
|
top: Y + "px",
|
|
|
left: X + "px",
|
|
|
cursor: "move",
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
that.$workArea.mouseup(function () {
|
|
|
if (onDrag) {
|
|
|
addNodeOnArea();
|
|
|
onDrag = false;
|
|
|
that.$workArea.css({cursor: 'pointer'}).children('#node-ghost').remove();
|
|
|
}
|
|
|
});
|
|
|
that.$workArea.mouseenter(function () {
|
|
|
that.$workArea.append("<div id='node-ghost'></div>");
|
|
|
})
|
|
|
that.$workArea.mouseleave(function () {
|
|
|
that.$workArea.css({cursor: 'pointer'}).children('#node-ghost').remove();
|
|
|
})
|
|
|
|
|
|
function addNodeOnArea() {
|
|
|
var X, Y;
|
|
|
var ev = GooFunc.mousePosition();
|
|
|
X = ev.x - 433 + that.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - 262 + that.$workArea[0].parentNode.scrollTop;
|
|
|
that.addNode(that.$id + "_node_" + that.$nodeCount, {
|
|
|
name: "node_" + that.$nodeCount,
|
|
|
left: X,
|
|
|
top: Y,
|
|
|
type: that.$nowType
|
|
|
});
|
|
|
that.$max++;
|
|
|
}
|
|
|
}
|
|
|
addNodeByDrag(that.$flowChart.children());
|
|
|
|
|
|
// 为了结点而增加的一些集体delegate绑定
|
|
|
this.initWorkForNode();
|
|
|
|
|
|
// 文本框
|
|
|
this.$textArea = $("<textarea class='text_input'></textarea>");
|
|
|
this.$bgDiv.append(this.$textArea);
|
|
|
|
|
|
// 操作折线时的移动框
|
|
|
this.$lineMove = $("<div class='GooFlow_line_move' style='display:none'></div>");
|
|
|
this.$workArea.append(this.$lineMove);
|
|
|
|
|
|
/*
|
|
|
* Todo: 线条移动事件 【线条编辑相关 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:33
|
|
|
* */
|
|
|
this.$lineMove.on("mousedown", {inthis: this}, function (e) {
|
|
|
var lm = $(this);
|
|
|
lm.css({"background-color": "#333"});
|
|
|
var This = e.data.inthis;
|
|
|
var ev = GooFunc.mousePosition(e), t = GooFunc.getElCoordinate(This.$workArea[0]);
|
|
|
var X, Y;
|
|
|
X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
|
|
|
var p = This.$lineMove.position();
|
|
|
var vX = X - p.left, vY = Y - p.top;
|
|
|
var isMove = false;
|
|
|
|
|
|
document.onmousemove = function (e) {
|
|
|
if (!e) e = window.event;
|
|
|
var ev = GooFunc.mousePosition(e);
|
|
|
var ps = This.$lineMove.position();
|
|
|
X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
|
|
|
if (This.$lineMove.data("type") == "lr") {
|
|
|
X = X - vX;
|
|
|
if (X < 0) X = 0;
|
|
|
else if (X > This.$workArea.width())
|
|
|
X = This.$workArea.width();
|
|
|
This.$lineMove.css({left: X + "px"});
|
|
|
}
|
|
|
else if (This.$lineMove.data("type") == "tb") {
|
|
|
Y = Y - vY;
|
|
|
if (Y < 0) Y = 0;
|
|
|
else if (Y > This.$workArea.height())
|
|
|
Y = This.$workArea.height();
|
|
|
This.$lineMove.css({top: Y + "px"});
|
|
|
}
|
|
|
isMove = true;
|
|
|
}
|
|
|
|
|
|
document.onmouseup = function (e) {
|
|
|
if (isMove) {
|
|
|
var p = This.$lineMove.position();
|
|
|
if (This.$lineMove.data("type") == "lr")
|
|
|
This.setLineM(This.$lineMove.data("tid"), p.left + 3);
|
|
|
else if (This.$lineMove.data("type") == "tb")
|
|
|
This.setLineM(This.$lineMove.data("tid"), p.top + 3);
|
|
|
}
|
|
|
This.$lineMove.css({"background-color": "transparent"});
|
|
|
if (This.$focus == This.$lineMove.data("tid")) {
|
|
|
This.focusItem(This.$lineMove.data("tid"));
|
|
|
}
|
|
|
document.onmousemove = null;
|
|
|
document.onmouseup = null;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 生成线条修改框 【线条编辑UI相关 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:02
|
|
|
* */
|
|
|
this.$lineOper = $("<div class='GooFlow_line_oper' style='display:none'><b class='b_l1'></b><b class='b_l2'></b><b class='b_l3'></b><b class='b_x'></b></div>");
|
|
|
this.$workArea.append(this.$lineOper);
|
|
|
this.$lineOper.on("click", {inthis: this}, function (e) {
|
|
|
if (!e) e = window.event;
|
|
|
if (e.target.tagName != "B") return;
|
|
|
var This = e.data.inthis;
|
|
|
var id = $(this).data("tid");
|
|
|
switch ($(e.target).attr("class")) {
|
|
|
case "b_x":
|
|
|
This.delLine(id);
|
|
|
this.style.display = "none";
|
|
|
break;
|
|
|
case "b_l1":
|
|
|
This.setLineType(id, "lr");
|
|
|
break;
|
|
|
case "b_l2":
|
|
|
This.setLineType(id, "tb");
|
|
|
break;
|
|
|
case "b_l3":
|
|
|
This.setLineType(id, "sl");
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
//下面绑定当结点/线/分组块的一些操作事件,这些事件可直接通过this访问对象本身
|
|
|
//当操作某个单元（结点/线/分组块）被添加时, 触发的方法, 返回FALSE可阻止添加事件的发生
|
|
|
//格式function(id, type,json)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,json即addNode,addLine或addArea方法的第二个传参json.
|
|
|
this.onItemAdd = property.onItemAdd;
|
|
|
|
|
|
//当操作某个单元（结点/线/分组块）被删除时, 触发的方法, 返回FALSE可阻止删除事件的发生
|
|
|
//格式function(id, type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值
|
|
|
this.onItemDel = property.onItemDel;
|
|
|
|
|
|
//当操作某个单元（结点/分组块）被移动时, 触发的方法, 返回FALSE可阻止移动事件的发生
|
|
|
//格式function(id, type,left,top)：id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值, 线line不支持移动,left是新的左边距坐标, top是新的顶边距坐标
|
|
|
this.onItemMove = property.onItemMove;
|
|
|
|
|
|
//当操作某个单元（结点/线/分组块）被重命名时, 触发的方法, 返回FALSE可阻止重命名事件的发生
|
|
|
//格式function(id,name,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,name是新的名称
|
|
|
this.onItemRename = property.onItemRename;
|
|
|
|
|
|
//当操作某个单元（结点/线）被由不选中变成选中时, 触发的方法, 返回FALSE可阻止选中事件的发生
|
|
|
//格式function(id,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中
|
|
|
this.onItemFocus = property.onItemFocus;
|
|
|
|
|
|
//当操作某个单元（结点/线）被由选中变成不选中时, 触发的方法, 返回FALSE可阻止取消选中事件的发生
|
|
|
//格式function(id, type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被取消选中
|
|
|
this.onItemBlur = property.onItemBlur;
|
|
|
|
|
|
//当操作某个单元（结点/分组块）被重定义大小或造型时, 触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, type,width,height)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值;width是新的宽度,height是新的高度
|
|
|
this.onItemResize = property.onItemResize;
|
|
|
|
|
|
//当移动某条折线中段的位置, 触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, M)：id是单元的唯一标识ID,M是中段的新X(或Y)的坐标
|
|
|
this.onLineMove = property.onLineMove;
|
|
|
|
|
|
//当变换某条连接线的类型, 触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, type)：id是单元的唯一标识ID,type是连接线的新类型,"sl":直线,"lr":中段可左右移动的折线,"tb":中段可上下移动的折线
|
|
|
this.onLineSetType = property.onLineSetType;
|
|
|
|
|
|
//当用重色标注某个结点/转换线时触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, type, mark)：id是单元的唯一标识ID,type是单元类型（"node"结点,"line"转换线）, mark为布尔值,表示是要标注TRUE还是取消标注FALSE
|
|
|
this.onItemMark = property.onItemMark;
|
|
|
|
|
|
|
|
|
/*
|
|
|
* Todo: 取消&重做函数 【堆栈相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:12
|
|
|
* */
|
|
|
|
|
|
//如果要使用堆栈记录操作并提供“撤销/重做”的功能
|
|
|
if (property.useOperStack) {
|
|
|
this.$undoStack = [];
|
|
|
this.$redoStack = [];
|
|
|
this.$isUndo = 0;
|
|
|
|
|
|
///////////////以下是构造撤销操作/重做操作的方法
|
|
|
//为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放40步操作;超过40步时,将自动删掉最旧的一个缓存
|
|
|
this.pushOper = function (funcName, paras) {
|
|
|
var len = this.$undoStack.length;
|
|
|
if (this.$isUndo == 1) {
|
|
|
this.$redoStack.push([funcName, paras]);
|
|
|
this.$isUndo = false;
|
|
|
if (this.$redoStack.length > 40) this.$redoStack.shift();
|
|
|
} else {
|
|
|
this.$undoStack.push([funcName, paras]);
|
|
|
if (this.$undoStack.length > 40) this.$undoStack.shift();
|
|
|
if (this.$isUndo == 0) {
|
|
|
this.$redoStack.splice(0, this.$redoStack.length);
|
|
|
}
|
|
|
this.$isUndo = 0;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
//将外部的方法加入到GooFlow对象的事务操作堆栈中,在过后的undo/redo操作中可以进行控制, 一般用于对流程图以外的附加信息进行编辑的事务撤销/重做控制；
|
|
|
//传参func为要执行方法对象,jsonPara为外部方法仅有的一个面向字面的JSON传参,由JSON对象带入所有要传的信息；
|
|
|
//提示:为了让外部方法能够被UNDO/REDO,需要在编写这些外部方法实现时,加入对该方法执行后效果回退的另一个执行方法的pushExternalOper
|
|
|
this.pushExternalOper = function (func, jsonPara) {
|
|
|
this.pushOper("externalFunc", [func, jsonPara]);
|
|
|
};
|
|
|
|
|
|
//撤销上一步操作
|
|
|
this.undo = function () {
|
|
|
if (this.$undoStack.length == 0) return;
|
|
|
var tmp = this.$undoStack.pop();
|
|
|
this.$isUndo = 1;
|
|
|
if (tmp[0] == "externalFunc") {
|
|
|
tmp[1][0](tmp[1][1]);
|
|
|
}
|
|
|
else {
|
|
|
//传参的数量,最多支持5个.
|
|
|
switch (tmp[1].length) {
|
|
|
case 0:
|
|
|
this[tmp[0]]();
|
|
|
break;
|
|
|
case 1:
|
|
|
this[tmp[0]](tmp[1][0]);
|
|
|
break;
|
|
|
case 2:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1]);
|
|
|
break;
|
|
|
case 3:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]);
|
|
|
break;
|
|
|
case 4:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]);
|
|
|
break;
|
|
|
case 5:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
//重做最近一次被撤销的操作
|
|
|
this.redo = function () {
|
|
|
if (this.$redoStack.length == 0) return;
|
|
|
var tmp = this.$redoStack.pop();
|
|
|
this.$isUndo = 2;
|
|
|
if (tmp[0] == "externalFunc") {
|
|
|
tmp[1][0](tmp[1][1]);
|
|
|
}
|
|
|
else {
|
|
|
//传参的数量,最多支持5个.
|
|
|
switch (tmp[1].length) {
|
|
|
case 0:
|
|
|
this[tmp[0]]();
|
|
|
break;
|
|
|
case 1:
|
|
|
this[tmp[0]](tmp[1][0]);
|
|
|
break;
|
|
|
case 2:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1]);
|
|
|
break;
|
|
|
case 3:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]);
|
|
|
break;
|
|
|
case 4:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]);
|
|
|
break;
|
|
|
case 5:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
this.initDraw("draw_" + this.$id);
|
|
|
|
|
|
// 结点镜像 & 文本框
|
|
|
this.$ghost = $("<div class='rs_ghost GooFlow_item'></div>").attr({
|
|
|
"unselectable": "on",
|
|
|
"onselectstart": 'return false',
|
|
|
"onselect": 'document.selection.empty()'
|
|
|
});
|
|
|
this.$textArea = $("<textarea class='text_input'></textarea>");
|
|
|
this.$bgDiv.append(this.$ghost).append(this.$textArea);
|
|
|
// 操作折线时的移动框 & 线条增删改操作框
|
|
|
this.$lineMove = $("<div class='GooFlow_line_move' style='display:none'></div>");
|
|
|
this.$lineOper = $("<div class='GooFlow_line_oper' style='display:none'><b class='b_l1'></b><b class='b_l2'></b><b class='b_l3'></b><b class='b_x'></b></div>");
|
|
|
this.$workArea.append(this.$lineMove).append(this.$lineOper);
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点拖拽 【增加结点触发方法】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:03
|
|
|
* */
|
|
|
var onDrag = false;
|
|
|
function addNodeByDrag(obj, type) {
|
|
|
obj.mousedown(function () {
|
|
|
that.$nowType = type;
|
|
|
if (!type) {
|
|
|
var thisType = $(this).attr("id").split("btn_")[1];
|
|
|
that.$nowType = thisType;
|
|
|
}
|
|
|
onDrag = true;
|
|
|
that.$newNodeTxt = $(this).children('.app_name').text();
|
|
|
that.$newNodeValue = $(this).attr('data');
|
|
|
});
|
|
|
$(document).mouseup(function () {
|
|
|
onDrag = false;
|
|
|
});
|
|
|
that.$workArea.mousemove(function () {
|
|
|
if (onDrag) {
|
|
|
var X, Y;
|
|
|
var ev = GooFunc.mousePosition();
|
|
|
X = ev.x - 433 + this.parentNode.scrollLeft;
|
|
|
Y = ev.y - 262 + this.parentNode.scrollTop;
|
|
|
that.$workArea.children('#node-ghost').attr({class: 'node-' + that.$nowType});
|
|
|
that.$workArea.css({cursor: 'move'}).children('#node-ghost').css({
|
|
|
display: "block",
|
|
|
top: Y + "px",
|
|
|
left: X + "px",
|
|
|
cursor: "move",
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
that.$workArea.mouseup(function () {
|
|
|
if (onDrag) {
|
|
|
addNodeOnArea();
|
|
|
onDrag = false;
|
|
|
that.$workArea.css({cursor: 'pointer'}).children('#node-ghost').remove();
|
|
|
}
|
|
|
});
|
|
|
that.$workArea.mouseenter(function () {
|
|
|
that.$workArea.append("<div id='node-ghost'></div>");
|
|
|
})
|
|
|
that.$workArea.mouseleave(function () {
|
|
|
that.$workArea.css({cursor: 'pointer'}).children('#node-ghost').remove();
|
|
|
})
|
|
|
|
|
|
function addNodeOnArea() {
|
|
|
var X, Y;
|
|
|
var ev = GooFunc.mousePosition();
|
|
|
X = ev.x - 433 + that.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - 262 + that.$workArea[0].parentNode.scrollTop;
|
|
|
that.addNode(that.$id + "_node_" + that.$nodeCount, {
|
|
|
name: "node_" + that.$nodeCount,
|
|
|
type: that.$nowType,
|
|
|
left: X,
|
|
|
top: Y
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
addNodeByDrag(this.$flowChart.children());
|
|
|
|
|
|
/*
|
|
|
* Todo: ### 画布区域功能设置 ******************************************* //
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:15
|
|
|
* */
|
|
|
if (this.$editable) {
|
|
|
// 事件添加
|
|
|
this.initEvents();
|
|
|
|
|
|
/*
|
|
|
* Todo: 取消&重做函数 【堆栈相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:12
|
|
|
* */
|
|
|
if (property.useOperStack) {
|
|
|
this.$undoStack = [];
|
|
|
this.$redoStack = [];
|
|
|
this.$isUndo = 0;
|
|
|
|
|
|
///////////////以下是构造撤销操作/重做操作的方法
|
|
|
//为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放40步操作;超过40步时,将自动删掉最旧的一个缓存
|
|
|
this.pushOper = function (funcName, paras) {
|
|
|
var len = this.$undoStack.length;
|
|
|
if (this.$isUndo == 1) {
|
|
|
this.$redoStack.push([funcName, paras]);
|
|
|
this.$isUndo = false;
|
|
|
if (this.$redoStack.length > 40) this.$redoStack.shift();
|
|
|
} else {
|
|
|
this.$undoStack.push([funcName, paras]);
|
|
|
if (this.$undoStack.length > 40) this.$undoStack.shift();
|
|
|
if (this.$isUndo == 0) {
|
|
|
this.$redoStack.splice(0, this.$redoStack.length);
|
|
|
}
|
|
|
this.$isUndo = 0;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
this.pushExternalOper = function (func, jsonPara) {
|
|
|
this.pushOper("externalFunc", [func, jsonPara]);
|
|
|
};
|
|
|
|
|
|
//撤销上一步操作
|
|
|
this.undo = function () {
|
|
|
if (this.$undoStack.length == 0) return;
|
|
|
var tmp = this.$undoStack.pop();
|
|
|
this.$isUndo = 1;
|
|
|
if (tmp[0] == "externalFunc") {
|
|
|
tmp[1][0](tmp[1][1]);
|
|
|
}
|
|
|
else {
|
|
|
//传参的数量,最多支持5个.
|
|
|
switch (tmp[1].length) {
|
|
|
case 0:
|
|
|
this[tmp[0]]();
|
|
|
break;
|
|
|
case 1:
|
|
|
this[tmp[0]](tmp[1][0]);
|
|
|
break;
|
|
|
case 2:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1]);
|
|
|
break;
|
|
|
case 3:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]);
|
|
|
break;
|
|
|
case 4:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]);
|
|
|
break;
|
|
|
case 5:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
//重做最近一次被撤销的操作
|
|
|
this.redo = function () {
|
|
|
if (this.$redoStack.length == 0) return;
|
|
|
var tmp = this.$redoStack.pop();
|
|
|
this.$isUndo = 2;
|
|
|
if (tmp[0] == "externalFunc") {
|
|
|
tmp[1][0](tmp[1][1]);
|
|
|
}
|
|
|
else {
|
|
|
//传参的数量,最多支持5个.
|
|
|
switch (tmp[1].length) {
|
|
|
case 0:
|
|
|
this[tmp[0]]();
|
|
|
break;
|
|
|
case 1:
|
|
|
this[tmp[0]](tmp[1][0]);
|
|
|
break;
|
|
|
case 2:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1]);
|
|
|
break;
|
|
|
case 3:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]);
|
|
|
break;
|
|
|
case 4:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]);
|
|
|
break;
|
|
|
case 5:
|
|
|
this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@ -714,360 +499,594 @@ function GooFlow(bgDiv, property) {
|
|
|
* time: 14:59
|
|
|
* */
|
|
|
GooFlow.prototype = {
|
|
|
useSVG: true,
|
|
|
/*
|
|
|
* Todo: SVG箭头相关【UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:11
|
|
|
* */
|
|
|
|
|
|
getSvgMarker: function (id, color) {
|
|
|
var m = document.createElementNS("http://www.w3.org/2000/svg", "marker");
|
|
|
m.setAttribute("id", id);
|
|
|
m.setAttribute("viewBox", "0 0 6 6");
|
|
|
m.setAttribute("refX", 5);
|
|
|
m.setAttribute("refY", 3);
|
|
|
m.setAttribute("markerUnits", "strokeWidth");
|
|
|
m.setAttribute("markerWidth", 8);
|
|
|
m.setAttribute("markerHeight", 8);
|
|
|
m.setAttribute("orient", "auto");
|
|
|
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
path.setAttribute("d", "M 0 0 L 6 3 L 0 6 L 2 3 z");
|
|
|
path.setAttribute("fill", color);
|
|
|
path.setAttribute("stroke-width", 2);
|
|
|
m.appendChild(path);
|
|
|
return m;
|
|
|
},
|
|
|
|
|
|
|
|
|
/*
|
|
|
* Todo: 初始化画布 【SVG & 箭头 UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:51
|
|
|
* */
|
|
|
initDraw: function (id, width, height, workWidth, workHeight) {
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
this.$draw = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
|
//可创建带有指定命名空间的元素节点
|
|
|
this.$workArea.prepend(this.$draw);
|
|
|
// 定义可以重复利用的元素
|
|
|
var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
|
|
|
this.$draw.appendChild(defs);
|
|
|
defs.appendChild(GooFlow.prototype.getSvgMarker("arrow1", "#323232"));
|
|
|
defs.appendChild(GooFlow.prototype.getSvgMarker("arrow2", "#00b7ee"));
|
|
|
defs.appendChild(GooFlow.prototype.getSvgMarker("arrow3", "#f00"));
|
|
|
}
|
|
|
else {
|
|
|
this.$draw = document.createElement("v:group");
|
|
|
this.$draw.coordsize = workWidth + "," + workHeight;
|
|
|
this.$workArea.prepend("<div class='GooFlow_work_vml'" +
|
|
|
" style='position:relative;width:100%;height:100%'></div>");
|
|
|
this.$workArea.children("div")[0].insertBefore(this.$draw, null);
|
|
|
}
|
|
|
|
|
|
// 设置画布属性
|
|
|
this.$draw.id = id;
|
|
|
this.$draw.style.width = '100%';
|
|
|
this.$draw.style.height = '100%';
|
|
|
|
|
|
//绑定连线的点击选中以及双击编辑事件
|
|
|
var tmpClk = (GooFlow.prototype.useSVG != "") ? 'g' : 'PolyLine';
|
|
|
|
|
|
// 对连线绑定单击事件
|
|
|
$(this.$draw).delegate(tmpClk, "click", {inthis: this}, function (e) {
|
|
|
e.data.inthis.focusItem(this.id, true);
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 双击线条编辑事件 【SVG- 双击事件 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:50
|
|
|
* */
|
|
|
if (this.$editable) {
|
|
|
$(this.$draw).delegate(tmpClk, "dblclick", {inthis: this}, function (e) {
|
|
|
var oldTxt, x, y, from, to;
|
|
|
var This = e.data.inthis;
|
|
|
// 编辑的时候禁止delete键删除
|
|
|
This.$canDelLine = false;
|
|
|
This.$deteNodeId = '';
|
|
|
This.$deteLineId = '';
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
oldTxt = this.childNodes[2].textContent;
|
|
|
from = this.getAttribute("from").split(",");
|
|
|
to = this.getAttribute("to").split(",");
|
|
|
} else {
|
|
|
oldTxt = this.childNodes[1].innerHTML;
|
|
|
var n = this.getAttribute("fromTo").split(",");
|
|
|
from = [n[0], n[1]];
|
|
|
to = [n[2], n[3]];
|
|
|
}
|
|
|
|
|
|
if (This.$lineData[this.id].type == "lr") {
|
|
|
from[0] = This.$lineData[this.id].M;
|
|
|
to[0] = from[0];
|
|
|
}
|
|
|
else if (This.$lineData[this.id].type == "tb") {
|
|
|
from[1] = This.$lineData[this.id].M;
|
|
|
to[1] = from[1];
|
|
|
}
|
|
|
|
|
|
x = (parseInt(from[0], 10) + parseInt(to[0], 10)) / 2 + 230;
|
|
|
y = (parseInt(from[1], 10) + parseInt(to[1], 10)) / 2 + 60;
|
|
|
|
|
|
This.$textArea.val(oldTxt).css({
|
|
|
display: "block",
|
|
|
left: x,
|
|
|
top: y
|
|
|
}).data("id", This.$focus).focus();
|
|
|
|
|
|
This.$workArea.parent().one("mousedown", function (e) {
|
|
|
This.setName(This.$textArea.data("id"), This.$textArea.val(), "line");
|
|
|
This.$textArea.val("").removeData("id").hide();
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: ### 工作区事件绑定 ***************************************************************
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:09
|
|
|
* */
|
|
|
initWorkForNode: function () {
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点选中事件 【结点--click 事件 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:21
|
|
|
* */
|
|
|
this.$workArea.delegate(".GooFlow_item", "click", {inthis: this}, function (e) {
|
|
|
e.data.inthis.focusItem(this.id, true);
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点删除事件 【删除按钮-mousedown事件 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:22
|
|
|
* */
|
|
|
this.$workArea.on("mousedown", ".rs_close", {inthis: this}, function (e) {
|
|
|
if (!e) e = window.event;
|
|
|
e.data.inthis.delNode(e.data.inthis.$focus);
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点移动事件 【结点--mousedown 事件 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:22
|
|
|
* */
|
|
|
this.$workArea.on("mousedown", ".GooFlow_item", {inthis: this}, function (e) {
|
|
|
if (!e) e = window.event;
|
|
|
var This = e.data.inthis;
|
|
|
var Dom = $(this);
|
|
|
var id = Dom.attr("id");
|
|
|
This.focusItem(id, true);
|
|
|
var ev = GooFunc.mousePosition(e),
|
|
|
t = GooFunc.getElCoordinate(This.$workArea[0]),
|
|
|
c = GooFunc.getElCoordinate(This.$MainContener);
|
|
|
|
|
|
This.$ghost.css({
|
|
|
display: "block",
|
|
|
top: This.$nodeData[id].top + 133 - This.$workArea[0].parentNode.scrollTop + "px",
|
|
|
left: This.$nodeData[id].left + 200 - This.$workArea[0].parentNode.scrollLeft + "px",
|
|
|
cursor: "move"
|
|
|
});
|
|
|
|
|
|
var X, Y;
|
|
|
X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
|
|
|
var vX = X - This.$nodeData[id].left, vY = Y - This.$nodeData[id].top;
|
|
|
var isMove = false;
|
|
|
|
|
|
document.onmousemove = function (e) {
|
|
|
if (!e) {
|
|
|
e = window.event;
|
|
|
}
|
|
|
var ev = GooFunc.mousePosition(e);
|
|
|
X = ev.x - vX - c.left;
|
|
|
Y = ev.y - vY - c.top;
|
|
|
if (X < t.left - c.left - This.$workArea[0].parentNode.scrollLeft) {
|
|
|
X = t.left - c.left - This.$workArea[0].parentNode.scrollLeft;
|
|
|
}
|
|
|
else if (X + This.$workArea[0].parentNode.scrollLeft + This.$nodeData[id].width > t.left - c.left + This.$workArea.width()) {
|
|
|
X = t.left - c.left + This.$workArea.width() - This.$workArea[0].parentNode.scrollLeft - This.$nodeData[id].width;
|
|
|
}
|
|
|
if (Y < t.top - c.top - This.$workArea[0].parentNode.scrollTop) {
|
|
|
Y = t.top - c.top - This.$workArea[0].parentNode.scrollTop;
|
|
|
}
|
|
|
else if (Y + This.$workArea[0].parentNode.scrollTop + This.$nodeData[id].height > t.top - c.top + This.$workArea.height()) {
|
|
|
Y = t.top - c.top + This.$workArea.height() - This.$workArea[0].parentNode.scrollTop - This.$nodeData[id].height;
|
|
|
}
|
|
|
This.$ghost.css({left: X - 230 + "px", top: Y - 133 + "px"});
|
|
|
isMove = true;
|
|
|
}
|
|
|
document.onmouseup = function (e) {
|
|
|
if (isMove) This.moveNode(id, X + This.$workArea[0].parentNode.scrollLeft - t.left + c.left, Y + This.$workArea[0].parentNode.scrollTop - t.top + c.top);
|
|
|
{
|
|
|
This.$ghost.empty().hide();
|
|
|
}
|
|
|
document.onmousemove = null;
|
|
|
document.onmouseup = null;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 鼠标移入结点 【结点--mouseenter 事件 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:22
|
|
|
* */
|
|
|
this.$workArea.delegate(".GooFlow_item", "mouseenter", {inthis: this}, function (e) {
|
|
|
var This = e.data.inthis;
|
|
|
var moving = This.$lineMoveing;
|
|
|
|
|
|
if (!moving) {
|
|
|
var w = $(this).width() + 60 + 'px';
|
|
|
var h = $(this).height() + 30 + 'px';
|
|
|
|
|
|
$(this).append("<div class='line-begin' style='width:" + w + ";height:" + h + "'><div class='line-begin-icon top'></div><div class='line-begin-icon left'></div><div class='line-begin-icon right'></div><div class='line-begin-icon bottom'></div></div>")
|
|
|
}
|
|
|
|
|
|
if (moving) {
|
|
|
$(this).addClass('item-mark');
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 鼠标移出结点 【结点--mouseleave 事件 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:22
|
|
|
* */
|
|
|
this.$workArea.delegate(".GooFlow_item", "mouseleave", {inthis: this}, function (e) {
|
|
|
$(this).children('.line-begin').remove();
|
|
|
$(this).removeClass('item-mark');
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 连线事件 【连线按钮--mousedown 事件 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:23
|
|
|
* */
|
|
|
this.$workArea.delegate(".GooFlow_item .line-begin > *", "mousedown", {inthis: this}, function (e) {
|
|
|
var cs = $(this).attr("class").split(/\s+/);
|
|
|
var This = e.data.inthis;
|
|
|
This.$lineMoveing = true;
|
|
|
This.$lineType = cs[1];
|
|
|
|
|
|
var obj = $(this).parent().parent();
|
|
|
This.$nowType = "cursor";
|
|
|
|
|
|
var type = obj.children('.GooFlow_item_cont').children('.GooFlow_item_txt').attr("id").split("type-")[1]
|
|
|
// 将划线开始点定为元素中心点
|
|
|
var X, Y;
|
|
|
var objPosition = obj.position();
|
|
|
var objLeft = objPosition.left;
|
|
|
var objTop = objPosition.top;
|
|
|
var w = (obj.width()) / 2;
|
|
|
var h = (obj.height()) / 2;
|
|
|
X = objLeft + w;
|
|
|
Y = objTop + h;
|
|
|
|
|
|
This.$workArea.data("lineStart", {
|
|
|
"x": X,
|
|
|
"y": Y,
|
|
|
"id": obj[0].id,
|
|
|
"typeFrom": type
|
|
|
}).css("cursor", "crosshair");
|
|
|
|
|
|
var line = GooFlow.prototype.drawLine("GooFlow_tmp_line", [X, Y], [X, Y], true, true);
|
|
|
This.$draw.appendChild(line);
|
|
|
|
|
|
$(document).mouseup(function () {
|
|
|
$('.GooFlow_item').removeClass('item-mark');
|
|
|
This.$lineMoveing = false;
|
|
|
})
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 连线结束事件 【连线按钮--mousedown 事件 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:24
|
|
|
* */
|
|
|
this.$workArea.delegate(".GooFlow_item", "mouseup", {inthis: this}, function (e) {
|
|
|
var type = $(this).children('.GooFlow_item_cont').children('.GooFlow_item_txt').attr("id").split("type-")[1]
|
|
|
var This = e.data.inthis;
|
|
|
var obj = $(this);
|
|
|
if (This.$nowType != "cursor") {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var lineT,lineM;
|
|
|
var lineType = This.$lineType;
|
|
|
|
|
|
switch (lineType){
|
|
|
case 'top':
|
|
|
case 'bottom':
|
|
|
lineT = 'tb';
|
|
|
break;
|
|
|
case 'left':
|
|
|
case 'right':
|
|
|
lineT = 'lr';
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
var lineStart = This.$workArea.data("lineStart");
|
|
|
console.log("lineStart"+lineStart);
|
|
|
var n1 = This.$nodeData[lineStart.id], n2 = This.$nodeData[obj[0].id];
|
|
|
|
|
|
//To结点中心点位置判断
|
|
|
var sLeft = n1.left;
|
|
|
var sRight = sLeft + n1.width;
|
|
|
var sTop = n1.top;
|
|
|
var sBottom = sTop + n1.height;
|
|
|
|
|
|
var EXcenter = n2.left+n2.width/2;
|
|
|
var EYcenter = n2.top+n2.height/2;
|
|
|
|
|
|
// 当To结点中心点在From结点内时，用直线
|
|
|
if ((EXcenter >= sLeft && EXcenter <= sRight)||(EYcenter >= sTop && EYcenter <= sBottom)) {
|
|
|
lineT = 'sl';
|
|
|
lineM = '';
|
|
|
}
|
|
|
|
|
|
var lineM = GooFlow.prototype.getMValue(n1,n2,lineT);
|
|
|
|
|
|
if (lineStart) {
|
|
|
This.addLine(This.$id + "_line_" + This.$lineCount, {
|
|
|
from: lineStart.id,
|
|
|
to: obj[0].id,
|
|
|
name: "",
|
|
|
x: lineStart.x,
|
|
|
y: lineStart.y,
|
|
|
typeFrom: lineStart.typeFrom,
|
|
|
typeTo: type,
|
|
|
type: lineT,
|
|
|
M: lineM
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
},
|
|
|
/*
|
|
|
* Todo: ### 工作区事件绑定结束 ************************************************
|
|
|
* */
|
|
|
useSVG: true,
|
|
|
/*
|
|
|
* Todo: 初始化画布 【SVG & 箭头 UI相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:51
|
|
|
* */
|
|
|
initDraw: function (id) {
|
|
|
this.$workAreaWrap = $("<div class='GooFlow_work'></div>");
|
|
|
this.$workArea = $("<div class='GooFlow_work_inner'></div>").attr({
|
|
|
"unselectable": "on",
|
|
|
"onselectstart": 'return false',
|
|
|
"onselect": 'document.selection.empty()'
|
|
|
});
|
|
|
this.$workAreaWrap.append(this.$workArea);
|
|
|
this.$contBox.append(this.$workAreaWrap);
|
|
|
|
|
|
this.$draw = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
|
this.$workArea.prepend(this.$draw);
|
|
|
// 设置画布属性
|
|
|
this.$draw.id = id;
|
|
|
this.$draw.style.width = '100%';
|
|
|
this.$draw.style.height = '100%';
|
|
|
|
|
|
// 定义可以重复利用的元素
|
|
|
var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
|
|
|
this.$draw.appendChild(defs);
|
|
|
defs.appendChild(getSvgMarker("arrow1", "#323232"));
|
|
|
defs.appendChild(getSvgMarker("arrow2", "#00b7ee"));
|
|
|
defs.appendChild(getSvgMarker("arrow3", "#f00"));
|
|
|
|
|
|
function getSvgMarker(id,color) {
|
|
|
var m = document.createElementNS("http://www.w3.org/2000/svg", "marker");
|
|
|
m.setAttribute("id", id);
|
|
|
m.setAttribute("viewBox", "0 0 6 6");
|
|
|
m.setAttribute("refX", 5);
|
|
|
m.setAttribute("refY", 3);
|
|
|
m.setAttribute("markerUnits", "strokeWidth");
|
|
|
m.setAttribute("markerWidth", 8);
|
|
|
m.setAttribute("markerHeight", 8);
|
|
|
m.setAttribute("orient", "auto");
|
|
|
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
path.setAttribute("d", "M 0 0 L 6 3 L 0 6 L 2 3 z");
|
|
|
path.setAttribute("fill", color);
|
|
|
path.setAttribute("stroke-width", 2);
|
|
|
m.appendChild(path);
|
|
|
return m;
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: ### 初始化事件绑定********************************--开始
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:09
|
|
|
* */
|
|
|
initEvents: function () {
|
|
|
// 防止回调函数里this偏移
|
|
|
var that = this;
|
|
|
var timeId = null;
|
|
|
|
|
|
/*
|
|
|
* Todo: 空白区域点击事件 【单击事件】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:05
|
|
|
* */
|
|
|
$(this.$draw).on("click", function (e) {
|
|
|
that.$canDelLine = false;
|
|
|
var n = $(e.target).prop("tagName");
|
|
|
if (n == "svg") {
|
|
|
that.blurItem();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点事件绑定 【@@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:22
|
|
|
* */
|
|
|
this.$workArea.on({
|
|
|
// 选中
|
|
|
click:function () {
|
|
|
clearTimeout(timeId);
|
|
|
var Dom = $(this);
|
|
|
var id = Dom.attr("id");
|
|
|
that.focusItem(id, true);
|
|
|
},
|
|
|
// 编辑
|
|
|
dblclick:function () {
|
|
|
var id = $(this).attr('id'),
|
|
|
oldTxt = that.$nodeData[id].param,
|
|
|
objPosition = $(this).position(),
|
|
|
objLeft = objPosition.left,
|
|
|
objTop = objPosition.top;
|
|
|
|
|
|
// 编辑的时候禁止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();
|
|
|
|
|
|
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) {
|
|
|
if (!e) e = window.event;
|
|
|
var Dom = $(this);
|
|
|
var id = Dom.attr("id");
|
|
|
clearTimeout(timeId);
|
|
|
timeId = setTimeout(function () {
|
|
|
var ev = GooFunc.mousePosition(e),
|
|
|
t = GooFunc.getElCoordinate(that.$workArea[0]),
|
|
|
c = GooFunc.getElCoordinate(that.$MainContener);
|
|
|
|
|
|
that.$ghost.css({
|
|
|
display: "block",
|
|
|
top: that.$nodeData[id].top + 133 - that.$workArea[0].parentNode.scrollTop + "px",
|
|
|
left: that.$nodeData[id].left + 200 - that.$workArea[0].parentNode.scrollLeft + "px",
|
|
|
cursor: "move"
|
|
|
});
|
|
|
|
|
|
var X, Y;
|
|
|
X = ev.x - t.left + that.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + that.$workArea[0].parentNode.scrollTop;
|
|
|
var vX = X - that.$nodeData[id].left, vY = Y - that.$nodeData[id].top;
|
|
|
var isMove = false;
|
|
|
|
|
|
document.onmousemove = function (e) {
|
|
|
if (!e) {e = window.event;}
|
|
|
var ev = GooFunc.mousePosition(e);
|
|
|
X = ev.x - vX - c.left;
|
|
|
Y = ev.y - vY - c.top;
|
|
|
if (X < t.left - c.left - that.$workArea[0].parentNode.scrollLeft) {
|
|
|
X = t.left - c.left - that.$workArea[0].parentNode.scrollLeft;
|
|
|
}
|
|
|
else if (X + that.$workArea[0].parentNode.scrollLeft + that.$nodeData[id].width > t.left - c.left + that.$workArea.width()) {
|
|
|
X = t.left - c.left + that.$workArea.width() - that.$workArea[0].parentNode.scrollLeft - that.$nodeData[id].width;
|
|
|
}
|
|
|
if (Y < t.top - c.top - that.$workArea[0].parentNode.scrollTop) {
|
|
|
Y = t.top - c.top - that.$workArea[0].parentNode.scrollTop;
|
|
|
}
|
|
|
else if (Y + that.$workArea[0].parentNode.scrollTop + that.$nodeData[id].height > t.top - c.top + that.$workArea.height()) {
|
|
|
Y = t.top - c.top + that.$workArea.height() - that.$workArea[0].parentNode.scrollTop - that.$nodeData[id].height;
|
|
|
}
|
|
|
that.$ghost.css({left: X - 230 + "px", top: Y - 133 + "px"});
|
|
|
isMove = true;
|
|
|
}
|
|
|
document.onmouseup = function () {
|
|
|
if (isMove) that.moveNode(id, X + that.$workArea[0].parentNode.scrollLeft - t.left + c.left, Y + that.$workArea[0].parentNode.scrollTop - t.top + c.top);
|
|
|
{
|
|
|
that.$ghost.empty().hide();
|
|
|
}
|
|
|
document.onmousemove = null;
|
|
|
document.onmouseup = null;
|
|
|
}
|
|
|
}, 150);
|
|
|
},
|
|
|
// 显示连线图标
|
|
|
mouseenter:function () {
|
|
|
var moving = that.$lineMoveing;
|
|
|
if (!moving) {
|
|
|
var w = $(this).width() + 60 + 'px';
|
|
|
var h = $(this).height() + 30 + 'px';
|
|
|
$(this).append("<div class='line-begin' style='width:" + w + ";height:" + h + "'><div class='line-begin-icon top'></div><div class='line-begin-icon left'></div><div class='line-begin-icon right'></div><div class='line-begin-icon bottom'></div></div>")
|
|
|
}
|
|
|
if (moving) {
|
|
|
$(this).addClass('item-mark');
|
|
|
}
|
|
|
},
|
|
|
mouseleave:function () {
|
|
|
$(this).children('.line-begin').remove();
|
|
|
$(this).removeClass('item-mark');
|
|
|
},
|
|
|
// 结束连线
|
|
|
mouseup:function () {
|
|
|
clearTimeout(timeId);
|
|
|
if (that.$lineMoveing) {
|
|
|
var type = $(this).children('.GooFlow_item_cont').children('.GooFlow_item_txt').attr("id").split("type-")[1]
|
|
|
var obj = $(this);
|
|
|
if (that.$nowType != "cursor") {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var lineT, lineM;
|
|
|
var lineType = that.$lineType;
|
|
|
|
|
|
switch (lineType) {
|
|
|
case 'top':
|
|
|
case 'bottom':
|
|
|
lineT = 'tb';
|
|
|
break;
|
|
|
case 'left':
|
|
|
case 'right':
|
|
|
lineT = 'lr';
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
var lineStart = that.$workArea.data("lineStart");
|
|
|
console.log("lineStart" + lineStart);
|
|
|
var n1 = that.$nodeData[lineStart.id], n2 = that.$nodeData[obj[0].id];
|
|
|
|
|
|
//To结点中心点位置判断
|
|
|
var sLeft = n1.left;
|
|
|
var sRight = sLeft + n1.width;
|
|
|
var sTop = n1.top;
|
|
|
var sBottom = sTop + n1.height;
|
|
|
|
|
|
var EXcenter = n2.left + n2.width / 2;
|
|
|
var EYcenter = n2.top + n2.height / 2;
|
|
|
|
|
|
// 当To结点中心点在From结点内时，用直线
|
|
|
if ((EXcenter >= sLeft && EXcenter <= sRight) || (EYcenter >= sTop && EYcenter <= sBottom)) {
|
|
|
lineT = 'sl';
|
|
|
lineM = '';
|
|
|
}
|
|
|
|
|
|
var lineM = GooFlow.prototype.getMValue(n1, n2, lineT);
|
|
|
|
|
|
if (lineStart) {
|
|
|
that.addLine(that.$id + "_line_" + that.$lineCount, {
|
|
|
from: lineStart.id,
|
|
|
to: obj[0].id,
|
|
|
name: "",
|
|
|
x: lineStart.x,
|
|
|
y: lineStart.y,
|
|
|
typeFrom: lineStart.typeFrom,
|
|
|
typeTo: type,
|
|
|
type: lineT,
|
|
|
M: lineM
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
},".GooFlow_item").on({
|
|
|
// 删除
|
|
|
mousedown:function () {
|
|
|
that.delNode(that.$focus);
|
|
|
return false;
|
|
|
}
|
|
|
},".rs_close")
|
|
|
|
|
|
/*
|
|
|
* Todo: 连线链接 【 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:23
|
|
|
* */
|
|
|
this.$workArea.on({
|
|
|
// 连线开始
|
|
|
mousedown:function () {
|
|
|
var cs = $(this).attr("class").split(/\s+/);
|
|
|
that.$lineMoveing = true;
|
|
|
that.$lineType = cs[1];
|
|
|
var obj = $(this).parent().parent();
|
|
|
that.$nowType = "cursor";
|
|
|
|
|
|
var type = obj.children('.GooFlow_item_cont').children('.GooFlow_item_txt').attr("id").split("type-")[1]
|
|
|
// 将划线开始点定为元素中心点
|
|
|
var X, Y;
|
|
|
var objPosition = obj.position();
|
|
|
var objLeft = objPosition.left;
|
|
|
var objTop = objPosition.top;
|
|
|
var w = (obj.width()) / 2;
|
|
|
var h = (obj.height()) / 2;
|
|
|
X = objLeft + w;
|
|
|
Y = objTop + h;
|
|
|
|
|
|
that.$workArea.data("lineStart", {
|
|
|
"x": X,
|
|
|
"y": Y,
|
|
|
"id": obj[0].id,
|
|
|
"typeFrom": type
|
|
|
}).css("cursor", "crosshair");
|
|
|
|
|
|
var line = GooFlow.prototype.drawLine("GooFlow_tmp_line", [X, Y], [X, Y], true, true);
|
|
|
that.$draw.appendChild(line);
|
|
|
|
|
|
$(document).mouseup(function () {
|
|
|
$('.GooFlow_item').removeClass('item-mark');
|
|
|
that.$lineMoveing = false;
|
|
|
})
|
|
|
return false;
|
|
|
}
|
|
|
},".GooFlow_item .line-begin > *").on({
|
|
|
// 连线中
|
|
|
mousemove:function (e) {
|
|
|
if (that.$nowType == "cursor") {
|
|
|
var lineStart = $(this).data("lineStart");
|
|
|
if (!lineStart)return;
|
|
|
var ev = GooFunc.mousePosition(e), t = GooFunc.getElCoordinate(this);
|
|
|
var X, Y;
|
|
|
X = ev.x - t.left + this.parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + this.parentNode.scrollTop;
|
|
|
|
|
|
var line = document.getElementById("GooFlow_tmp_line");
|
|
|
line.childNodes[0].setAttribute("d", "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y);
|
|
|
line.childNodes[1].setAttribute("d", "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y);
|
|
|
|
|
|
if (line.childNodes[1].getAttribute("marker-end") == "url(\"#arrow2\")") {
|
|
|
line.childNodes[1].setAttribute("marker-end", "url(#arrow3)");
|
|
|
}
|
|
|
else {
|
|
|
line.childNodes[1].setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 连线结束
|
|
|
mouseup:function () {
|
|
|
if (that.$nowType != "cursor") {
|
|
|
return;
|
|
|
}
|
|
|
$(this).css("cursor", "auto").removeData("lineStart");
|
|
|
var HtmlStr = document.getElementById("GooFlow_tmp_line");
|
|
|
if (HtmlStr) {
|
|
|
that.$draw.removeChild(HtmlStr);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
/*
|
|
|
* Todo: 线条文字编辑 【 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:23
|
|
|
* */
|
|
|
$(this.$draw).on({
|
|
|
click:function () {
|
|
|
that.focusItem(this.id, true);
|
|
|
},
|
|
|
dblclick:function () {
|
|
|
var oldTxt, x, y, from, to;
|
|
|
// 编辑的时候禁止delete键删除
|
|
|
that.$canDelLine = false;
|
|
|
that.$deteNodeId = '';
|
|
|
that.$deteLineId = '';
|
|
|
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
oldTxt = this.childNodes[2].textContent;
|
|
|
from = this.getAttribute("from").split(",");
|
|
|
to = this.getAttribute("to").split(",");
|
|
|
}
|
|
|
|
|
|
if (that.$lineData[this.id].type == "lr") {
|
|
|
from[0] = that.$lineData[this.id].M;
|
|
|
to[0] = from[0];
|
|
|
}
|
|
|
else if (that.$lineData[this.id].type == "tb") {
|
|
|
from[1] = that.$lineData[this.id].M;
|
|
|
to[1] = from[1];
|
|
|
}
|
|
|
|
|
|
x = (parseInt(from[0], 10) + parseInt(to[0], 10)) / 2 + 230;
|
|
|
y = (parseInt(from[1], 10) + parseInt(to[1], 10)) / 2 + 60;
|
|
|
|
|
|
that.$textArea.val(oldTxt).css({
|
|
|
display: "block",
|
|
|
left: x,
|
|
|
top: y
|
|
|
}).data("id", that.$focus).focus();
|
|
|
|
|
|
that.$workArea.parent().one("mousedown", function (e) {
|
|
|
that.setName(that.$textArea.data("id"), that.$textArea.val(), "line");
|
|
|
that.$textArea.val("").removeData("id").hide();
|
|
|
});
|
|
|
}
|
|
|
}, 'g');
|
|
|
|
|
|
/*
|
|
|
* Todo: 线条移动 【 $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:33
|
|
|
* */
|
|
|
this.$lineMove.on("mousedown", function (e) {
|
|
|
var lm = $(this);
|
|
|
lm.css({"background-color": "#333"});
|
|
|
var ev = GooFunc.mousePosition(e), t = GooFunc.getElCoordinate(that.$workArea[0]);
|
|
|
var X, Y;
|
|
|
X = ev.x - t.left + that.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + that.$workArea[0].parentNode.scrollTop;
|
|
|
var p = that.$lineMove.position();
|
|
|
var vX = X - p.left, vY = Y - p.top;
|
|
|
var isMove = false;
|
|
|
|
|
|
document.onmousemove = function (e) {
|
|
|
if (!e) e = window.event;
|
|
|
var ev = GooFunc.mousePosition(e);
|
|
|
var ps = that.$lineMove.position();
|
|
|
X = ev.x - t.left + that.$workArea[0].parentNode.scrollLeft;
|
|
|
Y = ev.y - t.top + that.$workArea[0].parentNode.scrollTop;
|
|
|
if (that.$lineMove.data("type") == "lr") {
|
|
|
X = X - vX;
|
|
|
if (X < 0) X = 0;
|
|
|
else if (X > that.$workArea.width())
|
|
|
X = that.$workArea.width();
|
|
|
that.$lineMove.css({left: X + "px"});
|
|
|
}
|
|
|
else if (that.$lineMove.data("type") == "tb") {
|
|
|
Y = Y - vY;
|
|
|
if (Y < 0) Y = 0;
|
|
|
else if (Y > that.$workArea.height())
|
|
|
Y = that.$workArea.height();
|
|
|
that.$lineMove.css({top: Y + "px"});
|
|
|
}
|
|
|
isMove = true;
|
|
|
}
|
|
|
|
|
|
document.onmouseup = function (e) {
|
|
|
if (isMove) {
|
|
|
var p = that.$lineMove.position();
|
|
|
if (that.$lineMove.data("type") == "lr")
|
|
|
that.setLineM(that.$lineMove.data("tid"), p.left + 3);
|
|
|
else if (that.$lineMove.data("type") == "tb")
|
|
|
that.setLineM(that.$lineMove.data("tid"), p.top + 3);
|
|
|
}
|
|
|
that.$lineMove.css({"background-color": "transparent"});
|
|
|
if (that.$focus == that.$lineMove.data("tid")) {
|
|
|
that.focusItem(that.$lineMove.data("tid"));
|
|
|
}
|
|
|
document.onmousemove = null;
|
|
|
document.onmouseup = null;
|
|
|
}
|
|
|
});
|
|
|
this.$lineOper.on("click", function (e) {
|
|
|
if (e.target.tagName != "B") return;
|
|
|
var id = $(this).data("tid");
|
|
|
switch ($(e.target).attr("class")) {
|
|
|
case "b_x":
|
|
|
that.delLine(id);
|
|
|
this.style.display = "none";
|
|
|
break;
|
|
|
case "b_l1":
|
|
|
that.setLineType(id, "lr");
|
|
|
break;
|
|
|
case "b_l2":
|
|
|
that.setLineType(id, "tb");
|
|
|
break;
|
|
|
case "b_l3":
|
|
|
that.setLineType(id, "sl");
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: ### 初始化事件绑定******************************--结束
|
|
|
* */
|
|
|
|
|
|
/*
|
|
|
* Todo: 取消选定状态 【取消聚焦公共方法】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:53
|
|
|
* */
|
|
|
blurItem: function () {
|
|
|
this.$deteLineId = '';
|
|
|
this.$deteNodeId = '';
|
|
|
if (this.$focus != "") {
|
|
|
// 获取被选中对象
|
|
|
var jq = $("#" + this.$focus);
|
|
|
if (jq.prop("tagName") == "DIV") {
|
|
|
if (this.onItemBlur != null && !this.onItemBlur(id, "node")) return false;
|
|
|
jq.removeClass("item_focus").children(".rs-box").css("display", "none");
|
|
|
}
|
|
|
else {
|
|
|
if (this.onItemBlur != null && !this.onItemBlur(id, "line")) return false;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
if (!this.$lineData[this.$focus].marked) {
|
|
|
jq[0].childNodes[1].setAttribute("stroke", "#323232");
|
|
|
jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
if (!this.$lineData[this.$focus].marked) jq[0].strokeColor = "#323232";
|
|
|
}
|
|
|
this.$lineMove.hide().removeData("type").removeData("tid");
|
|
|
if (this.$editable) this.$lineOper.hide().removeData("tid");
|
|
|
}
|
|
|
}
|
|
|
this.$focus = "";
|
|
|
return true;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 选定状态 【聚焦公共方法】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:53
|
|
|
* */
|
|
|
focusItem: function (id, bool) {
|
|
|
|
|
|
var jq = $("#" + id);
|
|
|
var that = this;
|
|
|
this.$ghost.attr({'class': 'rs_ghost ' + jq.attr('class')});
|
|
|
if (jq.length == 0) return;
|
|
|
if (!this.blurItem()) return;//先执行"取消选中",如果返回FLASE,则也会阻止选定事件继续进行.
|
|
|
if (jq.prop("tagName") == "DIV") {
|
|
|
if (bool && this.onItemFocus != null && !this.onItemFocus(id, "node")) return;
|
|
|
jq.addClass("item_focus");
|
|
|
if (this.$editable) jq.children(".rs-box").css("display", "block");
|
|
|
this.$workArea.append(jq);
|
|
|
that.$canDelLine = false;
|
|
|
that.$deteLineId = '';
|
|
|
that.$deteNodeId = id;
|
|
|
$(document).keydown(function (e) {
|
|
|
if (e.keyCode != 8 && that.$deteNodeId) {
|
|
|
return
|
|
|
}
|
|
|
that.delNode(that.$deteNodeId);
|
|
|
});
|
|
|
}
|
|
|
else {//如果是连接线
|
|
|
if (this.onItemFocus != null && !this.onItemFocus(id, "line")) return;
|
|
|
that.$canDelLine = true;
|
|
|
that.$deteNodeId = '';
|
|
|
that.$deteLineId = id;
|
|
|
$(document).keydown(function (e) {
|
|
|
if (e.keyCode == 8 && that.$deteLineId) {
|
|
|
that.delLine(that.$deteLineId);
|
|
|
$('.GooFlow_line_oper').hide();
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
jq[0].childNodes[1].setAttribute("stroke", "#00b7ee");
|
|
|
jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
else jq[0].strokeColor = "#00b7ee";
|
|
|
if (!this.$editable) return;
|
|
|
var x, y, from, to;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
from = jq.attr("from").split(",");
|
|
|
to = jq.attr("to").split(",");
|
|
|
} else {
|
|
|
var n = jq[0].getAttribute("fromTo").split(",");
|
|
|
from = [n[0], n[1]];
|
|
|
to = [n[2], n[3]];
|
|
|
}
|
|
|
from[0] = parseInt(from[0], 10);
|
|
|
from[1] = parseInt(from[1], 10);
|
|
|
to[0] = parseInt(to[0], 10);
|
|
|
to[1] = parseInt(to[1], 10);
|
|
|
|
|
|
if (this.$lineData[id].type == "lr") {
|
|
|
from[0] = this.$lineData[id].M;
|
|
|
to[0] = from[0];
|
|
|
|
|
|
this.$lineMove.css({
|
|
|
width: "5px", height: (to[1] - from[1]) * (to[1] > from[1] ? 1 : -1) + "px",
|
|
|
left: from[0] - 3 + "px",
|
|
|
top: (to[1] > from[1] ? from[1] : to[1]) + 1 + "px",
|
|
|
cursor: "e-resize", display: "block"
|
|
|
}).data({"type": "lr", "tid": id});
|
|
|
}
|
|
|
else if (this.$lineData[id].type == "tb") {
|
|
|
from[1] = this.$lineData[id].M;
|
|
|
to[1] = from[1];
|
|
|
this.$lineMove.css({
|
|
|
width: (to[0] - from[0]) * (to[0] > from[0] ? 1 : -1) + "px", height: "5px",
|
|
|
left: (to[0] > from[0] ? from[0] : to[0]) + 1 + "px",
|
|
|
top: from[1] - 3 + "px",
|
|
|
cursor: "s-resize", display: "block"
|
|
|
}).data({"type": "tb", "tid": id});
|
|
|
}
|
|
|
x = (from[0] + to[0]) / 2 - 35;
|
|
|
y = (from[1] + to[1]) / 2 + 6;
|
|
|
this.$lineOper.css({display: "block", left: x + "px", top: y + "px"}).data("tid", id);
|
|
|
}
|
|
|
this.$focus = id;
|
|
|
this.$nowType = "cursor";
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 增加结点 【结点公共方法 @@】
|
|
|
@ -1075,1152 +1094,895 @@ GooFlow.prototype = {
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:53
|
|
|
* */
|
|
|
addNode: function (id, json,isDataLoad) {
|
|
|
if (this.onItemAdd != null && !this.onItemAdd(id, "node", json))return;
|
|
|
if (this.$undoStack) {
|
|
|
this.pushOper("delNode", [id]);
|
|
|
}
|
|
|
|
|
|
if (json.type != "start" && json.type != "end") {
|
|
|
if (json.top < 0) json.top = 0;
|
|
|
if (json.left < 0) json.left = 0;
|
|
|
var hack = 0;
|
|
|
if (navigator.userAgent.indexOf("8.0") != -1) hack = 2;
|
|
|
|
|
|
switch (json.type) {
|
|
|
case "state":
|
|
|
json.name = '判断';
|
|
|
json.nodeType = 'judgement'
|
|
|
break;
|
|
|
case "complex":
|
|
|
json.name = '循环';
|
|
|
json.nodeType = 'circle'
|
|
|
break;
|
|
|
case "join":
|
|
|
json.name = '聚合';
|
|
|
json.nodeType = 'aggregate'
|
|
|
break;
|
|
|
case "fork":
|
|
|
json.name = '分流';
|
|
|
json.nodeType = 'multicast'
|
|
|
break;
|
|
|
case "task":
|
|
|
json.name = this.$newNodeTxt || json.name;
|
|
|
json.value = this.$newNodeValue || json.value;
|
|
|
json.nodeType = 'service'
|
|
|
break;
|
|
|
case "plug":
|
|
|
json.name = this.$newNodeTxt || json.name;
|
|
|
json.value = this.$newNodeValue || json.value;
|
|
|
json.nodeType = 'processor'
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
this.$nodeDom[id] = $(" <div class='GooFlow_item node-" + json.type + "' id='" + id + "' style='top:" + json.top + "px;left:" + json.left + "px'> <div class='GooFlow_item_cont'> <i class='fa ico_" + json.type + "'></i> <span class='GooFlow_item_txt' id='type-" + json.type + "'>" + json.name + "</span></div> <div class='rs-box' style='display:none'> <div class='rs_close'><i class='fa fa-close' aria-hidden='true'></i></div> </div> </div>");
|
|
|
|
|
|
}
|
|
|
var ua = navigator.userAgent.toLowerCase();
|
|
|
if (ua.indexOf('msie') != -1 && ua.indexOf('8.0') != -1) {
|
|
|
this.$nodeDom[id].css("filter", "progid:DXImageTransform.Microsoft.Shadow(color=#94AAC2,direction=135,strength=2)");
|
|
|
}
|
|
|
this.$workArea.append(this.$nodeDom[id]);
|
|
|
json.width = this.$nodeDom[id].width();
|
|
|
json.height = this.$nodeDom[id].height();
|
|
|
this.$nodeData[id] = json;
|
|
|
++this.$nodeCount;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 取消选定状态 【取消聚焦公共方法】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:53
|
|
|
* */
|
|
|
blurItem: function () {
|
|
|
this.$deteLineId = '';
|
|
|
this.$deteNodeId = '';
|
|
|
if (this.$focus != "") {
|
|
|
// 获取被选中对象
|
|
|
var jq = $("#" + this.$focus);
|
|
|
if (jq.prop("tagName") == "DIV") {
|
|
|
if (this.onItemBlur != null && !this.onItemBlur(id, "node")) return false;
|
|
|
jq.removeClass("item_focus").children(".rs-box").css("display", "none");
|
|
|
}
|
|
|
else {
|
|
|
if (this.onItemBlur != null && !this.onItemBlur(id, "line")) return false;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
if (!this.$lineData[this.$focus].marked) {
|
|
|
jq[0].childNodes[1].setAttribute("stroke", "#323232");
|
|
|
jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
if (!this.$lineData[this.$focus].marked) jq[0].strokeColor = "#323232";
|
|
|
}
|
|
|
this.$lineMove.hide().removeData("type").removeData("tid");
|
|
|
if (this.$editable) this.$lineOper.hide().removeData("tid");
|
|
|
}
|
|
|
}
|
|
|
this.$focus = "";
|
|
|
return true;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点或线条选中事件 【聚焦公共方法】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:53
|
|
|
* */
|
|
|
focusItem: function (id, bool) {
|
|
|
|
|
|
var jq = $("#" + id);
|
|
|
var that = this;
|
|
|
this.$ghost.attr({'class': 'rs_ghost ' + jq.attr('class')});
|
|
|
if (jq.length == 0) return;
|
|
|
if (!this.blurItem()) return;//先执行"取消选中",如果返回FLASE,则也会阻止选定事件继续进行.
|
|
|
if (jq.prop("tagName") == "DIV") {
|
|
|
if (bool && this.onItemFocus != null && !this.onItemFocus(id, "node")) return;
|
|
|
jq.addClass("item_focus");
|
|
|
if (this.$editable) jq.children(".rs-box").css("display", "block");
|
|
|
this.$workArea.append(jq);
|
|
|
that.$canDelLine = false;
|
|
|
that.$deteLineId = '';
|
|
|
that.$deteNodeId = id;
|
|
|
$(document).keydown(function (e) {
|
|
|
if (e.keyCode != 8 && that.$deteNodeId) {return}
|
|
|
that.delNode(that.$deteNodeId);
|
|
|
});
|
|
|
}
|
|
|
else {//如果是连接线
|
|
|
if (this.onItemFocus != null && !this.onItemFocus(id, "line")) return;
|
|
|
that.$canDelLine = true;
|
|
|
that.$deteNodeId = '';
|
|
|
that.$deteLineId = id;
|
|
|
|
|
|
$(document).keydown(function (e) {
|
|
|
if (e.keyCode == 8 && that.$deteLineId){
|
|
|
that.delLine(that.$deteLineId);
|
|
|
$('.GooFlow_line_oper').hide();
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
jq[0].childNodes[1].setAttribute("stroke", "#00b7ee");
|
|
|
jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
else jq[0].strokeColor = "#00b7ee";
|
|
|
if (!this.$editable) return;
|
|
|
var x, y, from, to;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
from = jq.attr("from").split(",");
|
|
|
to = jq.attr("to").split(",");
|
|
|
} else {
|
|
|
var n = jq[0].getAttribute("fromTo").split(",");
|
|
|
from = [n[0], n[1]];
|
|
|
to = [n[2], n[3]];
|
|
|
}
|
|
|
from[0] = parseInt(from[0], 10);
|
|
|
from[1] = parseInt(from[1], 10);
|
|
|
to[0] = parseInt(to[0], 10);
|
|
|
to[1] = parseInt(to[1], 10);
|
|
|
|
|
|
if (this.$lineData[id].type == "lr") {
|
|
|
from[0] = this.$lineData[id].M;
|
|
|
to[0] = from[0];
|
|
|
|
|
|
this.$lineMove.css({
|
|
|
width: "5px", height: (to[1] - from[1]) * (to[1] > from[1] ? 1 : -1) + "px",
|
|
|
left: from[0] - 3 + "px",
|
|
|
top: (to[1] > from[1] ? from[1] : to[1]) + 1 + "px",
|
|
|
cursor: "e-resize", display: "block"
|
|
|
}).data({"type": "lr", "tid": id});
|
|
|
}
|
|
|
else if (this.$lineData[id].type == "tb") {
|
|
|
from[1] = this.$lineData[id].M;
|
|
|
to[1] = from[1];
|
|
|
this.$lineMove.css({
|
|
|
width: (to[0] - from[0]) * (to[0] > from[0] ? 1 : -1) + "px", height: "5px",
|
|
|
left: (to[0] > from[0] ? from[0] : to[0]) + 1 + "px",
|
|
|
top: from[1] - 3 + "px",
|
|
|
cursor: "s-resize", display: "block"
|
|
|
}).data({"type": "tb", "tid": id});
|
|
|
}
|
|
|
x = (from[0] + to[0]) / 2 - 35;
|
|
|
y = (from[1] + to[1]) / 2 + 6;
|
|
|
this.$lineOper.css({display: "block", left: x + "px", top: y + "px"}).data("tid", id);
|
|
|
}
|
|
|
this.$focus = id;
|
|
|
this.$nowType = "cursor";
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点移动 【结点移动方法 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:54
|
|
|
* */
|
|
|
moveNode: function (id, left, top) {
|
|
|
if (!this.$nodeData[id]) return;
|
|
|
if (this.onItemMove != null && !this.onItemMove(id, "node", left, top)) return;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$nodeData[id].left, this.$nodeData[id].top];
|
|
|
this.pushOper("moveNode", paras);
|
|
|
}
|
|
|
if (left < 0) left = 0;
|
|
|
if (top < 0) top = 0;
|
|
|
$("#" + id).css({left: left + "px", top: top + "px"});
|
|
|
this.$nodeData[id].left = left;
|
|
|
this.$nodeData[id].top = top;
|
|
|
//重画转换线
|
|
|
this.resetLines(id, this.$nodeData[id]);
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 设置结点线等内容 【内容设置公共方法 @@ $$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:54
|
|
|
* */
|
|
|
setName: function (id, name, type) {
|
|
|
var oldName;
|
|
|
if (type == "node") {//如果是结点
|
|
|
if (!this.$nodeData[id]) return;
|
|
|
if (this.$nodeData[id].name == name) return;
|
|
|
if (this.onItemRename != null && !this.onItemRename(id, name, "node")) return;
|
|
|
oldName = this.$nodeData[id].name;
|
|
|
this.$nodeData[id].name = name;
|
|
|
if (this.$nodeData[id].type == "start" || this.$nodeData[id].type == "end") {
|
|
|
this.$nodeDom[id].children(".span").text(name);
|
|
|
}
|
|
|
else {
|
|
|
this.$nodeDom[id].find("td:eq(1)").text(name);
|
|
|
var hack = 0;
|
|
|
if (navigator.userAgent.indexOf("8.0") != -1) hack = 2;
|
|
|
var width = this.$nodeDom[id].outerWidth();
|
|
|
var height = this.$nodeDom[id].outerHeight();
|
|
|
this.$nodeDom[id].children("table").css({width: width - 2 + "px", height: height - 2 + "px"});
|
|
|
this.$nodeData[id].width = width;
|
|
|
this.$nodeData[id].height = height;
|
|
|
}
|
|
|
//重画转换线
|
|
|
this.resetLines(id, this.$nodeData[id]);
|
|
|
}
|
|
|
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";
|
|
|
}
|
|
|
}
|
|
|
else if (type == "area") {//如果是分组区域
|
|
|
if (!this.$areaData[id]) return;
|
|
|
if (this.$areaData[id].name == name) return;
|
|
|
if (this.onItemRename != null && !this.onItemRename(id, name, "area")) return;
|
|
|
oldName = this.$areaData[id].name;
|
|
|
this.$areaData[id].name = name;
|
|
|
this.$areaDom[id].children("label").text(name);
|
|
|
}
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, oldName, type];
|
|
|
this.pushOper("setName", paras);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 删除结点 【结点公共方法 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:55
|
|
|
* */
|
|
|
delNode: function (id) {
|
|
|
if (!this.$nodeData[id]) return;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$nodeData[id]];
|
|
|
this.pushOper("addNode", paras);
|
|
|
}
|
|
|
if (this.onItemDel != null && !this.onItemDel(id, "node")) return;
|
|
|
delete this.$nodeData[id];
|
|
|
this.$nodeDom[id].remove();
|
|
|
delete this.$nodeDom[id];
|
|
|
if (this.$focus == id) this.$focus = "";
|
|
|
for (var k in this.$lineData) {
|
|
|
if (this.$lineData[k].from == id || this.$lineData[k].to == id) {
|
|
|
this.$draw.removeChild(this.$lineDom[k]);
|
|
|
delete this.$lineData[k];
|
|
|
delete this.$lineDom[k];
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 直线绘制 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 14:57
|
|
|
* */
|
|
|
drawLine: function (id, sp, ep, mark, dash) {
|
|
|
var line;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
line = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
|
var hi = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
|
|
|
if (id != "") line.setAttribute("id", id);
|
|
|
line.setAttribute("from", sp[0] + "," + sp[1]);
|
|
|
line.setAttribute("to", ep[0] + "," + ep[1]);
|
|
|
hi.setAttribute("visibility", "hidden");
|
|
|
hi.setAttribute("stroke-width", 15);
|
|
|
hi.setAttribute("fill", "none");
|
|
|
hi.setAttribute("stroke", "white");
|
|
|
hi.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]);
|
|
|
hi.setAttribute("pointer-events", "stroke");
|
|
|
path.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]);
|
|
|
path.setAttribute("stroke-width", 1.2);
|
|
|
path.setAttribute("stroke-linecap", "round");
|
|
|
path.setAttribute("fill", "none");
|
|
|
if (dash) path.setAttribute("style", "stroke-dasharray:6,5");
|
|
|
if (mark) {
|
|
|
path.setAttribute("stroke", "#00b7ee");
|
|
|
path.setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
else {
|
|
|
path.setAttribute("stroke", "#323232");
|
|
|
path.setAttribute("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
line.appendChild(hi);
|
|
|
line.appendChild(path);
|
|
|
line.style.cursor = "crosshair";
|
|
|
if (id != "" && id != "GooFlow_tmp_line") {
|
|
|
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
|
//text.textContent=id;
|
|
|
line.appendChild(text);
|
|
|
var x = (ep[0] + sp[0]) / 2;
|
|
|
var y = (ep[1] + sp[1]) / 2;
|
|
|
text.setAttribute("text-anchor", "middle");
|
|
|
text.setAttribute("x", x);
|
|
|
text.setAttribute("y", y);
|
|
|
line.style.cursor = "pointer";
|
|
|
text.style.cursor = "text";
|
|
|
}
|
|
|
} else {
|
|
|
line = document.createElement("v:polyline");
|
|
|
if (id != "") line.id = id;
|
|
|
//line.style.position="absolute";
|
|
|
line.points.value = sp[0] + "," + sp[1] + " " + ep[0] + "," + ep[1];
|
|
|
line.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]);
|
|
|
line.strokeWeight = "1.2";
|
|
|
line.stroke.EndArrow = "Block";
|
|
|
line.style.cursor = "crosshair";
|
|
|
if (id != "" && id != "GooFlow_tmp_line") {
|
|
|
var text = document.createElement("div");
|
|
|
//text.innerHTML=id;
|
|
|
line.appendChild(text);
|
|
|
var x = (ep[0] - sp[0]) / 2;
|
|
|
var y = (ep[1] - sp[1]) / 2;
|
|
|
if (x < 0) x = x * -1;
|
|
|
if (y < 0) y = y * -1;
|
|
|
text.style.left = x + "px";
|
|
|
text.style.top = y - 6 + "px";
|
|
|
line.style.cursor = "pointer";
|
|
|
}
|
|
|
if (dash) line.stroke.dashstyle = "Dash";
|
|
|
if (mark) line.strokeColor = "#00b7ee";
|
|
|
else line.strokeColor = "#323232";
|
|
|
}
|
|
|
return line;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 折线绘制 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:26
|
|
|
* */
|
|
|
drawPoly: function (id, sp, m1, m2, ep, mark) {
|
|
|
var poly, strPath;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
poly = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
|
var hi = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
if (id != "") poly.setAttribute("id", id);
|
|
|
poly.setAttribute("from", sp[0] + "," + sp[1]);
|
|
|
poly.setAttribute("to", ep[0] + "," + ep[1]);
|
|
|
hi.setAttribute("visibility", "hidden");
|
|
|
hi.setAttribute("stroke-width", 15);
|
|
|
hi.setAttribute("fill", "none");
|
|
|
hi.setAttribute("stroke", "white");
|
|
|
strPath = "M " + sp[0] + " " + sp[1];
|
|
|
if (m1[0] != sp[0] || m1[1] != sp[1])
|
|
|
strPath += " L " + m1[0] + " " + m1[1];
|
|
|
if (m2[0] != ep[0] || m2[1] != ep[1])
|
|
|
strPath += " L " + m2[0] + " " + m2[1];
|
|
|
strPath += " L " + ep[0] + " " + ep[1];
|
|
|
hi.setAttribute("d", strPath);
|
|
|
hi.setAttribute("pointer-events", "stroke");
|
|
|
path.setAttribute("d", strPath);
|
|
|
path.setAttribute("stroke-width", 1.2);
|
|
|
path.setAttribute("stroke-linecap", "round");
|
|
|
path.setAttribute("fill", "none");
|
|
|
if (mark) {
|
|
|
path.setAttribute("stroke", "#00b7ee");
|
|
|
path.setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
else {
|
|
|
path.setAttribute("stroke", "#323232");
|
|
|
path.setAttribute("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
poly.appendChild(hi);
|
|
|
poly.appendChild(path);
|
|
|
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
|
//text.textContent=id;
|
|
|
poly.appendChild(text);
|
|
|
var x = (m2[0] + m1[0]) / 2;
|
|
|
var y = (m2[1] + m1[1]) / 2;
|
|
|
text.setAttribute("text-anchor", "middle");
|
|
|
text.setAttribute("x", x);
|
|
|
text.setAttribute("y", y);
|
|
|
text.style.cursor = "text";
|
|
|
poly.style.cursor = "pointer";
|
|
|
}
|
|
|
else {
|
|
|
poly = document.createElement("v:Polyline");
|
|
|
if (id != "") poly.id = id;
|
|
|
poly.filled = "false";
|
|
|
strPath = sp[0] + "," + sp[1];
|
|
|
if (m1[0] != sp[0] || m1[1] != sp[1])
|
|
|
strPath += " " + m1[0] + "," + m1[1];
|
|
|
if (m2[0] != ep[0] || m2[1] != ep[1])
|
|
|
strPath += " " + m2[0] + "," + m2[1];
|
|
|
strPath += " " + ep[0] + "," + ep[1];
|
|
|
poly.points.value = strPath;
|
|
|
poly.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]);
|
|
|
poly.strokeWeight = "1.2";
|
|
|
poly.stroke.EndArrow = "Block";
|
|
|
var text = document.createElement("div");
|
|
|
//text.innerHTML=id;
|
|
|
poly.appendChild(text);
|
|
|
var x = (m2[0] - m1[0]) / 2;
|
|
|
var y = (m2[1] - m1[1]) / 2;
|
|
|
if (x < 0) x = x * -1;
|
|
|
if (y < 0) y = y * -1;
|
|
|
text.style.left = x + "px";
|
|
|
text.style.top = y - 4 + "px";
|
|
|
poly.style.cursor = "pointer";
|
|
|
if (mark) poly.strokeColor = "#00b7ee";
|
|
|
else poly.strokeColor = "#323232"
|
|
|
}
|
|
|
return poly;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 直线坐标计算 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:26
|
|
|
* */
|
|
|
calcStartEnd: function (n1, n2) {
|
|
|
if (!n1 || !n2) {
|
|
|
return {"start": [], "end": []};
|
|
|
}
|
|
|
var X_1, Y_1, X_2, Y_2;
|
|
|
|
|
|
//X判断：
|
|
|
var x11 = n1.left, x12 = n1.left + n1.width / 2, x13 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width / 2, x23 = n2.left + n2.width;
|
|
|
//Y判断：
|
|
|
var y11 = n1.top, y12 = n1.top + n1.height / 2, y13 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height / 2, y23 = n2.top + n2.height;
|
|
|
X_1 = x12;
|
|
|
X_2 = x22;
|
|
|
|
|
|
// 结点2在结点1左边
|
|
|
if (x11 >= x23) {
|
|
|
X_1 = x11;
|
|
|
Y_1 = y12;
|
|
|
X_2 = x23;
|
|
|
Y_2 = y22;
|
|
|
}
|
|
|
|
|
|
//结点2在结点1右边
|
|
|
else if (x21 >= x13) {
|
|
|
X_1 = x13;
|
|
|
Y_1 = y12;
|
|
|
X_2 = x21;
|
|
|
Y_2 = y22;
|
|
|
}
|
|
|
|
|
|
else {
|
|
|
// 结点2在结点1上边
|
|
|
if (y11 >= y22) {
|
|
|
Y_1 = y11;
|
|
|
Y_2 = y23;
|
|
|
}
|
|
|
|
|
|
//结点2在结点1下边
|
|
|
else if (y12 <= y21) {
|
|
|
Y_1 = y13;
|
|
|
Y_2 = y21;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
return {"start": [X_1, Y_1], "end": [X_2, Y_2]};
|
|
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 折线坐标计算 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:27
|
|
|
* */
|
|
|
calcPolyPoints: function (n1, n2, type, M) {
|
|
|
|
|
|
//开始/结束两个结点的中心
|
|
|
var SP = {x: n1.left + n1.width / 2, y: n1.top + n1.height / 2};
|
|
|
var EP = {x: n2.left + n2.width / 2, y: n2.top + n2.height / 2};
|
|
|
var sp = [], m1 = [], m2 = [], ep = [];
|
|
|
|
|
|
//如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标
|
|
|
//粗略计算起始点
|
|
|
sp = [SP.x, SP.y];
|
|
|
ep = [EP.x, EP.y];
|
|
|
if (type == "lr") {
|
|
|
//粗略计算2个中点
|
|
|
m1 = [M, SP.y];
|
|
|
m2 = [M, EP.y];
|
|
|
//再具体分析修改开始点和中点1
|
|
|
if (m1[0] > n1.left && m1[0] < n1.left + n1.width) {
|
|
|
m1[1] = (SP.y > EP.y ? n1.top : n1.top + n1.height);
|
|
|
sp[0] = m1[0];
|
|
|
sp[1] = m1[1];
|
|
|
}
|
|
|
else {
|
|
|
sp[0] = (m1[0] < n1.left ? n1.left : n1.left + n1.width)
|
|
|
}
|
|
|
//再具体分析中点2和结束点
|
|
|
if (m2[0] > n2.left && m2[0] < n2.left + n2.width) {
|
|
|
m2[1] = (SP.y > EP.y ? n2.top + n2.height : n2.top);
|
|
|
ep[0] = m2[0];
|
|
|
ep[1] = m2[1];
|
|
|
}
|
|
|
else {
|
|
|
ep[0] = (m2[0] < n2.left ? n2.left : n2.left + n2.width)
|
|
|
}
|
|
|
}
|
|
|
//如果是允许中段可上下移动的折线,则参数M为可移动中段线的Y坐标
|
|
|
else if (type == "tb") {
|
|
|
//粗略计算2个中点
|
|
|
m1 = [SP.x, M];
|
|
|
m2 = [EP.x, M];
|
|
|
//再具体分析修改开始点和中点1
|
|
|
if (m1[1] > n1.top && m1[1] < n1.top + n1.height) {
|
|
|
m1[0] = (SP.x > EP.x ? n1.left : n1.left + n1.width);
|
|
|
sp[0] = m1[0];
|
|
|
sp[1] = m1[1];
|
|
|
}
|
|
|
else {
|
|
|
sp[1] = (m1[1] < n1.top ? n1.top : n1.top + n1.height)
|
|
|
}
|
|
|
//再具体分析中点2和结束点
|
|
|
if (m2[1] > n2.top && m2[1] < n2.top + n2.height) {
|
|
|
m2[0] = (SP.x > EP.x ? n2.left + n2.width : n2.left);
|
|
|
ep[0] = m2[0];
|
|
|
ep[1] = m2[1];
|
|
|
}
|
|
|
else {
|
|
|
ep[1] = (m2[1] < n2.top ? n2.top : n2.top + n2.height);
|
|
|
}
|
|
|
}
|
|
|
return {start: sp, m1: m1, m2: m2, end: ep};
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 折线固定中线计算 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:27
|
|
|
* */
|
|
|
getMValue: function (n1, n2, mType) {
|
|
|
if (mType == "lr") {
|
|
|
return (n1.left + n1.width / 2 + n2.left + n2.width / 2) / 2;
|
|
|
}
|
|
|
else if (mType == "tb") {
|
|
|
return (n1.top + n1.height / 2 + n2.top + n2.height / 2) / 2;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 增加线条 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 16:46
|
|
|
* */
|
|
|
addLine: function (id, json,isDataLoad) {
|
|
|
|
|
|
if (!isDataLoad) {
|
|
|
if (this.onItemAdd != null && !this.onItemAdd(id, "line", json)) {
|
|
|
return;
|
|
|
}
|
|
|
if (this.$undoStack) {
|
|
|
this.pushOper("delLine", [id]);
|
|
|
}
|
|
|
|
|
|
if (json.from == json.to) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var typeF = json.typeFrom || json.type;
|
|
|
var typeT = json.typeTo || json.type;
|
|
|
|
|
|
for (var k in this.$lineData) {
|
|
|
// 单出
|
|
|
var onlyOut = (json.from == this.$lineData[k].from);
|
|
|
// 单进
|
|
|
var onlyIn = (json.to == this.$lineData[k].to);
|
|
|
// 来源等于去向
|
|
|
var formEto = (json.from == this.$lineData[k].to);
|
|
|
// 去向等于来源
|
|
|
var tofrom = (json.to == this.$lineData[k].from);
|
|
|
|
|
|
// 不能反向
|
|
|
if (tofrom && formEto) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 设置除了聚合其余都默认单进
|
|
|
if (typeT != 'join') {
|
|
|
if (onlyIn) {
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
switch (typeF) {
|
|
|
case 'task':
|
|
|
case 'plug':
|
|
|
if (onlyOut) {
|
|
|
return;
|
|
|
}
|
|
|
break;
|
|
|
case 'state':
|
|
|
case 'complex':
|
|
|
if (json.from == this.$lineData[k].from) {
|
|
|
var i = 0;
|
|
|
for (var j in this.$lineData) {
|
|
|
if (json.from == this.$lineData[j].from) {
|
|
|
i++
|
|
|
}
|
|
|
}
|
|
|
if (i >= 2) {
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//获取开始/结束结点的数据
|
|
|
var n1 = this.$nodeData[json.from], n2 = this.$nodeData[json.to];
|
|
|
if (!n1 || !n2) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 划线函数以及线条类型处理
|
|
|
var res;
|
|
|
if (json.type && json.type != "sl") {
|
|
|
res = GooFlow.prototype.calcPolyPoints(n1, n2, json.type,json.M);
|
|
|
}
|
|
|
else {
|
|
|
res = GooFlow.prototype.calcStartEnd(n1, n2);// 刚开始连线时,默认为直线
|
|
|
}
|
|
|
|
|
|
if (!res) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 存储线条
|
|
|
this.$lineData[id] = {};
|
|
|
if (json.type) {
|
|
|
this.$lineData[id].type = json.type;
|
|
|
this.$lineData[id].M = json.M;
|
|
|
}
|
|
|
else {
|
|
|
this.$lineData[id].type = "sl";//默认为直线
|
|
|
}
|
|
|
|
|
|
this.$lineData[id].from = json.from;
|
|
|
this.$lineData[id].to = json.to;
|
|
|
this.$lineData[id].name = json.name;
|
|
|
|
|
|
if (json.mark) {
|
|
|
this.$lineData[id].marked = json.mark;
|
|
|
}
|
|
|
else {
|
|
|
this.$lineData[id].marked = false;
|
|
|
}
|
|
|
|
|
|
if (this.$lineData[id].type == "sl") {
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, json.mark);
|
|
|
}
|
|
|
else {
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawPoly(id, res.start, res.m1, res.m2, res.end, json.mark);
|
|
|
}
|
|
|
|
|
|
this.$draw.appendChild(this.$lineDom[id]);
|
|
|
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[id].childNodes[1].innerHTML = json.name;
|
|
|
if (this.$lineData[id].type != "sl") {
|
|
|
var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);
|
|
|
if (Min > res.m2[0]) Min = res.m2[0];
|
|
|
if (Min > res.m1[0]) Min = res.m1[0];
|
|
|
this.$lineDom[i].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;
|
|
|
Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);
|
|
|
if (Min > res.m2[1]) Min = res.m2[1];
|
|
|
if (Min > res.m1[1]) Min = res.m1[1];
|
|
|
this.$lineDom[id].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2;
|
|
|
} else
|
|
|
this.$lineDom[id].childNodes[1].style.left =
|
|
|
((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;
|
|
|
}
|
|
|
else {
|
|
|
this.$lineDom[id].childNodes[2].textContent = json.name;
|
|
|
}
|
|
|
|
|
|
++this.$lineCount;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 重置线条 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:56
|
|
|
* */
|
|
|
resetLines: function (id, node) {
|
|
|
for (var i in this.$lineData) {
|
|
|
var other = null;//获取结束/开始结点的数据
|
|
|
var res;
|
|
|
if (this.$lineData[i].from == id) {//找结束点
|
|
|
other = this.$nodeData[this.$lineData[i].to] || null;
|
|
|
if (other == null) continue;
|
|
|
if (this.$lineData[i].type == "sl")
|
|
|
res = GooFlow.prototype.calcStartEnd(node, other);
|
|
|
else
|
|
|
res = GooFlow.prototype.calcPolyPoints(node, other, this.$lineData[i].type, this.$lineData[i].M)
|
|
|
if (!res) break;
|
|
|
}
|
|
|
else if (this.$lineData[i].to == id) {//找开始点
|
|
|
other = this.$nodeData[this.$lineData[i].from] || null;
|
|
|
if (other == null) continue;
|
|
|
if (this.$lineData[i].type == "sl")
|
|
|
res = GooFlow.prototype.calcStartEnd(other, node);
|
|
|
else
|
|
|
res = GooFlow.prototype.calcPolyPoints(other, node, this.$lineData[i].type, this.$lineData[i].M);
|
|
|
if (!res) break;
|
|
|
}
|
|
|
if (other == null) continue;
|
|
|
this.$draw.removeChild(this.$lineDom[i]);
|
|
|
if (this.$lineData[i].type == "sl") {
|
|
|
this.$lineDom[i] = GooFlow.prototype.drawLine(i, res.start, res.end, this.$lineData[i].marked);
|
|
|
}
|
|
|
else {
|
|
|
this.$lineDom[i] = GooFlow.prototype.drawPoly(i, res.start, res.m1, res.m2, res.end, this.$lineData[i].marked);
|
|
|
}
|
|
|
this.$draw.appendChild(this.$lineDom[i]);
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[i].childNodes[1].innerHTML = this.$lineData[i].name;
|
|
|
if (this.$lineData[i].type != "sl") {
|
|
|
var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);
|
|
|
if (Min > res.m2[0]) Min = res.m2[0];
|
|
|
if (Min > res.m1[0]) Min = res.m1[0];
|
|
|
this.$lineDom[i].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetWidth / 2 + 4;
|
|
|
Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);
|
|
|
if (Min > res.m2[1]) Min = res.m2[1];
|
|
|
if (Min > res.m1[1]) Min = res.m1[1];
|
|
|
this.$lineDom[i].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetHeight / 2 - 4;
|
|
|
} else
|
|
|
this.$lineDom[i].childNodes[1].style.left =
|
|
|
((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[i].childNodes[1].offsetWidth) / 2 + 4;
|
|
|
}
|
|
|
else this.$lineDom[i].childNodes[2].textContent = this.$lineData[i].name;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 重置线条类型 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:56
|
|
|
* */
|
|
|
setLineType: function (id, newType) {
|
|
|
if (!newType || newType == null || newType == "" || newType == this.$lineData[id].type) return false;
|
|
|
if (this.onLineSetType != null && !this.onLineSetType(id, newType)) return;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$lineData[id].type];
|
|
|
this.pushOper("setLineType", paras);
|
|
|
if (this.$lineData[id].type != "sl") {
|
|
|
var para2 = [id, this.$lineData[id].M];
|
|
|
this.pushOper("setLineM", para2);
|
|
|
}
|
|
|
}
|
|
|
var from = this.$lineData[id].from;
|
|
|
var to = this.$lineData[id].to;
|
|
|
this.$lineData[id].type = newType;
|
|
|
var res;
|
|
|
//如果是变成折线
|
|
|
if (newType != "sl") {
|
|
|
var res = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);
|
|
|
this.setLineM(id, this.getMValue(this.$nodeData[from], this.$nodeData[to], newType), true);
|
|
|
}
|
|
|
//如果是变回直线
|
|
|
else {
|
|
|
delete this.$lineData[id].M;
|
|
|
this.$lineMove.hide().removeData("type").removeData("tid");
|
|
|
res = GooFlow.prototype.calcStartEnd(this.$nodeData[from], this.$nodeData[to]);
|
|
|
if (!res) return;
|
|
|
this.$draw.removeChild(this.$lineDom[id]);
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, this.$lineData[id].marked || this.$focus == id);
|
|
|
this.$draw.appendChild(this.$lineDom[id]);
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;
|
|
|
this.$lineDom[id].childNodes[1].style.left =
|
|
|
((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;
|
|
|
}
|
|
|
else
|
|
|
this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;
|
|
|
}
|
|
|
if (this.$focus == id) {
|
|
|
this.focusItem(id);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 重置折线中点 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:57
|
|
|
* */
|
|
|
setLineM: function (id, M, noStack) {
|
|
|
if (!this.$lineData[id] || M < 0 || !this.$lineData[id].type || this.$lineData[id].type == "sl") return false;
|
|
|
if (this.onLineMove != null && !this.onLineMove(id, M)) return false;
|
|
|
if (this.$undoStack && !noStack) {
|
|
|
var paras = [id, this.$lineData[id].M];
|
|
|
this.pushOper("setLineM", paras);
|
|
|
}
|
|
|
var from = this.$lineData[id].from;
|
|
|
var to = this.$lineData[id].to;
|
|
|
this.$lineData[id].M = M;
|
|
|
var ps = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);
|
|
|
this.$draw.removeChild(this.$lineDom[id]);
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawPoly(id, ps.start, ps.m1, ps.m2, ps.end, this.$lineData[id].marked || this.$focus == id);
|
|
|
this.$draw.appendChild(this.$lineDom[id]);
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;
|
|
|
var Min = (ps.start[0] > ps.end[0] ? ps.end[0] : ps.start[0]);
|
|
|
if (Min > ps.m2[0]) Min = ps.m2[0];
|
|
|
if (Min > ps.m1[0]) Min = ps.m1[0];
|
|
|
this.$lineDom[id].childNodes[1].style.left = (ps.m2[0] + ps.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;
|
|
|
Min = (ps.start[1] > ps.end[1] ? ps.end[1] : ps.start[1]);
|
|
|
if (Min > ps.m2[1]) Min = ps.m2[1];
|
|
|
if (Min > ps.m1[1]) Min = ps.m1[1];
|
|
|
this.$lineDom[id].childNodes[1].style.top = (ps.m2[1] + ps.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2 - 4;
|
|
|
}
|
|
|
else this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;
|
|
|
},
|
|
|
|
|
|
|
|
|
/*
|
|
|
* Todo: 线条删除 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:57
|
|
|
* */
|
|
|
delLine: function (id) {
|
|
|
if (!this.$lineData[id]) return;
|
|
|
if (this.onItemDel != null && !this.onItemDel(id, "line")) return;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$lineData[id]];
|
|
|
this.pushOper("addLine", paras);
|
|
|
}
|
|
|
this.$draw.removeChild(this.$lineDom[id]);
|
|
|
delete this.$lineData[id];
|
|
|
delete this.$lineDom[id];
|
|
|
if (this.$focus == id) this.$focus = "";
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 初始化数据加载 【AJAX相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:02
|
|
|
* */
|
|
|
loadData: function (data) {
|
|
|
for (var i in data.nodes) {
|
|
|
this.addNode(i, data.nodes[i]);
|
|
|
}
|
|
|
for (var j in data.lines) {
|
|
|
this.addLine(j, data.lines[j],true);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: AJAX数据加载 【AJAX相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:02
|
|
|
* */
|
|
|
loadDataAjax: function (para) {
|
|
|
var This = this;
|
|
|
$.ajax({
|
|
|
type: para.type,
|
|
|
url: para.url,
|
|
|
dataType: "json",
|
|
|
data: para.data,
|
|
|
success: function (msg) {
|
|
|
if (para.dataFilter) para.dataFilter(msg, "json");
|
|
|
This.loadData(msg);
|
|
|
if (para.success) para.success(msg);
|
|
|
},
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
|
|
if (para.error) para.error(textStatus, errorThrown);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 导出数据 【AJAX相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:58
|
|
|
* */
|
|
|
exportData: function () {
|
|
|
var that = this;
|
|
|
var data = {
|
|
|
nodes:{},
|
|
|
lines:{}
|
|
|
}
|
|
|
|
|
|
var nodes = data.nodes;
|
|
|
var lines = data.lines;
|
|
|
|
|
|
function keyJson(obj,target,args) {
|
|
|
for (var k in obj) {
|
|
|
var jsonstr = JSON.stringify(obj[k],args);
|
|
|
$.parseJSON(jsonstr);
|
|
|
target[k] = $.parseJSON(jsonstr)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
keyJson(this.$nodeData,nodes,['name','value','nodeType']);
|
|
|
keyJson(this.$lineData,lines,['from','to','name']);
|
|
|
|
|
|
|
|
|
var nodeArr = [];
|
|
|
var specialArr = [];
|
|
|
for (var i in nodes) {
|
|
|
nodeArr.push(i);
|
|
|
if (nodes[i].nodeType === 'judgement' || nodes[i].nodeType === 'circle'){
|
|
|
specialArr.push(i)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
var fromArr = [];
|
|
|
var toArr = [];
|
|
|
for (var j in lines) {
|
|
|
fromArr.push(lines[j].from);
|
|
|
toArr.push(lines[j].to);
|
|
|
}
|
|
|
|
|
|
|
|
|
// 如果存在没有连线的结点则报错
|
|
|
var noError = true;
|
|
|
nodeArr.forEach(function (elem) {
|
|
|
var nodeWithoutLines = (fromArr.indexOf(elem) === -1) && (toArr.indexOf(elem)===-1)
|
|
|
if (nodeWithoutLines) {
|
|
|
noError = false;
|
|
|
$('#'+elem).addClass('node-error');
|
|
|
}else{
|
|
|
$('#'+elem).removeClass('node-error');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 判断和循环必须有两条线
|
|
|
specialArr.forEach(function (elem) {
|
|
|
var i = 0;
|
|
|
fromArr.forEach(function(el){
|
|
|
if (elem === el){
|
|
|
i++
|
|
|
}
|
|
|
})
|
|
|
if (i<2) {
|
|
|
noError = false;
|
|
|
$('#'+elem).addClass('node-error');
|
|
|
}else{
|
|
|
$('#'+elem).removeClass('node-error');
|
|
|
for (var e in lines) {
|
|
|
console.log('lines[e].name:'+lines[e].name);
|
|
|
if (lines[e].from === elem){
|
|
|
if (lines[e].name == '') {
|
|
|
noError = false;
|
|
|
$('#' + e + ' path').addClass('line-error').attr("marker-end", "url(#arrow3)");
|
|
|
$('#'+elem).addClass('node-error');
|
|
|
}else{
|
|
|
$('#' + e + ' path').removeClass('line-error').attr("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if (noError){
|
|
|
saveConfirm();
|
|
|
}else{
|
|
|
$.ligerDialog.alert('<p style="padding: 10px;">您还有未编排完成的对象，无法保存。</p>')
|
|
|
}
|
|
|
|
|
|
function saveConfirm () {
|
|
|
var callback = function () {
|
|
|
|
|
|
}
|
|
|
|
|
|
$.ligerDialog.confirm2 = function (content, title, callback)
|
|
|
{
|
|
|
if (typeof (title) == "function")
|
|
|
{
|
|
|
callback = title;
|
|
|
type = null;
|
|
|
}
|
|
|
var btnclick = function (item, Dialog)
|
|
|
{
|
|
|
Dialog.close();
|
|
|
if (callback)
|
|
|
{
|
|
|
callback(item.type == 'ok');
|
|
|
}
|
|
|
};
|
|
|
p = {
|
|
|
type: 'question',
|
|
|
content: content,
|
|
|
buttons: [
|
|
|
{
|
|
|
text: $.ligerDefaults.DialogString.yes, onclick: btnclick, type: 'ok', cls: 'l-dialog-btn-ok'
|
|
|
}, {
|
|
|
text: $.ligerDefaults.DialogString.no, onclick: btnclick, type: 'no', cls: 'l-dialog-btn-no'
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
if (typeof (title) == "string" && title != "") p.title = title;
|
|
|
$.extend(p, {
|
|
|
width:350,
|
|
|
showMax: false,
|
|
|
showToggle: false,
|
|
|
showMin: false
|
|
|
});
|
|
|
return $.ligerDialog(p);
|
|
|
};
|
|
|
|
|
|
$.ligerDialog.confirm2('<p style="font-size: 15px;font-weight: bold;text-align: center;line-height: 20px">是否确认保存为正式流程，确认后流程将立即生效？</p><p style="margin-top: 10px;color: #999;text-align: center;line-height: 20px;">如果是请按确认，如果不是请按取消</p>', '保存流程', callback)
|
|
|
|
|
|
$('.l-dialog-content').css({ "padding": "0 40px 20px 40px"});
|
|
|
}
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 清空数据
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:28
|
|
|
* */
|
|
|
clearData: function () {
|
|
|
for (var key in this.$nodeData) {
|
|
|
this.delNode(key);
|
|
|
}
|
|
|
for (var key in this.$lineData) {
|
|
|
this.delLine(key);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 工具函数
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:02
|
|
|
* */
|
|
|
destrory: function () {
|
|
|
this.$bgDiv.empty();
|
|
|
this.$lineData = null;
|
|
|
this.$nodeData = null;
|
|
|
this.$lineDom = null;
|
|
|
this.$nodeDom = null;
|
|
|
this.$areaDom = null;
|
|
|
this.$areaData = null;
|
|
|
this.$nodeCount = 0;
|
|
|
},
|
|
|
|
|
|
//获取结点/连线/分组区域的详细信息
|
|
|
getItemInfo: function (id, type) {
|
|
|
switch (type) {
|
|
|
case "node":
|
|
|
return this.$nodeData[id] || null;
|
|
|
case "line":
|
|
|
return this.$lineData[id] || null;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//用颜色标注/取消标注一个结点或转换线, 常用于显示重点或流程的进度。
|
|
|
//这是一个在编辑模式中无用,但是在纯浏览模式中非常有用的方法, 实际运用中可用于跟踪流程的进度。
|
|
|
markItem: function (id, type, mark) {
|
|
|
if (type == "node") {
|
|
|
if (!this.$nodeData[id]) return;
|
|
|
if (this.onItemMark != null && !this.onItemMark(id, "node", mark)) return;
|
|
|
this.$nodeData[id].marked = mark || false;
|
|
|
if (mark) this.$nodeDom[id].addClass("item_mark");
|
|
|
else this.$nodeDom[id].removeClass("item_mark");
|
|
|
|
|
|
} else if (type == "line") {
|
|
|
if (!this.$lineData[id]) return;
|
|
|
if (this.onItemMark != null && !this.onItemMark(id, "line", mark)) return;
|
|
|
this.$lineData[id].marked = mark || false;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
if (mark) {
|
|
|
this.$nodeDom[id].childNodes[1].setAttribute("stroke", "#00b7ee");
|
|
|
this.$nodeDom[id].childNodes[1].setAttribute("marker-end", "url(#arrow2)");
|
|
|
} else {
|
|
|
this.$nodeDom[id].childNodes[1].setAttribute("stroke", "#323232");
|
|
|
this.$nodeDom[id].childNodes[1].setAttribute("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
} else {
|
|
|
if (mark) this.$nodeDom[id].strokeColor = "#00b7ee";
|
|
|
else this.$nodeDom[id].strokeColor = "#323232"
|
|
|
}
|
|
|
}
|
|
|
if (this.$undoStatck) {
|
|
|
var paras = [id, type, !mark];
|
|
|
this.pushOper("markItem", paras);
|
|
|
}
|
|
|
},
|
|
|
addNode: function (id, json) {
|
|
|
if (this.onItemAdd != null && !this.onItemAdd(id, "node", json))return;
|
|
|
if (this.$undoStack) {this.pushOper("delNode", [id]);}
|
|
|
|
|
|
if (json.type != "start" && json.type != "end") {
|
|
|
if (json.top < 0) json.top = 0;
|
|
|
if (json.left < 0) json.left = 0;
|
|
|
|
|
|
switch (json.type) {
|
|
|
case "state":
|
|
|
json.name = '判断';
|
|
|
json.value = '';
|
|
|
json.nodeType = 'judgement'
|
|
|
break;
|
|
|
case "complex":
|
|
|
json.name = '循环';
|
|
|
json.value = '';
|
|
|
json.nodeType = 'circle'
|
|
|
break;
|
|
|
case "join":
|
|
|
json.name = '聚合';
|
|
|
json.value = '';
|
|
|
json.nodeType = 'aggregate'
|
|
|
break;
|
|
|
case "fork":
|
|
|
json.name = '分流';
|
|
|
json.value = '';
|
|
|
json.nodeType = 'multicast'
|
|
|
break;
|
|
|
case "task":
|
|
|
json.name = this.$newNodeTxt || json.name;
|
|
|
json.value = this.$newNodeValue || json.value;
|
|
|
json.nodeType = 'service'
|
|
|
break;
|
|
|
case "plug":
|
|
|
json.name = this.$newNodeTxt || json.name;
|
|
|
json.value = this.$newNodeValue || json.value;
|
|
|
json.nodeType = 'processor'
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
this.$nodeDom[id] = $(" <div class='GooFlow_item node-" + json.type + "' id='" + id + "' style='top:" + json.top + "px;left:" + json.left + "px'> <div class='GooFlow_item_cont'> <i class='fa ico_" + json.type + "'></i> <span class='GooFlow_item_txt' id='type-" + json.type + "'>" + json.name + "</span></div> <div class='rs-box' style='display:none'> <div class='rs_close'><i class='fa fa-close' aria-hidden='true'></i></div> </div> </div>");
|
|
|
|
|
|
}
|
|
|
var ua = navigator.userAgent.toLowerCase();
|
|
|
if (ua.indexOf('msie') != -1 && ua.indexOf('8.0') != -1) {
|
|
|
this.$nodeDom[id].css("filter", "progid:DXImageTransform.Microsoft.Shadow(color=#94AAC2,direction=135,strength=2)");
|
|
|
}
|
|
|
this.$workArea.append(this.$nodeDom[id]);
|
|
|
json.width = this.$nodeDom[id].width();
|
|
|
json.height = this.$nodeDom[id].height();
|
|
|
this.$nodeData[id] = json;
|
|
|
++this.$nodeCount;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 删除结点 【结点公共方法 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:55
|
|
|
* */
|
|
|
delNode: function (id) {
|
|
|
if (!this.$nodeData[id]) return;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$nodeData[id]];
|
|
|
this.pushOper("addNode", paras);
|
|
|
}
|
|
|
if (this.onItemDel != null && !this.onItemDel(id, "node")) return;
|
|
|
delete this.$nodeData[id];
|
|
|
this.$nodeDom[id].remove();
|
|
|
delete this.$nodeDom[id];
|
|
|
if (this.$focus == id) this.$focus = "";
|
|
|
for (var k in this.$lineData) {
|
|
|
if (this.$lineData[k].from == id || this.$lineData[k].to == id) {
|
|
|
this.$draw.removeChild(this.$lineDom[k]);
|
|
|
delete this.$lineData[k];
|
|
|
delete this.$lineDom[k];
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 结点移动 【结点移动方法 @@】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:54
|
|
|
* */
|
|
|
moveNode: function (id, left, top) {
|
|
|
if (!this.$nodeData[id]) return;
|
|
|
if (this.onItemMove != null && !this.onItemMove(id, "node", left, top)) return;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$nodeData[id].left, this.$nodeData[id].top];
|
|
|
this.pushOper("moveNode", paras);
|
|
|
}
|
|
|
if (left < 0) left = 0;
|
|
|
if (top < 0) top = 0;
|
|
|
$("#" + id).css({left: left + "px", top: top + "px"});
|
|
|
this.$nodeData[id].left = left;
|
|
|
this.$nodeData[id].top = top;
|
|
|
//重画转换线
|
|
|
this.resetLines(id, this.$nodeData[id]);
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 设置结点线等内容 【内容设置公共方法 @@ $$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:54
|
|
|
* */
|
|
|
setName: function (id, name, 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;
|
|
|
}
|
|
|
}
|
|
|
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";
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 增加线条 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 16:46
|
|
|
* */
|
|
|
addLine: function (id, json, isDataLoad) {
|
|
|
|
|
|
if (!isDataLoad) {
|
|
|
if (this.$undoStack) {
|
|
|
this.pushOper("delLine", [id]);
|
|
|
}
|
|
|
|
|
|
if (json.from == json.to) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var typeF = json.typeFrom || json.type;
|
|
|
var typeT = json.typeTo || json.type;
|
|
|
|
|
|
for (var k in this.$lineData) {
|
|
|
// 单出
|
|
|
var onlyOut = (json.from == this.$lineData[k].from);
|
|
|
// 单进
|
|
|
var onlyIn = (json.to == this.$lineData[k].to);
|
|
|
// 来源等于去向
|
|
|
var formEto = (json.from == this.$lineData[k].to);
|
|
|
// 去向等于来源
|
|
|
var tofrom = (json.to == this.$lineData[k].from);
|
|
|
|
|
|
// 不能反向
|
|
|
if (tofrom && formEto) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 设置除了聚合其余都默认单进
|
|
|
if (typeT != 'join') {
|
|
|
if (onlyIn) {
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
switch (typeF) {
|
|
|
case 'task':
|
|
|
case 'plug':
|
|
|
if (onlyOut) {
|
|
|
return;
|
|
|
}
|
|
|
break;
|
|
|
case 'state':
|
|
|
case 'complex':
|
|
|
if (json.from == this.$lineData[k].from) {
|
|
|
var i = 0;
|
|
|
for (var j in this.$lineData) {
|
|
|
if (json.from == this.$lineData[j].from) {
|
|
|
i++
|
|
|
}
|
|
|
}
|
|
|
if (i >= 2) {
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//获取开始/结束结点的数据
|
|
|
var n1 = this.$nodeData[json.from], n2 = this.$nodeData[json.to];
|
|
|
if (!n1 || !n2) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 划线函数以及线条类型处理
|
|
|
var res;
|
|
|
if (json.type && json.type != "sl") {
|
|
|
res = GooFlow.prototype.calcPolyPoints(n1, n2, json.type, json.M);
|
|
|
}
|
|
|
else {
|
|
|
res = GooFlow.prototype.calcStartEnd(n1, n2);// 刚开始连线时,默认为直线
|
|
|
}
|
|
|
|
|
|
if (!res) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 存储线条
|
|
|
this.$lineData[id] = {};
|
|
|
if (json.type) {
|
|
|
this.$lineData[id].type = json.type;
|
|
|
this.$lineData[id].M = json.M;
|
|
|
}
|
|
|
else {
|
|
|
this.$lineData[id].type = "sl";//默认为直线
|
|
|
}
|
|
|
|
|
|
this.$lineData[id].from = json.from;
|
|
|
this.$lineData[id].to = json.to;
|
|
|
this.$lineData[id].value = json.name;
|
|
|
|
|
|
if (json.mark) {
|
|
|
this.$lineData[id].marked = json.mark;
|
|
|
}
|
|
|
else {
|
|
|
this.$lineData[id].marked = false;
|
|
|
}
|
|
|
|
|
|
if (this.$lineData[id].type == "sl") {
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, json.mark);
|
|
|
}
|
|
|
else {
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawPoly(id, res.start, res.m1, res.m2, res.end, json.mark);
|
|
|
}
|
|
|
|
|
|
this.$draw.appendChild(this.$lineDom[id]);
|
|
|
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[id].childNodes[1].innerHTML = json.name;
|
|
|
if (this.$lineData[id].type != "sl") {
|
|
|
var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);
|
|
|
if (Min > res.m2[0]) Min = res.m2[0];
|
|
|
if (Min > res.m1[0]) Min = res.m1[0];
|
|
|
this.$lineDom[i].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;
|
|
|
Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);
|
|
|
if (Min > res.m2[1]) Min = res.m2[1];
|
|
|
if (Min > res.m1[1]) Min = res.m1[1];
|
|
|
this.$lineDom[id].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2;
|
|
|
} else
|
|
|
this.$lineDom[id].childNodes[1].style.left =
|
|
|
((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;
|
|
|
}
|
|
|
else {
|
|
|
this.$lineDom[id].childNodes[2].textContent = json.name;
|
|
|
}
|
|
|
|
|
|
++this.$lineCount;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 线条删除 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:57
|
|
|
* */
|
|
|
delLine: function (id) {
|
|
|
if (!this.$lineData[id]) return;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$lineData[id]];
|
|
|
this.pushOper("addLine", paras);
|
|
|
}
|
|
|
this.$draw.removeChild(this.$lineDom[id]);
|
|
|
delete this.$lineData[id];
|
|
|
delete this.$lineDom[id];
|
|
|
if (this.$focus == id) this.$focus = "";
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 直线生成 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 14:57
|
|
|
* */
|
|
|
drawLine: function (id, sp, ep, mark, dash) {
|
|
|
var line;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
line = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
|
var hi = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
|
|
|
if (id != "") line.setAttribute("id", id);
|
|
|
line.setAttribute("from", sp[0] + "," + sp[1]);
|
|
|
line.setAttribute("to", ep[0] + "," + ep[1]);
|
|
|
hi.setAttribute("visibility", "hidden");
|
|
|
hi.setAttribute("stroke-width", 15);
|
|
|
hi.setAttribute("fill", "none");
|
|
|
hi.setAttribute("stroke", "white");
|
|
|
hi.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]);
|
|
|
hi.setAttribute("pointer-events", "stroke");
|
|
|
path.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]);
|
|
|
path.setAttribute("stroke-width", 1.2);
|
|
|
path.setAttribute("stroke-linecap", "round");
|
|
|
path.setAttribute("fill", "none");
|
|
|
if (dash) path.setAttribute("style", "stroke-dasharray:6,5");
|
|
|
if (mark) {
|
|
|
path.setAttribute("stroke", "#00b7ee");
|
|
|
path.setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
else {
|
|
|
path.setAttribute("stroke", "#323232");
|
|
|
path.setAttribute("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
line.appendChild(hi);
|
|
|
line.appendChild(path);
|
|
|
line.style.cursor = "crosshair";
|
|
|
if (id != "" && id != "GooFlow_tmp_line") {
|
|
|
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
|
//text.textContent=id;
|
|
|
line.appendChild(text);
|
|
|
var x = (ep[0] + sp[0]) / 2;
|
|
|
var y = (ep[1] + sp[1]) / 2;
|
|
|
text.setAttribute("text-anchor", "middle");
|
|
|
text.setAttribute("x", x);
|
|
|
text.setAttribute("y", y);
|
|
|
line.style.cursor = "pointer";
|
|
|
text.style.cursor = "text";
|
|
|
}
|
|
|
} else {
|
|
|
line = document.createElement("v:polyline");
|
|
|
if (id != "") line.id = id;
|
|
|
//line.style.position="absolute";
|
|
|
line.points.value = sp[0] + "," + sp[1] + " " + ep[0] + "," + ep[1];
|
|
|
line.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]);
|
|
|
line.strokeWeight = "1.2";
|
|
|
line.stroke.EndArrow = "Block";
|
|
|
line.style.cursor = "crosshair";
|
|
|
if (id != "" && id != "GooFlow_tmp_line") {
|
|
|
var text = document.createElement("div");
|
|
|
//text.innerHTML=id;
|
|
|
line.appendChild(text);
|
|
|
var x = (ep[0] - sp[0]) / 2;
|
|
|
var y = (ep[1] - sp[1]) / 2;
|
|
|
if (x < 0) x = x * -1;
|
|
|
if (y < 0) y = y * -1;
|
|
|
text.style.left = x + "px";
|
|
|
text.style.top = y - 6 + "px";
|
|
|
line.style.cursor = "pointer";
|
|
|
}
|
|
|
if (dash) line.stroke.dashstyle = "Dash";
|
|
|
if (mark) line.strokeColor = "#00b7ee";
|
|
|
else line.strokeColor = "#323232";
|
|
|
}
|
|
|
return line;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 折线生成 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:26
|
|
|
* */
|
|
|
drawPoly: function (id, sp, m1, m2, ep, mark) {
|
|
|
var poly, strPath;
|
|
|
if (GooFlow.prototype.useSVG != "") {
|
|
|
poly = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
|
var hi = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
|
if (id != "") poly.setAttribute("id", id);
|
|
|
poly.setAttribute("from", sp[0] + "," + sp[1]);
|
|
|
poly.setAttribute("to", ep[0] + "," + ep[1]);
|
|
|
hi.setAttribute("visibility", "hidden");
|
|
|
hi.setAttribute("stroke-width", 15);
|
|
|
hi.setAttribute("fill", "none");
|
|
|
hi.setAttribute("stroke", "white");
|
|
|
strPath = "M " + sp[0] + " " + sp[1];
|
|
|
if (m1[0] != sp[0] || m1[1] != sp[1])
|
|
|
strPath += " L " + m1[0] + " " + m1[1];
|
|
|
if (m2[0] != ep[0] || m2[1] != ep[1])
|
|
|
strPath += " L " + m2[0] + " " + m2[1];
|
|
|
strPath += " L " + ep[0] + " " + ep[1];
|
|
|
hi.setAttribute("d", strPath);
|
|
|
hi.setAttribute("pointer-events", "stroke");
|
|
|
path.setAttribute("d", strPath);
|
|
|
path.setAttribute("stroke-width", 1.2);
|
|
|
path.setAttribute("stroke-linecap", "round");
|
|
|
path.setAttribute("fill", "none");
|
|
|
if (mark) {
|
|
|
path.setAttribute("stroke", "#00b7ee");
|
|
|
path.setAttribute("marker-end", "url(#arrow2)");
|
|
|
}
|
|
|
else {
|
|
|
path.setAttribute("stroke", "#323232");
|
|
|
path.setAttribute("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
poly.appendChild(hi);
|
|
|
poly.appendChild(path);
|
|
|
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
|
//text.textContent=id;
|
|
|
poly.appendChild(text);
|
|
|
var x = (m2[0] + m1[0]) / 2;
|
|
|
var y = (m2[1] + m1[1]) / 2;
|
|
|
text.setAttribute("text-anchor", "middle");
|
|
|
text.setAttribute("x", x);
|
|
|
text.setAttribute("y", y);
|
|
|
text.style.cursor = "text";
|
|
|
poly.style.cursor = "pointer";
|
|
|
}
|
|
|
else {
|
|
|
poly = document.createElement("v:Polyline");
|
|
|
if (id != "") poly.id = id;
|
|
|
poly.filled = "false";
|
|
|
strPath = sp[0] + "," + sp[1];
|
|
|
if (m1[0] != sp[0] || m1[1] != sp[1])
|
|
|
strPath += " " + m1[0] + "," + m1[1];
|
|
|
if (m2[0] != ep[0] || m2[1] != ep[1])
|
|
|
strPath += " " + m2[0] + "," + m2[1];
|
|
|
strPath += " " + ep[0] + "," + ep[1];
|
|
|
poly.points.value = strPath;
|
|
|
poly.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]);
|
|
|
poly.strokeWeight = "1.2";
|
|
|
poly.stroke.EndArrow = "Block";
|
|
|
var text = document.createElement("div");
|
|
|
//text.innerHTML=id;
|
|
|
poly.appendChild(text);
|
|
|
var x = (m2[0] - m1[0]) / 2;
|
|
|
var y = (m2[1] - m1[1]) / 2;
|
|
|
if (x < 0) x = x * -1;
|
|
|
if (y < 0) y = y * -1;
|
|
|
text.style.left = x + "px";
|
|
|
text.style.top = y - 4 + "px";
|
|
|
poly.style.cursor = "pointer";
|
|
|
if (mark) poly.strokeColor = "#00b7ee";
|
|
|
else poly.strokeColor = "#323232"
|
|
|
}
|
|
|
return poly;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 直线坐标计算 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:26
|
|
|
* */
|
|
|
calcStartEnd: function (n1, n2) {
|
|
|
if (!n1 || !n2) {
|
|
|
return {"start": [], "end": []};
|
|
|
}
|
|
|
var X_1, Y_1, X_2, Y_2;
|
|
|
|
|
|
//X判断：
|
|
|
var x11 = n1.left, x12 = n1.left + n1.width / 2, x13 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width / 2, x23 = n2.left + n2.width;
|
|
|
//Y判断：
|
|
|
var y11 = n1.top, y12 = n1.top + n1.height / 2, y13 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height / 2, y23 = n2.top + n2.height;
|
|
|
X_1 = x12;
|
|
|
X_2 = x22;
|
|
|
|
|
|
// 结点2在结点1左边
|
|
|
if (x11 >= x23) {
|
|
|
X_1 = x11;
|
|
|
Y_1 = y12;
|
|
|
X_2 = x23;
|
|
|
Y_2 = y22;
|
|
|
}
|
|
|
|
|
|
//结点2在结点1右边
|
|
|
else if (x21 >= x13) {
|
|
|
X_1 = x13;
|
|
|
Y_1 = y12;
|
|
|
X_2 = x21;
|
|
|
Y_2 = y22;
|
|
|
}
|
|
|
|
|
|
else {
|
|
|
// 结点2在结点1上边
|
|
|
if (y11 >= y22) {
|
|
|
Y_1 = y11;
|
|
|
Y_2 = y23;
|
|
|
}
|
|
|
|
|
|
//结点2在结点1下边
|
|
|
else if (y12 <= y21) {
|
|
|
Y_1 = y13;
|
|
|
Y_2 = y21;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
return {"start": [X_1, Y_1], "end": [X_2, Y_2]};
|
|
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 折线坐标计算 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:27
|
|
|
* */
|
|
|
calcPolyPoints: function (n1, n2, type, M) {
|
|
|
|
|
|
//开始/结束两个结点的中心
|
|
|
var SP = {x: n1.left + n1.width / 2, y: n1.top + n1.height / 2};
|
|
|
var EP = {x: n2.left + n2.width / 2, y: n2.top + n2.height / 2};
|
|
|
var sp = [], m1 = [], m2 = [], ep = [];
|
|
|
|
|
|
//如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标
|
|
|
//粗略计算起始点
|
|
|
sp = [SP.x, SP.y];
|
|
|
ep = [EP.x, EP.y];
|
|
|
if (type == "lr") {
|
|
|
//粗略计算2个中点
|
|
|
m1 = [M, SP.y];
|
|
|
m2 = [M, EP.y];
|
|
|
//再具体分析修改开始点和中点1
|
|
|
if (m1[0] > n1.left && m1[0] < n1.left + n1.width) {
|
|
|
m1[1] = (SP.y > EP.y ? n1.top : n1.top + n1.height);
|
|
|
sp[0] = m1[0];
|
|
|
sp[1] = m1[1];
|
|
|
}
|
|
|
else {
|
|
|
sp[0] = (m1[0] < n1.left ? n1.left : n1.left + n1.width)
|
|
|
}
|
|
|
//再具体分析中点2和结束点
|
|
|
if (m2[0] > n2.left && m2[0] < n2.left + n2.width) {
|
|
|
m2[1] = (SP.y > EP.y ? n2.top + n2.height : n2.top);
|
|
|
ep[0] = m2[0];
|
|
|
ep[1] = m2[1];
|
|
|
}
|
|
|
else {
|
|
|
ep[0] = (m2[0] < n2.left ? n2.left : n2.left + n2.width)
|
|
|
}
|
|
|
}
|
|
|
//如果是允许中段可上下移动的折线,则参数M为可移动中段线的Y坐标
|
|
|
else if (type == "tb") {
|
|
|
//粗略计算2个中点
|
|
|
m1 = [SP.x, M];
|
|
|
m2 = [EP.x, M];
|
|
|
//再具体分析修改开始点和中点1
|
|
|
if (m1[1] > n1.top && m1[1] < n1.top + n1.height) {
|
|
|
m1[0] = (SP.x > EP.x ? n1.left : n1.left + n1.width);
|
|
|
sp[0] = m1[0];
|
|
|
sp[1] = m1[1];
|
|
|
}
|
|
|
else {
|
|
|
sp[1] = (m1[1] < n1.top ? n1.top : n1.top + n1.height)
|
|
|
}
|
|
|
//再具体分析中点2和结束点
|
|
|
if (m2[1] > n2.top && m2[1] < n2.top + n2.height) {
|
|
|
m2[0] = (SP.x > EP.x ? n2.left + n2.width : n2.left);
|
|
|
ep[0] = m2[0];
|
|
|
ep[1] = m2[1];
|
|
|
}
|
|
|
else {
|
|
|
ep[1] = (m2[1] < n2.top ? n2.top : n2.top + n2.height);
|
|
|
}
|
|
|
}
|
|
|
return {start: sp, m1: m1, m2: m2, end: ep};
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 折线固定中线计算 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 10:27
|
|
|
* */
|
|
|
getMValue: function (n1, n2, mType) {
|
|
|
if (mType == "lr") {
|
|
|
return (n1.left + n1.width / 2 + n2.left + n2.width / 2) / 2;
|
|
|
}
|
|
|
else if (mType == "tb") {
|
|
|
return (n1.top + n1.height / 2 + n2.top + n2.height / 2) / 2;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 重置线条 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:56
|
|
|
* */
|
|
|
resetLines: function (id, node) {
|
|
|
for (var i in this.$lineData) {
|
|
|
var other = null;//获取结束/开始结点的数据
|
|
|
var res;
|
|
|
if (this.$lineData[i].from == id) {//找结束点
|
|
|
other = this.$nodeData[this.$lineData[i].to] || null;
|
|
|
if (other == null) continue;
|
|
|
if (this.$lineData[i].type == "sl")
|
|
|
res = GooFlow.prototype.calcStartEnd(node, other);
|
|
|
else
|
|
|
res = GooFlow.prototype.calcPolyPoints(node, other, this.$lineData[i].type, this.$lineData[i].M)
|
|
|
if (!res) break;
|
|
|
}
|
|
|
else if (this.$lineData[i].to == id) {//找开始点
|
|
|
other = this.$nodeData[this.$lineData[i].from] || null;
|
|
|
if (other == null) continue;
|
|
|
if (this.$lineData[i].type == "sl")
|
|
|
res = GooFlow.prototype.calcStartEnd(other, node);
|
|
|
else
|
|
|
res = GooFlow.prototype.calcPolyPoints(other, node, this.$lineData[i].type, this.$lineData[i].M);
|
|
|
if (!res) break;
|
|
|
}
|
|
|
if (other == null) continue;
|
|
|
this.$draw.removeChild(this.$lineDom[i]);
|
|
|
if (this.$lineData[i].type == "sl") {
|
|
|
this.$lineDom[i] = GooFlow.prototype.drawLine(i, res.start, res.end, this.$lineData[i].marked);
|
|
|
}
|
|
|
else {
|
|
|
this.$lineDom[i] = GooFlow.prototype.drawPoly(i, res.start, res.m1, res.m2, res.end, this.$lineData[i].marked);
|
|
|
}
|
|
|
this.$draw.appendChild(this.$lineDom[i]);
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[i].childNodes[1].innerHTML = this.$lineData[i].name;
|
|
|
if (this.$lineData[i].type != "sl") {
|
|
|
var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);
|
|
|
if (Min > res.m2[0]) Min = res.m2[0];
|
|
|
if (Min > res.m1[0]) Min = res.m1[0];
|
|
|
this.$lineDom[i].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetWidth / 2 + 4;
|
|
|
Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);
|
|
|
if (Min > res.m2[1]) Min = res.m2[1];
|
|
|
if (Min > res.m1[1]) Min = res.m1[1];
|
|
|
this.$lineDom[i].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetHeight / 2 - 4;
|
|
|
} else
|
|
|
this.$lineDom[i].childNodes[1].style.left =
|
|
|
((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[i].childNodes[1].offsetWidth) / 2 + 4;
|
|
|
}
|
|
|
else this.$lineDom[i].childNodes[2].textContent = this.$lineData[i].name;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 重置线条类型 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:56
|
|
|
* */
|
|
|
setLineType: function (id, newType) {
|
|
|
if (!newType || newType == null || newType == "" || newType == this.$lineData[id].type) return false;
|
|
|
if (this.$undoStack) {
|
|
|
var paras = [id, this.$lineData[id].type];
|
|
|
this.pushOper("setLineType", paras);
|
|
|
if (this.$lineData[id].type != "sl") {
|
|
|
var para2 = [id, this.$lineData[id].M];
|
|
|
this.pushOper("setLineM", para2);
|
|
|
}
|
|
|
}
|
|
|
var from = this.$lineData[id].from;
|
|
|
var to = this.$lineData[id].to;
|
|
|
this.$lineData[id].type = newType;
|
|
|
var res;
|
|
|
//如果是变成折线
|
|
|
if (newType != "sl") {
|
|
|
var res = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);
|
|
|
this.setLineM(id, this.getMValue(this.$nodeData[from], this.$nodeData[to], newType), true);
|
|
|
}
|
|
|
//如果是变回直线
|
|
|
else {
|
|
|
delete this.$lineData[id].M;
|
|
|
this.$lineMove.hide().removeData("type").removeData("tid");
|
|
|
res = GooFlow.prototype.calcStartEnd(this.$nodeData[from], this.$nodeData[to]);
|
|
|
if (!res) return;
|
|
|
this.$draw.removeChild(this.$lineDom[id]);
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, this.$lineData[id].marked || this.$focus == id);
|
|
|
this.$draw.appendChild(this.$lineDom[id]);
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;
|
|
|
this.$lineDom[id].childNodes[1].style.left =
|
|
|
((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;
|
|
|
}
|
|
|
else
|
|
|
this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;
|
|
|
}
|
|
|
if (this.$focus == id) {
|
|
|
this.focusItem(id);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 重置折线中点 【$$】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:57
|
|
|
* */
|
|
|
setLineM: function (id, M, noStack) {
|
|
|
if (!this.$lineData[id] || M < 0 || !this.$lineData[id].type || this.$lineData[id].type == "sl") return false;
|
|
|
if (this.$undoStack && !noStack) {
|
|
|
var paras = [id, this.$lineData[id].M];
|
|
|
this.pushOper("setLineM", paras);
|
|
|
}
|
|
|
var from = this.$lineData[id].from;
|
|
|
var to = this.$lineData[id].to;
|
|
|
this.$lineData[id].M = M;
|
|
|
var ps = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);
|
|
|
this.$draw.removeChild(this.$lineDom[id]);
|
|
|
this.$lineDom[id] = GooFlow.prototype.drawPoly(id, ps.start, ps.m1, ps.m2, ps.end, this.$lineData[id].marked || this.$focus == id);
|
|
|
this.$draw.appendChild(this.$lineDom[id]);
|
|
|
if (GooFlow.prototype.useSVG == "") {
|
|
|
this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;
|
|
|
var Min = (ps.start[0] > ps.end[0] ? ps.end[0] : ps.start[0]);
|
|
|
if (Min > ps.m2[0]) Min = ps.m2[0];
|
|
|
if (Min > ps.m1[0]) Min = ps.m1[0];
|
|
|
this.$lineDom[id].childNodes[1].style.left = (ps.m2[0] + ps.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;
|
|
|
Min = (ps.start[1] > ps.end[1] ? ps.end[1] : ps.start[1]);
|
|
|
if (Min > ps.m2[1]) Min = ps.m2[1];
|
|
|
if (Min > ps.m1[1]) Min = ps.m1[1];
|
|
|
this.$lineDom[id].childNodes[1].style.top = (ps.m2[1] + ps.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2 - 4;
|
|
|
}
|
|
|
else this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 初始化数据加载 【AJAX相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/15
|
|
|
* time: 15:02
|
|
|
* */
|
|
|
loadData: function (data) {
|
|
|
for (var i in data.nodes) {
|
|
|
this.addNode(i, data.nodes[i]);
|
|
|
}
|
|
|
for (var j in data.lines) {
|
|
|
this.addLine(j, data.lines[j], true);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
* Todo: 导出数据 【AJAX相关】
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:58
|
|
|
* */
|
|
|
exportData: function () {
|
|
|
var data = {
|
|
|
nodes: {},
|
|
|
lines: {}
|
|
|
}
|
|
|
|
|
|
var nodes = data.nodes;
|
|
|
var lines = data.lines;
|
|
|
|
|
|
function keyJson(obj, target, args) {
|
|
|
for (var k in obj) {
|
|
|
var jsonstr = JSON.stringify(obj[k], args);
|
|
|
$.parseJSON(jsonstr);
|
|
|
target[k] = $.parseJSON(jsonstr)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
keyJson(this.$nodeData, nodes, ['name', 'value', 'nodeType','param']);
|
|
|
keyJson(this.$lineData, lines, ['from', 'to', 'value']);
|
|
|
|
|
|
|
|
|
var nodeArr = [];
|
|
|
var specialArr = [];
|
|
|
for (var i in nodes) {
|
|
|
nodeArr.push(i);
|
|
|
if (nodes[i].nodeType === 'judgement' || nodes[i].nodeType === 'circle') {
|
|
|
specialArr.push(i)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
var fromArr = [];
|
|
|
var toArr = [];
|
|
|
for (var j in lines) {
|
|
|
fromArr.push(lines[j].from);
|
|
|
toArr.push(lines[j].to);
|
|
|
}
|
|
|
|
|
|
|
|
|
// 如果存在没有连线的结点则报错
|
|
|
var noError = true;
|
|
|
nodeArr.forEach(function (elem) {
|
|
|
var nodeWithoutLines = (fromArr.indexOf(elem) === -1) && (toArr.indexOf(elem) === -1)
|
|
|
if (nodeWithoutLines) {
|
|
|
noError = false;
|
|
|
$('#' + elem).addClass('node-error');
|
|
|
} else {
|
|
|
$('#' + elem).removeClass('node-error');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 判断和循环必须有两条线
|
|
|
specialArr.forEach(function (elem) {
|
|
|
var i = 0;
|
|
|
fromArr.forEach(function (el) {
|
|
|
if (elem === el) {
|
|
|
i++
|
|
|
}
|
|
|
})
|
|
|
if (i < 2) {
|
|
|
noError = false;
|
|
|
$('#' + elem).addClass('node-error');
|
|
|
} else {
|
|
|
$('#' + elem).removeClass('node-error');
|
|
|
for (var e in lines) {
|
|
|
if (lines[e].from === elem) {
|
|
|
if (lines[e].name == '') {
|
|
|
noError = false;
|
|
|
$('#' + e + ' path').addClass('line-error').attr("marker-end", "url(#arrow3)");
|
|
|
$('#' + elem).addClass('node-error');
|
|
|
} else {
|
|
|
$('#' + e + ' path').removeClass('line-error').attr("marker-end", "url(#arrow1)");
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if (noError) {
|
|
|
saveConfirm();
|
|
|
} else {
|
|
|
$.ligerDialog.alert('<p style="padding: 10px;">您还有未编排完成的对象，无法保存。</p>')
|
|
|
}
|
|
|
|
|
|
function saveConfirm() {
|
|
|
var callback = function () {
|
|
|
|
|
|
}
|
|
|
|
|
|
$.ligerDialog.confirm2 = function (content, title, callback) {
|
|
|
if (typeof (title) == "function") {
|
|
|
callback = title;
|
|
|
type = null;
|
|
|
}
|
|
|
var btnclick = function (item, Dialog) {
|
|
|
Dialog.close();
|
|
|
if (callback) {
|
|
|
callback(item.type == 'ok');
|
|
|
}
|
|
|
};
|
|
|
p = {
|
|
|
type: 'question',
|
|
|
content: content,
|
|
|
buttons: [
|
|
|
{
|
|
|
text: $.ligerDefaults.DialogString.yes,
|
|
|
onclick: btnclick,
|
|
|
type: 'ok',
|
|
|
cls: 'l-dialog-btn-ok'
|
|
|
}, {
|
|
|
text: $.ligerDefaults.DialogString.no, onclick: btnclick, type: 'no', cls: 'l-dialog-btn-no'
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
if (typeof (title) == "string" && title != "") p.title = title;
|
|
|
$.extend(p, {
|
|
|
width: 350,
|
|
|
showMax: false,
|
|
|
showToggle: false,
|
|
|
showMin: false
|
|
|
});
|
|
|
return $.ligerDialog(p);
|
|
|
};
|
|
|
|
|
|
$.ligerDialog.confirm2('<p style="font-size: 15px;font-weight: bold;text-align: center;line-height: 20px">是否确认保存为正式流程，确认后流程将立即生效？</p><p style="margin-top: 10px;color: #999;text-align: center;line-height: 20px;">如果是请按确认，如果不是请按取消</p>', '保存流程', callback)
|
|
|
|
|
|
$('.l-dialog-content').css({"padding": "0 40px 20px 40px"});
|
|
|
}
|
|
|
|
|
|
console.log(this.$nodeData);
|
|
|
console.log(data);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@ -2231,84 +1993,33 @@ GooFlow.prototype = {
|
|
|
* time: 14:59
|
|
|
* */
|
|
|
$.fn.extend({
|
|
|
createGooFlow: function (property) {
|
|
|
|
|
|
/*
|
|
|
* Todo: 初始化配置参数
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:59
|
|
|
* */
|
|
|
|
|
|
var defaultOption = {
|
|
|
// ******************************************************* UI相关
|
|
|
id: '',
|
|
|
MainContener: $('body')[0],
|
|
|
width: 1400,
|
|
|
height: 600,
|
|
|
workWidth: null,
|
|
|
workHeight: null,
|
|
|
initNum: 1,
|
|
|
|
|
|
// ******************************************************* 工具栏
|
|
|
haveTool: true,
|
|
|
toolBtns: ["save", "undo", "redo"],
|
|
|
toolBtnRemarks: ['保存', '撤销', '重做'],
|
|
|
|
|
|
// ******************************************************* 流程图工具
|
|
|
flowChart: true,
|
|
|
flowBtns: ["state", "complex", "join", "fork"],
|
|
|
useOperStack: true, // 是否启用回滚栈, 如否, 头部工具栏的回滚和重做按钮都将失效
|
|
|
editable: true, // 是否可编辑
|
|
|
|
|
|
// 工具栏回调函数：
|
|
|
onBtnNewClick: null, // 新建流程图按钮被点中
|
|
|
onBtnOpenClick: null, // 打开流程图按钮定义
|
|
|
onBtnSaveClick: null, // 保存流程图按钮定义
|
|
|
onFreshClick: null, // 重载流程图按钮定义
|
|
|
onExpandClick: null, // 扩大画布按钮定义
|
|
|
|
|
|
//当操作某个单元（结点/线/分组块）被添加时, 触发的方法, 返回FALSE可阻止添加事件的发生
|
|
|
//格式function(id, type, json)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,json即addNode,addLine或addArea方法的第二个传参json.
|
|
|
onItemAdd: null,
|
|
|
|
|
|
//当操作某个单元（结点/线/分组块）被删除时, 触发的方法, 返回FALSE可阻止删除事件的发生
|
|
|
//格式function(id, type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值
|
|
|
onItemDel: null,
|
|
|
|
|
|
//当操作某个单元（结点/分组块）被移动时, 触发的方法, 返回FALSE可阻止移动事件的发生
|
|
|
//格式function(id, type, left, top)：id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值, 线line不支持移动,left是新的左边距坐标, top是新的顶边距坐标
|
|
|
onItemMove: null,
|
|
|
|
|
|
//当操作某个单元（结点/线/分组块）被重命名时, 触发的方法, 返回FALSE可阻止重命名事件的发生
|
|
|
//格式function(id, name, type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,name是新的名称
|
|
|
onItemRename: null,
|
|
|
|
|
|
//当操作某个单元（结点/线）被由不选中变成选中时, 触发的方法, 返回FALSE可阻止选中事件的发生
|
|
|
//格式function(id, type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中
|
|
|
onItemFocus: null,
|
|
|
|
|
|
//当操作某个单元（结点/线）被由选中变成不选中时, 触发的方法, 返回FALSE可阻止取消选中事件的发生
|
|
|
//格式function(id, type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被取消选中
|
|
|
onItemBlur: null,
|
|
|
|
|
|
//当操作某个单元（结点/分组块）被重定义大小或造型时, 触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, type, width, height)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,width是新的宽度,height是新的高度
|
|
|
onItemResize: null,
|
|
|
|
|
|
//当移动某条折线中段的位置, 触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, M)：id是单元的唯一标识ID,M是中段的新X(或Y)的坐标
|
|
|
onLineMove: null,
|
|
|
|
|
|
//当变换某条连接线的类型, 触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, type)：id是单元的唯一标识ID,type是连接线的新类型,"sl":直线,"lr":中段可左右移动的折线,"tb":中段可上下移动的折线
|
|
|
onLineSetType: null,
|
|
|
//当用重色标注某个结点/转换线时触发的方法, 返回FALSE可阻止重定大小/造型事件的发生
|
|
|
//格式function(id, type, mark)：id是单元的唯一标识ID,type是单元类型（"node"结点,"line"转换线）, mark为布尔值,表示是要标注TRUE还是取消标注FALSE
|
|
|
|
|
|
onItemMark: null,
|
|
|
};
|
|
|
var options = $.extend({}, defaultOption, property);
|
|
|
return new GooFlow(this, options);
|
|
|
}
|
|
|
createGooFlow: function (property) {
|
|
|
/*
|
|
|
* Todo: 初始化配置参数
|
|
|
* Author: LE
|
|
|
* Date: 2017/2/20
|
|
|
* time: 9:59
|
|
|
* */
|
|
|
var defaultOption = {
|
|
|
// ******************************************************* UI相关
|
|
|
id: '',
|
|
|
MainContener: $('body')[0],
|
|
|
width: '100%',
|
|
|
height: '100%',
|
|
|
|
|
|
// ******************************************************* 工具栏
|
|
|
haveTool: true,
|
|
|
toolBtns: ["save", "undo", "redo"],
|
|
|
toolBtnRemarks: ['保存', '撤销', '重做'],
|
|
|
|
|
|
// ******************************************************* 流程图工具
|
|
|
flowChart: true,
|
|
|
flowBtns: ["state", "complex", "join", "fork"],
|
|
|
useOperStack: true, // 是否启用回滚栈, 如否, 头部工具栏的回滚和重做按钮都将失效
|
|
|
editable: true, // 是否可编辑
|
|
|
|
|
|
};
|
|
|
var options = $.extend({}, defaultOption, property);
|
|
|
return new GooFlow(this, options);
|
|
|
}
|
|
|
});
|
lee