bpmn-js 9.0.0-subprocesses.1 → 9.0.0-subprocesses.2

package/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

package/lib/draw/BpmnRenderer.js

@@ -1464,8 +1464,6 @@ export default function BpmnRenderer(
           stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
 
       attrs = assign({
-        fill: fill,
-        stroke: stroke,
         markerEnd: marker('association-end', fill, stroke)
       }, attrs);
 
@@ -1479,8 +1477,6 @@ export default function BpmnRenderer(
 
 
       attrs = assign({
-        fill: fill,
-        stroke: stroke,
         markerEnd: marker('association-end', fill, stroke)
       }, attrs);
 

package/lib/features/{subprocess-navigation/SubprocessCentering.js → drilldown/DrilldownCentering.js}

@@ -1,11 +1,15 @@
-var defaultPosition = { x: 100, y: 50 };
-
-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,
@@ -14,25 +18,7 @@ export default function SubprocessCentering(eventBus, canvas) {
     };
 
     var planeId = event.plane.name;
-    var storedViewbox = positionMap[planeId];
-
-    if (!storedViewbox) {
-      if (!event.plane.rootElement.isImplicit) {
-        storedViewbox = {
-          x: 0,
-          y: 0,
-          zoom: 1
-        };
-      }
-      else {
-        var currentBoundingBox = canvas.getActiveLayer().getBBox();
-        storedViewbox = {
-          x: currentBoundingBox.x - defaultPosition.x,
-          y: currentBoundingBox.y - defaultPosition.y,
-          zoom: 1
-        };
-      }
-    }
+    var storedViewbox = positionMap[planeId] || { x: 0, y: 0, zoom: 1 };
 
     var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
         dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
@@ -52,4 +38,4 @@ export default function SubprocessCentering(eventBus, canvas) {
   });
 }
 
-SubprocessCentering.$inject = [ 'eventBus', 'canvas' ];
+DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];

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

@@ -4,24 +4,26 @@ 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 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) {
-
-  function createBreadcrumbs(subProcess) {
-    var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
-    var drillUp = domify('<button class="bjs-drilldown">' + ARROW_UP_SVG + '</button>');
-    drillUp.addEventListener('click', function() {
-      var plane = canvas.findPlane(getBusinessObject(subProcess).id);
-      canvas.setActivePlane(plane);
-    });
-
-    breadcrumbs.appendChild(drillUp);
 
+/**
+ * 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);
+
+  function updateBreadcrumbs(plane) {
+    var subProcess = elementRegistry.get(plane.name);
     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() {
@@ -36,20 +38,26 @@ export default function SubprocessOverlays(eventBus, elementRegistry, overlays,
       return link;
     });
 
+    breadcrumbs.innerHTML = '';
+
+    if (path.length > 1) {
+      breadcrumbs.classList.remove('djs-element-hidden');
+    } else {
+      breadcrumbs.classList.add('djs-element-hidden');
+    }
+
     path.forEach(function(el) {
       breadcrumbs.appendChild(el);
     });
-
-    overlays.add(subProcess, {
-      position: {
-        top: -30,
-        left: -10
-      },
-      html: breadcrumbs
-    });
   }
 
-  var createDrilldown = function(element) {
+  eventBus.on('plane.set', function(event) {
+    var plane = event.plane;
+
+    updateBreadcrumbs(plane);
+  });
+
+  var createOverlay = function(element) {
     var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
 
     html.addEventListener('click', function() {
@@ -70,11 +78,7 @@ export default function SubprocessOverlays(eventBus, elementRegistry, overlays,
       if (is(element, 'bpmn:SubProcess')
           && element.collapsed
           && canvas.getPlane(element.id)) {
-        createDrilldown(element);
-      }
-
-      if (is(element, 'bpmn:SubProcess') && element.isSecondary) {
-        createBreadcrumbs(element);
+        createOverlay(element);
       }
     });
   };
@@ -86,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);
 

package/lib/features/drilldown/SubprocessCompatibility.js

@@ -0,0 +1,193 @@
+
+import { asBounds, asTRBL } from 'diagram-js/lib/layout/LayoutUtil';
+import { is } from '../../util/ModelUtil';
+
+var DEFAULT_POSITION = {
+  x: 180,
+  y: 160
+};
+
+/**
+ * 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
+ */
+export default function SubprocessCompatibility(eventBus, moddle) {
+  this._eventBus = eventBus;
+  this._moddle = moddle;
+
+  var self = this;
+
+  eventBus.on('import.render.start', 1500, function(e, context) {
+    self.handleImport(context.definitions);
+  });
+}
+
+SubprocessCompatibility.prototype.handleImport = function(definitions) {
+  if (!definitions.diagrams) {
+    return;
+  }
+
+  var self = this;
+  this._definitions = definitions;
+  this._processToDiagramMap = {};
+
+  definitions.diagrams.forEach(function(diagram) {
+    if (!diagram.plane || !diagram.plane.bpmnElement) {
+      return;
+    }
+
+    self._processToDiagramMap[diagram.plane.bpmnElement.id] = diagram;
+  });
+
+  var newDiagrams = [];
+  definitions.diagrams.forEach(function(diagram) {
+    var createdDiagrams = self.createNewDiagrams(diagram.plane);
+    Array.prototype.push.apply(newDiagrams, createdDiagrams);
+  });
+
+  newDiagrams.forEach(function(diagram) {
+    self.movePlaneElementsToOrigin(diagram.plane);
+  });
+};
+
+
+/**
+ * Moves all DI elements from collapsed subprocesses to a new plane.
+ *
+ * @param {Object} plane
+ * @return {Array} new diagrams created for the collapsed subprocesses
+ */
+SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
+  var self = this;
+
+  var collapsedElements = [];
+  var elementsToMove = [];
+
+  plane.get('planeElement').forEach(function(diElement) {
+    var bo = diElement.bpmnElement;
+    var parent = bo.$parent;
+
+    if (is(bo, 'bpmn:SubProcess') && !diElement.isExpanded) {
+      collapsedElements.push(bo);
+    }
+
+    if (is(parent, 'bpmn:SubProcess') && parent !== plane.bpmnElement) {
+
+      // don't change the array while we iterate over it
+      elementsToMove.push({ diElement: diElement, parent: parent });
+    }
+  });
+
+  var newDiagrams = [];
+
+  elementsToMove.forEach(function(element) {
+    var diElement = element.diElement;
+    var parent = element.parent;
+
+    // parent is expanded, get nearest collapsed parent
+    while (parent && !collapsedElements.includes(parent)) {
+      parent = parent.$parent;
+    }
+
+    // false positive, all parents are expanded
+    if (!parent) {
+      return;
+    }
+
+    var diagram = self._processToDiagramMap[parent.id];
+    if (!diagram) {
+      diagram = self.createDiagram(parent);
+      self._processToDiagramMap[parent.id] = diagram;
+      newDiagrams.push(diagram);
+    }
+
+    self.moveToDiPlane(diElement, diagram.plane);
+  });
+
+  return newDiagrams;
+};
+
+SubprocessCompatibility.prototype.movePlaneElementsToOrigin = function(plane) {
+  var elements = plane.get('planeElement');
+
+  // get bounding box of all elements
+  var planeBounds = getPlaneBounds(plane);
+
+  var offset = {
+    x: planeBounds.x - DEFAULT_POSITION.x,
+    y: planeBounds.y - DEFAULT_POSITION.y
+  };
+
+  elements.forEach(function(diElement) {
+    if (diElement.waypoint) {
+      diElement.waypoint.forEach(function(waypoint) {
+        waypoint.x = waypoint.x - offset.x;
+        waypoint.y = waypoint.y - offset.y;
+      });
+    } else if (diElement.bounds) {
+      diElement.bounds.x = diElement.bounds.x - offset.x;
+      diElement.bounds.y = diElement.bounds.y - offset.y;
+    }
+  });
+};
+
+
+SubprocessCompatibility.prototype.moveToDiPlane = function(diElement, newPlane) {
+  var containingDiagram = findRootDiagram(diElement);
+
+  // remove DI from old Plane and add it to the new one
+  var parentPlaneElement = containingDiagram.plane.get('planeElement');
+  parentPlaneElement.splice(parentPlaneElement.indexOf(diElement), 1);
+  newPlane.get('planeElement').push(diElement);
+};
+
+
+SubprocessCompatibility.prototype.createDiagram = function(bo) {
+  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
+  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
+    plane: plane
+  });
+  plane.$parent = diagram;
+  plane.bpmnElement = bo;
+  diagram.$parent = this._definitions;
+  this._definitions.diagrams.push(diagram);
+  return diagram;
+};
+
+SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
+
+
+// helpers
+
+function findRootDiagram(element) {
+  if (is(element, 'bpmndi:BPMNDiagram')) {
+    return element;
+  } else {
+    return findRootDiagram(element.$parent);
+  }
+}
+
+function getPlaneBounds(plane) {
+  var planeTrbl = {
+    top: Infinity,
+    right: -Infinity,
+    bottom: -Infinity,
+    left: Infinity
+  };
+
+  plane.planeElement.forEach(function(element) {
+    if (!element.bounds) {
+      return;
+    }
+
+    var trbl = asTRBL(element.bounds);
+
+    planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
+    planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
+  });
+
+  return asBounds(planeTrbl);
+}

package/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 ]
+};

package/lib/import/BpmnImporter.js

@@ -10,8 +10,6 @@ import {
 } from '../util/LabelUtil';
 
 import {
-  asBounds,
-  asTRBL,
   getMid
 } from 'diagram-js/lib/layout/LayoutUtil';
 
@@ -50,32 +48,6 @@ function getWaypoints(di, source, target) {
   });
 }
 
-var PLANE_PADDING = 50;
-
-function getPlaneBounds(plane) {
-  var planeTrbl = {
-    top: Infinity,
-    right: -Infinity,
-    bottom: -Infinity,
-    left: Infinity
-  };
-
-  plane.planeElement.forEach(function(element) {
-    if (!element.bounds) {
-      return;
-    }
-
-    var trbl = asTRBL(element.bounds);
-
-    planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
-    planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
-    planeTrbl.right = Math.max(trbl.right, planeTrbl.right);
-    planeTrbl.bottom = Math.max(trbl.bottom, planeTrbl.bottom);
-  });
-
-  return asBounds(planeTrbl);
-}
-
 function notYetDrawn(translate, semantic, refSemantic, property) {
   return new Error(translate('element {element} referenced by {referenced}#{property} not yet drawn', {
     element: elementToString(refSemantic),
@@ -130,39 +102,18 @@ 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')) {
-      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,
-        hidden: false,
-        x: bounds.x - PLANE_PADDING,
-        y: bounds.y - PLANE_PADDING,
-        width: bounds.width + PLANE_PADDING * 2,
-        height: bounds.height + PLANE_PADDING * 2,
-        isFrame: true
-      }));
-
-      element.id = element.id + '_secondary';
-      element.isSecondary = true;
-      element.primaryShape = primary;
-
-      this._canvas.addShape(element, plane.rootElement);
+      element.id = element.id + '_plane';
     }
-    else {
-
-      // add a virtual element (not being drawn)
-      element = this._elementFactory.createRoot(elementData(semantic, di));
 
-      this._canvas.createPlane(semantic.id, element);
-    }
+    this._canvas.createPlane(semantic.id, element);
   }
 
   // SHAPE
@@ -173,7 +124,7 @@ BpmnImporter.prototype.add = function(semantic, di, parentElement) {
 
     hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-    bounds = di.bounds;
+    var bounds = di.bounds;
 
     element = this._elementFactory.createShape(elementData(semantic, di, {
       collapsed: collapsed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "9.0.0-subprocesses.1",
+  "version": "9.0.0-subprocesses.2",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "index.js",
   "files": [
@@ -100,7 +100,7 @@
   "dependencies": {
     "bpmn-moddle": "^7.1.2",
     "css.escape": "^1.5.1",
-    "diagram-js": "^7.6.0",
+    "diagram-js": "^7.6.1",
     "diagram-js-direct-editing": "^1.6.3",
     "ids": "^1.0.0",
     "inherits": "^2.0.4",

package/test/helper/index.js

@@ -256,12 +256,7 @@ export function createViewer(container, viewerInstance, xml, diagramId) {
 
   clearBpmnJS();
 
-  var viewer = new viewerInstance({
-    container: container,
-    canvas: {
-      deferUpdate: false
-    }
-  });
+  var viewer = new viewerInstance({ container: container });
 
   setBpmnJS(viewer);
 

package/lib/features/subprocess-navigation/SubprocessCompatibility.js

@@ -1,135 +0,0 @@
-
-import { selfAndAllChildren } from 'diagram-js/lib/util/Elements';
-import { isExpanded } from '../../util/DiUtil';
-import { getBusinessObject, getDi, is } from '../../util/ModelUtil';
-
-export default function SubprocessCompatibility(eventBus, elementRegistry, canvas, moddle, elementFactory, bpmnjs) {
-  this._eventBus = eventBus;
-  this._elementRegistry = elementRegistry;
-  this._canvas = canvas;
-  this._bpmnjs = bpmnjs;
-  this._moddle = moddle;
-  this._elementFactory = elementFactory;
-
-  var self = this;
-
-  eventBus.on('import.done', 1500, function() {
-    self._handleImport();
-  });
-}
-
-SubprocessCompatibility.prototype._handleImport = function() {
-  var elementRegistry = this._elementRegistry;
-  var canvas = this._canvas;
-  var elementFactory = this._elementFactory;
-  var self = this;
-  var legacyProcesses = elementRegistry.filter(function(element) {
-    return is(element, 'bpmn:SubProcess') && !isExpanded(element) && element.children && element.children.length;
-  });
-
-  legacyProcesses.forEach(function(oldParent) {
-    var bo = getBusinessObject(oldParent);
-
-    var newDiagram = self.createDiagram(bo);
-
-    var newParent = elementFactory.createRoot(
-      {
-        id: bo.id,
-        type: bo.$type,
-        businessObject: bo,
-        di: newDiagram.plane
-      }
-    );
-
-    newParent.id = newParent.id + '_plane';
-
-    canvas.createPlane(bo.id, newParent);
-
-    var elementsToChange = selfAndAllChildren(oldParent).filter(function(el) {
-      return el !== oldParent;
-    });
-
-    self.moveElementsToRoot(elementsToChange);
-
-    elementsToChange.forEach(function(el) {
-      if (el.parent === oldParent) {
-        el.parent = newParent;
-      }
-      el.hidden = el.parent && (el.parent.hidden || el.parent.collapsed);
-
-      self.moveToDiPlane(el, newDiagram.plane);
-
-      self._eventBus.fire('elements.changed', { elements: [el] });
-    });
-  });
-
-};
-
-SubprocessCompatibility.prototype.moveToDiPlane = function(element, newPlane) {
-  var di = getDi(element);
-  var containingDiagram = findRootDiagram(di);
-
-  // Remove DI from old Plane and add it to the new one
-  var parentPlaneElement = containingDiagram.plane.get('planeElement');
-  parentPlaneElement.splice(parentPlaneElement.indexOf(di), 1);
-  newPlane.get('planeElement').push(di);
-};
-
-SubprocessCompatibility.prototype.moveElementsToRoot = function(elements) {
-  var defaultPosition = { x: 180, y: 160 },
-      minX = Infinity,
-      minY = Infinity;
-
-  elements.forEach(function(el) {
-    minX = Math.min(minX, el.x || Infinity);
-    minY = Math.min(minY, el.y || Infinity);
-  });
-
-  var xOffset = defaultPosition.x - minX;
-  var yOffset = defaultPosition.y - minY;
-
-  elements.forEach(function(el) {
-    if (el.waypoints) {
-      el.waypoints.forEach(function(waypoint) {
-        waypoint.x = waypoint.x + xOffset;
-        waypoint.y = waypoint.y + yOffset;
-      });
-    } else {
-      el.x = el.x + xOffset;
-      el.y = el.y + yOffset;
-    }
-  });
-};
-
-SubprocessCompatibility.prototype.getDefinitions = function() {
-  return this._bpmnjs._definitions || [];
-};
-
-SubprocessCompatibility.prototype.getDiagrams = function() {
-  return this.getDefinitions().diagrams || [];
-};
-
-SubprocessCompatibility.prototype.createDiagram = function(bo) {
-  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
-  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
-    plane: plane
-  });
-  plane.$parent = diagram;
-  plane.bpmnElement = bo;
-  diagram.$parent = this.getDefinitions();
-  this.getDiagrams().push(diagram);
-  return diagram;
-};
-
-SubprocessCompatibility.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'moddle', 'elementFactory', 'bpmnjs' ];
-
-
-//  Util
-
-var findRootDiagram = function(element) {
-  if (is(element, 'bpmndi:BPMNDiagram')) {
-    return element;
-  } else {
-    return findRootDiagram(element.$parent);
-  }
-};