Skip to content

Instantly share code, notes, and snippets.

@heshanjse

heshanjse/Bpmneditordoc.md

Last active June 21, 2021 12:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save heshanjse/25e727ce17e8b76619f70fbb91b4226f to your computer and use it in GitHub Desktop.
Save heshanjse/25e727ce17e8b76619f70fbb91b4226f to your computer and use it in GitHub Desktop.
Download ZIP
BPMN editor help users to implement BPMN diagrams using tasks,gateways,start events and end events.This BPMN editor has the capability to build complete Business Process diagrams; download Business Process diagrams files in Json format; upload json format file and generate Business Process diagrams.
Raw
Bpmneditordoc.md 
                					 Google Summer of Code 2016

Student : Heshan Jayasinghe

Project Name : Web (Javascript / D3) based BPMN editor to support a subset of commonly used BPMN constructs

Organization: Wso2

Mentors: Isuru Wijesinghe

Project Proposal : https://summerofcode.withgoogle.com/projects/#6614623469961216

Commits List : https://github.com/heshanjse/BPMNEditor/commits/master

My Contribution (repository): https://github.com/heshanjse/BPMNEditor

Demo : http://heshanjse.github.io/BPMNEditor/app/

                                          BPMN Editor

Business Process Model and Notation (BPMN) is a standard way of representing business processes in graphical form.
This project will involve implementing a Web based BPMN editor to construct business process diagrams. Users can implement BPMN diagrams using tasks,gateways,start events and end events.

  • task-User Task,Script Task,Mail Task,Manual Task
  • Gateway-Parallel Gateway,Exclusive Gateway,Inclusive Gateway,Event Gateway
  • Start event-Start Event,Time Start Event,Message Start Event,Error Start Event
  • End event-End Event,Error End Event,Terminate End Event,Cancel End Event

This BPMN editor has the capability to build complete Business Process diagrams; download Business Process diagrams files in Json format; upload json format file and generate Business Process diagrams.

BPMN element Overview

Start Event    Time Start Event    Message Start Event    Error Start Event


End Event    Terminate End Event    Error End Event    Cancel End Event


Parallel Gateway    Exclusive Gateway    Inclusive Gateway    Event Gateway


User Task             Script Task             Mail Task             Manual Task

How to Use

User can drag and drop BPMN elements from the tool box to the drawing canvas.Those BPMN elements can be dragged in the canvas and upon clicking on any of those elements will cause a tooltip to appear. Also, the artefacts inside any of tooltips depend on the BPMN element selected. eg:- End Event element does not have a flow drawing artefact whereas the Task elements has all of the available artefacts

BPMN flows(connect elements) can be drawn using the flow artefact from either the toolbox or the element tooltip. That BPMN flow can be changed using multiple connection points.When the drawn elements move about, connected flows will also respond accordingly by maintaining the connections.

A BPMN Task can be resized using its bounding box, additionally, the text of a BPMN Task can be changed after pressing the relevant artefact in tooltip. Every element can be deleted using the delete artefact of a tool tip, which means that all its connected flows will get deleted too. However, the user has the ability to delete a flow without deleting it’s constituent BPMN elements. Every BPMN element can add properties using the given property artefact in its tooltip, which will create a popup window showing the applicable properties.

Any BPMN graph drawn can be downloaded as a JSON file. The users can also recreate a BPMN graph in the editor by importing a BPMN JSON file. This recreated graph will be editable just as a fresh one.

                                  completed tasks with Timeline

March 22 April : publish GSOC selected students

  • Selected for GSoC with Web (Javascript / D3) based BPMN editor to support a subset of commonly used BPMN constructs Project.

April 23, 2016 - May 22 2016 : Community bonding

  • Got familiar with the D3.js and tried sample examples using D3.js

May 22, 2016 - May 29, 2016 : Coding Week 1

  • Created the toolbox and added basic elements to the tool box
  • Created Start Event element (drew Start Event elemnet in the canvas)

May 30, 2016 - June 05, 2016 : Coding Week 2

  • Added drag events to the Start Event. (Start Event can be dragged around,inside the canvas)
  • Created Gateway,Task and End Event elements.

June 06, 2016 - June 10, 2016 : Coding Week 3

  • Added drag events to Gateway,task and end event.
  • Created the flow drawing using the flow artefact of the toolbox

June 13, 2016 - June 19, 2016 : Coding Week 4

  • BPMN element drag and drop from toolbox to drawing canvas.
  • Basic JSON array added to the project for recording BPMN elements

June 20, 2016 - June 26, 2016 : Coding Week 5

  • Structured the code and removed the code duplicates.
  • The elements, which were dragged and dropped into the canvas were pushed to the JSON array.

June 28 : Midterm Evaluations

June 27, 2016 - July 03, 2016 : Coding Week 6

  • Created a tooltip to an element.(This tooltip is opened when clicking a node,tooltip contain such artefacts as ‘flow drawing’,’delete option’,’set property’ and ‘adding text’). These tooltip artefacts are changed according to the BPMN element type.
  • Element deletion completed.
  • flow drawing using tooltip completed

July 04, 2016 - July 10, 2016 : Coding Week 7

  • Finished creating the bounding box (used for resizing) feature for elements.
  • Finished creating sub elements of main BPMN elements and added icons to those elements

July 11, 2016 - July 17, 2016 : Coding Week 8

  • Finished creating ‘drag’ and ’delete’ functionalities for all the elements and their subelements.

July 18, 2016 - July 24, 2016 : Coding Week 9

  • Structured the code and removed code duplicates.
  • Created a mechanism to update the ‘x’ and ‘y’ coordinates of an element when it is dragged around the canvas (the corresponding JSON array will be updated with the relevant coordinates).

July 25, 2016 - July 31, 2016 : Coding Week 10

  • Created the functionality to change the text position when a task is resized.
  • Created the functionality to allow the text editor to resize automatically when the task width or height is altered.

August 01, 2016 - August 07, 2016 : Coding Week 11

  • Implemented the functionality to allow BPMN Flow change using multiple connection points
  • Enabled the BPMN flow to capture the bounding box of Task Element after it has been resized.

August 08, 2016 - August 14, 2016 : Coding Week 12

  • Created the JSON import and JSON export feature

August 14, 2016 - August 23, 2016 : Coding Week 13

  • Text editor bug fixed
  • JSON import and JSON export bug fixed

August 24 : Final Evaluations

Directory Layout

``` BPMNEditor/ |—app/ |— drawingpage/ | |— endevent/ | | |—endevent.js —> End Event Controller | |—flow/ | | |—flow.js —> Flow Controller | |—gateway/ | | |—gateway.js —> Gateway Controller | |—startevent/ | | |—startevent.js —> Start Event Contoller | |—task/ | | |—task.js —> Task Controller | |—bpmnjsonUpdater.js —> Recreate a BPMN graph after JSON import | |—bpmnuploader.js —> Push BPMN elements to JSON file | |—devider.js —> Declare second level app module | |—drawing.js —> Declare top level app module |— img/ —> All images |—public/ | |—css/ —> All css libraries | |— js/ —> All javascript libraries |— index.js —> Canvas and toolbox HTML page ``` 
                                      Known Issues
  • The changes made to a BPMN flow using the connection points are not saved.
  • If two connected elements have the same x coordinate those elements will not maintain a connection.
  • The text of a Task element is not saved to a JSON array.
  • Problem with multiple inbound connections to a BPMN element.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment