上一篇主要讲解了可视化自定义节点的添加和生成。本文主要介绍自定义节点的编辑功能，实现自定义节点edit上各种属性的编辑。流程图编辑面板页面右侧的流程节点组件为FlowchartFormPanel，与自定义节点列表的组件相同，所以我们这里去掉FlowchartFormPanel，替换为原来的JsonSchemaForm，更新节点属性。添加自定义属性，我们首先在创建节点时添加一些自定义属性，然后点击节点，使属性出现在编辑框上，进行编辑。attribute是我们添加的自定义属性。//config-dnd-panel.tsx（见上一篇）exportconstnodeDataService:NsNodeCollapsePanel.INodeDataService=async()=>{//这里可以通过接口获取节点列表constresData=[{id:1,renderKey:'CustomNode',label:'start',attrs:{attribute:{type:'aaa',tag:[1,2],},style:{width:280,height:40,},canvasStyle:{width:120,height:40,},},},{id:2,renderKey:'CustomConnecto',label:'AuditNode',attrs:{属性:{type:'bbb',标签:[2],},样式:{宽度:80,高度:80,},canvasStyle:{宽度:80,高度:80,},},},];返回[{id:'NODE',header:'node',children:nodeList(resData),},];};自定义编辑首先我们删除上一章的FlowchartFormPanel组件，新建文件夹CustomFlowchartFormPanel，创建index.tsx，NodeComponent/index.tsx，EdgeComponent/index.tsx，CanvasService，分别是我们的主视图，Node节点编辑窗体、边连接编辑窗体、Canvas主视图编辑窗体//index.tsximporttype{NsNodeCmd,NsGraph,NsEdgeCmd,NsJsonSchemaForm,}from'@antv/xflow';import{JsonSchemaForm,XFlowNodeCommands,XFlowEdgeCommands,}from'@antv/xflow';import{FC}from'react';从'./CanvasService'导入{CanvasService,canvasSchema}；从'./NodeComponent'导入NodeComponent；从'./EdgeComponent'导入EdgeComponent；命名空间NsJsonForm{exportconstgetCustomRenderComponent:NsJsonSchemaForm.ICustomRender=(targetType,targetData,_modelService,commandService,)=>{constupdateNode=(node:NsGraph.INodeConfig)=>{returncommandService.executeCommand(XFlowNodeCommands.UPDATE_NODE.id,{nodeConfig:node},);};constupdateEdge=(edge:NsGraph.IEdgeConfig)=>{returncommandService.executeCommand(XFlowEdgeCommands.UPDATE_EDGE.id,{edgeConfig:边缘,选项：{}}，）;};if(targetType==='node'){return()=>();}if(targetType==='edge'){return()=>();}if(targetType==='canvas'){return()=>;}返回空值；};exportconstformSchemaService:NsJsonSchemaForm.IFormSchemaService=async(args,)=>{returncanvasSchema();}};}constCustomFlowchartFormPanel:FC=()=>{return();};exportdefaultCustomFlowchartFormPanel;我们在getCustomRenderComponent判定选择中的是节点、连线还是主该视图返回相应的自定义编辑控件。需要注意的是，xflow原本提供了一个json配置表单的方法，但是这里我们完全是自定义编辑框，所以没有使用内置的controlMapService，有兴趣使用内置自定义表单渲染的同学可以查看官方文档试试看。注意formSchemaService还是要返回的，否则就是loading状态。节点编辑节点编辑组件接收两个值。updateNode是更新节点的函数，targetData是被点击节点的节点属性。当我们点击保存按钮时，遍历表单为属性更新相应的值，而Header就是一个简单的公共头部，所以没什么好说的。//NodeComponent/index.tsximport{FC,useEffect,useState}from'react';import{Input,Form,Spin,Button,Select}from'antd';import{NsJsonSchemaForm}from'@antv/xflow';import{set}from'lodash';importHeaderfrom'../Header';importstylesfrom'./index.less';const{Option}=Select;interfaceNodeComponentProps{updateNode:any;targetData:NsJsonSchemaForm.TargetData;}constNodeComponent:FC=(props)=>{const{updateNode,targetData}=道具;const[loading,setLoading]=useState(true);const[form]=Form.useForm();useEffect(()=>{form.setFieldsValue({label:targetData?.label,...targetData?.attrs?.attribute,});setLoading(false);},[targetData]);constonFinish=(values:any)=>{constdata:any={...targetData,};Object.keys(values).forEach((key:any)=>{if(key==='label'){set(data,key,values[key]);}else{设置(data.attrs.attribute,key,values[key]);}});更新节点（数据）；};return(12保存</Spin>
);};导出默认节点组件;连线编辑连线编辑和节点编辑类似，就不多解释了。需要注意的是connectionattrs一开始是没有属性的，所以我们做一个判断，给它添加一个空的attribute属性//EdgeComponent/index.tsximport{NsJsonSchemaForm}from'@antv/xflow';import{Input,Button,Form,Spin}from'antd';import{set}from'lodash';import{FC,useEffect,useState}从'反应';从'../Header'导入标题;从'./index.less'导入样式;接口EdgeComponentProps{updateEdge：任何;targetData:NsJsonSchemaForm.TargetData;}constEdgeComponent:FC
