Is your feature request related to a problem? Please describe.
The lib should provide feedback and/or callbacks for any parsing errors/warnings that occurs on BPMN source input load.

Describe the solution you'd like
In the 1st implementation (#22), we skip this part as we only managed the happy path. As a consequence, some TODO remain in the code.
As for #21, we must manage all runtime parsing errors/warnings to provide feedback to the end user or allow the developer who integrates our lib to detect them.

Describe alternatives you've considered
N/A

Additional context
N/A

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Message Intermediate Event.

Describe the solution you'd like
Manage all Catch Message Intermediate Events declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Catch Message Intermediate Event won't be done as part of this issue and will be managed later.

BPMN specification

Message Intermediate Event

A Message Intermediate Event can be used to either send a Message or receive a Message.
The actual Participant from which the Message is received can be identified by connecting the Event to a Participant using a Message Flow within the definitional Collaboration of the Process – see Table 10.1. See page 91 for more details onMessages.

Message

An ItemDefinition is used to specify the Message structure.

Check parsing of BPMN in terms of performance

The minified version is ~800KB which is rather BIG.
Perhaps it is better to separate it from the lib.

• Description (review and reword if necessary)
• README (describe goals): #8
• Code of conduct: #3
• Contributing: #4
• License
• Issue templates: #2
• Pull request template: #15

The purpose of this issue is to ensure that the lib can replace the current Bonita Enterprise (7.11.0) visualization capabilities that are presented in #12 (comment)

Display the BPMN diagram

✔️ see #361 and see #428

• BPMN source retrieved by fetching an url
• the diagram fit the whole viewport on load
• zoom in/out with mouse wheel and a html slider element (which also allow to reset the zoom)
• panning can be done by holding and draging the diagram
• the viewport dimension don't change when the diagram outside the viewport (no scrollbars)

Overlays

✔️ see mxGraph out of the box capabilities and poc with mxGraph

• display the cardinality of current active nodes with all states we know of. see #429
• highlight on elements in progress see #430

mxGraph overlay capabilities examples

• https://jgraph.github.io/mxgraph/javascript/examples/overlays.html: https://github.com/jgraph/mxgraph2/blob/mxgraph-4_2_0/javascript/examples/overlays.html. Also demonstrate hightlighting on mouse over
• https://jgraph.github.io/mxgraph/javascript/examples/monitor.html: https://github.com/jgraph/mxgraph2/blob/mxgraph-4_2_0/javascript/examples/monitor.html
• display icon on mouse over: https://jgraph.github.io/mxgraph/javascript/examples/hovericons.html https://github.com/jgraph/mxgraph2/blob/mxgraph-4_2_0/javascript/examples/hovericons.html

POC tbouffard/mxgraph-js-playground#1

• overlays on mouse click and highlight on mouse over
• path detection on mouse over

Rendering

The lib should provide BPMN parsing and rendering extensions to cover the following. Notice that the extensions won't be managed in first milestones

• Bonita generates BPMN with extensions, for instance for Bonita Connectors, which are rendered with a extra plug marker. see #431
• Bonita has its own BPMN look&feel. For instance, event in red, gateway in yellow/orange, dedicated user task icon. It will use the extension provided in #424

✔️ The following capabilities will be available in the future to cover Bonita needs

• BPMN shape extension/redefinition: custom icon and colors. we currently don't know how this will be customizable, at least with JS/TS code. See #424
• Later support for BPMN extensions in parsing and model

Decide

• when: only on failure, always?
• what: tests results, coverage (not run as part of the initial implementation #31)?

For reporting tests without coverage, we may use https://www.npmjs.com/package/jest-html-reporter

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Throw Message Intermediate Event.

Describe the solution you'd like
Manage all Throw Message Intermediate Events declared in the bpmn input source

Depends on #213

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Throw Message Intermediate Event won't be done as part of this issue and will be managed later.

BPMN specification

Message Intermediate Event

A Message Intermediate Event can be used to either send a Message or receive a Message.
The actual Participant from which the Message is received can be identified by connecting the Event to a Participant using a Message Flow within the definitional Collaboration of the Process – see Table 10.1. See page 91 for more details onMessages.

Message

An ItemDefinition is used to specify the Message structure.

This seems to be related to collapsed call activities: click on the call activity and be able to navigate to the current instance of the called case/process instance
for process and case visualization: Enhance Bonita current case/process visu capabilities with interactivity to called cases
Bonita case/process visu is translated as: Monitoring of all process instances / cases for a defined process

This will make usage of examples very easy.
Alternative: add an Open button

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the none start event

Describe the solution you'd like

As part of this 1st feature, we are going to setup the whole infrastructure allowing us to render other bpmn elements

• load the xml bpmn input source and transform it into an internal model
• display the none start event regarding the internal model information
• simple display configuration to render the none start event
• add test frameworks
• update the test section of the CONTRIBUTING GUIDE

Describe alternatives you've considered
N/A

Additional context
We use the start event to build the fundation of the lib, bpmn pool and lane whose it belongs will be managed later
The final shape rendering none start event of the won't be done as part of this issue and will be managed later

• TypeScript usage (sum up its pros and cons, how to use and how not to use it)
• IDE Tips (IDEA IntelliJ at least):
  • eslint (settings + apply ESLint code style rules)
  • mocha test template (add env variables)

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the sequence flow

Describe the solution you'd like
As we are able to render a none start event and an user task, let render the sequence flow between this two kind of elements.

As part of this 1st feature aboutsequence flow , we are going to setup the whole infrastructure allowing us to render other sequence flow elements

Describe alternatives you've considered
N/A

Additional context
N/A

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Exclusive gateway.

Describe the solution you'd like
Manage all Exclusive gateways declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Exclusive gateway won't be done as part of this issue and will be managed later

Is your feature request related to a problem? Please describe.
I want to display without problem a None Start Event & User Task without a name.

Describe the solution you'd like
Add tests to verify it.

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.
In the BPMN standard, all the elements of the Semantic can have no Id.

Describe the solution you'd like
If there is no id on a model object, use its name as id on MxGraph.

Describe alternatives you've considered
If there is no id on a model object, use the id of its Shape/Edge as id on MxGraph.

Additional context
https://www.omg.org/spec/BPMN/20100501/Semantic.xsd

<xsd:complexType name="tBaseElement" abstract="true">
   <xsd:sequence>
      <xsd:element ref="documentation" minOccurs="0" maxOccurs="unbounded"/>
      <xsd:element ref="extensionElements" minOccurs="0" maxOccurs="1" /> 
   </xsd:sequence>
   <xsd:attribute name="id" type="xsd:ID" use="optional"/>
   <xsd:anyAttribute namespace="##other" processContents="lax"/>
</xsd:complexType>

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Message start event.

Describe the solution you'd like
Manage all Message start events declared in the bpmn input source.
Check if the attribute trigger of Start Event is equals to Message.

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Message start event won't be done as part of this issue and will be managed later.

BPMN specification
The trigger for a Start Event is designed to show the general mechanisms that will instantiate that particular Process. There are seven (7) types of Start Events for top-level Processes in BPMN (see Table 10.84): None, Message, Timer, Conditional, Signal, Multiple, and Parallel.

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Send task.

Describe the solution you'd like
Manage all Send tasks declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Send task won't be done as part of this issue and will be managed later

BPMN specification
Depends on #142.

A Send Task object shares the same shape as the Task, which is a rectangle that has rounded corners. However, there is a filled envelope marker (the same marker as a throw Message Event) in the upper left corner of the shape that indicates that the Task is a Send Task.

A Send Task is a rounded corner rectangle that MUST be drawn with a single thin line and includes a filled envelope marker that distinguishes the shape from other Task types (as shown in Figure 10.13).

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Parallel gateway.

Describe the solution you'd like
Manage all Parallel gateways declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Parallel gateway won't be done as part of this issue and will be managed later

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Call activity.

Describe the solution you'd like
Manage all Call activities declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Call activity won't be done as part of this issue and will be managed later

When Marcin is back, discuss the webpack / rollup question in our use case: a few libs and not a big project.

Without using any back end, with no file to parse, try and create the JS model of human tasks and transitions, and display a human task followed by a transition followed by a human task.

As a team: Thomas + Marcin + Céline, then only Thomas, then only Céline.

Then we meet for demo to share the lessons learnt.

Is your feature request related to a problem? Please describe.
Actually, we can move/modify all elements in the graph, when it displays.

Describe the solution you'd like
Disable all the MxGraph's features to edit the graph.

Describe alternatives you've considered

Additional context
See the different POCs that we done.

Pending questions

• test lib: cypress, .....
• how do we identify element in the graph?

A generic system that permits treatment for the exceptions.

• parsing exception,
• rendering,
• etc...

The load BPMN content function should

• return warnings/errors (sync or async), and not only throw an Error with generic message.
  • See #35.
  • The parsing code introduced a mecanism to collect warnings with #1479
• not call the window.alert: fixed in 0.21.3. See #1761

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Timer start event.

Describe the solution you'd like
Manage all Timer start events declared in the bpmn input source.
Check if the attribute trigger of Start Event is equals to Timer.

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Timer start event won't be done as part of this issue and will be managed later.

BPMN specification
The trigger for a Start Event is designed to show the general mechanisms that will instantiate that particular Process. There are seven (7) types of Start Events for top-level Processes in BPMN (see Table 10.84): None, Message, Timer, Conditional, Signal, Multiple, and Parallel.

As of #22, our first implementation do not keep namespace from the xml node, mainly to simplify the implementation.
For now, especially as we do not manage bpmn extensions, we are not expecting node name collisions because AFAIK, bpmn standard schemas do use different names.

To be discussed to decise whether or not, we can continue like this or if we need to keep the namespace in the json model attribute names
TODO: provide an example to make the situation more explicit (bpmn xml and related json model)

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Event Sub-Process.

An Event Sub-Process is a specialized Sub-Process that is used within a Process (or Sub-Process). A Sub-Process is defined as an Event Sub-Process when its triggeredByEvent attribute is set to true.

Describe the solution you'd like
Manage all Event Sub-Processes declared in the bpmn input source

Depends on #304

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Event Sub-Process won't be done as part of this issue and will be managed later

Describe the solution you'd like
Update the MxGraph shape for Collapsed Event Sub-Processes, to render the start event marker.

What it's already done
All the elements of a sub process are parsed (in ProcessConverter), but not displayed if the sub process is collapsed (bpmn-model-registry.ts & BpmnRenderer).
To add a new style on a BPMN element, see StyleComputer.
For more information, see the developpement documentation.

BPMN specification
The Start Event of an Event Sub-Process MUST have a defined trigger.
The trigger for a Start Event is designed to show the general mechanisms that will instantiate that particular Process.

A Start Event can also initiate an inline Event Sub-Process (see page 174).
In that case, the same Event types as for boundary Events are allowed (see Table 10.86), namely: Message, Timer, Escalation, Error, Compensation, Conditional, Signal, Multiple, and Parallel.

If the Event Sub-Process is collapsed, then its Start Event will be used as a marker in the upper left corner of the shape (see Figure 10.30).

Note for implementation
See the development documentation for details.

At parsing time, we already know that we have a collapsed event subprocess and we know the inner elements. It will probably easier for the rendering part that we compute the start event kind in this case during parsing.
This will make the rendering easier: get the information and do the display.

Please start a discussion with a implementation proposal prior starting the actual implementation.

⚠️ Check the contribution guidelines for BPMN support

Is your feature request related to a problem? Please describe.
Given a bpmn input source, detect the bpmn Signal start event.

Describe the solution you'd like
Manage all Signal start events declared in the bpmn input source.
Check if the attribute trigger of Start Event is equals to Signal.

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Signal start event won't be done as part of this issue and will be managed later.

BPMN specification
The trigger for a Start Event is designed to show the general mechanisms that will instantiate that particular Process. There are seven (7) types of Start Events for top-level Processes in BPMN (see Table 10.84): None, Message, Timer, Conditional, Signal, Multiple, and Parallel.

Public url to demonstrate what the lib can do

Solutions to be discussed

• static sites
• github pages
• storybook
• ...

Because it's a very open project, can we still use those labels?

• WIP
• Review needed
• Review done
• Change needed
• Feedback integrated
• Rebase needed
• Merge only on release
• Ready to merge
• External contribution

You may need more that I don't use. So go ahead.
I was wondering if you had considered and discarded that or if this can still be done.

Provide a new npm scripts to manage this
Ideally, this should be also run with git commit hooks

Describe the bug
lint-check npm scripts fails because of missing pluing on MacOS Catalina (v10.15)

To Reproduce
See https://github.com/bonitasoft-labs/bpmn-visu-js/runs/479745740 from #19
Run npm run lint-check

Additional context

Error logs

Oops! Something went wrong! :(

ESLint: 6.8.0.

ESLint couldn't find the plugin "eslint-plugin-node".

(The package "eslint-plugin-node" was not found when loaded as a Node module from the directory "/Users/runner/runners/2.165.2/work/bpmn-visu-js/bpmn-visu-js".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-node@latest --save-dev

The plugin "eslint-plugin-node" was referenced from the config file in "node_modules/prettier-linter-helpers/.eslintrc.js".

If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Inclusive gateway.

Describe the solution you'd like
Manage all Inclusive gateways declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Inclusive gateway won't be done as part of this issue and will be managed later

Non exhaustive intial list: #14 (comment)

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Waypoint.

Describe the solution you'd like
Manage all Waypoints declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context

• choose documentation markup (markdown, asciidoctor, .....): asciidoctor in the docs folder of the repository
• bpmn xml parsing
• internal bpmn model
• choose a solution for schema. Draw.io for source + svg for display?

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpm lane and elements which belong to it.

Describe the solution you'd like
Manage all lanes declared in the bpmn input source.
Lane may be associated to the pool is needed.

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the lane won't be done as part of this issue and will be managed later.

When the child of a lane is not parsed, we just log an message, and continue the parsing. The error will be managed later.

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Service task.

Describe the solution you'd like
Manage all Service tasks declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Service task won't be done as part of this issue and will be managed later

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the `enrich the 1st implementation #22

Describe the solution you'd like
Enrich the 1st implementation (#22) to be able to manage this new bpmn element in the bpmn input source.

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the user task won't be done as part of this issue and will be managed later

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Actor.

Describe the solution you'd like
Manage all Actors declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Actor won't be done as part of this issue and will be managed later

Is your feature request related to a problem? Please describe.
An invalid (aka invalid regarding xml syntax and XSD) bpmn input source (file, string, stream, ....) should be rejected

Describe the solution you'd like
The bpmn source a valid xml source and should conform to the set of XSD it references. So conformance check must first be done prior interpretation to ensure the defined model is valid.
This will prevent subsequent parsing errors or incomplete renderings.

Don't forget the error cases, when a field is not mandatory, and is empty, when we parse it !!!

Validation may be made optional and performance tests should be conducted to measure the overhead introduced by the validation.

Describe alternatives you've considered
N/A

Additional context
https://www.omg.org/spec/BPMN/2.0/About-BPMN
We could generate xml parsing error with the following guidance message: The file is not a BPMN file. see <BPMN spec link>

⚠️ Check the contribution guidelines for BPMN support

The library must not be restricted in terms of styling. It should

• permit an easy change in the interface layer.
• give the possibility to parametrize STYLE by default either by configuring the lib programmatically or by CSS

Details

With CSS

• more BPMN elements identification with #928
• simplification with #1035
• we should provide examples. See process-analytics/bpmn-visualization-examples#115
• we should document the limitation when using this solution. In v0.23.3, a sentence mention it in the user documentation

Programmatically

• Setting styles of specific elements programmatically will be managed with #1030
• default styles for all elements should be configurable at library initialization #1993. For now, we have or will have examples that shows how to do it with hacks
  • process-analytics/bpmn-visualization-examples#15
  • process-analytics/bpmn-visualization-examples#16
  • process-analytics/bpmn-visualization-examples#259
• specific BPMN Shapes/Edges rendering (i.e icons, markers, dashed settings, ...) could be changed with #424
• #719

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpmn Receive task.

Describe the solution you'd like
Manage all Receive tasks declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the Receive task won't be done as part of this issue and will be managed later

BPMN specification
Depends on #142.

A Receive Task object shares the same shape as the Task, which is a rectangle that has rounded corners. However, there is an unfilled envelope marker (the same marker as a catch Message Event) in the upper left corner of the shape that indicates that the Task is a Receive Task.

A Receive Task is a rounded corner rectangle that MUST be drawn with a single thin line and includes an unfilled envelope marker that distinguishes the shape from other Task types (as shown in Figure 10.15). If the instantiate attribute is set to true, the envelope marker looks like a Message Start Event (as shown in Figure 10.16).

Is your feature request related to a problem? Please describe.
Given a bpmn input source, display the bpm pool and elements which belong to it.

Describe the solution you'd like
Manage all pools declared in the bpmn input source

Describe alternatives you've considered
N/A

Additional context
The final shape rendering of the pool won't be done as part of this issue and will be managed later

Describe the bug

Oops! Something went wrong! :(

ESLint: 6.8.0.

ESLint couldn't find the config "strict/es5" to extend from. Please check that the name of the config is correct.

The config "strict/es5" was referenced from the config file in "/Users/csouchet/Source/Process Analytics/BPMN-Js/node_modules/check-error/package.json".

To Reproduce
Steps to reproduce the behavior:
Execute the comands :

• npm run lint-check
• npm run lint

Expected behavior
The commands run with no problem.

Screenshots

Desktop (please complete the following information):

• OS: MacOs

Additional context