chore(styling): follow review hints

* 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/subprocess-navigation/SubprocessCentering.js → lib/features/drilldown/DrilldownCentering.js

@@ -1,11 +1,17 @@
 var defaultPosition = { x: 100, y: 50 };
 
+/**
+ * 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 SubprocessCentering(eventBus, canvas) {
   var currentPlane = 'base';
   var positionMap = {};
 
   eventBus.on('plane.set', function(event) {
-
     var currentViewbox = canvas.viewbox();
     positionMap[currentPlane] = {
       x: currentViewbox.x,

lib/features/subprocess-navigation/SubprocessOverlays.js → lib/features/drilldown/DrilldownOverlays.js

@@ -6,7 +6,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>';
 var ARROW_UP_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.1819805,12.4926407 L5.5003106,6.8103106 L5.5,12 L4,12 L4,4 L12,4 L12,5.5 L6.3103106,5.5003106 L12.2426407,11.4319805 C12.5355339,11.7248737 12.5355339,12.1997475 12.2426407,12.4926407 C11.9497475,12.7855339 11.4748737,12.7855339 11.1819805,12.4926407 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) {
 
   function createBreadcrumbs(subProcess) {
     var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
@@ -21,7 +29,7 @@ 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="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
 
       link.addEventListener('click', function() {
@@ -86,9 +94,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/subprocess-navigation/SubprocessCompatibility.js → lib/features/drilldown/SubprocessCompatibility.js

@@ -2,8 +2,8 @@
 import { is } from '../../util/ModelUtil';
 
 /**
- * Hooks into `import.render.start` and creates new planes for collapsed
- * subprocesses with elements on the parent diPlane.
+ * Hook into `import.render.start` and create new planes for diagrams with
+ * collapsed subprocesses and all dis on the same plane.
  *
  * @param {eventBus} eventBus
  * @param {moddle} moddle
@@ -19,6 +19,7 @@ export default function SubprocessCompatibility(eventBus, moddle) {
   });
 }
 
+
 SubprocessCompatibility.prototype.handleImport = function(definitions) {
   if (!definitions.diagrams) {
     return;
@@ -60,12 +61,12 @@ SubprocessCompatibility.prototype.fixPlaneDi = 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 });
     }
   });
 
   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/SubprocessFakeBoundaries.js

@@ -0,0 +1,73 @@
+import { getBusinessObject, is } from '../../util/ModelUtil';
+
+/**
+ * Add secondary shape for boundary events on expanded subprocess views.
+ * The position is determined relative to the primary element.
+ *
+ * @param {eventBus} eventBus
+ * @param {elementRegistry} elementRegistry
+ * @param {canvas} canvas
+ * @param {elementFactory} elementFactory
+ */
+export default function SubprocessFakeBoundaries(
+    eventBus, elementRegistry,
+    canvas, elementFactory) {
+
+  var attachBoundaries = function() {
+    var secondaryShapes = elementRegistry.filter(function(el) {
+      return is(el, 'bpmn:SubProcess') && el.isSecondary;
+    });
+
+    secondaryShapes.forEach(function(process) {
+      if (!process.primaryShape || !process.primaryShape.attachers) {
+        return;
+      }
+
+      process.primaryShape.attachers.forEach(function(boundary) {
+        var bo = getBusinessObject(boundary);
+
+        var primary = process.primaryShape;
+
+        var relativeXPos = (boundary.x + 15 - primary.x) / primary.width;
+        var relativeYPos = (boundary.y + 15 - primary.y) / primary.height;
+
+        var dx = process.x + (process.width * relativeXPos) - 15;
+        var dy = process.y + (process.height * relativeYPos) - 15;
+
+        var boundaryShape = elementFactory.createShape({
+          id: bo.id + '_secondary',
+          businessObject: bo,
+          type: 'bpmn:BoundaryEvent',
+          hidden: false,
+          x: dx,
+          y: dy,
+          width: 30,
+          height: 30,
+          isFrame: false,
+          isSecondary: true,
+          primaryShape: boundary,
+          di: boundary.di
+        });
+
+        canvas.addShape(boundaryShape, process.parent);
+
+        if (!process.attachers) {
+          process.attachers = [];
+        }
+
+        process.attachers.push(boundaryShape);
+      });
+
+    });
+  };
+
+  eventBus.on('import.done', attachBoundaries);
+}
+
+
+SubprocessFakeBoundaries.$inject = [
+  'eventBus',
+  'elementRegistry',
+  'canvas',
+  'elementFactory'
+];

lib/features/subprocess-navigation/SubprocessFlows.js → lib/features/drilldown/SubprocessFakeFlows.js

@@ -1,7 +1,14 @@
 var FLOW_LENGTH = 50;
 var HIGH_RENDER_PRIORITY = 2000;
 
-export default function SubprocessFlows(eventBus, config) {
+/**
+ * Draw representations of flows on expanded shape of subprocesses. The position
+ * is determined relative to the primary element.
+ *
+ * @param {eventBus} eventBus
+ * @param {config.subprocessFlows} config
+ */
+export default function SubprocessFakeFlows(eventBus, config) {
 
   var mutedStrokeColor = (config && config.mutedStrokeColor) || '#dddddd';
 
@@ -86,7 +93,7 @@ export default function SubprocessFlows(eventBus, config) {
 
 }
 
-SubprocessFlows.$inject = [ 'eventBus', 'config.subprocessFlows' ];
+SubprocessFakeFlows.$inject = [ 'eventBus', 'config.subprocessFlows' ];
 
 
 // helpers

lib/features/drilldown/index.js

@@ -0,0 +1,18 @@
+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';
+import SubprocessFakeBoundaries from './SubprocessFakeBoundaries';
+import SubprocessFakeFlows from './SubprocessFakeFlows';
+
+export default {
+  __depends__: [ OverlaysModule, ChangeSupportModule ],
+  __init__: [ 'drilldownOverlays', 'drilldownCentering', 'subprocessCompatibility', 'subprocessFakeBoundaries', 'subprocessFakeFlows' ],
+  drilldownOverlays: [ 'type', DrilldownOverlays ],
+  drilldownCentering: [ 'type', DrilldownCentering ],
+  subprocessCompatibility: [ 'type', SubprocessCompatibility ],
+  subprocessFakeBoundaries: [ 'type', SubprocessFakeBoundaries ],
+  subprocessFakeFlows: [ 'type', SubprocessFakeFlows ]
+};

lib/import/BpmnImporter.js

@@ -130,15 +130,17 @@ 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')) {
 
+    // create a new plane with implicit root for subprocesses. The only child
+    // is the expanded subprocess shape, which contains all further children
+    // TODO(marstamm): ideally, the importer would be plugable and we can move this into a behaviour
     if (is(semantic, 'bpmn:SubProcess')) {
       var plane = this._canvas.createPlane(semantic.id, element);
 
       // Get size of expanded element
       var bounds = getPlaneBounds(di);
-
       var primary = this._elementRegistry.get(semantic.id);
       element = this._elementFactory.createShape(elementData(semantic, di, {
         collapsed: false,

test/spec/features/subprocess-navigation/SubprocessNavigationSpec.js → 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() {
 
   var testModules = [
     coreModule,
-    subprocessNavigationModule
+    DrilldownModule
   ];
 
   var multiLayerXML = require('./nested-subprocesses.bpmn');