IssueHuntDo you want to work on this issue?
You can request for a bounty in order to promote it!
When Edge is set to hide, there is a problem dragging the canvas and exporting images #6433
1055041142 posted onGitHub
Describe the bug / 问题描述
问题1：edge在style设置隐藏后，使用drag-canvas、zoom-canvas 和 optimize-viewport-transform 一起使用时，拖拽画布和缩放画布时，会导致edge隐藏失效；
问题2：edge在style设置隐藏后，导出的图片箭头不会隐藏，导出和图片和画布上显示的不符；
复现代码：
import { Graph } from '@antv/g6';
const data = {
nodes: new Array(16).fill(0).map((_, i) => ({ id:node${i + 1}})),
edges: [
'default-arrow',
'triangle-arrow',
'simple-arrow',
'vee-arrow',
'circle-arrow',
'rect-arrow',
'diamond-arrow',
'triangleRect-arrow',
].map((id, i) => ({
id,
source:node${i * 2 + 1},
target:node${i * 2 + 2},
style: {
visibility: 'hidden'
}
})),
};
const graph = new Graph({
data,
edge: {
style: {
labelText: (d) => d.id,
labelBackground: true,
endArrow: true,
startArrow: true,
endArrowType: (d) => d.id.split('-')[0],
},
},
layout: {
type: 'grid',
cols: 2,
},
behaviors: ['optimize-viewport-transform', 'drag-canvas', 'zoom-canvas']
});
graph.render();
const handleDownload = async () => {
const dataURL = await graph.toDataURL({
encoderOptions: 1, // 图片质量
type: 'image/png',
mode: 'overall',
});
const [head, content] = dataURL.split(',');
const contentType = head.match(/:(.*?);/)[1];
const bstr = atob(content);
let length = bstr.length;
const u8arr = new Uint8Array(length);
while (length--) {
u8arr[length] = bstr.charCodeAt(length);
}
const blob = new Blob([u8arr], { type: contentType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download =test.png;
a.click();
}
setTimeout(() => {
handleDownload()
}, 1000)
Reproduction link / 重现链接
https://stackblitz.com/edit/react-eyqgta?file=index.js
Steps to Reproduce the Bug or Issue / 重现步骤
G6 Version / G6 版本
🆕 5.x
Operating System / 操作系统
Windows
Browser / 浏览器
Chrome
Additional context / 补充说明
问题1：edge在style设置隐藏后，使用drag-canvas、zoom-canvas 和 optimize-viewport-transform 一起使用时，拖拽画布和缩放画布时，会导致edge隐藏失效；
问题2：edge在style设置隐藏后，导出的图片箭头不会隐藏，导出和图片和画布上显示的不符；
