Render Vertical Participants and Lanes

lib/draw/BpmnRenderer.js

@@ -10,6 +10,7 @@ import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
 
 import {
   isExpanded,
+  isHorizontal,
   isEventSubProcess
 } from '../util/DiUtil';
 
@@ -1063,20 +1064,23 @@ export default function BpmnRenderer(
   }
 
   function renderLaneLabel(parentGfx, text, element, attrs = {}) {
+    var isHorizontalLane = isHorizontal(element);
+
     var textBox = renderLabel(parentGfx, text, {
       box: {
         height: 30,
-        width: getHeight(element, attrs),
+        width: isHorizontalLane ? getHeight(element, attrs) : getWidth(element, attrs),
       },
       align: 'center-middle',
       style: {
         fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
       }
     });
 
-    var top = -1 * getHeight(element, attrs);
-
-    transform(textBox, 0, -top, 270);
+    if (isHorizontalLane) {
+      var top = -1 * getHeight(element, attrs);
+      transform(textBox, 0, -top, 270);
+    }
   }
 
   function renderActivity(parentGfx, element, attrs = {}) {
@@ -1794,12 +1798,13 @@ export default function BpmnRenderer(
       var participant = renderLane(parentGfx, element, attrs);
 
       var expandedParticipant = isExpanded(element);
+      var horizontalParticipant = isHorizontal(element);
 
       var semantic = getSemantic(element),
           name = semantic.get('name');
 
       if (expandedParticipant) {
-        drawLine(parentGfx, [
+        var waypoints = horizontalParticipant ? [
           {
             x: 30,
             y: 0
@@ -1808,20 +1813,43 @@ export default function BpmnRenderer(
             x: 30,
             y: getHeight(element, attrs)
           }
-        ], {
+        ] : [
+          {
+            x: 0,
+            y: 30
+          },
+          {
+            x: getWidth(element, attrs),
+            y: 30
+          }
+        ];
+
+        drawLine(parentGfx, waypoints, {
           stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
           strokeWidth: PARTICIPANT_STROKE_WIDTH
         });
 
         renderLaneLabel(parentGfx, name, element, attrs);
       } else {
-        renderLabel(parentGfx, name, {
-          box: getBounds(element, attrs),
+        var bounds = getBounds(element, attrs);
+
+        if (!horizontalParticipant) {
+          bounds.height = getWidth(element, attrs);
+          bounds.width = getHeight(element, attrs);
+        }
+
+        var textBox = renderLabel(parentGfx, name, {
+          box: bounds,
           align: 'center-middle',
           style: {
             fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
           }
         });
+
+        if (!horizontalParticipant) {
+          var top = -1 * getHeight(element, attrs);
+          transform(textBox, 0, -top, 270);
+        }
       }
 
       if (semantic.get('participantMultiplicity')) {

lib/features/label-editing/LabelEditingProvider.js

@@ -11,7 +11,11 @@ import {
 } from '../../util/ModelUtil';
 
 import { isAny } from '../modeling/util/ModelingUtil';
-import { isExpanded } from '../../util/DiUtil';
+
+import {
+  isExpanded,
+  isHorizontal
+} from '../../util/DiUtil';
 
 import {
   getExternalLabelMid,
@@ -277,13 +281,47 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
 
   // adjust for expanded pools AND lanes
   if (is(element, 'bpmn:Lane') || isExpandedPool(element)) {
+    var isHorizontalLane = isHorizontal(element);
 
-    assign(bounds, {
+    var laneBounds = isHorizontalLane ? {
       width: bbox.height,
       height: 30 * zoom,
       x: bbox.x - bbox.height / 2 + (15 * zoom),
       y: mid.y - (30 * zoom) / 2
+    } : {
+      width: bbox.width,
+      height: 30 * zoom
+    };
+
+    assign(bounds, laneBounds);
+
+    assign(style, {
+      fontSize: defaultFontSize + 'px',
+      lineHeight: defaultLineHeight,
+      paddingTop: (7 * zoom) + 'px',
+      paddingBottom: (7 * zoom) + 'px',
+      paddingLeft: (5 * zoom) + 'px',
+      paddingRight: (5 * zoom) + 'px',
+      transform: isHorizontalLane ? 'rotate(-90deg)' : null
     });
+  }
+
+
+  // internal labels for collapsed participants
+  if (isCollapsedPool(element)) {
+    var isHorizontalPool = isHorizontal(element);
+
+    var poolBounds = isHorizontalPool ? {
+      width: bbox.width,
+      height: bbox.height
+    } : {
+      width: bbox.height,
+      height: bbox.width,
+      x: mid.x - bbox.height / 2,
+      y: mid.y - bbox.width / 2
+    };
+
+    assign(bounds, poolBounds);
 
     assign(style, {
       fontSize: defaultFontSize + 'px',
@@ -292,15 +330,14 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
       paddingBottom: (7 * zoom) + 'px',
       paddingLeft: (5 * zoom) + 'px',
       paddingRight: (5 * zoom) + 'px',
-      transform: 'rotate(-90deg)'
+      transform: isHorizontalPool ? null : 'rotate(-90deg)'
     });
   }
 
 
-  // internal labels for tasks and collapsed call activities,
-  // sub processes and participants
+  // internal labels for tasks and collapsed call activities
+  // and sub processes
   if (isAny(element, [ 'bpmn:Task', 'bpmn:CallActivity' ]) ||
-      isCollapsedPool(element) ||
       isCollapsedSubProcess(element)) {
 
     assign(bounds, {

lib/features/modeling/behavior/IsHorizontalFix.js

@@ -35,10 +35,15 @@ export default function IsHorizontalFix(eventBus) {
         bo = getBusinessObject(shape),
         di = getDi(shape);
 
-    if (isAny(bo, elementTypesToUpdate) && !di.get('isHorizontal')) {
+    if (isAny(bo, elementTypesToUpdate)) {
+      var isHorizontal = di.get('isHorizontal');
+
+      if (isHorizontal === undefined) {
+        isHorizontal = true;
+      }
 
       // set attribute directly to avoid modeling#updateProperty side effects
-      di.set('isHorizontal', true);
+      di.set('isHorizontal', isHorizontal);
     }
   });
 

lib/util/DiUtil.js

@@ -42,6 +42,26 @@
   return true;
 }
 
+/**
+ * @param {Element} element
+ *
+ * @return {boolean}
+ */
+export function isHorizontal(element) {
+
+  if (!is(element, 'bpmn:Participant') && !is(element, 'bpmn:Lane')) {
+    return undefined;
+  }
+
+  var isHorizontal = getDi(element).isHorizontal;
+
+  if (isHorizontal === undefined) {
+    return true;
+  }
+
+  return isHorizontal;
+}
+
 /**
  * @param {Element} element
  *

test/fixtures/bpmn/draw/vertical-pools.bpmn

@@ -0,0 +1,52 @@
+<?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:xsi="http://www.w3.org/2001/XMLSchema-instance" exporter="Camunda Modeler" exporterVersion="5.16.0" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
+  <collaboration id="Collaboration_0m9vq4y">
+    <participant id="Participant_00h09d6" name="Collapsed Pool" />
+    <participant id="Participant_1wpkruh" name="Extended Pool" processRef="Process_01t5csh" />
+    <participant id="Participant_1xkqrsy" name="Pool with Lanes" processRef="Process_10fpr09" />
+  </collaboration>
+  <process id="Process_01t5csh" isExecutable="false" />
+  <process id="Process_10fpr09" isExecutable="false">
+    <laneSet id="LaneSet_1cmncwp">
+      <lane id="Lane_07czuri" name="Single Lane" />
+      <lane id="Lane_1tqhum3" name="Lane with Sublane">
+        <childLaneSet id="LaneSet_1xtuknm">
+          <lane id="Lane_0amfnv8" name="Sublane" />
+          <lane id="Lane_0juuif9" name="Sublane 2" />
+        </childLaneSet>
+      </lane>
+    </laneSet>
+  </process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_0m9vq4y">
+      <bpmndi:BPMNShape id="Participant_050dim5_di" bpmnElement="Participant_00h09d6" isHorizontal="false">
+        <omgdc:Bounds y="160" x="57" height="600" width="60" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Participant_1wpkruh_di" bpmnElement="Participant_1wpkruh" isHorizontal="false">
+        <omgdc:Bounds y="160" x="165" height="600" width="250" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Participant_1xkqrsy_di" bpmnElement="Participant_1xkqrsy" isHorizontal="false">
+        <omgdc:Bounds y="160" x="460" height="600" width="400" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Lane_07czuri_di" bpmnElement="Lane_07czuri" isHorizontal="false">
+        <omgdc:Bounds y="190" x="460" height="570" width="130" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Lane_1tqhum3_di" bpmnElement="Lane_1tqhum3" isHorizontal="false">
+        <omgdc:Bounds y="190" x="590" height="570" width="270" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Lane_0amfnv8_di" bpmnElement="Lane_0amfnv8" isHorizontal="false">
+        <omgdc:Bounds y="220" x="590" height="540" width="140" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Lane_0juuif9_di" bpmnElement="Lane_0juuif9" isHorizontal="false">
+        <omgdc:Bounds y="220" x="730" height="540" width="130" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</definitions>

test/spec/draw/BpmnRendererSpec.js

@@ -214,6 +214,15 @@ describe('draw - bpmn renderer', function() {
   });
 
 
+  it('should render vertical pools', function() {
+    var xml = require('../../fixtures/bpmn/draw/vertical-pools.bpmn');
+    return bootstrapViewer(xml).call(this).then(function(result) {
+
+      checkErrors(result.error, result.warnings);
+    });
+  });
+
+
   it('should render pool collection marker', function() {
     var xml = require('../../fixtures/bpmn/draw/pools-with-collection-marker.bpmn');
     return bootstrapViewer(xml).call(this).then(function(result) {

test/spec/features/label-editing/LabelEditing.bpmn

@@ -3,6 +3,8 @@
   <bpmn:collaboration id="Collaboration_1o0amh9">
     <bpmn:participant id="Participant_1" name="FOO BAR" processRef="Process_1" />
     <bpmn:participant id="Participant_2" />
+    <bpmn:participant id="Participant_3" name="VER" processRef="Process_3" />
+    <bpmn:participant id="Participant_4" name="CAL" />
     <bpmn:messageFlow id="MessageFlow_1" name="FOO" sourceRef="Task_1fo1fvh" targetRef="Participant_2" />
     <bpmn:textAnnotation id="TextAnnotation_1">    <bpmn:text>FOO</bpmn:text>
 </bpmn:textAnnotation>
@@ -75,6 +77,12 @@
   <bpmn:category id="Category_1">
     <bpmn:categoryValue id="CategoryValue_1" value="FOO" />
   </bpmn:category>
+  <bpmn:process id="Process_3" isExecutable="false">
+    <bpmn:laneSet id="LaneSet_0qq17vw">
+      <bpmn:lane id="Vertical_Lane_2" name="TI" />
+      <bpmn:lane id="Vertical_Lane_1" />
+    </bpmn:laneSet>
+  </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1o0amh9">
       <bpmndi:BPMNShape id="Participant_15tkgjw_di" bpmnElement="Participant_1">
@@ -193,6 +201,21 @@
       <bpmndi:BPMNShape id="Participant_0kzj58d_di" bpmnElement="Participant_2">
         <dc:Bounds x="161" y="646" width="600" height="250" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Participant_09pdsq3_di" bpmnElement="Participant_3" isHorizontal="false">
+        <dc:Bounds x="900" y="122" width="250" height="600" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Lane_1ja5e3n_di" bpmnElement="Vertical_Lane_2" isHorizontal="false">
+        <dc:Bounds x="1025" y="152" width="125" height="570" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Lane_0u3fowr_di" bpmnElement="Vertical_Lane_1" isHorizontal="false">
+        <dc:Bounds x="900" y="152" width="125" height="570" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Participant_03y1uz8_di" bpmnElement="Participant_4" isHorizontal="false">
+        <dc:Bounds x="1178" y="122" width="60" height="600" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="DataOutput_di" bpmnElement="DataOutput">
         <dc:Bounds x="265" y="150" width="34" height="40" />
         <bpmndi:BPMNLabel>