## Mục lục
- [Yêu cầu](#yêu-cầu)
- [Cài đặt](#cài-đặt)
- [Ghi chú và cách sử dụng](#ghi-chú-và-cách-sử-dụng)
## Yêu cầu
- [Thư viện Drawflow](https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js)
- Node.js và npm
- Vite
- Trình duyệt web hiện đại (ví dụ: Chrome, Firefox)
## Cài đặt
### 1. Cài đặt Node.js và npm
Tải và cài đặt Node.js từ [trang web chính thức](https://nodejs.org/). npm sẽ được cài đặt cùng với Node.js.
### 2. Cài đặt Vite
Mở terminal và chạy lệnh sau để cài đặt Vite:
```bash
npm create vite@latest customer_sign_email -- --template vanilla
```
Di chuyển vào thư mục dự án:
```bash
cd customer_sign_email
```
Cài đặt package:
```bash
npm install
```
### 3. Cấu hình Drawflow
Thêm Drawflow vào dự án của bạn. Mở file `index.html` và thêm dòng sau trong phần ``:
```bash
```
### 4. Khởi động ứng dụng
Chạy lệnh sau để xem dự án:
```bash
npm run dev
```
Mở trình duyệt truy cập `http://localhost:4000/` để xem.
### Ghi chú và cách sử dụng
### 1. Khởi tạo Drawflow
```javascript
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
```
### 2. Editor
Có thể thay đổi được cách hoạt động của drawflow
```javascript
editor.editor_mode = "edit"; // Default
editor.editor_mode = "fixed"; // Only scroll
```
Có thể thay đổi màn hình editor
```javascript
editor.zoom_max = 1.6;
editor.zoom_min = 0.5;
editor.zoom_value = 0.1;
```
### Editor options
| Parameter | Type | Default | Description |
| ----------------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------- |
| `reroute` | Boolean | false | Active reroute |
| `reroute_fix_curvature` | Boolean | false | Fix adding points |
| `curvature` | Number | 0.5 | Curvature |
| `reroute_curvature_start_end` | Number | 0.5 | Curvature reroute first point and las point |
| `reroute_curvature` | Number | 0.5 | Curvature reroute |
| `reroute_width` | Number | 6 | Width of reroute |
| `line_path` | Number | 5 | Width of line |
| `force_first_input` | Boolean | false | Force the first input to drop the connection on top of the node |
| `editor_mode` | Text | `edit` | `edit` for edit, `fixed` for nodes fixed but their input fields available, `view` for view only |
| `zoom` | Number | 1 | Default zoom |
| `zoom_max` | Number | 1.6 | Default zoom max |
| `zoom_min` | Number | 0.5 | Default zoom min |
| `zoom_value` | Number | 0.1 | Default zoom value update |
| `zoom_last_value` | Number | 1 | Default zoom last value |
| `draggable_inputs` | Boolean | true | Drag nodes on click inputs |
| `useuuid` | Boolean | false | Use UUID as node ID instead of integer index. Only affect newly created nodes, do not affect imported nodes |
### Reroute
Active reroute connections. Use before `start` or `import`.
```javascript
editor.reroute = true;
```
Create point with double click on line connection. Double click on point for remove.
## Nodes
Adding a node is simple.
```javascript
editor.addNode(name, inputs, outputs, posx, posy, class, data, html);
```
| Parameter | Type | Description |
| ---------- | -------------- | ------------------------------------------------------------------ |
| `name` | text | Name of module |
| `inputs` | number | Number of de inputs |
| `outputs` | number | Number of de outputs |
| `pos_x` | number | Position on start node left |
| `pos_y` | number | Position on start node top |
| `class` | text | Added classname to de node. Multiple classnames separated by space |
| `data` | json | Data passed to node |
| `html` | text | HTML drawn on node or `name` of register node. |
| `typenode` | boolean & text | Default `false`, `true` for Object HTML, `vue` for vue |
You can use the attribute `df-*` in **inputs, textarea or select** to synchronize with the node data and **contenteditable**.
Atrributs multiples parents support `df-*-*...`
### Node example
```javascript
var html = `
`;
var data = { name: "" };
editor.addNode("github", 0, 1, 150, 300, "github", data, html);
```
## Methods
Other available functions.
| Mehtod | Description |
| ------------------------------------------------------------------------ | ----------------------------------------------------- |
| `zoom_in()` | Increment zoom +0.1 |
| `zoom_out()` | Decrement zoom -0.1 |
| `getNodeFromId(id)` | Get Info of node. Ex: id: `5` |
| `getNodesFromName(name)` | Return Array of nodes id. Ex: name: `telegram` |
| `removeNodeId(id)` | Remove node. Ex id: `node-x` |
| `updateNodeDataFromId` | Update data element. Ex: `5, { name: 'Drawflow' }` |
| `addNodeInput(id)` | Add input to node. Ex id: `5` |
| `addNodeOutput(id)` | Add output to node. Ex id: `5` |
| `removeNodeInput(id, input_class)` | Remove input to node. Ex id: `5`, `input_2` |
| `removeNodeOutput(id, output_class)` | Remove output to node. Ex id: `5`, `output_2` |
| `addConnection(id_output, id_input, output_class, input_class)` | Add connection. Ex: `15,16,'output_1','input_1'` |
| `removeSingleConnection(id_output, id_input, output_class, input_class)` | Remove connection. Ex: `15,16,'output_1','input_1'` |
| `updateConnectionNodes(id)` | Update connections position from Node Ex id: `node-x` |
| `removeConnectionNodeId(id)` | Remove node connections. Ex id: `node-x` |
| `getModuleFromNodeId(id)` | Get name of module where is the id. Ex id: `5` |
| `clearModuleSelected()` | Clear data of module selected |
| `clear()` | Clear all data of all modules and modules remove. |
### Methods example
```javascript
editor.removeNodeId("node-4");
```
## Events
You can detect events that are happening.
List of available events:
| Event | Return | Description |
| ---------------------- | -------------------------------------------------- | ----------------------------------------- |
| `nodeCreated` | id | `id` of Node |
| `nodeRemoved` | id | `id` of Node |
| `nodeDataChanged` | id | `id` of Node df-\* attributes changed. |
| `nodeSelected` | id | `id` of Node |
| `nodeUnselected` | true | Unselect node |
| `nodeMoved` | id | `id` of Node |
| `connectionStart` | { output_id, output_class } | `id` of nodes and output selected |
| `connectionCancel` | true | Connection Cancel |
| `connectionCreated` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output/input selected |
| `connectionRemoved` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output/input selected |
| `connectionSelected` | { output_id, input_id, output_class, input_class } | `id`'s of nodes and output/input selected |
| `connectionUnselected` | true | Unselect connection |
| `addReroute` | id | `id` of Node output |
| `removeReroute` | id | `id` of Node output |
| `rerouteMoved` | id | `id` of Node output |
| `moduleCreated` | name | `name` of Module |
| `moduleChanged` | name | `name` of Module |
| `moduleRemoved` | name | `name` of Module |
| `click` | event | Click event |
| `clickEnd` | event | Once the click changes have been made |
| `contextmenu` | event | Click second button mouse event |
| `mouseMove` | { x, y } | Position |
| `mouseUp` | event | MouseUp Event |
| `keydown` | event | Keydown event |
| `zoom` | zoom_level | Level of zoom |
| `translate` | { x, y } | Position translate editor |
| `import` | `import` | Finish import |
| `export` | data | Data export |
### Events example
```javascript
editor.on("nodeCreated", function (id) {
console.log("Node created " + id);
});
```