@eclipse-glsp/client 2.3.0-next.322 → 2.3.0-next.363

package/src/features/element-template/mouse-tracking-element-position-listener.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 EclipseSource and others.
+ * Copyright (c) 2023-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
@@ -14,104 +14,109 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Action, Disposable, GModelElement, Locateable, MoveAction, Point, isBoundsAware, isMoveable } from '@eclipse-glsp/sprotty';
-import { injectable } from 'inversify';
+import {
+    Action,
+    Dimension,
+    DisposableCollection,
+    GModelElement,
+    GModelRoot,
+    MoveAction,
+    Point,
+    isBoundsAware,
+    isMoveable
+} from '@eclipse-glsp/sprotty';
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
+import { EditorContextService } from '../../base/editor-context-service';
 import { CSS_HIDDEN, ModifyCSSFeedbackAction } from '../../base/feedback/css-feedback';
-import { IFeedbackEmitter } from '../../base/feedback/feedback-action-dispatcher';
-import { Tool } from '../../base/tool-manager/tool';
+import { FeedbackEmitter } from '../../base/feedback/feedback-emitter';
+import { MoveableElement } from '../../utils/gmodel-util';
 import { getAbsolutePosition } from '../../utils/viewpoint-util';
-import {
-    IMovementRestrictor,
-    createMovementRestrictionFeedback,
-    removeMovementRestrictionFeedback
-} from '../change-bounds/movement-restrictor';
-import { PositionSnapper } from '../change-bounds/position-snapper';
-import { PointPositionUpdater } from '../change-bounds/point-position-updater';
-import { useSnap } from '../change-bounds/snap';
+import { FeedbackAwareTool } from '../tools/base-tools';
+import { ChangeBoundsManager } from '../tools/change-bounds/change-bounds-manager';
+import { MoveFinishedEventAction } from '../tools/change-bounds/change-bounds-tool-feedback';
+import { ChangeBoundsTracker, TrackedMove } from '../tools/change-bounds/change-bounds-tracker';
 
-export interface PositioningTool extends Tool {
-    readonly positionSnapper: PositionSnapper;
-    readonly movementRestrictor?: IMovementRestrictor;
-
-    registerFeedback(feedbackActions: Action[], feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): Disposable;
-    deregisterFeedback(feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): void;
+export interface PositioningTool extends FeedbackAwareTool {
+    readonly changeBoundsManager: ChangeBoundsManager;
 }
 
-@injectable()
 export class MouseTrackingElementPositionListener extends DragAwareMouseListener {
-    currentPosition?: Point;
-
-    protected positionUpdater: PointPositionUpdater;
+    protected moveGhostFeedback: FeedbackEmitter;
+    protected tracker: ChangeBoundsTracker;
+    protected toDispose = new DisposableCollection();
 
     constructor(
         protected elementId: string,
         protected tool: PositioningTool,
-        protected cursorPosition: 'top-left' | 'middle' = 'top-left'
+        protected cursorPosition: 'top-left' | 'middle' = 'top-left',
+        protected editorContext?: EditorContextService
     ) {
         super();
-        this.positionUpdater = new PointPositionUpdater(this.tool.positionSnapper);
+        this.tracker = this.tool.changeBoundsManager.createTracker();
+        this.moveGhostFeedback = this.tool.createFeedbackEmitter();
+        this.toDispose.push(this.moveGhostFeedback);
+        const modelRootChangedListener = editorContext?.onModelRootChanged(newRoot => this.modelRootChanged(newRoot));
+        if (modelRootChangedListener) {
+            this.toDispose.push(modelRootChangedListener);
+        }
     }
 
-    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
-        super.mouseMove(target, event);
+    protected getTrackedElement(target: GModelElement, event: MouseEvent): MoveableElement | undefined {
         const element = target.root.index.getById(this.elementId);
-        if (!element || !isMoveable(element)) {
+        return !element || !isMoveable(element) ? undefined : element;
+    }
+
+    override mouseMove(ctx: GModelElement, event: MouseEvent): Action[] {
+        super.mouseMove(ctx, event);
+        const element = this.getTrackedElement(ctx, event);
+        if (!element) {
             return [];
         }
-        let targetPosition = this.getTargetPosition(target, event, element);
-        if (this.positionUpdater.isLastDragPositionUndefined()) {
-            this.positionUpdater.updateLastDragPosition(targetPosition);
+        const isInitializing = !this.tracker.isTracking();
+        if (isInitializing) {
+            this.initialize(element, ctx, event);
         }
-        const delta = this.positionUpdater.updatePosition(element, targetPosition, useSnap(event));
-        if (!delta) {
+        const move = this.tracker.moveElements([element], { snap: event, restrict: event, skipStatic: !isInitializing });
+        const elementMove = move.elementMoves[0];
+        if (!elementMove) {
             return [];
         }
-        targetPosition = this.validateMove(this.currentPosition ?? targetPosition, targetPosition, element, false);
-        const moveGhostElement = MoveAction.create(
-            [
-                {
-                    elementId: element.id,
-                    fromPosition: this.currentPosition,
-                    toPosition: targetPosition
-                }
-            ],
-            { animate: false, finished: false }
+        // since we are moving a ghost element that is feedback-only and will be removed anyway,
+        // we just send a MoveFinishedEventAction instead of reseting the position with a MoveAction and the finished flag set to true.
+        this.moveGhostFeedback.add(
+            MoveAction.create([{ elementId: this.elementId, toPosition: elementMove.toPosition }], { animate: false }),
+            MoveFinishedEventAction.create()
         );
-        this.currentPosition = targetPosition;
-        this.tool.registerFeedback([moveGhostElement], this);
-        return element.cssClasses?.includes(CSS_HIDDEN)
-            ? [ModifyCSSFeedbackAction.create({ elements: [element.id], remove: [CSS_HIDDEN] })]
-            : [];
+        this.addMoveFeedback(move, ctx, event);
+        this.moveGhostFeedback.submit();
+        this.tracker.updateTrackingPosition(elementMove.moveVector);
+        return [];
     }
 
-    protected getTargetPosition(target: GModelElement, event: MouseEvent, element: GModelElement & Locateable): Point {
-        let targetPosition = getAbsolutePosition(target, event);
-        if (this.cursorPosition === 'middle' && isBoundsAware(element)) {
-            targetPosition = Point.subtract(targetPosition, { x: element.bounds.width / 2, y: element.bounds.height / 2 });
-        }
-        return targetPosition;
+    protected initialize(element: MoveableElement, target: GModelElement, event: MouseEvent): void {
+        this.tracker.startTracking();
+        element.position = this.initializeElementPosition(element, target, event);
     }
 
-    protected snap(position: Point, element: GModelElement, isSnap = true): Point {
-        return this.tool.positionSnapper.snapPosition(position, element, isSnap);
+    protected initializeElementPosition(element: MoveableElement, target: GModelElement, event: MouseEvent): Point {
+        const mousePosition = getAbsolutePosition(target, event);
+        return this.cursorPosition === 'middle' && isBoundsAware(element)
+            ? Point.subtract(mousePosition, Dimension.center(element.bounds))
+            : mousePosition;
     }
 
-    protected validateMove(startPosition: Point, toPosition: Point, element: GModelElement, isFinished: boolean): Point {
-        let newPosition = toPosition;
-        if (this.tool.movementRestrictor) {
-            const valid = this.tool.movementRestrictor.validate(element, toPosition);
-            let action;
-            if (!valid) {
-                action = createMovementRestrictionFeedback(element, this.tool.movementRestrictor);
-                if (isFinished) {
-                    newPosition = startPosition;
-                }
-            } else {
-                action = removeMovementRestrictionFeedback(element, this.tool.movementRestrictor);
-            }
-            this.tool.registerFeedback([action], this, [removeMovementRestrictionFeedback(element, this.tool.movementRestrictor)]);
-        }
-        return newPosition;
+    protected addMoveFeedback(move: TrackedMove, ctx: GModelElement, event: MouseEvent): void {
+        this.moveGhostFeedback.add(ModifyCSSFeedbackAction.create({ elements: [this.elementId], remove: [CSS_HIDDEN] }));
+        this.tool.changeBoundsManager.addMoveFeedback(this.moveGhostFeedback, move, ctx, event);
+    }
+
+    protected modelRootChanged(root: Readonly<GModelRoot>): void {
+        // stop the tracking once we receive a new model root and ensure proper alignment with next next mouse move
+        this.tracker.stopTracking();
+    }
+
+    override dispose(): void {
+        this.toDispose.dispose();
+        super.dispose();
     }
 }

package/src/features/export/export-modules.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-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
@@ -27,12 +27,15 @@ import {
 import { ExportSvgActionHandler } from './export-svg-action-handler';
 import { GLSPSvgExporter } from './glsp-svg-exporter';
 
-export const exportModule = new FeatureModule((bind, _unbind, isBound) => {
-    const context = { bind, isBound };
-    bindAsService(context, TYPES.HiddenVNodePostprocessor, ExportSvgPostprocessor);
-    configureCommand(context, ExportSvgCommand);
-    bind(TYPES.SvgExporter).to(GLSPSvgExporter).inSingletonScope();
-});
+export const exportModule = new FeatureModule(
+    (bind, _unbind, isBound) => {
+        const context = { bind, isBound };
+        bindAsService(context, TYPES.HiddenVNodePostprocessor, ExportSvgPostprocessor);
+        configureCommand(context, ExportSvgCommand);
+        bind(TYPES.SvgExporter).to(GLSPSvgExporter).inSingletonScope();
+    },
+    { featureId: Symbol('export') }
+);
 
 /**
  * Feature module that is intended for the standalone deployment of GLSP (i.e. plain webapp)
@@ -46,5 +49,5 @@ export const standaloneExportModule = new FeatureModule(
         bind(ExportSvgActionHandler).toSelf().inSingletonScope();
         configureActionHandler(context, ExportSvgAction.KIND, ExportSvgActionHandler);
     },
-    { requires: exportModule }
+    { featureId: Symbol('standaloneExport'), requires: exportModule }
 );

package/src/features/export/glsp-svg-exporter.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2022-2023 EclipseSource and others.
+ * Copyright (c) 2022-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
@@ -13,38 +13,108 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { ExportSvgAction, GModelRoot, RequestAction, SvgExporter } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { v4 as uuid } from 'uuid';
-import { ExportSvgAction, RequestAction, GModelRoot, SvgExporter } from '@eclipse-glsp/sprotty';
 
 @injectable()
 export class GLSPSvgExporter extends SvgExporter {
-    override export(root: GModelRoot, _request?: RequestAction<ExportSvgAction>): void {
+    override export(root: GModelRoot, request?: RequestAction<ExportSvgAction>): void {
         if (typeof document !== 'undefined') {
-            const svgElement = this.findSvgElement();
+            let svgElement = this.findSvgElement();
             if (svgElement) {
-                // createSvg requires the svg to have a non-empty id, so we generate one if necessary
-                const originalId = svgElement.id;
-                try {
-                    svgElement.id = originalId || uuid();
-                    // provide generated svg code with respective sizing for proper viewing in browser and remove undesired border
-                    const bounds = this.getBounds(root);
-                    const svg = this.createSvg(svgElement, root).replace(
-                        'style="',
-                        `style="width: ${bounds.width}px !important;height: ${bounds.height}px !important;border: none !important;`
-                    );
-                    // do not give request/response id here as otherwise the action is treated as an unrequested response
-                    this.actionDispatcher.dispatch(ExportSvgAction.create(svg));
-                } finally {
-                    svgElement.id = originalId;
-                }
+                svgElement = this.prepareSvgElement(svgElement, root, request);
+                const serializedSvg = this.createSvg(svgElement, root);
+                const svgExport = this.getSvgExport(serializedSvg, svgElement, root, request);
+                // do not give request/response id here as otherwise the action is treated as an unrequested response
+                this.actionDispatcher.dispatch(ExportSvgAction.create(svgExport));
             }
         }
     }
 
+    protected override createSvg(svgElement: SVGSVGElement, root: GModelRoot): string {
+        // createSvg requires the svg to have a non-empty id, so we generate one if necessary
+        const originalId = svgElement.id;
+        try {
+            svgElement.id = originalId || uuid();
+            return super.createSvg(svgElement, root);
+        } finally {
+            svgElement.id = originalId;
+        }
+    }
+
     protected findSvgElement(): SVGSVGElement | null {
         const div = document.getElementById(this.options.hiddenDiv);
         // search for first svg element as hierarchy within Sprotty might change
         return div && div.querySelector('svg');
     }
+
+    protected prepareSvgElement(svgElement: SVGSVGElement, root: GModelRoot, request?: RequestAction<ExportSvgAction>): SVGSVGElement {
+        return svgElement;
+    }
+
+    protected override copyStyles(source: Element, target: Element, skippedProperties: string[]): void {
+        this.copyStyle(source, target, skippedProperties);
+
+        // IE doesn't retrun anything on source.children
+        for (let i = 0; i < source.childNodes.length; ++i) {
+            const sourceChild = source.childNodes[i];
+            const targetChild = target.childNodes[i];
+            if (sourceChild instanceof Element) {
+                this.copyStyles(sourceChild, targetChild as Element, []);
+            }
+        }
+    }
+
+    protected copyStyle(source: Element, target: Element, skippedProperties: string[]): void {
+        const sourceStyle = getComputedStyle(source);
+        const targetStyle = getComputedStyle(target);
+
+        let style = '';
+        for (let i = 0; i < sourceStyle.length; i++) {
+            const propertyName = sourceStyle[i];
+            if (!skippedProperties.includes(propertyName)) {
+                const propertyValue = sourceStyle.getPropertyValue(propertyName);
+                const propertyPriority = sourceStyle.getPropertyPriority(propertyName);
+                if (targetStyle.getPropertyValue(propertyName) !== propertyValue) {
+                    if (this.shouldUpdateStyle(target)) {
+                        // rather set the property directly on the element to keep other values intact
+                        target.style.setProperty(propertyName, propertyValue);
+                    } else {
+                        // collect all properties to set them at once
+                        style += `${propertyName}: ${propertyValue}${propertyPriority ? ' !' + propertyPriority : ''}; `;
+                    }
+                }
+            }
+        }
+        if (style !== '') {
+            target.setAttribute('style', style.trim());
+        }
+    }
+
+    protected shouldUpdateStyle(element: any): element is ElementCSSInlineStyle {
+        // we want to simply update the style of elements and keep other values intact if they have a style property
+        return 'tagName' in element && 'style' in element;
+    }
+
+    protected getSvgExport(
+        serializedSvgElement: string,
+        svgElement: SVGElement,
+        root: GModelRoot,
+        request?: RequestAction<ExportSvgAction>
+    ): string {
+        const svgExportStyle = this.getSvgExportStyle(svgElement, root, request);
+        return svgExportStyle ? serializedSvgElement.replace('style="', `style="${svgExportStyle}`) : serializedSvgElement;
+    }
+
+    protected getSvgExportStyle(svgElement: SVGElement, root: GModelRoot, request?: RequestAction<ExportSvgAction>): string | undefined {
+        // provide generated svg code with respective sizing for proper viewing in browser and remove undesired border
+        const bounds = this.getBounds(root);
+        return (
+            `width: ${bounds.width}px !important;` +
+            `height: ${bounds.height}px !important;` +
+            'border: none !important;' +
+            'cursor: default !important;'
+        );
+    }
 }

package/src/features/grid/grid-manager.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 { IActionHandler, PropertiesOfType, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable, postConstruct } from 'inversify';
+import { IFeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher';
+import { FeedbackEmitter } from '../../base/feedback/feedback-emitter';
+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.setGridVisible(action.show);
+    }
+
+    setGridVisible(visible: boolean): void {
+        if (this._gridVisible && !visible) {
+            this._gridVisible = false;
+            this.gridFeedback.dispose();
+        } else if (!this._gridVisible && visible) {
+            this._gridVisible = true;
+            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/feedback/feedback-command';
+import { addCssClasses, removeCssClasses } from '../../utils/gmodel-util';
+
+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,37 @@
+/********************************************************************************
+ * Copyright (c) 2023-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, 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);
+
+        bind(GridManager).toSelf().inSingletonScope();
+        configureActionHandler(context, ShowGridAction.KIND, GridManager);
+
+        bind(TYPES.ISnapper).to(GridSnapper);
+    },
+    { featureId: Symbol('grid') }
+);

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

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright (c) 2022-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 { 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/{lib/features/routing/glsp-manhattan-edge-router.d.ts → src/features/grid/grid-style.ts}

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2022-2023 EclipseSource and others.
+ * 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
@@ -13,8 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { ManhattanEdgeRouter, ResolvedHandleMove, GRoutableElement } from '@eclipse-glsp/sprotty';
-export declare class GLSPManhattanEdgeRouter extends ManhattanEdgeRouter {
-    protected applyInnerHandleMoves(edge: GRoutableElement, moves: ResolvedHandleMove[]): void;
+
+export namespace GridProperty {
+    export const GRID_BACKGROUND_X = '--grid-background-x';
+    export const GRID_BACKGROUND_Y = '--grid-background-y';
+    export const GRID_BACKGROUND_WIDTH = '--grid-background-width';
+    export const GRID_BACKGROUND_HEIGHT = '--grid-background-height';
+    export const GRID_BACKGROUND_ZOOM = '--grid-background-zoom';
+    export const GRID_COLOR = '--grid-color';
 }
-//# sourceMappingURL=glsp-manhattan-edge-router.d.ts.map

package/src/{base/tool-manager/index.ts → features/grid/grid.ts}

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 EclipseSource and others.
+ * 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
@@ -13,5 +13,6 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-export * from './tool-manager';
-export * from './tool';
+import { Point } from '@eclipse-glsp/sprotty';
+
+export type Grid = Point;