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

WIP: feat(drilldown): integrate overlays with modeling

This commit is contained in:
Nico Rehwaldt 2021-11-03 13:08:46 +01:00 committed by Martin Stamm
parent 66aaa28b27
commit 4e388ac51c
1 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,8 @@ import { domify } from 'min-dom';
import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil'; import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
import { getBusinessObject, is } from '../../util/ModelUtil'; import { getBusinessObject, is } from '../../util/ModelUtil';
import { isExpanded } from '../../util/DiUtil';
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 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>';
/** /**
@ -57,36 +59,40 @@ export default function DrilldownOverlays(eventBus, elementRegistry, overlays, c
updateBreadcrumbs(plane); updateBreadcrumbs(plane);
}); });
var createOverlay = function(element) { function canDrillDown(element) {
return is(element, 'bpmn:SubProcess') && canvas.getPlane(element.id);
}
function addOverlay(element) {
var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>'); var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
html.addEventListener('click', function() { html.addEventListener('click', function() {
canvas.setActivePlane(element.id); canvas.setActivePlane(element.id);
}); });
overlays.add(element, { overlays.add(element, 'drilldown', {
position: { position: {
bottom: -7, bottom: -7,
right: -8 right: -8
}, },
html: html html: html
}); });
};
var addOverlays = function(elements) {
elements.forEach(function(element) {
if (is(element, 'bpmn:SubProcess')
&& element.collapsed
&& canvas.getPlane(element.id)) {
createOverlay(element);
} }
});
};
eventBus.on('import.done', function() { eventBus.on('import.done', function() {
addOverlays(elementRegistry.filter(function(el) { elementRegistry.filter(canDrillDown).map(addOverlay);
return is(el, 'bpmn:SubProcess'); });
}));
// TODO(nikku): add dedicated overlays spec to test
// interaction with element creation and replace
eventBus.on('element.changed', function(event) {
const element = event.element;
if (canDrillDown(element)) {
addOverlay(element);
}
}); });
} }