feat: add Overlays to navigate collapsed subprocesses

This introduces a new css file to bpmn-js. To upgrade, please include
`dist/assets/bpmn-js.css` in your application.

closes #1483

assets/bpmn-js.css

@@ -0,0 +1,51 @@
+.bjs-container {
+  --bjs-font-family: Arial, sans-serif;
+}
+
+.bjs-breadcrumbs {
+  position: absolute;
+  top: 10px;
+  left: 100px;
+  font-family: var(--bjs-font-family);
+}
+
+.bjs-breadcrumbs li {
+  display: inline-block;
+  color: var(--blue-base-65);
+  cursor: pointer;
+}
+
+.bjs-breadcrumbs li:last-of-type {
+  color: inherit;
+  cursor: default;
+}
+
+.bjs-breadcrumbs li:not(:first-child)::before {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>');
+  padding: 0 8px;
+  color: black;
+}
+
+.bjs-breadcrumbs .bpmnjs-crumb {
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bjs-drilldown {
+  width: 20px;
+  height: 20px;
+
+  padding: 0px;
+  margin-left: -20px;
+
+  cursor: pointer;
+  border: none;
+  border-radius: 2px;
+  outline: none;
+
+  fill: white;
+  background-color: var(--blue-base-65);
+}

lib/Viewer.js

@@ -4,6 +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 BaseViewer from './BaseViewer';
 
@@ -66,7 +67,8 @@ Viewer.prototype._modules = [
   CoreModule,
   TranslateModule,
   SelectionModule,
-  OverlaysModule
+  OverlaysModule,
+  SubprocessNavigationModule
 ];
 
 // default moddle extensions the viewer is composed of

lib/features/subprocess-navigation/SubprocessCentering.js

@@ -0,0 +1,35 @@
+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,
+      y: currentViewbox.y,
+      zoom: currentViewbox.scale
+    };
+
+    var planeId = event.plane.name;
+    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;
+
+    if (dx !== 0 || dy !== 0) {
+      canvas.scroll({
+        dx: dx,
+        dy: dy
+      });
+    }
+
+    if (storedViewbox.zoom !== currentViewbox.scale) {
+      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
+    }
+
+    currentPlane = planeId;
+  });
+}
+
+SubprocessCentering.$inject = [ 'eventBus', 'canvas' ];

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);
+  }
+};

lib/features/subprocess-navigation/SubprocessOverlays.js

@@ -0,0 +1,100 @@
+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>';
+
+export default function SubprocessOverlays(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 link = domify('<li><span class="bpmnjs-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;
+    });
+
+    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);
+    });
+  }
+
+  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() {
+      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)) {
+        createOverlay(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();
+};

lib/features/subprocess-navigation/index.js

@@ -0,0 +1,14 @@
+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 ]
+};

tasks/build-distro.js

@@ -28,6 +28,9 @@ cp(resolve('bpmn-font', '/dist/{font,css}/**'), dest + '/assets/bpmn-font');
 console.log('copy diagram-js.css to ' + dest);
 cp(resolve('diagram-js', '/assets/**'), dest + '/assets');
 
+console.log('copy bpmn-js.css to ' + dest);
+cp('./assets/bpmn-js.css', dest + '/assets');
+
 console.log('building pre-packaged distributions');
 
 var NODE_ENV = process.env.NODE_ENV;

test/TestHelper.js

@@ -4,6 +4,8 @@ import {
   insertCSS
 } from './helper';
 
+insertCSS('bpmn-js.css', require('../assets/bpmn-js.css'));
+
 insertCSS('diagram-js.css', require('diagram-js/assets/diagram-js.css'));
 
 insertCSS('bpmn-embedded.css', require('bpmn-font/dist/css/bpmn-embedded.css'));

test/spec/features/subprocess-navigation/SubprocessNavigationSpec.js

@@ -0,0 +1,210 @@
+import {
+  inject
+} from 'test/TestHelper';
+
+import coreModule from 'lib/core';
+import subprocessNavigationModule from 'lib/features/subprocess-navigation';
+import { bootstrapViewer } from '../../../helper';
+
+describe('features - subprocess-navigation', function() {
+
+  var testModules = [
+    coreModule,
+    subprocessNavigationModule
+  ];
+
+  var multiLayerXML = require('./nested-subprocesses.bpmn');
+  var legacyXML = require('./legacy-subprocesses.bpmn');
+
+  beforeEach(bootstrapViewer(multiLayerXML, { modules: testModules }));
+
+  describe('Overlays', function() {
+
+    it('should show overlay on Subprocess with content', inject(function(elementRegistry, overlays) {
+
+      // given
+      var collapsedProcess = elementRegistry.get('collapsedProcess');
+      var overlay = overlays.get({ element: collapsedProcess });
+
+      // then
+      expect(overlay).to.exist;
+    }));
+
+
+    it('should not show overlay on Subprocess without content', inject(function(elementRegistry, overlays) {
+
+      // given
+      var collapsedProcess = elementRegistry.get('collapsedProcess_withoutContent');
+      var overlay = overlays.get({ element: collapsedProcess });
+
+      // then
+      expect(overlay).to.not.exist;
+    }));
+
+
+    it('should switch plane on click', inject(function(elementRegistry, overlays, canvas) {
+
+      // given
+      var collapsedProcess = elementRegistry.get('collapsedProcess');
+      var overlay = overlays.get({ element: collapsedProcess })[0];
+
+      // when
+      overlay.html.click();
+
+      // then
+      var plane = canvas.getActivePlane();
+      expect(plane.name).to.eql('collapsedProcess');
+    }));
+
+  });
+
+
+  describe('Breadcrumbs', function() {
+
+    it('should not show breadcrumbs in root view', inject(function(canvas) {
+
+      // given
+      var breadcrumbs = canvas.getContainer().querySelector('.bjs-breadcrumbs');
+
+      // then
+      expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.true;
+    }));
+
+
+    it('should show breadcrumbs in subprocess view', inject(function(canvas) {
+
+      // given
+      var breadcrumbs = canvas.getContainer().querySelector('.bjs-breadcrumbs');
+
+      // when
+      canvas.setActivePlane('collapsedProcess');
+
+      // then
+      expect(breadcrumbs.classList.contains('djs-element-hidden')).to.be.false;
+    }));
+
+
+    it('should show execution tree', inject(function(canvas) {
+
+      // given
+      var breadcrumbs = canvas.getContainer().querySelector('.bjs-breadcrumbs');
+
+      // when
+      canvas.setActivePlane('collapsedProcess_2');
+
+      // then
+      expectBreadcrumbs(breadcrumbs, ['Root', 'Collapsed Process', 'Expanded Process', 'Collapsed Process 2']);
+    }));
+
+
+    it('should switch to process plane on click', inject(function(canvas) {
+
+      // given
+      var breadcrumbs = canvas.getContainer().querySelector('.bjs-breadcrumbs');
+      canvas.setActivePlane('collapsedProcess_2');
+
+      // when
+      breadcrumbs.children[1].click();
+
+      // then
+      expectBreadcrumbs(breadcrumbs, ['Root', 'Collapsed Process']);
+    }));
+
+
+    it('should switch to containing process plane on embedded click', inject(function(canvas) {
+
+      // given
+      var breadcrumbs = canvas.getContainer().querySelector('.bjs-breadcrumbs');
+      canvas.setActivePlane('collapsedProcess_2');
+
+      // when
+      breadcrumbs.children[2].click();
+
+      // then
+      expectBreadcrumbs(breadcrumbs, ['Root', 'Collapsed Process']);
+    }));
+
+  });
+
+
+  describe('Navigation', function() {
+
+    it('should reset scroll and zoom', inject(function(canvas) {
+
+      // given
+      canvas.scroll({ dx: 500, dy: 500 });
+      canvas.zoom(0.5);
+
+      // when
+      canvas.setActivePlane('collapsedProcess');
+
+      // then
+      var viewbox = canvas.viewbox();
+      expect(viewbox.x).to.eql(0);
+      expect(viewbox.y).to.eql(0);
+      expect(viewbox.scale).to.eql(1);
+    }));
+
+
+    it('should remember scroll and zoom', inject(function(canvas) {
+
+      // given
+      canvas.scroll({ dx: 500, dy: 500 });
+      canvas.zoom(0.5);
+      var zoomedAndScrolledViewbox = canvas.viewbox();
+
+      // when
+      canvas.setActivePlane('collapsedProcess');
+      canvas.setActivePlane('rootProcess');
+
+      // then
+      var newViewbox = canvas.viewbox();
+      expect(newViewbox.x).to.eql(zoomedAndScrolledViewbox.x);
+      expect(newViewbox.y).to.eql(zoomedAndScrolledViewbox.y);
+      expect(newViewbox.scale).to.eql(zoomedAndScrolledViewbox.scale);
+    }));
+
+  });
+
+
+  describe('Legacy Processes', function() {
+
+    beforeEach(bootstrapViewer(legacyXML, { modules: testModules }));
+
+    it('should import collapsed subprocess', inject(function(canvas) {
+
+      // when
+      var inlineProcess1 = canvas.getPlane('inlineSubprocess');
+      var inlineProcess2 = canvas.getPlane('inlineSubprocess_2');
+
+      // then
+      expect(inlineProcess1).to.exist;
+      expect(inlineProcess2).to.exist;
+    }));
+
+
+    it('should move inlined elements to sensible position', inject(function(elementRegistry) {
+
+      // when
+      var startEvent = elementRegistry.get('subprocess_startEvent');
+
+      // then
+      expect(startEvent).to.exist;
+      expect(startEvent.x).to.equal(180);
+      expect(startEvent.y).to.equal(160);
+    }));
+
+  });
+
+});
+
+
+// helpers
+
+function expectBreadcrumbs(breadcrumbs, expected) {
+  var crumbs = Array.from(breadcrumbs.children).map(function(element) {
+    return element.innerText;
+  });
+
+  expect(crumbs).to.eql(expected);
+}

test/spec/features/subprocess-navigation/legacy-subprocesses.bpmn

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_0763oqv" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.8.0" modeler:executionPlatform="Camunda Platform" modeler:executionPlatformVersion="7.15.0">
+  <bpmn:process id="Process_0vkcvif" isExecutable="true">
+    <bpmn:startEvent id="StartEvent_1" />
+    <bpmn:subProcess id="inlineSubprocess">
+      <bpmn:startEvent id="Event_0lrpy3a">
+        <bpmn:outgoing>Flow_0obnxbt</bpmn:outgoing>
+      </bpmn:startEvent>
+      <bpmn:sequenceFlow id="Flow_0obnxbt" sourceRef="Event_0lrpy3a" targetRef="inlineSubprocess_2" />
+      <bpmn:endEvent id="Event_1ic2bhx">
+        <bpmn:incoming>Flow_1d6ajf7</bpmn:incoming>
+      </bpmn:endEvent>
+      <bpmn:subProcess id="inlineSubprocess_2">
+        <bpmn:incoming>Flow_0obnxbt</bpmn:incoming>
+        <bpmn:outgoing>Flow_1d6ajf7</bpmn:outgoing>
+        <bpmn:startEvent id="subprocess_startEvent" />
+      </bpmn:subProcess>
+      <bpmn:sequenceFlow id="Flow_1d6ajf7" sourceRef="inlineSubprocess_2" targetRef="Event_1ic2bhx" />
+    </bpmn:subProcess>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0vkcvif">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds x="179" y="159" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="inlineSubprocess_di" bpmnElement="inlineSubprocess">
+        <dc:Bounds x="220" y="50" width="720" height="380" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_1d6ajf7_di" bpmnElement="Flow_1d6ajf7">
+        <di:waypoint x="740" y="240" />
+        <di:waypoint x="782" y="240" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_0obnxbt_di" bpmnElement="Flow_0obnxbt">
+        <di:waypoint x="308" y="240" />
+        <di:waypoint x="350" y="240" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Event_0lrpy3a_di" bpmnElement="Event_0lrpy3a">
+        <dc:Bounds x="272" y="222" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="inlineSubprocess_2_di" bpmnElement="inlineSubprocess_2">
+        <dc:Bounds x="350" y="120" width="390" height="240" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="subprocess_startEvent_di" bpmnElement="subprocess_startEvent">
+        <dc:Bounds x="410" y="222" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Event_1ic2bhx_di" bpmnElement="Event_1ic2bhx">
+        <dc:Bounds x="782" y="222" width="36" height="36" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/features/subprocess-navigation/nested-subprocesses.bpmn

@@ -0,0 +1,418 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:signavio="http://www.signavio.com" id="sid-edcb32b0-ba3c-4331-9874-58685c514c55" targetNamespace="http://www.signavio.com" expressionLanguage="http://www.w3.org/TR/XPath" exporter="Signavio Process Editor, http://www.signavio.com" exporterVersion="15.4.0" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
+  <error id="sid-c4218475-d7d4-4ee6-ae73-5d44c49114b8" />
+  <process id="rootProcess" name="Root" processType="None" isClosed="false" isExecutable="false">
+    <startEvent id="sid-6687E2F4-B03D-4E57-A62B-68FA642BE19C">
+      <outgoing>sid-89A3F9F2-CCC8-46C7-816B-DD8AC8A98300</outgoing>
+    </startEvent>
+    <parallelGateway id="parallelGateway" gatewayDirection="Diverging">
+      <incoming>sid-89A3F9F2-CCC8-46C7-816B-DD8AC8A98300</incoming>
+      <outgoing>sid-F06605E1-AEC1-4B39-8843-4AD3F547B557</outgoing>
+      <outgoing>sid-FC2ECAF5-771E-4ED3-BEF6-EFAB45E79500</outgoing>
+    </parallelGateway>
+    <subProcess id="collapsedProcess" name="Collapsed Process">
+      <incoming>sid-F06605E1-AEC1-4B39-8843-4AD3F547B557</incoming>
+      <outgoing>sid-31F6EC44-E44C-4121-B4FE-BD69AF208C05</outgoing>
+      <startEvent id="sid-AB14D824-C8B9-4211-B224-C5AF8CED8BBD">
+        <outgoing>sid-EB275CF2-5EF1-44FA-B41B-71EB37CC2657</outgoing>
+      </startEvent>
+      <task id="sid-9E3BA75C-29DD-4DAC-8283-8FDE4E9A6724" name="Check Items">
+        <incoming>sid-EB275CF2-5EF1-44FA-B41B-71EB37CC2657</incoming>
+        <outgoing>sid-FB543319-8DFB-4445-AAA3-720137FB230B</outgoing>
+      </task>
+      <subProcess id="expandedProcess" name="Expanded Process">
+        <extensionElements>
+          <signavio:signavioMetaData metaKey="bgcolor" metaValue="#ffffff" />
+          <signavio:signavioMetaData metaKey="bordercolor" metaValue="#000000" />
+        </extensionElements>
+        <incoming>sid-FB543319-8DFB-4445-AAA3-720137FB230B</incoming>
+        <outgoing>sid-B99D259B-1BD5-45FF-BD57-FB99C360BAC0</outgoing>
+        <startEvent id="sid-3B0273A0-FE3B-4525-9E1F-FBAE2F53C2E7">
+          <outgoing>sid-472B540C-A0CD-46F4-9640-DF692EC1BFFC</outgoing>
+        </startEvent>
+        <subProcess id="collapsedProcess_2" name="Collapsed Process 2">
+          <incoming>sid-472B540C-A0CD-46F4-9640-DF692EC1BFFC</incoming>
+          <outgoing>sid-910420B0-D11B-4F9D-B285-703D8AC0BA90</outgoing>
+          <startEvent id="sid-C67DBACD-2E96-4A69-97F0-9B04CCB255EC">
+            <outgoing>sid-A7460113-CB75-491D-817B-5E1A8C606B8C</outgoing>
+          </startEvent>
+          <task id="sid-3459D5A6-4E18-4133-8362-0418AC9CE830" name="Call External Supplier">
+            <incoming>sid-A7460113-CB75-491D-817B-5E1A8C606B8C</incoming>
+            <outgoing>sid-01982395-64E8-43EF-A6D3-CDD276C312AA</outgoing>
+          </task>
+          <endEvent id="sid-987C40F8-82D3-4637-ABCE-A85A5E2AB8A9">
+            <incoming>sid-01982395-64E8-43EF-A6D3-CDD276C312AA</incoming>
+          </endEvent>
+          <sequenceFlow id="sid-A7460113-CB75-491D-817B-5E1A8C606B8C" sourceRef="sid-C67DBACD-2E96-4A69-97F0-9B04CCB255EC" targetRef="sid-3459D5A6-4E18-4133-8362-0418AC9CE830">
+          </sequenceFlow>
+          <sequenceFlow id="sid-01982395-64E8-43EF-A6D3-CDD276C312AA" sourceRef="sid-3459D5A6-4E18-4133-8362-0418AC9CE830" targetRef="sid-987C40F8-82D3-4637-ABCE-A85A5E2AB8A9">
+          </sequenceFlow>
+        </subProcess>
+        <endEvent id="sid-17C71FEB-D00D-46D0-ACBE-BB424A3EE5A5">
+          <incoming>sid-910420B0-D11B-4F9D-B285-703D8AC0BA90</incoming>
+        </endEvent>
+        <sequenceFlow id="sid-472B540C-A0CD-46F4-9640-DF692EC1BFFC" sourceRef="sid-3B0273A0-FE3B-4525-9E1F-FBAE2F53C2E7" targetRef="collapsedProcess_2">
+        </sequenceFlow>
+        <sequenceFlow id="sid-910420B0-D11B-4F9D-B285-703D8AC0BA90" sourceRef="collapsedProcess_2" targetRef="sid-17C71FEB-D00D-46D0-ACBE-BB424A3EE5A5">
+        </sequenceFlow>
+      </subProcess>
+      <endEvent id="sid-EE9F103D-15EA-4FBB-A4DB-8B94E5F04390">
+        <incoming>sid-B99D259B-1BD5-45FF-BD57-FB99C360BAC0</incoming>
+      </endEvent>
+      <sequenceFlow id="sid-EB275CF2-5EF1-44FA-B41B-71EB37CC2657" sourceRef="sid-AB14D824-C8B9-4211-B224-C5AF8CED8BBD" targetRef="sid-9E3BA75C-29DD-4DAC-8283-8FDE4E9A6724">
+      </sequenceFlow>
+      <sequenceFlow id="sid-FB543319-8DFB-4445-AAA3-720137FB230B" sourceRef="sid-9E3BA75C-29DD-4DAC-8283-8FDE4E9A6724" targetRef="expandedProcess">
+      </sequenceFlow>
+      <sequenceFlow id="sid-B99D259B-1BD5-45FF-BD57-FB99C360BAC0" sourceRef="expandedProcess" targetRef="sid-EE9F103D-15EA-4FBB-A4DB-8B94E5F04390">
+      </sequenceFlow>
+    </subProcess>
+    <subProcess id="sid-D0CDA908-DDCE-4E82-88D0-F1A919B8AE8B" name="Procure Payment">
+      <incoming>sid-FC2ECAF5-771E-4ED3-BEF6-EFAB45E79500</incoming>
+      <outgoing>sid-5B23450F-AF5E-4519-B134-32107776BD44</outgoing>
+      <startEvent id="sid-A13CFBB9-5471-4439-96FA-B65862CA7B21">
+        <outgoing>sid-E71F5783-AFE7-44ED-8A9C-378C95087448</outgoing>
+      </startEvent>
+      <subProcess id="sid-ECEB5194-0BF8-4913-A76F-963DC1FD1D7F" name="Charge Card">
+        <incoming>sid-E71F5783-AFE7-44ED-8A9C-378C95087448</incoming>
+        <outgoing>sid-6B9741CD-D94B-41C7-A2EA-63A4C9445E16</outgoing>
+        <startEvent id="sid-F2CCFED7-AD11-4A21-80EE-71D9C96549C8">
+          <outgoing>sid-3BB6D6CA-BF45-4D15-A1AB-64686C41DB32</outgoing>
+        </startEvent>
+        <task id="sid-29B8F97B-1A0D-4280-A62D-5093316C484B" name="Charge Card">
+          <incoming>sid-3BB6D6CA-BF45-4D15-A1AB-64686C41DB32</incoming>
+          <outgoing>sid-4E25B80E-EF68-4EE5-BB08-C1F54F1A7C39</outgoing>
+        </task>
+        <endEvent id="sid-F5AE4FCD-976F-4426-B1FF-7FCAA4CE2393">
+          <incoming>sid-4E25B80E-EF68-4EE5-BB08-C1F54F1A7C39</incoming>
+        </endEvent>
+        <sequenceFlow id="sid-3BB6D6CA-BF45-4D15-A1AB-64686C41DB32" sourceRef="sid-F2CCFED7-AD11-4A21-80EE-71D9C96549C8" targetRef="sid-29B8F97B-1A0D-4280-A62D-5093316C484B">
+        </sequenceFlow>
+        <sequenceFlow id="sid-4E25B80E-EF68-4EE5-BB08-C1F54F1A7C39" sourceRef="sid-29B8F97B-1A0D-4280-A62D-5093316C484B" targetRef="sid-F5AE4FCD-976F-4426-B1FF-7FCAA4CE2393">
+        </sequenceFlow>
+      </subProcess>
+      <subProcess id="sid-5DCDF44C-56B4-47A2-9085-00004E76F3A8" name="Accounting Stuff, I don&#39;t know">
+        <incoming>sid-6B9741CD-D94B-41C7-A2EA-63A4C9445E16</incoming>
+        <outgoing>sid-1A9DABC6-6079-4BF2-9D49-C4DC9569C519</outgoing>
+        <startEvent id="sid-2098A7EE-D7D8-405E-AF61-95BA48E891B6">
+          <outgoing>sid-E5404926-738D-4447-87FE-FC6DD1E8BEFC</outgoing>
+        </startEvent>
+        <task id="sid-E21C867A-7A56-46DD-9A1E-94C02FDB18FB" name="Accounting Stuff, I don&#39;t know">
+          <incoming>sid-E5404926-738D-4447-87FE-FC6DD1E8BEFC</incoming>
+          <outgoing>sid-FED62A8F-6C3A-4BB2-8DE9-18FB0B35B50E</outgoing>
+        </task>
+        <endEvent id="sid-DAFD7764-8FA5-417B-BB33-55E483687A7D">
+          <incoming>sid-FED62A8F-6C3A-4BB2-8DE9-18FB0B35B50E</incoming>
+        </endEvent>
+        <sequenceFlow id="sid-E5404926-738D-4447-87FE-FC6DD1E8BEFC" sourceRef="sid-2098A7EE-D7D8-405E-AF61-95BA48E891B6" targetRef="sid-E21C867A-7A56-46DD-9A1E-94C02FDB18FB">
+        </sequenceFlow>
+        <sequenceFlow id="sid-FED62A8F-6C3A-4BB2-8DE9-18FB0B35B50E" sourceRef="sid-E21C867A-7A56-46DD-9A1E-94C02FDB18FB" targetRef="sid-DAFD7764-8FA5-417B-BB33-55E483687A7D">
+        </sequenceFlow>
+      </subProcess>
+      <endEvent id="sid-345BB5A6-CE3B-4711-972A-81E47BA4B667">
+        <incoming>sid-1A9DABC6-6079-4BF2-9D49-C4DC9569C519</incoming>
+      </endEvent>
+      <sequenceFlow id="sid-E71F5783-AFE7-44ED-8A9C-378C95087448" sourceRef="sid-A13CFBB9-5471-4439-96FA-B65862CA7B21" targetRef="sid-ECEB5194-0BF8-4913-A76F-963DC1FD1D7F">
+        <extensionElements>
+          <signavio:signavioMetaData metaKey="bordercolor" metaValue="#000000" />
+        </extensionElements>
+      </sequenceFlow>
+      <sequenceFlow id="sid-6B9741CD-D94B-41C7-A2EA-63A4C9445E16" sourceRef="sid-ECEB5194-0BF8-4913-A76F-963DC1FD1D7F" targetRef="sid-5DCDF44C-56B4-47A2-9085-00004E76F3A8">
+        <extensionElements>
+          <signavio:signavioMetaData metaKey="bordercolor" metaValue="#000000" />
+        </extensionElements>
+      </sequenceFlow>
+      <sequenceFlow id="sid-1A9DABC6-6079-4BF2-9D49-C4DC9569C519" sourceRef="sid-5DCDF44C-56B4-47A2-9085-00004E76F3A8" targetRef="sid-345BB5A6-CE3B-4711-972A-81E47BA4B667">
+      </sequenceFlow>
+    </subProcess>
+    <parallelGateway id="sid-7412307A-1A0F-43BA-933B-6E84157B4E5B" gatewayDirection="Converging">
+      <incoming>sid-5B23450F-AF5E-4519-B134-32107776BD44</incoming>
+      <incoming>sid-31F6EC44-E44C-4121-B4FE-BD69AF208C05</incoming>
+      <outgoing>sid-F7DA1903-6A1A-4858-AF4B-286A968C957F</outgoing>
+    </parallelGateway>
+    <boundaryEvent id="sid-C586DCF2-0B1B-4878-8042-F9869023F21B" attachedToRef="sid-D0CDA908-DDCE-4E82-88D0-F1A919B8AE8B">
+      <outgoing>sid-DCB98638-BEBD-4548-B501-F0E29AC71ED4</outgoing>
+      <errorEventDefinition id="sid-804c8ce9-8013-49e6-a6f5-bf97d24f6cf0" errorRef="sid-c4218475-d7d4-4ee6-ae73-5d44c49114b8" />
+    </boundaryEvent>
+    <endEvent id="sid-A53C38A9-456B-4AC9-9D4A-6EC9663BA77C">
+      <incoming>sid-DCB98638-BEBD-4548-B501-F0E29AC71ED4</incoming>
+    </endEvent>
+    <subProcess id="parallelGateway_withoutContent" name="Ship Items (todo)">
+      <incoming>sid-F7DA1903-6A1A-4858-AF4B-286A968C957F</incoming>
+      <outgoing>sid-3FAE72F2-4037-4CBA-8B89-01D7FC7FF3E3</outgoing>
+    </subProcess>
+    <endEvent id="sid-DA90DE99-58B0-4371-B71D-87A718ACB64D">
+      <incoming>sid-3FAE72F2-4037-4CBA-8B89-01D7FC7FF3E3</incoming>
+    </endEvent>
+    <sequenceFlow id="sid-89A3F9F2-CCC8-46C7-816B-DD8AC8A98300" sourceRef="sid-6687E2F4-B03D-4E57-A62B-68FA642BE19C" targetRef="parallelGateway">
+    </sequenceFlow>
+    <sequenceFlow id="sid-F06605E1-AEC1-4B39-8843-4AD3F547B557" sourceRef="parallelGateway" targetRef="collapsedProcess">
+    </sequenceFlow>
+    <sequenceFlow id="sid-FC2ECAF5-771E-4ED3-BEF6-EFAB45E79500" sourceRef="parallelGateway" targetRef="sid-D0CDA908-DDCE-4E82-88D0-F1A919B8AE8B">
+    </sequenceFlow>
+    <sequenceFlow id="sid-5B23450F-AF5E-4519-B134-32107776BD44" sourceRef="sid-D0CDA908-DDCE-4E82-88D0-F1A919B8AE8B" targetRef="sid-7412307A-1A0F-43BA-933B-6E84157B4E5B">
+    </sequenceFlow>
+    <sequenceFlow id="sid-31F6EC44-E44C-4121-B4FE-BD69AF208C05" sourceRef="collapsedProcess" targetRef="sid-7412307A-1A0F-43BA-933B-6E84157B4E5B">
+    </sequenceFlow>
+    <sequenceFlow id="sid-DCB98638-BEBD-4548-B501-F0E29AC71ED4" sourceRef="sid-C586DCF2-0B1B-4878-8042-F9869023F21B" targetRef="sid-A53C38A9-456B-4AC9-9D4A-6EC9663BA77C">
+    </sequenceFlow>
+    <sequenceFlow id="sid-F7DA1903-6A1A-4858-AF4B-286A968C957F" sourceRef="sid-7412307A-1A0F-43BA-933B-6E84157B4E5B" targetRef="parallelGateway_withoutContent">
+    </sequenceFlow>
+    <sequenceFlow id="sid-3FAE72F2-4037-4CBA-8B89-01D7FC7FF3E3" sourceRef="parallelGateway_withoutContent" targetRef="sid-DA90DE99-58B0-4371-B71D-87A718ACB64D">
+    </sequenceFlow>
+  </process>
+  <bpmndi:BPMNDiagram id="sid-cbeafa41-c891-415c-ab0d-3eb4a233f9ed">
+    <bpmndi:BPMNPlane id="sid-5fb4720f-4b99-4727-8770-dd4166bcd5e4" bpmnElement="rootProcess">
+      <bpmndi:BPMNEdge id="sid-3FAE72F2-4037-4CBA-8B89-01D7FC7FF3E3_gui" bpmnElement="sid-3FAE72F2-4037-4CBA-8B89-01D7FC7FF3E3">
+        <omgdi:waypoint x="675" y="215" />
+        <omgdi:waypoint x="720" y="215" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-F7DA1903-6A1A-4858-AF4B-286A968C957F_gui" bpmnElement="sid-F7DA1903-6A1A-4858-AF4B-286A968C957F">
+        <omgdi:waypoint x="530" y="215.41484716157206" />
+        <omgdi:waypoint x="575" y="215.2183406113537" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-DCB98638-BEBD-4548-B501-F0E29AC71ED4_gui" bpmnElement="sid-DCB98638-BEBD-4548-B501-F0E29AC71ED4">
+        <omgdi:waypoint x="420" y="370" />
+        <omgdi:waypoint x="420" y="427.89053746720595" />
+        <omgdi:waypoint x="515" y="428" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-31F6EC44-E44C-4121-B4FE-BD69AF208C05_gui" bpmnElement="sid-31F6EC44-E44C-4121-B4FE-BD69AF208C05">
+        <omgdi:waypoint x="445" y="110" />
+        <omgdi:waypoint x="510.5" y="110" />
+        <omgdi:waypoint x="510.5" y="195" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-5B23450F-AF5E-4519-B134-32107776BD44_gui" bpmnElement="sid-5B23450F-AF5E-4519-B134-32107776BD44">
+        <omgdi:waypoint x="445" y="315" />
+        <omgdi:waypoint x="510.5" y="315" />
+        <omgdi:waypoint x="510.5" y="235" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-FC2ECAF5-771E-4ED3-BEF6-EFAB45E79500_gui" bpmnElement="sid-FC2ECAF5-771E-4ED3-BEF6-EFAB45E79500">
+        <omgdi:waypoint x="255.5" y="235" />
+        <omgdi:waypoint x="255.5" y="315" />
+        <omgdi:waypoint x="345" y="315" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-F06605E1-AEC1-4B39-8843-4AD3F547B557_gui" bpmnElement="sid-F06605E1-AEC1-4B39-8843-4AD3F547B557">
+        <omgdi:waypoint x="255.5" y="195" />
+        <omgdi:waypoint x="255.5" y="110" />
+        <omgdi:waypoint x="345" y="110" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-89A3F9F2-CCC8-46C7-816B-DD8AC8A98300_gui" bpmnElement="sid-89A3F9F2-CCC8-46C7-816B-DD8AC8A98300">
+        <omgdi:waypoint x="190" y="215.09316770186336" />
+        <omgdi:waypoint x="235" y="215.37267080745343" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="sid-6687E2F4-B03D-4E57-A62B-68FA642BE19C_gui" bpmnElement="sid-6687E2F4-B03D-4E57-A62B-68FA642BE19C">
+        <omgdc:Bounds x="160" y="200" width="30" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="parallelGateway_gui" bpmnElement="parallelGateway">
+        <omgdc:Bounds x="235" y="195" width="40" height="40" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="collapsedProcess_gui" bpmnElement="collapsedProcess" isExpanded="false">
+        <omgdc:Bounds x="345" y="70" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-c53530f5-9da8-4535-ae6d-c94859ea5b93">
+          <omgdc:Bounds x="352.99214363098145" y="102" width="84.08571243286133" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-D0CDA908-DDCE-4E82-88D0-F1A919B8AE8B_gui" bpmnElement="sid-D0CDA908-DDCE-4E82-88D0-F1A919B8AE8B" isExpanded="false">
+        <omgdc:Bounds x="345" y="275" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-c53530f5-9da8-4535-ae6d-c94859ea5b93">
+          <omgdc:Bounds x="349.520715713501" y="307" width="91.02856826782227" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-7412307A-1A0F-43BA-933B-6E84157B4E5B_gui" bpmnElement="sid-7412307A-1A0F-43BA-933B-6E84157B4E5B">
+        <omgdc:Bounds x="490" y="195" width="40" height="40" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-A53C38A9-456B-4AC9-9D4A-6EC9663BA77C_gui" bpmnElement="sid-A53C38A9-456B-4AC9-9D4A-6EC9663BA77C">
+        <omgdc:Bounds x="515" y="413.89053746720595" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="parallelGateway_withoutContent_gui" bpmnElement="parallelGateway_withoutContent" isExpanded="false">
+        <omgdc:Bounds x="575" y="175" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-c53530f5-9da8-4535-ae6d-c94859ea5b93">
+          <omgdc:Bounds x="595.7207126617432" y="201" width="58.62857437133789" height="24" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-DA90DE99-58B0-4371-B71D-87A718ACB64D_gui" bpmnElement="sid-DA90DE99-58B0-4371-B71D-87A718ACB64D">
+        <omgdc:Bounds x="720" y="201" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-C586DCF2-0B1B-4878-8042-F9869023F21B_gui" bpmnElement="sid-C586DCF2-0B1B-4878-8042-F9869023F21B">
+        <omgdc:Bounds x="405" y="340" width="30" height="30" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+    <bpmndi:BPMNLabelStyle id="sid-c53530f5-9da8-4535-ae6d-c94859ea5b93">
+      <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
+    </bpmndi:BPMNLabelStyle>
+  </bpmndi:BPMNDiagram>
+  <bpmndi:BPMNDiagram id="sid-99a6a759-9161-4f4a-a83d-9ad6b9fbdc7e">
+    <bpmndi:BPMNPlane id="sid-62501c88-ba6c-44ea-90f1-3ccf6a7cea2f" bpmnElement="collapsedProcess">
+      <bpmndi:BPMNShape id="sid-AB14D824-C8B9-4211-B224-C5AF8CED8BBD_gui" bpmnElement="sid-AB14D824-C8B9-4211-B224-C5AF8CED8BBD">
+        <omgdc:Bounds x="150" y="140" width="30" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-9E3BA75C-29DD-4DAC-8283-8FDE4E9A6724_gui" bpmnElement="sid-9E3BA75C-29DD-4DAC-8283-8FDE4E9A6724">
+        <omgdc:Bounds x="225" y="115" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-592ddc98-48fc-42b3-b7f9-1df8b6d368c5">
+          <omgdc:Bounds x="241.44285583496094" y="147" width="67.11428833007812" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-3B0273A0-FE3B-4525-9E1F-FBAE2F53C2E7_gui" bpmnElement="sid-3B0273A0-FE3B-4525-9E1F-FBAE2F53C2E7">
+        <omgdc:Bounds x="390" y="140" width="30" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="collapsedProcess_2_gui" bpmnElement="collapsedProcess_2" isExpanded="false">
+        <omgdc:Bounds x="465" y="115" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-592ddc98-48fc-42b3-b7f9-1df8b6d368c5">
+          <omgdc:Bounds x="481.4778537750244" y="141" width="67.11429214477539" height="24" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-17C71FEB-D00D-46D0-ACBE-BB424A3EE5A5_gui" bpmnElement="sid-17C71FEB-D00D-46D0-ACBE-BB424A3EE5A5">
+        <omgdc:Bounds x="610" y="141" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="sid-472B540C-A0CD-46F4-9640-DF692EC1BFFC_gui" bpmnElement="sid-472B540C-A0CD-46F4-9640-DF692EC1BFFC">
+        <omgdi:waypoint x="420" y="155" />
+        <omgdi:waypoint x="465" y="155" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-910420B0-D11B-4F9D-B285-703D8AC0BA90_gui" bpmnElement="sid-910420B0-D11B-4F9D-B285-703D8AC0BA90">
+        <omgdi:waypoint x="565" y="155" />
+        <omgdi:waypoint x="610" y="155" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="expandedProcess_gui" bpmnElement="expandedProcess" isExpanded="true">
+        <omgdc:Bounds x="370" y="79" width="288" height="151" />
+        <bpmndi:BPMNLabel labelStyle="sid-592ddc98-48fc-42b3-b7f9-1df8b6d368c5">
+          <omgdc:Bounds x="378" y="89" width="65.57142639160156" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-EE9F103D-15EA-4FBB-A4DB-8B94E5F04390_gui" bpmnElement="sid-EE9F103D-15EA-4FBB-A4DB-8B94E5F04390">
+        <omgdc:Bounds x="703" y="141" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="sid-EB275CF2-5EF1-44FA-B41B-71EB37CC2657_gui" bpmnElement="sid-EB275CF2-5EF1-44FA-B41B-71EB37CC2657">
+        <omgdi:waypoint x="180" y="155" />
+        <omgdi:waypoint x="225" y="155" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-FB543319-8DFB-4445-AAA3-720137FB230B_gui" bpmnElement="sid-FB543319-8DFB-4445-AAA3-720137FB230B">
+        <omgdi:waypoint x="325" y="154.89539748953976" />
+        <omgdi:waypoint x="370" y="154.80125523012552" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-B99D259B-1BD5-45FF-BD57-FB99C360BAC0_gui" bpmnElement="sid-B99D259B-1BD5-45FF-BD57-FB99C360BAC0">
+        <omgdi:waypoint x="658" y="154.85467980295567" />
+        <omgdi:waypoint x="703" y="154.9655172413793" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+    <bpmndi:BPMNLabelStyle id="sid-592ddc98-48fc-42b3-b7f9-1df8b6d368c5">
+      <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
+    </bpmndi:BPMNLabelStyle>
+  </bpmndi:BPMNDiagram>
+  <bpmndi:BPMNDiagram id="sid-0bbc44a9-8a6a-44a1-8b61-0cf870c26fe4">
+    <bpmndi:BPMNPlane id="sid-275fa3fd-9114-4005-b305-71f6c1411c24" bpmnElement="collapsedProcess_2">
+      <bpmndi:BPMNShape id="sid-C67DBACD-2E96-4A69-97F0-9B04CCB255EC_gui" bpmnElement="sid-C67DBACD-2E96-4A69-97F0-9B04CCB255EC">
+        <omgdc:Bounds x="230" y="130" width="30" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-3459D5A6-4E18-4133-8362-0418AC9CE830_gui" bpmnElement="sid-3459D5A6-4E18-4133-8362-0418AC9CE830">
+        <omgdc:Bounds x="305" y="105" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-efc2a4e3-a5c6-411d-80d4-64f3a53bc4a4">
+          <omgdc:Bounds x="321.44285583496094" y="131" width="67.11428833007812" height="24" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-987C40F8-82D3-4637-ABCE-A85A5E2AB8A9_gui" bpmnElement="sid-987C40F8-82D3-4637-ABCE-A85A5E2AB8A9">
+        <omgdc:Bounds x="450" y="131" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="sid-A7460113-CB75-491D-817B-5E1A8C606B8C_gui" bpmnElement="sid-A7460113-CB75-491D-817B-5E1A8C606B8C">
+        <omgdi:waypoint x="260" y="145" />
+        <omgdi:waypoint x="305" y="145" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-01982395-64E8-43EF-A6D3-CDD276C312AA_gui" bpmnElement="sid-01982395-64E8-43EF-A6D3-CDD276C312AA">
+        <omgdi:waypoint x="405" y="145" />
+        <omgdi:waypoint x="450" y="145" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+    <bpmndi:BPMNLabelStyle id="sid-efc2a4e3-a5c6-411d-80d4-64f3a53bc4a4">
+      <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
+    </bpmndi:BPMNLabelStyle>
+  </bpmndi:BPMNDiagram>
+  <bpmndi:BPMNDiagram id="sid-19b0e874-234e-4bee-b83c-068fe088c591">
+    <bpmndi:BPMNPlane id="sid-89d69f37-848f-4da3-bb9a-df3a9889286d" bpmnElement="sid-D0CDA908-DDCE-4E82-88D0-F1A919B8AE8B">
+      <bpmndi:BPMNShape id="sid-A13CFBB9-5471-4439-96FA-B65862CA7B21_gui" bpmnElement="sid-A13CFBB9-5471-4439-96FA-B65862CA7B21">
+        <omgdc:Bounds x="190" y="170" width="30" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-ECEB5194-0BF8-4913-A76F-963DC1FD1D7F_gui" bpmnElement="sid-ECEB5194-0BF8-4913-A76F-963DC1FD1D7F" isExpanded="false">
+        <omgdc:Bounds x="265" y="145" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-3bb65e49-bd30-45eb-a52f-e94a5e93edbc">
+          <omgdc:Bounds x="281.09214210510254" y="177" width="67.88571548461914" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-5DCDF44C-56B4-47A2-9085-00004E76F3A8_gui" bpmnElement="sid-5DCDF44C-56B4-47A2-9085-00004E76F3A8" isExpanded="false">
+        <omgdc:Bounds x="410" y="145" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-3bb65e49-bd30-45eb-a52f-e94a5e93edbc">
+          <omgdc:Bounds x="424.5492877960205" y="165" width="70.9714241027832" height="36" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-345BB5A6-CE3B-4711-972A-81E47BA4B667_gui" bpmnElement="sid-345BB5A6-CE3B-4711-972A-81E47BA4B667">
+        <omgdc:Bounds x="555" y="171" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="sid-E71F5783-AFE7-44ED-8A9C-378C95087448_gui" bpmnElement="sid-E71F5783-AFE7-44ED-8A9C-378C95087448">
+        <omgdi:waypoint x="220" y="185" />
+        <omgdi:waypoint x="265" y="185" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-6B9741CD-D94B-41C7-A2EA-63A4C9445E16_gui" bpmnElement="sid-6B9741CD-D94B-41C7-A2EA-63A4C9445E16">
+        <omgdi:waypoint x="365" y="185" />
+        <omgdi:waypoint x="410" y="185" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-1A9DABC6-6079-4BF2-9D49-C4DC9569C519_gui" bpmnElement="sid-1A9DABC6-6079-4BF2-9D49-C4DC9569C519">
+        <omgdi:waypoint x="510" y="185" />
+        <omgdi:waypoint x="555" y="185" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+    <bpmndi:BPMNLabelStyle id="sid-3bb65e49-bd30-45eb-a52f-e94a5e93edbc">
+      <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
+    </bpmndi:BPMNLabelStyle>
+  </bpmndi:BPMNDiagram>
+  <bpmndi:BPMNDiagram id="sid-5e1db01c-46b0-40b0-bb83-67add2799cae">
+    <bpmndi:BPMNPlane id="sid-ecd0155e-80cf-40cd-85a9-edf72b8d2a6c" bpmnElement="sid-ECEB5194-0BF8-4913-A76F-963DC1FD1D7F">
+      <bpmndi:BPMNShape id="sid-F2CCFED7-AD11-4A21-80EE-71D9C96549C8_gui" bpmnElement="sid-F2CCFED7-AD11-4A21-80EE-71D9C96549C8">
+        <omgdc:Bounds x="310" y="160" width="30" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-29B8F97B-1A0D-4280-A62D-5093316C484B_gui" bpmnElement="sid-29B8F97B-1A0D-4280-A62D-5093316C484B">
+        <omgdc:Bounds x="385" y="135" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-2e7107aa-4946-4b44-a3c0-a137c1775d39">
+          <omgdc:Bounds x="401.05714416503906" y="167" width="67.88571166992188" height="12" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-F5AE4FCD-976F-4426-B1FF-7FCAA4CE2393_gui" bpmnElement="sid-F5AE4FCD-976F-4426-B1FF-7FCAA4CE2393">
+        <omgdc:Bounds x="530" y="161" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="sid-3BB6D6CA-BF45-4D15-A1AB-64686C41DB32_gui" bpmnElement="sid-3BB6D6CA-BF45-4D15-A1AB-64686C41DB32">
+        <omgdi:waypoint x="340" y="175" />
+        <omgdi:waypoint x="385" y="175" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-4E25B80E-EF68-4EE5-BB08-C1F54F1A7C39_gui" bpmnElement="sid-4E25B80E-EF68-4EE5-BB08-C1F54F1A7C39">
+        <omgdi:waypoint x="485" y="175" />
+        <omgdi:waypoint x="530" y="175" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+    <bpmndi:BPMNLabelStyle id="sid-2e7107aa-4946-4b44-a3c0-a137c1775d39">
+      <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
+    </bpmndi:BPMNLabelStyle>
+  </bpmndi:BPMNDiagram>
+  <bpmndi:BPMNDiagram id="sid-63fc7b22-cc85-458f-aaab-e165a0e36240">
+    <bpmndi:BPMNPlane id="sid-3f3c0ecd-73e0-4a0a-b05c-0b6bd60eeeb1" bpmnElement="sid-5DCDF44C-56B4-47A2-9085-00004E76F3A8">
+      <bpmndi:BPMNShape id="sid-2098A7EE-D7D8-405E-AF61-95BA48E891B6_gui" bpmnElement="sid-2098A7EE-D7D8-405E-AF61-95BA48E891B6">
+        <omgdc:Bounds x="240" y="250" width="30" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-E21C867A-7A56-46DD-9A1E-94C02FDB18FB_gui" bpmnElement="sid-E21C867A-7A56-46DD-9A1E-94C02FDB18FB">
+        <omgdc:Bounds x="315" y="225" width="100" height="80" />
+        <bpmndi:BPMNLabel labelStyle="sid-d93ac8fb-7a66-4ace-93a6-71582a8ab1a1">
+          <omgdc:Bounds x="329.51428604125977" y="245" width="70.97142791748047" height="36" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="sid-DAFD7764-8FA5-417B-BB33-55E483687A7D_gui" bpmnElement="sid-DAFD7764-8FA5-417B-BB33-55E483687A7D">
+        <omgdc:Bounds x="460" y="251" width="28" height="28" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="sid-E5404926-738D-4447-87FE-FC6DD1E8BEFC_gui" bpmnElement="sid-E5404926-738D-4447-87FE-FC6DD1E8BEFC">
+        <omgdi:waypoint x="270" y="265" />
+        <omgdi:waypoint x="315" y="265" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="sid-FED62A8F-6C3A-4BB2-8DE9-18FB0B35B50E_gui" bpmnElement="sid-FED62A8F-6C3A-4BB2-8DE9-18FB0B35B50E">
+        <omgdi:waypoint x="415" y="265" />
+        <omgdi:waypoint x="460" y="265" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+    <bpmndi:BPMNLabelStyle id="sid-d93ac8fb-7a66-4ace-93a6-71582a8ab1a1">
+      <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
+    </bpmndi:BPMNLabelStyle>
+  </bpmndi:BPMNDiagram>
+</definitions>

test/spec/import/ImporterSpec.js

@@ -7,7 +7,7 @@ import {
   importBpmnDiagram
 } from 'lib/import/Importer';
 
-import Viewer from 'lib/Viewer';
+import CoreModule from 'lib/core';
 
 import {
   matches as domMatches
@@ -36,7 +36,7 @@ describe('import - Importer', function() {
   var diagram;
 
   beforeEach(function() {
-    diagram = createDiagram(TestContainer.get(this), Viewer.prototype._modules);
+    diagram = createDiagram(TestContainer.get(this), [CoreModule]);
   });
 
 

test/spec/import/elements/CollapsedSpec.js

@@ -13,59 +13,76 @@ describe('import - collapsed container', function() {
     beforeEach(bootstrapViewer(diagramXML));
 
 
-    it('should import collapsed subProcess', inject(function(elementRegistry) {
+    it('should import collapsed subProcess', inject(function(elementRegistry, canvas) {
       var collapsedShape = elementRegistry.get('SubProcess_1');
+      var collapsedPlane = canvas.findPlane(collapsedShape);
       var childShape = elementRegistry.get('IntermediateCatchEvent_1');
+      var childPlane = canvas.findPlane(childShape);
 
       expect(collapsedShape.collapsed).to.be.true;
-      expect(childShape.hidden).to.be.true;
+      expect(collapsedPlane).to.not.eql(childPlane);
     }));
 
 
-    it('should import collapsed transaction', inject(function(elementRegistry) {
+    it('should import collapsed transaction', inject(function(elementRegistry, canvas) {
       var collapsedShape = elementRegistry.get('Transaction_1');
+      var collapsedPlane = canvas.findPlane(collapsedShape);
       var childShape = elementRegistry.get('UserTask_1');
+      var childPlane = canvas.findPlane(childShape);
 
       expect(collapsedShape.collapsed).to.be.true;
-      expect(childShape.hidden).to.be.true;
+      expect(collapsedPlane).to.not.eql(childPlane);
     }));
 
 
-    it('should import collapsed adhocSubProcess', inject(function(elementRegistry) {
+    it('should import collapsed adhocSubProcess', inject(function(elementRegistry, canvas) {
       var collapsedShape = elementRegistry.get('AdHocSubProcess_1');
+      var collapsedPlane = canvas.findPlane(collapsedShape);
       var childShape = elementRegistry.get('StartEvent_1');
+      var childPlane = canvas.findPlane(childShape);
 
       expect(collapsedShape.collapsed).to.be.true;
-      expect(childShape.hidden).to.be.true;
+      expect(collapsedPlane).to.not.eql(childPlane);
     }));
 
 
-    it('should import collapsed with nested elements', inject(function(elementRegistry) {
+    it('should import collapsed with nested elements', inject(function(elementRegistry, canvas) {
       var collapsedShape = elementRegistry.get('SubProcess_4');
+      var collapsedPlane = canvas.findPlane(collapsedShape);
       var childShape = elementRegistry.get('SubProcess_5');
+      var childPlane = canvas.findPlane(childShape);
       var nestedChildShape = elementRegistry.get('Task_3');
+      var nestedChildPlane = canvas.findPlane(nestedChildShape);
 
       expect(collapsedShape.collapsed).to.be.true;
-      expect(childShape.hidden).to.be.true;
+      expect(childPlane).to.not.eql(collapsedPlane);
-      expect(nestedChildShape.hidden).to.be.true;
+      expect(nestedChildPlane).to.not.eql(collapsedPlane);
     }));
 
 
-    it('should import collapsed with nested hidden labels', inject(function(elementRegistry) {
+    it('should import collapsed with nested hidden labels', inject(function(elementRegistry, canvas) {
+      var collapsedShape = elementRegistry.get('SubProcess_2');
+      var collapsedPlane = canvas.findPlane(collapsedShape);
+
       var hiddenEventShape = elementRegistry.get('StartEvent_2');
-      expect(hiddenEventShape.label.hidden).to.be.true;
+      var hiddenEventPlane = canvas.findPlane(hiddenEventShape);
+      expect(hiddenEventPlane).to.not.eql(collapsedPlane);
 
       var hiddenDataShape = elementRegistry.get('DataObjectReference_1');
-      expect(hiddenDataShape.label.hidden).to.be.true;
+      var hiddenDataPlane = canvas.findPlane(hiddenDataShape);
+      expect(hiddenDataPlane).to.not.eql(collapsedPlane);
     }));
 
 
-    it('should import expanded subProcess', inject(function(elementRegistry) {
+    it('should import expanded subProcess', inject(function(elementRegistry, canvas) {
       var expandedShape = elementRegistry.get('SubProcess_3');
+      var expandedPlane = canvas.findPlane(expandedShape);
       var childShape = elementRegistry.get('Task_2');
+      var childPlane = canvas.findPlane(childShape);
 
       expect(expandedShape.collapsed).to.be.false;
       expect(childShape.hidden).to.be.false;
+      expect(expandedPlane).to.eql(childPlane);
     }));
 
   });
@@ -78,39 +95,49 @@ describe('import - collapsed container', function() {
     beforeEach(bootstrapViewer(diagramXML));
 
 
-    it('should import collapsed subProcess in pool', inject(function(elementRegistry) {
+    it('should import collapsed subProcess in pool', inject(function(elementRegistry, canvas) {
-      var expandedShape = elementRegistry.get('SubProcess_1');
+      var collapsedShape = elementRegistry.get('SubProcess_1');
+      var collapsedPlane = canvas.findPlane(collapsedShape);
       var childShape = elementRegistry.get('Task_1');
+      var childPlane = canvas.findPlane(childShape);
 
-      expect(expandedShape.collapsed).to.be.true;
+      expect(collapsedShape.collapsed).to.be.true;
-      expect(childShape.hidden).to.be.true;
+      expect(collapsedPlane).to.not.eql(childPlane);
     }));
 
 
-    it('should import expanded subProcess in pool', inject(function(elementRegistry) {
+    it('should import expanded subProcess in pool', inject(function(elementRegistry, canvas) {
       var expandedShape = elementRegistry.get('SubProcess_2');
+      var expandedPlane = canvas.findPlane(expandedShape);
       var childShape = elementRegistry.get('StartEvent_1');
+      var childPlane = canvas.findPlane(childShape);
 
       expect(expandedShape.collapsed).to.be.false;
       expect(childShape.hidden).to.be.false;
+      expect(expandedPlane).to.eql(childPlane);
     }));
 
 
-    it('should import collapsed subProcess in lane', inject(function(elementRegistry) {
+    it('should import collapsed subProcess in lane', inject(function(elementRegistry, canvas) {
       var expandedShape = elementRegistry.get('SubProcess_4');
+      var collapsedPlane = canvas.findPlane(expandedShape);
       var childShape = elementRegistry.get('Task_2');
+      var childPlane = canvas.findPlane(childShape);
 
       expect(expandedShape.collapsed).to.be.true;
-      expect(childShape.hidden).to.be.true;
+      expect(collapsedPlane).to.not.eql(childPlane);
     }));
 
 
-    it('should import expanded subProcess in lane', inject(function(elementRegistry) {
+    it('should import expanded subProcess in lane', inject(function(elementRegistry, canvas) {
       var expandedShape = elementRegistry.get('SubProcess_3');
+      var expandedPlane = canvas.findPlane(expandedShape);
       var childShape = elementRegistry.get('StartEvent_2');
+      var childPlane = canvas.findPlane(childShape);
 
       expect(expandedShape.collapsed).to.be.false;
       expect(childShape.hidden).to.be.false;
+      expect(expandedPlane).to.eql(childPlane);
     }));
 
   });