feat(connect): support point to point connection

Closes #578
This commit is contained in:
Nico Rehwaldt 2016-06-22 14:38:44 +02:00
parent 4fa6827f8c
commit db53608b3d
3 changed files with 133 additions and 108 deletions

View File

@ -24,18 +24,21 @@ inherits(BpmnLayouter, BaseLayouter);
module.exports = BpmnLayouter; module.exports = BpmnLayouter;
BpmnLayouter.prototype.layoutConnection = function(connection, layoutHints) { BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
hints = hints || {};
var source = connection.source, var source = connection.source,
target = connection.target, target = connection.target,
waypoints = connection.waypoints, waypoints = connection.waypoints,
start, start = hints.connectionStart,
end; end = hints.connectionEnd;
var manhattanOptions, var manhattanOptions,
updatedWaypoints; updatedWaypoints;
start = getConnectionDocking(waypoints, 0, source); start = getConnectionDocking(waypoints, 0, source, start);
end = getConnectionDocking(waypoints, waypoints && waypoints.length - 1, target); end = getConnectionDocking(waypoints, waypoints && waypoints.length - 1, target, end);
// TODO(nikku): support vertical modeling // TODO(nikku): support vertical modeling
// and invert preferredLayouts accordingly // and invert preferredLayouts accordingly
@ -141,7 +144,7 @@ BpmnLayouter.prototype.layoutConnection = function(connection, layoutHints) {
if (manhattanOptions) { if (manhattanOptions) {
manhattanOptions = assign(manhattanOptions, layoutHints); manhattanOptions = assign(manhattanOptions, hints);
updatedWaypoints = updatedWaypoints =
ManhattanLayout.repairConnection( ManhattanLayout.repairConnection(
@ -164,10 +167,10 @@ function getAttachOrientation(attachedElement) {
} }
function getConnectionDocking(waypoints, idx, shape) { function getConnectionDocking(waypoints, idx, shape, defaultPoint) {
var point = waypoints && waypoints[idx]; var point = waypoints && waypoints[idx];
return point ? (point.original || point) : getMid(shape); return point ? (point.original || point) : (defaultPoint || getMid(shape));
} }
function isCompensationAssociation(connection) { function isCompensationAssociation(connection) {

View File

@ -57,7 +57,7 @@ Modeling.prototype.updateLabel = function(element, newLabel) {
}; };
Modeling.prototype.connect = function(source, target, attrs) { Modeling.prototype.connect = function(source, target, attrs, hints) {
var bpmnRules = this._bpmnRules; var bpmnRules = this._bpmnRules;
@ -65,7 +65,7 @@ Modeling.prototype.connect = function(source, target, attrs) {
attrs = bpmnRules.canConnect(source, target) || { type: 'bpmn:Association' }; attrs = bpmnRules.canConnect(source, target) || { type: 'bpmn:Association' };
} }
return this.createConnection(source, target, attrs, source.parent); return this.createConnection(source, target, attrs, source.parent, hints);
}; };

View File

@ -18,132 +18,154 @@ describe('features/modeling - create connection', function() {
beforeEach(bootstrapModeler(diagramXML, { modules: testModules })); beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
describe('connection handling', function() { it('should connect', inject(function(elementRegistry, modeling, bpmnFactory) {
it('should execute', inject(function(elementRegistry, modeling, bpmnFactory) { // given
var taskShape = elementRegistry.get('Task_1'),
task = taskShape.businessObject,
gatewayShape = elementRegistry.get('Gateway_1'),
gateway = gatewayShape.businessObject;
// given // when
var taskShape = elementRegistry.get('Task_1'), var sequenceFlowConnection = modeling.createConnection(taskShape, gatewayShape, {
task = taskShape.businessObject, type: 'bpmn:SequenceFlow'
gatewayShape = elementRegistry.get('Gateway_1'), }, taskShape.parent);
gateway = gatewayShape.businessObject;
var sequenceFlow = sequenceFlowConnection.businessObject;
// then
expect(sequenceFlowConnection).to.exist;
expect(sequenceFlow).to.exist;
expect(sequenceFlow.sourceRef).to.eql(task);
expect(sequenceFlow.targetRef).to.eql(gateway);
expect(task.outgoing).to.include(sequenceFlow);
expect(gateway.incoming).to.include(sequenceFlow);
expect(sequenceFlow.di.$parent).to.eql(task.di.$parent);
expect(sequenceFlow.di.$parent.planeElement).to.include(sequenceFlow.di);
// expect cropped connection
expect(sequenceFlowConnection.waypoints).eql([
{ original: { x: 242, y: 376 }, x: 292, y: 376 },
{ x: 410, y: 376 },
{ x: 410, y: 341 },
{ original: { x: 553, y: 341 }, x: 528, y: 341 }
]);
var diWaypoints = bpmnFactory.createDiWaypoints([
{ x: 292, y: 376 },
{ x: 410, y: 376 },
{ x: 410, y: 341 },
{ x: 528, y: 341 }
]);
// expect cropped waypoints in di
expect(sequenceFlow.di.waypoint).eql(diWaypoints);
}));
// when it('should connect with custom start / end', inject(function(elementRegistry, modeling) {
var sequenceFlowConnection = modeling.createConnection(taskShape, gatewayShape, {
type: 'bpmn:SequenceFlow'
}, taskShape.parent);
var sequenceFlow = sequenceFlowConnection.businessObject; // given
var sourceShape = elementRegistry.get('Task_2'),
sourcePosition = {
x: 740,
y: 400
},
targetShape = elementRegistry.get('Task_3'),
targetPosition = {
x: 420,
y: 130
};
// then // when
expect(sequenceFlowConnection).to.exist; var newConnection = modeling.connect(
expect(sequenceFlow).to.exist; sourceShape, targetShape,
null,
{
connectionStart: sourcePosition,
connectionEnd: targetPosition
}
);
expect(sequenceFlow.sourceRef).to.eql(task); // then
expect(sequenceFlow.targetRef).to.eql(gateway); // expect cropped connection with custom start/end
expect(newConnection).to.have.waypoints([
expect(task.outgoing).to.include(sequenceFlow); { x: 738, y: 400 },
expect(gateway.incoming).to.include(sequenceFlow); { x: 590, y: 400 },
{ x: 590, y: 130 },
expect(sequenceFlow.di.$parent).to.eql(task.di.$parent); { x: 446, y: 130 }
expect(sequenceFlow.di.$parent.planeElement).to.include(sequenceFlow.di); ]);
}));
// expect cropped connection
expect(sequenceFlowConnection.waypoints).eql([
{ original: { x: 242, y: 376 }, x: 292, y: 376 },
{ x: 410, y: 376 },
{ x: 410, y: 341 },
{ original: { x: 553, y: 341 }, x: 528, y: 341 }
]);
var diWaypoints = bpmnFactory.createDiWaypoints([
{ x: 292, y: 376 },
{ x: 410, y: 376 },
{ x: 410, y: 341 },
{ x: 528, y: 341 }
]);
// expect cropped waypoints in di
expect(sequenceFlow.di.waypoint).eql(diWaypoints);
}));
});
describe('undo support', function() { it('should undo', inject(function(elementRegistry, commandStack, modeling) {
it('should undo', inject(function(elementRegistry, commandStack, modeling) { // given
var taskShape = elementRegistry.get('Task_1'),
// given task = taskShape.businessObject,
var taskShape = elementRegistry.get('Task_1'), gatewayShape = elementRegistry.get('Gateway_1'),
task = taskShape.businessObject, gateway = gatewayShape.businessObject;
gatewayShape = elementRegistry.get('Gateway_1'),
gateway = gatewayShape.businessObject;
var sequenceFlowConnection = modeling.createConnection(taskShape, gatewayShape, { var sequenceFlowConnection = modeling.createConnection(taskShape, gatewayShape, {
type: 'bpmn:SequenceFlow' type: 'bpmn:SequenceFlow'
}, taskShape.parent); }, taskShape.parent);
var sequenceFlow = sequenceFlowConnection.businessObject; var sequenceFlow = sequenceFlowConnection.businessObject;
// when // when
commandStack.undo(); commandStack.undo();
// then // then
expect(sequenceFlow.$parent).to.be.null; expect(sequenceFlow.$parent).to.be.null;
expect(sequenceFlow.sourceRef).to.be.null; expect(sequenceFlow.sourceRef).to.be.null;
expect(sequenceFlow.targetRef).to.be.null; expect(sequenceFlow.targetRef).to.be.null;
expect(task.outgoing).not.to.include(sequenceFlow); expect(task.outgoing).not.to.include(sequenceFlow);
expect(gateway.incoming).not.to.include(sequenceFlow); expect(gateway.incoming).not.to.include(sequenceFlow);
})); }));
});
describe('redo support', function() { it('should redo', inject(function(elementRegistry, commandStack, modeling) {
it('should redo', inject(function(elementRegistry, commandStack, modeling) { // given
var taskShape = elementRegistry.get('Task_1'),
// given task = taskShape.businessObject,
var taskShape = elementRegistry.get('Task_1'), gatewayShape = elementRegistry.get('Gateway_1'),
task = taskShape.businessObject, gateway = gatewayShape.businessObject;
gatewayShape = elementRegistry.get('Gateway_1'),
gateway = gatewayShape.businessObject;
var sequenceFlowConnection = modeling.createConnection(taskShape, gatewayShape, { var sequenceFlowConnection = modeling.createConnection(taskShape, gatewayShape, {
type: 'bpmn:SequenceFlow' type: 'bpmn:SequenceFlow'
}, taskShape.parent); }, taskShape.parent);
var sequenceFlow = sequenceFlowConnection.businessObject; var sequenceFlow = sequenceFlowConnection.businessObject;
var newWaypoints = sequenceFlowConnection.waypoints, var newWaypoints = sequenceFlowConnection.waypoints,
newDiWaypoints = sequenceFlow.di.waypoint; newDiWaypoints = sequenceFlow.di.waypoint;
// when // when
commandStack.undo(); commandStack.undo();
commandStack.redo(); commandStack.redo();
// then // then
expect(sequenceFlow.sourceRef).to.eql(task); expect(sequenceFlow.sourceRef).to.eql(task);
expect(sequenceFlow.targetRef).to.eql(gateway); expect(sequenceFlow.targetRef).to.eql(gateway);
expect(task.outgoing).to.include(sequenceFlow); expect(task.outgoing).to.include(sequenceFlow);
expect(gateway.incoming).to.include(sequenceFlow); expect(gateway.incoming).to.include(sequenceFlow);
expect(sequenceFlow.di.$parent).to.eql(task.di.$parent); expect(sequenceFlow.di.$parent).to.eql(task.di.$parent);
expect(sequenceFlow.di.$parent.planeElement).to.include(sequenceFlow.di); expect(sequenceFlow.di.$parent.planeElement).to.include(sequenceFlow.di);
// expect cropped connection // expect cropped connection
expect(sequenceFlowConnection.waypoints).eql(newWaypoints); expect(sequenceFlowConnection.waypoints).eql(newWaypoints);
// expect cropped waypoints in di // expect cropped waypoints in di
expect(sequenceFlow.di.waypoint).eql(newDiWaypoints); expect(sequenceFlow.di.waypoint).eql(newDiWaypoints);
})); }));
});
}); });