@optimajet/workflow-designer 0.0.12 → 0.0.16

package/README.md

@@ -0,0 +1,209 @@
+#  WorkflowEngine Designer
+
+## Introduction
+
+Библиотека для WorkflowEngine Designer создана, чтобы облегчить использование данного компонента. Она предоставляет удобный способ взаимодействия и для создания Workflow Designer на вашей веб-странице.
+
+## Prerequisites
+
+Для успешного использования данного пакета необходимо создать рабочую серверную часть WorkflowEngine, способный обрабатывать запросы от 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', // index.html должен содержать <div id="root"></div>
+    graphwidth: window.innerWidth,
+    graphheight: window.innerHeight,
+});
+
+if (wfdesigner.exists(data)) {
+    wfdesigner.load(data);
+} else {
+    wfdesigner.create();
+}
+```
+Данный фрагмент кода представляет собой всё необходимое для первоначального отображения Workflow Designer на вашей веб-странице. Разберём его поподробнее:
+
+```javascript
+import WorkflowDesigner from '@optimajet/workflow-designer'
+//import '@optimajet/workflow-designer/localization/workflowdesigner.localization_ru'
+```
+
+Данный участок отвечает за импорт конструктора `WorkflowDesigner`. Расскоментировав 2 строчку, вы можете локализировать workflow designer. По умолчанию workflow designer имеет английскую локализацию.
+
+```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,
+});
+```
+
+В данном участке:
+
+- `schemecode` - это код схемы Workflow, который необходимо отобразить в Workflow Designer.
+- `processid` - представляет собой идентификатор процесса WorkflowEngine.
+
+- конструктор `WorkflowDesigner`, который принимает обьект с настройками дизайнера и создает новый экземпляр класса WorkflowDesigner. В примере указаны все необходимые параметры конструктора, а именно HTTP-адрес WorkflowAPI для взаимодействия с серверной частью приложения (`apiurl`), доступную ширину (`graphwidth`) и высоту (`graphheight`) для отображения окна WorkflowDesigner, а также идентификатор элемента, внутри которого необходимо отрисовывать весь интерфейс WorkflowDesigner (`renderTo`) . С более подробным списком параметров вы можете ознакомиться в разделе **Designer** страницы документации для WorkflowEngine.
+
+В случае, если вы хотите отобразить Workflow схему в интерфейсе Workflow Designer, то укажите в переменной `schemeсode` необходимое значение, а `processid` дайте значение `undefined`. В ситуации, когда вам нужно отобразить процесс Workflow, то установите значение `schemecode` в `undefined`, а переменной `processid` в требуемое значение идентификатора процесса WorkflowEngine.
+
+```javascript
+if (wfdesigner.exists(data)) {
+    wfdesigner.load(data);
+} else {
+    wfdesigner.create();
+}
+```
+
+На данном участке происходит проверка, существуют ли указанные выше данные и достпуны ли они для загрузки и отображения в WorkflowDesigner. В случае, если указанные данные существуют, то происходит их загрузка и последующая отрисовка. В противном случае, будет создана новая пустая Workflow схема.
+
+## Сборка и запуск примера 
+
+Установите пакеты, нужные для корректной настройки webpack:
+
+```shell
+npm i -D @babel/preset-env @babel/core babel-loader css-loader html-webpack-plugin mini-css-extract-plugin uglifyjs-webpack-plugin
+```
+
+Базовая конфигурация webpack имеет следующий вид:
+
+```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
+
+Для того чтобы дизайнер успешно работал в IE11, нужно немного модифицировать конфигурацию webpack в `webpack.config.js`, но для начала нам нужно добавить еще один пакет для транспиляции и модификации нашего JavaScript.
+
+```shell
+npm i -D @babel/plugin-proposal-decorators
+```
+
+Теперь добавьте в конфигурациях webpack'a свойство `target: ['web', 'es5']` и измените в `module.rules` правило, содержащее `babel-loader`, на следующее:
+
+```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,
+            },
+        },
+    },
+]
+//...
+```
+
+Осталось создать файл `babel.config.js` в корне проекта. Файл должен содержать следующую конфигурацию для babel:
+
+```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
+    }
+}
+```
+
+Настройка успешно завершена, теперь вы можете наслаждаться пользованием WorkflowDesigner и в IE11.