G6 v4.x renderer='svg' exported svg contains hided nodes and edges

[balrogden]

Describe the bug / 问题描述

use graph with my cusomt nodes. Some nodes amd edges are hided by graph.hideItem. When i call toFullDataURL all hided nodes and edges are visible on result svg

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

create graph with renderer='svg'
used layout = dagre
add some nodes and edge
call graph.layout
hide some nodes using graph.hideItem
call graph.toFullDataURL( svgUrl => {do something with svg})
extent of svgUrl will be correct - only for visible nodes, but all invisible nodes wich lies inside extent will be visible in the svgUrl

G6 Version / G6 版本

4.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome, Firefox

Additional context / 补充说明

No response

[balrogden]

Reproduction code - after mounted call hideNodes, - there is only 4 nodes visible .
After call exportSvg - in downloaded svg will be visible all 6 nodes

`const data = {
nodes: [
{ id: '1', },
{ id: '2', },
{ id: '3', },
{ id: '4', },
{ id: '5', },
{ id: '6', },
],
edges: [
{ source: '1', target: '2', },
{ source: '1', target: '3', },
{ source: '1', target: '4', },
{ source: '1', target: '5', },
{ source: '2', target: '6', },
{ source: '3', target: '6', },
{ source: '4', target: '6', },
{ source: '5', target: '6', },
],
};

const graph = new G6.Graph({
container: 'mountDiv', // String | HTMLElement, required, the id of DOM element or an HTML node
width: 800, // Number, required, the width of the graph
height: 500, // Number, required, the height of the graph
renderer:'svg',
modes: {
default: [
{
type: 'drag-canvas',
allowDragOnItem: true,
enableOptimize: false,
},
{
type: 'zoom-canvas',
enableOptimize: false,
},
]
},
layout: {
type: 'dagre',
rankdir: 'LR',
nodeSize: [120-20, 100-20],
nodesep: 25,
ranksep: 50,
sortByCombo: true
},

});

graph.data(data); // Load the data defined in Step 2
graph.render(); // Render the graph

function hideNodes() {
graph.hideItem(graph.findById('3'))
graph.hideItem(graph.findById('4'))
}
function exportSvg() {
graph.toFullDataURL(svgUrl => {
const link = document.createElement('a')
link.href = svgUrl
link.download = 'testfile'
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, 'image/svg', {
backgroundColor: '#ffffff',
padding: [10, 10, 10, 10]
})
}
`