msagljs icon indicating copy to clipboard operation
msagljs copied to clipboard

Is it possible to use Custom HTML / SVG as edges?

Open B45i opened this issue 2 years ago • 4 comments

I want to use this library in my React.js app and would like to render my own React components as edges. Even custom HTML or SVG could work.

Or If it's possible to praise the coordinates of edges, I can use that to draw the graph.

Is either of this possible?

B45i avatar Nov 28 '23 07:11 B45i

Yes, it is possible, and msagljs is specially designed to support this scenario. In this case you take dependency only on @msagl/core. Please have a look at https://microsoft.github.io/msagljs/docs/api, which has an example. You use @msagl/core to calculate the geometry: the graph rendering happens in your code. You can see how to parse the geometry of the curve geometry of an edge in https://github.com/microsoft/msagljs/blob/ad15357a3be115d9b26cb3c25d8764e9d40a354f/modules/renderer-svg/src/svgCreator.ts#L528.

Or you can also use a simpler approach by calling https://github.com/microsoft/msagljs/blob/ad15357a3be115d9b26cb3c25d8764e9d40a354f/modules/core/src/math/geometry/curve.ts#L1713

as in

https://github.com/microsoft/msagljs/blob/ad15357a3be115d9b26cb3c25d8764e9d40a354f/modules/core/test/utils/testUtils.ts#L115.

levnach avatar Nov 28 '23 16:11 levnach

@assufsun, do you have an example of using just @msagl/core?

levnach avatar Nov 28 '23 18:11 levnach

I wasn't able to figure it out from doc. It would be super helpful if someone can provide a working sample.

B45i avatar Dec 28 '23 12:12 B45i

@B45i, can you describe in more details what you try to achieve? What do you mean by this: "I want to use this library in my React.js app and would like to render my own React components as edges."

levnach avatar Dec 28 '23 22:12 levnach