134 lines
5.4 KiB
JavaScript
134 lines
5.4 KiB
JavaScript
$(function(){
|
|
if (methodId != 'process.subprocess') { // 如果当前打开的模型不是端到端总图 那么整个js也没有执行的必要
|
|
return;
|
|
}
|
|
// 1. 子流程展开 事件：获取当前子流程所代表的模型文件
|
|
(function (Model, ruuid, sid) {
|
|
const subProcess = new SubProcess(Model, ruuid, sid);
|
|
|
|
subProcess.init();
|
|
|
|
window.subProcess = subProcess;
|
|
|
|
// 连线框 鼠标指针样式设置 防止因为连线z-index层级较高 会导致节点展开图标点击不到
|
|
$('.shape_box.linker_box').css({
|
|
'pointer-events': 'none'
|
|
});
|
|
|
|
|
|
})(Model, ruuid, sid);
|
|
});
|
|
|
|
class SubProcess {
|
|
// 构造函数
|
|
constructor(Model, ruuid, sid){
|
|
this.Model = Model;
|
|
this.repositoryId = ruuid;
|
|
this.sid = sid;
|
|
}
|
|
|
|
init(){
|
|
this.shapeIconRender();
|
|
this.handleScopeShapeEvent();
|
|
}
|
|
|
|
// 图形图标渲染 并绑定节点展开或者关闭事件
|
|
shapeIconRender(){
|
|
let elements = this.Model.define.elements;
|
|
for (let shapeId in elements) {
|
|
let shape = elements[shapeId];
|
|
if (shape.name == 'linker') continue; // 当前元素为连线的话 直接略过
|
|
if (shape.name == 'scopeLimitation' || shape.name == 'subProcess'){ // 只有子流程或者范围选择框才有对应的图标渲染
|
|
if (shape.name == 'subProcess') { // 当前元素为子流程节点 渲染展开图标 并绑定展开事件
|
|
let expandIcon = "<span id='icon_"+shapeId+"' class='iconfont icon-zhankaishousuo' style='position: absolute;cursor: pointer;'></span>";
|
|
$('#'+shapeId).append(expandIcon);
|
|
$('#icon_'+shapeId).on('click', '', {shapeId: shapeId, Model: this.Model, repositoryId: this.repositoryId, sid: this.sid}, this.shapeExpand);
|
|
}else { // 当前元素为虚线范围限制框的话 渲染关闭图标 并绑定关闭事件
|
|
let closeIcon = "<span id='icon_"+shapeId+"' class='iconfont icon-quanpingshouqi' style='position: absolute;cursor: pointer;'></span>";
|
|
$('#'+shapeId).append(closeIcon);
|
|
$('#icon_'+shapeId).on('click', '', {shapeId: shapeId, Model: this.Model, repositoryId: this.repositoryId, sid: this.sid}, this.shapeClose);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 子流程节点拖拽到画布后 渲染展开按钮
|
|
shapeOpenIconRender(ele){
|
|
if (ele.name != 'subProcess'){
|
|
return;
|
|
}
|
|
let shapeId = ele.id;
|
|
let expandIcon = "<span id='icon_"+shapeId+"' class='iconfont icon-zhankaishousuo' style='position: absolute;cursor: pointer;'></span>";
|
|
$('#'+shapeId).append(expandIcon);
|
|
$('#icon_'+shapeId).on('click', '', {shapeId: shapeId, Model: this.Model, repositoryId: this.repositoryId, sid: this.sid}, this.shapeExpand);
|
|
}
|
|
|
|
// 范围选择框的事件绑定处理
|
|
handleScopeShapeEvent(){
|
|
let c = $("#designer_canvas");
|
|
c.off("mousemove").on("mousemove",function (a) {
|
|
let b = Utils.getRelativePos(a.pageX, a.pageY, c); // 实时获取鼠标移动的坐标
|
|
let j = Utils.getShapeByPosition(b.x, b.y); // 根据鼠标当前移动的位置获取当前图形 如果有的话
|
|
if (j != null && j.shape.name == 'scopeLimitation') { // 当前鼠标所在位置为范围选择框范围内
|
|
console.log('当前图形 ', j.shape.name);
|
|
let range = {
|
|
x: j.shape.props.x,
|
|
y: j.shape.props.y,
|
|
w: j.shape.props.w,
|
|
h: j.shape.props.h
|
|
};
|
|
let e = Utils.getShapesByRange(range);
|
|
c.off("mousedown").on("mousedown", function (f) {
|
|
Utils.unselect();
|
|
Utils.selectShape(e);
|
|
});
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
// 节点展开事件
|
|
shapeExpand(event){
|
|
let param = event.data;
|
|
// alert('节点展开事件 ' + param.Model.define.elements[event.data.shapeId].text);
|
|
// 1、同时只能支持一个子流程节点展开
|
|
let elements = param.Model.define.elements;
|
|
for (let key in elements) {
|
|
let shape = elements[key];
|
|
if (shape.name == 'linker') continue;
|
|
if (shape.name == 'scopeLimitation') {
|
|
$.simpleAlert("同一时间仅支持一个子流程节点展开", "warning");
|
|
return;
|
|
}
|
|
}
|
|
// 2、传递当前模型文件ID、子流程节点ID
|
|
awsui.ajax.request({
|
|
url: './jd',
|
|
method: 'POST',
|
|
data: {
|
|
cmd: 'com.actionsoft.apps.coe.method.process.subprocess.shape_expand',
|
|
sid: param.sid,
|
|
repositoryId: param.repositoryId,
|
|
shapeId: param.shapeId
|
|
},
|
|
ok: function(r){
|
|
// console.log(JSON.stringify(r.data));
|
|
definition = JSON.stringify(r.data);
|
|
Designer.open(definition); // 节点重新渲染
|
|
// 针对范围标识框渲染 节点关闭按钮
|
|
window.subProcess.shapeIconRender();
|
|
},
|
|
err: function(r){
|
|
$.simpleAlert(r.msg);
|
|
}
|
|
});
|
|
// 3、刷新当前画布
|
|
}
|
|
|
|
// 节点关闭事件
|
|
shapeClose(event){
|
|
console.log('sss')
|
|
}
|
|
}
|
|
|