bpmn-js 8.8.0 → 9.0.0-subprocesses.1

package/lib/import/BpmnImporter.js

@@ -10,6 +10,8 @@ import {
 } from '../util/LabelUtil';
 
 import {
+  asBounds,
+  asTRBL,
   getMid
 } from 'diagram-js/lib/layout/LayoutUtil';
 
@@ -26,17 +28,18 @@ import {
 } from './Util';
 
 
-function elementData(semantic, attrs) {
+function elementData(semantic, di, attrs) {
   return assign({
     id: semantic.id,
     type: semantic.$type,
-    businessObject: semantic
+    businessObject: semantic,
+    di: di
   }, attrs);
 }
 
-function getWaypoints(bo, source, target) {
+function getWaypoints(di, source, target) {
 
-  var waypoints = bo.di.waypoint;
+  var waypoints = di.waypoint;
 
   if (!waypoints || waypoints.length < 2) {
     return [ getMid(source), getMid(target) ];
@@ -47,6 +50,32 @@ function getWaypoints(bo, 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),
@@ -92,10 +121,8 @@ BpmnImporter.$inject = [
  * Add bpmn element (semantic) to the canvas onto the
  * specified parent shape.
  */
-BpmnImporter.prototype.add = function(semantic, parentElement) {
-
-  var di = semantic.di,
-      element,
+BpmnImporter.prototype.add = function(semantic, di, parentElement) {
+  var element,
       translate = this._translate,
       hidden;
 
@@ -106,22 +133,49 @@ BpmnImporter.prototype.add = function(semantic, parentElement) {
   // invisible root element (process or collaboration)
   if (is(di, 'bpmndi:BPMNPlane')) {
 
-    // add a virtual element (not being drawn)
-    element = this._elementFactory.createRoot(elementData(semantic));
+    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
+      }));
 
-    this._canvas.setRootElement(element);
+      element.id = element.id + '_secondary';
+      element.isSecondary = true;
+      element.primaryShape = primary;
+
+      this._canvas.addShape(element, plane.rootElement);
+    }
+    else {
+
+      // add a virtual element (not being drawn)
+      element = this._elementFactory.createRoot(elementData(semantic, di));
+
+      this._canvas.createPlane(semantic.id, element);
+    }
   }
 
   // SHAPE
   else if (is(di, 'bpmndi:BPMNShape')) {
 
-    var collapsed = !isExpanded(semantic),
+    var collapsed = !isExpanded(semantic, di),
         isFrame = isFrameElement(semantic);
+
     hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-    var bounds = semantic.di.bounds;
+    bounds = di.bounds;
 
-    element = this._elementFactory.createShape(elementData(semantic, {
+    element = this._elementFactory.createShape(elementData(semantic, di, {
       collapsed: collapsed,
       hidden: hidden,
       x: Math.round(bounds.x),
@@ -144,7 +198,7 @@ BpmnImporter.prototype.add = function(semantic, parentElement) {
 
       // check whether data store is inside our outside of its semantic parent
       if (!isPointInsideBBox(parentElement, getMid(bounds))) {
-        parentElement = this._canvas.getRootElement();
+        parentElement = this._canvas.findPlane(parentElement).rootElement;
       }
     }
 
@@ -159,11 +213,11 @@ BpmnImporter.prototype.add = function(semantic, parentElement) {
 
     hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-    element = this._elementFactory.createConnection(elementData(semantic, {
+    element = this._elementFactory.createConnection(elementData(semantic, di, {
       hidden: hidden,
       source: source,
       target: target,
-      waypoints: getWaypoints(semantic, source, target)
+      waypoints: getWaypoints(di, source, target)
     }));
 
     if (is(semantic, 'bpmn:DataAssociation')) {
@@ -172,7 +226,7 @@ BpmnImporter.prototype.add = function(semantic, parentElement) {
       // are rendered correctly across different "hacks" people
       // love to model such as cross participant / sub process
       // associations
-      parentElement = null;
+      parentElement = this._canvas.findPlane(parentElement).rootElement;
     }
 
     // insert sequence flows behind other flow nodes (cf. #727)
@@ -190,7 +244,7 @@ BpmnImporter.prototype.add = function(semantic, parentElement) {
 
   // (optional) LABEL
   if (isLabelExternal(semantic) && getLabel(element)) {
-    this.addLabel(semantic, element);
+    this.addLabel(semantic, di, element);
   }
 
 
@@ -239,12 +293,12 @@ BpmnImporter.prototype._attachBoundary = function(boundarySemantic, boundaryElem
 /**
  * add label for an element
  */
-BpmnImporter.prototype.addLabel = function(semantic, element) {
+BpmnImporter.prototype.addLabel = function(semantic, di, element) {
   var bounds,
       text,
       label;
 
-  bounds = getExternalLabelBounds(semantic, element);
+  bounds = getExternalLabelBounds(di, element);
 
   text = getLabel(element);
 
@@ -254,7 +308,7 @@ BpmnImporter.prototype.addLabel = function(semantic, element) {
     bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
   }
 
-  label = this._elementFactory.createLabel(elementData(semantic, {
+  label = this._elementFactory.createLabel(elementData(semantic, di, {
     id: semantic.id + '_label',
     labelTarget: element,
     type: 'label',

package/lib/import/BpmnTreeWalker.js

@@ -4,16 +4,14 @@ import {
   forEach
 } from 'min-dash';
 
-import Refs from 'object-refs';
-
 import {
   elementToString
 } from './Util';
 
-var diRefs = new Refs(
-  { name: 'bpmnElement', enumerable: true },
-  { name: 'di', configurable: true }
-);
+import {
+  ensureCompatDiRef
+} from '../util/CompatibilityUtil';
+
 
 /**
  * Returns true if an element has the given meta-model type
@@ -48,6 +46,8 @@ export default function BpmnTreeWalker(handler, translate) {
   // prerequisites are drawn
   var deferred = [];
 
+  var diMap = {};
+
   // Helpers //////////////////////
 
   function contextual(fn, ctx) {
@@ -76,17 +76,17 @@ export default function BpmnTreeWalker(handler, translate) {
     }
 
     // call handler
-    return handler.element(element, ctx);
+    return handler.element(element, diMap[element.id], ctx);
   }
 
   function visitRoot(element, diagram) {
-    return handler.root(element, diagram);
+    return handler.root(element, diMap[element.id], diagram);
   }
 
   function visitIfDi(element, ctx) {
 
     try {
-      var gfx = element.di && visit(element, ctx);
+      var gfx = diMap[element.id] && visit(element, ctx);
 
       handled(element);
 
@@ -109,7 +109,7 @@ export default function BpmnTreeWalker(handler, translate) {
     var bpmnElement = di.bpmnElement;
 
     if (bpmnElement) {
-      if (bpmnElement.di) {
+      if (diMap[bpmnElement.id]) {
         logError(
           translate('multiple DI elements defined for {element}', {
             element: elementToString(bpmnElement)
@@ -117,8 +117,9 @@ export default function BpmnTreeWalker(handler, translate) {
           { element: bpmnElement }
         );
       } else {
-        diRefs.bind(bpmnElement, 'di');
-        bpmnElement.di = di;
+        diMap[bpmnElement.id] = di;
+
+        ensureCompatDiRef(bpmnElement);
       }
     } else {
       logError(
@@ -175,6 +176,7 @@ export default function BpmnTreeWalker(handler, translate) {
     }
 
     // load DI from selected diagram only
+    diMap = {};
     handleDiagram(diagram);
 
 
@@ -214,7 +216,7 @@ export default function BpmnTreeWalker(handler, translate) {
 
     var ctx = visitRoot(rootElement, plane);
 
-    if (is(rootElement, 'bpmn:Process')) {
+    if (is(rootElement, 'bpmn:Process') || is(rootElement, 'bpmn:SubProcess')) {
       handleProcess(rootElement, ctx);
     } else if (is(rootElement, 'bpmn:Collaboration')) {
       handleCollaboration(rootElement, ctx);
@@ -427,15 +429,15 @@ export default function BpmnTreeWalker(handler, translate) {
     }
   }
 
-  function handleCollaboration(collaboration) {
+  function handleCollaboration(collaboration, context) {
 
-    forEach(collaboration.participants, contextual(handleParticipant));
+    forEach(collaboration.participants, contextual(handleParticipant, context));
 
-    handleArtifacts(collaboration.artifacts);
+    handleArtifacts(collaboration.artifacts, context);
 
     // handle message flows latest in the process
     deferred.push(function() {
-      handleMessageFlows(collaboration.messageFlows);
+      handleMessageFlows(collaboration.messageFlows, context);
     });
   }
 

package/lib/import/Importer.js

@@ -33,7 +33,8 @@ export function importBpmnDiagram(diagram, definitions, bpmnDiagram) {
 
   var importer,
       eventBus,
-      translate;
+      translate,
+      canvas;
 
   var error,
       warnings = [];
@@ -49,12 +50,12 @@ export function importBpmnDiagram(diagram, definitions, bpmnDiagram) {
 
     var visitor = {
 
-      root: function(element) {
-        return importer.add(element);
+      root: function(element, di) {
+        return importer.add(element, di);
       },
 
-      element: function(element, parentShape) {
-        return importer.add(element, parentShape);
+      element: function(element, di, parentShape) {
+        return importer.add(element, di, parentShape);
       },
 
       error: function(message, context) {
@@ -66,7 +67,16 @@ export function importBpmnDiagram(diagram, definitions, bpmnDiagram) {
 
     // traverse BPMN 2.0 document model,
     // starting at definitions
-    walker.handleDefinitions(definitions, bpmnDiagram);
+    if (!bpmnDiagram && definitions.diagrams) {
+      for (var i = 0; i < definitions.diagrams.length; i++) {
+        walker.handleDefinitions(definitions, definitions.diagrams[i]);
+      }
+    } else {
+      walker.handleDefinitions(definitions, bpmnDiagram);
+    }
+
+    var mainDiagram = bpmnDiagram || definitions.diagrams[0];
+    canvas.setActivePlane(mainDiagram.plane.bpmnElement.id);
   }
 
   return new Promise(function(resolve, reject) {
@@ -74,6 +84,7 @@ export function importBpmnDiagram(diagram, definitions, bpmnDiagram) {
       importer = diagram.get('bpmnImporter');
       eventBus = diagram.get('eventBus');
       translate = diagram.get('translate');
+      canvas = diagram.get('canvas');
 
       eventBus.fire('import.render.start', { definitions: definitions });
 

package/lib/util/CompatibilityUtil.js

@@ -1,4 +1,7 @@
-import { isFunction } from 'min-dash';
+import {
+  has,
+  isFunction
+} from 'min-dash';
 
 // TODO(nikku): remove with future bpmn-js version
 
@@ -51,3 +54,20 @@ export function wrapForCompatibility(api) {
     }
   };
 }
+
+
+// TODO(nikku): remove with future bpmn-js version
+
+var DI_ERROR_MESSAGE = 'Tried to access di from the businessObject. The di is available through the diagram element only. For more information, see https://github.com/bpmn-io/bpmn-js/issues/1472';
+
+export function ensureCompatDiRef(businessObject) {
+
+  // bpmnElement can have multiple independent DIs
+  if (!has(businessObject, 'di')) {
+    Object.defineProperty(businessObject, 'di', {
+      get: function() {
+        throw new Error(DI_ERROR_MESSAGE);
+      }
+    });
+  }
+}

package/lib/util/DiUtil.js

@@ -1,6 +1,7 @@
 import {
   is,
-  getBusinessObject
+  getBusinessObject,
+  getDi
 } from './ModelUtil';
 
 import {
@@ -8,14 +9,20 @@ import {
 } from 'min-dash';
 
 
-export function isExpanded(element) {
+export function isExpanded(element, di) {
 
   if (is(element, 'bpmn:CallActivity')) {
     return false;
   }
 
   if (is(element, 'bpmn:SubProcess')) {
-    return getBusinessObject(element).di && !!getBusinessObject(element).di.isExpanded;
+    di = di || getDi(element);
+
+    if (di && is(di, 'bpmndi:BPMNPlane')) {
+      return true;
+    }
+
+    return di && !!di.isExpanded;
   }
 
   if (is(element, 'bpmn:Participant')) {

package/lib/util/LabelUtil.js

@@ -116,15 +116,14 @@ export function getExternalLabelMid(element) {
  * Returns the bounds of an elements label, parsed from the elements DI or
  * generated from its bounds.
  *
- * @param {BpmnElement} semantic
+ * @param {BpmndDi} di
  * @param {djs.model.Base} element
  */
-export function getExternalLabelBounds(semantic, element) {
+export function getExternalLabelBounds(di, element) {
 
   var mid,
       size,
       bounds,
-      di = semantic.di,
       label = di.label;
 
   if (label && label.bounds) {

package/lib/util/ModelUtil.js

@@ -22,4 +22,15 @@ export function is(element, type) {
  */
 export function getBusinessObject(element) {
   return (element && element.businessObject) || element;
+}
+
+/**
+ * Return the di object for a given element.
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {ModdleElement}
+ */
+export function getDi(element) {
+  return element && element.di;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "8.8.0",
+  "version": "9.0.0-subprocesses.1",
   "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.5.0",
+    "diagram-js": "^7.6.0",
     "diagram-js-direct-editing": "^1.6.3",
     "ids": "^1.0.0",
     "inherits": "^2.0.4",

package/test/helper/index.js

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

package/test/matchers/BoundsMatchers.js

@@ -3,7 +3,7 @@ import {
 } from 'min-dash';
 
 import {
-  getBusinessObject
+  getDi
 } from 'lib/util/ModelUtil';
 
 var BOUNDS_ATTRS = [ 'x', 'y', 'width', 'height' ],
@@ -82,11 +82,11 @@ export default function(chai, utils) {
   Assertion.addMethod('diBounds', function(exp) {
     var obj = this._obj;
 
-    var bo = getBusinessObject(obj);
+    var di = getDi(obj);
 
-    expect(bo).to.have.property('di');
+    expect(di).to.exist;
 
-    assertBounds(this, bo.id + '#di', getBounds(bo.di), getBounds(exp));
+    assertBounds(this, di.id, getBounds(di), getBounds(exp));
   });
 
   /**
@@ -125,11 +125,11 @@ export default function(chai, utils) {
 
     var obj = this._obj;
 
-    var bo = getBusinessObject(obj);
+    var di = getDi(obj);
 
-    expect(bo).to.have.property('di');
+    expect(di).to.exist;
 
-    assertDimensions(this, bo.id + '#di', getDimensions(bo.di), getDimensions(exp));
+    assertDimensions(this, di.id, getDimensions(di), getDimensions(exp));
   });
 
 
@@ -169,11 +169,11 @@ export default function(chai, utils) {
 
     var obj = this._obj;
 
-    var bo = getBusinessObject(obj);
+    var di = getDi(obj);
 
-    expect(bo).to.have.property('di');
+    expect(di).to.exist;
 
-    assertPosition(this, bo.id + '#di', getPosition(bo.di), getPosition(exp));
+    assertPosition(this, di.id, getPosition(di), getPosition(exp));
   });
 
 

package/test/matchers/ConnectionMatchers.js

@@ -3,7 +3,7 @@ import {
 } from 'min-dash';
 
 import {
-  getBusinessObject
+  getDi
 } from 'lib/util/ModelUtil';
 
 var POSITION_ATTRS = [ 'x', 'y' ];
@@ -61,13 +61,13 @@ export default function(chai, utils) {
   Assertion.addMethod('diWaypoints', function(exp) {
     var obj = this._obj;
 
-    var bo = getBusinessObject(obj);
+    var di = getDi(obj);
 
-    expect(bo).to.have.property('di');
+    expect(di).to.exist;
 
-    expect(bo.di).to.have.property('waypoint');
+    expect(di).to.have.property('waypoint');
 
-    assertWaypoints(this, obj.id + '#di#waypoint', getPoints(bo.di.waypoint), getPoints(exp));
+    assertWaypoints(this, di + '#waypoint', getPoints(di.waypoint), getPoints(exp));
   });
 
 

package/test/util/MockEvents.js

@@ -13,7 +13,7 @@ import {
  * specified canvas local coordinates.
  *
  * @param {Point} point of the event local the canvas (closure)
- * @param {Object} data
+ * @param {Object} [data]
  *
  * @return {Event} event, scoped to the given canvas
  */
@@ -34,7 +34,15 @@ export function createCanvasEvent(position, data) {
   });
 }
 
-
+/**
+ * Create an Event
+ *
+ * @param  {Element} target
+ * @param  { { x: number, y: number } } position
+ * @param  {any} [data]
+ *
+ * @return {Event}
+ */
 export function createEvent(target, position, data) {
 
   return getBpmnJS().invoke(function(eventBus) {