arrow move on scroll

[vikasChhipi07]

code:-

props.connections.map((element, index) => {
                    return (
                        <Xarrow
                            key={index}
                            start={element.companyRef}
                            end={element.clientRef}
                            color={randomColor()}
                            strokeWidth={2}
                            curveness={0.5}
                            dashness={false}
                            animation={1}
                            animateDrawing={true}
                        />
                    );
                })

when i scroll arrow move with it. Is there a way to stop this

[Eliav2]

You should render xarrow inside the scrollable window. if it already does,provide full code at sandbox so I could debug

[vikasChhipi07]

xarrow is rendering inside another scroll-able window. when i scroll xarrow does not re-render itself. i want it to re-render itself whenever user scroll . Is there a solution for that?

[Eliav2]

please refer to #41, maybe it will help. anyways, in v2 this problem should not happen. it will take few more weeks to be released

[troy191990]

@Eliav2 , I have taken a look at the examples above and tried to replicate the "solution" steps, however for my use-case the arrows do not work as expected when done in a scroller. Here is a codesandbox link for what I am looking experiencing. https://codesandbox.io/s/elastic-sun-z6ikp

I need the arrows (left column) to "attach" to the left box, when scrolling. Currently they stay static. Do you have any ideas on how to achieve this ?

[Eliav2]

well, after looking into your example, this example requires custom event listeners that were supported until react-xarrows v1.4.4.

this behavior was removed from v1.5.0. to understand why, see this comment I will consider thinking about more 'Reactish' implementations to handle such cases in future releases.

[Eliav2]

arrow v2 is released on dev branch and now you can address this issue with much simpler approach! just use onScroll event and the new hook useXarrow!

const DraggableBox = ({ box }) => {
  const updateXarrow = useXarrow();
  return (
      <Draggable onDrag={updateXarrow} onStop={updateXarrow}>
        <div id={box.id} style={{ ...boxStyle, position: 'absolute', left: box.x, top: box.y }}>
          {box.id}
        </div>
      </Draggable>
  );
};

const ScrolledDiv = ({ children, style }) => {
  const updateXarrow = useXarrow();
  return (
    <div
      style={{ height: '150%', width: 300, overflow: 'auto', position: 'relative', ...style }}
      onScroll={updateXarrow}>
      {children}
    </div>
  );
};

const ScrollTemplate = () => {
  const box = { id: 'box1', x: 20, y: 20 };
  const box2 = { id: 'box2', x: 320, y: 120 };
  return (
    <div style={{ ...canvasStyle, background: '#e0ffd2' }} id="canvas">
      <Xwrapper>
        <ScrolledDiv style={{ background: '#d2f6ff' }}>
          <DraggableBox box={box} />
        </ScrolledDiv>
        <ScrolledDiv style={{ background: '#f8d2ff' }}>
          <DraggableBox box={box2} />
        </ScrolledDiv>
        <Xarrow start={'box1'} end={'box2'} />
      </Xwrapper>
    </div>
  );
};

stay tuned for the official release on master very soon.