search

antvis / Graphin

A React toolkit for graph visualization based on G6
https://graphin.antv.antgroup.com
MIT License
980 stars 263 forks source link

Partial render size is too small causing artefacts on labels #489

Open Alnaimi- opened 11 months ago

Alnaimi- commented 11 months ago

Describe the bug

The bounded box around the canvas local refresh/render in Graphin seems to be too small for some Font Families (and or viewports depending on browser used).

I suspect the local refresh box is calculated too eagerly, so if you have a certain font family or if you use Safari, it ends up overflowing - leaving artefacts behind. See picture below.

This seem to happen more on Safari (not so frequent in Chrome).

Suggestion: We should add some padding around the local render to avoid text/image overflow.

Your Example Website or App

https://codesandbox.io/s/runtime-butterfly-z2fmlz?file=/src/App.tsx

Steps to Reproduce the Bug or Issue

  1. Open Safari browser on Mac
  2. Open the URL https://codesandbox.io/s/runtime-butterfly-z2fmlz?file=/src/App.tsx
  3. Drag the node around

Expected behavior

No artefacts should be left behind.

Screenshots or Videos

Screenshot 2023-06-13 at 13 58 13

Platform

Additional context

No response

chammaaomar commented 3 weeks ago

Hi there, did you ever figure out how to resolve this? We're running into the same issue. You describe adding padding around the local render box... is there a way to achieve / hack that as a consumer of the library, without forking it or modifying its source code? Thanks for the help!