fix: handle multiple missing elements #129

bassem-mostafa · 2025-08-13T12:15:20Z

Proposed Changes

As you can see in the given screenshot:

The UPPER diagram contains the FIX, which considers all the BPMN elements to be included in the diagram grid.
The BOTTOM diagram, some elements is being missing.
The BPMN XML that produces the issue is given below, which includes a comment contains the elements causing the issue.

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions 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" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="definitions_1">
  <bpmn:process id="process_1" name="Dispatch of goods&#10;Computer Hardware Shop" isExecutable="false">
    <bpmn:startEvent id="startEvent_1" name="Ship goods">
      <bpmn:outgoing>sequenceFlow_1</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:boundaryEvent id="boundaryEvent_1" name="48 hours" attachedToRef="task_7">
      <bpmn:outgoing>sequenceFlow_11</bpmn:outgoing>
      <bpmn:timerEventDefinition />
    </bpmn:boundaryEvent>
    <bpmn:endEvent id="endEvent_1" name="Shipment&#10;prepared">
      <bpmn:incoming>sequenceFlow_9</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:exclusiveGateway id="exclusiveGateway_1" name="Special&#10;handling?">
      <bpmn:incoming>sequenceFlow_3</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_13</bpmn:outgoing>
      <bpmn:outgoing>sequenceFlow_14</bpmn:outgoing>
    </bpmn:exclusiveGateway>
    <bpmn:exclusiveGateway id="exclusiveGateway_2" name="">
      <bpmn:incoming>sequenceFlow_7</bpmn:incoming>
      <bpmn:incoming>sequenceFlow_8</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_17</bpmn:outgoing>
    </bpmn:exclusiveGateway>
    <bpmn:inclusiveGateway id="inclusiveGateway_1" name="">
      <bpmn:incoming>sequenceFlow_12</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_15</bpmn:outgoing>
      <bpmn:outgoing>sequenceFlow_16</bpmn:outgoing>
    </bpmn:inclusiveGateway>
    <bpmn:inclusiveGateway id="inclusiveGateway_2" name="">
      <bpmn:incoming>sequenceFlow_4</bpmn:incoming>
      <bpmn:incoming>sequenceFlow_5</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_8</bpmn:outgoing>
    </bpmn:inclusiveGateway>
    <bpmn:inclusiveGateway id="inclusiveGateway_3" name="">
      <bpmn:incoming>sequenceFlow_18</bpmn:incoming>
      <bpmn:incoming>sequenceFlow_19</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_22</bpmn:outgoing>
    </bpmn:inclusiveGateway>
    <bpmn:parallelGateway id="parallelGateway_1" name="">
      <bpmn:incoming>sequenceFlow_1</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_2</bpmn:outgoing>
      <bpmn:outgoing>sequenceFlow_10</bpmn:outgoing>
    </bpmn:parallelGateway>
    <bpmn:parallelGateway id="parallelGateway_2" name="">
      <bpmn:incoming>sequenceFlow_17</bpmn:incoming>
      <bpmn:incoming>sequenceFlow_22</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_20</bpmn:outgoing>
    </bpmn:parallelGateway>
    <bpmn:task id="task_1" name="Insure parcel">
      <bpmn:incoming>sequenceFlow_15</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_5</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_2" name="Clarify shipment method">
      <bpmn:incoming>sequenceFlow_2</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_3</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_3" name="Write package&#10;label">
      <bpmn:incoming>sequenceFlow_16</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_4</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_4" name="Get 3 offers&#10;from logistic&#10;companies">
      <bpmn:incoming>sequenceFlow_13</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_6</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_5" name="Select logistic&#10;company and&#10;place order">
      <bpmn:incoming>sequenceFlow_6</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_7</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_6" name="Check if insurance is required">
      <bpmn:incoming>sequenceFlow_14</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_12</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_7" name="Package goods">
      <bpmn:incoming>sequenceFlow_10</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_18</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_8" name="Move package to pickup area">
      <bpmn:incoming>sequenceFlow_21</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_9</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_9" name="Notify customer about delay">
      <bpmn:incoming>sequenceFlow_11</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_19</bpmn:outgoing>
    </bpmn:task>
    <bpmn:task id="task_10" name="Fill out Shipment paperwork">
      <bpmn:incoming>sequenceFlow_20</bpmn:incoming>
      <bpmn:outgoing>sequenceFlow_21</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="sequenceFlow_1" name="" sourceRef="startEvent_1" targetRef="parallelGateway_1" />
    <bpmn:sequenceFlow id="sequenceFlow_2" name="" sourceRef="parallelGateway_1" targetRef="task_2" />
    <bpmn:sequenceFlow id="sequenceFlow_3" name="" sourceRef="task_2" targetRef="exclusiveGateway_1" />
    <bpmn:sequenceFlow id="sequenceFlow_4" name="" sourceRef="task_3" targetRef="inclusiveGateway_2" />
    <bpmn:sequenceFlow id="sequenceFlow_5" name="" sourceRef="task_1" targetRef="inclusiveGateway_2" />
    <bpmn:sequenceFlow id="sequenceFlow_6" name="" sourceRef="task_4" targetRef="task_5" />
    <bpmn:sequenceFlow id="sequenceFlow_7" name="" sourceRef="task_5" targetRef="exclusiveGateway_2" />
    <bpmn:sequenceFlow id="sequenceFlow_8" name="" sourceRef="inclusiveGateway_2" targetRef="exclusiveGateway_2" />
    <bpmn:sequenceFlow id="sequenceFlow_9" name="" sourceRef="task_8" targetRef="endEvent_1" />
    <bpmn:sequenceFlow id="sequenceFlow_10" name="" sourceRef="parallelGateway_1" targetRef="task_7" />
    <bpmn:sequenceFlow id="sequenceFlow_11" name="" sourceRef="boundaryEvent_1" targetRef="task_9" />
    <bpmn:sequenceFlow id="sequenceFlow_12" name="" sourceRef="task_6" targetRef="inclusiveGateway_1" />
    <bpmn:sequenceFlow id="sequenceFlow_13" name="yes" sourceRef="exclusiveGateway_1" targetRef="task_4" />
    <bpmn:sequenceFlow id="sequenceFlow_14" name="no" sourceRef="exclusiveGateway_1" targetRef="task_6" />
    <bpmn:sequenceFlow id="sequenceFlow_15" name="If insurance&#10;necessary" sourceRef="inclusiveGateway_1" targetRef="task_1" />
    <bpmn:sequenceFlow id="sequenceFlow_16" name="always" sourceRef="inclusiveGateway_1" targetRef="task_3" />
    <bpmn:sequenceFlow id="sequenceFlow_17" name="" sourceRef="exclusiveGateway_2" targetRef="parallelGateway_2" />
    <bpmn:sequenceFlow id="sequenceFlow_18" name="" sourceRef="task_7" targetRef="inclusiveGateway_3" />
    <bpmn:sequenceFlow id="sequenceFlow_19" name="" sourceRef="task_9" targetRef="inclusiveGateway_3" />
    <bpmn:sequenceFlow id="sequenceFlow_20" name="" sourceRef="parallelGateway_2" targetRef="task_10" />
    <bpmn:sequenceFlow id="sequenceFlow_21" name="" sourceRef="task_10" targetRef="task_8" />
<!-- This flow when included the layouter fails due to missing element from the grid
    <bpmn:sequenceFlow id="sequenceFlow_22" name="" sourceRef="inclusiveGateway_3" targetRef="parallelGateway_2" />
-->
  </bpmn:process>
</bpmn:definitions>

CLAassistant · 2025-08-13T12:15:29Z

All committers have signed the CLA.

IvanTulaev · 2025-08-14T10:51:01Z

lib/Layouter.js

-      if (grid.getElementsTotal() != elements.length) {
+      while (grid.getElementsTotal() != elements.length) {
        const gridElements = grid.getAllElements();
        const missingElements = elements.filter(el => !gridElements.includes(el) && !isBoundaryEvent(el));


Best way (imho) is remove missingElements crutch.
Another problem is isFutureIncoming function.
Now DFS stoped on exclusiveGateway_2.
DFS must work to endEvent_1.
parallelGateway_2 will be nextElement in exclusiveGateway_2 execution.

IvanTulaev

Can you remove unnecessary code?

IvanTulaev · 2025-08-18T22:55:40Z

lib/Layouter.js


      this.handleGrid(grid,visited,stack);

-      if (grid.getElementsTotal() != elements.length) {


logic duplicate of dfs start

i couldn't get what you mean ?

IvanTulaev · 2025-08-18T22:58:11Z

lib/Layouter.js

        const gridElements = grid.getAllElements();
        const missingElements = elements.filter(el => !gridElements.includes(el) && !isBoundaryEvent(el));
-        if (missingElements.length > 1) {
+        if (missingElements.length > 0) {


Only this is important

IvanTulaev · 2025-08-18T22:59:20Z

lib/Layouter.js

          this.handleGrid(grid,visited,stack);
        }
+        else
+        {


unnecessary

IvanTulaev · 2025-08-19T18:20:21Z

@bassem-mostafa, it's blilliant! 👍
Can you add test file for it problem?
And then, we will have to wait for the maintainers...

IvanTulaev · 2025-08-19T18:26:25Z

noElements.txt

barmac

Can you please add a test case to showcase the fix/make sure we don't break it in the future?

IvanTulaev · 2025-11-07T16:08:06Z

I don't have permissions to push :(
fixtures
scenario.issue-131.txt

IvanTulaev · 2025-11-07T16:10:14Z

snapshots
scenario.issue-131.txt

closes #131

fix: handle multiple missing elements

a4b9717

IvanTulaev reviewed Aug 14, 2025

View reviewed changes

IvanTulaev added a commit to IvanTulaev/bpmn-auto-layout-feat-IvanTulaev that referenced this pull request Aug 18, 2025

fix: mvp fix #33 and bpmn-io/bpmn-auto-layout#129

763fc3c

IvanTulaev reviewed Aug 18, 2025

View reviewed changes

bassem-mostafa added 2 commits August 19, 2025 11:29

remove logic duplicate of dfs start

1a50d6d

remove unnecessary code

49b7e0d

Buckwich added the needs review Review pending label Sep 30, 2025

IvanTulaev mentioned this pull request Nov 6, 2025

Cannot read properties of undefined (reading 'get') #131

Open

barmac requested changes Nov 7, 2025

View reviewed changes

bpmn-io-tasks bot removed the needs review Review pending label Nov 7, 2025

IvanTulaev approved these changes Nov 7, 2025

View reviewed changes


		this.handleGrid(grid,visited,stack);

		if (grid.getElementsTotal() != elements.length) {

fix: handle multiple missing elements #129

Are you sure you want to change the base?

fix: handle multiple missing elements #129

Uh oh!

Conversation

bassem-mostafa commented Aug 13, 2025

Proposed Changes

Uh oh!

CLAassistant commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

IvanTulaev Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

IvanTulaev left a comment

Choose a reason for hiding this comment

Uh oh!

IvanTulaev Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bassem-mostafa Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

IvanTulaev Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

IvanTulaev Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

IvanTulaev commented Aug 19, 2025

Uh oh!

IvanTulaev commented Aug 19, 2025

Uh oh!

barmac left a comment

Choose a reason for hiding this comment

Uh oh!

IvanTulaev commented Nov 7, 2025

Uh oh!

IvanTulaev commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

CLAassistant commented Aug 13, 2025 •

edited

Loading

IvanTulaev Aug 18, 2025 •

edited

Loading