Added Feature: backgroundGrid

[EtBLh]

backgroundGrid

I wanted to add a background grid in my existing project that is using react-d3-grid and I found the easiest way is to modify the package itself.

implementation

I used svg <pattern> and and a background <rect fill="url(#grid-pattern)"/> to implement the grid.

usage

there's a new props in <Tree />

backgroundGrid?: {
    type: "dot" | "line" | "custom",
    thickness?: number,
    color?: string,
    gridCellSize?: {width: number, height: number},
    gridCellFunc?: (options?: BackgroundGrid) => ReactElement
}

when backgroundGrid is undefined, grid will not be rendered.
there's 2 default type of grid: dot and line

• color: color of each line / dot
• thickness: thickness of each line / radius of the each dot
• gridCellSize: the space take place by each dot / cross / customRenderFunction

type: custom allows customizing content inside by
passing gridCellFunc a function that return a ReactElement(svg elements)

testing

I added unit testing for <BackgroundGrid /> but haven't added testing for zooming, dragging

screenshots

• line grid
  
• dot grid