blocks.js
1.0.0
Blocks.js ist ein visueller JavaScript -Visual -Editor zum Bearbeiten von Datenflow -Diagramm. Es kann zum Bearbeiten von Prozessegrafs verwendet werden.
Beachten Sie, dass dies nur ein flexibler Front-End-Editor ist. Hier gibt es kein Back-End.
Sie können eine lebende Demo ausprobieren.
Blocks.js wird unter Verwendung von Blöckenspezifikationen unter Verwendung von Meta -Informationen, die die Felder, den Namen und das Verhalten erläutern.
Damit kann der Benutzer die Blöckenszene bearbeiten.
Dann danke zum Beispiel an die methode export() , Sie können die bearbeitete Szene zurückbekommen. Wenn Sie die Blöcke laden, können Sie auch eine Szene zurückladen.
Wenn Sie es verwenden möchten, müssen Sie den Code entweder durch Klonen dieses Repositorys oder durch das Herunterladen abrufen.
Blocks.js verwendet:
Alle diese Anforderungen sind in diesem Repository enthalten. Aus diesem Grund werden die Bibliotheken Dritter wie folgt aussehen:
<!-- 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 " /> Anschließend müssen Sie blocks.js laden. Js und blocks.css :
<!-- blocks.js -->
< script type =" text/javascript " src =" build/blocks.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" build/blocks.css " />Hier ist ein einfaches Beispiel:
// 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" ) ; Schauen Sie sich simple.html an.
Die Blöcke sind ein Objekt mit:
name : Der Name des Blocksfamily : Die Blockfamilie wird verwendet, um sie in den Unterabschnitt Right Blocks Menü zu setzenmodule : Das Blockmodul, verhalten Sie sich wie ein Namespace und vermeiden Sie Namenskollisionendescription : Eine Beschreibung des Blocks, um dem Benutzer zu helfensize : Die Größe des Blocks kann ̀ small , normal oder eine bestimmte Anzahl von Pixeln seinclass : Zusätzliche CSS -Klassen, die dem Block hinzugefügt werdenfields : Eine Array -Auflistung der Blockfelder, siehe untenEin Feld kann ein Eingangs-, Ausgangs- und/oder ein bearbeitbarer Parameter des Blocks sein. Es ist ein Objekt, das enthält:
name : Der Name des Feldes sollte keine speziellen Zeichen enthaltenlabel : Das Etikett des Feldes, das im Blocktitel gedruckt wird, kann Sonderzeichen enthaltenattrs : Eine String -Containg -Feldattribute kann input , output und/oder editable enthalten. Zum Beispiel: "editable input"type : Der Feldtyp. Siehe Tippen.defaultValue : Der Standardwert des Feldes, der verwendet wird, wenn es bearbeitet werden kannhide : Zeigen Sie das bearbeitbare Feld nicht in den Blockinformationen anhideLabel : Zeigen Sie das bearbeitbare Feldetikett in den Blockinformationen nicht ancard : Die Kardinalität der Eingabe/Ausgabe. Dies kann eine Zeichenfolge wie "0-3" oder ein Array wie [0,3] sein. Sie repräsentiert das Minimum und die maximalen Kanten, die mit der E/A verbunden werden können.dimension : Die Anzahl der Verbindung im selben Feld kann von einem anderen Feldwert, der Größe oder einer statischen Zahl behoben werden. Siehe Variadic I/O.Zögern Sie nicht, einen Blick auf die Repository -Demo im DEMO/̀ -Verzeichnis zu werfen.
Die Szene ist ein leicht zu parseres Objekt, das enthält:
blocks : Die Szenenblöckeedges : Die SzenenkantenDer gesamte Szenenblock wird dargestellt mit:
id : seine numerische IDx und y , die Position des Blocks in der Szenetype : den Namen des Blocktypsmodule : Der Name des Blocktypmodulsvalues : Ein Array, das die Werte aller seiner bearbeitbaren Felder enthältEine Szenenkante wird dargestellt mit:
id : seine numerische IDblock1 : Die ID des Blocks, in dem die Kante beginntconnector1 : Der Anschluss des Blocks, an dem die Kante beginntblock2 : Die ID des Blocks, in dem die Kante endetconnector2 : Der Stecker des Blocks, an dem die Kante endetEin Stecker ist ein Array mit 2 oder 3 Elementen:
input oder output , die erklärt Jedes Feld kann getippt werden. Grundtypen ( string , choice , longtext , bool , int ) werden als Formulareingänge gerendert, alle anderen unbekannten Typen werden als einfache Texteingabe gerendert. (Hinweis: Für den choice können Sie Auswahlmöglichkeiten definieren, die einen ̀ choices im Blockfeld hinzufügen).
Wenn der Typ mit [] endet, wird er als Array angesehen, die Tasten hinzufügen und entfernen werden beim Bearbeiten hinzugefügt.
Standardmäßig sind die verschiedenen Typen keine Vertreter und können daher nicht miteinander verknüpft werden. Sie können jedoch Blocks.js erkennen, dass einige Typen mit:
// 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' ) ; Einige I/A -OS können variadisch sein. Stellen Sie sich einen Block vor, der die ersten Benutzer einer Datenbank ausgeben würde. Sie können ihn so definieren:
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"
}
]
} ) ; Hier ist die Anzahl der ausgegebenen Benutzer unter Verwendung des Felds n festgelegt. Beachten Sie, dass die # durch die Anzahl der Ausgabe ersetzt wird.
Hier ist ein Beispiel, das Blocks.js verwendet:
Die Entwicklung findet im src/ Verzeichnis statt. Es gibt eine Makefile , die die Befehlszeile uglifyjs verwendet, um den Build zu erstellen.
Sie können index-dev.html verwenden, um Blöcke zu testen, die mit seinen Quellen und index.html es im Build-Modus versuchen.
Das build/ Verzeichnis dieses Repositorys wird nicht in jedem Commit aktualisiert, sondern muss eine aktuelle Schnappschuss des Repositorys enthalten.
Blocks.js steht unter MIT -Lizenz. Schauen Sie sich die Lizenzdatei an, um weitere Informationen zu erhalten.
