Drawflow
0.0.60
Biblioteca de flujo simple.
Drawflow le permite crear flujos de datos fácil y rápidamente.
Instalación solo de una biblioteca JavaScript y con cuatro líneas de código.
Demostración en vivo
? Generador de edición de temas
edit , fixed o viewDescargue o clone Repositorio y copie la carpeta DIST, la opción CDN o 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 drawflowPaquete externo. Más información #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' )Crea el elemento principal de Drawflow .
< div id =" drawflow " > </ div >Empiece a Drawflow.
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| Parámetro | Tipo | Descripción |
|---|---|---|
id | Objeto | Nombre del módulo |
render | Objeto | Es para Vue . |
parent | Objeto | Es para Vue . La instancia principal |
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 ) ; Agregar al archivo nuxt.config.js
build: {
transpile : [ 'drawflow' ] ,
...
} del key para eliminar el elemento.Right click para mostrar Opciones de eliminación (Press Long Mobile).Left click press para mover el editor o el nodo seleccionado.Ctrl + Mouse Wheel se acerca/out (pizca móvil). Puede cambiar el editor al tipo fijo para bloquear. Solo se puede mover el editor. Puedes ponerlo antes de comenzar.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollTambién puede ajustar los valores de zoom.
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| Parámetro | Tipo | Por defecto | Descripción |
|---|---|---|---|
reroute | Booleano | FALSO | Reloute activo |
reroute_fix_curvature | Booleano | FALSO | Arreglar puntos agregando |
curvature | Número | 0.5 | Curvatura |
reroute_curvature_start_end | Número | 0.5 | Curvatura redire el primer punto y el punto |
reroute_curvature | Número | 0.5 | Reloute de curvatura |
reroute_width | Número | 6 | Ancho de Reloute |
line_path | Número | 5 | Ancho de línea |
force_first_input | Booleano | FALSO | Forzar la primera entrada para soltar la conexión en la parte superior del nodo |
editor_mode | Texto | edit | edit para editar, fixed para nodos fijados pero sus campos de entrada disponibles, view solo para ver |
zoom | Número | 1 | Zoom predeterminado |
zoom_max | Número | 1.6 | Zoom de zoom predeterminado |
zoom_min | Número | 0.5 | Zoom mínimo predeterminado |
zoom_value | Número | 0.1 | Actualización de valor de zoom predeterminada |
zoom_last_value | Número | 1 | Zoom predeterminado último valor |
draggable_inputs | Booleano | verdadero | Arrastre los nodos en las entradas de clics |
useuuid | Booleano | FALSO | Use UUID como ID de nodo en lugar del índice entero. Solo afectan los nodos recién creados, no afecte los nodos importados |
Conexiones activas de red. Use antes de start o import .
editor . reroute = true ;Crear punto con doble clic en la conexión de línea. Haga doble clic en el punto para eliminar.
Separe sus flujos en diferentes editores.
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; RemovedModule si está en el mismo módulo se redirige al módulo Home
Agregar un nodo es simple.
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| Parámetro | Tipo | Descripción |
|---|---|---|
name | texto | Nombre del módulo |
inputs | número | Número de entradas DE |
outputs | número | Número de salidas de DE |
pos_x | número | Posición en el nodo de inicio a la izquierda |
pos_y | número | Posición en la parte superior del nodo de inicio |
class | texto | Se agregó ClassName a De Node. Múltiples nombres de clase separados por espacio |
data | json | Datos pasados al nodo |
html | texto | Html dibujado en el nodo o name del nodo de registro. |
typenode | booleano y texto | Predeterminado false , true para objeto html, vue para vue |
Puede usar el atributo df-* en entradas, textAREA o seleccionar para sincronizar con los datos del nodo y contento .
Atrributs Multiples Padres Support df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;Es posible registrar nodos para la reutilización.
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' ) ;| Parámetro | Tipo | Descripción |
|---|---|---|
name | texto | Nombre del módulo registrado. |
html | texto | Html al componente dibujado o vue . |
props | json | Solo para vue . Accesorios de componente. Not Required |
options | json | Solo para vue . Opciones de componente. Not Required |
Otras funciones disponibles.
| Mehtod | Descripción |
|---|---|
zoom_in() | Zoom de incremento +0.1 |
zoom_out() | Disminución de zoom -0.1 |
getNodeFromId(id) | Obtener información de nodo. Ej: ID: 5 |
getNodesFromName(name) | Revolver la matriz de nodos ID. Ej: Nombre: telegram |
removeNodeId(id) | Eliminar el nodo. EX ID: node-x |
updateNodeDataFromId | Actualizar el elemento de datos. Ej: 5, { name: 'Drawflow' } |
addNodeInput(id) | Agregue la entrada al nodo. Ex id: 5 |
addNodeOutput(id) | Agregue la salida al nodo. Ex id: 5 |
removeNodeInput(id, input_class) | Eliminar la entrada al nodo. EX ID: 5 , input_2 |
removeNodeOutput(id, output_class) | Eliminar la salida al nodo. EX ID: 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | Agregar conexión. Ej: 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | Eliminar la conexión. Ej: 15,16,'output_1','input_1' |
updateConnectionNodes(id) | Actualizar la posición de las conexiones desde el nodo ex id: node-x |
removeConnectionNodeId(id) | Eliminar las conexiones de nodo. EX ID: node-x |
getModuleFromNodeId(id) | Obtenga el nombre del módulo donde está la identificación. Ex id: 5 |
clearModuleSelected() | Borrar datos del módulo seleccionado |
clear() | Borre todos los datos de todos los módulos y módulos eliminados. |
editor . removeNodeId ( 'node-4' ) ; Puedes detectar eventos que están sucediendo.
Lista de eventos disponibles:
| Evento | Devolver | Descripción |
|---|---|---|
nodeCreated | identificación | id del nodo |
nodeRemoved | identificación | id del nodo |
nodeDataChanged | identificación | id del nodo DF-* Los atributos cambiados. |
nodeSelected | identificación | id del nodo |
nodeUnselected | verdadero | No seleccionar nodo |
nodeMoved | identificación | id del nodo |
connectionStart | {output_id, output_class} | id de nodos y salida seleccionados |
connectionCancel | verdadero | Conexión cancelar |
connectionCreated | {output_id, input_id, output_class, input_class} | id de nodos y salida/entrada seleccionada |
connectionRemoved | {output_id, input_id, output_class, input_class} | id de nodos y salida/entrada seleccionada |
connectionSelected | {output_id, input_id, output_class, input_class} | id de nodos y salida/entrada seleccionada |
connectionUnselected | verdadero | Desconectar la conexión |
addReroute | identificación | id de salida de nodo |
removeReroute | identificación | id de salida de nodo |
rerouteMoved | identificación | id de salida de nodo |
moduleCreated | nombre | name del módulo |
moduleChanged | nombre | name del módulo |
moduleRemoved | nombre | name del módulo |
click | evento | Haga clic en el evento |
clickEnd | evento | Una vez que se han realizado los cambios de clics |
contextmenu | evento | Haga clic en el evento del mouse del segundo botón |
mouseMove | {x, y} | Posición |
mouseUp | evento | Evento de ratón |
keydown | evento | Evento de llave |
zoom | zoom_level | Nivel de zoom |
translate | {x, y} | Editor de traducción de posición |
import | import | IMPORTACIÓN DE TINACIÓN |
export | datos | Exportación de datos |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) Puede exportar e importar sus datos.
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;Ejemplo de datos exportados:
{
"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
}
}
}
}
}
Vea el ejemplo completo en los documentos de carpeta.
También hay un ejemplo de cómo usar Drawflow en un elemento personalizado. (Basado en litelamento).
Licencia de MIT
