98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
export default function(G6) {
|
|
G6.registerBehavior('dragPoint', {
|
|
getDefaultCfg() {
|
|
return {
|
|
updateEdge: true,
|
|
delegate: true,
|
|
delegateStyle: {},
|
|
dragEdge: false,
|
|
};
|
|
},
|
|
getEvents() {
|
|
return {
|
|
'controlPoint:dragstart': 'onDragStart',
|
|
'controlPoint:drag': 'onDrag',
|
|
'controlPoint:dragend': 'onDragEnd',
|
|
};
|
|
},
|
|
onDragStart(e) {
|
|
const node = e.target.getParent().getParent().get('item');
|
|
const anchorIndex = e.item.get('index');
|
|
this.target = e.item;
|
|
this.origin = {
|
|
x: e.x,
|
|
y: e.y,
|
|
sourceNode: node,
|
|
sourceAnchor: anchorIndex,
|
|
};
|
|
this.graph.set('edgeDragging', true);
|
|
},
|
|
onDrag(e) {
|
|
if (!this.origin) {
|
|
return;
|
|
}
|
|
|
|
const node = e.target.getParent().getParent().get('item');
|
|
const anchorIndex = e.item.get('index');
|
|
|
|
const model = node.getModel();
|
|
const currentWidth = model.size[0];
|
|
const currentHeight = model.size[1];
|
|
const addWidth = e.x - this.origin.x;
|
|
const addHeight = e.y - this.origin.y;
|
|
let width = currentWidth;
|
|
let height = currentHeight;
|
|
// 0,0 // 两个都是负的变大
|
|
// 1,0 // 一正 一负 变大
|
|
// 1,1 // 两个都是负变大
|
|
// 0,1 // 一负 一正 变大
|
|
const pointIndex = this.origin.sourceAnchor;
|
|
if (pointIndex === 0) {
|
|
width = currentWidth - addWidth;
|
|
height = currentHeight - addHeight;
|
|
} else if (pointIndex === 1) {
|
|
height = currentHeight - addHeight;
|
|
} else if (pointIndex === 2) {
|
|
width = currentWidth + addWidth;
|
|
height = currentHeight - addHeight;
|
|
} else if (pointIndex === 3) {
|
|
width = currentWidth + addWidth;
|
|
} else if (pointIndex === 4) {
|
|
width = currentWidth + addWidth;
|
|
height = currentHeight + addHeight;
|
|
} else if (pointIndex === 5) {
|
|
height = currentHeight + addHeight;
|
|
} else if (pointIndex === 6) {
|
|
width = currentWidth - addWidth;
|
|
height = currentHeight + addHeight;
|
|
} else if (pointIndex === 7) {
|
|
width = currentWidth - addWidth;
|
|
}
|
|
const group = node.getContainer();
|
|
// 移动过程中的控制点全部隐藏。
|
|
group.controlPointShapes.forEach(a => a.hide());
|
|
|
|
this.graph.updateItem(node, { size: [width, height], });
|
|
this.origin = {
|
|
x: e.x,
|
|
y: e.y,
|
|
sourceNode: node,
|
|
sourceAnchor: anchorIndex,
|
|
};
|
|
|
|
},
|
|
onDragEnd(e) {
|
|
if (!this.origin) {
|
|
return;
|
|
}
|
|
const node = e.target.getParent().getParent().get('item');
|
|
this.target = null;
|
|
this.origin = null;
|
|
const group = node.getContainer();
|
|
group.clearControlPoints(group);
|
|
group.showControlPoints(group);
|
|
this.graph.set('edgeDragging', false);
|
|
},
|
|
});
|
|
}
|