Select subProcess when clicking inside of it

Hey everyone,

our goal is to select a subProcess when clicking inside of it. Currently subProcesses can only be selected when clicking on their edges, which works good for a zoomLevel of 1, but is very hard to hit when zooming out.

Screenshot 2021-02-09 at 20.39.11

Therefore, I was wondering if it is someone possible to detect whether a click happens inside a subProcess.

As the selection is not changed to a specific element, selection.changed does not reveal any useful information. Using element.mousedown is promising, as it is called when clicking inside the subProcess but not when clicking on an event for instance. However, the event inside element.mousedown gives me the root element (Process_1) rather then the subProcess.

Does anyone has an idea for a possible solution or event I can use?

Thank you for any hint!

As you said, it’s intended that container elements as sub processes are only selectable on their edges. This has good reasons, e.g. it should be easier to navigate inside container elements.

Overriding this behavior is not an easy task. Can you tell us a little more in detail, why you think no need this?

We use a model extension that allows to build larger structures with subProcesses (I will attach a screenshot to visualize our use case). While the editing is currently allowed in the subProcess, too, in our use case, we plan to move the editing of subProcesses to a separate tab, in which the content of it is loaded and can be edited freely. This works really well – however, as soon as we have to zoom out to display the overall model, it is nearly impossible to hit the edges of a subProcess to use the context menu in order to connect these subProcesses with ease.

Therefore, we want to allow users to also select subProcesses, when clicking inside of them (but not hiting another element). Thus, I was wondering if it is possible to detect, e.g., on element.mousedown whether the position of the cursor is inside of a subProcess?

Maybe, I can use a similar function that is used by the connect tool, in which the target is marked in green, as soon as the mouse hovers the subProcess?

Thank you for your help & this awesome library!

If I understand you correctly, you want to allow selecting a SubProcess by clicking its body.

I think the easiest way to do this is to replace BpmnInteractionEvents with a custom implementation which changes SubProcess’ hitbox. Have a look at this codesandbox.


Thanks for sharing some details on your use-case.

As a general advice, be careful whether to change the existing behavior.

Especially in larger diagrams (and/or when zoomed in) it can be tedious to have container elements directly selectable. This is where we came from (v4.x behavior) and we arrived where we’re right now for a reason. You may read our v5.0.0 announcement blog post for more details.

1 Like

Thanks everyone for the quick help and the interesting hints!

The solution proposed by @barmac works perfectly for our use case. However, I also think that the suitability of this extension is strongly dependent on the individual use case.