blocks.js
1.0.0
blocks.js 는 데이터 플로 그래프를 편집하기위한 JavaScript 비주얼 편집기이며, 프로세스 그래프를 편집하는 데 사용할 수 있습니다.
이것은 유연한 프론트 엔드 편집자 일 뿐이며 여기에는 백엔드가 없습니다.
라이브 데모를 시도 할 수 있습니다.
Blocks.js는 필드, 이름 및 동작을 설명하는 메타 정보를 사용하여 블록 사양을 사용하여 공급됩니다.
사용자가 블록 장면을 편집 할 수 있습니다.
그런 다음 export() , 메소드에 감사드립니다. 편집 된 장면을 되 찾을 수 있습니다. 블록을로드하면 장면을 다시로드 할 수도 있습니다.
사용하려면이 저장소를 복제하거나 다운로드하여 코드를 가져와야합니다.
blocks.js 사용 :
이 모든 요구 사항은이 저장소에 포함되어 있습니다. 이것이 제 3 자 라이브러리가 다음과 같이 보이는 이유입니다.
<!-- 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를 참조하십시오`demo/̀ 디렉토리에서 저장소 데모를 살펴 보는 것을 망설이지 마십시오.
장면은 다음을 포함하는 손잡이하기 쉬운 객체입니다.
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 라이센스 아래에 있습니다. 자세한 내용은 라이센스 파일을 살펴보십시오.
