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许可。请查看许可证文件以获取更多信息。
