From 8c9ba95baa08156096451eb46e1c624dddaa1816 Mon Sep 17 00:00:00 2001 From: Tieptk Date: Thu, 1 Aug 2024 15:46:36 +0700 Subject: [PATCH] up --- README.md | 225 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..a2a50b7 --- /dev/null +++ b/README.md @@ -0,0 +1,225 @@ +## 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); +}); +```