How to properly layout a Petri Net in jointjs?

This issue has been tracked since 2022-02-05.

Hey,
I am struggling to layout an existing graph with places, custom transitions and links on the respective paper. The graph is rendered already, but all places and transitions are clustered in a single place. I tried to reset their position property in a "smart" way, but failed with that as you cannot discover any Petri net afterwards. Furthermore, the position of the places did not automatically update, only when i dragged them a little bit they would jump to their new position.

Anyhow, I found this demo, last time committed to by @kumilingus and reviewed the corresponding code on Github but didn't quite understand it. Moreover, the example is quite extensive, i do not want to give any options for laying out the Petri net, instead i just want to provide a basic layout which is better than having all places and transitions clustered on a single place.

Can anyone help me to transfer this to an already existing graph?

kumilingus wrote this answer on 2022-02-07

The DirectedGraph is a function you can call on any graph.

joint.layout.DirectedGraph.layout(graph, { /* options */});

I tried to reset their position property in a "smart" way, but failed with that as you cannot discover any Petri net afterwards. Furthermore, the position of the places did not automatically update, only when i dragged them a little bit they would jump to their new position.

You have to provide us with the code.

LordHeImchen wrote this answer on 2022-02-07

Oh, i totally missed that link, works like a charm!
Thanks once again.

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date