@optimajet/workflow-designer 5.2.0 → 5.2.3

package/README.md

@@ -1,217 +1,229 @@
-#  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 `schemeсode` 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 uglifyjs-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 UglifyJsPlugin = require('uglifyjs-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 UglifyJsPlugin()],
-    },
-    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.
+#  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 `schemeсode` 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 uglifyjs-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 UglifyJsPlugin = require('uglifyjs-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 UglifyJsPlugin()],
+    },
+    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