feat(snapping): add initial snapping for associations

Snap to target mid when creating associations.

Closes #782

lib/features/snapping/BpmnSnapping.js

@@ -167,8 +167,14 @@ export default function BpmnSnapping(eventBus, canvas, bpmnRules, elementRegistr
       context.initialSourcePosition = context.sourcePosition;
     }
 
-    if (target && connection.type === 'bpmn:SequenceFlow') {
+    if (
-
+      target && (
+        connection.type === 'bpmn:Association' ||
+        connection.type === 'bpmn:DataOutputAssociation' ||
+        connection.type === 'bpmn:DataInputAssociation' ||
+        connection.type === 'bpmn:SequenceFlow'
+      )
+    ) {
       // snap source
       context.sourcePosition = mid(source);
 

test/spec/features/snapping/BpmnSnapping.connect.bpmn

@@ -7,9 +7,12 @@
   <bpmn:process id="Process_1" isExecutable="false">
     <bpmn:startEvent id="StartEvent_1" />
     <bpmn:task id="Task_1" />
+    <bpmn:dataObjectReference id="DataObjectReference_1" dataObjectRef="DataObject_1" />
+    <bpmn:dataObject id="DataObject_1" />
   </bpmn:process>
   <bpmn:process id="Process_1e043dv" isExecutable="false">
     <bpmn:task id="Task_2" />
+    <bpmn:dataStoreReference id="DataStoreReference_1" />
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1">
@@ -31,6 +34,18 @@
       <bpmndi:BPMNShape id="Task_0ythg78_di" bpmnElement="Task_2">
         <dc:Bounds x="240" y="200" width="100" height="80" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="DataStoreReference_1_di" bpmnElement="DataStoreReference_1">
+        <dc:Bounds x="101" y="215" width="50" height="50" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="81" y="269" width="90" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="DataObjectReference_1_di" bpmnElement="DataObjectReference_1">
+        <dc:Bounds x="196" y="93" width="36" height="50" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="214" y="147" width="0" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>

test/spec/features/snapping/BpmnSnappingSpec.js

@@ -806,6 +806,100 @@ describe('features/snapping - BpmnSnapping', function() {
     }));
 
 
+    it('should snap data output association on connect', inject(function(connect, dragging, elementRegistry) {
+
+      // given
+      var startEvent = elementRegistry.get('StartEvent_1'),
+          dataObjectReference = elementRegistry.get('DataObjectReference_1');
+
+      var mid = { x: dataObjectReference.x + dataObjectReference.width / 2, y: dataObjectReference.y + dataObjectReference.height / 2 };
+
+      // when
+      connect.start(canvasEvent({ x: 0, y: 0 }), startEvent);
+
+      dragging.hover({
+        element: dataObjectReference,
+        gfx: elementRegistry.getGraphics(dataObjectReference)
+      });
+
+      dragging.move(canvasEvent({ x: mid.x + 10, y: mid.y + 10 }));
+
+      dragging.end();
+
+      // then
+      var expected = [
+        {
+          original:
+          {
+            x: startEvent.x + startEvent.width / 2,
+            y: startEvent.y + startEvent.height / 2
+          },
+          x: startEvent.x + startEvent.width,
+          y: startEvent.y + startEvent.height / 2
+        },
+        {
+          original:
+          {
+            x: dataObjectReference.x + dataObjectReference.width / 2,
+            y: dataObjectReference.y + dataObjectReference.height / 2
+          },
+          x: dataObjectReference.x,
+          y: dataObjectReference.y + dataObjectReference.height / 2
+        }
+      ];
+
+      expect(startEvent.outgoing[0].waypoints).to.eql(expected);
+
+    }));
+
+
+    it('should snap data input association on connect', inject(function(connect, dragging, elementRegistry) {
+
+      // given
+      var dataStoreReference = elementRegistry.get('DataStoreReference_1'),
+          task = elementRegistry.get('Task_2');
+
+      var mid = { x: task.x + task.width / 2, y: task.y + task.height / 2 };
+
+      // when
+      connect.start(canvasEvent({ x: 0, y: 0 }), dataStoreReference);
+
+      dragging.hover({
+        element: task,
+        gfx: elementRegistry.getGraphics(task)
+      });
+
+      dragging.move(canvasEvent({ x: mid.x + 10, y: mid.y + 10 }));
+
+      dragging.end();
+
+      // then
+      var expected = [
+        {
+          original:
+          {
+            x: dataStoreReference.x + dataStoreReference.width / 2,
+            y: dataStoreReference.y + dataStoreReference.height / 2
+          },
+          x: dataStoreReference.x + dataStoreReference.width,
+          y: dataStoreReference.y + dataStoreReference.height / 2
+        },
+        {
+          original:
+          {
+            x: task.x + task.width / 2,
+            y: task.y + task.height / 2
+          },
+          x: task.x,
+          y: task.y + task.height / 2
+        }
+      ];
+
+      expect(dataStoreReference.outgoing[0].waypoints).to.eql(expected);
+
+    }));
+
+
     it('should NOT snap message flow on global connect', inject(function(connect, dragging, elementRegistry) {
 
       // given