blocks.js

Blocks.js

Éditeur de graphes de dataflow JavaScript

Blocks.js est un éditeur visuel JavaScript pour modifier le graphique DataFlow, il peut être utilisé pour modifier les graphiques de processus.

Notez qu'il s'agit juste d'un éditeur frontal flexible, il n'y a pas de back-end ici.

Vous pouvez essayer une démo en direct.

Aperçu

Blocks.js est alimenté en utilisant des spécifications de blocs, en utilisant des informations de méta expliquant ses champs, son nom et son comportement.

Il permet à l'utilisateur de modifier la scène des blocs.

Ensuite, merci par exemple à la méthode export() , vous pouvez récupérer la scène éditée. Lorsque vous chargez les blocs, vous pouvez également recharger une scène.

Utilisation de blocs.js

Téléchargement

Si vous souhaitez l'utiliser, vous devrez récupérer le code, soit en clonant ce référentiel, soit en le téléchargeant.

Exigences

Blocks.js utilise:

• jquery
• jQuery-json pour l'exportation json
• JQUERY-MOUSEWEEL pour le zoom de défilement
• jQuery-svg pour le rendu des bords
• jQuery-formserialize pour les formulaires sérialisation et désérialisation
• JQUERY-FANCHBOX FOR MODAL Paramètres Edition

Toutes ces exigences sont incluses dans ce référentiel. C'est pourquoi les bibliothèques tierces ressembleront à ceci:

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

Ensuite, vous devrez charger blocks.js et blocks.css :

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

Le faire fonctionner

Voici un exemple 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" ) ;

Jetez un œil à simple.html .

Blocs

Les blocs sont un objet contenant:

• name : le nom du bloc
• family : La famille Block, cela sera utilisé pour le mettre dans la sous-section du menu des blocs du droit
• module : le module de bloc, agissez comme un espace de noms et évitez les collisions de noms
• description : une description de ce que fait le bloc, pour aider l'utilisateur
• size : la taille du bloc peut être ̀ ̀ small ̀ ̀ ̀ ̀ ̀ ̀ ̀ ̀ gerper, normal ou un certain nombre de pixels
• class : Classes CSS supplémentaires qui seront ajoutées au bloc
• fields : une liste de tableaux des champs de blocs, voir ci-dessous

Champs

Un champ peut être une entrée, une sortie et / ou un paramètre modifiable du bloc. C'est un objet contenant:

• name : le nom du champ, ne doit pas contenir de caractères spéciaux
• label : l'étiquette du champ, qui sera imprimée dans le titre des blocs, peut contenir des caractères spéciaux
• attrs : une chaîne contribue aux attributs de champ, peut contenir input , output et / ou editable . Par exemple: "editable input"
• type : le type de champ. Voir tapage.
• defaultValue : la valeur par défaut du champ, qui sera utilisée si elle est modifiable
• hide : N'affichez pas le champ modifiable dans les informations sur le bloc
• hideLabel : N'affichez pas l'étiquette de champ modifiable dans les informations du bloc
• card : la cardinalité de l'entrée / sortie. Il peut s'agir d'une chaîne comme "0-3" ou et un tableau comme [0,3] , il représente le minimum et les bords maximaux qui peuvent être connectés aux E / S.
• dimension : le nombre de connexions sur le même champ peut dépendre d'une autre valeur de champ, taille ou être fixé à un nombre statique. Voir Variadic I / OS

N'hésitez pas à jeter un œil à la démo du référentiel, dans le répertoire de démo / ̀.

Scène

La scène est un objet facile à manifester:

• blocks : la scène bloque
• edges : les bords de la scène

Blocs de scène

Tout le bloc de scène est représenté avec:

• id : son identifiant numérique
• x et y , la position du bloc dans la scène
• type : le nom de type de bloc
• module : le nom du module de type bloc
• values : un tableau contenant les valeurs de tous ses champs modifiables

Bords de scène

Un bord de scène est représenté avec:

• id : son identifiant numérique
• block1 : L'ID du bloc où le bord commence
• connector1 : le connecteur du bloc où le bord commence
• block2 : L'ID du bloc où se termine le bord
• connector2 : le connecteur du bloc où se termine le bord

Connecteurs de scène

Un connecteur est un tableau contenant 2 ou 3 éléments:

• Une chaîne, input ou output , expliquant si le connecteur est sortant du bloc ou y entrer
• Le nom du champ de blocs, en minuscules
• Éventuellement, l'index des champs variadiques

Dactylographie

Chaque champ peut être dactylographié. Les types de base ( string , choice , longtext , bool , int ) sont rendus en entrées de formulaire, tous les autres types inconnus sont rendus comme une entrée de texte simple. (Remarque: pour le type choice , vous pouvez définir des choix en ajoutant une entrée choices ̀ dans le champ de bloc).

Si le type se termine par [] , il est considéré comme un tableau, les boutons Ajouter et supprimer seront ajoutés lors de l'édition.

Par défaut, les différents types ne sont pas des compatibles et ne peuvent donc pas être liés ensemble. Vous pouvez cependant dire aux blocs.js que certains types sont compatibles en utilisant:

 // 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 variadiques

Certaines E / OS peuvent être variadiques, pensez à un bloc qui sortirait les n premier utilisateurs d'une base de données, vous pouvez le définir de cette façon:

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

Ici, le nombre d'utilisateurs sortis sera modifiable, en utilisant le champ n modifiable. Notez que le # sera remplacé par le nombre de sorties.

Exemple

Voici un exemple qui utilise des blocs.js:

• Arduiflow, programmation Arduino avec blocs.js

Contribution et piratage

Le développement est dans le src/ Directory. Il y a un Makefile utilisant la ligne de commande uglifyjs pour créer la construction.

Vous pouvez utiliser index-dev.html pour tester les blocs.js à l'aide de ses sources, et index.html pour l'essayer en mode build.

La build/ répertoire de ce référentiel ne sera pas mise à jour sur chaque engagement, mais doit contenir un instantané récent du référentiel.

Licence

Blocks.js est sous licence MIT. Jetez un œil au fichier de licence pour plus d'informations.