React-flow的初窥

React-flow和Echart的区别

• Echart是数据的展示，而RF是流程的展示。

RF由点（node）和线（edge）组成

• node和node之间的连接由node上的小圆点（也称句柄 Handle）连接。如图

node对象

• id:用于标识node
• type：
  • 'input'表示只有一个句柄而且是出口，因为是input代表第一个node，只有出口，
  • 反之'output'也只有一个句柄表示入口，因为是最后一个node所以只有入口。
  • 不写表示默认type，有两个句柄分别表示出入口。
  • 是的，只能由2个句柄，如果需要多个句柄，需要自定义node。
• data：（展示node中的内容，暂时只了解label） - label：node中出现的内容，可以以jsx来显示内容
• position：node的位置
• style：控制node的样式（已知border、color、background、width、height）
• sroucePosition：表示入口句柄在node的方位。
• targetPosition：表示出口句柄在node的方位。
• isHidden: 如果true，节点将不会被渲染
• draggabl:true为可拖动，false相反
• connectable: true为可连接，false相反
• selectable: true为可选中，false相反

edge对象

• id: 字符串 （必填）
• source: node的id （必填） 连接的是node的出口
• target: 字符串（节点的 id） （必填） 连接的是node的入口
• type: 'default' (弯曲平滑), 'straight（直线）', 'step（会转弯带有直角）' 和 'smoothstep（会转弯平滑）' 或自定义的，取决于你的实现
• animated: 布尔值（虚线动画）
• style: 边线路径的 css 属性
• className: 附加类名 edge盒子的样式，和style控制的标签不一样。
• label： 线旁边的文本内容，不可以jsx
• labelStyle: 文本的 css 属性
• arrowHeadType: 'arrow' 或 'arrowclosed' - 定义边缘的箭头
• isHidden: 如果true, 边缘将不会被渲染

RF上的事件

• onConnect：线被连接上时触发，可再此回调中添加node和edge对象。
• onElementsRemove：deleteKeyCode属性值所代表的键盘被按下时触发，可在此回调中删除node或edge对象

自定义样式

• 导入RF时，和非自定义样式导入有区别，如图

关键点是：知道DOM树的结构和相对应DOM的class类名，如图

自定义node

待写