[FEAT] render black box pool

docs/architecture/mxgraph-integration.adoc

@@ -26,7 +26,7 @@ See https://jgraph.github.io/mxgraph/docs/manual.html#3.1.5[mxGraph Complexity M
 
 On `mxGraph` graph creation, the lib fills the following group of BPMN elements:
 
-* `pool` is the parent of `lanes` and `inter-lane elements` (for instance, `message flows`)
+* `pool` is the parent of `lanes` and `inter-lane elements` (for instance, `sequence flows`), or any BPMN elements when there is no `lane`
 * `lane` is the parent of elements it includes in the BPMN source
 
 The default mxGraph parent is the parent of

docs/bpmn-support.adoc

@@ -35,8 +35,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |
 
 |Pool
-|icon:flask[]
-|Currently, the title area is filled in `gray` and may be too large
+|icon:check-circle-o[]
+|
 |===
 
 
@@ -116,12 +116,12 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 
 The event definition can be defined on the event or on the definitions.
 
-*Note*: the following icons are derived from existing solutions
+*Note*: the following events use icons derived from existing solutions
 
+* link: https://www.flaticon.com/free-icon/right-arrow_222330[Right arrow] "Icons made by https://www.flaticon.com/authors/freepik[Freepik] from https://www.flaticon.com"
 * message: https://github.com/jgraph/drawio/blob/0e19be6b42755790a749af30450c78c0d83be765/src/main/webapp/shapes/bpmn/mxBpmnShape2.js#L465[draw.io bpmn mxgraph stencil]
 * signal: https://thenounproject.com/term/triangle/2452089/[triangle] By https://thenounproject.com/imamdji99[Imam], ID from https://thenounproject.com 
 * timer: https://www.flaticon.com/free-icon/clock_223404[Timer Icon] "Icons made by https://www.flaticon.com/authors/kirill-kazachek[Kirill Kazachek] from https://www.flaticon.com"
-* right arrow: https://www.flaticon.com/free-icon/right-arrow_222330[Right arrow] "Icons made by https://www.flaticon.com/authors/freepik[Freepik] from https://www.flaticon.com"
 
 
 [cols="1,1,4", options="header"]

src/component/parser/json/converter/CollaborationConverter.ts

@@ -57,9 +57,9 @@ export default class CollaborationConverter {
 
   private buildParticipant(bpmnElements: Array<TParticipant> | TParticipant): void {
     ensureIsArray(bpmnElements).forEach(participant => {
+      const convertedParticipant = new Participant(participant.id, participant.name, participant.processRef);
+      convertedParticipantsById.set(participant.id, convertedParticipant);
       if (participant.processRef) {
-        const convertedParticipant = new Participant(participant.id, participant.name, participant.processRef);
-        convertedParticipantsById.set(participant.id, convertedParticipant);
         convertedParticipantsByProcessRef.set(participant.processRef, convertedParticipant);
       }
     });

src/component/parser/json/converter/DiagramConverter.ts

@@ -26,15 +26,18 @@ import { MessageVisibleKind } from '../../../../model/bpmn/edge/MessageVisibleKi
 import { BPMNDiagram, BPMNEdge, BPMNLabel, BPMNLabelStyle, BPMNShape } from '../../xml/bpmn-json-model/BPMNDI';
 import { Point } from '../../xml/bpmn-json-model/DC';
 import { ensureIsArray } from './ConverterUtil';
-import { ShapeBpmnMarkerKind } from '../../../../model/bpmn/shape/ShapeBpmnMarkerKind';
-import { ShapeBpmnElementKind } from '../../../../model/bpmn/shape/ShapeBpmnElementKind';
+import { ShapeBpmnElementKind, ShapeBpmnMarkerKind } from '../../../../model/bpmn/shape';
 
-function findProcessElement(participantId: string): ShapeBpmnElement {
+function findProcessElement(participantId: string): ShapeBpmnElement | undefined {
   const participant = findProcessRefParticipant(participantId);
   if (participant) {
     const originalProcessBpmnElement = findProcessBpmnElement(participant.processRef);
-    const name = participant.name || originalProcessBpmnElement.name;
-    return new ShapeBpmnElement(participant.id, name, originalProcessBpmnElement.kind, originalProcessBpmnElement.parentId);
+    if (originalProcessBpmnElement) {
+      const name = participant.name || originalProcessBpmnElement.name;
+      return new ShapeBpmnElement(participant.id, name, originalProcessBpmnElement.kind, originalProcessBpmnElement.parentId);
+    }
+    // black box pool
+    return new ShapeBpmnElement(participant.id, participant.name, ShapeBpmnElementKind.POOL);
   }
 }
 

test/e2e/bpmn.rendering.test.ts

@@ -115,6 +115,17 @@ describe('no visual regression', () => {
         windows: 0.002,
       },
     ],
+    // ubuntu: Expected image to match or be a close match to snapshot but was 0.00032007070301931506% different from snapshot
+    // macOS: Expected image to match or be a close match to snapshot but was 0.07646269456225152% different from snapshot
+    // windows: Expected image to match or be a close match to snapshot but was 0.11539494876845469% different from snapshot
+    [
+      'pools.03.black-box',
+      {
+        linux: 0.000004,
+        macos: 0.0008,
+        windows: 0.0012,
+      },
+    ],
   ]);
 
   function getImageSnapshotConfig(fileName: string): jest.ImageSnapshotConfig {

test/e2e/mxGraph.model.test.ts

@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 import BpmnVisualization from '../../src/component/BpmnVisualization';
-import { ShapeBpmnElementKind } from '../../src/model/bpmn/shape/ShapeBpmnElementKind';
-import { ShapeBpmnEventKind } from '../../src/model/bpmn/shape/ShapeBpmnEventKind';
+import { ShapeBpmnElementKind, ShapeBpmnEventKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind } from '../../src/model/bpmn/shape';
 import { SequenceFlowKind } from '../../src/model/bpmn/edge/SequenceFlowKind';
-import { ShapeBpmnSubProcessKind } from '../../src/model/bpmn/shape/ShapeBpmnSubProcessKind';
-import { MarkerIdentifier } from '../../src/component/mxgraph/StyleUtils';
+import { MarkerIdentifier } from '../../src';
 import { FlowKind } from '../../src/model/bpmn/edge/FlowKind';
 import { MessageVisibleKind } from '../../src/model/bpmn/edge/MessageVisibleKind';
 import { readFileSync } from '../helpers/file-helper';
-import { ShapeBpmnMarkerKind } from '../../src/model/bpmn/shape/ShapeBpmnMarkerKind';
 
 export interface ExpectedFont {
   name?: string;
@@ -200,6 +197,10 @@ describe('mxGraph model', () => {
     return cell;
   }
 
+  function expectModelContainsPool(cellId: string, modelElement: ExpectedShapeModelElement): void {
+    expectModelContainsShape(cellId, { ...modelElement, kind: ShapeBpmnElementKind.POOL, styleShape: mxConstants.SHAPE_SWIMLANE });
+  }
+
   it('bpmn elements should be available in the mxGraph model', async () => {
     // load BPMN
     bpmnVisualization.load(readFileSync('../fixtures/bpmn/model-complete-semantic.bpmn'));
@@ -214,6 +215,12 @@ describe('mxGraph model', () => {
       size: 11.0,
     };
 
+    // pool
+    const minimalPoolModelElement: ExpectedShapeModelElement = { kind: null };
+    expectModelContainsPool('participant_1_id', { ...minimalPoolModelElement, label: 'Pool 1' });
+    expectModelContainsPool('participant_2_id', minimalPoolModelElement);
+    expectModelContainsPool('participant_3_id', { ...minimalPoolModelElement, label: 'Black Box Process' });
+
     // start event
     expectModelContainsBpmnEvent('startEvent_1', { kind: ShapeBpmnElementKind.EVENT_START, eventKind: ShapeBpmnEventKind.NONE, font: expectedBoldFont, label: 'Start Event' });
     expectModelContainsBpmnEvent('startEvent_2_timer', { kind: ShapeBpmnElementKind.EVENT_START, eventKind: ShapeBpmnEventKind.TIMER, label: 'Timer Start Event' });

test/fixtures/bpmn/model-complete-semantic.bpmn

@@ -5,6 +5,7 @@
     <!-- Participant -->
     <semantic:participant id="participant_1_id" name="Pool 1" processRef="WFP-6-" />
     <semantic:participant id="participant_2_id" processRef="process_2" />
+    <semantic:participant id="participant_3_id" name="Black Box Process" />
 
     <!-- Message Flow -->
     <semantic:messageFlow id="message_flow_initiating_message_id" name="Message Flow with initiating message" sourceRef="startEvent_3_message" targetRef="startEvent_2_1_message" messageRef="Message_1" />
@@ -1011,7 +1012,14 @@
           <dc:Bounds x="475" y="205" width="71" height="27" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
+
+      <!-- 3rd process -->
+      <bpmndi:BPMNShape id="shape_participant_3_id" bpmnElement="participant_3_id" isHorizontal="true">
+        <dc:Bounds x="1750" y="80" width="600" height="170" />
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
+
+    <!-- BPMN Label Styles -->
     <bpmndi:BPMNLabelStyle id="bold_font_id">
       <dc:Font name="Arial" size="11" isBold="true" isItalic="false" isUnderline="false" isStrikeThrough="false" />
     </bpmndi:BPMNLabelStyle>

test/fixtures/bpmn/non-regression/pools.03.black-box.bpmn

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_0rnf2i3" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="7.3.0">
+  <bpmn:collaboration id="Collaboration_0ebknow">
+    <bpmn:participant id="Participant_162p67u" name="Black Box Process 1 Horizontal" />
+    <bpmn:participant id="Participant_16gpg6s" name="Black Box Process 2 Vertical" />
+  </bpmn:collaboration>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_0ebknow">
+      <bpmndi:BPMNShape id="Participant_05dhqe4_di" bpmnElement="Participant_162p67u" isHorizontal="true">
+        <dc:Bounds x="160" y="80" width="600" height="120" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Participant_16gpg6s_di" bpmnElement="Participant_16gpg6s" isHorizontal="false">
+        <dc:Bounds x="160" y="300" width="600" height="60" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/unit/component/parser/json/BpmnJsonParser.process.test.ts

@@ -13,57 +13,100 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ShapeBpmnElementKind } from '../../../../../src/model/bpmn/shape/ShapeBpmnElementKind';
+import { ShapeBpmnElementKind } from '../../../../../src/model/bpmn/shape';
 import { parseJsonAndExpect, parseJsonAndExpectOnlyPools, parseJsonAndExpectOnlyPoolsAndFlowNodes, parseJsonAndExpectOnlyPoolsAndLanes, verifyShape } from './JsonTestUtils';
 import { findProcessRefParticipant } from '../../../../../src/component/parser/json/converter/CollaborationConverter';
 import { BpmnJsonModel } from '../../../../../src/component/parser/xml/bpmn-json-model/BPMN20';
 
 describe('parse bpmn as json for process/pool', () => {
-  it.each([
+  describe.each([
     ['vertical', false],
     ['horizontal', true],
-  ])('json containing one %s participant referencing a process', (title: string, isHorizontal: boolean) => {
-    const json: BpmnJsonModel = {
-      definitions: {
-        targetNamespace: '',
-        collaboration: {
-          participant: { id: 'Participant_1', processRef: 'Process_1' },
+  ])('Dedicated tests for %s orientation', (title: string, isHorizontal: boolean) => {
+    it(`json containing one ${title} participant referencing a process`, () => {
+      const json: BpmnJsonModel = {
+        definitions: {
+          targetNamespace: '',
+          collaboration: {
+            participant: { id: 'Participant_1', processRef: 'Process_1' },
+          },
+          process: {
+            id: 'Process_1',
+            isExecutable: false,
+          },
+          BPMNDiagram: {
+            BPMNPlane: {
+              BPMNShape: [
+                {
+                  id: 'shape_Participant_1',
+                  bpmnElement: 'Participant_1',
+                  isHorizontal: isHorizontal,
+                  Bounds: { x: 158, y: 50, width: 1620, height: 430 },
+                },
+              ],
+            },
+          },
         },
-        process: {
-          id: 'Process_1',
-          isExecutable: false,
+      };
+
+      const model = parseJsonAndExpectOnlyPoolsAndLanes(json, 1, 0);
+
+      const pool = model.pools[0];
+      verifyShape(pool, {
+        shapeId: 'shape_Participant_1',
+        bpmnElementId: 'Participant_1',
+        bpmnElementName: undefined,
+        bpmnElementKind: ShapeBpmnElementKind.POOL,
+        parentId: undefined,
+        bounds: {
+          x: 158,
+          y: 50,
+          width: 1620,
+          height: 430,
         },
-        BPMNDiagram: {
-          BPMNPlane: {
-            BPMNShape: [
-              {
-                id: 'shape_Participant_1',
-                bpmnElement: 'Participant_1',
-                isHorizontal: isHorizontal,
-                Bounds: { x: 158, y: 50, width: 1620, height: 430 },
-              },
-            ],
+        isHorizontal: isHorizontal,
+      });
+    });
+
+    it(`json containing one ${title} participant without related process`, () => {
+      const json = {
+        definitions: {
+          targetNamespace: '',
+          collaboration: {
+            participant: { id: 'Participant_1', name: 'Participant without process ref' },
+          },
+          BPMNDiagram: {
+            BPMNPlane: {
+              BPMNShape: [
+                {
+                  id: 'shape_Participant_1',
+                  bpmnElement: 'Participant_1',
+                  isHorizontal: isHorizontal,
+                  Bounds: { x: 158, y: 50, width: 1620, height: 430 },
+                },
+              ],
+            },
           },
         },
-      },
-    };
+      };
 
-    const model = parseJsonAndExpectOnlyPoolsAndLanes(json, 1, 0);
+      const model = parseJsonAndExpectOnlyPoolsAndLanes(json, 1, 0);
 
-    const pool = model.pools[0];
-    verifyShape(pool, {
-      shapeId: 'shape_Participant_1',
-      bpmnElementId: 'Participant_1',
-      bpmnElementName: undefined,
-      bpmnElementKind: ShapeBpmnElementKind.POOL,
-      parentId: undefined,
-      bounds: {
-        x: 158,
-        y: 50,
-        width: 1620,
-        height: 430,
-      },
-      isHorizontal: isHorizontal,
+      const pool = model.pools[0];
+      verifyShape(pool, {
+        shapeId: 'shape_Participant_1',
+        bpmnElementId: 'Participant_1',
+        bpmnElementName: 'Participant without process ref',
+        bpmnElementKind: ShapeBpmnElementKind.POOL,
+        parentId: undefined,
+        isHorizontal: isHorizontal,
+        bounds: {
+          x: 158,
+          y: 50,
+          width: 1620,
+          height: 430,
+        },
+      });
     });
   });