MetatronJS

Javascript UI library that helps you create your own custom workflow designers

View on GitHub

MetatronJS

MetatronJS is a Javascript UI library that helps you create your own custom workflow designers.

Demo

Features:

Setting up:

You need to have npm installed to build the library.
Once your environment is set up, you need to build the project

npm install
npx grunt

Now the project has been built and the ./distrib/ folder has been created with the distributable files inside it

metatron.js
metatron.min.js

Finally import the library file into your project

<script src="metatron.min.js" type="text/javascript"></script>

Dependencies

Getting started

If any of the following Configurations, API or Events are unclear,you can check out the demo project located at ./demo/ which will be functional after you have completed the Setting Up step.
This demo showcases all the things you need to know to start using MetatronJS. Feel free to play around with it and learn how it can be integrated with your project.

Creating your workspace

var metWorkspace = Metatron.create(<CONTAINER_DIV_ID>, <STENCIL_BOX_CONFIG>, <EDIT_MODE>);

<CONTAINER_DIV_ID>: String to identify the div which you want the workflow designer to reside in.
<STENCIL_BOX_CONFIG>: This is your configuration JSON which will define all the tools you need and their individual behavior. (See below for an example)
<EDIT_MODE>: This a boolean flag to determine whether you want to load the designer in edit or observer mode. (true to start in edit mode)

Configuration JSON

Here is an example of a configuration JSON for your stencil-box.
This example defines one stencil which will then be available for you to use in your workflow editor.
You can add more of these to the stencils array in the configuration JSON.

var STENCIL_BOX_CONFIG = {
    stencils: [
        {
            id: 'custom_task',
            name: 'Custom Task',
            imgPath: 'images/custom-task.svg',
            actions: [],
            inboundConnectorConfigs: {
                maxCount: 1
            },
            outboundConnectorConfigs: [
                {
                    type: 'success',
                    maxCount: 1,
                },
                {
                    type: 'fail',
                    maxCount: 1,
                    color: '#EA8988',
                    defaultLabel: 'Fail'
                }
            ],
            indicators: []
        }
    ]
};
Stencil Options

API

Listening to events

Here is an example of how to listen to events fired inside MetatronJS

metWorkspace.on('componentClick', function (component) {
    console.log(component);
});
Events