Grid "z-index", show above elements.

[BigPackie]

Is it possible to make the grid appear above the elements instead of behind them? If so, how?

[kumilingus]

1. You can bring the grid HTMLElement to front. It will draw the grid also above the tools though (e.g. linkTools, elementTools, ui.Halo, ui.Selection).

const gridEl = paper.el.querySelector('.joint-paper-grid');
gridEl.style.pointerEvents = 'none';
gridEl.style.zIndex = 1;

2. For that reason It would be better to draw the grid with a single SVGPathElement (or SVGRectElement with SVGPatternElement) and append it to one of the paper layers (It is a similar approach used in Hexagonal Grid demo).

const pathEl = V('path', { fill: 'none', stroke: 'gray', d: myFunctionToDrawGrid(gridSize) }).node;
paper.getLayerNode(dia.Paper.Layers.BACK).appendChild(pathEl);

(Note that even though the layer API is not completed yet it's safe to use)

[BigPackie]

Thanks for the quick help.

So I have played around with the Hexagonal Grid demo and realized that printing out the layers joint.dia.Paper.Layers gives you this:

{ 
  CELLS: "cells", 
  BACK: "back", 
  FRONT: "front",
  TOOLS: "tools", 
  LABELS: "labels" 
}

In the DOM, layers are defined in the following order: BACK -> CELLS -> LABELS -> FRONT -> TOOLS.

Decided to move the grid to CELLS layer paper.getLayerNode(joint.dia.Paper.Layers.CELLS).prepend(gridEl);
I still have to set pointerEvents to none to remove inconsistency on hovering above the empty hexa cells but then the nice hover effect and cursor icon are unfortunately lost.

Now I have to find out how well will it work with the traditional rectangular grid, but it looks promising.

Note: appendChild() or prepend() methods do not seem to make a difference in where they put the DOM element of the grid <g id="v-3" class="hexagon-grid" style="pointer-events: none;"> within the CELLS layer element , it always ends up being the last child, don't know if it is a bug or it works this way because of how the demo is coded or API not completed, as you mentioned.

[kumilingus]

I am positive that anything you want to achieve is possible.

1. You can add SVGImageElement and SVGPathElement to the BACK layer (so the grid will be above the background but under the cells).
2. You can add one SVGPathElement at the BACK layer with pointer-events: auto to make hover work and one with transparent fill and pointer-events: none to the FRONT layer so the grid is above the cells.
3. You can already add a new layer (as shown here) between CELLS and TOOLS if needed.

Note: appendChild() or prepend() methods do not seem to make a difference in where they put the DOM element of the grid within the CELLS layer element , it always ends up being the last child, don't know if it is a bug or it works this way because of how the demo is coded or API not completed, as you mentioned.

It's not a bug. Using appendChild() or prepend() makes no difference if the parent is empty. The cells nodes are added later asynchronously.

[BigPackie]

Wow! Great, thanks. Didn't know creating own layers was a thing.

Your tips are golden and might actually help me with other problems that I had as well.

Much appreciated!