blocks.js
1.0.0
blocks.jsは、データフローグラフを編集するためのJavaScript Visual Editorであり、プロセスグラフの編集に使用できます。
これは単なる柔軟なフロントエンドエディターであり、ここにはバックエンドはありません。
ライブデモを試すことができます。
blocks.jsは、そのフィールド、名前、および動作を説明するメタ情報を使用して、ブロック仕様を使用してフィードルされます。
ユーザーはブロックシーンを編集できます。
次に、たとえばexport() 、Methodに感謝します。編集されたシーンを取り戻すことができます。ブロックをロードすると、シーンをロードすることもできます。
使用したい場合は、このリポジトリをクローン化するか、ダウンロードすることで、コードを取得する必要があります。
blocks.jsの使用：
これらの要件はすべて、このリポジトリに含まれています。これが、サードパーティのライブラリが次のようになる理由です。
<!-- 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 " />次に、 blocks.jsとblocks.cssをロードする必要があります。
<!-- blocks.js -->
< script type =" text/javascript " src =" build/blocks.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" build/blocks.css " />簡単な例を次に示します。
// 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" ) ; simple.htmlをご覧ください。
ブロックは、次のことを含むオブジェクトです。
name ：ブロックの名前family ：ブロックファミリー、これは正しいブロックメニューサブセクションにそれを置くために使用されますmodule ：ブロックモジュールは、名前空間のように機能し、名前の衝突を避けますdescription ：ユーザーを支援するために、ブロックが何をするかについての説明size ：ブロックのサイズは、 small 、 normal 、または特定のピクセル数にすることができますclass ：ブロックに追加されるCSSクラスの追加fields ：ブロックフィールドの配列リスト、以下を参照してくださいフィールドは、ブロックの入力、出力、および/または編集可能なパラメーターにすることができます。それは次のものを含むオブジェクトです：
name ：フィールドの名前は、特別な文字を含めるべきではありませんlabel ：ブロックタイトルに印刷されるフィールドのラベルには、特殊文字を含めることができますattrs ：文字列コンタビングフィールド属性は、 input 、 output 、および/またはeditableを含めることができます。たとえば、 "editable input"type ：フィールドタイプ。タイピングを参照してください。defaultValue ：フィールドのデフォルト値。編集可能な場合に使用されますhide ：ブロック情報に編集可能なフィールドを表示しないでくださいhideLabel ：ブロック情報に編集可能なフィールドラベルを表示しないでくださいcard ：入出力のカーディナリティ。これは"0-3"または[0,3]のような配列のような文字列である場合があります。これは、I/Oに接続できる最小および最大エッジを表します。dimension ：同じフィールドの接続数は、別のフィールド値、サイズ、または静的数に固定することができます。 Variadic I/OSを参照してください`デモ/̀ディレクトリで、リポジトリデモを見ることをheしないでください。
シーンは、次のことを含む簡単なパースオブジェクトです。
blocks ：シーンブロックedges ：シーンのエッジすべてのシーンブロックは次のように表されます。
id ：その数値IDxとy 、シーン内のブロックの位置type ：ブロックタイプ名module ：ブロックタイプモジュール名values ：すべての編集可能なフィールドの値を含む配列シーンのエッジは次のように表されます。
id ：その数値IDblock1 ：エッジが始まるブロックのIDconnector1 ：エッジが始まるブロックのコネクタblock2 ：エッジが終了するブロックのIDconnector2 ：エッジが終了するブロックのコネクタコネクタは、2つまたは3つの要素を含む配列です。
inputまたはoutput 、コネクタがブロックから発信しているかどうかを説明するか、入力します各フィールドを入力できます。基本タイプ（ string 、 choice 、 longtext 、 bool 、 int ）はフォーム入力としてレンダリングされ、他のすべての未知のタイプは単純なテキスト入力としてレンダリングされます。 （注： choiceタイプの場合、[ブロック]フィールドに[ choicesエントリを追加する選択肢を定義できます）。
タイプが[]で終了する場合、アレイと見なされます。編集時に追加および削除ボタンが追加されます。
デフォルトでは、異なるタイプは互換性がないため、リンクすることはできません。ただし、Blocks.jsには以下を使用して互換性があることを伝えることができます。
// 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' ) ; 一部のI/OSはバリアードである可能性があります。データベースの最初のユーザーを出力するブロックを考えてください。この方法で定義できます。
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"
}
]
} ) ;ここでは、 n編集可能なフィールドを使用して、出力されたユーザーの数が編集可能になります。 #は出力の数に置き換えられることに注意してください。
これがblocks.jsを使用する例です。
開発は、 src/ディレクトリで行われます。 uglifyjsコマンドラインを使用してビルドを作成するMakefileがあります。
index-dev.htmlを使用して、そのソースを使用してblocks.jsをテストし、 index.html使用してビルドモードで試してみることができます。
このリポジトリのbuild/ディレクトリは、すべてのコミットで更新されませんが、リポジトリの最近のスナップショットを含める必要があります。
blocks.jsはMITライセンスを取得しています。詳細については、ライセンスファイルをご覧ください。
