Adding labels/icons to links

[klauspaiva]

link to the gif in case it fails to load

Use case:
User needs a label displayed on the link path.

Label could be a plain text (which could be a "name" for that link) or an arbitrary React component actually (as illustrated by the gmail icon on the gif above)

Proposed syntax:

const link = new LinkModel();
// ...
link.setLabel(
    <div>
        <img src="..." alt="" />
    </div>
);

Or for the plain text version:

const link = new LinkModel();
// ...
link.setLabel('Something here');

Which we can then add some basic CSS styling for this case.

And obviously, if no label is provided, behaviour remains as current.

Discussion:

I have put together an initial implementation that does what is shown above, but I'm no SVG expert, so I was wondering how you think you could approach this problem?

At first I tried with textPath https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath, but it then follows the orientation of the path, which makes it really hard to read/see.

For the demo above, I used SVGGeometryElement.getPointAtLength https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength so I can dynamically calculate the appropriate position.

Happy to submit a PR once I make the code more generic, do some clean up, etc...
But for now would like your feedback on how you would approach (from a technical perspective) this use case.

Cheers,
Klaus

[klauspaiva]

Actually, it just occurred to me that serialisation is not going to work if a React component is passed in. :/ (at least as far I know about this subject)

So maybe only plain text labels would be valid (at least for the default link shipped with the library).

[dylanvorster]

Hey man, Ive been super busy so apologies for only responding now. The correct way to do this is to have a more Model <-> Factory <-> React pattern where you register factories similar to the rest of the library that are responsible for rendering the view that represents the underlying model. This means that we could use a factory for returning the corresponding widget that represents the label/icon on a link. Changing the model results in the diagram reacting, selecting the correct factory, which then return the react widget. The model is thus de-coupled from the view and can thus be serialised.

[klauspaiva]

Cool, no worries, dude.
I certainly understand maintaining an open source library is no easy task. :)

have a more Model <-> Factory <-> React pattern where you register factories similar to the rest of the library that are responsible for rendering the view that represents the underlying model. This means that we could use a factory for returning the corresponding widget that represents the label/icon on a link.

So, if I understood it right, you're suggesting we could have the label as a top-level entity, in the same way as we have node and link today?

In any case, in this meantime I completed the work I had in my branch to accomplish that, so I will submit a PR so we can discuss this further by looking at the code directly.
If it happens to be the case, happy to change the direction after your feedback.