chore(drilldown): rename subprocess-navigation -> drilldown and document

* rename subprocess-navigation -> drilldown
* add JSDoc comments

lib/Viewer.js

@@ -4,7 +4,7 @@ import CoreModule from './core';
 import TranslateModule from 'diagram-js/lib/i18n/translate';
 import SelectionModule from 'diagram-js/lib/features/selection';
 import OverlaysModule from 'diagram-js/lib/features/overlays';
-import SubprocessNavigationModule from './features/subprocess-navigation';
+import DrilldownModdule from './features/drilldown';
 
 import BaseViewer from './BaseViewer';
 
@@ -68,7 +68,7 @@ Viewer.prototype._modules = [
   TranslateModule,
   SelectionModule,
   OverlaysModule,
-  SubprocessNavigationModule
+  DrilldownModdule
 ];
 
 // default moddle extensions the viewer is composed of

lib/features/drilldown/DrilldownCentering.js

@@ -1,9 +1,15 @@
-export default function SubprocessCentering(eventBus, canvas) {
+/**
+ * Move collapsed subprocesses into view when drilling down. Zoom and scroll
+ * are saved in a session.
+ *
+ * @param {eventBus} eventBus
+ * @param {canvas} canvas
+ */
+export default function DrilldownCentering(eventBus, canvas) {
   var currentPlane = 'base';
   var positionMap = {};
 
   eventBus.on('plane.set', function(event) {
-
     var currentViewbox = canvas.viewbox();
     positionMap[currentPlane] = {
       x: currentViewbox.x,
@@ -32,4 +38,4 @@ export default function SubprocessCentering(eventBus, canvas) {
   });
 }
 
-SubprocessCentering.$inject = [ 'eventBus', 'canvas' ];
+DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];

lib/features/drilldown/DrilldownOverlays.js

@@ -5,7 +5,15 @@ 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>';
 
-export default function SubprocessOverlays(eventBus, elementRegistry, overlays, canvas) {
+/**
+ * Adds Overlays that allow switching planes on collapsed subprocesses.
+ *
+ * @param {eventBus} eventBus
+ * @param {elementRegistry} elementRegistry
+ * @param {overlays} overlays
+ * @param {canvas} canvas
+ */
+export default function DrilldownOverlays(eventBus, elementRegistry, overlays, canvas) {
   var breadcrumbs = domify('<ul class="bjs-breadcrumbs djs-element-hidden"></ul>');
   var container = canvas.getContainer();
   container.appendChild(breadcrumbs);
@@ -15,8 +23,8 @@ export default function SubprocessOverlays(eventBus, elementRegistry, overlays,
     var parents = getParentChain(subProcess);
 
     var path = parents.map(function(el) {
-      var title = escapeHTML(el.name) || el.id;
+      var title = escapeHTML(el.name || el.id);
-      var link = domify('<li><span class="bpmnjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
+      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
 
       link.addEventListener('click', function() {
         if (canvas.getPlane(el.id)) {
@@ -82,9 +90,10 @@ export default function SubprocessOverlays(eventBus, elementRegistry, overlays,
   });
 }
 
-SubprocessOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+DrilldownOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
 
 
+// helpers
 var getParentChain = function(child) {
   var bo = getBusinessObject(child);
 

lib/features/drilldown/SubprocessCompatibility.js

@@ -8,8 +8,8 @@ var DEFAULT_POSITION = {
 };
 
 /**
- * Hooks into `import.render.start` and creates new planes for collapsed
+ * Hook into `import.render.start` and create new planes for diagrams with
- * subprocesses with elements on the parent diPlane.
+ * collapsed subprocesses and all dis on the same plane.
  *
  * @param {eventBus} eventBus
  * @param {moddle} moddle
@@ -77,14 +77,14 @@ SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
     if (is(parent, 'bpmn:SubProcess') && parent !== plane.bpmnElement) {
 
       // don't change the array while we iterate over it
-      elementsToMove.push({ element: diElement, parent: parent });
+      elementsToMove.push({ diElement: diElement, parent: parent });
     }
   });
 
   var newDiagrams = [];
 
   elementsToMove.forEach(function(element) {
-    var diElement = element.element;
+    var diElement = element.diElement;
     var parent = element.parent;
 
     // parent is expanded, get nearest collapsed parent

lib/features/drilldown/index.js

@@ -0,0 +1,14 @@
+import OverlaysModule from 'diagram-js/lib/features/overlays';
+import ChangeSupportModule from 'diagram-js/lib/features/change-support';
+
+import DrilldownOverlays from './DrilldownOverlays';
+import DrilldownCentering from './DrilldownCentering';
+import SubprocessCompatibility from './SubprocessCompatibility';
+
+export default {
+  __depends__: [ OverlaysModule, ChangeSupportModule ],
+  __init__: [ 'drilldownOverlays', 'drilldownCentering', 'subprocessCompatibility'],
+  drilldownOverlays: [ 'type', DrilldownOverlays ],
+  drilldownCentering: [ 'type', DrilldownCentering ],
+  subprocessCompatibility: [ 'type', SubprocessCompatibility ]
+};

lib/features/subprocess-navigation/index.js

@@ -1,14 +0,0 @@
-import OverlaysModule from 'diagram-js/lib/features/overlays';
-import ChangeSupportModule from 'diagram-js/lib/features/change-support';
-
-import SubprocessCentering from './SubprocessCentering';
-import SubprocessCompatibility from './SubprocessCompatibility';
-import SubprocessOverlays from './SubprocessOverlays';
-
-export default {
-  __depends__: [ OverlaysModule, ChangeSupportModule ],
-  __init__: [ 'subprocessOverlays', 'subprocessCompatibility', 'subprocessCentering' ],
-  subprocessOverlays: [ 'type', SubprocessOverlays ],
-  subprocessCompatibility: [ 'type', SubprocessCompatibility ],
-  subprocessCentering: [ 'type', SubprocessCentering ]
-};

lib/import/BpmnImporter.js

@@ -102,12 +102,13 @@ BpmnImporter.prototype.add = function(semantic, di, parentElement) {
 
   // ROOT ELEMENT
   // handle the special case that we deal with a
-  // invisible root element (process or collaboration)
+  // invisible root element (process, subprocess or collaboration)
   if (is(di, 'bpmndi:BPMNPlane')) {
 
     // add a virtual element (not being drawn)
     element = this._elementFactory.createRoot(elementData(semantic, di));
 
+    // for subprocesses, the id is already defined on the collapsed shape
     if (is(semantic, 'bpmn:SubProcess')) {
       element.id = element.id + '_plane';
     }

test/spec/features/drilldown/DrilldownSpec.js

@@ -3,14 +3,14 @@ import {
 } from 'test/TestHelper';
 
 import coreModule from 'lib/core';
-import subprocessNavigationModule from 'lib/features/subprocess-navigation';
+import DrilldownModule from 'lib/features/drilldown';
 import { bootstrapViewer } from '../../../helper';
 
-describe('features - subprocess-navigation', function() {
+describe('features - drilldown', function() {
 
   var testModules = [
     coreModule,
-    subprocessNavigationModule
+    DrilldownModule
   ];
 
   var multiLayerXML = require('./nested-subprocesses.bpmn');