赞
踩
领导提到要写个工作流,我们的技术栈是React,翻阅了文档之后在 jsPlumb.js 和 react-flow-renderer 中选择,因为 react-flow-renderer 相对简单,也能达到预期效果,所以选择react-flow-renderer
因为节点是后端返回的数据列表,可能会达到上千个,所以没有用拖拽的方式,选择用导入的方式。
数据格式为:
[ { data: {id: "BPvugVEM1", label: "名字1", remark: "", edit: ""}, id: "BPvugVEM1", type: "relation", position: {x: 0, y: 0}, }, { data: {id: "BPvugVEM2", label: "名字2", remark: "", edit: ""}, id: "BPvugVEM2", type: "relation", position: {x: 0, y: 60}, }, { data: {id: "BPvugVEM3", label: "名字3", remark: "", edit: ""}, id: "BPvugVEM3", type: "relation", position: {x: 0, y: 120}, } ]
当然,这肯定是拿到后端的数据之后做的二次处理。
既然使用了新的东西,肯定还是要研究一下,文档又是英文的,所以针对常用的api做了简单整理。
node节点
<ReactFlow elements={rightSource} nodeTypes={nodeTypes} onNodeDoubleClick={HandleNode}>
<Controls />
</ReactFlow>
(1) node节点的相关属性,主要是在nodes对象里面去设置
id: nodeId, // 节点id
data: {
label: nodeName, // 要传入节点的内容
},
position: {
x: num%2 == 0 ? 25 + 200 * (n - 1 - remender) : 25 + 200 * remender, y: 75 * num
}, //节点在视图中的位置
className: status_list[t.status], // 节点样式,这个很常用
sourcePosition: num%2 == 0 ? 'left' : 'right', // 入口位置
targetPosition: num%2 == 0 ? 'right' : 'left', //出口位置
type: 'customnode' //节点类型
(2)那么如果原始节点不符合产品的要求要做拓展,比如在右上角加上节点id,怎么办?
这里就要用到自定义样式
const CustomNode = ({ id, data, sourcePosition, targetPosition }) => (
<div className="handle-nodes">
<Handle type="target" position={targetPosition}/>
<div style={{position: 'absolute', top: '0', left: '2px', fontSize: '12px'}}>{id}</div>
<div style={{textAlign: 'center', height: '40px', lineHeight: '38px'}}>{data.label}</div>
<Handle type="source" position={sourcePosition}/>
</div>
);
const nodeTypes = {
customnode: CustomNode
}
这里的data就是nodes中定义的节点内容
id: uuidv4(),
source: t.from,
target: t.to,
type: 'smoothstep', //指定连线的类型,常用的 默认为实线,smoothstep为虚线
arrowHeadType:"arrow", //连线带 箭头
borderRadius: 10, // 连线的弧度
label: 'updatable edge', //连线中的文字提示,类似 ——阿巴——
animated: true, //开启动画,当为虚线是常开启动画
style: {strokeWidth: 2} //这里可以调节连线的粗细
onNodeDoubleClick双击节点
onNodeClick单击节点
onNodeDragStart
onNodeDrag
onNodeDragStop
onNodeMouseEnter
onNodeMouseMove
onNodeMouseLeave
onNodeContextMenu
onNodesDelete
参考文档 https://juejin.cn/post/7058483266533195807#heading-10
参考文档 https://reactflow.dev/docs/api/node-types/
要注意的事情是
{ id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
{ id: 'e1-2', source: '1', target: '2' },
这个id一定要用字符串,不然会出bug,血泪史啊 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
还要注意一点!
edges 里面的 source: String(t.from), target: String(t.to),
也要用字符串啊 不然更新了线就没了啊 啊啊啊啊啊
这一行代码就能获取所有信息啦
console.log(reactFlowInstance.toObject()) //工作流所有信息
reactFlowInstance 是谁呢?
是画布实例啦
// 画布加载完毕,保存当前画布实例
const onLoad = (instance) => setReactFlowInstance(instance);
这样就把画布上所有的信息都保存到reactFlowInstance啦,当然setReactFlowInstance是reducer,reactFlowInstance是state
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。