Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When Edge is set to hide, there is a problem dragging the canvas and exporting images #6433

Open
1055041142 opened this issue Oct 24, 2024 · 3 comments
Assignees
Labels
behavior Issue about behaviors bug status: waiting for maintainer These issues have not yet been reviewed by a maintainer v5

Comments

@1055041142
Copy link

1055041142 commented Oct 24, 2024

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 / 重现步骤

复现截图
test

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设置隐藏后,导出的图片箭头不会隐藏,导出和图片和画布上显示的不符;

@github-actions github-actions bot changed the title edge在设置隐藏的时候,拖拽画布和导出图片出现问题 When Edge is set to hide, there is a problem dragging the canvas and exporting images Oct 24, 2024
@yvonneyx yvonneyx self-assigned this Oct 24, 2024
@yvonneyx yvonneyx added the behavior Issue about behaviors label Oct 24, 2024
@yvonneyx
Copy link
Contributor

问题 1 目前已经修复并发版了,升级后可验证~

@yvonneyx yvonneyx added the status: waiting for author Issue with insufficient information label Dec 9, 2024
Copy link

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information. | 由于该 issue 缺少关键信息且已闲置 7 天,现已自动关闭。如需重新打开此问题,请提供所缺失的信息。。

@1055041142
Copy link
Author

你好,问题2有修复的计划吗

@github-actions github-actions bot added status: waiting for maintainer These issues have not yet been reviewed by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 26, 2024
@github-actions github-actions bot reopened this Dec 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
behavior Issue about behaviors bug status: waiting for maintainer These issues have not yet been reviewed by a maintainer v5
Projects
None yet
Development

No branches or pull requests

2 participants