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

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

@@ -0,0 +1,135 @@
+
+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);
+  }
+};

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

@@ -0,0 +1,55 @@
+import { getBusinessObject, is } from '../../util/ModelUtil';
+
+export default function SubprocessElements(eventBus, elementRegistry, canvas, elementFactory) {
+  var attachBoundaries = function() {
+    var secondaryShapes = elementRegistry.filter(function(el) {
+      return is(el, 'bpmn:SubProcess') && el.isSecondary;
+    });
+
+    secondaryShapes.forEach(function(process) {
+
+      // Add Boundary events
+      if (process.primaryShape && process.primaryShape.attachers) {
+        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);
+}
+
+
+SubprocessElements.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'elementFactory' ];

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

@@ -0,0 +1,109 @@
+var FLOW_LENGTH = 50;
+var HIGH_RENDER_PRIORITY = 2000;
+
+export default function SubprocessFlows(eventBus, config) {
+
+  var mutedStrokeColor = (config && config.mutedStrokeColor) || '#dddddd';
+
+  function drawFakeFlows(element, parentGfx) {
+    var primary = element.primaryShape;
+
+    var drawFakeConnection = function(connection, isOutgoing) {
+
+      var segment;
+      if (isOutgoing) {
+        segment = connection.waypoints.slice(0, 2);
+
+        // Reverse order for normalizing
+        segment = segment.reverse();
+      } else {
+        segment = connection.waypoints.slice(connection.waypoints.length - 2);
+      }
+
+      var endpoint = segment[1];
+
+      var relativePosition = {
+        x: (endpoint.x - primary.x) / primary.width,
+        y: (endpoint.y - primary.y) / primary.height
+      };
+
+      var anchorPoint = {
+        x: endpoint.x - (element.width * relativePosition.x),
+        y: endpoint.y - (element.height * relativePosition.y)
+      };
+
+      var newWaypoints = segment.map(function(el) {
+        return { x: el.x - anchorPoint.x, y: el.y - anchorPoint.y };
+      });
+
+      newWaypoints[0] = normalizeLength(newWaypoints[1], newWaypoints[0], FLOW_LENGTH);
+
+      var attrs = {
+        stroke: mutedStrokeColor
+      };
+
+      if (isOutgoing) {
+
+        // Reverse order again for correct end marker position
+        newWaypoints = newWaypoints.reverse();
+      } else {
+
+        // Remove start marker for incoming flows
+        attrs.markerStart = undefined;
+      }
+
+      eventBus.fire('render.connection', {
+        type: connection.type,
+        gfx: parentGfx,
+        element: {
+          type: connection.type,
+          waypoints: newWaypoints,
+          di: connection.di,
+          businessObject: connection.businessObject
+        },
+        attrs: attrs
+      });
+    };
+
+    primary.incoming && primary.incoming.forEach(function(connection) {
+      drawFakeConnection(connection, false);
+    });
+
+    primary.outgoing && primary.outgoing.forEach(function(connection) {
+      drawFakeConnection(connection, true);
+    });
+  }
+
+  eventBus.on([ 'render.shape' ], HIGH_RENDER_PRIORITY, function(evt, context) {
+    var element = context.element,
+        visuals = context.gfx;
+
+    if (element.isSecondary && element.primaryShape) {
+      drawFakeFlows(element, visuals);
+    }
+
+  });
+
+}
+
+SubprocessFlows.$inject = [ 'eventBus', 'config' ];
+
+
+// helpers
+
+function normalizeLength(fixedPoint, variablePoint, length) {
+  var dx = fixedPoint.x - variablePoint.x,
+      dy = fixedPoint.y - variablePoint.y,
+      totalDistance = Math.abs(dx) + Math.abs(dy);
+
+  dx = dx / totalDistance;
+  dy = dy / totalDistance;
+
+  dx *= length;
+  dy *= length;
+
+  return {
+    x: fixedPoint.x - dx,
+    y: fixedPoint.y - dy
+  };
+}

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

@@ -0,0 +1,104 @@
+import { domify } from 'min-dom';
+
+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);
+
+    var parents = getParentChain(subProcess);
+
+    var path = parents.map(function(el) {
+      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() {
+        if (canvas.getPlane(el.id)) {
+          canvas.setActivePlane(el.id);
+        } else {
+          var plane = canvas.findPlane(el.id);
+          canvas.setActivePlane(plane);
+        }
+      });
+
+      return link;
+    });
+
+    path.forEach(function(el) {
+      breadcrumbs.appendChild(el);
+    });
+
+    overlays.add(subProcess, {
+      position: {
+        top: -30,
+        left: -10
+      },
+      html: breadcrumbs
+    });
+  }
+
+  var createDrilldown = function(element) {
+    var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+
+    html.addEventListener('click', function() {
+      canvas.setActivePlane(element.id);
+    });
+
+    overlays.add(element, {
+      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)) {
+        createDrilldown(element);
+      }
+
+      if (is(element, 'bpmn:SubProcess') && element.isSecondary) {
+        createBreadcrumbs(element);
+      }
+    });
+  };
+
+  eventBus.on('import.done', function() {
+    addOverlays(elementRegistry.filter(function(el) {
+      return is(el, 'bpmn:SubProcess');
+    }));
+  });
+}
+
+SubprocessOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+
+
+var getParentChain = function(child) {
+  var bo = getBusinessObject(child);
+
+  var parents = [];
+
+  for (var element = bo; element; element = element.$parent) {
+    if (is(element, 'bpmn:SubProcess') || is(element, 'bpmn:Process')) {
+      parents.push(element);
+    }
+  }
+
+  return parents.reverse();
+};

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

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

package/lib/import/BpmnImporter.js

@@ -10,6 +10,8 @@ import {
 } from '../util/LabelUtil';
 
 import {
+  asBounds,
+  asTRBL,
   getMid
 } from 'diagram-js/lib/layout/LayoutUtil';
 
@@ -48,6 +50,32 @@ 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),
@@ -93,12 +121,10 @@ BpmnImporter.$inject = [
  * Add bpmn element (semantic) to the canvas onto the
  * specified parent shape.
  */
-BpmnImporter.prototype.add = function(context, parentElement) {
+BpmnImporter.prototype.add = function(semantic, di, parentElement) {
   var element,
       translate = this._translate,
-      hidden,
-      semantic = context.element,
-      di = context.di;
+      hidden;
 
   var parentIndex;
 
@@ -107,14 +133,36 @@ BpmnImporter.prototype.add = function(context, 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, di));
+    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;
 
-    if (this._elementRegistry.get(element.id)) {
-      element.id = element.id + '_layer';
+      this._canvas.addShape(element, plane.rootElement);
     }
+    else {
 
-    this._canvas.setRootElementForPlane(element, semantic.id);
+      // add a virtual element (not being drawn)
+      element = this._elementFactory.createRoot(elementData(semantic, di));
+
+      this._canvas.createPlane(semantic.id, element);
+    }
   }
 
   // SHAPE
@@ -122,9 +170,10 @@ BpmnImporter.prototype.add = function(context, parentElement) {
 
     var collapsed = !isExpanded(semantic, di),
         isFrame = isFrameElement(semantic);
+
     hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-    var bounds = di.bounds;
+    bounds = di.bounds;
 
     element = this._elementFactory.createShape(elementData(semantic, di, {
       collapsed: collapsed,

package/lib/import/BpmnTreeWalker.js

@@ -76,11 +76,11 @@ export default function BpmnTreeWalker(handler, translate) {
     }
 
     // call handler
-    return handler.element({ element: element, di: diMap[element.id] }, ctx);
+    return handler.element(element, diMap[element.id], ctx);
   }
 
   function visitRoot(element, diagram) {
-    return handler.root({ element: element, di: diMap[element.id] }, diagram);
+    return handler.root(element, diMap[element.id], diagram);
   }
 
   function visitIfDi(element, ctx) {

package/lib/import/Importer.js

@@ -50,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) {

package/lib/util/DiUtil.js

@@ -10,6 +10,7 @@ import {
 
 
 export function isExpanded(element, di) {
+
   if (is(element, 'bpmn:CallActivity')) {
     return false;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "9.0.0-subprocesses.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.4.0-subprocesses.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/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) {