layer bring to front not working

[Liam Mir]

hi

I have two layers on the diagram and there is some native nodes on each layer.

when I'm changing the layer zIndex or I'm calling bringToFront function there isn't any change in displaying nodes.

but when im calling bringToFront on the node it works fine.

could you explain how bring to front or send to back is working?

i have checked documents but comments wasn't complete.

regards Liam.

[Sivaranjith Jeyabalan]

Hi Liam,

The bringToFront command brings the selected element to the front over all the other overlapped elements. The sendToBack command moves the selected element behind all the other overlapped elements. The order commands bringToFront and sendToBack will not work for HTML and native nodes. We render both the nodes in a separate layer (HTML layer).

Regards,

Sivaranjith

[Liam Mir]

Hello Sivaranjit

Link to Sample of Layers on stakblits

this is a sample i have created on stakblitz

its not working

please check white circle , its always on the colored one

both nodes are Native.

The order commands bringToFront and sendToBack will not work for HTML and native nodes. We render both the nodes in a separate layer (HTML layer)

what if I select layer nodes and call BringToFront Per node?

[Sivaranjith Jeyabalan]

Hi Liam,

If a layer contains HTML and native nodes, the bringLayerForward and sendLayerBackward method
will not work for it. As mentioned earlier, we render both the nodes in a separate layer. However,
we have modified your sample with basic shape nodes, and you can use
bringLayerForward and sendLayerBackward method for that shapes. Please find the sample below.

Sample:
Angular Sample for layaers (forked) - StackBlitz

Regards,

Sivaranjith

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Liam Mir]

Hello Sivaranjit

in my project I'm only  using  Native nodes and I have changed basic shapes like sample I made to  Native node because  my goal was to use only one layer to avoid bringToFront problem between basic shapes layer and native layer and unfortunately the sample you have made is not working for me

thanks for your time

[Shyam G]

Hi Liam,

The bringLayerForward and sendLayerBackward method works only when the layer in diagram contains normal shapes like basic, flow, BPMN and so on. It doesn’t work if any one layer in diagram contains native nodes. This is a default behavior of our diagram control.

Regards,

Shyam G

[Liam Mir]

Hi all

thanks for your support and answers

finally I did it in this way

bringToFront() {

let layer = this.diagram?.getActiveLayer();

if (layer && layer.objects && layer.objects.length) {

let nodes = this.diagram?.nodes.filter(a => layer?.objects?.includes(a.id || ''));

if (nodes && nodes.length) {

this.diagram?.clearSelection();

this.diagram?.select(nodes, true, undefined);

this.diagram?.bringToFront();

}

}

}

I have to mention , before calling this function I'm setting the active layer

how change layer nodes visibility-stakckBlitz

[Sivaranjith Jeyabalan]

Hi Liam, 

We are glad to hear that your requirement has been fulfilled.

Regards,

Sivaranjith