New Demo: Standalone Link Routing with Libavoid

[kumilingus]

Libavoid is a C++ library that offers high-quality polyline and orthogonal link routing, effectively navigating around objects, and avoiding overlapping parallel links. It is particularly useful when used in conjunction with interactive diagram editors such as those that can be created with JointJS.

Today's example demonstrates how to use this library (specifically the libavoid-js lib which is a port to JavaScript) to automatically route the links in a JointJS diagram.

The source code is available on GitHub.

[shailendra-kbtechnology]

Nice implementation
have you code in type script ?

[kumilingus]

No. The example is available in JavaScript only.

[shailendra-kbtechnology]

Alright,
i tried the implement in to the ts.
But we are gating error

[kumilingus]

I wonder if you are missing this step.

[shailendra-kbtechnology]

We saw the code but our project in next and we are not using webpack file,
So there have any alternate option?

[kumilingus]

Yeah, you just need to copy the ./node_modules/libavoid-js/dist/libavoid.wasm to the folder the application is being served from.

[shailendra-kbtechnology]

Thanks @kumilingus

[csruchitaoza]

Hey, are you able to archive that library in TypeScript? If yes then could you please share knowledge or perhaps a small demo?

I tried to convert it to JSON but faced the same error as you did.
I'm using angular 17.

Thank you,

[trufak]

Hi!
Please tell me if you have ever encountered such an error:
"RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0)"
It looks like the wasm file is not binary

[kumilingus]

See WebAssembly/spec#1410 (comment).

[trufak]

@kumilingus, is it possible to implement the exclusion of some elements from the number of obstacles ?

[kumilingus]

It should be easy if the elements themselves are not connected to any links.
Just return early here if the element is not an obstacle.

[trufak]

The element represents a container that has output ports. Lines connect the output ports of the container to its child elements. In this case, the vertices of the lines are built trying to go around the parent container.

How can I make sure that the parent container is not an obstacle for child lines?

[kumilingus]

Then I don't know.

You can try asking the author of libavoid if that is supported or not. The other question is whether this functionality has been ported to the JavaScript version or not.

[bernarde01]

This is a great feature! When will this be included in a release version? I am running core 4.0.4, and getPortGroupNames is not yet in this version (although I can see it was added in June to the git repo)

[kumilingus]

Hi, in November. In the mean time, you can replace:

getPortGroupNames()

with:

Object.keys(element.prop('ports/groups'));.

[marty0678]

Hey thanks for this demo! I tried to get it working a little while ago but didn't have much luck, but I didn't spend much time on it. I need to take another crack at it soon - but saw this comment, will this be part of the official JointJS / JointJS+ library at some point based on this comment? That would be awesome if so! The Manhattan router is great but it starts to break down at medium-large drawings.

Thanks again for this awesome library!

[kumilingus]

Right, we have plans to provide a wrapper for the libavoid 3rd party library as a standalone package e.g. @joint/libavoid.

If you want to start using it now, all you need to do is instantiate the AvoidRouter class.

[marty0678]

Just realized I never responded to this, sorry. That's awesome to hear about the future plans. And the issues I had when trying to instantiate it were with the WASM loading, more so than the Joint side, I think. I still haven't had a chance to get back to this, but hopefully I will soon! Thank you for the response!