feat(outline): connection outline only in multi-select

bpmn-io · Nov 10, 2023 · 8ea3bd0 · 8ea3bd0
1 parent 540d05d
commit 8ea3bd0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git 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 {
+  display: none;
+}
+
 .djs-multi-select .djs-element.selected .djs-outline {
   stroke: var(--element-selected-outline-secondary-stroke-color);
+  display: block;
 }
 
 .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
@@ -88,6 +88,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).display).to.equal('none');
+      }));
+
     });
 
 
@@ -192,6 +207,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).display).to.not.equal('none');
+      }));
+
     });
 
   });