bpmn-js 9.0.0-subprocesses.0 → 9.0.0

package/lib/BaseViewer.js

@@ -439,7 +439,7 @@ BaseViewer.prototype.saveSVG = wrapForCompatibility(function saveSVG(options) {
     try {
       var canvas = self.get('canvas');
 
-      var contentNode = canvas.getDefaultLayer(),
+      var contentNode = canvas.getActiveLayer(),
           defsNode = domQuery('defs', canvas._svg);
 
       var contents = innerSVG(contentNode),

package/lib/Modeler.js

@@ -35,8 +35,6 @@ import ResizeModule from 'diagram-js/lib/features/resize';
 import SnappingModule from './features/snapping';
 import SearchModule from './features/search';
 
-import CollapsedSubprocessModule from './features/collapsed-subprocesses';
-
 import {
   wrapForCompatibility
 } from './util/CompatibilityUtil';
@@ -176,8 +174,7 @@ Modeler.prototype._interactionModules = [
   KeyboardMoveModule,
   MoveCanvasModule,
   TouchModule,
-  ZoomScrollModule,
-  CollapsedSubprocessModule
+  ZoomScrollModule
 ];
 
 Modeler.prototype._modelingModules = [

package/lib/Viewer.js

@@ -4,7 +4,7 @@ import CoreModule from './core';
 import TranslateModule from 'diagram-js/lib/i18n/translate';
 import SelectionModule from 'diagram-js/lib/features/selection';
 import OverlaysModule from 'diagram-js/lib/features/overlays';
-import CollapsedSubprocessNavigationModule from './features/collapsed-subprocesses-navigation';
+import DrilldownModdule from './features/drilldown';
 
 import BaseViewer from './BaseViewer';
 
@@ -68,7 +68,7 @@ Viewer.prototype._modules = [
   TranslateModule,
   SelectionModule,
   OverlaysModule,
-  CollapsedSubprocessNavigationModule
+  DrilldownModdule
 ];
 
 // default moddle extensions the viewer is composed of

package/lib/draw/BpmnRenderer.js

@@ -382,16 +382,16 @@ export default function BpmnRenderer(
     return drawPath(parentGfx, path, assign({ 'data-marker': type }, attrs));
   }
 
+  function renderer(type) {
+    return handlers[type];
+  }
+
   function as(type) {
     return function(parentGfx, element) {
-      return handlers[type](parentGfx, element);
+      return renderer(type)(parentGfx, element);
     };
   }
 
-  function renderer(type) {
-    return handlers[type];
-  }
-
   function renderEventContent(element, parentGfx) {
 
     var event = getSemantic(element);
@@ -1872,6 +1872,7 @@ export default function BpmnRenderer(
   // extension API, use at your own risk
   this._drawPath = drawPath;
 
+  this._renderer = renderer;
 }
 
 
@@ -1893,7 +1894,7 @@ BpmnRenderer.prototype.canRender = function(element) {
 
 BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
   var type = element.type;
-  var h = this.handlers[type];
+  var h = this._renderer(type);
 
   /* jshint -W040 */
   return h(parentGfx, element);
@@ -1901,7 +1902,7 @@ BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
 
 BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
   var type = element.type;
-  var h = this.handlers[type];
+  var h = this._renderer(type);
 
   /* jshint -W040 */
   return h(parentGfx, element);

package/lib/draw/PathMap.js

@@ -444,8 +444,8 @@ export default function PathMap() {
 
 // helpers //////////////////////
 
-// copied from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
-var tokenRegex = /\{([^}]+)\}/g,
+// copied and adjusted from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
+var tokenRegex = /\{([^{}]+)\}/g,
     objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties
 
 function replacer(all, key, obj) {

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

@@ -1,4 +1,4 @@
-import { getDi, is } from '../../util/ModelUtil';
+import { is } from '../../util/ModelUtil';
 
 import inherits from 'inherits';
 
@@ -32,11 +32,14 @@ BpmnAutoResizeProvider.$inject = [
  * @return {boolean}
  */
 BpmnAutoResizeProvider.prototype.canResize = function(elements, target) {
-  if (
-    !is(target, 'bpmn:Participant') &&
-    !is(target, 'bpmn:Lane') &&
-    (!is(target, 'bpmn:SubProcess') || is(getDi(target), 'bpmndi:BPMNPlane'))
-  ) {
+
+  // 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/copy-paste/ModdleCopy.js

@@ -215,11 +215,16 @@ ModdleCopy.prototype.copyProperty = function(property, parent, propertyName) {
 
   var propertyDescriptor = this._moddle.getPropertyDescriptor(parent, propertyName);
 
-  // do NOT copy Ids and references
-  if (propertyDescriptor.isId || propertyDescriptor.isReference) {
+  // do NOT copy references
+  if (propertyDescriptor.isReference) {
     return;
   }
 
+  // copy id
+  if (propertyDescriptor.isId) {
+    return this._copyId(property, parent);
+  }
+
   // copy arrays
   if (isArray(property)) {
     return reduce(property, function(childProperties, childProperty) {
@@ -258,6 +263,18 @@ ModdleCopy.prototype.copyProperty = function(property, parent, propertyName) {
   return property;
 };
 
+ModdleCopy.prototype._copyId = function(id, element) {
+
+  // disallow if already taken
+  if (this._moddle.ids.assigned(id)) {
+    return;
+  } else {
+
+    this._moddle.ids.claim(id, element);
+    return id;
+  }
+};
+
 // helpers //////////
 
 export function getPropertyNames(descriptor, keepDefaultProperties) {

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'
+];