Collapsed shapes (edges) behaves oddly in pure diagram-js

[catcher]

Hi,
I’m trying using pure diagram-js (not bpmn) and trying to handle sub-elements (In my meaning - elements that are placed inside another element).
However facing some issues which I didn’t dig too much yet but decided to ask you first becuause may you gave a hint where to start looking for (maybe somewhere in bpmn-js since there is sub-process concept).
My issues actually are not actually related to collapsing elements but to connections between them (or maybe rather more specific to who is the edge parent).
Issues:

1. Edge between inner shape and outer shape enlarges parent element after enlarge.
   
2. Edge points to hidden shape and sometimes (after enlarging) is not visible (depends I think if the source was child of root or target):
   
   
3. The edge is still visible after collapsing when both shapes where created and connected outside the parent shape, and then moved one by one to the parent:
   

I’m not asking you to solve me this issue of course (I’m aware that such behavior might be due to my implementation), but maybe you already gone through similar problems when implementing more specific diagrams (like bpmn), and have some ideas, code snippet or tips that can help me.
Maybe I went the wrong way earlier when implement ‘connect’ function where taking parent of the source for the edge (?):

this.createConnection(source, target, { ...rulesAttrs, ...attrs }, source.parent, hints);

Maybe I should use ‘root’ shape for all edges?

I appreciate any suggestion.

Regards,
Michal

[Martin]

Hi @catcher ,

very cool to see you using diagram-js. We have similar issues in bpmn-js, specifically with associations (sequence flows can’t cross scopes).

Most of your issues seem to be caused by the connection not having the correct parent. E.g.

Edge between inner shape and outer shape enlarges parent element after enlarge.

The parent should be the outer shape (root in this case), so when expending, the connection is not a direct child and influences resizing.

The edge is still visible after collapsing when both shapes where created and connected outside the parent shape, and then moved one by one to the parent:

The Parent of the connection is not updated when the shapes are moved. Check out this file on how we solved it in bpmn-js

[Martin]

Having the connection still connected to the child when the parent is collapsed might be confusing for the user. In bpmn-js, we reconnect the Association to the parent in case of a collapse (cf. bpmn-js/ToggleCollapseConnectionBehaviour.js at master · bpmn-io/bpmn-js · GitHub).

This might be something to consider if your use-case allows for it.

Hope this helps and let me know if you have further Questions

[catcher]

Thanks @Martin. It helped me a lot. I had to add more stuff related to my domain but your suggestions was very helpful to me.