Drawflow

Drawflow

简单的流库。

Drawflow使您可以轻松，快速地创建数据流。

仅安装一个JavaScript库和四行代码。

现场演示

?主题编辑生成器

目录

• 特征
• 安装
  • 跑步
• 鼠标和钥匙
• 编辑
  • 选项
• 模块
• 节点
  • 节点示例
  • 注册节点
• 方法
  • 方法示例
• 事件
  • 事件示例
• 导出 /导入
  • 导出示例
• 例子
• 执照

特征

• 阻力节点
• 多个输入 /输出
• 多个连接
• 删除节点和连接
• 添加/删除输入/输出
• 重新路由连接
• 数据同步节点
• 放大 /退出
• 清除数据模块
• 支持模块
• 编辑模式编辑，固定或查看
• 进出口数据
• 事件
• 移动支持
• 香草JavaScript（无依赖关系）
• NPM
• VUE支持组件节点&& nuxt

安装

下载或克隆存储库，然后复制DIST文件夹，CDN选项或NPM。

克隆

git克隆https://gi*thub.c*om*/jerosoler/drawflow.git

CDN

Drawflow.min.css\”>
<script src=\”https://cdn.jsd*el*i*vr.net/gh/jerosoler/Drawflow/dist/ Drawflow .min.js\”></script>
# or version view releases https://*git*hub.*com/jerosoler/Drawflow/releases
<link rel=\”stylesheet\” href=\”https://unpkg**.co*m/Drawflow@x.x.xx/dist/ Drawflow .min.css\” />
<script src=\”https://unpkg**.co*m/Drawflow@x.x.xx/dist/ Drawflow .min.js\”></script>\”>

# Last
< link rel =\" stylesheet \" href =\" https://cdn.jsd*el*i*vr.net/gh/jerosoler/Drawflow/dist/ Drawflow .min.css \" >
< script src =\" https://cdn.jsd*el*i*vr.net/gh/jerosoler/Drawflow/dist/ Drawflow .min.js \" > </ script >
# or version view releases https://*git*hub.*com/jerosoler/Drawflow/releases
< link rel =\" stylesheet \" href =\" https://unpkg**.co*m/Drawflow@x.x.xx/dist/ Drawflow .min.css \" />
< script src =\" https://unpkg**.co*m/Drawflow@x.x.xx/dist/ Drawflow .min.js \" > </ script > 

NPM

 npm i Drawflow

打字稿

外部包装。更多信息＃119

 npm install - D @ types / Drawflow 

进口

Drawflow \’
import style Drawflow from \’ Drawflow /dist/ Drawflow .min.css\’\”>

 import Drawflow from \' Drawflow \'
import style Drawflow from \' Drawflow /dist/ Drawflow .min.css\' 

要求

Drawflow \’)
var style Drawflow = require(\’ Drawflow /dist/ Drawflow .min.css\’)\”>

 var Drawflow = require ( \' Drawflow \' )
var style Drawflow = require ( \' Drawflow /dist/ Drawflow .min.css\' )

创建Drawflow的父元素。

 < div id =\" Drawflow \" > </ div >

跑步

启动Drawflow 。

Drawflow\”);
const editor = new Drawflow (id);
editor.start();\”>

 var id = document . getElementById ( \" Drawflow \" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;

对于VUE 2示例。

 import Vue from \'vue\'

// Pass render Vue
this . editor = new Drawflow ( id , Vue , this ) ;

对于VUE 3示例。

Drawflow(id, Vue);
// Pass render Vue 3 Instance
const internalInstance = getCurrentInstance()
editor.value = new Drawflow (id, Vue, internalInstance.appContext.app._context);\”>

 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

添加到nuxt.config.js文件

Drawflow\’],
…
}\”>

build: {
    transpile : [ \' Drawflow \' ] ,
    ...
  } 

鼠标和钥匙

• DEL键删除元素。
• 右键单击以显示删除选项（移动长按）。
• 左键按下以移动选择的编辑器或节点。
• CTRL +鼠标车轮放大/输出（移动捏）。

编辑

您可以将编辑器更改为固定类型以阻止。只有编辑器才能移动。您可以在开始前将其放置。

 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 ;

编辑选项

重新路由

主动重新路由连接。在开始或导入之前使用。

 editor . reroute = true ;

使用双击线连接创建点。双击点以进行删除。

模块

在不同的编辑器中分开您的流量。

 editor . addModule ( \'nameNewModule\' ) ;
editor . changeModule ( \'nameNewModule\' ) ;
editor . removeModule ( \'nameModule\' ) ;
// Default Module is Home
editor . changeModule ( \'Home\' ) ;

删除模块是否在同一模块中，将其重定向到家庭模块

节点

添加节点很简单。

 editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;

您可以在输入，TextAarea中使用属性df-*，也可以选择与节点数据同步和可满足的。

trributs倍增父母支持df – * – *…

节点示例

 var html = `
<div><input type=\"text\" df-name></div>
` ;
var data = { \"name\" : \'\' } ;

editor . addNode ( \'github\' , 0 , 1 , 150 , 300 , \'github\' , data , html ) ;

注册节点

可以重复使用的注册节点。

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\’);\”>

 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\' ) ;

方法

其他可用功能。

方法示例

 editor . removeNodeId ( \'node-4\' ) ; 

事件

您可以检测正在发生的事件。

可用事件列表：

事件示例

 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 \" : {
        \"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）。

执照

麻省理工学院许可证