@optimajet/workflow-designer 16.1.0 → 16.2.1

package/README.md

@@ -1,229 +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 `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
+#  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

package/bin/index.js

@@ -1,65 +1,65 @@
-#! /usr/bin/env node
-
-const {exec} = require('child_process');
-const path = require('path');
-const os = require('os');
-const fs = require('fs')
-const util = require('util');
-const fsPromises = require('node:fs/promises');
-const crypto = require('node:crypto')
-
-function runCommand(command) {
-  return new Promise((resolve, reject) => {
-    exec(command, (error) => {
-      if (error) {
-        reject(error);
-        return;
-      }
-      resolve();
-    });
-  });
-}
-
-async function passSettings(file, url, schemeCode) {
-  const readFile = util.promisify(fs.readFile);
-  const writeFile = util.promisify(fs.writeFile);
-
-  const data = await readFile(file);
-  const result = data.toString()
-    .replace(/URL_PLACEHOLDER/g, url)
-    .replace(/SCHEME_CODE_PLACEHOLDER/g, schemeCode);
-  await writeFile(file, result);
-}
-
-async function createTempFolder(sourcePath) {
-  const args = process.argv.slice(2).join('|');
-  const digest = crypto.createHash('sha256')
-    .update(args)
-    .digest('hex');
-
-  const tempPath = path.join(sourcePath, '..', `workflow-designer-${digest}`);
-  await fsPromises.mkdir(tempPath, {recursive: true});
-  await fsPromises.copyFile(path.resolve(sourcePath, 'index.js'), path.resolve(tempPath, 'index.js'));
-  await fsPromises.copyFile(path.resolve(sourcePath, 'index.html'), path.resolve(tempPath, 'index.html'));
-  return tempPath
-}
-
-async function main() {
-  const args = process.argv.slice(2);
-
-  const templateDirectory = path.resolve(__dirname, '..', 'bin', 'template');
-  const tempFolderName = await createTempFolder(templateDirectory);
-
-  const jsFile = path.resolve(tempFolderName, 'index.js');
-  const htmlFile = path.resolve(tempFolderName, 'index.html');
-
-  const designerUrl = args[0] ?? 'https://demo.workflowengine.io/Designer/API';
-  const schemeCode = args[1] ?? 'SimpleWF';
-  await passSettings(jsFile, designerUrl, schemeCode);
-
-  const platform = os.platform();
-  const command = platform === 'win32' ? `start ${htmlFile}` : `open ${htmlFile}`;
-  await runCommand(command);
-}
-
-main().catch(console.error);
+#! /usr/bin/env node
+
+const {exec} = require('child_process');
+const path = require('path');
+const os = require('os');
+const fs = require('fs')
+const util = require('util');
+const fsPromises = require('node:fs/promises');
+const crypto = require('node:crypto')
+
+function runCommand(command) {
+  return new Promise((resolve, reject) => {
+    exec(command, (error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+async function passSettings(file, url, schemeCode) {
+  const readFile = util.promisify(fs.readFile);
+  const writeFile = util.promisify(fs.writeFile);
+
+  const data = await readFile(file);
+  const result = data.toString()
+    .replace(/URL_PLACEHOLDER/g, url)
+    .replace(/SCHEME_CODE_PLACEHOLDER/g, schemeCode);
+  await writeFile(file, result);
+}
+
+async function createTempFolder(sourcePath) {
+  const args = process.argv.slice(2).join('|');
+  const digest = crypto.createHash('sha256')
+    .update(args)
+    .digest('hex');
+
+  const tempPath = path.join(sourcePath, '..', `workflow-designer-${digest}`);
+  await fsPromises.mkdir(tempPath, {recursive: true});
+  await fsPromises.copyFile(path.resolve(sourcePath, 'index.js'), path.resolve(tempPath, 'index.js'));
+  await fsPromises.copyFile(path.resolve(sourcePath, 'index.html'), path.resolve(tempPath, 'index.html'));
+  return tempPath
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  const templateDirectory = path.resolve(__dirname, '..', 'bin', 'template');
+  const tempFolderName = await createTempFolder(templateDirectory);
+
+  const jsFile = path.resolve(tempFolderName, 'index.js');
+  const htmlFile = path.resolve(tempFolderName, 'index.html');
+
+  const designerUrl = args[0] ?? 'https://demo.workflowengine.io/Designer/API';
+  const schemeCode = args[1] ?? 'SimpleWF';
+  await passSettings(jsFile, designerUrl, schemeCode);
+
+  const platform = os.platform();
+  const command = platform === 'win32' ? `start ${htmlFile}` : `open ${htmlFile}`;
+  await runCommand(command);
+}
+
+main().catch(console.error);

package/bin/template/index.html

@@ -1,18 +1,18 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>WorkflowEngine Designer</title>
-  <link rel="stylesheet" href="../../dist/workflowdesigner.min.css">
-</head>
-<body style="margin: 0">
-<div id="root"></div>
-
-<script
-  src="https://code.jquery.com/jquery-3.7.1.min.js"
-  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
-  crossorigin="anonymous"></script>
-<script src="../../dist/workflowdesignerfull.min.js"></script>
-<script src="./index.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>WorkflowEngine Designer</title>
+  <link rel="stylesheet" href="../../dist/workflowdesigner.min.css">
+</head>
+<body style="margin: 0">
+<div id="root"></div>
+
+<script
+  src="https://code.jquery.com/jquery-3.7.1.min.js"
+  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+  crossorigin="anonymous"></script>
+<script src="../../dist/workflowdesignerfull.min.js"></script>
+<script src="./index.js"></script>
+</body>
+</html>

package/bin/template/index.js

@@ -1,20 +1,20 @@
-var wfdesigner = new WorkflowDesigner({
-  apiurl: 'URL_PLACEHOLDER',
-  name: 'wfe',
-  language: 'en',
-  renderTo: 'root',
-  graphwidth: window.innerWidth,
-  graphheight: window.innerHeight,
-  showSaveButton: true,
-});
-
-const data = {
-  schemecode: 'SCHEME_CODE_PLACEHOLDER',
-  processid: ''
-};
-
-if (wfdesigner.exists(data)) {
-  wfdesigner.load(data);
-} else {
-  wfdesigner.create(data.schemecode);
-}
+var wfdesigner = new WorkflowDesigner({
+  apiurl: 'URL_PLACEHOLDER',
+  name: 'wfe',
+  language: 'en',
+  renderTo: 'root',
+  graphwidth: window.innerWidth,
+  graphheight: window.innerHeight,
+  showSaveButton: true,
+});
+
+const data = {
+  schemecode: 'SCHEME_CODE_PLACEHOLDER',
+  processid: ''
+};
+
+if (wfdesigner.exists(data)) {
+  wfdesigner.load(data);
+} else {
+  wfdesigner.create(data.schemecode);
+}