[SOLVED] Diagram shapes over Palette shapes in Diagram (z-index)?


I have a Palette with shapes and some json shapes-data drawn in Diagram.

When I drag and drop a “SquareArrow” (or another) shape from Palette to Diagram and put it above the initial shapes, I cant see them, but If I create another new shape in Diagram (after “SquareArrow”) and put them on the “SquareArrow” I can see it

How I can put all the shapes in Diagram (initial and news) above the Palette shapes?


I’m sorry, but I do not understand your situation. Can you provide a CodePen or jsFiddle, or some minimal code and some screenshots to reproduce the problem?

Hi Walter

Here is the jsfiddle :smile:



  1. Put the “SquareArrow” shape in diagram from palette and re-size it
  2. In diagram, put the “Initial” shapes over the re-sized “SquareArrow” shape. I can’t see them :confused:
  3. Create some “New” shapes in diagram. Right clic in diagram > New Item
  4. In diagram, put the “New” shapes over the “SquareArrow” shape. I can see the “New” shapes :grinning:

I want to see all the “Initial” and the “New” shapes over the “SquareArrow” shape in diagram

Thanks for all!

Oh, I see what you mean. If you always want your “Initial” or “New” nodes to be in front of the gray SquareArrow node, I suggest that you set:

    $(go.Node, . . .,
        { layerName: "Background" },
        . . .

on the template that has the SquareArrow figure Shape.

If you are using the same template for both kinds of nodes, you can data bind the Part.layerName property to be a layer name, so that you can control the z-ordering of the different kinds of nodes. I assume you know about data binding. Read more about layers at http://gojs.net/latest/intro/layers.html

It works! :thumbsup: