Digraph Layout

GoJS
#1

Hi, I’m trying to build an workflow diagram with GoJS.

Diagram looks like this;

As you can see link from “Save” to “Expense Form” link overlaps with rectangle. In diagram gray boxes are not visible and they specify a GoJS group object.

If I made change on diagram or call “diagram.layoutDiagram(true)” explictly diagram becomes like this;

As you can see link from “Save” to “Expense Form” shifts and disconnects from related boxes. Also some links chooses unnecessary paths.

Diagram code little bit complicated but object hierarcy looks like this;

  • Pool (invisible in diagram and uses digraph layout)
    • Task Container ( gray background )
      • Task ( colored boxes like “expsense form” )
      • ActionContainer (blue boxes container, uses vertical layout)
        • Action ( blue box )

My question is how can I solve this layout problem ?

Thank you

#2

Are you using Links with .routing set to AvoidsNodes?

It appears that the links are connecting simple Nodes with each other, not Groups with Nodes or Groups with Groups. If so, have you considered setting Group.avoidable to false?

#3

Is there always a one-to-one mapping between Tasks and ActionContainers? If so, it might be simpler to discard Task Containers and just extend Tasks to include a list of Actions.

#4

Thank for recommendations. I have removed task container and most of layout problems are fixed now.

Only remaining problem is; link from “Save” to “Expense” still overlaps. Other links are not have this kind of problem, only difference is save link from and to nodes are in same group (Task).

I could reproduce same problem when I create a new link within same group. example;

#5

How do you define your Links?

Is "Task" still a Group?

Are you still using two separate Nodes, one for the task and one for the list of actions?
#6

Hi again,

I have build an simplified working code so you can investigate further. Just save to an html file. Maybe you can propose to remove actioncontainer but in original code task contains other objects than actions so I have to keep actioncontainer to distinguish childs.

#7

You aren’t setting fromSpot on your ports coming out of your Action nodes. That means the link should come out towards the left from that port, crossing directly over the node. Add this to your getPort function to force the link to come out towards the right from an Action node:

fromSpot: spot,

#8

Perfectly worked. Thanks for fast reply .