bpmn-io / bpmn-auto-layout Goto Github PK

View Code? Open in Web Editor NEW

46.0 14.0 38.0 460 KB

Layout BPMN diagrams, generating missing DI information.

JavaScript 100.00%

bpmn bpmn-layout layouter

bpmn-auto-layout's People

Stargazers

Watchers

bpmn-auto-layout's Issues

`TypeError: Cannot read properties of undefined (reading 'filter')`

Describe the Bug

I refactored example.js imports. In the end, I run the script to see how the layoutProcess function will set di elements for the bpmn structure. But unfortunately, it throws an error:

file:///home/corocoto/Documents/Github/bpmn-auto-layout/dist/index.esm.js:707
    const startingElements = flowElements.filter(el => {
                                          ^

TypeError: Cannot read properties of undefined (reading 'filter')
    at Layouter.createGridLayout (file:///home/corocoto/Documents/Github/bpmn-auto-layout/dist/index.esm.js:707:43)
    at Layouter.handlePlane (file:///home/corocoto/Documents/Github/bpmn-auto-layout/dist/index.esm.js:694:25)
    at Layouter.createGridLayout (file:///home/corocoto/Documents/Github/bpmn-auto-layout/dist/index.esm.js:732:14)
    at Layouter.handlePlane (file:///home/corocoto/Documents/Github/bpmn-auto-layout/dist/index.esm.js:694:25)
    at Layouter.layoutProcess (file:///home/corocoto/Documents/Github/bpmn-auto-layout/dist/index.esm.js:688:10)
    at async file:///home/corocoto/Documents/Github/bpmn-auto-layout/example.js:65:28

Steps to Reproduce

Open a test project in the Replit
Click onto the "Run" button

Expected Behavior

The script will print a new bpmn structure into a console and also will write it into layouted.bpmn file.

Environment

Host (Browser/Node version), if applicable: Node v20.11.1
OS: Linux Mint 20.3 x86_64
Library version: Latest

Status of this library

What is the status of this library? Is it maintained anymore?

It seems quite outdated. The bpmn-moddle upstream lib used is ancient (0.12.2 vs 5.1.6) and misses also the switch to ES6 modules.

There are also BPMN elements which are not supported:

lanes
text annotations
multiple start events
maybe some more ...

Then there are also bugs as #5, and missing tests and no published package as in #1.

So, would it be appreciated to modernize this lib and fix some of this outstanding issues? Would be pull request be taken?

Thanks

CommonJS exports should use the `.cjs` extension

Describe the Bug

It's not possible to import the bpmn-auto-layout module in Node when the importing project is using CommonJS module imports.

Steps to Reproduce

Create a Node project using CommonJS modules ("type": "commonjs" in package.json)
Install the bpmn-auto-layout in the project.
Create and run a script that requires bpmn-auto-layout
The following error is displayed:

require() of ES Module [path]/node_modules/bpmn-auto-layout/dist/index.js from [path]/create_diagram.ts not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/morten/git/Ashby/backend/node_modules/bpmn-auto-layout/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Expected Behavior

The script should run without errors.

I've patched the package locally to use the .cjs file extension for the CommonJS exports and that fixes the issue for me.

I would be happy to submit a PR to fix the issue.

Environment

Node v.18.15
OS: MacOS Ventura 13.1
Library version: 0.3.0

auto layout works not with non-bpmn element prefix

Hi,

I've tried your auto-layout module for converting bpmn generated by Camunda's java model api into xml with bpmndi elements. When I put your example xml (test/fixtures/diagram_1.bpmn) into the module, it works perfectly. Unfortunately Camunda's model api produces bpmn that looks like that:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<definitions id="definitions_64a2f436-4ab3-423e-bd8e-8f6850b39731" targetNamespace="http://camunda.org/examples" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
  <process id="pid-cbf5bddf-5dcb-4706-ac74-e4cd9e1ea2e6">
    <startEvent id="startevent1" name="message incoming">
      <outgoing>startevent1-gateway1</outgoing>
    </startEvent>
    <userTask id="usertask1" name="do something">
      <incoming>gateway1-usertask1</incoming>
      <outgoing>usertask1-gateway2</outgoing>
    </userTask>
    <userTask id="usertask2">
      <incoming>gateway1-usertask2</incoming>
      <outgoing>usertask2-gateway2</outgoing>
    </userTask>
    <parallelGateway id="gateway1">
      <incoming>startevent1-gateway1</incoming>
      <outgoing>gateway1-usertask1</outgoing>
      <outgoing>gateway1-usertask2</outgoing>
    </parallelGateway>
    <parallelGateway id="gateway2">
      <incoming>usertask1-gateway2</incoming>
      <incoming>usertask2-gateway2</incoming>
      <outgoing>gateway2-endevent1</outgoing>
    </parallelGateway>
    <sequenceFlow id="startevent1-gateway1" sourceRef="startevent1" targetRef="gateway1"/>
    <sequenceFlow id="gateway1-usertask1" sourceRef="gateway1" targetRef="usertask1"/>
    <sequenceFlow id="gateway1-usertask2" sourceRef="gateway1" targetRef="usertask2"/>
    <sequenceFlow id="usertask1-gateway2" sourceRef="usertask1" targetRef="gateway2"/>
    <sequenceFlow id="usertask2-gateway2" sourceRef="usertask2" targetRef="gateway2"/>
    <endEvent id="endevent1" name="terminated">
      <incoming>gateway2-endevent1</incoming>
    </endEvent>
    <sequenceFlow id="gateway2-endevent1" sourceRef="gateway2" targetRef="endevent1"/>
  </process>
</definitions>

and the layouting crashes:

~/Github/bpmn-moddle-auto-layout/lib/AutoLayout.js:158
  var childrenDi = parentDi.get('planeElement'),
                            ^

TypeError: parentDi.get is not a function
    at AutoLayout._layoutElements (/Users/niklaskiefer/Github/bpmn-moddle-auto-layout/lib/AutoLayout.js:158:29)
    at AutoLayout._layoutGroup (/Users/niklaskiefer/Github/bpmn-moddle-auto-layout/lib/AutoLayout.js:136:24)
    at AutoLayout._breadFirstSearch (/Users/niklaskiefer/Github/bpmn-moddle-auto-layout/lib/AutoLayout.js:110:8)
    at /Users/niklaskiefer/Github/bpmn-moddle-auto-layout/lib/AutoLayout.js:41:10
    at /Users/niklaskiefer/Github/bpmn-moddle-auto-layout/node_modules/moddle-xml/lib/reader.js:720:5
    at Timeout._onTimeout (/Users/niklaskiefer/Github/bpmn-moddle-auto-layout/node_modules/lodash/internal/baseDelay.js:18:39)
    at tryOnTimeout (timers.js:224:11)
    at Timer.listOnTimeout (timers.js:198:5)

I think it's about the bpmn generated by camunda do not have the bpmn-prefix in each element, while the example bpmn file (test/fixtures/diagram_1.bpmn) has it.
Is there any way to auto-layouting bpmn-xml without the bpmn-prefix?

TypeError: Cannot read properties of undefined (reading 'pop')

Describe the Bug

I tried to transform bpmn-structure without di to the structure with di-elements that will have their own markup (with set positions and sizes). But after calling AutoLayout's layoutProcess method, I got an error TypeError: Cannot read properties of undefined (reading 'pop').

Steps to Reproduce

Create a constant with the next bpmn structure, and try to form a new one (with added di elements and auto layout) by using layoutProcess method:

const diagramXML = `
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" id="variant-explorer-bpmn-graph" targetNamespace="http://bpmn.io/schema/bpmn">
    <bpmn2:process id="Process">
        <bpmn2:sequenceFlow 
            id="task2-exclusiveGateway2" 
            sourceRef="task2" 
            targetRef="exclusiveGateway2" 
        />
        <bpmn2:sequenceFlow 
            id="exclusiveGateway1-task1" 
            sourceRef="exclusiveGateway1" 
            targetRef="task1" 
        />
        <bpmn2:sequenceFlow 
            id="task9-exclusiveGateway4" 
            sourceRef="task9" 
            targetRef="exclusiveGateway4" 
        />
        <bpmn2:sequenceFlow 
            id="exclusiveGateway3-task9" 
            sourceRef="exclusiveGateway3" 
            targetRef="task9" 
        />
        <bpmn2:sequenceFlow 
            id="task3-task4" 
            sourceRef="task3" 
            targetRef="task4" 
        />
        <bpmn2:task id="task3" name="Task3">
            <bpmn2:incoming>exclusiveGateway2-task3</bpmn2:incoming>
            <bpmn2:outgoing>task3-task4</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:task id="task4" name="task4">
            <bpmn2:incoming>task3-task4</bpmn2:incoming>
            <bpmn2:outgoing>task4-task5</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:sequenceFlow 
            id="task8-exclusiveGateway3" 
            sourceRef="task8" 
            targetRef="exclusiveGateway3" 
        />
        <bpmn2:task id="task8" name="Task8">
            <bpmn2:incoming>task7-task8</bpmn2:incoming>
            <bpmn2:outgoing>task8-exclusiveGateway3</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:exclusiveGateway id="exclusiveGateway3">
            <bpmn2:incoming>task8-exclusiveGateway3</bpmn2:incoming>
            <bpmn2:incoming>exclusiveGateway2-exclusiveGateway3</bpmn2:incoming>
            <bpmn2:incoming>task5-exclusiveGateway3</bpmn2:incoming>
            <bpmn2:outgoing>exclusiveGateway3-task9</bpmn2:outgoing>
        </bpmn2:exclusiveGateway>
        <bpmn2:exclusiveGateway id="exclusiveGateway4">
            <bpmn2:incoming>task9-exclusiveGateway4</bpmn2:incoming>
            <bpmn2:outgoing>exclusiveGateway4-exclusiveGateway1</bpmn2:outgoing>
            <bpmn2:outgoing>exclusiveGateway4-endEvent</bpmn2:outgoing>
        </bpmn2:exclusiveGateway>
        <bpmn2:task id="task9" name="Task9">
            <bpmn2:incoming>exclusiveGateway3-task9</bpmn2:incoming>
            <bpmn2:outgoing>task9-exclusiveGateway4</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:sequenceFlow 
            id="task1-task2" 
            sourceRef="task1" 
            targetRef="task2" 
        />
        <bpmn2:exclusiveGateway id="exclusiveGateway1">
            <bpmn2:incoming>startEvent-exclusiveGateway1</bpmn2:incoming>
            <bpmn2:incoming>exclusiveGateway4-exclusiveGateway1</bpmn2:incoming>
            <bpmn2:outgoing>exclusiveGateway1-task1</bpmn2:outgoing>
        </bpmn2:exclusiveGateway>
        <bpmn2:task id="task1" name="Task1">
            <bpmn2:incoming>exclusiveGateway1-task1</bpmn2:incoming>
            <bpmn2:outgoing>task1-task2</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:exclusiveGateway id="exclusiveGateway2">
            <bpmn2:incoming>task2-exclusiveGateway2</bpmn2:incoming>
            <bpmn2:outgoing>exclusiveGateway2-exclusiveGateway3</bpmn2:outgoing>
            <bpmn2:outgoing>exclusiveGateway2-task3</bpmn2:outgoing>
            <bpmn2:outgoing>exclusiveGateway2-task6</bpmn2:outgoing>
        </bpmn2:exclusiveGateway>
        <bpmn2:task id="task2" name="Task2">
            <bpmn2:incoming>task1-task2</bpmn2:incoming>
            <bpmn2:outgoing>task2-exclusiveGateway2</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:sequenceFlow 
            id="exclusiveGateway2-exclusiveGateway3" 
            sourceRef="exclusiveGateway2" 
            targetRef="exclusiveGateway3" 
        />
        <bpmn2:sequenceFlow 
            id="startEvent-exclusiveGateway1" 
            sourceRef="startEvent" 
            targetRef="exclusiveGateway1" 
        />
        <bpmn2:startEvent id="startEvent" name="Start">
            <bpmn2:outgoing>startEvent-exclusiveGateway1</bpmn2:outgoing>
        </bpmn2:startEvent>
        <bpmn2:sequenceFlow 
            id="exclusiveGateway2-task3" 
            sourceRef="exclusiveGateway2" 
            targetRef="task3" 
        />
        <bpmn2:sequenceFlow 
            id="task4-task5" 
            sourceRef="task4" 
            targetRef="task5" 
        />
        <bpmn2:task id="task5" name="Task5">
            <bpmn2:incoming>task4-task5</bpmn2:incoming>
            <bpmn2:outgoing>task5-exclusiveGateway3</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:sequenceFlow 
            id="task7-task8" 
            sourceRef="task7" 
            targetRef="task8" 
        />
        <bpmn2:task id="task7" name="Task7">
            <bpmn2:incoming>task6-task7</bpmn2:incoming>
            <bpmn2:outgoing>task7-task8</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:sequenceFlow 
            id="exclusiveGateway4-exclusiveGateway1" 
            sourceRef="exclusiveGateway4" 
            targetRef="exclusiveGateway1" 
        />
        <bpmn2:sequenceFlow 
            id="task6-task7" 
            sourceRef="task6" 
            targetRef="task7" 
        />
        <bpmn2:task id="task6" name="Task6">
            <bpmn2:incoming>exclusiveGateway2-task6</bpmn2:incoming>
            <bpmn2:outgoing>task6-task7</bpmn2:outgoing>
        </bpmn2:task>
        <bpmn2:sequenceFlow 
            id="exclusiveGateway2-task6" 
            sourceRef="exclusiveGateway2" 
            targetRef="task6" 
        />
        <bpmn2:sequenceFlow 
            id="task5-exclusiveGateway3" 
            sourceRef="task5" 
            targetRef="exclusiveGateway3" 
        />
        <bpmn2:sequenceFlow 
            id="exclusiveGateway4-endEvent" 
            sourceRef="exclusiveGateway4" 
            targetRef="endEvent" 
        />
        <bpmn2:endEvent id="endEvent" name="endEvent">
            <bpmn2:incoming>exclusiveGateway4-endEvent</bpmn2:incoming>
        </bpmn2:endEvent>
    </bpmn2:process>
</bpmn2:definitions>
`;

const autoLayout = new AutoLayout();

(async () => {
    const layoutedDiagramXML = await autoLayout.layoutProcess(diagramXML);
    console.log(layoutedDiagramXML);
})();

Expected Behavior

Getting a new bpmn structure with added di-elements that will have markup (with set positions and sizes).

P.S. The expected result should look like this:

Environment

Host (Browser/Node version), if applicable: Node.js v16.14.2, Chrome v112
OS: MacOS Ventura v13.3.1
Library version: Latest

TypeError: BpmnModdle is not a constructor

Describe the Bug

In our environment, after I used the bpmnModeler.connect() method to connect a line, I needed to automatically layout it, and I got an error:
BpmnModdle is not a constructor

Steps to Reproduce

Example Code snippet

const {xml} = await this.bpmnModeler.saveXML({format: true});
const autoLayout = new AutoLayout();
let layOutXml = await autoLayout(xml);`

Example CodeSandbox

Expected Behavior

Should not crash.

BpmnModdle is not a constructor

I am trying to get auto layout to work, but I continue running into this error.

BpmnModdle is not a constructor

I am not doing anything with BpmnModdle. It is not included in my project explicitly. Please advise.

Support Diagrams with more than one StartEvent

by layouting each connected diagram separately.

Allow overriding default spacing configuration

Is your feature request related to a problem? Please describe.

The default separation configuration can be changed to have better arrows visibility in sequence flows, example displaying using bpmn-js:

After changing iLevelSeparation from 20 to 40:

Describe the solution you'd like

To allow overriding the default config by passing an optional config map when initializing AutoLayout

Describe alternatives you've considered

Additional context

unknown type <bpmn:Definitions>

The above error occurs when calling the function as instructed in the documentation.

Input XML :

<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" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" 
		id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn"><bpmn:process id="Process_1" isExecutable="false"><bpmn:endEvent id="endEvent2" name="end_component"></bpmn:endEvent><bpmn:startEvent id="startEvent3" name="start_component"></bpmn:startEvent><bpmn:sequenceFlow id="sequenceFlow1" sourceRef="startEvent3" targetRef="endEvent2" /></bpmn:process></bpmn:definitions>

I've tried renaming the XML parent tag to bpmn:Definitions too. It didn't work though.

example.js not working

Describe the Bug

When running example.js, it produces an UnhandledPromiseRejectionWarning.

Steps to Reproduce

node ./example.js

Expected Behavior

Write console output and save the file.

Fix

Line 68, add await: var layoutedDiagramXML = await autoLayout.layoutProcess(diagramXML);

Layouting of connections is not working

Connections are up to now not layouted, because waypoints are not corretly calculated.

Elements with nested Children are not supported

breadthFirstSearch should recursivly be called when elements have children e.g.

visit element, if (elementHasChildren) { go to 2. } else { go to 4. }
start breadthFirstSearch with the children (startEvent is required) and layout children
resize parent
layout element

IntermediateCatchEvent size is too big

Describe the Bug

An intermediate catch event is too big (100 x 80):

Steps to Reproduce

Using this bpmn:

<definitions xmlns="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_357f43ba-8ca2-47a1-83b5-9dcd37ae60d7" targetNamespace="http://bpmn.io/schema/bpmn">
    <process id="example_process">
        <startEvent id="start" />
        <intermediateCatchEvent id="timer">
            <timerEventDefinition id="TimerEventDefinition_0hz4uoq" />
        </intermediateCatchEvent>
        <endEvent id="end" />
        <sequenceFlow id="flow1" sourceRef="start" targetRef="timer" />
        <sequenceFlow id="flow2" sourceRef="timer" targetRef="end" />
    </process>
</definitions>

Run this on that xml:

const autoLayout = new AutoLayout();
const layoutedDiagramXML = await autoLayout.layoutProcess(xml);

Result:

<?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:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="definitions_357f43ba-8ca2-47a1-83b5-9dcd37ae60d7" targetNamespace="http://bpmn.io/schema/bpmn">
   <process id="example_process">
      <startEvent id="start" />
      <intermediateCatchEvent id="timer">
         <timerEventDefinition id="TimerEventDefinition_0hz4uoq" />
      </intermediateCatchEvent>
      <endEvent id="end" />
      <sequenceFlow id="flow1" sourceRef="start" targetRef="timer" />
      <sequenceFlow id="flow2" sourceRef="timer" targetRef="end" />
   </process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
      <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="example_process">
         <bpmndi:BPMNShape id="_BPMNShape_start" bpmnElement="start" isExpanded="false">
            <dc:Bounds x="72" y="100" width="36" height="36" />
         </bpmndi:BPMNShape>
         <bpmndi:BPMNShape id="_BPMNShape_timer" bpmnElement="timer" isExpanded="false">
            <dc:Bounds x="180" y="78" width="100" height="80" />
         </bpmndi:BPMNShape>
         <bpmndi:BPMNEdge id="_BPMNConnection_flow1" bpmnElement="flow1">
            <di:waypoint x="108" y="118" />
            <di:waypoint x="180" y="118" />
         </bpmndi:BPMNEdge>
         <bpmndi:BPMNShape id="_BPMNShape_end" bpmnElement="end" isExpanded="false">
            <dc:Bounds x="320" y="100" width="36" height="36" />
         </bpmndi:BPMNShape>
         <bpmndi:BPMNEdge id="_BPMNConnection_flow2" bpmnElement="flow2">
            <di:waypoint x="280" y="118" />
            <di:waypoint x="320" y="118" />
         </bpmndi:BPMNEdge>
      </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
</definitions>

notice that _BPMNShape_timer has width=100 and height=80, which leads to the above image when desplayed with bpmn-js.

Expected Behavior

To have same width and height as a start/end event: 36 x 36

Environment

Node v18.13
OS: MacOS
Library version: 0.1.0

Set up proper project structure and publish repository

grunt and tests are missing
gitignore
documentation of api
could be published to npm

How do I run this project？

After downloading this example, how do I run the project with NPM install?

Module does not work in react

Describe the Bug

installing latest versions and trying the example in the readme leads to

AutoLayout.js:15 Uncaught (in promise) TypeError: BpmnModdle is not a constructor

its caused by:

function AutoLayout() {
  this.moddle = new BpmnModdle(); // the import for this not right / default export needs to be updated 
  this.DiFactory = new DiFactory(this.moddle);
  this.nodeCount = -1;
}

Steps to Reproduce

See above.

Expected Behavior

Expect the layout to work with the latest versions of bpmn-moddle.

Environment

Host (Browser/Node version), if applicable: Tested in node... it sorta works... tested in the browser it does not work
OS: macOS
Library version:

   "bpmn-auto-layout": "^0.1.0",
    "bpmn-engine": "^13.0.0",
    "bpmn-js": "^8.9.0",
    "bpmn-moddle": "^7.1.2",

Some elements have wrong size due to broken is-function

is-function in DiFactory does a simple string-comparison instead of some abstract belonging-checking (as in bpmn-js). This results in wrong element-sizes.

bpmn-io / bpmn-auto-layout Goto Github PK

bpmn-auto-layout's People

Stargazers

Watchers

Forkers

bpmn-auto-layout's Issues

Describe the Bug

Steps to Reproduce

Expected Behavior

Environment

Describe the Bug

Steps to Reproduce

Expected Behavior

Environment

Describe the Bug

Steps to Reproduce

Expected Behavior

Environment

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Describe the Bug

Steps to Reproduce

Expected Behavior

Environment

Recommend Projects

Recommend Topics

Recommend Org