blocks.js

blocks.js

Javascript Dataflow Graph Editor

Blocks.js é um editor visual do JavaScript para editar o Gráfico de DataFlow, ele pode ser usado para editar gráficos de processos.

Observe que este é apenas um editor de front-end flexível, não há back-end aqui.

Você pode tentar uma demonstração ao vivo.

Visão geral

Blocks.js é alimentado usando as especificações dos blocos, usando meta informações explicando seus campos, nome e comportamento.

Ele permite que o usuário edite a cena dos blocos.

Então, obrigado, por exemplo, ao método export() , você pode recuperar a cena editada. Quando você carrega os blocos, você também pode carregar uma cena.

Usando blocks.js

Download

Se você quiser usá -lo, precisará buscar o código, clonando este repositório ou baixando -o.

Requisitos

Blocks.js usa:

• jQuery
• jQuery-json para exportação JSON
• JQuery-Mousewheel para rolagem de zoom
• jQuery-svg para bordas renderização
• jQuery-formserialize para formas serialização e deserialização
• edição de parâmetros modais

Todos esses requisitos estão incluídos neste repositório. É por isso que as bibliotecas de terceiros ficarão assim:

 <!-- Third party libraries -->
< script type =" text/javascript " src =" build/jquery.js " > </ script >
< script type =" text/javascript " src =" build/jquery.json.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.mousewheel.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.svg.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.formserialize.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.fancybox.min.js " > </ script > 
< link rel =" stylesheet " type =" text/css " href =" build/fancybox/jquery.fancybox.css " />

Então, você terá que carregar blocks.js e blocks.css :

 <!-- blocks.js -->
< script type =" text/javascript " src =" build/blocks.js " > </ script > 
< link rel =" stylesheet " type =" text/css " href =" build/blocks.css " />

Executando

Aqui está um exemplo simples:

 // Instanciate Blocks
var blocks = new Blocks ( ) ;

// Registering a simple block, with an input
// and an output
blocks . register ( {
    name : "Test" ,
    fields : [
        {
            name : "Input" ,
            attrs : "input"
        } ,
        {
            name : "Output" ,
            attrs : "output"
        }
    ]
} ) ;

// Running blocks on the div with the name "blocks"
blocks . run ( "#blocks" ) ;

Dê uma olhada no simple.html .

Blocos

Os blocos são um objeto que contém:

• name : o nome do bloco
• family : a família Block, isso será usado para colocá-lo na subseção do menu de blocos certos
• module : o módulo de bloco, age como um espaço para nome e evite colisões de nomes
• description : Uma descrição do que o bloco faz, para ajudar o usuário
• size : o tamanho do bloco, pode ser ̀ small , normal ou um certo número de pixels
• class : Additureals CSS Classes que serão adicionadas ao bloco
• fields : uma lista de matrizes dos campos de bloco, veja abaixo

Campos

Um campo pode ser uma entrada, saída e/ou um parâmetro editável do bloco. É um objeto que contém:

• name : o nome do campo, não deve conter chars especiais
• label : o rótulo do campo, que será impresso no título dos blocos, pode conter caracteres especiais
• attrs : uma string que contém atributos de campo, pode conter input , output e/ou editable . Por exemplo: "editable input"
• type : o tipo de campo. Veja digitando.
• defaultValue : o valor padrão do campo, que será usado se for editável
• hide : não exiba o campo editável nas informações do bloco
• hideLabel : Não exiba a etiqueta de campo editável nas informações do bloco
• card : a cardinalidade da entrada/saída. Isso pode ser uma string como "0-3" ou e matriz como [0,3] , representa o mínimo e as bordas máximas que podem ser conectadas à E/S.
• dimension : o número de conexão no mesmo campo pode depender de outro valor de campo, tamanho ou ser fixado em um número estático. Veja E/S. Variadic

Não hesite em dar uma olhada na demonstração do repositório, no diretório `demo/̀.

Cena

A cena é um objeto fácil de comparar:

• blocks : os bloqueios da cena
• edges : as bordas da cena

Bloqueios de cena

Todo o bloco de cenas está representado com:

• id : seu ID numérico
• x e y , a posição do bloco na cena
• type : o nome do tipo de bloco
• module : o nome do módulo de tipo de bloco
• values : uma matriz contendo os valores de todos os seus campos editáveis

Bordas da cena

Uma borda de cena é representada com:

• id : seu ID numérico
• block1 : o ID do bloco onde a borda começa
• connector1 : o conector do bloco onde a borda começa
• block2 : o ID do bloco onde a borda termina
• connector2 : o conector do bloco onde a borda termina

Conectores de cena

Um conector é uma matriz contendo 2 ou 3 elementos:

• Uma string, input ou output , explicando se o conector é extrovertido do bloco ou entrando nele
• O nome do campo do bloco, em minúsculas
• Opcionalmente, o índice para campos variádicos

Digitando

Cada campo pode ser digitado. Tipos básicos ( string , choice , longtext , bool , int ) são renderizados como entradas de formulário, todos os outros tipos desconhecidos são renderizados como uma entrada de texto simples. (Nota: para o tipo choice , você pode definir opções adicionando uma entrada choices no campo Block).

Se o tipo terminar com [] , ele for considerado uma matriz, os botões Adicionar e Remover serão adicionados ao editar.

Por padrão, os diferentes tipos não são compatíveis e, portanto, não podem ser vinculados. No entanto, você pode dizer aos blocos. JS que alguns tipos são compatíveis usando:

 // Tells blocks.js that string and number are compatible and can be linked
blocks . types . addCompatibility ( 'string' , 'number' ) ;

// Tells blocks.js that an image can be converted to a string, however, the
// string can't be converted to an image
blocks . types . addCompatibilityOneWay ( 'image' , 'string' ) ; 

E/OS Variadic

Alguns E/S. podem ser variádicos, pense em um bloco que produziria os N Primeiros usuários de um banco de dados, você pode defini -lo desta maneira:

 blocks . register ( {
    name : "TopUsers" ,
    description : "Outputs the n first users of the database" ,
    fields : [
        {
            name : "n" ,
            type : "int" ,
            hide : true ,
            defaultValue : 3 ,
            attrs : "editable"
        } ,
        {
	    name : "users" ,
            label : "User #" ,
            dimension : "n" ,
            attrs : "output"
        }
    ]
} ) ;

Aqui, o número de usuários de saída será editável, usando o campo n editável. Observe que o # será substituído pelo número da saída.

Exemplo

Aqui está um exemplo que usa blocos.js:

• Arduiflow, programação Arduino com blocks.js

Contribuindo e hackers

O desenvolvimento ocorre no src/ diretório. Existe um Makefile usando a linha de comando uglifyjs para criar a compilação.

Você pode usar index-dev.html para testar blocos.js usando suas fontes e index.html para experimentá-lo no modo de construção.

O build/ diretório deste repositório não será atualizado em todos os compromissos, mas deve conter um instantâneo recente do repositório.

Licença

Blocks.js está sob licença do MIT. Dê uma olhada no arquivo de licença para obter mais informações.