@eclipse-glsp/client 2.2.0-next.330 → 2.2.0-next.332

package/src/features/change-bounds/snap.ts

@@ -14,30 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /* eslint-disable @typescript-eslint/no-shadow */
-import { GModelElement, ISnapper, KeyboardModifier, Point } from '@eclipse-glsp/sprotty';
-import { injectable } from 'inversify';
-
-/**
- * A {@link ISnapper} implementation that snaps all elements onto a fixed gride size.
- * The default grid size is 10x10 pixel.
- * To configure a custom grid size  bind the `TYPES.ISnapper` service identifier
- * to constant value, e.g:
- *
- * ```ts
- * bind(TYPES.ISnapper).toConstantValue(new GridSnapper({x:25 ,y:25 }));
- * ```
- */
-@injectable()
-export class GridSnapper implements ISnapper {
-    constructor(public grid: { x: number; y: number } = { x: 10, y: 10 }) {}
-
-    snap(position: Point, _element: GModelElement): Point {
-        return {
-            x: Math.round(position.x / this.grid.x) * this.grid.x,
-            y: Math.round(position.y / this.grid.y) * this.grid.y
-        };
-    }
-}
+import { KeyboardModifier } from '@eclipse-glsp/sprotty';
 
 export function useSnap(event: MouseEvent | KeyboardEvent): boolean {
     return !event.shiftKey;

package/src/features/command-palette/command-palette.ts

@@ -14,8 +14,9 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { CSS_HIDDEN_EXTENSION_CLASS, CSS_UI_EXTENSION_CLASS, CommandPalette } from '@eclipse-glsp/sprotty';
+import { CommandPalette } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
+import { CSS_HIDDEN_EXTENSION_CLASS, CSS_UI_EXTENSION_CLASS } from '../../base/ui-extension/ui-extension';
 
 @injectable()
 export class GlspCommandPalette extends CommandPalette {

package/src/features/debug/debug-bounds-decorator.tsx

@@ -0,0 +1,171 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+/* eslint-disable max-len */
+
+import { Bounds, GModelElement, IVNodePostprocessor, Point, TYPES, isBoundsAware, setClass, svg } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { VNode } from 'snabbdom';
+import { GGraph } from '../../model';
+import { BoundsAwareModelElement } from '../../utils';
+import { DebugManager } from './debug-manager';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class DebugBoundsDecorator implements IVNodePostprocessor {
+    @inject(TYPES.IDebugManager) @optional() protected debugManager?: DebugManager;
+
+    decorate(vnode: VNode, element: GModelElement): VNode {
+        if (!this.debugManager?.isDebugEnabled) {
+            return vnode;
+        }
+        if (isBoundsAware(element)) {
+            this.decorateBoundsAware(vnode, element);
+        }
+        if (element instanceof GGraph) {
+            this.decorateGraph(vnode, element);
+        }
+        return vnode;
+    }
+
+    postUpdate(): void {}
+
+    protected get decorationSize(): number {
+        return 5;
+    }
+
+    protected decorateGraph(vnode: VNode, graph: GGraph): void {
+        setClass(vnode, 'debug-bounds', true);
+        const svgChild = vnode.children?.find(child => typeof child !== 'string' && child.sel === 'svg') as VNode | undefined;
+        const group = svgChild?.children?.find(child => typeof child !== 'string' && child.sel === 'g') as VNode | undefined;
+        group?.children?.push(this.renderOrigin(graph));
+    }
+
+    protected renderOrigin(graph: GGraph): VNode {
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-origin={true}
+                points={`0,${this.decorationSize} 0,0  ${this.decorationSize},0`}
+            >
+                <title>Origin = x: 0, y: 0</title>
+            </polyline>
+        );
+    }
+
+    protected decorateBoundsAware(vnode: VNode, element: BoundsAwareModelElement): void {
+        setClass(vnode, 'debug-bounds', true);
+        vnode.children?.push(this.renderTopLeftCorner(element));
+        vnode.children?.push(this.renderTopRightCorner(element));
+        vnode.children?.push(this.renderBottomLeftCorner(element));
+        vnode.children?.push(this.renderBottomRightCorner(element));
+        vnode.children?.push(this.renderCenter(element));
+    }
+
+    protected renderTopLeftCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const topLeft = Bounds.topLeft(element.bounds);
+        const corner = Point.subtract(topLeft, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-top-left={true}
+                points={`${corner.x},${corner.y + this.decorationSize} ${corner.x},${corner.y} ${corner.x + this.decorationSize},${corner.y}`}
+            >
+                <title>
+                    Top Left = x: {topLeft.x}, y: {topLeft.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderTopRightCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const topRight = Bounds.topRight(element.bounds);
+        const corner = Point.subtract(topRight, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-top-right={true}
+                points={`${corner.x - this.decorationSize},${corner.y} ${corner.x},${corner.y} ${corner.x},${corner.y + this.decorationSize}`}
+            >
+                <title>
+                    Top Right = x: {topRight.x}, y: {topRight.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderBottomLeftCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const bottomLeft = Bounds.bottomLeft(element.bounds);
+        const corner = Point.subtract(bottomLeft, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-bottom-left={true}
+                points={`${corner.x},${corner.y - this.decorationSize} ${corner.x},${corner.y} ${corner.x + this.decorationSize},${corner.y}`}
+            >
+                <title>
+                    Bottom Left = x: {bottomLeft.x}, y: {bottomLeft.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderBottomRightCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const bottomRight = Bounds.bottomRight(element.bounds);
+        const corner = Point.subtract(bottomRight, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-bottom-right={true}
+                points={`${corner.x - this.decorationSize},${corner.y} ${corner.x},${corner.y} ${corner.x},${corner.y - this.decorationSize}`}
+            >
+                <title>
+                    Bottom Right = x: {bottomRight.x}, y: {bottomRight.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderCenter(element: BoundsAwareModelElement): VNode {
+        const bounds = element.bounds;
+        const position = Bounds.topLeft(bounds);
+        const center = Bounds.center(bounds);
+        const corner = Point.subtract(center, position);
+        return (
+            <g>
+                <title>
+                    Center = x: {center.x}, y: {center.y}
+                    &#013;Bounds = x: {bounds.x}, y: {bounds.y}, width: {bounds.width}, height: {bounds.height}
+                </title>
+                <polyline
+                    class-debug-bounds-decoration={true}
+                    class-debug-bounds-center={true}
+                    points={`${corner.x - this.decorationSize / 2},${corner.y - this.decorationSize / 2} ${corner.x + this.decorationSize / 2},${corner.y + this.decorationSize / 2}`}
+                ></polyline>
+                <polyline
+                    class-debug-bounds-decoration={true}
+                    class-debug-bounds-center={true}
+                    points={`${corner.x + this.decorationSize / 2},${corner.y - this.decorationSize / 2} ${corner.x - this.decorationSize / 2},${corner.y + this.decorationSize / 2}`}
+                ></polyline>
+            </g>
+        );
+    }
+}

package/src/features/debug/debug-manager.ts

@@ -0,0 +1,56 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { IActionHandler, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable, postConstruct } from 'inversify';
+import { FeedbackEmitter, IFeedbackActionDispatcher } from '../../base';
+import { EnableDebugModeAction } from './debug-model';
+
+@injectable()
+export class DebugManager implements IActionHandler {
+    protected _debugEnabled: boolean = false;
+    protected debugFeedback: FeedbackEmitter;
+
+    @inject(TYPES.IFeedbackActionDispatcher)
+    protected feedbackDispatcher: IFeedbackActionDispatcher;
+
+    get isDebugEnabled(): boolean {
+        return this._debugEnabled;
+    }
+
+    handle(action: EnableDebugModeAction): void {
+        this._debugEnabled = action.enable;
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.debugFeedback = this.feedbackDispatcher.createEmitter();
+    }
+
+    setDebugEnabled(visible: boolean): void {
+        if (!visible) {
+            this.debugFeedback.dispose();
+        } else {
+            this.debugFeedback
+                .add(EnableDebugModeAction.create({ enable: true }), EnableDebugModeAction.create({ enable: false }))
+                .submit();
+        }
+    }
+
+    toggleDebugEnabled(): void {
+        this.setDebugEnabled(!this._debugEnabled);
+    }
+}

package/src/features/debug/debug-model.ts

@@ -0,0 +1,63 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Action, CommandExecutionContext, CommandReturn, GModelRoot, TYPES, hasBooleanProp } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { FeedbackCommand } from '../../base';
+import { addCssClasses, removeCssClasses } from '../../utils';
+
+export interface EnableDebugModeAction extends Action {
+    kind: typeof EnableDebugModeAction.KIND;
+    enable: boolean;
+}
+
+export namespace EnableDebugModeAction {
+    export const KIND = 'enableDebugMode';
+    export const CSS_ROOT_CLASS = 'debug-mode';
+
+    export function is(object: any): object is EnableDebugModeAction {
+        return Action.hasKind(object, KIND) && hasBooleanProp(object, 'enable');
+    }
+
+    export function create(options: { enable: boolean }): EnableDebugModeAction {
+        return {
+            kind: EnableDebugModeAction.KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class EnableDebugModeCommand extends FeedbackCommand {
+    static readonly KIND = EnableDebugModeAction.KIND;
+
+    constructor(@inject(TYPES.Action) protected readonly action: EnableDebugModeAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        return this.setDebugMode(context.root, this.action.enable);
+    }
+
+    protected setDebugMode(root: GModelRoot, show: boolean): CommandReturn {
+        if (show) {
+            addCssClasses(root, [EnableDebugModeAction.CSS_ROOT_CLASS]);
+        } else {
+            removeCssClasses(root, [EnableDebugModeAction.CSS_ROOT_CLASS]);
+        }
+        return root;
+    }
+}

package/src/features/debug/debug-module.ts

@@ -0,0 +1,32 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { FeatureModule, TYPES, bindAsService, configureActionHandler, configureCommand } from '@eclipse-glsp/sprotty';
+import '../../../css/debug.css';
+import { DebugBoundsDecorator } from './debug-bounds-decorator';
+import { DebugManager } from './debug-manager';
+import { EnableDebugModeAction, EnableDebugModeCommand } from './debug-model';
+
+export const debugModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+
+    configureCommand(context, EnableDebugModeCommand);
+
+    bindAsService(bind, TYPES.IDebugManager, DebugManager);
+    configureActionHandler(context, EnableDebugModeAction.KIND, DebugManager);
+
+    bindAsService(context, TYPES.IVNodePostprocessor, DebugBoundsDecorator);
+});

package/src/features/debug/index.ts

@@ -0,0 +1,19 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+export * from './debug-bounds-decorator';
+export * from './debug-manager';
+export * from './debug-model';
+export * from './debug-module';

package/src/features/grid/grid-manager.ts

@@ -0,0 +1,60 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { IActionHandler, PropertiesOfType, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable, postConstruct } from 'inversify';
+import { FeedbackEmitter, IFeedbackActionDispatcher } from '../../base';
+import { Grid } from './grid';
+import { ShowGridAction } from './grid-model';
+
+export type GridStyle = Record<string, string> & Partial<PropertiesOfType<CSSStyleDeclaration, string>>;
+
+@injectable()
+export class GridManager implements IActionHandler {
+    protected _gridVisible: boolean = false;
+    protected gridFeedback: FeedbackEmitter;
+
+    @inject(TYPES.IFeedbackActionDispatcher)
+    protected feedbackDispatcher: IFeedbackActionDispatcher;
+
+    @inject(TYPES.Grid)
+    public readonly grid: Grid;
+
+    get isGridVisible(): boolean {
+        return this._gridVisible;
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.gridFeedback = this.feedbackDispatcher.createEmitter();
+    }
+
+    handle(action: ShowGridAction): void {
+        this._gridVisible = action.show;
+    }
+
+    setGridVisible(visible: boolean): void {
+        if (!visible) {
+            this.gridFeedback.dispose();
+        } else {
+            this.gridFeedback.add(ShowGridAction.create({ show: true }), ShowGridAction.create({ show: false })).submit();
+        }
+    }
+
+    toggleGridVisible(): void {
+        this.setGridVisible(!this._gridVisible);
+    }
+}

package/src/features/grid/grid-model.ts

@@ -0,0 +1,62 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { Action, CommandExecutionContext, CommandReturn, GModelRoot, TYPES, hasBooleanProp } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { FeedbackCommand } from '../../base';
+import { addCssClasses, removeCssClasses } from '../../utils';
+
+export interface ShowGridAction extends Action {
+    kind: typeof ShowGridCommand.KIND;
+    show: boolean;
+}
+
+export namespace ShowGridAction {
+    export const KIND = 'showGrid';
+    export const CSS_ROOT_CLASS = 'grid-background';
+
+    export function is(object: any): object is ShowGridAction {
+        return Action.hasKind(object, KIND) && hasBooleanProp(object, 'show');
+    }
+
+    export function create(options: { show: boolean }): ShowGridAction {
+        return {
+            kind: ShowGridCommand.KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class ShowGridCommand extends FeedbackCommand {
+    static readonly KIND = ShowGridAction.KIND;
+
+    constructor(@inject(TYPES.Action) protected readonly action: ShowGridAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        return this.setGrid(context.root, this.action.show);
+    }
+
+    protected setGrid(root: GModelRoot, show: boolean): CommandReturn {
+        if (show) {
+            addCssClasses(root, [ShowGridAction.CSS_ROOT_CLASS]);
+        } else {
+            removeCssClasses(root, [ShowGridAction.CSS_ROOT_CLASS]);
+        }
+        return root;
+    }
+}

package/src/features/grid/grid-module.ts

@@ -0,0 +1,34 @@
+/********************************************************************************
+ * Copyright (c) 2023 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { FeatureModule, TYPES, bindAsService, configureActionHandler, configureCommand } from '@eclipse-glsp/sprotty';
+import '../../../css/grid.css';
+import { GridManager } from './grid-manager';
+import { ShowGridAction, ShowGridCommand } from './grid-model';
+import { GridSnapper } from './grid-snapper';
+
+export const gridModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+
+    bind(TYPES.Grid).toConstantValue({ x: 10, y: 10 });
+
+    configureCommand(context, ShowGridCommand);
+
+    bindAsService(bind, TYPES.IGridManager, GridManager);
+    configureActionHandler(context, ShowGridAction.KIND, GridManager);
+
+    bind(TYPES.ISnapper).to(GridSnapper);
+});

package/src/features/grid/grid-snapper.spec.ts

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright (c) 2022-2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { GModelElement } from '@eclipse-glsp/sprotty';
+import { expect } from 'chai';
+import { GridSnapper } from './grid-snapper';
+
+describe('GridSnapper', () => {
+    it('snap', () => {
+        const element = new GModelElement();
+        const snapper = new GridSnapper();
+        expect(snapper.snap({ x: 0, y: 0 }, element)).to.be.deep.equals({ x: 0, y: 0 });
+        expect(snapper.snap({ x: 4, y: 5 }, element)).to.be.deep.equals({ x: 0, y: 10 });
+        expect(snapper.snap({ x: 8, y: 11 }, element)).to.be.deep.equals({ x: 10, y: 10 });
+        expect(snapper.snap({ x: -7, y: -4 }, element)).to.be.deep.equals({ x: -10, y: -0 });
+    });
+});

package/src/features/grid/grid-snapper.ts

@@ -0,0 +1,59 @@
+/********************************************************************************
+ * Copyright (c) 2024 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { CenterGridSnapper, GModelElement, ISnapper, Point, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { Grid } from './grid';
+
+/**
+ * A {@link ISnapper} implementation that snaps all elements onto a fixed gride size.
+ * The default grid size is 10x10 pixel.
+ * To configure a custom grid size  bind the `TYPES.ISnapper` service identifier
+ * to constant value, e.g:
+ *
+ * ```ts
+ * bind(TYPES.ISnapper).toConstantValue(new GridSnapper({ x: 25, y: 25 }));
+ * ```
+ *
+ * or use the `Grid` to define the grid size more generically:
+ * ```ts
+ * bind(TYPES.Grid).toConstantValue({ x: 25, y: 25 });
+ * bind(TYPES.ISnapper).to(GridSnapper);
+ * ```
+ */
+@injectable()
+export class GridSnapper implements ISnapper {
+    constructor(@optional() @inject(TYPES.Grid) public readonly grid: Grid = { x: 10, y: 10 }) {}
+
+    snap(position: Point, element: GModelElement): Point {
+        return Point.snapToGrid(position, this.grid);
+    }
+}
+
+@injectable()
+export class GLSPCenterGridSnapper extends CenterGridSnapper {
+    constructor(@optional() @inject(TYPES.Grid) public readonly grid: Grid = { x: 10, y: 10 }) {
+        super();
+    }
+
+    override get gridX(): number {
+        return this.grid.x;
+    }
+
+    override get gridY(): number {
+        return this.grid.y;
+    }
+}

package/src/features/grid/grid.ts

@@ -0,0 +1,18 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { Point } from '@eclipse-glsp/sprotty';
+
+export type Grid = Point;