feat(bpmn-renderer): render vertical pools and lanes

bpmn-io · Nov 16, 2023 · 8ad9e86 · 8ad9e86
1 parent 7aee439
commit 8ad9e86
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 10 deletions.
diff --git a/lib/draw/BpmnRenderer.js b/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')) {

diff --git a/lib/features/modeling/behavior/IsHorizontalFix.js b/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);
     }
   });
 

diff --git a/lib/util/DiUtil.js b/lib/util/DiUtil.js
@@ -42,6 +42,26 @@ export function isExpanded(element, di) {
   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
  *

diff --git a/test/fixtures/bpmn/draw/vertical-pools.bpmn b/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>
diff --git a/test/spec/draw/BpmnRendererSpec.js b/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) {