3 个修复让 LogicFlow 的 BPMN 文件保存回显不再翻车【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow在 LogicFlow 里做 BPMN 保存与回显很容易撞上这么几件事导出的文件再打开节点全漂了自定义属性没了连线对不上号。别急着怀疑画布这三个问题都出在数据转换层而转换层里每一处都有明确的修法。一分钟自检先对号入座找到你踩的是哪一坑再跳到对应章节。回显时的现象可能原因对应修复章节节点整体平移了一段尺寸越大偏得越远中心坐标与左上角坐标之间没做补偿修复 1审批人、超时时间等自定义属性消失或结构错乱导出时没声明 retainedFields字段被当成 XML 子节点修复 2带并行网关的复杂流程连线错乱或节点消失outgoing 写在了 incoming 前面引用关系没建起来修复 3为什么存下来的文件会对不上LogicFlow 里一个节点的位置用的是中心点坐标而 BPMN 文件里dc:Bounds记录的是左上角坐标。同一份图两套坐标系。打个比方这就像两张地图用了不同的原点。一张以城市中心为原点标注位置另一张以地图左上角为原点。你拿着 A 地图的坐标直接去 B 地图上钉图钉整座城市都会平移一段而且楼越大节点越大钉得越歪。所以转换必须成对做导出时把中心坐标减去半个宽高写成左上角坐标导入时再加回来。每个节点类型该补偿多少取决于它的宽高这些尺寸提前注册在shapeConfigMap里开始事件、用户任务、网关各有一条。除了坐标文件往返还会经过另外两道关卡自定义属性是写成属性还是子节点以及节点之间 incoming/outgoing 引用关系的书写顺序。任何一关处理得不对就会出现文件能打开但图全变了的情况。修复 1补上坐标偏移节点不再漂移症状重新打开文件后所有节点整体平移了半个节点宽高图往一个方向飘。原因导入时把 BPMN 的左上角坐标直接当成中心坐标去渲染了或者导出时忘了反向处理。两个坐标系没换算偏差量恰好等于半宽、半高。// 导入方向左上角坐标 - 中心坐标 const shapeConfig BpmnAdapter.shapeConfigMap.get(type) if (shapeConfig) { x shapeConfig.width / 2 // 水平方向补偿 y shapeConfig.height / 2 // 垂直方向补偿 }导出方向是反的写入dc:Bounds前x、y 各减去width / 2和height / 2。两个方向都要改只改一边等于白改。容易踩的坑补偿量依赖shapeConfigMap里的登记。你如果扩展了自定义 BPMN 节点类型却忘了登记它的宽高这类节点就会用错补偿量——别的可能全对齐就它独自在画布上漂移。修复 2用 retainedFields 留住自定义属性症状保存前节点 properties 里明明有assignee、timeout回显后这些字段丢了或者变成了一个奇怪的子节点。原因转换到 XML 时字段值如果是对象或数组默认会被当作 XML 子节点处理而不是属性。结构一变形回来时对不上原来的字段。把要保留的字段显式声明出来它们就会以属性形式安全往返。// adapterOut 第二参即 retainedFields对象/数组值也按属性写出 const xml lf.adapterOut(graphData, [assignee, timeout]) // 内部会与默认的 [properties,startPoint,endPoint,pointsList] 合并容易踩的坑只声明了的字段才受保护。业务字段多的时候建议一次性把所有字段列全而不是丢一个再补一个——因为每个漏网字段都会让某一批流程文件悄悄变脏。修复 3先写 incoming 再写 outgoing连线不乱症状含并行网关、多条件分支的复杂流程重新打开后连线接错对象个别节点看起来凭空消失。原因BPMN 要求每个节点声明自己的bpmn:incoming和bpmn:outgoing。如果先写 outgoing此刻目标节点的 incoming 还没填好部分解析器就建立不了连接关系流程结构直接解析错。// 第一遍回填目标节点的 incoming空-写入单值-升为数组 data.edges.forEach((edge) { const targetNode nodeMap.get(edge.targetNodeId) targetNode[bpmn:incoming] targetNode[bpmn:incoming] ?? edge.id // 已是数组则直接 push }) // 第二遍incoming 全部完成后再回填源节点的 outgoing完整逻辑见 bpmn-adapter 源码顺序本身就是关键改代码时别动它。容易踩的坑一个节点有多条入边时bpmn:incoming必须是数组。如果第二条边进来时没把字符串升级成数组直接覆盖回显时就只剩最后那条线。一键导入导出下面是最小可用的导出 导入链路参考实现见 bpmn 示例页面。// 导出取图数据 - adapterOut带保留字段- 下载为 BPMN 文件 const handleExport () { const data lfRef.current?.getGraphData() const xml lfRef.current?.adapterOut(data, [assignee, timeout]) download(process.bpmn, xml) } // 导入读文件 - lfXml2Json 把 XML 转成 JSON - 渲染到画布 const handleImport (file: File) { const reader new FileReader() reader.onload (e) { const json lfXml2Json(e.target?.result as string) lfRef.current?.render(json) } reader.readAsText(file) }修完怎么验证同一份文件导出后立刻重新导入逐节点对比位置是否完全一致先看画布左上角第一个节点它偏多少就是补偿错多少。检查assignee、timeout等自定义属性的值是否原样回到 properties 里。画一条1 个开始节点 2 条分支 1 个网关的流程再导出确认每条线的起点终点没有互换。随机拖动几个节点、缩放窗口后再保存一次确认坐标不会累计漂移。把导出的文件上传到官方在线校验工具 demo.bpmn.io能被标准 BPMN 工具正常打开说明结构合规。收尾一张表记住三处修复三个修复都发生在转换层改一次以后所有文件的保存回显都会受益。知识点关键动作中心坐标 vs 左上角坐标导出减半宽高、导入加半宽高两个方向都补偿自定义属性丢失adapterOut时传入retainedFields声明保留字段连线引用顺序先遍历写incoming再遍历写outgoing多值升为数组往返链路导出走adapterOut导入走lfXml2Jsonrender后续如果要用setCustomShape扩展自定义 BPMN 节点记得同时把它的宽高登记进shapeConfigMap坐标补偿才能对它生效。【免费下载链接】LogicFlowA flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架支持实现脑图、ER图、UML、工作流等各种图编辑场景。项目地址: https://gitcode.com/GitHub_Trending/lo/LogicFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考