@optimajet/workflow-designer/README.md

Designer for Workflow Engine

#  WorkflowEngine Designer

## Introduction

WorkflowEngine Designer is a library developed to facilitate the use of this component. It provides a convenient way to interact and create the Workflow Designer on your web page.

## Prerequisites

To run the example below, you should create the WorkflowEngine backend capable of handling requests from the Workflow Designer.

## Installation

```shell
npm install @optimajet/workflow-designer
```

## Basic Usage

```javascript
import WorkflowDesigner from '@optimajet/workflow-designer'
//import '@optimajet/workflow-designer/localization/workflowdesigner.localization_ru'

const data = {
    schemecode: "<YOUR_SCHEME_CODE_VALUE>",
    processid: undefined
};

var wfdesigner = new WorkflowDesigner({
    apiurl: '<YOUR_API_URL_VALUE>',
    renderTo: 'root',
    graphwidth: window.innerWidth,
    graphheight: window.innerHeight,
});

if (wfdesigner.exists(data)) {
    wfdesigner.load(data);
} else {
    wfdesigner.create();
}
```

This code snippet is everything you need to initially display the Workflow Designer on your web page. Let's analyze it in more detail:

```javascript
import WorkflowDesigner from '@optimajet/workflow-designer'
//import '@optimajet/workflow-designer/localization/workflowdesigner.localization_ru'
```

This section is responsible for importing the `WorkflowDesigner` constructor. By uncommenting line 2, you can localize the workflow designer. By default, the workflow designer has the English localization.

```javascript
const data = {
    schemecode: "<YOUR_SCHEME_CODE_VALUE>",
    processid: undefined
};

var wfdesigner = new WorkflowDesigner({
    apiurl: '<YOUR_API_URL_VALUE>',
    renderTo: 'root',
    graphwidth: window.innerWidth,
    graphheight: window.innerHeight,
});
```

In this section:

- `schemecode` - is the code for the Workflow diagram to be displayed in the Workflow Designer.
- `processid` - is the identifier of the WorkflowEngine process.

- the `WorkflowDesigner` constructor takes an object with the designer settings and creates a new instance of the WorkflowDesigner class. The example specifies all the necessary parameters of the designer, namely: the HTTP address of the WorkflowAPI for interacting with the back-end of the application (`apiurl`), the available width (` graphwidth`) and height (`graphheight`) for displaying the WorkflowDesigner window, and the element ID, inside which the entire WorkflowDesigner interface is rendered (`renderTo`). For a more detailed list of the parameters, see the **Designer** section of the documentation page about the WorkflowEngine.


If you want to display the Workflow scheme in the Workflow Designer interface, set the required value to the `schemecode` variable, and assign the `undefined` value to the `processid`. In case you want to display the Workflow process, set the `undefined` value to the `schemecode`, and the required value to the `processid` variable of the WorkflowEngine process identifier.

```javascript
if (wfdesigner.exists(data)) {
    wfdesigner.load(data);
} else {
    wfdesigner.create();
}
```

This section checks whether the above data exist and available for loading and displaying in the WorkflowDesigner. If the specified data exist, then they are loaded and rendered. Otherwise, a new empty Workflow diagram will be created.

## Building and Running the Example

We use the webpack package to build our example.

```shell
npm i -D webpack webpack-cli
```

Next, add the packages necessary for the correct webpack setup

```shell
npm i -D @babel/preset-env @babel/core babel-loader css-loader html-webpack-plugin mini-css-extract-plugin terser-webpack-plugin
```

The basic webpack configuration looks like this:

```js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // for generate an HTML5 file
const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // to extract CSS into separate files
const TerserPlugin = require('terser-webpack-plugin'); // to minify your JavaScript
const webpack = require('webpack');


module.exports = () => ({
    entry: {
      wfesample: './src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].min.js',
        libraryTarget: "umd",
    },
    mode:'production',

    optimization: {
        minimizer: [new TerserPlugin()],
    },
    module: {
        rules: [
            {
              test: /\.css$/i,
              use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
              test: /\.m?js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  },
              },
          },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './src/index.html' }),
        new MiniCssExtractPlugin(),
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/),
    ]
});
```

## IE11 Support

To support successful performance of the designer in IE11, we should slightly modify the webpack configuration in `webpack.config.js`, but first we should add another package to transpile and modify our JavaScript.

```shell
npm i -D @babel/plugin-proposal-decorators
```

Now, add the `target: ['web', 'es5']` property in the webpack config, and change the `babel-loader` rule in`module.rules` to the following:

```js
//...
rules: [
    //...
    {
        test: /\.(js|jsx)$/,
        exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
        use: {
            loader: 'babel-loader',
            options: {
                babelrc: false,
                configFile: path.resolve(__dirname, 'babel.config.js'),
                compact: false,
                cacheDirectory: true,
                sourceMaps: false,
            },
        },
    },
],
//...
```

The only thing left to do is to create the `babel.config.js` file in the project root. The file should contain the following babel configuration:

```js
module.exports = function (api) {
    api.cache(true);
    const presets = [
        [
            '@babel/preset-env',
            {
                corejs:"3",
                useBuiltIns: 'entry',
                targets: {
                    browsers: [
                        "edge >= 16",
                        "safari >= 9",
                        "firefox >= 57",
                        "ie >= 11",
                        "ios >= 9",
                        "chrome >= 49"
                    ]
                }
            }
        ]
    ];
    const plugins= [
        ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        ["@babel/plugin-transform-spread"]
    ];
    return {
        presets,
        plugins
    }
}
```

The configuration is completed successfully, so you can enjoy using the WorkflowDesigner in IE11.

## Hotkeys:
Ctrl + A - Select All
Ctrl + C - Copy selected items
Ctrl + E - New Activity
Ctrl + I - Extended info
Ctrl + Y - Redo
Ctrl + Z - Undo
Arrows - Moving selected items
Delete - Delete
Alt + Enter - Full Screen Mode
Ctrl + M - Move mode