feat(drilldown): make breadcrumbs reactive

* react to palette state
* expose own state to djs-container

assets/bpmn-js.css

@@ -11,16 +11,27 @@
 
 .bjs-breadcrumbs {
   position: absolute;
-  display: flex;
+  display: none;
   flex-wrap: wrap;
   align-items: center;
   top: 10px;
-  left: 100px;
   font-family: var(--bjs-font-family);
   font-size: 16px;
   line-height: normal;
 }
 
+.bjs-breadcrumbs-shown .bjs-breadcrumbs {
+  display: flex;
+}
+
+.djs-palette-shown .bjs-breadcrumbs {
+  left: 50px;
+}
+
+.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
+  left: 100px;
+}
+
 .bjs-breadcrumbs li {
   display: inline-flex;
   padding-bottom: 5px;

lib/features/drilldown/DrilldownOverlays.js

@@ -1,10 +1,12 @@
-import { domify } from 'min-dom';
+import { domify, classes } from 'min-dom';
 
 import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
 import { getBusinessObject, is } from '../../util/ModelUtil';
 
 var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
 
+var OPEN_CLASS = 'bjs-breadcrumbs-shown';
+
 /**
  * Adds Overlays that allow switching planes on collapsed subprocesses.
  *
@@ -14,8 +16,9 @@ var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height=
  * @param {canvas} canvas
  */
 export default function DrilldownOverlays(eventBus, elementRegistry, overlays, canvas) {
-  var breadcrumbs = domify('<ul class="bjs-breadcrumbs djs-element-hidden"></ul>');
+  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
   var container = canvas.getContainer();
+  var containerClasses = classes(container);
   container.appendChild(breadcrumbs);
 
   function updateBreadcrumbs(plane) {
@@ -40,11 +43,9 @@ export default function DrilldownOverlays(eventBus, elementRegistry, overlays, c
 
     breadcrumbs.innerHTML = '';
 
-    if (path.length > 1) {
+    // show breadcrumbs and expose state to .djs-container
-      breadcrumbs.classList.remove('djs-element-hidden');
+    var visible = path.length > 1;
-    } else {
+    containerClasses.toggle(OPEN_CLASS, visible);
-      breadcrumbs.classList.add('djs-element-hidden');
-    }
 
     path.forEach(function(el) {
       breadcrumbs.appendChild(el);

test/spec/ModelerSpec.js

@@ -716,17 +716,18 @@ describe('Modeler', function() {
       return createModeler(xml).then(function() {
         var drilldown = container.querySelector('.bjs-drilldown');
         var breadcrumbs = container.querySelector('.bjs-breadcrumbs');
+        var djsContainer = container.querySelector('.djs-container');
 
         // assume
         expect(drilldown).to.exist;
         expect(breadcrumbs).to.exist;
-        expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.true;
+        expect(djsContainer.classList.contains('bjs-breadcrumbs-shown')).to.be.false;
 
         // when
         drilldown.click();
 
         // then
-        expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.false;
+        expect(djsContainer.classList.contains('bjs-breadcrumbs-shown')).to.be.true;
       });
 
     });

test/spec/ViewerSpec.js

@@ -379,17 +379,18 @@ describe('Viewer', function() {
       return createViewer(container, Viewer, xml).then(function() {
         var drilldown = container.querySelector('.bjs-drilldown');
         var breadcrumbs = container.querySelector('.bjs-breadcrumbs');
+        var djsContainer = container.querySelector('.djs-container');
 
         // assume
         expect(drilldown).to.exist;
         expect(breadcrumbs).to.exist;
-        expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.true;
+        expect(djsContainer.classList.contains('bjs-breadcrumbs-shown')).to.be.false;
 
         // when
         drilldown.click();
 
         // then
-        expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.false;
+        expect(djsContainer.classList.contains('bjs-breadcrumbs-shown')).to.be.true;
       });
 
     });

test/spec/features/drilldown/DrilldownSpec.js

@@ -5,6 +5,7 @@ import {
 import coreModule from 'lib/core';
 import DrilldownModule from 'lib/features/drilldown';
 import { bootstrapViewer } from '../../../helper';
+import { classes } from 'min-dom';
 
 describe('features - drilldown', function() {
 
@@ -64,23 +65,23 @@ describe('features - drilldown', function() {
     it('should not show breadcrumbs in root view', inject(function(canvas) {
 
       // given
-      var breadcrumbs = canvas.getContainer().querySelector('.bjs-breadcrumbs');
+      var container = canvas.getContainer();
 
       // then
-      expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.true;
+      expect(classes(container).contains('bjs-breadcrumbs-shown')).to.be.false;
     }));
 
 
     it('should show breadcrumbs in subprocess view', inject(function(canvas) {
 
       // given
-      var breadcrumbs = canvas.getContainer().querySelector('.bjs-breadcrumbs');
+      var container = canvas.getContainer();
 
       // when
       canvas.setActivePlane('collapsedProcess');
 
       // then
-      expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.false;
+      expect(classes(container).contains('bjs-breadcrumbs-shown')).to.be.true;
     }));