g6-editor 使用

项目中需要使用G6-Editor。现写个文章记录下。
思路:
到github上面将官网的例子下下来(官网使用react写,项目是使用vue写,但是两者差不多)。接着结合官网的例子和api,弄个demo出来。然后一步步优化和完善。

步骤:
界面布局->toolbar->itemPanel->minimap->page->detailpannel->contextmenu->优化完善

参考官网的例子时,有以下需要注意:
1.样式也要引入。 官网的一些效果和例子也有关系的。比如detailPanel面板。我一开始做的时候只引入了代码,样式文件没引入。这样是没有点击node显示node相关的面板,点击edge显示edge相关的面板这种效果(我的效果是detailPanel那边的内容全部显示,不会根据node、edge动态区分)。后面找了半天才发现是自己样式没引入导致的。(官网的样式默认detailPanel那边隐藏起来,display:none。但是这个我没写)。
2.demo是使用react写的,使用的是react语法,不能直接搬运。 我参考例子的时候,写了个XX.setState()。 然后就报错了。一开始没有想到是react的专有语法,还以为自己用的哪里不对,然后又使用g6 1.2.8版本去写编辑器,后面突然反应过来的,然后又换成g6-editor来写。
这两点都说明在写的时候需要细心点。
3.g6-editor 的api很短。所以很多东西需要去官方的demo里面找,g6的demo里面找。(没办法,谁让他api很不完善。找着找着也就会玩了。) 还有一个办法是打debugger。在editor和page那边打debugger。然后在控制台那边显示出来,看看他们有哪些属性和方法。

g6-editor 使用_第1张图片

希望g6-editor的文档尽快完善,现在真的不怎么方便。

最后效果:

g6-editor 使用_第2张图片

代码:



样式代码不写了,写上去这里会报错,没法发布。
样式跟官方demo里面的差不多,就是先将官方demo中的样式全部拷贝过去,然后再按照自己的需求调节下即可。

目前有个问题:
保存所绘图形之后,刷新页面,根据从数据库中读取的数据重绘图形。重绘的图形和之前保存的不一样(node位置一样,但是edge的连接点位置不同)。存储时保存了sourceAnchor和targetAnchor且存储和读取的数据都是一样的,但是显示出来有时候edge的链接点就是变了。感觉g6-editor它自己调节了。
如果有谁知道这个应该怎么解决的话,请解答下,谢谢

问题描述:
保存时的界面:

g6-editor 使用_第3张图片
保存时的数据:通过save方法获取

nodes:[{category: 0,color: "#FA8C16",condType: null,cond_type: null,disease_id: "AWYaUvvf_Xy3-P03CHQR",
grade: null,id: "AWYaUvvf_Xy3-P03CHQR",index: 0,label: "异常子宫出血",level: null,names: undefined,
operator: null,operatorName: undefined,shape: "circle",size: "78*72",source_anchor: null,target_anchor: null,
values: null,x: 174,y: 264},
{category: 1,color: "#1890FF",condType: 1,cond_type: 1,disease_id: "AWYaUvvf_Xy3-P03CHQR",grade: null,
id: "4e0f1d7e",index: 1,label: "年龄=0岁",level: null,names: ["0岁"],operator: "equal",operatorName: "=",
shape: "flow-rect",size: "120*48",source_anchor: 3,target_anchor: 3,values: ["0"],x: 337.56055,y: 559.5}
]

edges:[{id: "ed9361ca",index: 2,shape: "flow-polyline-round",source: "AWYaUvvf_Xy3-P03CHQR",sourceAnchor: 3,
target: "4e0f1d7e",targetAnchor: 3}]

从数据库中获取的数据:

node:[{category: 0,color: "#FA8C16",condType: null,cond_type: null,disease_id: "AWYaUvvf_Xy3-P03CHQR",
grade: null,id: "AWYaUvvf_Xy3-P03CHQR",label: "异常子宫出血",level: null,names: undefined,operator: null,
operatorName: undefined,shape: "circle",size: "78*72",source_anchor: null,target_anchor: null,values: null,
x: 174,y: 264},
{category: 1,color: "#1890FF",condType: 1,cond_type: 1,disease_id: "AWYaUvvf_Xy3-P03CHQR",grade: null,
id: "4e0f1d7e",label: "年龄=0岁",level: null,names: ["0岁"],operator: "equal",operatorName: "=",
shape: "flow-rect",size: "120*48",source_anchor: 3,target_anchor: 3,
values: ["0"],x: 337.56055,y: 559.5}]

edge:[{source: "AWYaUvvf_Xy3-P03CHQR",sourceAnchor: 3,target: "4e0f1d7e",targetAanchor: 3}]

可以看出保存和读取的数据一样,但是界面展示的效果是:

g6-editor 使用_第4张图片
锚点位置有改变。
请问这个是什么原因呢?

参考链接:
g6 API
g6-editor ApI
g6-editor 官网示例
g61.2.8 所写的editor

你可能感兴趣的:(g6-editor 使用)