How to get the parent element of a newly created element

Developers
1

Is there any way to get Lane element reference when I drag and drop an element onto a lane from the pallette? By default when I inspected the newly created element’s parent it was the participant, not the lane. But I need to set the lane as its parent.

image

2

But I need to set the lane as its parent.

Why do you want to do this? Notice that in BPMN lanes contain only references to the elements which belong to the process referred by the participant, e.g.

    <bpmn:laneSet id="LaneSet_0pu4l2q">
      <bpmn:lane id="Lane_1gqnvv1">
        <bpmn:flowNodeRef>StartEvent_1</bpmn:flowNodeRef>
        <bpmn:flowNodeRef>Event_0ctp86q</bpmn:flowNodeRef>
        <bpmn:flowNodeRef>Event_145b0wt</bpmn:flowNodeRef>
      </bpmn:lane>
      <bpmn:lane id="Lane_168s0hh">
        <bpmn:flowNodeRef>Event_1b3t0fy</bpmn:flowNodeRef>
      </bpmn:lane>
    </bpmn:laneSet>
1 Like
3

because in the system I’m working on events (called states in the system) belong to (are children of) lanes (stages).
So is there any way to get that information programmatically?

I’ve stumbled upon a couple of events that I could use on the eventBus:
element.hover and commandStack.elements.create.postExecute.

But when combined, I cannot drag any element from the pallette to the diagram.

4

Are you able to share what you already tried out (code-wise)? Inside a CodeSandbox would be great :+1:

5

This is very simplified, but captures the gist.

Also please note, that we’re using Angular 10

6

Thanks for sharing. If it’s about detecting the lane you are hovering while drag&drop, it can be done via the drag.hover event.

import { is } from 'bpmn-js/lib/util/ModelUtil';

eventBus.on('drag.hover', (event) => {
  const { hover } = event;

  if (is(hover, 'bpmn:Lane')) {
    console.log('You are hovering a lane!', hover);
  }
});

Source: drag hover lanes - CodeSandbox

Note, setting the lane as parent won’t work from BPMN perspective, as mentioned in this comment.

7

drag.hover actually worked, but it came with another issue: when I listen to drag.hover events, I cannot connect two elements. In the following screenshot I’m trying to create a sequence flow from the gateway to event:
image

The other way around does not work either.

In the sandbox this issue does not exist though.
What is supposed to be done in this case? Is it a styling issue? Console does not show any errors.

8

I solved my problem this way:

  1. I converted the eventBus event listener to an observable:
public listenTo(event: EventType | EventType[]): Observable<any> {
    return new Observable(observer => {
      this.eventBus.on(typeof event === 'object' ? event : [event], (e: any) => observer.next(e))
    })
  }
  1. Combined element.hover with commandStack.elements.create.postExecute this way:
public onNewElementFromPallette() {
    const hoverOnElement$ = this.listenTo(EventType.HoverOnElement).pipe(
      map(({element}: {element: Shape}) => element),
      filter(element => element.type === ElementType.Stage)
    );
    return this.bpmn.listenTo(EventType.CreateElement).pipe(
      withLatestFrom(hoverOnElement$),
      map(([e, parent]: [any, Shape]) => ({element: e.context.elements[0] as Shape, parent})),
    )    
  }
  1. As a result I get the newly created element plus the parent element where the new element was dropped in, and I’m now able to manually assign it as the actual parent of the new element.

I hope other people find it helpful.
Thank you for your suggestions.

1 Like