Node under swimlane

Question

Hi - I'm having an issue with swimlanes. I have tried expanding the bpmn showcase project by adding swimlanes to the palette.

If I add a node (like Task) and then add a swimlane, I cannot then drag that node onto the swimlane. Likely related to the zIndex.

My attachment contains the source code as well as an .mp4 that demonstrates my issue.

Even if I could force swimlanes to be added before any other nodes, I think I would still run into similar issues if the user were to add additional lanes or phases at some point after having made some nodes.

Hoping I'm just missing something simple. Perhaps a stackblitz would help us to work it out.

Thanks!

Attachment: bpmnAugust9a_383119c3.zip

Balasubramanian Manikandan · Answer

We have examined your query. After placing the nodes and
subsequently adding the swimlane to the diagram, when attempting to position a
node above the swimlane, it automatically positions itself behind the swimlane.
This is because the node possesses a lower zIndex compared to the swimlane.
This is the actual behavior of the zIndex functionality within the diagram
control. If you wish to modify this behavior, it is necessary to adjusting the
zIndex of the node dynamically at the time of dropping it above the swimlane.
To illustrate this, we have provided a sample solution. In our example, we
incremented the zIndex value of the node during the drop process above the
swimlane using the drop method. Please refer to the code example and sample
below.Code Snippet

public drop(args : IDropEventArgs){
        if((args.element as
  any).zIndex < (args.target as any).zIndex){
          (args.element
  as any).zIndex = (args.target as any).zIndex + 4;
        }
        this.diagram.dataBind();
      }

Sample

https://stackblitz.com/edit/angular-uichaq-82lfgy?file=src%2Fapp.component.html

Kabe · Answer

Hi - thanks for your quick response! I will try it out right away.

That makes sense. I see you did +4 because to account for the different sections of the swimlane.

At first I noticed that when working with bpmn objects you are allowed to drop nodes onto the 'expanded sub process' node and the same issue does NOT occur. You can drop a lower index node on top of a higher index expanded sub process (see screenshot). As a result I thought it was built-in and would work the same way for swim lanes.

I think it should probably work the same way for swim lanes? Perhaps add this as a suggestion?

Attachment: zindex_7754565a.zip

Vivisa Ganesan · Answer

Hi,We will validate and update you with more details on August 16,2023.Regards,Vivisa

Gobinath Dhamotharan · Answer

Hi Kabe,Reported Issue : Exception Occurs When
Dragging and Dropping Existing Nodes into SwimlaneWe can reproduce the
issue and confirmed this as a defect. We have logged a defect report for this
issue. We will fix this issue and provide the patch on August 22th, 2023 weekly patch
release.  https://www.syncfusion.com/feedback/46156/exception-occurs-when-dragging-and-dropping-existing-nodes-into-swimlaneDisclaimer: Inclusion of this solution in the weekly release may change
due to other factors including but not limited to QA checks and works
reprioritization.Regards,  Gobinath

Gobinath Dhamotharan · Answer

Hi,

We have fixed the reported issue and included it in our latest patch release which is rolled out successfully.

Please upgrade to the latest version (v22.2.10) packages of the diagram to resolve this issue.

https://www.npmjs.com/package/@syncfusion/ej2-diagrams

Regards,

Gobinath