antvis / XFlow

React component for building interactive diagrams.

Home Page:https://x6.antv.antgroup.com/xflow/guide/introduction

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

渲染网格时,在setX6Config中配置grid为true或者相应的对象后,网格仍然无法渲染。

igodm opened this issue · comments

Describe the bug

这是我定义graphConfig的方法:
export const useGraphConfig = createGraphConfig((config) => {
config.setX6Config({
grid: { visible: true },
background: { color: '#151A23' },
});
});
const graphConfig = useGraphConfig();

在XFlowCanvas组件中是这样使用的:
<XFlowCanvas
position={{ top: 40, left: 150, right: 290, bottom: 0 }}
config={graphConfig}
/>

但是网格没有渲染。
我把graphConfig打印了一下,Promise的状态是fulfilled,但是result很奇怪,设置的background生效了,但是grid没有生效,还是false,打印结果如下:
{
"rotating": false,
"resizing": false,
"connecting": {
"sourceAnchor": "center",
"targetAnchor": "center",
"connectionPoint": "anchor",
"snap": {
"radius": 20
},
"router": {
"name": "manhattan"
},
"connector": {
"name": "rounded",
"args": {
"radius": 15
}
},
"highlight": true,
"dangling": false
},
"background": {
"color": "#151A23"
},
"grid": false,
"selecting": {
"enabled": true,
"multiple": true,
"selectCellOnMoved": true,
"showNodeSelectionBox": false,
"rubberEdge": true,
"rubberNode": true,
"movable": true
},
"snapline": {
"enabled": true,
"className": "xflow-snapline",
"clean": 5000
},
"history": {
"enabled": false
},
"clipboard": {
"enabled": true,
"useLocalStorage": true
},
"scroller": {
"enabled": false
},
"mousewheel": {
"enabled": true,
"minScale": 0.01,
"maxScale": 1.5,
"factor": 1.1,
"modifiers": [
"ctrl",
"meta"
]
},
"panning": {
"enabled": true
},
"scaling": {
"max": 1.05,
"min": 0.01
},
"keyboard": {
"enabled": true
},
"interacting": {
"nodeMovable": true,
"edgeLabelMovable": false
},
"async": false,
"highlighting": {
"nodeAvailable": {
"name": "className",
"args": {
"className": "available"
}
},
"magnetAvailable": {
"name": "className",
"args": {
"className": "available"
}
},
"magnetAdsorbed": {
"name": "className",
"args": {
"className": "adsorbed"
}
}
}
}

Your Example Website or App

https://codesandbox.io/s/v1c7hg?file=/App.tsx:1035-1051

Steps to Reproduce the Bug or Issue

1.打开链接
2.查看画布
3.检查是否有网格渲染

Expected behavior

网格会被正常渲染
打印的结果中 grid为 true

Screenshots or Videos

No response

Platform

  • OS:macOS
  • Browser: Chrome
  • Version: 118.0.5993.96

Additional context

No response

👋 @igodm

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

my mistake