import React, { Component } from 'react';
import Designer from 'wfd';
```const data = {
    nodes: [{ id: 'startNode', x: 50, y: 200, label: 'Начало', clazz: 'start' },
      { id: 'taskNode1', x: 200, y: 200, label: 'Начальник', assigneType: 'person', assigneValue: 'admin', isSequential: false, clazz: 'userTask' },
      { id: 'taskNode2', x: 400, y: 200, label: 'Менеджер', assigneType: 'person', assigneValue: 'admin', isSequential: false, clazz: 'userTask' },
      { id: 'decisionNode', x: 400, y: 320, label: 'Стоимость > 1000', clazz: 'gateway' },
      { id: 'taskNode3', x: 400, y: 450, label: 'Генеральный директор', clazz: 'userTask' },
      { id: 'endNode', x: 600, y: 320, label: 'Конец', clazz: 'end' }],
    edges: [{ source: 'startNode', target: 'taskNode1', sourceAnchor: 1, targetAnchor: 3, clazz: 'flow' },
      { source: 'taskNode1', target: 'endNode', sourceAnchor: 0, targetAnchor: 0, clazz: 'flow' },
      { source: 'taskNode1', target: 'taskNode2', sourceAnchor: 1, targetAnchor: 3, clazz: 'flow' },
      { source: 'taskNode2', target: 'decisionNode', sourceAnchor: 1, targetAnchor: 0, clazz: 'flow' },
      { source: 'taskNode2', target: 'taskNode1', sourceAnchor: 2, targetAnchor: 2, clazz: 'flow' },
      { source: 'decisionNode', target: 'taskNode3', sourceAnchor: 2, targetAnchor: 0, clazz: 'flow' },
      { source: 'decisionNode', target: 'endNode', sourceAnchor: 1, targetAnchor: 2, clazz: 'flow' },
      { source: 'taskNode3', target: 'endNode', sourceAnchor: 1, targetAnchor: 1, clazz: 'flow' },
      { source: 'taskNode3', target: 'taskNode1', sourceAnchor: 3, targetAnchor: 2, clazz: 'flow' }]
};

```class WFDemo extends Component {
    constructor(props) {
        super(props);
        this.wfDef = React.createRef();
    }
    
    handleSave = () => {
        const bpm = this.wfDef.current.graph.save();
    }
      
    render() {
        const candidateUsers = [{ id: '1', name: 'Tom' }, { id: '2', name: 'Steven' }, { id: '3', name: 'Andy' }];
        const candidateGroups = [{ id: '1', name: 'Manager' }, { id: '2', name: 'Security' }, { id: '3', name: 'OA' }];
        return (
            <>
                <a onClick={this.handleSave}>Сохранить</a>
                <Designer data={data} ref={this.wfDef} height={600} mode={"edit"} lang="ru" users={candidateUsers} groups={candidateGroups} />
            </>
        );
    }
}
```## API
##### Designer
###### Атрибуты
* data: начальные данные
* height: высота холста
* mode: view для чтения только, edit для редактирования
* lang: ru для русского, en для английского
* isView: режим предварительного просмотра (скрывает панель инструментов и панель свойств)
* users: данные для выбора проверяющего, объекты в массиве имеют id как ключ и name как значение
* groups: данные для выбора группы проверяющих, объекты в массиве имеют id как ключ и name как значение

###### Методы
* save(): Вызывает graph.save() для генерации JSON
* saveXML(): Вызывает graph.saveXML(createFile) для генерации Flowable XML, параметр createFile указывает, нужно ли одновременно создавать XML файл, по умолчанию true##### Node
###### Properties
* id: Unique identifier
* x: X coordinate
* y: Y coordinate
* label: Node label
* hideIcon: Hide icon
* active: Display node state (node edges will display movement animation)
* clazz: Class corresponding to the Flowable node, supported types:
    * start Start node
    * timerStart Timer start node
    * messageStart Message start node
    * signalStart Signal start node
    * gateway Exclusion gateway
    * exclusiveGateway Exclusion gateway
    * parallelGateway Parallel gateway
    * inclusiveGateway Inclusion gateway
    * [userTask](#UserTask) User node
    * [scriptTask](#ScriptTask) Script node
    * [mailTask](#MailTask) Email node
    * [javaTask](#JavaTask) Node with custom class
    * [receiveTask](#ReceiveTask) Reception node
    * timerCatch Timer catch node
    * messageCatch Message catch node
    * signalCatch Signal catch node
    * end End node
    
##### Edge
###### Properties
* source: Identifier of the source node
* target: Identifier of the target node
* sourceAnchor: Source node, 0 top, 1 right, 2 bottom, 3 left
* targetAnchor: Target node
* clazz: Class, currently only flow##### UserTask
###### Свойства
* assignType Тип назначения, включает пользователей, группы пользователей, пользовательский класс
* assignValue Назначение пользователя или группы
* javaClass Имя пользовательского класса
* dueDate Срок выполнения
* isSequential Последовательное выполнение

##### ScriptTask
###### Свойства
* script Содержимое скрипта

##### JavaTask
###### Свойства
* javaClass Имя пользовательского класса

##### ReceiveTask
###### Свойства
* waitState Поле ожидания
* stateValue Значение состояния ожидания

##### MailTask
###### Свойства
* to Получатель
* subject Тема письма
* content Содержимое письма

## Пример запуска

## Версия React