WIP - feat(modeling): allow collapse and expand

lib/features/drilldown/DrilldownOverlays.js

@@ -3,8 +3,6 @@ import { domify } from 'min-dom';
 import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
 import { getBusinessObject, is } from '../../util/ModelUtil';
 
-import { isExpanded } from '../../util/DiUtil';
-
 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>';
 
 /**

lib/features/modeling/behavior/SubProcessPlaneBehavior.js

@@ -4,6 +4,7 @@ import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 
 import { isExpanded } from '../../../util/DiUtil';
 import { getBusinessObject, is } from '../../../util/ModelUtil';
+import { forEach } from 'min-dash';
 
 
 // TODO(nikku): test this!
@@ -37,33 +38,34 @@ export default function SubProcessPlaneBehavior(
       return;
     }
 
-    // TODO(nikku): how does this relate to our
-    // import logic where we explicitly allow only
-    // a single diagram to be shown (no drilldown)?
-    //
-    // here we do create nested plane elements forcefully,
-    // while during import these got ignored
     var businessObject = getBusinessObject(shape);
 
-    var di = bpmnFactory.create('bpmndi:BPMNPlane', {
-      bpmnElement: businessObject
-    });
+    createPlaneElement(businessObject);
+  }, true);
 
-    // TODO(nikku): BpmnImporter must wire this appropriately,
-    // i.e. add plane elements to the BPMN diagram and wrap
-    // them into a bpmndi:BPMNDiagram
+  this.postExecute('shape.toggleCollapse', 400, function(context) {
+    var shape = context.shape;
 
-    // add a virtual element (not being drawn),
-    // a copy cat of our BpmnImporter code
-    var planeElement = elementFactory.createRoot({
-      id: shape.id + '_plane',
-      type: businessObject.$type,
-      di: di,
-      businessObject: businessObject,
-      collapsed: true
-    });
+    if (!is(shape, 'bpmn:SubProcess')) {
+      return;
+    }
 
-    canvas.createPlane(shape.id, planeElement);
+    console.log(shape);
+
+    var businessObject = getBusinessObject(shape);
+
+
+    if (!isExpanded(shape)) {
+
+      // collapsed
+      var planeElement = createPlaneElement(businessObject);
+      moveChildrenToShape(shape, planeElement);
+    } else {
+
+      var plane = canvas.getPlane(shape.id);
+      moveChildrenToShape(plane.rootElement, shape);
+      canvas.removePlane(plane);
+    }
   }, true);
 
 
@@ -113,6 +115,82 @@ export default function SubProcessPlaneBehavior(
 
   // TODO(nikku): navigate out of plane if plane gets deleted,
   // i.e. via UNDO)
+  // already handled globally in diagram-js
+
+
+  /**
+   * Creates a new plane element for the given sub process and
+   * adds it to the canvas.
+   *
+   * @param {Object} businessObject
+   */
+  function createPlaneElement(businessObject) {
+
+    // TODO(nikku): how does this relate to our
+    // import logic where we explicitly allow only
+    // a single diagram to be shown (no drilldown)?
+    //
+    // here we do create nested plane elements forcefully,
+    // while during import these got ignored
+
+    var di = bpmnFactory.create('bpmndi:BPMNPlane', {
+      bpmnElement: businessObject
+    });
+
+    // TODO(nikku): BpmnImporter must wire this appropriately,
+    // i.e. add plane elements to the BPMN diagram and wrap
+    // them into a bpmndi:BPMNDiagram
+
+    // add a virtual element (not being drawn),
+    // a copy cat of our BpmnImporter code
+    var planeElement = elementFactory.createRoot({
+      id: businessObject.id + '_plane',
+      type: businessObject.$type,
+      di: di,
+      businessObject: businessObject,
+      collapsed: true
+    });
+
+    canvas.createPlane(businessObject.id, planeElement);
+
+    return planeElement;
+  }
+
+  /**
+   * Move all child elements of a given shape into a plane.
+   *
+   * @param {djs.model.Shape} source
+   * @param {djs.model.Shape} target
+   */
+  function moveChildrenToShape(source, target) {
+    var children = source.children;
+
+    var offset = {
+      x: source.x || 0 - target.x || 0,
+      y: source.y || 0 - target.y || 0
+    };
+
+
+    if (!children) {
+      return;
+    }
+
+    var immutableChildren = children.slice();
+
+    immutableChildren.forEach(function(child) {
+      if (child.waypoints) {
+        canvas.removeConnection(child);
+        canvas.addConnection(child, target);
+      } else {
+        canvas.removeShape(child);
+        canvas.addShape(child, target);
+      }
+    });
+
+    var visibleElements = moveRecursively(immutableChildren, offset);
+
+    eventBus.fire('elements.changed', { elements: visibleElements });
+  }
 }
 
 SubProcessPlaneBehavior.$inject = [
@@ -123,4 +201,31 @@ SubProcessPlaneBehavior.$inject = [
   'bpmnFactory'
 ];
 
-inherits(SubProcessPlaneBehavior, CommandInterceptor);
+inherits(SubProcessPlaneBehavior, CommandInterceptor);
+
+
+function moveRecursively(elements, offset, hidden) {
+  var result = [];
+  forEach(elements, function(element) {
+    if (element.waypoints) {
+      forEach(element.waypoints, function(waypoint) {
+        waypoint.x -= offset.x;
+        waypoint.y -= offset.y;
+      });
+    } else {
+      element.x -= offset.x;
+      element.y -= offset.y;
+    }
+
+
+    element.hidden = hidden;
+
+    result = result.concat(element);
+
+    if (element.children) {
+      result = result.concat(moveRecursively(element.children, offset, element.collapsed || hidden));
+    }
+  });
+
+  return result;
+}