Zoom/Scroll aware Grid

[frankbenoit]

Hi

i come across Open-BPMN as a GLSP example that we (me and my collegue) can take inspiration for our project.
I noticed that the visible grid in Open-BPMN is not yet aware of zooming and scroll.
We solved this with

    configureModelElement(context, DefaultTypes.GRAPH, GGraph, MyGraphView);

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

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

        const gridBounds: Bounds = {
            x: model.canvasBounds.x / model.zoom + model.scroll.x,
            y: model.canvasBounds.y / model.zoom + 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='my-grid-pattern' x='-5' y='-5' width='10' height='10' patternUnits='userSpaceOnUse'>
                        <circle id='pattern-circle' cx='5' cy='5' r='0.5' class-grid-dot={true} />
                    </pattern>
                </defs>

                <g transform={transform}>
                    <rect
                        x={gridBounds.x}
                        y={gridBounds.y}
                        width={gridBounds.width}
                        height={gridBounds.height}
                        fill='url(#my-grid-pattern)'
                    />
                    <g class-graph-content={true}>{context.renderChildren(model, { edgeRouting })}</g>
                </g>
            </svg>
        );
    }
}

[rsoika]

Hi @frankbenoit , that's interesting and thanks for your contribution!

But how did you solve the dimensions problem of the diagram plane. In my test the grid is not filling the visible part of the plane.

I had a similar problem with my helper-line feature.

Also here my helper lines are sometimes not filling the complete plane and are starting somewhere in the middle of the diagram.

[frankbenoit]

I think there is just an incorrect offset in the rect with the fill. The grid seems to be fine and the elements align with the dots. Just the x/y of the rect which limits the pattern shown seems to be wrong coordinates.

[rsoika]

Yes I think the start position should be the model.scroll.x/y value. So my implementation looks now like this:

@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>
        );
    }
}

I am using lines instead of dots.

In my CSS file I also use the theia/vscode vars for coloring:

.bpmn-grid-line {
    stroke-width: 0.5;
    stroke: var(--theia-titleBar-activeBackground);
}

This adapts the line color to the current theme:

To configure the view in my Diagram Container I use GLSPGraph instead of SGraph:

configureModelElement(context, DefaultTypes.GRAPH, GLSPGraph, BPMNGraphView);

this may depend on the GLSP version you are using... Which GLSP version are you using currently?

And still I have the issue that opening a new diagram the grid is lost for some reason....

[frankbenoit]

The offset in your first reply, could it be this one?

And because I set the rect in transformed coordinates model.canvasBounds.x / model.zoom + model.scroll.x seems to make sense. I tried to make a colored stroke for the rect and shrink it a bit, and it perfectly fits the canvas on every scroll and zoom.

I am new to GLSP, so starting with the current 2.0.

About opening, I see no problem here. But I have to admit, my project runs inside of an Eclipse RCP, so setup might be different here.

[rsoika]

Ok, with 2.0 there came a lot of changes that may explain the difference in some of the details. I tested it with 1.x but I currently work on a migration to 2.0.
Once again - thanks for your idea to implement a zoom aware Grid 👍