How does the GridSnapper work?

[rsoika]

I try to use the GridSnapper which is part of the Workflow example. But I did not really understand how it works.
On the server side I have a class:

public final class GridSnapper {
    public static final double GRID_X = 10.0;
    public static final double GRID_Y = 10.0;

    private GridSnapper() {
    }
    public static GPoint snap(final GPoint originalpoint) {
        double snappedX = Math.round(originalpoint.getX() / GRID_X) * GRID_X;
        double snappedY = Math.round(originalpoint.getY() / GRID_Y) * GRID_Y;
        return GraphUtil.point(snappedX, snappedY);
    }

    public static Optional<GPoint> snap(final Optional<GPoint> originalPoint) {
        return originalPoint.map(GridSnapper::snap);
    }
}

The server side GridSnapper seems to be only used on the create node operation handlers.

On the client side I found also a Snapper which is registered in the DiagramModule

const bpmnDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
    const context = { bind, unbind, isBound, rebind };
    ....
    bind(TYPES.ISnapper).to(GridSnapper);

But this snapper is fixed to 10x10 px

I wonder how can I change the snapp size on the client?

[tortmayr]

At the moment I don't think this is customizable, however, you can always just bind your own GridSnapper implementation with your desired grid size.
e.g:

@injectable()
export class CustomGridSnapper extends GridSnapper {
    override get gridX(): number {
        return 20;
    }

    override get gridY(): number {
        return 20;
    }
}

// diagramModuel
bind(TYPES.ISnapper).to(CustomGridSnapper);

[tortmayr]

FYI: I also opened a small PR that makes the grid size configurable without having to create a new subclass:
eclipse-glsp/glsp-client#181