Drawflow
0.0.60
Perpustakaan Aliran Sederhana.
DrawFlow memungkinkan Anda untuk membuat aliran data dengan mudah dan cepat.
Menginstal hanya perpustakaan JavaScript dan dengan empat baris kode.
Demo langsung
? Generator Edit Tema
edit , fixed atau viewUnduh atau klon repositori dan salin folder Dist, opsi CDN atau 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 drawflowPaket eksternal. Info lebih lanjut #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' )Buat elemen induk dari drawflow .
< div id =" drawflow " > </ div >Mulai Drawflow.
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| Parameter | Jenis | Keterangan |
|---|---|---|
id | Obyek | Nama modul |
render | Obyek | Ini untuk Vue . |
parent | Obyek | Ini untuk Vue . Instance induk |
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 ) ; Tambahkan ke file nuxt.config.js
build: {
transpile : [ 'drawflow' ] ,
...
} del key untuk menghapus elemen.Right click untuk menampilkan Opsi Hapus (Mobile Long Press).Left click press untuk memindahkan editor atau node yang dipilih.Ctrl + Mouse Wheel zoom in/out (cubit seluler). Anda dapat mengubah editor ke jenis tetap untuk diblokir. Hanya editor yang bisa dipindahkan. Anda bisa meletakkannya sebelum mulai.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollAnda juga dapat menyesuaikan nilai zoom.
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| Parameter | Jenis | Bawaan | Keterangan |
|---|---|---|---|
reroute | Boolean | PALSU | Reroute aktif |
reroute_fix_curvature | Boolean | PALSU | Perbaiki penambahan poin |
curvature | Nomor | 0,5 | Lengkungan |
reroute_curvature_start_end | Nomor | 0,5 | Poin pertama kelengkungan reroute dan titik las |
reroute_curvature | Nomor | 0,5 | Reroute kelengkungan |
reroute_width | Nomor | 6 | Lebar reroute |
line_path | Nomor | 5 | Lebar garis |
force_first_input | Boolean | PALSU | Paksa input pertama untuk menjatuhkan koneksi di atas node |
editor_mode | Teks | edit | edit untuk diedit, fixed untuk node diperbaiki tetapi bidang inputnya tersedia, hanya view untuk tampilan |
zoom | Nomor | 1 | Zoom default |
zoom_max | Nomor | 1.6 | Default Zoom Max |
zoom_min | Nomor | 0,5 | Default Zoom min |
zoom_value | Nomor | 0.1 | Pembaruan Nilai Zoom Default |
zoom_last_value | Nomor | 1 | Default Zoom Nilai Terakhir |
draggable_inputs | Boolean | BENAR | Seret node pada input klik |
useuuid | Boolean | PALSU | Gunakan UUID sebagai Node ID alih -alih Indeks Integer. Hanya mempengaruhi node yang baru dibuat, jangan mempengaruhi node impor |
Koneksi reroute aktif. Gunakan sebelum start atau import .
editor . reroute = true ;Buat titik dengan Klik Double On Line Connection. Klik dua kali pada titik untuk hapus.
Pisahkan aliran Anda dalam editor yang berbeda.
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; RemovedModule Jika dalam modul yang sama mengarahkan kembali ke modul Home
Menambahkan simpul itu sederhana.
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| Parameter | Jenis | Keterangan |
|---|---|---|
name | teks | Nama modul |
inputs | nomor | Jumlah input DE |
outputs | nomor | Jumlah output DE |
pos_x | nomor | Posisi pada Node Mulai Kiri |
pos_y | nomor | Posisi di Node Top Mulai |
class | teks | Menambahkan ClassName ke De Node. Beberapa nama kelas dipisahkan oleh ruang |
data | json | Data diteruskan ke Node |
html | teks | Html digambar pada simpul atau name simpul register. |
typenode | Boolean & Teks | Default false , true Untuk Objek HTML, vue untuk Vue |
Anda dapat menggunakan atribut df-* dalam input, textarea atau pilih untuk disinkronkan dengan data node dan dapat diedit .
Atrributs Multiples Parents mendukung df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;Mungkin Node Register untuk digunakan kembali.
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' ) ;| Parameter | Jenis | Keterangan |
|---|---|---|
name | teks | Nama modul terdaftar. |
html | teks | Html untuk menggambar atau komponen vue . |
props | json | Hanya untuk vue . Alat peraga komponen. Not Required |
options | json | Hanya untuk vue . Opsi komponen. Not Required |
Fungsi lain yang tersedia.
| Mehtod | Keterangan |
|---|---|
zoom_in() | Peningkatan Zoom +0.1 |
zoom_out() | Penurunan zoom -0.1 |
getNodeFromId(id) | Dapatkan info node. Contoh: ID: 5 |
getNodesFromName(name) | Mengembalikan array node ID. Contoh: Nama: telegram |
removeNodeId(id) | Hapus node. Ex ID: node-x |
updateNodeDataFromId | Perbarui elemen data. Contoh: 5, { name: 'Drawflow' } |
addNodeInput(id) | Tambahkan input ke node. Ex ID: 5 |
addNodeOutput(id) | Tambahkan output ke node. Ex ID: 5 |
removeNodeInput(id, input_class) | Hapus input ke node. Ex ID: 5 , input_2 |
removeNodeOutput(id, output_class) | Hapus output ke node. Ex ID: 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | Tambahkan koneksi. Contoh: 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | Hapus koneksi. Contoh: 15,16,'output_1','input_1' |
updateConnectionNodes(id) | Perbarui Posisi Koneksi dari Node EX ID: node-x |
removeConnectionNodeId(id) | Hapus koneksi node. Ex ID: node-x |
getModuleFromNodeId(id) | Dapatkan nama modul di mana ID. Ex ID: 5 |
clearModuleSelected() | Hapus data modul yang dipilih |
clear() | Hapus semua data dari semua modul dan modul yang dihapus. |
editor . removeNodeId ( 'node-4' ) ; Anda dapat mendeteksi acara yang sedang terjadi.
Daftar acara yang tersedia:
| Peristiwa | Kembali | Keterangan |
|---|---|---|
nodeCreated | pengenal | id node |
nodeRemoved | pengenal | id node |
nodeDataChanged | pengenal | id node df-* atribut berubah. |
nodeSelected | pengenal | id node |
nodeUnselected | BENAR | Node yang tidak terpilih |
nodeMoved | pengenal | id node |
connectionStart | {output_id, output_class} | id node dan output dipilih |
connectionCancel | BENAR | Koneksi batal |
connectionCreated | {output_id, input_id, output_class, input_class} | id dari node dan output/input yang dipilih |
connectionRemoved | {output_id, input_id, output_class, input_class} | id dari node dan output/input yang dipilih |
connectionSelected | {output_id, input_id, output_class, input_class} | id dari node dan output/input yang dipilih |
connectionUnselected | BENAR | Koneksi yang tidak terpilih |
addReroute | pengenal | id Output Node |
removeReroute | pengenal | id Output Node |
rerouteMoved | pengenal | id Output Node |
moduleCreated | nama | name modul |
moduleChanged | nama | name modul |
moduleRemoved | nama | name modul |
click | peristiwa | Klik acara |
clickEnd | peristiwa | Setelah perubahan klik dibuat |
contextmenu | peristiwa | Klik Acara Mouse Tombol Kedua |
mouseMove | {x, y} | Posisi |
mouseUp | peristiwa | Acara MouseUp |
keydown | peristiwa | Acara Keydown |
zoom | zoom_level | Tingkat zoom |
translate | {x, y} | Posisi menerjemahkan editor |
import | import | Selesaikan impor |
export | data | Ekspor Data |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) Anda dapat mengekspor dan mengimpor data Anda.
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;Contoh data yang diekspor:
{
"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
}
}
}
}
}
Lihat contoh lengkap dalam dokumen folder.
Ada juga contoh cara menggunakan drawflow di elemen khusus. (Berdasarkan litelement).
Lisensi MIT
