Drawflow下载 - Drawflow源代码下载

drawflow

简单的流库。

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

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

现场演示

？主题编辑生成器

特征

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

安装

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

克隆

git clone https://github.com/jerosoler/Drawflow.git

CDN

# 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

 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` 。父实例

对于VUE 2示例。

 import Vue from 'vue'

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

对于VUE 3示例。

 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文件

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	曲面重新路由第一点和LAS点
`reroute_curvature`	数字	0.5	曲面重新路由
`reroute_width`	数字	6	重新路由的宽度
`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' ) ;

RemovedModule是否在同一模块中，将其重定向到Home模块

节点

添加节点很简单。

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

范围	类型	描述
`name`	文本	模块的名称
`inputs`	数字	DE输入数量
`outputs`	数字	DE输出数量
`pos_x`	数字	左开始节点的位置
`pos_y`	数字	在开始节点上的位置
`class`	文本	将className添加到de node。多个班级名称被空间隔开
`data`	JSON	传递到节点的数据
`html`	文本	html在节点或寄存器节点的`name`上绘制。
`typenode`	布尔和文字	默认为`false` ， `true` html，vue的`vue`

您可以在输入，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 ) ;

注册节点

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

 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()`	增量Zoom +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)`	来自节点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`	事件	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
                }
            }
        }
    }
}