Giter VIP home page Giter VIP logo

bpmn-auto-layout's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bpmn-auto-layout's Issues

Elements with nested Children are not supported

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

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

example.js not working

Describe the Bug

When running example.js, it produces an UnhandledPromiseRejectionWarning.

Steps to Reproduce

  1. node ./example.js

Expected Behavior

Write console output and save the file.

Fix

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

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

  1. 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:

bpmn-auto-layout

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.

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?

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

unknown type <bpmn:Definitions>

image
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.

IntermediateCatchEvent size is too big

Describe the Bug

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

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

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

  1. Create a Node project using CommonJS modules ("type": "commonjs" in package.json)
  2. Install the bpmn-auto-layout in the project.
  3. Create and run a script that requires bpmn-auto-layout
  4. 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

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.

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",

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:
image

After changing iLevelSeparation from 20 to 40:
image

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

`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

  1. Open a test project in the Replit
  2. 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.