gojs自动布局坑点问题解决思路
目录
一、需求
1.用户可在拓扑图面板进行编辑
2.可以通过拉取数据自动生成拓扑图
3.用户可以在生成的拓扑图上二次编辑(难点1)
4.拓扑图节点与连线的相关数据入库
5.拉取入库的节点和连线数据可以正常展示(难点2)
二、难点一(自动布局有效性切换)
第二个需求需要用到gojs的layout自动布局
参考API:https://gojs.net/latest/api/symbols/Layout.html
考官网样例:https://gojs.net/latest/samples/tLayout.html
我们采用的是go.TreeLayout树形布局,参考官网样例完成了该功能,自动布局基本属性需要
1.nodeData.key
2.linkData.to和linkData.from
我们从数据库获取自动成图需要的json数据,Layout会自动布局补充节点和连线的坐标.
那么问题来了,如下图
可以发现当自动布局生效后,用户进行新增节点或者删除节点,会再次触发自动布局效果,原有坐标均被重置.也就是说,只要用户有新增节点的操作,前面的修改会全部重置,但是又必须得使用TreeLayout,否则从后台拉取的数据是无坐标的,不会呈现在面板上.
有两种解决方案:
1.自动成图和用户修改独立做成两个界面
2.自动成图和用户修改做成一个界面,控制自动布局有效性
方案一功能冗余,实现也较为麻烦,体验不好,所以尝试第二种方案,根据官网提供的属性,推荐使用isOngoing属性,进行控制自动布局是否生效
将isOngoing设置为false，以防止添加或删除部件等操作使此布局无效。默认值为true。
那么解决思路是,将isOngoing设置为false,当点击自动成图按钮之后,将isOngoing设置为true,自动成图完成后,再将isOngins设置为false,用户再编辑的时候,就不会造成布局无效.
代码:
三、难点二(自动布局连线混乱)
当自动布局后,gojs会自动给nodedata和linkdata绑定坐标,保存入库,再次拉取节点和连线数据,使用默认布局进行展示的时候,会发现连线有变化,如图:
经过控制台打印,发现节点数据没变,连线坐标缺被篡改了.拉取之后未操作,再次保存,对比第二次保存前后的连线数据,可以确定连线坐标是被篡改了.参考自动布局API对多个属性进行调试,未果.按照官方文档的说明,可以显示的给节点绑定某些必要属性,可以控制该节点的布局效果.比如坐标,但是属性之多,调试难度大,相对复杂,最后选择在gojs技术交流群和论坛求助,最后在论坛中发现解决方案
论坛地址:https://forum.nwoods.com/c/gojs
新用户可以有30天免费试用
参考第一个问题,发现这哥们和我们所遇到的麻烦一模一样:
这是已解决的回答:
TreeLayout布局会选择合适的节点端口连接方向,我们通过在node上设置from.spot和to.spot来限制连线选择附着点的方向.
随后查看spot相关api,因为我们的拓扑图布局是树形结构,根节点在最左(如果树结构是从上到下,可以考虑topCenter,和BottomCenter),所以选择以下方式
代码:
在节点模板上添加该属性
最终问题得以解决,通过数据对比,发现连线坐标与自动成图的坐标一致了