When Edge is set to hide, there is a problem dragging the canvas and exporting images #6433
Labels
behavior
Issue about behaviors
bug
status: waiting for maintainer
These issues have not yet been reviewed by a maintainer
v5
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设置隐藏后,导出的图片箭头不会隐藏,导出和图片和画布上显示的不符;
The text was updated successfully, but these errors were encountered: