blocks.js

blocks.js

Editor de gráficos de flujo de datos de JavaScript

Blocks.js es un editor visual de JavaScript para editar el gráfico de flujo de datos, se puede utilizar para editar gráficos de procesos.

Tenga en cuenta que este es solo un editor de front-end flexible, no hay back-end aquí.

Puedes probar una demostración en vivo.

Descripción general

Blocks.js se alimenta utilizando especificaciones de bloques, utilizando meta informaciones que explican sus campos, nombre y comportamiento.

Permite al usuario editar la escena de bloques.

Luego, gracias por ejemplo al método export() , puede recuperar la escena editada. Cuando carga los bloques, también puede cargar una escena.

Usando blocks.js

Descarga

Si desea usarlo, tendrá que obtener el código, ya sea clonando este repositorio o descargándolo.

Requisitos

blocks.js usa:

• jQuery
• jQuery-json para exportación JSON
• jQuery-mousewheel para desplazamiento del zoom
• jQuery-SVG para representación de bordes
• jQuery-formSerialize para la serialización y deserialización de las formas
• jQuery-Fancybox para la edición de parámetros modales

Todos estos requisitos están incluidos en este repositorio. Es por eso que las bibliotecas de terceros se verán así:

 <!-- 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 " />

Luego, tendrá que cargar blocks.js y blocks.css :

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

Ejecutándolo

Aquí hay un ejemplo simple:

 // 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" ) ;

Eche un vistazo a simple.html .

Bloques

Los bloques son un objeto que contiene:

• name : El nombre del bloque
• family : la familia de bloques, esto se usará para ponerlo en la subsección del menú de bloques correctos
• module : el módulo de bloque, actúe como un espacio de nombres y evite las colisiones de nombres
• description : Una descripción de lo que hace el bloque para ayudar al usuario
• size : el tamaño del bloque, puede ser ̀ small , normal o un cierto número de píxeles
• class : Clases CSS adicionales que se agregarán al bloque
• fields : una lista de matriz de los campos de bloques, ver a continuación

Campos

Un campo puede ser una entrada, salida y/o un parámetro editable del bloque. Es un objeto que contiene:

• name : El nombre del campo no debe contener caracteres especiales
• label : La etiqueta del campo, que se imprimirá en el título de bloques, puede contener caracteres especiales
• attrs : un campo de contenido de cadena atributos, puede contener input , output y/o editable . Por ejemplo: "editable input"
• type : el tipo de campo. Ver tipificación.
• defaultValue : el valor predeterminado del campo, que se usará si es editable
• hide : no muestre el campo editable en la información del bloque
• hideLabel : no muestre la etiqueta de campo editable en la información del bloque
• card : la cardinalidad de la entrada/salida. Esto puede ser una cadena como "0-3" o y una matriz como [0,3] , representa los bordes mínimo y máximo que se pueden conectar a la E/S.
• dimension : el número de conexión en el mismo campo puede depender de otro valor de campo, tamaño o ser fijado a un número estático. Ver Variadic I/OS

No dude en echar un vistazo a la demostración del repositorio, en el directorio `demostración/̀.

Escena

La escena es un objeto fácil de ser que contiene:

• blocks : la escena bloquea
• edges : la escena bordes

Bloques de escena

Todo el bloque de escena está representado con:

• id : su identificación numérica
• x e y , la posición del bloque en la escena
• type : el nombre del tipo de bloque
• module : el tipo de bloque de bloque Nombre del módulo
• values : una matriz que contiene los valores de todos sus campos editables

Bordes de la escena

Una ventaja de escena está representada con:

• id : su identificación numérica
• block1 : La ID del bloque donde comienza el borde
• connector1 : el conector del bloque donde comienza el borde
• block2 : La ID del bloque donde termina el borde
• connector2 : el conector del bloque donde termina el borde

Conectores de escena

Un conector es una matriz que contiene 2 o 3 elementos:

• Una cadena, input o output , explicando si el conector está saliendo del bloque o entrando en él
• El nombre del campo de bloque, en minúsculas
• Opcionalmente, el índice para campos variádicos

Mecanografía

Cada campo se puede escribir. Los tipos básicos ( string , choice , longtext , bool , int ) se representan como entradas de formulario, todos los demás tipos desconocidos se representan como una simple entrada de texto. (Nota: para el tipo choice , puede definir opciones agregando una entrada choices ̀ en el campo de bloque).

Si el tipo termina con [] , se considera una matriz, los botones Agregar y Retirar se agregarán al editar.

Por defecto, los diferentes tipos no son compatibles y, por lo tanto, no se pueden vincular juntos. Sin embargo, puede decirle a Blocks.js que algunos tipos son compatibles 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' ) ; 

Variadic I/OS

Algunos E/S pueden ser variádicos, piense en un bloque que generaría los n primeros usuarios de una base de datos, podría definirlo de esta manera:

 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"
        }
    ]
} ) ;

Aquí, el número de usuarios producidos será editable, utilizando el campo n editable. Tenga en cuenta que el # será reemplazado por el número de la salida.

Ejemplo

Aquí hay un ejemplo que usa blocks.js:

• Arduiflow, Arduino Programación con blocks.js

Contribuyendo y pirateando

El desarrollo toma lugar en el directorio src/ . Hay un Makefile usando la línea de comandos uglifyjs para crear la compilación.

Puede usar index-dev.html para probar blocks.js usando sus fuentes y index.html para probarlo en modo de compilación.

La build/ directorio de este repositorio no se actualizará en cada confirmación, sino que debe contener una instantánea reciente del repositorio.

Licencia

Blocks.js está bajo licencia MIT. Eche un vistazo al archivo de licencia para obtener más información.