Drawflow
0.0.60
Bibliothèque de flux simple.
Drawflow vous permet de créer des flux de données facilement et rapidement.
Installation uniquement d'une bibliothèque JavaScript et avec quatre lignes de code.
Démo en direct
? Générateur d'édition de thème
edit , fixed ou viewTéléchargez ou clone le référentiel et copiez le dossier DIST, l'option CDN ou le 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 drawflowPackage externe. Plus d'informations # 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' )Créez l'élément parent de Drawflow .
< div id =" drawflow " > </ div >Démarrer Drawflow.
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| Paramètre | Taper | Description |
|---|---|---|
id | Objet | Nom du module |
render | Objet | C'est pour Vue . |
parent | Objet | C'est pour Vue . L'instance parentale |
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 ) ; Ajouter au fichier nuxt.config.js
build: {
transpile : [ 'drawflow' ] ,
...
} del key pour supprimer l'élément.Right click pour afficher les options de suppression (Mobile Long Press).Left click press pour déplacer l'éditeur ou le nœud sélectionné.Ctrl + Mouse Wheel zoomez / out (pincement mobile). Vous pouvez modifier l'éditeur en type fixe en bloc. Seul l'éditeur peut être déplacé. Vous pouvez le mettre avant de commencer.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollVous pouvez également ajuster les valeurs de zoom.
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| Paramètre | Taper | Défaut | Description |
|---|---|---|---|
reroute | Booléen | FAUX | Rediffusion active |
reroute_fix_curvature | Booléen | FAUX | Correction d'ajout de points |
curvature | Nombre | 0,5 | Courbure |
reroute_curvature_start_end | Nombre | 0,5 | Curvature Relioute First Point et Las Point |
reroute_curvature | Nombre | 0,5 | Rediffusion de courbure |
reroute_width | Nombre | 6 | Largeur de rediffusion |
line_path | Nombre | 5 | Largeur de ligne |
force_first_input | Booléen | FAUX | Forcer la première entrée à supprimer la connexion en haut du nœud |
editor_mode | Texte | edit | edit pour modifier, fixed pour les nœuds fixés mais leurs champs d'entrée disponibles, view la vue uniquement |
zoom | Nombre | 1 | Zoom par défaut |
zoom_max | Nombre | 1.6 | Zoom par défaut Max |
zoom_min | Nombre | 0,5 | Zoom par défaut Min |
zoom_value | Nombre | 0.1 | Mise à jour de la valeur de zoom par défaut |
zoom_last_value | Nombre | 1 | Valeur du zoom par défaut |
draggable_inputs | Booléen | vrai | Faites glisser les nœuds sur les entrées de clics |
useuuid | Booléen | FAUX | Utilisez UUID comme ID de nœud au lieu de l'index entier. Affecter uniquement les nœuds nouvellement créés, n'affecte pas les nœuds importés |
Connexions de rediffusion actives. Utiliser avant start ou import .
editor . reroute = true ;Créer un point avec la connexion à double clic sur la ligne. Double-cliquez sur le point pour supprimer.
Séparez vos flux dans différents éditeurs.
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; RemovedModule s'il est dans le même module redirige vers le module Home
L'ajout d'un nœud est simple.
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| Paramètre | Taper | Description |
|---|---|---|
name | texte | Nom du module |
inputs | nombre | Nombre d'entrées De |
outputs | nombre | Nombre de sorties |
pos_x | nombre | Position sur le nœud de démarrage à gauche |
pos_y | nombre | Position en haut du nœud de démarrage |
class | texte | Ajout de ClassName à De Node. Plusieurs noms de classe séparés par l'espace |
data | json | Données transmises au nœud |
html | texte | Html dessiné sur le nœud ou name du nœud de registre. |
typenode | booléen et texte | Par défaut false , true pour objet html, vue pour vue |
Vous pouvez utiliser l'attribut df-* dans les entrées, TextArea ou sélectionner pour se synchroniser avec les données de nœud et satisfaits .
ATRRRIBLES Multiples Parents Soutiennent df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;Il est possible des nœuds de registre de réutilisation.
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' ) ;| Paramètre | Taper | Description |
|---|---|---|
name | texte | Nom du module enregistré. |
html | texte | HTML TO TRAPING OU vue COMPANANT. |
props | json | Seulement pour vue . Accessoires de composant. Not Required |
options | json | Seulement pour vue . Options de composant. Not Required |
Autres fonctions disponibles.
| Mehtod | Description |
|---|---|
zoom_in() | Incrément Zoom +0.1 |
zoom_out() | Zoom décréré -0,1 |
getNodeFromId(id) | Obtenez des informations de nœud. Ex: ID: 5 |
getNodesFromName(name) | Renvoie un tableau de nœuds ID. Ex: nom: telegram |
removeNodeId(id) | Supprimer le nœud. Ex ID: node-x |
updateNodeDataFromId | Mettre à jour l'élément de données. Ex: 5, { name: 'Drawflow' } |
addNodeInput(id) | Ajoutez une entrée au nœud. Ex ID: 5 |
addNodeOutput(id) | Ajoutez une sortie au nœud. Ex ID: 5 |
removeNodeInput(id, input_class) | Retirez l'entrée au nœud. EX ID: 5 , input_2 |
removeNodeOutput(id, output_class) | Retirez la sortie en nœud. EX ID: 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | Ajouter une connexion. Ex: 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | Supprimer la connexion. Ex: 15,16,'output_1','input_1' |
updateConnectionNodes(id) | Mettre à jour la position des connexions à partir du nœud Ex ID: node-x |
removeConnectionNodeId(id) | Retirez les connexions du nœud. Ex ID: node-x |
getModuleFromNodeId(id) | Obtenez le nom du module où est l'ID. Ex ID: 5 |
clearModuleSelected() | Effacer les données du module sélectionné |
clear() | Effacer toutes les données de tous les modules et modules supprimez. |
editor . removeNodeId ( 'node-4' ) ; Vous pouvez détecter des événements qui se produisent.
Liste des événements disponibles:
| Événement | Retour | Description |
|---|---|---|
nodeCreated | identifiant | id de nœud |
nodeRemoved | identifiant | id de nœud |
nodeDataChanged | identifiant | id des attributs de nœud DF- * modifiés. |
nodeSelected | identifiant | id de nœud |
nodeUnselected | vrai | Nœud non sélectionné |
nodeMoved | identifiant | id de nœud |
connectionStart | {output_id, output_class} | id des nœuds et sortie sélectionnés |
connectionCancel | vrai | Annuler la connexion |
connectionCreated | {output_id, input_id, output_class, input_class} | id des nœuds et sortie / entrée sélectionnés |
connectionRemoved | {output_id, input_id, output_class, input_class} | id des nœuds et sortie / entrée sélectionnés |
connectionSelected | {output_id, input_id, output_class, input_class} | id des nœuds et sortie / entrée sélectionnés |
connectionUnselected | vrai | Connexion non sélectionnée |
addReroute | identifiant | id de sortie de nœud |
removeReroute | identifiant | id de sortie de nœud |
rerouteMoved | identifiant | id de sortie de nœud |
moduleCreated | nom | name du module |
moduleChanged | nom | name du module |
moduleRemoved | nom | name du module |
click | événement | Cliquez sur l'événement |
clickEnd | événement | Une fois les modifications de clic effectuées |
contextmenu | événement | Cliquez sur l'événement de la souris du deuxième bouton |
mouseMove | {x, y} | Position |
mouseUp | événement | Événement de souris |
keydown | événement | Événement de clé |
zoom | zoom_level | Niveau de zoom |
translate | {x, y} | Position traduire l'éditeur |
import | import | Terminer l'importation |
export | données | Exportation de données |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) Vous pouvez exporter et importer vos données.
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;Exemple de données exportées:
{
"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
}
}
}
}
}
Affichez l'exemple complet dans les documents de dossier.
Il existe également un exemple comment utiliser Drawflow dans un élément personnalisé. (basé sur le litre).
Licence MIT
