226 lines
13 KiB
Markdown
226 lines
13 KiB
Markdown
## 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 `<head>`:
|
|
|
|
```bash
|
|
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
|
|
```
|
|
|
|
### 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 = `
|
|
<div><input type="text" df-name></div>
|
|
`;
|
|
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);
|
|
});
|
|
```
|