bpmn-js 9.0.0-subprocesses.1 → 9.0.1

package/lib/features/auto-resize/BpmnAutoResizeProvider.js

@@ -33,6 +33,12 @@ BpmnAutoResizeProvider.$inject = [
  */
 BpmnAutoResizeProvider.prototype.canResize = function(elements, target) {
 
+  // do not resize plane elements:
+  // root elements, collapsed sub-processes
+  if (is(target.di, 'bpmndi:BPMNPlane')) {
+    return false;
+  }
+
   if (!is(target, 'bpmn:Participant') && !is(target, 'bpmn:Lane') && !(is(target, 'bpmn:SubProcess'))) {
     return false;
   }

package/lib/features/copy-paste/BpmnCopyPaste.js

@@ -145,6 +145,7 @@ export default function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
     );
 
     newDi = bpmnFactory.create(oldDi.$type);
+    newDi.bpmnElement = newBusinessObject;
 
     descriptor.di = moddleCopy.copyElement(
       oldDi,

package/lib/features/di-ordering/BpmnDiOrdering.js

@@ -2,6 +2,7 @@ import { getDi } from '../../util/ModelUtil';
 
 import {
   filter,
+  forEach,
   map
 } from 'min-dash';
 
@@ -15,21 +16,24 @@ export default function BpmnDiOrdering(eventBus, canvas) {
   eventBus.on('saveXML.start', HIGH_PRIORITY, orderDi);
 
   function orderDi() {
-    var root = canvas.getRootElement(),
-        rootDi = getDi(root),
-        elements,
-        diElements;
+    var rootElements = canvas.getRootElements();
 
-    elements = selfAndAllChildren([ root ], false);
+    forEach(rootElements, function(root) {
+      var rootDi = getDi(root),
+          elements,
+          diElements;
 
-    // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
-    elements = filter(elements, function(element) {
-      return element !== root && !element.labelTarget;
-    });
+      elements = selfAndAllChildren([ root ], false);
+
+      // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
+      elements = filter(elements, function(element) {
+        return element !== root && !element.labelTarget;
+      });
 
-    diElements = map(elements, getDi);
+      diElements = map(elements, getDi);
 
-    rootDi.set('planeElement', diElements);
+      rootDi.set('planeElement', diElements);
+    });
   }
 }
 

package/lib/features/drilldown/DrilldownBreadcrumbs.js

@@ -0,0 +1,122 @@
+import { domify, classes } from 'min-dom';
+import { find } from 'min-dash';
+
+import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
+import { getBusinessObject, is } from '../../util/ModelUtil';
+import {
+  getPlaneIdFromShape
+} from '../../util/DrilldownUtil';
+
+var OPEN_CLASS = 'bjs-breadcrumbs-shown';
+
+
+/**
+ * Adds overlays that allow switching planes on collapsed subprocesses.
+ *
+ * @param {eventBus} eventBus
+ * @param {elementRegistry} elementRegistry
+ * @param {overlays} overlays
+ * @param {canvas} canvas
+ */
+export default function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
+  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
+  var container = canvas.getContainer();
+  var containerClasses = classes(container);
+  container.appendChild(breadcrumbs);
+
+  var boParents = [];
+
+  // update breadcrumbs if name or ID of the primary shape changes
+  eventBus.on('element.changed', function(e) {
+    var shape = e.element,
+        bo = getBusinessObject(shape);
+
+    var isPresent = find(boParents, function(el) {
+      return el === bo;
+    });
+
+    if (!isPresent) {
+      return;
+    }
+
+    updateBreadcrumbs();
+  });
+
+  /**
+   * Updates the displayed breadcrumbs. If no element is provided, only the
+   * labels are updated.
+   *
+   * @param {djs.model.Base} [element]
+   */
+  function updateBreadcrumbs(element) {
+    if (element) {
+      boParents = getBoParentChain(element);
+    }
+
+    var path = boParents.map(function(parent) {
+      var title = escapeHTML(parent.name || parent.id);
+      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
+
+      var parentPlane = canvas.findRoot(getPlaneIdFromShape(parent)) || canvas.findRoot(parent.id);
+
+      // when the root is a collaboration, the process does not have a corresponding
+      // element in the elementRegisty. Instead, we search for the corresponding participant
+      if (!parentPlane && is(parent, 'bpmn:Process')) {
+        var participant = elementRegistry.find(function(element) {
+          var bo = getBusinessObject(element);
+          return bo && bo.processRef && bo.processRef === parent;
+        });
+
+        parentPlane = canvas.findRoot(participant.id);
+      }
+
+      link.addEventListener('click', function() {
+        canvas.setRootElement(parentPlane);
+      });
+
+      return link;
+    });
+
+    breadcrumbs.innerHTML = '';
+
+    // show breadcrumbs and expose state to .djs-container
+    var visible = path.length > 1;
+    containerClasses.toggle(OPEN_CLASS, visible);
+
+    path.forEach(function(el) {
+      breadcrumbs.appendChild(el);
+    });
+  }
+
+  eventBus.on('root.set', function(event) {
+    updateBreadcrumbs(event.element);
+  });
+
+}
+
+DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+
+
+// helpers //////////
+
+/**
+ * Returns the parents for the element using the business object chain,
+ * starting with the root element.
+ *
+ * @param {djs.model.Shape} child
+ *
+ * @returns {Array<djs.model.Shape>} parents
+ */
+function getBoParentChain(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/drilldown/DrilldownCentering.js

@@ -0,0 +1,118 @@
+import { is } from '../../util/ModelUtil';
+
+/**
+ * Move collapsed subprocesses into view when drilling down.
+ *
+ * Zoom and scroll are saved in a session.
+ *
+ * @param {eventBus} eventBus
+ * @param {canvas} canvas
+ */
+export default function DrilldownCentering(eventBus, canvas) {
+
+  var currentRoot = null;
+  var positionMap = new Map();
+
+  eventBus.on('root.set', function(event) {
+    var newRoot = event.element;
+    var currentViewbox = canvas.viewbox();
+    var storedViewbox = positionMap.get(newRoot);
+
+    positionMap.set(currentRoot, {
+      x: currentViewbox.x,
+      y: currentViewbox.y,
+      zoom: currentViewbox.scale
+    });
+
+    currentRoot = newRoot;
+
+    // current root was replaced with a collaboration, we don't update the viewbox
+    if (is(newRoot, 'bpmn:Collaboration') && !storedViewbox) {
+      return;
+    }
+
+    storedViewbox = storedViewbox || { 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 });
+    }
+  });
+
+  eventBus.on('diagram.clear', function() {
+    positionMap.clear();
+    currentRoot = null;
+  });
+
+}
+
+DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];
+
+
+/**
+ * ES5 Map implementation. Works.
+ */
+function Map() {
+
+  this._entries = [];
+
+  this.set = function(key, value) {
+
+    var found = false;
+
+    for (var k in this._entries) {
+      if (this._entries[k][0] === key) {
+        this._entries[k][1] = value;
+
+        found = true;
+
+        break;
+      }
+    }
+
+    if (!found) {
+      this._entries.push([ key, value ]);
+    }
+  };
+
+  this.get = function(key) {
+
+    for (var k in this._entries) {
+      if (this._entries[k][0] === key) {
+        return this._entries[k][1];
+      }
+    }
+
+    return null;
+  };
+
+  this.clear = function() {
+    this._entries.length = 0;
+  };
+
+  this.remove = function(key) {
+
+    var idx = -1;
+
+    for (var k in this._entries) {
+      if (this._entries[k][0] === key) {
+        idx = k;
+
+        break;
+      }
+    }
+
+    if (idx !== -1) {
+      this._entries.splice(idx, 1);
+    }
+  };
+}

package/lib/features/drilldown/DrilldownOverlayBehavior.js

@@ -0,0 +1,181 @@
+import inherits from 'inherits';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+import { is } from '../../util/ModelUtil';
+import { classes, domify } from 'min-dom';
+import { getPlaneIdFromShape } from '../../util/DrilldownUtil';
+
+var LOW_PRIORITY = 250;
+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 EMPTY_MARKER = 'bjs-drilldown-empty';
+
+export default function DrilldownOverlayBehavior(
+    canvas, eventBus, elementRegistry, overlays
+) {
+  CommandInterceptor.call(this, eventBus);
+
+  this._canvas = canvas;
+  this._eventBus = eventBus;
+  this._elementRegistry = elementRegistry;
+  this._overlays = overlays;
+
+  var self = this;
+
+  this.executed('shape.toggleCollapse', LOW_PRIORITY, function(context) {
+    var shape = context.shape;
+
+    // Add overlay to the collapsed shape
+    if (self.canDrillDown(shape)) {
+      self.addOverlay(shape);
+    } else {
+      self.removeOverlay(shape);
+    }
+  }, true);
+
+
+  this.reverted('shape.toggleCollapse', LOW_PRIORITY, function(context) {
+    var shape = context.shape;
+
+    // Add overlay to the collapsed shape
+    if (self.canDrillDown(shape)) {
+      self.addOverlay(shape);
+    } else {
+      self.removeOverlay(shape);
+    }
+  }, true);
+
+
+  this.executed(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY,
+    function(context) {
+      var oldParent = context.oldParent,
+          newParent = context.newParent || context.parent,
+          shape = context.shape;
+
+      // Add overlay to the collapsed shape
+      if (self.canDrillDown(shape)) {
+        self.addOverlay(shape);
+      }
+
+      self.updateDrilldownOverlay(oldParent);
+      self.updateDrilldownOverlay(newParent);
+      self.updateDrilldownOverlay(shape);
+    }, true);
+
+
+  this.reverted(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY,
+    function(context) {
+      var oldParent = context.oldParent,
+          newParent = context.newParent || context.parent,
+          shape = context.shape;
+
+      // Add overlay to the collapsed shape
+      if (self.canDrillDown(shape)) {
+        self.addOverlay(shape);
+      }
+
+      self.updateDrilldownOverlay(oldParent);
+      self.updateDrilldownOverlay(newParent);
+      self.updateDrilldownOverlay(shape);
+    }, true);
+
+
+  eventBus.on('import.done', function() {
+    elementRegistry.filter(function(e) {
+      return self.canDrillDown(e);
+    }).map(function(el) {
+      self.addOverlay(el);
+    });
+  });
+
+}
+
+inherits(DrilldownOverlayBehavior, CommandInterceptor);
+
+DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
+  var canvas = this._canvas;
+
+  if (!shape) {
+    return;
+  }
+
+  var root = canvas.findRoot(shape);
+  if (root) {
+    this.updateOverlayVisibility(root);
+  }
+};
+
+
+DrilldownOverlayBehavior.prototype.canDrillDown = function(element) {
+  var canvas = this._canvas;
+  return is(element, 'bpmn:SubProcess') && canvas.findRoot(getPlaneIdFromShape(element));
+};
+
+/**
+ * Updates visibility of the drilldown overlay. If the plane has no elements,
+ * the drilldown will be only shown when the element is selected.
+ *
+ * @param {djs.model.Shape|djs.model.Root} element collapsed shape or root element
+ */
+DrilldownOverlayBehavior.prototype.updateOverlayVisibility = function(element) {
+  var overlays = this._overlays;
+
+  var bo = element.businessObject;
+
+  var overlay = overlays.get({ element: bo.id, type: 'drilldown' })[0];
+
+  if (!overlay) {
+    return;
+  }
+
+  var hasContent = bo && bo.flowElements && bo.flowElements.length;
+  classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
+};
+
+/**
+ * Attaches a drilldown button to the given element. We assume that the plane has
+ * the same id as the element.
+ *
+ * @param {djs.model.Shape} element collapsed shape
+ */
+DrilldownOverlayBehavior.prototype.addOverlay = function(element) {
+  var canvas = this._canvas;
+  var overlays = this._overlays;
+
+  var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
+  if (existingOverlays.length) {
+    this.removeOverlay(element);
+  }
+
+  var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+
+  button.addEventListener('click', function() {
+    canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
+  });
+
+  overlays.add(element, 'drilldown', {
+    position: {
+      bottom: -7,
+      right: -8
+    },
+    html: button
+  });
+
+  this.updateOverlayVisibility(element);
+};
+
+DrilldownOverlayBehavior.prototype.removeOverlay = function(element) {
+  var overlays = this._overlays;
+
+  overlays.remove({
+    element: element,
+    type: 'drilldown'
+  });
+};
+
+DrilldownOverlayBehavior.$inject = [
+  'canvas',
+  'eventBus',
+  'elementRegistry',
+  'overlays'
+];

package/lib/features/drilldown/SubprocessCompatibility.js

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

package/lib/features/drilldown/index.js

@@ -0,0 +1,17 @@
+import OverlaysModule from 'diagram-js/lib/features/overlays';
+import ChangeSupportModule from 'diagram-js/lib/features/change-support';
+import RootElementsModule from 'diagram-js/lib/features/root-elements';
+
+import DrilldownBreadcrumbs from './DrilldownBreadcrumbs';
+import DrilldownCentering from './DrilldownCentering';
+import SubprocessCompatibility from './SubprocessCompatibility';
+import DrilldownOverlayBehavior from './DrilldownOverlayBehavior';
+
+export default {
+  __depends__: [ OverlaysModule, ChangeSupportModule, RootElementsModule ],
+  __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility'],
+  drilldownBreadcrumbs: [ 'type', DrilldownBreadcrumbs ],
+  drilldownCentering: [ 'type', DrilldownCentering ],
+  drilldownOverlayBehavior: [ 'type', DrilldownOverlayBehavior ],
+  subprocessCompatibility: [ 'type', SubprocessCompatibility ]
+};