blocks.js
1.0.0
blocks.js是用於編輯數據流圖的JavaScript Visual編輯器，可用於編輯進程圖。
請注意，這只是一個靈活的前端編輯器，這裡沒有後端。
您可以嘗試現場演示。
使用塊規範使用元信息來餵食blocks.js。
它允許用戶編輯塊場景。
然後，感謝例如export() ，方法，您可以返回編輯的場景。加載塊時，也可以加載一個場景。
如果要使用它，則必須通過克隆此存儲庫或下載來獲取代碼。
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請隨時查看“演示/̀目錄”中的存儲庫演示。
場景是一個易於使用的對象，包含：
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可以是變化，想想一個可以輸出數據庫的n個第一個用戶的塊，您可以這樣定義它：
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使用其源index.html測試塊。
該存儲庫的build/目錄不會在每個提交上更新，而必須包含存儲庫的最新快照。
blocks.js符合MIT許可。請查看許可證文件以獲取更多信息。
