Drawflow
0.0.60
シンプルなフローライブラリ。
DrawFlowを使用すると、データフローを簡単かつ迅速に作成できます。
JavaScriptライブラリのみをインストールし、4行のコードを使用します。
ライブデモ
？テーマ編集ジェネレーター
edit 、 fixed 、またはviewリポジトリをダウンロードまたはクローンして、DISTフォルダー、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_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' ) ;同じモジュールにある場合は、 Homeモジュールにリダイレクトされている場合はRemovedModule
ノードを追加するのは簡単です。
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| パラメーター | タイプ | 説明 |
|---|---|---|
name | 文章 | モジュールの名前 |
inputs | 番号 | DE入力の数 |
outputs | 番号 | DE出力の数 |
pos_x | 番号 | 開始ノードの左の位置 |
pos_y | 番号 | 開始ノードトップの位置 |
class | 文章 | de nodeにクラス名を追加しました。スペースで区切られた複数のクラス名 |
data | JSON | データはノードに渡されました |
html | 文章 | ノードまたはレジスタノードのnameで描画されたHTML。 |
typenode | ブール＆テキスト | デフォルトのfalse 、オブジェクトhtmlにはtrue 、 vue for vue |
属性df-*入力、textareaで使用するか、ノードデータとコンテンツ誘導性と同期するように選択できます。
Atrributs Multiples親は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 | 文章 | 描画またはvueコンポーネントを描画またはvueするhtml。 |
props | JSON | vueのみ。コンポーネントの小道具。 Not Required |
options | JSON | vueのみ。コンポーネントのオプション。 Not Required |
その他の利用可能な機能。
| Mehtod | 説明 |
|---|---|
zoom_in() | インクリメントズーム+0.1 |
zoom_out() | DECREMENT ZOOM -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) | ノード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 | イベント | 2番目のボタンマウスイベントをクリックします |
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を使用する方法の例もあります。 （Litelementに基づいて）。
MITライセンス
