From b234f172445b19143a078096e1bdc9da913a61f0 Mon Sep 17 00:00:00 2001
From: pedesen <patrick.dehn@camunda.com>
Date: Fri, 14 Jul 2017 11:29:41 +0200
Subject: [PATCH] feat(snapping) snap on sequence flows

Closes #398
---
 lib/features/snapping/BpmnSnapping.js         | 28 ++++++--
 .../snapping/BpmnSnapping.sequenceFlow.bpmn   | 41 ++++++++++++
 .../features/snapping/BpmnSnappingSpec.js     | 66 +++++++++++++++++++
 3 files changed, 129 insertions(+), 6 deletions(-)
 create mode 100644 test/spec/features/snapping/BpmnSnapping.sequenceFlow.bpmn

diff --git a/lib/features/snapping/BpmnSnapping.js b/lib/features/snapping/BpmnSnapping.js
index 85525cdc..2f0c91ac 100644
--- a/lib/features/snapping/BpmnSnapping.js
+++ b/lib/features/snapping/BpmnSnapping.js
@@ -373,18 +373,34 @@ BpmnSnapping.prototype.addTargetSnaps = function(snapPoints, shape, target) {
 
   var siblings = this.getSiblings(shape, target) || [];
 
-  forEach(siblings, function(s) {
+  forEach(siblings, function(sibling) {
 
     // do not snap to lanes
-    if (is(s, 'bpmn:Lane')) {
+    if (is(sibling, 'bpmn:Lane')) {
       return;
     }
 
-    snapPoints.add('mid', mid(s));
+    if (sibling.waypoints) {
+      forEach(sibling.waypoints, function(waypoint, i) {
+        var nextWaypoint = sibling.waypoints[i+1];
 
-    if (is(s, 'bpmn:Participant')) {
-      snapPoints.add('top-left', topLeft(s));
-      snapPoints.add('bottom-right', bottomRight(s));
+        if (!nextWaypoint) {
+          return;
+        }
+
+        if (nextWaypoint.x === waypoint.x || nextWaypoint.y === waypoint.y) {
+          snapPoints.add('mid', waypoint);
+        }
+      });
+
+      return;
+    }
+
+    snapPoints.add('mid', mid(sibling));
+
+    if (is(sibling, 'bpmn:Participant')) {
+      snapPoints.add('top-left', topLeft(sibling));
+      snapPoints.add('bottom-right', bottomRight(sibling));
     }
   });
 
diff --git a/test/spec/features/snapping/BpmnSnapping.sequenceFlow.bpmn b/test/spec/features/snapping/BpmnSnapping.sequenceFlow.bpmn
new file mode 100644
index 00000000..9e81382b
--- /dev/null
+++ b/test/spec/features/snapping/BpmnSnapping.sequenceFlow.bpmn
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="1.9.0-dev">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_1">
+      <bpmn:outgoing>SequenceFlow_1</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:task id="Task_1">
+      <bpmn:incoming>SequenceFlow_1</bpmn:incoming>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
+    <bpmn:task id="Task_099t40a" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="StartEvent_1oc4unz_di" bpmnElement="StartEvent_1">
+        <dc:Bounds x="70" y="49" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="88" y="88" width="0" height="13" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Task_1ndpsyi_di" bpmnElement="Task_1">
+        <dc:Bounds x="538" y="405" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_1mpqh64_di" bpmnElement="SequenceFlow_1">
+        <di:waypoint xsi:type="dc:Point" x="106" y="67" />
+        <di:waypoint xsi:type="dc:Point" x="191" y="67" />
+        <di:waypoint xsi:type="dc:Point" x="191" y="134" />
+        <di:waypoint xsi:type="dc:Point" x="304" y="134" />
+        <di:waypoint xsi:type="dc:Point" x="304" y="325" />
+        <di:waypoint xsi:type="dc:Point" x="588" y="325" />
+        <di:waypoint xsi:type="dc:Point" x="588" y="405" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="247.5" y="112.5" width="0" height="13" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Task_099t40a_di" bpmnElement="Task_099t40a">
+        <dc:Bounds x="118" y="405" width="100" height="80" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>
diff --git a/test/spec/features/snapping/BpmnSnappingSpec.js b/test/spec/features/snapping/BpmnSnappingSpec.js
index 08a17e67..7ba30b1f 100644
--- a/test/spec/features/snapping/BpmnSnappingSpec.js
+++ b/test/spec/features/snapping/BpmnSnappingSpec.js
@@ -99,6 +99,72 @@ describe('features/snapping - BpmnSnapping', function() {
   });
 
 
+  describe('on Sequence Flows', function() {
+
+    var diagramXML = require('./BpmnSnapping.sequenceFlow.bpmn');
+
+    beforeEach(bootstrapModeler(diagramXML, {
+      modules: testModules
+    }));
+
+    var sequenceFlow, task;
+
+    beforeEach(inject(function(elementFactory, elementRegistry, dragging) {
+      sequenceFlow = elementRegistry.get('SequenceFlow_1');
+
+      task = elementFactory.createShape({
+        type: 'bpmn:Task'
+      });
+
+      dragging.setOptions({ manual: true });
+    }));
+
+    afterEach(inject(function(dragging) {
+      dragging.setOptions({ manual: false });
+    }));
+
+
+    it('should snap vertically',
+      inject(function(canvas, create, dragging) {
+
+        // given
+        var sequenceFlowGfx = canvas.getGraphics(sequenceFlow);
+
+        // when
+        create.start(canvasEvent({ x: 0, y: 0 }), task);
+
+        dragging.hover({ element: sequenceFlow, gfx: sequenceFlowGfx });
+
+        dragging.move(canvasEvent({ x: 300, y: 245 }));
+        dragging.end();
+
+        // then
+        expect(task.x).to.eql(254);
+      })
+    );
+
+
+    it('should snap horizontally',
+      inject(function(canvas, create, dragging) {
+
+        // given
+        var sequenceFlowGfx = canvas.getGraphics(sequenceFlow);
+
+        // when
+        create.start(canvasEvent({ x: 0, y: 0 }), task);
+
+        dragging.hover({ element: sequenceFlow, gfx: sequenceFlowGfx });
+
+        dragging.move(canvasEvent({ x: 410, y: 320 }));
+        dragging.end();
+
+        // then
+        expect(task.y).to.eql(285);
+      })
+    );
+  });
+
+
   describe('on Participant create', function() {
 
     describe('in non-empty process', function() {