Drawflow
0.0.60
간단한 흐름 라이브러리.
DrawFlow를 사용하면 쉽고 빠르게 데이터 흐름을 만들 수 있습니다.
JavaScript 라이브러리 만 설치하고 4 줄의 코드가 있습니다.
라이브 데모
? 테마 편집 생성기
edit , fixed 또는 view리포지토리를 다운로드하거나 복제하고 Dist Folder, CDN 옵션 또는 NPM을 복사하십시오.
git clone https://github.com/jerosoler/Drawflow.git
# Last
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css " >
< script src =" https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js " > </ script >
# or version view releases https://github.com/jerosoler/Drawflow/releases
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/drawflow.min.css " />
< script src =" https://unpkg.com/[email protected]/dist/drawflow.min.js " > </ script > npm i drawflow외부 패키지. 더 많은 정보 #119
npm install - D @ types / drawflow import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css' var Drawflow = require ( 'drawflow' )
var styleDrawflow = require ( 'drawflow/dist/drawflow.min.css' )DrawFlow 의 부모 요소를 만듭니다.
< div id =" drawflow " > </ div >DrawFlow를 시작하십시오.
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| 매개 변수 | 유형 | 설명 |
|---|---|---|
id | 물체 | 모듈의 이름 |
render | 물체 | Vue 를위한 것입니다. |
parent | 물체 | Vue 를위한 것입니다. 부모 인스턴스 |
import Vue from 'vue'
// Pass render Vue
this . editor = new Drawflow ( id , Vue , this ) ; import { h , getCurrentInstance , render } from 'vue'
const Vue = { version : 3 , h , render } ;
this . editor = new Drawflow ( id , Vue ) ;
// Pass render Vue 3 Instance
const internalInstance = getCurrentInstance ( )
editor . value = new Drawflow ( id , Vue , internalInstance . appContext . app . _context ) ; nuxt.config.js 파일에 추가하십시오
build: {
transpile : [ 'drawflow' ] ,
...
} del key 요소를 제거합니다.Right click 옵션 제거 (모바일 롱 프레스)를 표시하십시오.Left click press 편집기 또는 노드를 선택했습니다.Ctrl + Mouse Wheel 확대/아웃 (모바일 핀치). 편집기를 고정 유형으로 변경하여 블록으로 변경할 수 있습니다. 편집기 만 이동할 수 있습니다. 시작하기 전에 넣을 수 있습니다.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scroll줌 값을 조정할 수도 있습니다.
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| 매개 변수 | 유형 | 기본 | 설명 |
|---|---|---|---|
reroute | 부울 | 거짓 | 활성 재방송 |
reroute_fix_curvature | 부울 | 거짓 | 추가 포인트를 수정하십시오 |
curvature | 숫자 | 0.5 | 곡률 |
reroute_curvature_start_end | 숫자 | 0.5 | 곡률은 첫 번째 포인트 및 라스 포인트를 다시 경유합니다 |
reroute_curvature | 숫자 | 0.5 | 곡률 재 경로 |
reroute_width | 숫자 | 6 | reroute의 너비 |
line_path | 숫자 | 5 | 선 너비 |
force_first_input | 부울 | 거짓 | 첫 번째 입력이 노드 상단의 연결을 삭제하도록 강제 |
editor_mode | 텍스트 | edit | edit 편집, 노드에 대해 고정 fixed 입력 필드가 사용 가능하고보기 만보기 만 view . |
zoom | 숫자 | 1 | 기본 줌 |
zoom_max | 숫자 | 1.6 | 기본 줌 최대 |
zoom_min | 숫자 | 0.5 | 기본 Zoom Min |
zoom_value | 숫자 | 0.1 | 기본 줌 값 업데이트 |
zoom_last_value | 숫자 | 1 | 기본 줌 마지막 값 |
draggable_inputs | 부울 | 진실 | 클릭 입력에서 노드를 드래그합니다 |
useuuid | 부울 | 거짓 | 정수 인덱스 대신 UUID를 노드 ID로 사용하십시오. 새로 생성 된 노드에만 영향을 미치며 가져온 노드에 영향을 미치지 않습니다. |
활성 재방송 연결. start 또는 import 전에 사용하십시오.
editor . reroute = true ;라인 연결에서 두 번 클릭하여 포인트를 만듭니다. 제거하려면 포인트를 두 번 클릭하십시오.
다른 편집기에서 흐름을 분리하십시오.
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; 동일한 모듈에있는 경우 RemovedModule Home 모듈로 리디렉션됩니다.
노드를 추가하는 것은 간단합니다.
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| 매개 변수 | 유형 | 설명 |
|---|---|---|
name | 텍스트 | 모듈의 이름 |
inputs | 숫자 | DE 입력 수 |
outputs | 숫자 | DE 출력 수 |
pos_x | 숫자 | 시작 노드에 위치하여 왼쪽 |
pos_y | 숫자 | 시작 노드 상단에 위치합니다 |
class | 텍스트 | DE 노드에 클래스 이름을 추가했습니다. 여러 클래스 이름이 공간으로 구분됩니다 |
data | JSON | 데이터가 노드로 전달되었습니다 |
html | 텍스트 | 노드 또는 레지스터 노드 name 에 그려진 HTML. |
typenode | 부울 & 텍스트 | Default false , 객체 html의 경우 true , vue for vue |
입력, TextArea 에서 속성 df-* 사용하거나 Node 데이터와 동기화하고 내용화 할 수 있도록 선택할 수 있습니다.
Atrributs는 배수 부모가 df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;재사용을위한 등록 노드가 가능합니다.
var html = document . createElement ( "div" ) ;
html . innerHTML = "Hello Drawflow!!" ;
editor . registerNode ( 'test' , html ) ;
// Use
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'test' , true ) ;
// For vue
import component from '~/components/testcomponent.vue'
editor . registerNode ( 'name' , component , props , options ) ;
// Use for vue
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'name' , 'vue' ) ;| 매개 변수 | 유형 | 설명 |
|---|---|---|
name | 텍스트 | 등록 된 모듈의 이름. |
html | 텍스트 | HTML에서 그려 지거나 vue 구성 요소. |
props | JSON | vue 에만 해당됩니다. 구성 요소의 소품. Not Required |
options | JSON | vue 에만 해당됩니다. 구성 요소의 옵션. Not Required |
다른 사용 가능한 기능.
| Mehtod | 설명 |
|---|---|
zoom_in() | 증분 줌 +0.1 |
zoom_out() | 감소 줌 -0.1 |
getNodeFromId(id) | 노드 정보를 얻으십시오. 예 : ID : 5 |
getNodesFromName(name) | 노드 ID의 반환 배열. 예 : 이름 : telegram |
removeNodeId(id) | 노드를 제거하십시오. Ex ID : node-x |
updateNodeDataFromId | 데이터 요소를 업데이트하십시오. 예 : 5, { name: 'Drawflow' } |
addNodeInput(id) | 노드에 입력을 추가합니다. Ex ID : 5 |
addNodeOutput(id) | 노드에 출력을 추가합니다. Ex ID : 5 |
removeNodeInput(id, input_class) | 노드에 입력을 제거하십시오. Ex ID : 5 , input_2 |
removeNodeOutput(id, output_class) | 노드로 출력을 제거하십시오. Ex ID : 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | 연결을 추가하십시오. 예 : 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | 연결을 제거하십시오. 예 : 15,16,'output_1','input_1' |
updateConnectionNodes(id) | Node Ex ID : node-x 에서 연결 위치를 업데이트합니다 |
removeConnectionNodeId(id) | 노드 연결을 제거하십시오. Ex ID : node-x |
getModuleFromNodeId(id) | 모듈의 이름을 얻으십시오. ID는 어디에 있습니까? Ex ID : 5 |
clearModuleSelected() | 선택된 모듈의 명확한 데이터 |
clear() | 모든 모듈 및 모듈의 모든 데이터를 제거하십시오. |
editor . removeNodeId ( 'node-4' ) ; 일어나고있는 이벤트를 감지 할 수 있습니다.
사용 가능한 이벤트 목록 :
| 이벤트 | 반품 | 설명 |
|---|---|---|
nodeCreated | ID | 노드의 id |
nodeRemoved | ID | 노드의 id |
nodeDataChanged | ID | 노드 df-* 속성의 id 변경되었습니다. |
nodeSelected | ID | 노드의 id |
nodeUnselected | 진실 | 노드를 선택 해제하십시오 |
nodeMoved | ID | 노드의 id |
connectionStart | {output_id, output_class} | 노드의 id 및 출력 선택 |
connectionCancel | 진실 | 연결 취소 |
connectionCreated | {output_id, input_id, output_class, input_class} | id 의 노드 및 출력/입력 선택 |
connectionRemoved | {output_id, input_id, output_class, input_class} | id 의 노드 및 출력/입력 선택 |
connectionSelected | {output_id, input_id, output_class, input_class} | id 의 노드 및 출력/입력 선택 |
connectionUnselected | 진실 | 연결을 선택하지 않습니다 |
addReroute | ID | 노드 출력의 id |
removeReroute | ID | 노드 출력의 id |
rerouteMoved | ID | 노드 출력의 id |
moduleCreated | 이름 | 모듈의 name |
moduleChanged | 이름 | 모듈의 name |
moduleRemoved | 이름 | 모듈의 name |
click | 이벤트 | 이벤트를 클릭하십시오 |
clickEnd | 이벤트 | 클릭이 변경되면 |
contextmenu | 이벤트 | 두 번째 버튼 마우스 이벤트를 클릭하십시오 |
mouseMove | {x, y} | 위치 |
mouseUp | 이벤트 | 마우스 업 이벤트 |
keydown | 이벤트 | 키 다운 이벤트 |
zoom | Zoom_level | 줌의 수준 |
translate | {x, y} | 위치에 편집기를 번역하십시오 |
import | import | 수입을 마치십시오 |
export | 데이터 | 데이터 내보내기 |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) 데이터를 내보내고 가져올 수 있습니다.
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;내보낸 데이터의 예 :
{
"drawflow" : {
"Home" : {
"data" : {}
},
"Other" : {
"data" : {
"16" : {
"id" : 16 ,
"name" : " facebook " ,
"data" : {},
"class" : " facebook " ,
"html" : "n
n
Facebook Message
n
n ",
"inputs" : {},
"outputs" : {
"output_1" : {
"connections" : [
{
"node" : " 17 " ,
"output" : " input_1 "
}
]
}
},
"pos_x" : 226 ,
"pos_y" : 138
},
"17" : {
"id" : 17 ,
"name" : " log " ,
"data" : {},
"class" : " log " ,
"html" : "n
n
Save log file
n
n ",
"inputs" : {
"input_1" : {
"connections" : [
{
"node" : " 16 " ,
"input" : " output_1 "
}
]
}
},
"outputs" : {},
"pos_x" : 690 ,
"pos_y" : 129
}
}
}
}
}
폴더 문서에서 전체 예제를보십시오.
사용자 정의 요소에서 DrawFlow를 사용하는 방법도 있습니다. (문자 기반).
MIT 라이센스
