Drawflow
0.0.60
Biblioteca de fluxo simples.
O DrawFlow permite criar fluxos de dados com facilidade e rapidez.
Instalando apenas uma biblioteca JavaScript e com quatro linhas de código.
Demoção ao vivo
? Gerador de edição de temas
edit , fixed ou viewFaça o download ou o repositório de clone e copie a pasta Dist, opção CDN ou 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 drawflowPacote externo. Mais informações #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' )Crie o elemento pai do fluxo de drawflow .
< div id =" drawflow " > </ div >Iniciar o fluxo de drawflow.
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| Parâmetro | Tipo | Descrição |
|---|---|---|
id | Objeto | Nome do módulo |
render | Objeto | É para Vue . |
parent | Objeto | É para Vue . A instância pai |
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 ) ; Adicionar ao arquivo nuxt.config.js
build: {
transpile : [ 'drawflow' ] ,
...
} del key para remover elemento.Right click para mostrar as opções Remover (Mobile Long Press).Left click press para mover o editor ou o nó selecionado.Ctrl + Mouse Wheel Zoom dentro/OUT (pitada móvel). Você pode alterar o editor para o tipo fixo para bloquear. Somente editor pode ser movido. Você pode colocá -lo antes do início.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollVocê também pode ajustar os valores de zoom.
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| Parâmetro | Tipo | Padrão | Descrição |
|---|---|---|---|
reroute | Booleano | falso | Redunda ativa |
reroute_fix_curvature | Booleano | falso | Corrija os pontos de adição |
curvature | Número | 0,5 | Curvatura |
reroute_curvature_start_end | Número | 0,5 | Curvature Reroute Primeiro ponto e Las Point |
reroute_curvature | Número | 0,5 | Curvatura redirecionar |
reroute_width | Número | 6 | Largura de Reroute |
line_path | Número | 5 | Largura da linha |
force_first_input | Booleano | falso | Forçar a primeira entrada para soltar a conexão no topo do nó |
editor_mode | Texto | edit | edit para editar, fixed para nós fixos, mas seus campos de entrada disponíveis, view apenas para visualização |
zoom | Número | 1 | Zoom padrão |
zoom_max | Número | 1.6 | Zoom padrão máx |
zoom_min | Número | 0,5 | Zoom padrão min |
zoom_value | Número | 0.1 | Atualização de valor de zoom padrão |
zoom_last_value | Número | 1 | Zoom padrão Último valor |
draggable_inputs | Booleano | verdadeiro | Arraste os nós nas entradas de clique |
useuuid | Booleano | falso | Use UUID como ID do nó em vez do índice inteiro. Afetam apenas nós recém -criados, não afetam nós importados |
Conexões de redirecionamento ativo. Use antes de start ou import .
editor . reroute = true ;Crie o ponto com a conexão de clique duas vezes na linha. Clique duas vezes no ponto para remover.
Separe seus fluxos em editores diferentes.
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; RemovedModule se estiver no mesmo módulo redireciona para o módulo Home
Adicionar um nó é simples.
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| Parâmetro | Tipo | Descrição |
|---|---|---|
name | texto | Nome do módulo |
inputs | número | Número de entradas DE |
outputs | número | Número de saídas DE |
pos_x | número | Posição no nó de início esquerdo |
pos_y | número | Posição no topo do nó inicial |
class | texto | Adicionado ClassName ao Node. Vários nomes de classe separados pelo espaço |
data | JSON | Dados foram passados para o nó |
html | texto | Html desenhado no nó ou name do nó do registro. |
typenode | Booleano e texto | Padrão false , true para objeto html, vue para vue |
Você pode usar o atributo df-* nas entradas, textarea ou selecionar para sincronizar com os dados do nó e contentável .
ATRIBUTS Multiples Os pais apóiam df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;É possível que os nós de registro para reutilização.
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 | Descrição |
|---|---|---|
name | texto | Nome do módulo registrado. |
html | texto | Html para desenhar ou vue componente. |
props | JSON | Apenas para vue . Adereços do componente. Not Required |
options | JSON | Apenas para vue . Opções de componente. Not Required |
Outras funções disponíveis.
| Mehtod | Descrição |
|---|---|
zoom_in() | Incremento zoom +0.1 |
zoom_out() | Diminuir zoom -0.1 |
getNodeFromId(id) | Obtenha informações do nó. Ex: ID: 5 |
getNodesFromName(name) | Retornar a matriz de nós ID. Ex: Nome: telegram |
removeNodeId(id) | Remova o nó. Ex ID: node-x |
updateNodeDataFromId | Atualizar elemento de dados. Ex: 5, { name: 'Drawflow' } |
addNodeInput(id) | Adicione entrada ao nó. Ex ID: 5 |
addNodeOutput(id) | Adicione saída ao nó. Ex ID: 5 |
removeNodeInput(id, input_class) | Remova a entrada no nó. Ex id: 5 , input_2 |
removeNodeOutput(id, output_class) | Remova a saída para o nó. Ex id: 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | Adicione a conexão. Ex: 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | Remova a conexão. Ex: 15,16,'output_1','input_1' |
updateConnectionNodes(id) | Atualize as conexões Posição do Node Ex ID: node-x |
removeConnectionNodeId(id) | Remova as conexões do nó. Ex ID: node-x |
getModuleFromNodeId(id) | Obtenha o nome do módulo onde está o ID. Ex ID: 5 |
clearModuleSelected() | Dados claros do módulo selecionado |
clear() | Limpe todos os dados de todos os módulos e módulos removidos. |
editor . removeNodeId ( 'node-4' ) ; Você pode detectar eventos que estão acontecendo.
Lista de eventos disponíveis:
| Evento | Retornar | Descrição |
|---|---|---|
nodeCreated | eu ia | id do nó |
nodeRemoved | eu ia | id do nó |
nodeDataChanged | eu ia | id dos atributos do nó df-* alterados. |
nodeSelected | eu ia | id do nó |
nodeUnselected | verdadeiro | Nó não selecionado |
nodeMoved | eu ia | id do nó |
connectionStart | {output_id, output_class} | id de nós e saída selecionada |
connectionCancel | verdadeiro | Cancelar conexão |
connectionCreated | {output_id, input_id, output_class, input_class} | id de nós e saída/entrada selecionada |
connectionRemoved | {output_id, input_id, output_class, input_class} | id de nós e saída/entrada selecionada |
connectionSelected | {output_id, input_id, output_class, input_class} | id de nós e saída/entrada selecionada |
connectionUnselected | verdadeiro | Conexão não selecionada |
addReroute | eu ia | id da saída do nó |
removeReroute | eu ia | id da saída do nó |
rerouteMoved | eu ia | id da saída do nó |
moduleCreated | nome | name do módulo |
moduleChanged | nome | name do módulo |
moduleRemoved | nome | name do módulo |
click | evento | Clique em Evento |
clickEnd | evento | Depois que as alterações de cliques foram feitas |
contextmenu | evento | Clique em Segundo Button Mouse Event |
mouseMove | {x, y} | Posição |
mouseUp | evento | Evento de MouseUp |
keydown | evento | Evento KeyDown |
zoom | zoom_level | Nível de zoom |
translate | {x, y} | Editor de tradução de posição |
import | import | Termine a importação |
export | dados | Exportação de dados |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) Você pode exportar e importar seus dados.
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;Exemplo de dados 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
}
}
}
}
}
Veja o exemplo completo nos documentos da pasta.
Há também um exemplo de como usar o DrawFlow em um elemento personalizado. (com base no litelement).
MIT Licença
