bpmn-io / bpmn-auto-layout Goto Github PK
View Code? Open in Web Editor NEWLayout BPMN diagrams, generating missing DI information.
Layout BPMN diagrams, generating missing DI information.
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
The script will print a new bpmn structure into a console and also will write it into layouted.bpmn
file.
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:
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
It's not possible to import the bpmn-auto-layout
module in Node when the importing project is using CommonJS module imports.
"type": "commonjs"
in package.json
)bpmn-auto-layout
in the project.bpmn-auto-layout
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).
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.
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?
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')
.
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);
})();
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:
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.
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.
by layouting each connected diagram separately.
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:
To allow overriding the default config by passing an optional config
map when initializing AutoLayout
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.
Describe the Bug
When running example.js, it produces an UnhandledPromiseRejectionWarning.
Steps to Reproduce
Expected Behavior
Write console output and save the file.
Fix
Line 68, add await: var layoutedDiagramXML = await autoLayout.layoutProcess(diagramXML);
Connections are up to now not layouted, because waypoints are not corretly calculated.
breadthFirstSearch should recursivly be called when elements have children e.g.
An intermediate catch event is too big (100 x 80):
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.
To have same width and height as a start/end event: 36 x 36
After downloading this example, how do I run the project with NPM install?
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
"bpmn-auto-layout": "^0.1.0",
"bpmn-engine": "^13.0.0",
"bpmn-js": "^8.9.0",
"bpmn-moddle": "^7.1.2",
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.