WIP: feat(drilldown): integrate overlays with modeling

lib/features/drilldown/DrilldownOverlays.js

@@ -3,6 +3,8 @@ import { domify } from 'min-dom';
 import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
 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>';
 
 /**
@@ -57,36 +59,40 @@ export default function DrilldownOverlays(eventBus, elementRegistry, overlays, c
     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>');
 
     html.addEventListener('click', function() {
       canvas.setActivePlane(element.id);
     });
 
-    overlays.add(element, {
+    overlays.add(element, 'drilldown', {
       position: {
         bottom: -7,
         right: -8
       },
       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() {
-    addOverlays(elementRegistry.filter(function(el) {
-      return is(el, 'bpmn:SubProcess');
-    }));
+    elementRegistry.filter(canDrillDown).map(addOverlay);
+  });
+
+
+  // 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);
+    }
   });
 }