xflow流程可视化-自定义节点

{s.label}/div>,renderKey:s.renderKey||'CustomNode',renderComponent:(props:any)=>renderNode(props,attrs.style),label:s.label,id:s.id,attrs:attrs,...attrs.canvansStyle,};});返回newArr;};exportconstnodeDataService:NsNodeCollapsePanel.INodeDataService=async()=>{//这里可以通过接口获取节点列表constresData=[{id:1,renderKey:'CustomNode',label:'start',attrs:{style:{width:280,height:40,},canvasStyle:{width:120,height:40,},},},{id:2,renderKey:'CustomConnecto',label:'AuditNode',attrs:{style:{width:80,height:80,},canvasStyle:{width:80,height:80,},},},];返回[{id:'NODE',header:'node',children:nodeList(resData),},];};我们将接口返回的节点属性转换成面板Dnd节点所需的属性结构，我这里声明了两种宽高，主要是一种用于画布主视图中显示的节点的宽高，一种用于节点列表中组件的宽度和高度。我们的节点渲染其实是通过renderComponent返回的组件来进行渲染的，renderKey的作用就是在我们view上已经存在的节点反转的时候，根据renderKey渲染节点列表中对应的节点。自定义节点新建一个CustomNodeCollapsePanel/Nodes/index.ts，这里我们使用批量导出，在Nodes中为每个节点创建一个文件夹，使用index.ts进行批量导出，首先安装解析require.context的包yarnadd@types/webpack-env-D//index.tsconstfiles=require.context('.',true,/index\.tsx$/);const模块：{[key:string]:any}={};functionisPromise(obj:Promise|null|undefined){return(obj!==null&&obj!==undefined&&typeofobj.then==='function'&&typeofobj.catch==='function');}files.keys().forEach(async(key)=>{constpathArr=key.replace(/(\.\/|\.tsx)/g,'').split('/');pathArr.pop();constmoduleName=pathArr.join('/').replace(/\/\w{1}/g,function(val){returnval.substring(1,2).toUpperCase();}});constmodule=isPromise(files(key))?awaitfiles(key):files(key);modules[moduleName]=module.default;});exportdefaultmodules;require.context是提供的检索apiwebpack，这里多了一个Promise的判断，如果umi开启了mfsu，得到的模块会是按需异步导出，所以判断过程，这个index.ts的作用是遍历Nodesindex.tsx中的所有目录，然后组装成一个对象返回，如：aaa/bbb/index.tsxccc/index.tsx{aaaBbb:moduleccc:module}接下来，我们创建我们的自定义节点CustomNode和CustomConnecto同样跳过，新建一个Nodes/CustomNode/index.tsx:importtype{FC}from'react';从'@antv/xflow'导入类型{NsNodeCollapsePanel}；从'./index.less'导入样式；interfaceCustomNodeProps{data:NsNodeCollapsePanel.IPanelNode;isNodePanel：布尔值；style:React.CSSProperties;}constCustomNode:FC=({data,style,isNodePanel})=>{return({data.label}