Implement a Zoom/Scroll aware Grid

[rsoika]

See discussion #316 :

@injectable()
export class BPMNGraphView implements IView {
    @inject(EdgeRouterRegistry) edgeRouterRegistry: EdgeRouterRegistry;

    render(model: Readonly<SGraphImpl>, context: RenderingContext): VNode {
        const edgeRouting = this.edgeRouterRegistry.routeAllChildren(model);

        const gridBounds: Bounds = {
            x: model.scroll.x,
            y: model.scroll.y,
            width: Math.max(10, model.canvasBounds.width / model.zoom),
            height: Math.max(10, model.canvasBounds.height / model.zoom)
        };

        const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
        return (
            <svg class-sprotty-graph={true}>
                <defs>
                    <pattern id='bpmn-grid-pattern' x='-5' y='-5' width='10' height='10' patternUnits='userSpaceOnUse'>
                        <line x1="0" y1="5" x2="10" y2="5" class-bpmn-grid-line={true} />
                        <line x1="5" y1="0" x2="5" y2="10" class-bpmn-grid-line={true} />
                    </pattern>
                </defs>
                <g transform={transform}>
                    <rect
                        x={gridBounds.x}
                        y={gridBounds.y}
                        width={gridBounds.width}
                        height={gridBounds.height}
                        fill='url(#bpmn-grid-pattern)'
                    />
                    <g class-graph-content={true}>{context.renderChildren(model, { edgeRouting })}</g>
                </g>
            </svg>
        );
    }
}

There seems to be still an issue with loading new diagrams. Also the usage of the edgeRouterRegistry is unclear.....