static.org.tinygroup.flowprocess.js.flowprocess.js Maven / Gradle / Ivy
The newest version!
(function ($) {
var defaults = {
fnClick: function () {
},
fnDbClick: function () {
},
//这是连接线路的绘画样式
connectorPaintStyle: {
lineWidth: 2,
strokeStyle: '#49afcd',
joinstyle: 'round'
},
disableConnectorPaintStyle: {
lineWidth: 2,
strokeStyle: '#999',
joinstyle: 'round',
dashstyle: '4 1'
},
itemSize: {
top: 10,
width: 150,
height: 120
}
};
/*defaults end*/
var initEndPoints = function (_dom) {
_dom.find('.process-flag').each(function (i, e) {
var p = $(e).parent();
jsPlumb.makeSource($(e), {
parent: p,
anchor: 'Continuous',
endpoint: ['Dot', {radius: 1}],
connector: ['Flowchart', {stub: [5, 5]}],
connectorStyle: p.attr('disabled') === 'disabled' ? defaults.disableConnectorPaintStyle : defaults.connectorPaintStyle,
dragOptions: {},
maxConnections: -1
});
});
};
var clear = function () {
try {
jsPlumb.detachEveryConnection();
jsPlumb.deleteEveryEndpoint();
jsPlumb.repaintEverything();
return true;
} catch (e) {
return false;
}
};
var initFlow = function (_tempId) {
var _dom = $('');
var processData = [];
$('.popover').remove();
_tempId.children('.process-step').each(function () {
var _this = $(this);
processData.push({'id': _this.attr('process_id'), 'pid': _this.attr('process_pid')});
}).on('mouseover', function () {
$(this).popover('show');
}).on('mouseout', function () {
$(this).popover('hide');
});
var level_count = 0;
var data_len = processData.length;
var pids_arr = [];
var groupData = [];
var node_arr = [];
for (var i = 0; i < data_len; i++) {
if (processData[i]['pid'] === '' || processData[i]['pid'] === null) {
processData[i]['pid'] = 0;
}
if (!groupData[processData[i]['pid']]) {
groupData[processData[i]['pid']] = [];
}
groupData[processData[i]['pid']].push(processData[i]);
pids_arr.push(processData[i]['pid']);
node_arr[processData[i]['id']] = processData[i]['pid'];
}
function getLevel(id) {
if (node_arr[id]) {
return getLevel(node_arr[id]) + 1;
} else {
return 1;
}
}
var max_level = 0;
for (var i = 0; i < data_len; i++) {
var c = getLevel(processData[i]['id']);
max_level = Math.max(max_level, c);
if ($.inArray(processData[i]['id'], pids_arr) == -1) {
level_count++;
}
}
_tempId.css({
'width': defaults.itemSize.width * level_count + 180 + 'px',
'height': max_level * defaults.itemSize.height + 50 + 'px',
'margin': '0 auto'
});
defaults.itemSize.left = defaults.itemSize.width * (level_count - 1) / 2;
var setPosition = function (pid, top_level, left_level) {
if (!groupData[pid]) {
return [];
}
var list = groupData[pid];
var len = list.length;
var left = left_level - list.length / 2;
var top = top_level;
var ileft = '';
var itop = '';
var subIds = [];
var thisw = defaults.itemSize.width * (len - 1) / 2;
for (var i = 0; i < len; i++) {
ileft = left_level - thisw + i * defaults.itemSize.width;
itop = top_level + defaults.itemSize.height;
groupData[pid][i]['left'] = ileft;
groupData[pid][i]['top'] = itop - defaults.itemSize.height;
subIds.push(list[i]['id']);
var sub_idarr = setPosition(list[i]['id'], itop, ileft);
groupData[pid][i]['process_to'] = sub_idarr.join(',');
}
return subIds;
};
var setChildrenNode = function () {
var data = [];
for (i in groupData) {
for (var j = 0, jl = groupData[i].length; j < jl; j++) {
data.push(groupData[i][j]);
}
}
for (var i = 0; i < data_len; i++) {
var id = data[i]['id'];
$('#process-step-' + id).attr({
'process_to': data[i]['process_to']
}).css({
'left': data[i]['left'] + 'px',
'top': data[i]['top'] + 'px',
'width': defaults.itemSize.width - 30 + 'px'
});
}
};
setPosition(0, defaults.itemSize.top, defaults.itemSize.left);
setChildrenNode();
};
$.fn.flowprocess = function (options) {
var _canvas = $(this);
//右键步骤的步骤号
options = options || {};
/*配置*/
$.each(options, function (i, val) {
if (typeof val == 'object' && defaults[i])
$.extend(defaults[i], val);
else
defaults[i] = val;
});
clear();
initFlow(_canvas.find('.tiny_flow_process_info:first'));
jsPlumb.importDefaults({
DragOptions: {cursor: 'pointer'},
EndpointStyle: {fillStyle: '#225588'},
Endpoint: ['Dot', {radius: 1}],
ConnectionOverlays: [
['Arrow', {location: 1}],
['Label', {
location: 0.1,
id: 'label',
cssClass: 'aLabel'
}]
],
Anchor: 'Continuous',
ConnectorZIndex: 5,
HoverPaintStyle: defaults.connectorHoverStyle
});
if ($.browser.msie && $.browser.version < '9.0') { //ie9以下，用VML画图
jsPlumb.setRenderMode(jsPlumb.VML);
} else { //其他浏览器用SVG
jsPlumb.setRenderMode(jsPlumb.SVG);
}
/*var timeout = null;
//点击或双击事件,这里进行了一个单击事件延迟，因为同时绑定了双击事件
_canvas.find(".process-step").on('click', function () {
var obj = this;
_canvas.find('.tiny_flow_active_id').val($(this).attr("process_id")),
clearTimeout(timeout);
timeout = setTimeout(defaults.fnClick, 300);
}).on('dblclick', function () {
clearTimeout(timeout);
defaults.fnDbClick();
}).each(function (index) {
var _this = $(this);
var id = _this.attr("process_id");
_this.mousedown(function (e) {
if (e.which == 3) { //右键绑定
_this.contextMenu("process-menu-" + id);
}
});
});*/
initEndPoints(_canvas);
//reset start
var _canvas_design = function () {
//连接关联的步骤
_canvas.find('.process-step').each(function (i) {
var sourceId = $(this).attr('process_id');
var prcsto = $(this).attr('process_to');
if (!prcsto || !sourceId) {
return true;
}
var toArr = prcsto.split(',');
$.each(toArr, function (j, targetId) {
if (targetId != '' && targetId != 0) {
if ($('#process-step-' + prcsto).length > 0) {
jsPlumb.connect({
source: 'process-step-' + sourceId,
target: 'process-step-' + targetId
});
}
}
});
});
};//_canvas_design end reset
_canvas_design();
return {
getActiveId: function () {
return _canvas.find('.tiny_flow_active_id').val();
},
clear: function () {
try {
jsPlumb.detachEveryConnection();
jsPlumb.deleteEveryEndpoint();
jsPlumb.repaintEverything();
return true;
} catch (e) {
return false;
}
},
refresh: function () {
try {
this.clear();
_canvas_design();
return true;
} catch (e) {
return false;
}
}
};
};//$.fn
})(jQuery);© 2015 - 2025 Weber Informatics LLC | Privacy Policy