Drawflow
0.0.60
ไลบรารีโฟลว์แบบง่าย
DrawFlow ช่วยให้คุณสร้างกระแสข้อมูลได้อย่างง่ายดายและรวดเร็ว
การติดตั้งเฉพาะไลบรารี JavaScript และมีรหัสสี่บรรทัด
การสาธิตสด
- ชุดรูปแบบการแก้ไขเครื่องกำเนิดไฟฟ้า
edit fixed หรือ viewดาวน์โหลดหรือโคลนที่เก็บและคัดลอกโฟลเดอร์ DIST, ตัวเลือก CDN หรือ NPM
git clone https://github.com/jerosoler/Drawflow.git
# Last
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css " >
< script src =" https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js " > </ script >
# or version view releases https://github.com/jerosoler/Drawflow/releases
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/drawflow.min.css " />
< script src =" https://unpkg.com/[email protected]/dist/drawflow.min.js " > </ script > npm i drawflowแพ็คเกจภายนอก ข้อมูลเพิ่มเติม #119
npm install - D @ types / drawflow import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css' var Drawflow = require ( 'drawflow' )
var styleDrawflow = require ( 'drawflow/dist/drawflow.min.css' )สร้างองค์ประกอบหลักของ การดึง
< div id =" drawflow " > </ div >เริ่ม Drawlow
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| พารามิเตอร์ | พิมพ์ | คำอธิบาย |
|---|---|---|
id | วัตถุ | ชื่อโมดูล |
render | วัตถุ | สำหรับ Vue |
parent | วัตถุ | สำหรับ Vue อินสแตนซ์หลัก |
import Vue from 'vue'
// Pass render Vue
this . editor = new Drawflow ( id , Vue , this ) ; import { h , getCurrentInstance , render } from 'vue'
const Vue = { version : 3 , h , render } ;
this . editor = new Drawflow ( id , Vue ) ;
// Pass render Vue 3 Instance
const internalInstance = getCurrentInstance ( )
editor . value = new Drawflow ( id , Vue , internalInstance . appContext . app . _context ) ; เพิ่มไปยังไฟล์ nuxt.config.js
build: {
transpile : [ 'drawflow' ] ,
...
} del key เพื่อลบองค์ประกอบRight click เพื่อแสดงตัวเลือกลบ (กดยาวมือถือ)Left click press เพื่อย้ายตัวแก้ไขหรือโหนดที่เลือกCtrl + Mouse Wheel Zoom In/Out (มือถือหยิก) คุณสามารถเปลี่ยนตัวแก้ไขเป็นประเภท คง ที่เป็นบล็อก สามารถเคลื่อนย้ายได้เท่านั้น คุณสามารถวางไว้ก่อนเริ่ม
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollคุณยังสามารถปรับค่าซูม
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
reroute | บูลีน | เท็จ | Reroute ที่ใช้งานอยู่ |
reroute_fix_curvature | บูลีน | เท็จ | แก้ไขจุดเพิ่ม |
curvature | ตัวเลข | 0.5 | ความโค้ง |
reroute_curvature_start_end | ตัวเลข | 0.5 | Reroute Reroute First Point และ Las Point |
reroute_curvature | ตัวเลข | 0.5 | การเปลี่ยนเส้นทางความโค้ง |
reroute_width | ตัวเลข | 6 | ความกว้างของ Reroute |
line_path | ตัวเลข | 5 | ความกว้างของเส้น |
force_first_input | บูลีน | เท็จ | บังคับให้อินพุตแรกวางการเชื่อมต่อที่ด้านบนของโหนด |
editor_mode | ข้อความ | edit | edit สำหรับการแก้ไข fixed สำหรับโหนดคงที่ แต่มีฟิลด์อินพุตของพวกเขา view สำหรับมุมมองเท่านั้น |
zoom | ตัวเลข | 1 | การซูมเริ่มต้น |
zoom_max | ตัวเลข | 1.6 | การซูมเริ่มต้นสูงสุด |
zoom_min | ตัวเลข | 0.5 | การซูมเริ่มต้นขั้นต่ำ |
zoom_value | ตัวเลข | 0.1 | อัปเดตค่าการซูมเริ่มต้น |
zoom_last_value | ตัวเลข | 1 | ค่าการซูมเริ่มต้นค่าสุดท้าย |
draggable_inputs | บูลีน | จริง | ลากโหนดบนอินพุตคลิก |
useuuid | บูลีน | เท็จ | ใช้ UUID เป็นโหนด ID แทนดัชนีจำนวนเต็ม ส่งผลกระทบต่อโหนดที่สร้างขึ้นใหม่เท่านั้นไม่ส่งผลกระทบต่อโหนดที่นำเข้า |
การเชื่อมต่อ Reroute ที่ใช้งานอยู่ ใช้ก่อน start หรือ import
editor . reroute = true ;สร้างจุดด้วยการเชื่อมต่อแบบดับเบิลคลิกที่สาย ดับเบิลคลิกที่จุดสำหรับลบ
แยกกระแสของคุณในบรรณาธิการที่แตกต่างกัน
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; RemovedModule หากอยู่ในโมดูลเดียวกันเปลี่ยนเส้นทางไปยังโมดูล Home
การเพิ่มโหนดนั้นง่าย
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| พารามิเตอร์ | พิมพ์ | คำอธิบาย |
|---|---|---|
name | ข้อความ | ชื่อโมดูล |
inputs | ตัวเลข | จำนวนอินพุต DE |
outputs | ตัวเลข | จำนวนเอาต์พุต DE |
pos_x | ตัวเลข | ตำแหน่งบนโหนดเริ่มต้นซ้าย |
pos_y | ตัวเลข | วางตำแหน่งบนโหนดเริ่มต้น |
class | ข้อความ | เพิ่มชื่อคลาสลงใน de node ชื่อหลายคลาสคั่นด้วยอวกาศ |
data | JSON | ข้อมูลส่งผ่านไปยังโหนด |
html | ข้อความ | HTML วาดบนโหนดหรือ name ของโหนดการลงทะเบียน |
typenode | บูลีนและข้อความ | ค่าเริ่ม false true สำหรับวัตถุ html, vue สำหรับ vue |
คุณสามารถใช้แอตทริบิวต์ df-* ใน อินพุต, textarea หรือเลือก เพื่อซิงโครไนซ์กับข้อมูลโหนดและ เป็นที่ชื่นชอบ
Atrributs ผู้ปกครองหลายคนสนับสนุน df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;เป็นไปได้ที่โหนดการลงทะเบียนสำหรับนำกลับมาใช้ซ้ำ
var html = document . createElement ( "div" ) ;
html . innerHTML = "Hello Drawflow!!" ;
editor . registerNode ( 'test' , html ) ;
// Use
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'test' , true ) ;
// For vue
import component from '~/components/testcomponent.vue'
editor . registerNode ( 'name' , component , props , options ) ;
// Use for vue
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'name' , 'vue' ) ;| พารามิเตอร์ | พิมพ์ | คำอธิบาย |
|---|---|---|
name | ข้อความ | ชื่อโมดูลที่ลงทะเบียน |
html | ข้อความ | HTML เพื่อวาดหรือส่วนประกอบ vue |
props | JSON | สำหรับ vue เท่านั้น อุปกรณ์ประกอบฉากของส่วนประกอบ Not Required |
options | JSON | สำหรับ vue เท่านั้น ตัวเลือกขององค์ประกอบ Not Required |
ฟังก์ชั่นอื่น ๆ ที่มีอยู่
| mehtod | คำอธิบาย |
|---|---|
zoom_in() | ซูมเพิ่มขึ้น +0.1 |
zoom_out() | ซูมลดลง -0.1 |
getNodeFromId(id) | รับข้อมูลโหนด เช่น ID: 5 |
getNodesFromName(name) | return array ของ ide id เช่นชื่อ: telegram |
removeNodeId(id) | ลบโหนด Ex ID: node-x |
updateNodeDataFromId | อัปเดตองค์ประกอบข้อมูล ตัวอย่าง: 5, { name: 'Drawflow' } |
addNodeInput(id) | เพิ่มอินพุตลงในโหนด Ex ID: 5 |
addNodeOutput(id) | เพิ่มเอาต์พุตลงในโหนด Ex ID: 5 |
removeNodeInput(id, input_class) | ลบอินพุตไปยังโหนด Ex ID: 5 , input_2 |
removeNodeOutput(id, output_class) | ลบเอาต์พุตไปยังโหนด Ex ID: 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | เพิ่มการเชื่อมต่อ ตัวอย่าง: 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | ลบการเชื่อมต่อ ตัวอย่าง: 15,16,'output_1','input_1' |
updateConnectionNodes(id) | อัปเดตตำแหน่งการเชื่อมต่อจาก Node Ex ID: node-x |
removeConnectionNodeId(id) | ลบการเชื่อมต่อโหนด Ex ID: node-x |
getModuleFromNodeId(id) | รับชื่อโมดูลอยู่ที่ไหน id Ex ID: 5 |
clearModuleSelected() | ล้างข้อมูลโมดูลที่เลือก |
clear() | ล้างข้อมูลทั้งหมดของโมดูลและโมดูลทั้งหมดลบ |
editor . removeNodeId ( 'node-4' ) ; คุณสามารถตรวจจับเหตุการณ์ที่เกิดขึ้น
รายการกิจกรรมที่มีอยู่:
| เหตุการณ์ | กลับ | คำอธิบาย |
|---|---|---|
nodeCreated | รหัสประจำตัว | id ของโหนด |
nodeRemoved | รหัสประจำตัว | id ของโหนด |
nodeDataChanged | รหัสประจำตัว | id ของโหนด df-* แอตทริบิวต์เปลี่ยนไป |
nodeSelected | รหัสประจำตัว | id ของโหนด |
nodeUnselected | จริง | ไม่เลือกโหนด |
nodeMoved | รหัสประจำตัว | id ของโหนด |
connectionStart | {output_id, output_class} | id ของโหนดและเอาต์พุตเลือก |
connectionCancel | จริง | ยกเลิกการเชื่อมต่อ |
connectionCreated | {output_id, input_id, output_class, input_class} | id ของโหนดและเอาต์พุต/อินพุตเลือก |
connectionRemoved | {output_id, input_id, output_class, input_class} | id ของโหนดและเอาต์พุต/อินพุตเลือก |
connectionSelected | {output_id, input_id, output_class, input_class} | id ของโหนดและเอาต์พุต/อินพุตเลือก |
connectionUnselected | จริง | ไม่เลือกการเชื่อมต่อ |
addReroute | รหัสประจำตัว | id ของเอาต์พุตโหนด |
removeReroute | รหัสประจำตัว | id ของเอาต์พุตโหนด |
rerouteMoved | รหัสประจำตัว | id ของเอาต์พุตโหนด |
moduleCreated | ชื่อ | name โมดูล |
moduleChanged | ชื่อ | name โมดูล |
moduleRemoved | ชื่อ | name โมดูล |
click | เหตุการณ์ | คลิกเหตุการณ์ |
clickEnd | เหตุการณ์ | เมื่อมีการเปลี่ยนแปลงการคลิก |
contextmenu | เหตุการณ์ | คลิกเหตุการณ์เมาส์ปุ่มที่สอง |
mouseMove | {x, y} | ตำแหน่ง |
mouseUp | เหตุการณ์ | เหตุการณ์ Mouseup |
keydown | เหตุการณ์ | เหตุการณ์ Keydown |
zoom | zoom_level | ระดับการซูม |
translate | {x, y} | ตัวแก้ไขแปลตำแหน่ง |
import | import | เสร็จนำเข้า |
export | ข้อมูล | การส่งออกข้อมูล |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) คุณสามารถส่งออกและนำเข้าข้อมูลของคุณ
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;ตัวอย่างข้อมูลที่ส่งออก:
{
"drawflow" : {
"Home" : {
"data" : {}
},
"Other" : {
"data" : {
"16" : {
"id" : 16 ,
"name" : " facebook " ,
"data" : {},
"class" : " facebook " ,
"html" : "n
n
Facebook Message
n
n ",
"inputs" : {},
"outputs" : {
"output_1" : {
"connections" : [
{
"node" : " 17 " ,
"output" : " input_1 "
}
]
}
},
"pos_x" : 226 ,
"pos_y" : 138
},
"17" : {
"id" : 17 ,
"name" : " log " ,
"data" : {},
"class" : " log " ,
"html" : "n
n
Save log file
n
n ",
"inputs" : {
"input_1" : {
"connections" : [
{
"node" : " 16 " ,
"input" : " output_1 "
}
]
}
},
"outputs" : {},
"pos_x" : 690 ,
"pos_y" : 129
}
}
}
}
}
ดูตัวอย่างที่สมบูรณ์ในเอกสารโฟลเดอร์
นอกจากนี้ยังมีตัวอย่างวิธีการใช้ DrawFlow ในองค์ประกอบที่กำหนดเอง (ขึ้นอยู่กับการจัดสรร Litelement)
ใบอนุญาต MIT
