Introduce an optional grid module to deal with a grid layout

[martin-fleck-at]

What it does

Introduce an optional grid module to deal with a grid layout

• Optional grid module defines a grid based on x/y coordinates
  -- Adds the grid as a background that properly zooms/resizes
  -- By default uses the GridSnapper for positioning elements
  -- Use grid for helper lines and movement tools

• Optional debug module that shows the bounds of elements
  -- Useful for debugging but not meant for production

• Render optional debug and grid toggles in tool palette if present

• Add both optional modules to the workflow example

Fixes eclipse-glsp/glsp#1336

Please note this PR builds upon #342 and should only be merged afterwards!

How to test

• See if everything still works as expected.
• Use the new grid feature in the workflow module.

Follow-ups

Changelog

• This PR should be mentioned in the changelog
• This PR introduces a breaking change (if yes, provide more details below for the changelog and the migration guide)

If the optional accessibility module was used, the grid was derived through the GridSnapper, this needs to be replaced by a binding of the Grid.

[tortmayr]

Thanks Martin! Amazing change, I'm a big fan of the debug extension. This will be really helpful for us and our adopters!

In general, the code looks good to me.
The only thing I'm note sure about is the GridBackground service. I feel like rendering the grid background is something that should be handled by the root graph view instead.

I quickly tested this and something like

@injectable()
export class GridGraphView extends GGraphView {
    override render(model: Readonly<GGraph>, context: RenderingContext): VNode {
        const edgeRouting = this.edgeRouterRegistry.routeAllChildren(model);
        const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
        return (
            <svg class-sprotty-graph={true}>
                <defs>
                    <pattern id='grid' width='10' height='10' patternUnits='userSpaceOnUse' patternTransform={transform}>
                        <path d='M 10 0 L 0 0 0 10' fill='none' stroke='gray' stroke-width='1' />
                    </pattern>
                </defs>
                <rect width='100%' height='100%' fill='url(#grid)' />
                <g transform={transform}>{context.renderChildren(model, { edgeRouting })}</g>
            </svg>
        );
    }
}

seems to do the trick.

[martin-fleck-at]

@tortmayr Thank you for the quick turnaround! I pushed an additional commit that should fix all the issues that you mentioned. I also added an action to reset the viewport to 0,0 with zoom 1 as I think it is very convenient. It is basically a specialization of the more generic SetViewportCommand. I'd really appreciate it if you could have another look at it.

[tortmayr]

Thanks for the improvements Martin.
Apart from a few nitpicks the change looks good to me.
I really like the improved styling of the tool palette 😉

[martin-fleck-at]

@tortmayr Thanks, I fixed the remaining issues!

[tortmayr]

👍🏼 Looks good to me.