How to create SendToBack and BringToFront in diagram?

GoJS
1

I’m trying to add “Send To Back” and “Bring To Front” functionality into the Block Editor sample.
I didn’t find any about this function in the API. How do I achieve these functions?

Thanks.

2

First, please read about Layers and z-ordering: GoJS Layers -- Northwoods Software

Does your diagram use Layers at all? Search for uses of the layerName property.

If so you can use the commands that are defined in the DrawCommandHandler extension:
DrawCommandHandler | GoJS API
DrawCommandHandler | GoJS API

If you don’t need any of the other functionality, you can just copy the two functions from there. Note that if you want to remember (persist) the ordering, you will need to add a TwoWay Binding for the Part.zOrder property on each of the node and link templates.

OR

If you are not using Part.layerName or Part.zOrder and if you don’t need to persist the z-ordering, then all of the Nodes and Links are in the default Layer named “” (the empty string). It is then easiest to implement push-to-back by changing the layerName of each selected Part to be “Background”, and for pull-to-front to “Foreground”. Something like:

myDiagram.commit(d => d.selection.each(p => p.layerName = "Background"));
1 Like
3

Thanks for the reference. I use both pullToFront and pushToBack and it works really well.