search

Eliav2 / react-xarrows

Draw arrows (or lines) between components in React!
https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark
MIT License
584 stars 75 forks source link

Anchor not being updated on resizing due to internal state change #138

Closed shorttempr closed 2 years ago

shorttempr commented 2 years ago

I am using some Accordion elements in Draggable nodes. Currently arrow anchors use values like left, top which are calculated using the Draggable element's dimensions. If Draggable nodes have content where users can manually show/hide children like Accordion, arrow anchors are not updated on state change and thus appear disconnected or incorrectly positioned.

Demo using simple show/hide behavior: https://codesandbox.io/s/create-react-app-forked-4m4338?file=/src/Arrows.js

I can think of 2 ways to deal with this problem (using Accordion as an example):

  1. On Accordion transition end, recalculate the dimensions of the parent Draggable and trigger updateXarrow. This may not be the most developer friendly approach as I am struggling to create a DraggableData event from the MUI Accordion API, which can then be passed to updateXArrow(). An example can help perhaps?
  2. If the library adds provision for tracking an HTML element like div as an anchor, developers can position that anchor in a way that's not affected by resizing due to internal state changes. This will also add flexibility for end users to position the anchor based on their preference.
shorttempr commented 2 years ago

On experimenting some more I realized the library already offers the second approach. Closing the issue. Sorry for the noise!