From af76b072960f45fe0d4d3dc980ab44a6a0495fc1 Mon Sep 17 00:00:00 2001
From: Beatriz Mendes <bea.smendes98@gmail.com>
Date: Thu, 9 Nov 2023 19:29:09 +0100
Subject: [PATCH] feat(outline): connection outline only in multi-select

---
 assets/diagram-js.css                         |  5 ++++
 .../selection/SelectionVisualsSpec.js         | 25 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/assets/diagram-js.css b/assets/diagram-js.css
index aa73088be..3f931855f 100644
--- a/assets/diagram-js.css
+++ b/assets/diagram-js.css
@@ -121,8 +121,13 @@
   stroke: var(--element-selected-outline-stroke-color);
 }
 
+.djs-connection.selected .djs-outline {
+  visibility: hidden;
+}
+
 .djs-multi-select .djs-element.selected .djs-outline {
   stroke: var(--element-selected-outline-secondary-stroke-color);
+  visibility: visible;
 }
 
 .djs-shape.connect-ok .djs-visual > :nth-child(1) {
diff --git a/test/spec/features/selection/SelectionVisualsSpec.js b/test/spec/features/selection/SelectionVisualsSpec.js
index a105ed7c5..478389523 100755
--- a/test/spec/features/selection/SelectionVisualsSpec.js
+++ b/test/spec/features/selection/SelectionVisualsSpec.js
@@ -76,6 +76,7 @@ describe('features/selection/SelectionVisuals', function() {
             outline = domQuery('.djs-outline', gfx);
 
         expect(outline).to.exist;
+        expect(getComputedStyle(outline).visibility).to.equal('visible');
       }));
 
 
@@ -88,6 +89,21 @@ describe('features/selection/SelectionVisuals', function() {
         expect(domClasses(element).has('djs-multi-select'));
       }));
 
+
+      it('should not show box for connection', inject(function(selection, canvas) {
+
+        // when
+        // debugger;
+        selection.select(connection);
+
+        // then
+        var gfx = canvas.getGraphics(connection),
+            outline = domQuery('.djs-outline', gfx);
+
+        expect(outline).to.exist;
+        expect(getComputedStyle(outline).visibility).to.equal('hidden');
+      }));
+
     });
 
 
@@ -192,6 +208,15 @@ describe('features/selection/SelectionVisuals', function() {
 
       }));
 
+
+      it('should show box for connection', inject(function(canvas) {
+        var gfx = canvas.getGraphics(connection),
+            outlineShape = domQuery('.djs-outline', gfx);
+
+        expect(outlineShape).to.exist;
+        expect(getComputedStyle(outlineShape).visibility).to.equal('visible');
+      }));
+
     });
 
   });