microsoft / msagljs

A JavaScript graph layout engine: port of MSAGL
https://microsoft.github.io/msagljs/
MIT License
146 stars 15 forks source link

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

Open B45i opened 9 months ago

B45i commented 9 months ago

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?

levnach commented 9 months ago

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 commented 9 months ago

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

B45i commented 8 months ago

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

levnach commented 8 months ago

@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."