13 KiB
13 KiB
Mục lục
Yêu cầu
- Thư viện Drawflow
- 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. 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:
npm create vite@latest customer_sign_email -- --template vanilla
Di chuyển vào thư mục dự án:
cd customer_sign_email
Cài đặt package:
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>:
<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:
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
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
editor.editor_mode = "edit"; // Default
editor.editor_mode = "fixed"; // Only scroll
Có thể thay đổi màn hình editor
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.
editor.reroute = true;
Create point with double click on line connection. Double click on point for remove.
Nodes
Adding a node is simple.
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
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
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
editor.on("nodeCreated", function (id) {
console.log("Node created " + id);
});