bpmn-js 8.8.2 → 9.0.0-subprocesses.3

package/lib/BaseViewer.js

@@ -528,19 +528,6 @@ BaseViewer.prototype.clear = function() {
     return;
   }
 
-  // remove businessObject#di binding
-  //
-  // this is necessary, as we establish the bindings
-  // in the BpmnTreeWalker (and assume none are given
-  // on reimport)
-  this.get('elementRegistry').forEach(function(element) {
-    var bo = element.businessObject;
-
-    if (bo && bo.di) {
-      delete bo.di;
-    }
-  });
-
   // remove drawn elements
   Diagram.prototype.clear.call(this);
 };

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

package/lib/draw/BpmnRenderUtil.js

@@ -3,10 +3,16 @@ import {
   some
 } from 'min-dash';
 
+import {
+  getDi
+} from '../util/ModelUtil';
+
 import {
   componentsToPath
 } from 'diagram-js/lib/util/RenderUtil';
 
+// re-export getDi for compatibility
+export { getDi };
 
 // element utils //////////////////////
 
@@ -42,10 +48,6 @@ export function isCollection(element) {
   return element.isCollection || (dataObject && dataObject.isCollection);
 }
 
-export function getDi(element) {
-  return element.businessObject.di;
-}
-
 export function getSemantic(element) {
   return element.businessObject;
 }

package/lib/features/context-pad/ContextPadProvider.js

@@ -197,7 +197,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
   }
 
 
-  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(businessObject)) {
+  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {
 
     var childLanes = getChildLanes(element);
 

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

@@ -1,5 +1,6 @@
 import {
   getBusinessObject,
+  getDi,
   is
 } from '../../util/ModelUtil';
 
@@ -45,23 +46,13 @@ export default function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
         element = context.element;
 
     var businessObject = descriptor.oldBusinessObject = getBusinessObject(element);
+    var di = descriptor.oldDi = getDi(element);
 
     descriptor.type = element.type;
 
     copyProperties(businessObject, descriptor, 'name');
 
-    descriptor.di = {};
-
-    // colors will be set to DI
-    copyProperties(businessObject.di, descriptor.di, [
-      'fill',
-      'stroke',
-      'background-color',
-      'border-color',
-      'color'
-    ]);
-
-    copyProperties(businessObject.di, descriptor, 'isExpanded');
+    copyProperties(di, descriptor, 'isExpanded');
 
     if (isLabel(descriptor)) {
       return descriptor;
@@ -135,11 +126,13 @@ export default function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
     var cache = context.cache,
         descriptor = context.descriptor,
         oldBusinessObject = descriptor.oldBusinessObject,
-        newBusinessObject;
+        oldDi = descriptor.oldDi,
+        newBusinessObject, newDi;
 
     // do NOT copy business object if external label
     if (isLabel(descriptor)) {
       descriptor.businessObject = getBusinessObject(cache[ descriptor.labelTarget ]);
+      descriptor.di = getDi(cache[ descriptor.labelTarget ]);
 
       return;
     }
@@ -151,6 +144,13 @@ export default function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
       newBusinessObject
     );
 
+    newDi = bpmnFactory.create(oldDi.$type);
+
+    descriptor.di = moddleCopy.copyElement(
+      oldDi,
+      newDi
+    );
+
     // resolve references e.g. default sequence flow
     resolveReferences(descriptor, cache);
 

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

@@ -1,5 +1,4 @@
-import { getDi } from '../../draw/BpmnRenderUtil';
-import { getBusinessObject } from '../../util/ModelUtil';
+import { getDi } from '../../util/ModelUtil';
 
 import {
   filter,
@@ -17,7 +16,7 @@ export default function BpmnDiOrdering(eventBus, canvas) {
 
   function orderDi() {
     var root = canvas.getRootElement(),
-        rootDi = getBusinessObject(root).di,
+        rootDi = getDi(root),
         elements,
         diElements;
 

package/lib/features/drilldown/DrilldownCentering.js

@@ -0,0 +1,41 @@
+/**
+ * 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 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;
+  });
+}
+
+DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];

package/lib/features/drilldown/DrilldownOverlays.js

@@ -0,0 +1,110 @@
+import { domify, classes } from 'min-dom';
+
+import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
+import { getBusinessObject, is } from '../../util/ModelUtil';
+
+var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
+
+var 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 DrilldownOverlays(eventBus, elementRegistry, overlays, canvas) {
+  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
+  var container = canvas.getContainer();
+  var containerClasses = classes(container);
+  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="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
+
+      link.addEventListener('click', function() {
+        if (canvas.getPlane(el.id)) {
+          canvas.setActivePlane(el.id);
+        } else {
+          var plane = canvas.findPlane(el.id);
+          canvas.setActivePlane(plane);
+        }
+      });
+
+      return link;
+    });
+
+    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('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');
+    }));
+  });
+}
+
+DrilldownOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+
+
+// helpers
+var getParentChain = function(child) {
+  var bo = getBusinessObject(child);
+
+  var parents = [];
+
+  for (var element = bo; element; element = element.$parent) {
+    if (is(element, 'bpmn:SubProcess') || is(element, 'bpmn:Process')) {
+      parents.push(element);
+    }
+  }
+
+  return parents.reverse();
+};

package/lib/features/drilldown/SubprocessCompatibility.js

@@ -0,0 +1,193 @@
+
+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;
+    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 = [];
+
+  elementsToMove.forEach(function(element) {
+    var diElement = element.diElement;
+    var parent = element.parent;
+
+    // parent is expanded, get nearest collapsed parent
+    while (parent && !collapsedElements.includes(parent)) {
+      parent = parent.$parent;
+    }
+
+    // false positive, all parents are expanded
+    if (!parent) {
+      return;
+    }
+
+    var diagram = self._processToDiagramMap[parent.id];
+    if (!diagram) {
+      diagram = self.createDiagram(parent);
+      self._processToDiagramMap[parent.id] = diagram;
+      newDiagrams.push(diagram);
+    }
+
+    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,14 @@
+import OverlaysModule from 'diagram-js/lib/features/overlays';
+import ChangeSupportModule from 'diagram-js/lib/features/change-support';
+
+import DrilldownOverlays from './DrilldownOverlays';
+import DrilldownCentering from './DrilldownCentering';
+import SubprocessCompatibility from './SubprocessCompatibility';
+
+export default {
+  __depends__: [ OverlaysModule, ChangeSupportModule ],
+  __init__: [ 'drilldownOverlays', 'drilldownCentering', 'subprocessCompatibility'],
+  drilldownOverlays: [ 'type', DrilldownOverlays ],
+  drilldownCentering: [ 'type', DrilldownCentering ],
+  subprocessCompatibility: [ 'type', SubprocessCompatibility ]
+};

package/lib/features/label-editing/LabelEditingPreview.js

@@ -6,7 +6,7 @@ import {
 } from 'tiny-svg';
 
 import {
-  getBusinessObject,
+  getDi,
   is
 } from '../../util/ModelUtil';
 
@@ -132,7 +132,7 @@ LabelEditingPreview.$inject = [
 // helpers ///////////////////
 
 function getStrokeColor(element, defaultColor) {
-  var bo = getBusinessObject(element);
+  var di = getDi(element);
 
-  return bo.di.get('stroke') || defaultColor || 'black';
+  return di.get('stroke') || defaultColor || 'black';
 }

package/lib/features/label-editing/cmd/UpdateLabelHandler.js

@@ -67,7 +67,8 @@ export default function UpdateLabelHandler(modeling, textRenderer) {
 
       modeling.createLabel(element, labelCenter, {
         id: businessObject.id + '_label',
-        businessObject: businessObject
+        businessObject: businessObject,
+        di: element.di
       });
     }
   }

package/lib/features/modeling/BpmnFactory.js

@@ -83,11 +83,10 @@ BpmnFactory.prototype.createDiLabel = function() {
 };
 
 
-BpmnFactory.prototype.createDiShape = function(semantic, bounds, attrs) {
-
+BpmnFactory.prototype.createDiShape = function(semantic, attrs) {
   return this.create('bpmndi:BPMNShape', assign({
     bpmnElement: semantic,
-    bounds: this.createDiBounds(bounds)
+    bounds: this.createDiBounds()
   }, attrs));
 };
 
@@ -110,14 +109,15 @@ BpmnFactory.prototype.createDiWaypoint = function(point) {
 };
 
 
-BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
+BpmnFactory.prototype.createDiEdge = function(semantic, attrs) {
   return this.create('bpmndi:BPMNEdge', assign({
-    bpmnElement: semantic
+    bpmnElement: semantic,
+    waypoints: this.createDiWaypoints([])
   }, attrs));
 };
 
-BpmnFactory.prototype.createDiPlane = function(semantic) {
-  return this.create('bpmndi:BPMNPlane', {
+BpmnFactory.prototype.createDiPlane = function(semantic, attrs) {
+  return this.create('bpmndi:BPMNPlane', assign({
     bpmnElement: semantic
-  });
+  }, attrs));
 };