152 lines
4.6 KiB
JavaScript
152 lines
4.6 KiB
JavaScript
/* eslint-disable */
|
|
import editorStyle from "../util/defaultStyle";
|
|
import { getShapeName } from '../util/clazz';
|
|
|
|
export default function(G6){
|
|
G6.registerBehavior('dragPanelItemAddNode', {
|
|
getDefaultCfg() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
getEvents() {
|
|
return {
|
|
'canvas:mousemove': 'onMouseMove',
|
|
'canvas:mouseup': 'onMouseUp',
|
|
'canvas:mouseleave': 'onMouseLeave',
|
|
}
|
|
},
|
|
onMouseMove(e){
|
|
if(this.graph.get('addNodeDragging')){
|
|
let delegateShape = this.graph.get('addDelegateShape');
|
|
const addModel = this.graph.get('addModel');
|
|
const width = parseInt(addModel.size.split('*')[0]);
|
|
const height = parseInt(addModel.size.split('*')[1]);
|
|
const point = this.graph.getPointByClient(e.x,e.y);
|
|
const x = point.x;
|
|
const y = point.y;
|
|
if (!delegateShape) {
|
|
const parent = this.graph.get('group');
|
|
delegateShape = parent.addShape('rect', {
|
|
attrs: {
|
|
width,
|
|
height,
|
|
x: x - width / 2,
|
|
y: y - height / 2,
|
|
...editorStyle.nodeDelegationStyle,
|
|
}
|
|
});
|
|
delegateShape.set('capture', false);
|
|
this.graph.set('addDelegateShape', delegateShape);
|
|
}
|
|
delegateShape.attr({ x: x - width / 2, y: y - height / 2 });
|
|
this.graph.paint();
|
|
this.graph.emit('afternodedrag',delegateShape);
|
|
}
|
|
},
|
|
onMouseUp(e){
|
|
if (this.graph.get('addNodeDragging')) {
|
|
const p = this.graph.getPointByClient(e.clientX, e.clientY);
|
|
const subProcessNode = this.graph.find('node', (node) => {
|
|
if (node.get('model')) {
|
|
const clazz = node.get('model').clazz;
|
|
if (clazz === 'subProcess') {
|
|
const bbox = node.getBBox();
|
|
return p.x > bbox.minX && bbox.maxX > p.x
|
|
&& p.y > bbox.minY && bbox.maxY > p.y;
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
if (subProcessNode) {
|
|
if (p.x > 0 && p.y > 0) {
|
|
this._addNodeBySubProcess(p, subProcessNode);
|
|
}
|
|
} else {
|
|
if (p.x > 0 && p.y > 0) {
|
|
this._addNode(p);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_addNodeBySubProcess(p, node) {
|
|
if (this.graph.get('addNodeDragging')) {
|
|
const addModel = this.graph.get('addModel');
|
|
const { clazz = 'userTask' } = addModel;
|
|
addModel.shape = getShapeName(clazz);
|
|
addModel.size = addModel.size.split("*");
|
|
const timestamp = new Date().getTime();
|
|
const id = clazz + timestamp;
|
|
const bbox = node.getBBox();
|
|
const x = p.x - bbox.x - bbox.width / 2;
|
|
const y = p.y - bbox.y - bbox.height / 2;
|
|
const nodeCfg = {
|
|
...addModel,
|
|
x,
|
|
y,
|
|
id
|
|
};
|
|
const group = node.getContainer();
|
|
const resultModel = group.addNodeModel(node, nodeCfg);
|
|
if (this.graph.executeCommand) {
|
|
this.graph.executeCommand('update', {
|
|
itemId: node.get('id'),
|
|
updateModel: resultModel,
|
|
});
|
|
} else {
|
|
this.graph.updateItem(node, resultModel);
|
|
}
|
|
}
|
|
},
|
|
onMouseLeave(e){
|
|
if (this.graph.get('addNodeDragging')) {
|
|
this._clearDelegate();
|
|
this.graph.emit('afternodedragend');
|
|
}
|
|
},
|
|
_clearDelegate(){
|
|
const delegateShape = this.graph.get('addDelegateShape');
|
|
if (delegateShape) {
|
|
delegateShape.remove();
|
|
this.graph.set('addDelegateShape', null);
|
|
this.graph.paint();
|
|
}
|
|
this.graph.emit('afternodedragend');
|
|
},
|
|
_addNode(p){
|
|
if (this.graph.get('addNodeDragging')) {
|
|
const addModel = this.graph.get('addModel');
|
|
const { clazz = 'userTask' } = addModel;
|
|
//type、shape属性同时存在即兼容之前版本的数据，又兼容g6的升级
|
|
addModel.type = getShapeName(clazz);
|
|
addModel.shape = getShapeName(clazz);
|
|
addModel.hideIcon = false;
|
|
const timestamp = new Date().getTime();
|
|
const id = clazz + timestamp;
|
|
const x = p.x;
|
|
const y = p.y;
|
|
if (this.graph.executeCommand) {
|
|
this.graph.executeCommand('add', {
|
|
type: 'node',
|
|
addModel: {
|
|
...addModel,
|
|
x: x,
|
|
y: y,
|
|
id: id,
|
|
},
|
|
});
|
|
} else {
|
|
this.graph.add('node', {
|
|
...addModel,
|
|
x: x,
|
|
y: y,
|
|
id: id,
|
|
});
|
|
}
|
|
this._clearDelegate();
|
|
}
|
|
}
|
|
});
|
|
}
|