Skip to content
This repository has been archived by the owner on Nov 11, 2020. It is now read-only.
/ bpmn-js-modules Public archive

bpmn-js-modules has many object to use bpmn-js tools in vanillajs mode

Notifications You must be signed in to change notification settings

Varooneh/bpmn-js-modules

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

bpmn-js-module

bpmn-js is free, powerful and opensource library for design diagram and bpmn diagram.

By default we can not use many modules of bpmn-js like bpmn-js-properties-panel in vanillajs style, with this package

we can develop modules and requirement in node-style-app and use compiled-js file in our page.

I, created many functions for start that you can initialize bpmn designer with this options:

  • bpmn modeler module

  • bpmn(diagram-js) minimap module

  • color-picker module

  • resize-element module

  • properties panel module

  • camunda moddle module

You can call this modules with related functions and use in your project:

  • getBpmnModule() : return bpmn modeler object.

  • getEmptyBpmn() : return empty diagram pre-designed [for new/empty]

  • getMiniMapModule() : return minimap for bpmn modeler (based on diagram-js)

  • getColorPickerModule() : return color-picker object for each element (it's very very simple)

  • getResizeElementModule() : return resize element object (based on nyan demo)

  • getPropertiesPanelModule() : return properties panel object

  • getPropertiesProviderModule() : return properties provider object

  • getCamundaModdleDescriptorModule() : return camunda object

Requirements

Just NodeJS LTS version

How to use?

Use this package is very very simple and fast.

  1. Install packages with npm install --save or yarn

  2. Run npm run build:dev

  3. Dist folder created and done :-)

  4. Move dist folder content to your project

  5. and ...

<!-- bpmn designer container -->

<div id="bpmnview" class="bpmn_view"></div>



<!-- bpmn properties panel -->

<div class="properties-panel-parent prop_view" id="js-properties-panel"></div>
<script type="text/javascript" src="./assets/js/bpmn/modules/bpmn.development.js"></script>
<script type="text/javascript">

        var modeler;



        function initializeBpmnView(container) {

            var BpmnModule = bpm.getBpmnModule();

            modeler = new BpmnModule.default({

                container: container,

                keyboard: {

                    bindTo: window

                },

                additionalModules: [
					bpmn.getMiniMapModule(),

                    bpm.getColorPickerModule(),

                    bpm.getResizeElementModule(),

                    bpm.getPropertiesPanelModule(),

                    bpm.getPropertiesProviderModule()                   
                ],

                propertiesPanel: {

                    parent: '#js-properties-panel'

                },

                moddleExtensions: {

                    camunda: bpm.getCamundaModdleDescriptorModule()

                }

            })





            createNewBpmn(bpm.getEmptyBpmn());

        }



        function createNewBpmn(xml) {

            modeler.importXML(xml, function (error) {

                if (error) {

                    return;

                }
            });

        }

        $(document).ready(function () {

            initializeBpmnView('#bpmnview');

        });

    </script>

and done. You have bpmn-js with popular modules in your project.

Note:

It's free and very very simple and useful for me and I hope useful for you. Maybe many bugs appear and please tell me about it with hadi.jami@gmail.com

We can develop/fork it?

Yes, I will be glad and it is my pleasure.

Special thanks to

Graph Company

My dear friend Mr. Ali SoleymaniFard

bpmn-js

and every node modules used in this project :-)

Have a good time and good WORLD :-) :-)

About

bpmn-js-modules has many object to use bpmn-js tools in vanillajs mode

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published