react-xarrows v2

[Eliav2]

react-xarrows v1 has 1 very annoying issue by design: Xarrow will not rerender if one of the connected elements renders.

I've come with an idea for a new architecture for react-xarrows v2 which handle it, and will also fully be compatible with react v1.
the main component (Xarrow) will stay as it is.

Xwrapper - will be a context wrapper of the arrow(s) and the connected elements.
Xelem - will be a wrapper around a connected element and when it will render it will invoke render(using useContext) on the Xarrows inside Xwrapper context.

lets take simple example:

import React from "react";
import Xarrow from "react-xarrows";

const Simple = () => {
    return (
        <>
            <div id="elem1">elem1</div>
            <div id="elem2">elem2</div>
            <Xarrow start={"elem1"} end="elem2"/>
        </>
    );
}

will be rewritten in version 2 as:

import React from "react";
import Xarrow, {Xelem, Xwrapper} from "react-xarrows";

const Simple = () => {
    return (
        <Xwrapper>
            <Xelem>
                <div id="elem1">elem1</div>
            </Xelem>
            <Xelem>
                <div id="elem2">elem2</div>
            </Xelem>
            <Xarrow start={"elem1"} end="elem2"/>
        </Xwrapper>
    );
}

this way, when one Xelem components will rerender it will use the Xwrapper context to invoke update on all the xarrrows inside the wrapper.
one thing annoying me with this approach - render of Xelem inside a Xwrapper will rerender all Xarrows components inside this Xwapper and not only the relevant one. you will need to wrap each Xarrow and Xelems with Xwrapper to achieve selective rendering!

Breaking changes - currently, the only planned breaking changes will be in some of the advanced customization properties. (for example -> startAnchor.offset will probably be changed)

so what do you think guys? this is a good architecture? do you have a better idea? how can i improve it before starting codeing?
please give a concrete and demonstrated(with code) notes!

[makis-spy]

Hey I just wanna say both ways are super easy and super effective which means this is the best lib on the planet for this. Thanks.

[bismareeo]

I recommend you to think in dependency types like SS = Start - Start, SF = Start - Finish, FS = Finish - Start and FF = Finish Finish, those are in order to know from where the arrow comes and where it goes.

[vlegac]

V2 any close?

[Eliav2]

currently, v1.8 is planned which will introducing entirely new algo for path calculation (related to #70).
after the publish of 1.8 I will start working on v2

[Eliav2]

related:
https://stackoverflow.com/questions/68432809/react-break-dependency-between-2-related-contexts-with-top-level-constant-objec

make your suggestion!

[Eliav2]

v2 is released to dev branch, will very soon be merged to master and will be released as react-xarrows v2.0.0 in npm

[bismareeo]

awesome.!! El dom, 18 jul 2021 a las 19:50, Eliav2 ***@***.***>) escribió:

…

v2 is released to dev branch, will very soon be merged to master and will be released as react-xarrows v2.0.0 in npm — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#53 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI2VDEEICW6FRFC3JNFWIMLTYNSEJANCNFSM42U3XCNA> .

[Eliav2]

published
enjoy!

[bismareeo]

Hello Dear Eliav2, I am using your library right now, and I am doing some tests around it, please if you want to see how I am using it in your library let me know, I have a question and suggestion. Question: Is there a way to avoid render arrows when there are no START or END references? I mean that what happens when the reference START or END has been deleted after the arrow is rendered? El mar, 20 jul 2021 a las 12:53, Eliav2 ***@***.***>) escribió:

…

published enjoy! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#53 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI2VDECYQCZMGBPBOROTRQ3TYWSW5ANCNFSM42U3XCNA> .

[Eliav2]

please open a new discussion and provide a code sandbox to demonstrate this.

[Aqibrafiq001]

@Eliav2 can you help me ? once i change state arrow isnot rerender