sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(drilldown): make breadcrumbs reactive 

* react to palette state
* expose own state to djs-container
This commit is contained in:
Martin Stamm 2021-11-17 10:25:56 +01:00 committed by fake-join[bot]
parent 4e7b58b3c3
commit b2fd342054
5 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/bpmn-js.css
View File

@ -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;

15
lib/features/drilldown/DrilldownOverlays.js
View File

@ -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) {
breadcrumbs.classList.remove('djs-element-hidden');
} else {
breadcrumbs.classList.add('djs-element-hidden');
}
// show breadcrumbs and expose state to .djs-container
var visible = path.length > 1;
containerClasses.toggle(OPEN_CLASS, visible);
path.forEach(function(el) {
breadcrumbs.appendChild(el);

5
test/spec/ModelerSpec.js
View File

@ -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;
});
});

5
test/spec/ViewerSpec.js
View File

@ -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;
});
});

9
test/spec/features/drilldown/DrilldownSpec.js
View File

@ -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;
}));