//Data structure example
[
{
"id": "416",
"name": "Initial State",
"isStart": 1,
"left": 240,
"top": 30,
"nextNodeIds": "417",
"preNodeIds": "",
"type": "status",
"description": "",
"userList": [],
"roleList": [],
"selectedEditFiled": [],
"selectedMustFillFiled": []
},
{
"id": "417",
"name": "state",
"isStart": 0,
"left": 240,
"top": 190,
"nextNodeIds": "418,175150928",
"preNodeIds": "416",
"type": "status",
"description": "",
"userList": [],
"roleList": [],
"selectedEditFiled": [],
"selectedMustFillFiled": []
},
{
"id": "418",
"name": "Action 1",
"isStart": 0,
"left": 560,
"top": 200,
"nextNodeIds": "",
"preNodeIds": "417",
"type": "action",
"actionType": 1,
"actionData": {
"addDataFields": [],
"addDataTableFields": [],
"addType": 0,
"editDataFields": [],
"email": "hellow:\n\n do you remenber me?",
"relation": [],
"roleList": [],
"toFormId": 0,
"userList": [
"1"
]
}
},
{
"id": "175150928",
"type": "approve",
"name": "Approval",
"isStart": 0,
"passStatusId": "175155995",
"denyStatusId": "417",
"userList": [],
"roleList": [],
"left": 240,
"top": 380,
"preNodeIds": "417",
"nextNodeIds": "175155995",
"currentPassConn": "9c79455d-7d39-4e1d-8834-0f55b1032b39",
"currentDenyConn": "ebe7c011-179d-48c8-8179-8166ee2957e8"
},
{
"id": "175155995",
"type": "status",
"name": "Finish",
"isStart": 0,
"description": "",
"selectedMustFillFiled": [],
"selectedEditFiled": [],
"userList": [],
"roleList": [],
"left": 240,
"top": 600,
"preNodeIds": "175150928"
}
]
//Initialization part
initFlowFrame(){
let that = this;
that.graphIns = new X6.Graph({
container: document.getElementById('diagram-container'),
width: 3000,
height: 2000,
scroller: {
enabled: true,
pannable: true,
},
mousewheel: {
enabled: true,
//modifiers: ['ctrl'],
},
background: {
color: '#eaecf3', // Set the canvas background color
},
grid: {
size: 10, // Mesh size 10px
visible: true, // Render the grid background
},
minimap: {
enabled: true,
container: document.getElementById('min-map'),
width: 200,
height: 150,
scalable: false,
}
});
that.graphIns.lockScroller();
that.graphIns.on('node:click',({e,x,y,node,view})=>{
let id = node.id;
let type = node.data.type;
that.clickNode(id,type);
that.showNodeBox(type);
});
that.graphIns.on('node:mouseenter', ({ node }) => {
let id = node.id;
let isStart = node.data.isStart;
let tools = [{
name: 'button',
args: {
markup: [
{
tagName: 'circle',
selector: 'button',
attrs: {
r: 8,
stroke: '#87cefa',
'stroke-width': 1,
fill: 'white',
cursor: 'pointer',
},
},
{
tagName: 'line',
selector: 'line-one',
attrs: {
stroke: '#87cefa',
'stroke-width':2,
x1: 0,
y1: 5,
x2: 0,
y2: -5,
},
},
{
tagName: 'line',
selector: 'line-two',
attrs: {
stroke: '#87cefa',
'stroke-width':2,
x1: 5,
y1: 0,
x2: -5,
y2: 0,
},
}
],
x: '50%',
y: '100%',
offset: { x: 0, y: 0 },
onClick({ view }) {
let id = view.cell.id;
let posX = 0, posY = 0;
let event = window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
that.clickAddNodeBtn(id,posX,posY);
},
},
}];
if(isStart == 0){
tools.push({
name: 'button',
args: {
markup: [
{
tagName: 'circle',
selector: 'button',
attrs: {
r: 8,
stroke: '#ff0000',
'stroke-width': 1,
fill: 'white',
cursor: 'pointer',
},
},
{
tagName: 'line',
selector: 'line-one',
attrs: {
stroke: '#ff0000',
'stroke-width':2,
x1: -3,
y1: -3,
x2: 3,
y2: 3,
},
},
{
tagName: 'line',
selector: 'line-tow',
attrs: {
stroke: '#ff0000',
'stroke-width':2,
x1: -3,
y1: 3,
x2: 3,
y2: -3,
},
}
],
x: '100%',
y: '100%',
offset: { x: -1, y: -50 },
onClick({ view }) {
//let id = ;
//(view);
popup.warning('hint','Are you sure you want to delete the node? ',function(){
that.deleteFlowNode(id);
});
},
},
});
}
node.addTools(tools);
})
//Mobile node
that.graphIns.on('node:moved',({e,x,y,node,view})=>{
let id = node.id;
let xx = node.position().x;
let yy = node.position().y;
let index = that.getFlowIndex(id);
that.flow[index]['left'] = xx;
that.flow[index]['top'] = yy;
});
// Delete the button when the mouse is removed
that.graphIns.on('node:mouseleave', ({ node }) => {
node.removeTools()
})
//Slide the mouse out to add node list
$(".step3").on("mouseleave", ".add-node-list",function(){
$(this).css('display','none');
})
//Add node list click event
$(".step3").on("click", ".add-node-list li",function () {
let self = $(this);
let panel = self.parent();
panel.css('display','none');
let currentNodeId = panel.attr('current-node-id');
let type = self.attr('data-type');
let uuid = that.$parent.createId();
let nodeFrm = that.graphIns.getCellById(currentNodeId);
let x = nodeFrm.position().x;
let y = nodeFrm.position().y + 120;
if(type == 'insert_node'){
//Create a list
that.currentInsertNodePrentId = currentNodeId;
that.currentInsertNodeType = '';
that.createInsertNodeList(currentNodeId);
$('.insert-node-panel').addClass('md-show');
$('.insert-node-panel').css('z-index',9999999);
return ;
}
let innerHtml = that.node[type];
let res = that.createFlowNode(0,'create',type,uuid,innerHtml,y,x,currentNodeId,true);
if(res){
that.createFlowNodeConnection(currentNodeId,uuid,true);
}
});
//Click to insert new node panel to select type option
$('.insert-node-panel').on('click','.panel-l .node-list li',function(){
that.clickTypeListHtml(this);
});
},
//Create process node
createFlowNode(isStart,lifeCycle,type,uuid,innerHtml,top,left,currentNodeId,verifyFlag){
let that = this;
if(verifyFlag){
let verifyRes = that.createFlowNodeVerify(type,currentNodeId,'');
if(verifyRes !== true){
popup.fail('hint',verifyRes);
return false;
}
}
that.graphIns.addNode({
id: uuid,
shape: 'rect',
x: left,
y: top,
width: 160,
height: 50,
attrs: {
body: {
fill: '#f1f1f2',
stroke: that.nodeColor[type],
strokeWidth: 1,
fillOpacity: 0.8,
strokeLinejoin: "round",
//strokeOpacity: 0.5
},
label: {
text: innerHtml,
fill: '#000000',
},
},
data:{
isStart: isStart,
type:type,
}
});
if(lifeCycle == 'create'){
let pushFlow = {};
if(type == 'status'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'description':'',
'selectedMustFillFiled':[],
'selectedEditFiled':[],
'userList': [],
'roleList': [],
'left': left,
'top': top,
};
}else if(type == 'branch'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'condition': [],
'left': left,
'top': top,
};
}else if(type == 'approve'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'passStatusId': '',
'denyStatusId': '',
'userList': [],
'roleList': [],
'left': left,
'top': top,
};
}else if(type == 'action'){
pushFlow = {
'id': uuid,
'type': type,
'name': innerHtml,
'isStart': isStart,
'actionType': 0,
'actionData': {},
'left': left,
'top': top,
};
}
that.flow.push(pushFlow);
}
return true;
},
//Create a connection
createFlowEdge(type,sourceId,targetId){
let that = this;
let obj;
if(type == 'common'){
obj = that.graphIns.addEdge({
source: {
cell: sourceId,
anchor: {
name: 'center', //orth nodeCenter
args: {
dx: 10,
},
},
},
target: {
cell: targetId,
anchor: 'orth',
},
connector: 'rounded', //normal smooth rounded jumpover
router: 'manhattan',//normal orth oneSide manhattan metro er
attrs: that.lineStyle(),
data:{
type:'common',
}
});
}else if(type == 'pass'){
obj = that.graphIns.addEdge({
shape: 'edge',
source: sourceId,
target: targetId,
connector: 'normal', //normal smooth rounded jumpover
router: {
name: 'normal', //normal orth oneSide manhattan metro er
},
attrs: that.lineStyle('pass'),
data:{
type:'pass'
}
});
}else if(type == 'deny'){
obj = that.graphIns.addEdge({
shape: 'edge',
source: sourceId,
target: targetId,
connector: 'normal', //normal smooth rounded jumpover
router: {
name: 'normal',
},
attrs: that.lineStyle('deny'),
data:{
type:'deny'
}
});
}
return obj;
},
//Line Style
lineStyle(direction){
let res = {
line: {
stroke: '#909ed5',
offset: -10,
targetMarker: {
name: 'path',
fill: '#909ed5', // Use custom fill color
stroke: '#909ed5', // Use custom border colors
strokeWidth: 1,
d: 'M 5 -3 0 0 5 3 Z',
},
},
};
if(direction == 'pass'){
res.line.stroke = '#07c90b';
res.line.targetMarker.fill = '#07c90b';
res.line.targetMarker.stroke = '#07c90b';
res.line.strokeDasharray="10 5";
}else if(direction == 'deny'){
res.line.stroke = '#da0000';
res.line.targetMarker.fill = '#da0000';
res.line.targetMarker.stroke = '#da0000';
res.line.strokeDasharray="10 5";
}
return res;
},
