Revert: remove connection selection

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d
 
 _**Note:** Yet to be released changes appear here._
 
+## 12.7.1
+
+* `FIX`: revert selection outline removal for connections ([#820](https://github.com/bpmn-io/diagram-js/pull/820))
+
 ## 12.7.0
 
 * `FEAT`: support `imageHtml` option for popup menu header entries ([#819](https://github.com/bpmn-io/diagram-js/pull/819))

lib/features/outline/Outline.js

@@ -1,3 +1,5 @@
+import { getBBox } from '../../util/Elements';
+
 var LOW_PRIORITY = 500;
 
 import {
@@ -75,6 +77,19 @@ export default function Outline(eventBus, styles) {
     }
   });
 
+  eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
+    var element = event.element,
+        gfx = event.gfx;
+
+    var outline = domQuery('.djs-outline', gfx);
+
+    if (!outline) {
+      outline = createOutline(gfx, element);
+      svgAppend(gfx, outline);
+    }
+
+    self.updateConnectionOutline(outline, element);
+  });
 }
 
 
@@ -106,6 +121,25 @@ Outline.prototype.updateShapeOutline = function(outline, element) {
   }
 };
 
+/**
+ * Updates the outline of a connection respecting the bounding box of
+ * the connection and an outline offset.
+ * Register an outline provider with the given priority.
+ *
+ * @param {SVGElement} outline
+ * @param {Element} connection
+ **/
+Outline.prototype.updateConnectionOutline = function(outline, connection) {
+  var bbox = getBBox(connection);
+
+  svgAttr(outline, {
+    x: bbox.x - this.offset,
+    y: bbox.y - this.offset,
+    width: bbox.width + this.offset * 2,
+    height: bbox.height + this.offset * 2
+  });
+};
+
 /**
  * Register an outline provider with the given priority.
  *

test/spec/features/outline/OutlineSpec.js

@@ -51,7 +51,7 @@ describe('features/outline/Outline', function() {
     }));
 
 
-    it('should not add outline to connection', inject(function(selection, canvas, elementRegistry) {
+    it('should add outline to connection', inject(function(selection, canvas, elementRegistry) {
 
       // given
       var connection = canvas.addConnection({ id: 'select1', waypoints: [ { x: 25, y: 25 }, { x: 115, y: 115 } ] });
@@ -63,7 +63,7 @@ describe('features/outline/Outline', function() {
       var gfx = elementRegistry.getGraphics(connection);
       var outline = domQuery('.djs-outline', gfx);
 
-      expect(outline).to.not.exist;
+      expect(outline).to.exist;
       expect(svgClasses(gfx).has('selected')).to.be.true; // Outline class is set
     }));