Graphin使用自定义节点时点击画布节点自动渲染错误信息的解决办法
Graphin的文档还是太简略了，很多东西只得自己摸索。
自定义节点的代码如下：
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
const defaultStyles = {
/** container 容器 */
containerWidth: 40,
containerStroke: '#0693E3',
containerFill: '#fff',
/** text 文本 */
fontColor: 'red',
fontSize: 12,
/** state */
dark: '#eee',
};
const renderCustomNodeShape = node => {
const style = {
...defaultStyles,
...node.style,
};
return {
shape: 'CustomNode',
shapeComponents: [
{
shape:'image',
attrs: {
id:'head', //节点头像框
x: 0,
y: 0,
width:40,
height:40,
img:'http://localhost:3000/static/media/logo.452e4dbe.svg'
}
},
{
shape: 'rect',
attrs: {
id: 'nameinput', //节点姓名框
x: 0,
y: 40,
width: style.containerWidth*2.8, //矩形宽度
height: style.containerWidth*0.5, //矩形高度
fill: style.containerFill, //背景填充颜色
stroke: style.containerStroke,
cursor: 'pointer',
lineWidth: 1, //边框宽度
radius: 2, //半径
},
},
{
shape: 'text',
attrs: {
id: 'name', //节点姓名
x: style.containerWidth-27,
y: style.containerWidth+5,
text: node.data.name,
fontSize: 10,
cursor: 'pointer',
fill: 'black',
textAlign: 'center',
textBaseline: 'top',
},
},
{
shape: 'rect',
attrs: {
id: 'phoneinput',
x: 0,
y: style.containerWidth*1.5,
width: style.containerWidth*2.8,
height: style.containerWidth*0.5,
fill: style.containerFill, //背景填充颜色
stroke: style.containerStroke,
cursor: 'pointer',
lineWidth: 1, //边框宽度
radius: 2, //半径
},
},
{
shape: 'text',
attrs: {
id: 'phone',
x: style.containerWidth-6,
y: style.containerWidth+25,
text: node.data.phone,
fontSize: 10,
cursor: 'pointer',
fill: 'black',
textAlign: 'center',
textBaseline: 'top',
},
},
{
shape: 'rect',
attrs: {
id: 'idinput',
x: 0,
y: style.containerWidth*2,
width: style.containerWidth*2.8,
height: style.containerWidth*0.5,
fill: style.containerFill, //背景填充颜色
stroke: style.containerStroke,
cursor: 'pointer',
lineWidth: 1, //边框宽度
radius: 2, //半径
},
},
{
shape: 'text',
attrs: {
id: 'phone',
x: style.containerWidth+15,
y: style.containerWidth+45,
text: node.data.idnum,
fontSize: 10,
cursor: 'pointer',
fill: 'black',
textAlign: 'center',
textBaseline: 'top',
},
},
],
state: {
selected: {
'rect-container': {
stroke: style.containerStroke,
fill: style.containerStroke,
animate: {
attrs: {
lineWidth: 6,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 2,
shadowColor: '#fff',
repeat: false, // 循环
},
duration: 200,
easing: 'easeCubic',
callback: ()=>{
},
delay: 0,
},
},
'node-icon': {
fill: '#fff',
},
badge: {
lineWidth: 6,
},
},
},
'highlight.dark': {
'rect-container': {
fill: style.dark,
stroke: style.dark,
lineWidth: 0,
},
'node-icon': {
fill: style.dark,
},
'text-desc': {
fill: '#eee',
},
badge: {
fill: style.dark,
},
'badge-text': {
fill: style.dark,
},
},
};
}
export const mynode= renderCustomNodeShape;当数据渲染之后，分别显示三个不同的节点，信息分别是A、B、C，但是当我在画布中空白的地方随意点击的时候，节点自己被修改了，都显示C，原因不明。
我不知道是我代码的问题还是G6的本身的BUG。
目前解决的办法是监听左键点击事件，每点击一次自动刷新一次画布以正确渲染。