feat(connect): support point to point connection

Closes #578

lib/features/modeling/BpmnLayouter.js

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

lib/features/modeling/Modeling.js

@@ -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;
 
@@ -65,7 +65,7 @@ Modeling.prototype.connect = function(source, target, attrs) {
     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);
 };
 
 

test/spec/features/modeling/CreateConnectionSpec.js

@@ -18,9 +18,7 @@ describe('features/modeling - create connection', function() {
   beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
 
 
-  describe('connection handling', function() {
-
-    it('should execute', inject(function(elementRegistry, modeling, bpmnFactory) {
+  it('should connect', inject(function(elementRegistry, modeling, bpmnFactory) {
 
     // given
     var taskShape = elementRegistry.get('Task_1'),
@@ -28,7 +26,6 @@ describe('features/modeling - create connection', function() {
         gatewayShape = elementRegistry.get('Gateway_1'),
         gateway = gatewayShape.businessObject;
 
-
     // when
     var sequenceFlowConnection = modeling.createConnection(taskShape, gatewayShape, {
       type: 'bpmn:SequenceFlow'
@@ -68,10 +65,41 @@ describe('features/modeling - create connection', function() {
     expect(sequenceFlow.di.waypoint).eql(diWaypoints);
   }));
 
-  });
 
+  it('should connect with custom start / end', inject(function(elementRegistry, modeling) {
+
+    // given
+    var sourceShape = elementRegistry.get('Task_2'),
+        sourcePosition = {
+          x: 740,
+          y: 400
+        },
+        targetShape = elementRegistry.get('Task_3'),
+        targetPosition = {
+          x: 420,
+          y: 130
+        };
+
+    // when
+    var newConnection = modeling.connect(
+      sourceShape, targetShape,
+      null,
+      {
+        connectionStart: sourcePosition,
+        connectionEnd: targetPosition
+      }
+    );
+
+    // then
+    // expect cropped connection with custom start/end
+    expect(newConnection).to.have.waypoints([
+      { x: 738, y: 400 },
+      { x: 590, y: 400 },
+      { x: 590, y: 130 },
+      { x: 446, y: 130 }
+    ]);
+  }));
 
-  describe('undo support', function() {
 
   it('should undo', inject(function(elementRegistry, commandStack, modeling) {
 
@@ -100,10 +128,6 @@ describe('features/modeling - create connection', function() {
     expect(gateway.incoming).not.to.include(sequenceFlow);
   }));
 
-  });
-
-
-  describe('redo support', function() {
 
   it('should redo', inject(function(elementRegistry, commandStack, modeling) {
 
@@ -144,6 +168,4 @@ describe('features/modeling - create connection', function() {
     expect(sequenceFlow.di.waypoint).eql(newDiWaypoints);
   }));
 
-  });
-
 });