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'));.