Drawflow
0.0.60
Einfache Flussbibliothek.
Mit Drawflow können Sie Datenflüsse einfach und schnell erstellen.
Installation nur einer JavaScript -Bibliothek und mit vier Codezeilen.
Live -Demo
? Themenbearbeitungsgenerator
edit , fixed oder viewLaden Sie das Repository herunter oder klonen und kopieren Sie den DIST -Ordner, die CDN -Option oder 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 drawflowExternes Paket. Weitere info #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' )Erstellen Sie das übergeordnete Element von Drawflow .
< div id =" drawflow " > </ div >Start Drawflow.
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| Parameter | Typ | Beschreibung |
|---|---|---|
id | Objekt | Name des Moduls |
render | Objekt | Es ist für Vue . |
parent | Objekt | Es ist für Vue . Die Elterninstanz |
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 ) ; Hinzufügen zur Datei nuxt.config.js
build: {
transpile : [ 'drawflow' ] ,
...
} del key zum Entfernen von Elementen.Right click um Optionen zu entfernen (Mobile Long Press).Left click press um den Editor oder den ausgewählten Knoten zu verschieben.Ctrl + Mouse Wheel in/out (mobile Prise). Sie können den Editor in festen Typ in Block ändern. Nur Herausgeber können bewegt werden. Sie können es vor dem Start setzen.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollSie können auch die Zoomwerte einstellen.
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
reroute | Boolean | FALSCH | Aktive Auswahl |
reroute_fix_curvature | Boolean | FALSCH | Fix Hinzufügen von Punkten |
curvature | Nummer | 0,5 | Krümmung |
reroute_curvature_start_end | Nummer | 0,5 | Krümmungsumleitung erster Punkt und Las Point |
reroute_curvature | Nummer | 0,5 | Krümmungsumleitung |
reroute_width | Nummer | 6 | Breite des Umfelds |
line_path | Nummer | 5 | Breite der Linie |
force_first_input | Boolean | FALSCH | Erzwingen Sie den ersten Eingang, um die Verbindung über den Knoten zu fallen |
editor_mode | Text | edit | edit für Bearbeiten, fixed für feste Knoten, aber deren Eingabefelder verfügbar, nur für die Ansicht für Ansicht view |
zoom | Nummer | 1 | Standardzoom |
zoom_max | Nummer | 1.6 | Standard Zoom max |
zoom_min | Nummer | 0,5 | Standardzoom min |
zoom_value | Nummer | 0,1 | Standard -Zoomwert -Aktualisierung |
zoom_last_value | Nummer | 1 | Standard -Zoom letzter Wert |
draggable_inputs | Boolean | WAHR | Ziehen Sie die Knoten auf die Eingänge Klicken Sie auf Eingänge |
useuuid | Boolean | FALSCH | Verwenden Sie UUID als Knoten -ID anstelle eines Integer -Index. Beeinflussen nur neu erstellte Knoten, betreffen keine importierten Knoten nicht |
Aktive Umbauverbindungen. Verwenden Sie vor start oder import .
editor . reroute = true ;Erstellen Sie Punkt mit Doppelklick auf Zeilenverbindung. Doppelklicken Sie auf den Punkt zum Entfernen.
Trennen Sie Ihre Flows in verschiedenen Redakteuren.
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; RemovedModule , wenn es sich in demselben Modul befindet, leitet zum Home um
Das Hinzufügen eines Knotens ist einfach.
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| Parameter | Typ | Beschreibung |
|---|---|---|
name | Text | Name des Moduls |
inputs | Nummer | Anzahl der DE -Eingänge |
outputs | Nummer | Anzahl der DE -Ausgänge |
pos_x | Nummer | Position am Startknoten links |
pos_y | Nummer | Position auf dem Startknotenoberteil |
class | Text | DE NODE Klassenname hinzugefügt. Mehrere Klassennamen durch den Raum getrennt |
data | JSON | Daten, die an den Knoten übergeben wurden |
html | Text | HTML auf Knoten oder name des Registersknotens gezeichnet. |
typenode | boolean & Text | Standard false , true für Objekt HTML, vue für VUE |
Sie können das Attribut df-* in Eingaben, TextArea oder auswählen, um mit den Knotendaten und inhaltlich zu synchronisieren.
Atrributs Multiply-Eltern unterstützen df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;Es sind mögliche Registerknoten für die Wiederverwendung.
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 | Typ | Beschreibung |
|---|---|---|
name | Text | Name des Moduls registriert. |
html | Text | Html zu gezogen oder vue -Komponente. |
props | JSON | Nur für vue . Requisiten der Komponenten. Not Required |
options | JSON | Nur für vue . Komponentenoptionen. Not Required |
Andere verfügbare Funktionen.
| Mehtod | Beschreibung |
|---|---|
zoom_in() | Inkrement Zoom +0.1 |
zoom_out() | Decrement Zoom -0.1 |
getNodeFromId(id) | Holen Sie sich Info of Node. Beispiel: ID: 5 |
getNodesFromName(name) | Return Array von Knoten -ID. Beispiel: Name: telegram |
removeNodeId(id) | Knoten entfernen. EX ID: node-x |
updateNodeDataFromId | Datenelement aktualisieren. Ex: 5, { name: 'Drawflow' } |
addNodeInput(id) | Eingabe zum Knoten hinzufügen. EX ID: 5 |
addNodeOutput(id) | Ausgang zum Knoten hinzufügen. EX ID: 5 |
removeNodeInput(id, input_class) | Eingabe in den Knoten entfernen. EX ID: 5 , input_2 |
removeNodeOutput(id, output_class) | Ausgang zum Knoten entfernen. EX ID: 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | Verbindung hinzufügen. Ex: 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | Verbindung entfernen. Ex: 15,16,'output_1','input_1' |
updateConnectionNodes(id) | Aktualisieren Sie die Verbindungsposition von Knoten Ex ID: node-x |
removeConnectionNodeId(id) | Entfernen Sie Knotenverbindungen. EX ID: node-x |
getModuleFromNodeId(id) | Holen Sie sich den Namen des Moduls Wo ist die ID. EX ID: 5 |
clearModuleSelected() | Löschen Sie die ausgewählten Moduldaten |
clear() | Löschen Sie alle Daten aller Module und Module entfernen. |
editor . removeNodeId ( 'node-4' ) ; Sie können Ereignisse erkennen, die stattfinden.
Liste der verfügbaren Ereignisse:
| Ereignis | Zurückkehren | Beschreibung |
|---|---|---|
nodeCreated | Ausweis | id des Knotens |
nodeRemoved | Ausweis | id des Knotens |
nodeDataChanged | Ausweis | id des Knotens DF-* Attribute geändert. |
nodeSelected | Ausweis | id des Knotens |
nodeUnselected | WAHR | Nicht ausgewählter Knoten |
nodeMoved | Ausweis | id des Knotens |
connectionStart | {output_id, output_class} | id von Knoten und Ausgabe ausgewählt |
connectionCancel | WAHR | Verbindungsabbrechen |
connectionCreated | {output_id, input_id, output_class, input_class} | id von Knoten und Ausgabe/Eingang ausgewählt |
connectionRemoved | {output_id, input_id, output_class, input_class} | id von Knoten und Ausgabe/Eingang ausgewählt |
connectionSelected | {output_id, input_id, output_class, input_class} | id von Knoten und Ausgabe/Eingang ausgewählt |
connectionUnselected | WAHR | Abdeckung der Verbindung |
addReroute | Ausweis | id des Knotenausgangs |
removeReroute | Ausweis | id des Knotenausgangs |
rerouteMoved | Ausweis | id des Knotenausgangs |
moduleCreated | Name | name des Moduls |
moduleChanged | Name | name des Moduls |
moduleRemoved | Name | name des Moduls |
click | Ereignis | Klicken Sie auf Ereignis |
clickEnd | Ereignis | Sobald die Klickänderungen vorgenommen wurden |
contextmenu | Ereignis | Klicken Sie auf die zweite Schaltfläche Mausereignis |
mouseMove | {x, y} | Position |
mouseUp | Ereignis | Mausup -Event |
keydown | Ereignis | Schlüsseldown -Ereignis |
zoom | Zoom_level | Zoomebene |
translate | {x, y} | POSITION VERSURDE EDITOR |
import | import | Import beenden |
export | Daten | Datenexport |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) Sie können Ihre Daten exportieren und importieren.
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;Beispiel für exportierte Daten:
{
"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
}
}
}
}
}
Zeigen Sie das vollständige Beispiel in Ordner Dokumenten an.
Es gibt auch ein Beispiel, wie Sie Drawflow in einem benutzerdefinierten Element verwenden. (basierend auf Litelement).
MIT -Lizenz
