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

package/src/features/grid/index.ts

@@ -0,0 +1,20 @@
+/********************************************************************************
+ * 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 './grid';
+export * from './grid-manager';
+export * from './grid-model';
+export * from './grid-module';
+export * from './grid-snapper';

package/src/features/helper-lines/helper-line-manager-default.ts

@@ -19,6 +19,7 @@ import { FeedbackEmitter } from '../../base';
 import { IFeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher';
 import { ISelectionListener, SelectionService } from '../../base/selection-service';
 import { SetBoundsFeedbackAction } from '../bounds/set-bounds-feedback-command';
+import { Grid } from '../grid';
 import { MoveFinishedEventAction, MoveInitializedEventAction } from '../tools/change-bounds/change-bounds-tool-feedback';
 import {
     AlignmentElementFilter,
@@ -47,7 +48,7 @@ export interface IHelperLineOptions {
     viewportLines?: ViewportLineType[];
     /**
      * The minimum difference between two coordinates
-     * Defaults to 1.
+     * Defaults to 1 or zero (perfect match) if the optional grid module is loaded.
      */
     alignmentEpsilon?: number;
     /**
@@ -58,6 +59,7 @@ export interface IHelperLineOptions {
     /**
      * The minimum move delta that is necessary for an element to break through a helper line.
      * Defaults to { x: 1, y: 1 } whereas the x represents the horizontal distance and y represents the vertical distance.
+     * If the optional grid module is loaded, defaults to twice the grid size, i.e., two grid moves to break through a helper line.
      */
     minimumMoveDelta?: Point;
 
@@ -84,6 +86,7 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
     @inject(TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
     @inject(SelectionService) protected selectionService: SelectionService;
     @optional() @inject(TYPES.IHelperLineOptions) protected userOptions?: IHelperLineOptions;
+    @optional() @inject(TYPES.Grid) protected grid?: Grid;
 
     protected options: Required<IHelperLineOptions>;
     protected feedback: FeedbackEmitter;
@@ -91,7 +94,12 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
     @postConstruct()
     protected init(): void {
         this.feedback = this.feedbackDispatcher.createEmitter();
-        this.options = { ...DEFAULT_HELPER_LINE_OPTIONS, ...this.userOptions };
+        const dynamicOptions: IHelperLineOptions = {};
+        if (this.grid) {
+            dynamicOptions.alignmentEpsilon = 0;
+            dynamicOptions.minimumMoveDelta = Point.multiplyScalar(this.grid, 2);
+        }
+        this.options = { ...DEFAULT_HELPER_LINE_OPTIONS, ...dynamicOptions, ...this.userOptions };
         this.selectionService.onSelectionChanged(change =>
             this.selectionChanged(change.root, change.selectedElements, change.deselectedElements)
         );

package/src/features/index.ts

@@ -19,9 +19,11 @@ export * from './change-bounds';
 export * from './command-palette';
 export * from './context-menu';
 export * from './copy-paste';
+export * from './debug';
 export * from './decoration';
 export * from './element-template';
 export * from './export';
+export * from './grid';
 export * from './helper-lines';
 export * from './hints';
 export * from './hover';

package/src/features/label-edit-ui/label-edit-ui.ts

@@ -13,8 +13,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, EditLabelUI } from '@eclipse-glsp/sprotty';
+import { EditLabelUI } 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 GlspEditLabelUI extends EditLabelUI {

package/src/features/routing/{glsp-manhattan-edge-router.ts → edge-router.ts}

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2022-2023 EclipseSource and others.
+ * 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
@@ -14,9 +14,64 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { ManhattanEdgeRouter, ResolvedHandleMove, GRoutableElement, almostEquals } from '@eclipse-glsp/sprotty';
+import {
+    AbstractEdgeRouter,
+    BezierEdgeRouter,
+    GConnectableElement,
+    GParentElement,
+    GRoutableElement,
+    ManhattanEdgeRouter,
+    Point,
+    PolylineEdgeRouter,
+    ResolvedHandleMove,
+    almostEquals
+} from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
 
+@injectable()
+export abstract class GLSPAbstractEdgeRouter extends AbstractEdgeRouter {
+    override getTranslatedAnchor(
+        connectable: GConnectableElement,
+        refPoint: Point,
+        refContainer: GParentElement,
+        edge: GRoutableElement,
+        anchorCorrection?: number | undefined
+    ): Point {
+        // users may define all kinds of anchors and anchor computers, we want to make sure we return a valid one in any case
+        const anchor = super.getTranslatedAnchor(connectable, refPoint, refContainer, edge, anchorCorrection);
+        return Point.isValid(anchor) ? anchor : refPoint;
+    }
+}
+
+@injectable()
+export class GLSPPolylineEdgeRouter extends PolylineEdgeRouter {
+    override getTranslatedAnchor(
+        connectable: GConnectableElement,
+        refPoint: Point,
+        refContainer: GParentElement,
+        edge: GRoutableElement,
+        anchorCorrection?: number | undefined
+    ): Point {
+        // users may define all kinds of anchors and anchor computers, we want to make sure we return a valid one in any case
+        const anchor = super.getTranslatedAnchor(connectable, refPoint, refContainer, edge, anchorCorrection);
+        return Point.isValid(anchor) ? anchor : refPoint;
+    }
+}
+
+@injectable()
 export class GLSPManhattanEdgeRouter extends ManhattanEdgeRouter {
+    override getTranslatedAnchor(
+        connectable: GConnectableElement,
+        refPoint: Point,
+        refContainer: GParentElement,
+        edge: GRoutableElement,
+        anchorCorrection?: number | undefined
+    ): Point {
+        // users may define all kinds of anchors and anchor computers, we want to make sure we return a valid one in any case
+        const anchor = super.getTranslatedAnchor(connectable, refPoint, refContainer, edge, anchorCorrection);
+        return Point.isValid(anchor) ? anchor : refPoint;
+    }
+
     protected override applyInnerHandleMoves(edge: GRoutableElement, moves: ResolvedHandleMove[]): void {
         const route = this.route(edge);
         const routingPoints = edge.routingPoints;
@@ -57,3 +112,18 @@ export class GLSPManhattanEdgeRouter extends ManhattanEdgeRouter {
         });
     }
 }
+
+@injectable()
+export class GLSPBezierEdgeRouter extends BezierEdgeRouter {
+    override getTranslatedAnchor(
+        connectable: GConnectableElement,
+        refPoint: Point,
+        refContainer: GParentElement,
+        edge: GRoutableElement,
+        anchorCorrection?: number | undefined
+    ): Point {
+        // users may define all kinds of anchors and anchor computers, we want to make sure we return a valid one in any case
+        const anchor = super.getTranslatedAnchor(connectable, refPoint, refContainer, edge, anchorCorrection);
+        return Point.isValid(anchor) ? anchor : refPoint;
+    }
+}

package/src/features/routing/index.ts

@@ -13,5 +13,5 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-export * from './glsp-manhattan-edge-router';
+export * from './edge-router';
 export * from './routing-module';

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

@@ -17,7 +17,6 @@ import {
     AddRemoveBezierSegmentCommand,
     AnchorComputerRegistry,
     BezierDiamondAnchor,
-    BezierEdgeRouter,
     BezierEllipseAnchor,
     BezierRectangleAnchor,
     DiamondAnchor,
@@ -27,13 +26,12 @@ import {
     ManhattanDiamondAnchor,
     ManhattanEllipticAnchor,
     ManhattanRectangularAnchor,
-    PolylineEdgeRouter,
     RectangleAnchor,
     TYPES,
     bindAsService,
     configureCommand
 } from '@eclipse-glsp/sprotty';
-import { GLSPManhattanEdgeRouter } from './glsp-manhattan-edge-router';
+import { GLSPBezierEdgeRouter, GLSPManhattanEdgeRouter, GLSPPolylineEdgeRouter } from './edge-router';
 
 export const routingModule = new FeatureModule((bind, unbind, isBound, rebind) => {
     const context = { bind, unbind, isBound, rebind };
@@ -45,12 +43,12 @@ export const routingModule = new FeatureModule((bind, unbind, isBound, rebind) =
     bindAsService(context, TYPES.IAnchorComputer, ManhattanRectangularAnchor);
     bindAsService(context, TYPES.IAnchorComputer, ManhattanDiamondAnchor);
 
-    bindAsService(context, TYPES.IEdgeRouter, PolylineEdgeRouter);
+    bindAsService(context, TYPES.IEdgeRouter, GLSPPolylineEdgeRouter);
     bindAsService(context, TYPES.IAnchorComputer, EllipseAnchor);
     bindAsService(context, TYPES.IAnchorComputer, RectangleAnchor);
     bindAsService(context, TYPES.IAnchorComputer, DiamondAnchor);
 
-    bindAsService(context, TYPES.IEdgeRouter, BezierEdgeRouter);
+    bindAsService(context, TYPES.IEdgeRouter, GLSPBezierEdgeRouter);
     bindAsService(context, TYPES.IAnchorComputer, BezierEllipseAnchor);
     bindAsService(context, TYPES.IAnchorComputer, BezierRectangleAnchor);
     bindAsService(context, TYPES.IAnchorComputer, BezierDiamondAnchor);

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

@@ -26,23 +26,27 @@ import {
     SetContextActions,
     SetModelAction,
     SetUIExtensionVisibilityAction,
+    TYPES,
     TriggerNodeCreationAction,
     UpdateModelAction,
     codiconCSSClasses,
     matchesKeystroke
 } from '@eclipse-glsp/sprotty';
-import { inject, injectable, postConstruct } from 'inversify';
+import { inject, injectable, optional, postConstruct } from 'inversify';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
 import { EditorContextService, IEditModeListener } from '../../base/editor-context-service';
 import { FocusTracker } from '../../base/focus/focus-tracker';
 import { IDiagramStartup } from '../../base/model/diagram-loader';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool';
+import { DebugManager } from '../debug';
+import { GridManager } from '../grid';
 import { MouseDeleteTool } from '../tools/deletion/delete-tool';
 import { MarqueeMouseTool } from '../tools/marquee-selection/marquee-mouse-tool';
+import { OriginViewportAction } from '../viewport';
 
 const CLICKED_CSS_CLASS = 'clicked';
 const SEARCH_ICON_ID = 'search';
-const PALETTE_ICON_ID = 'symbol-color';
+const PALETTE_ICON_ID = 'tools';
 const CHEVRON_DOWN_ICON_ID = 'chevron-right';
 const PALETTE_HEIGHT = '500px';
 
@@ -74,6 +78,14 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     @inject(FocusTracker)
     protected focusTracker: FocusTracker;
 
+    @inject(TYPES.IGridManager)
+    @optional()
+    protected gridManager?: GridManager;
+
+    @inject(TYPES.IDebugManager)
+    @optional()
+    protected debugManager?: DebugManager;
+
     protected paletteItems: PaletteItem[];
     protected paletteItemsCopy: PaletteItem[] = [];
     protected dynamic = false;
@@ -202,6 +214,19 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const validateActionButton = this.createValidateButton();
         headerTools.appendChild(validateActionButton);
 
+        const resetViewportButton = this.createResetViewportButton();
+        headerTools.appendChild(resetViewportButton);
+
+        if (this.gridManager) {
+            const toggleGridButton = this.createToggleGridButton();
+            headerTools.appendChild(toggleGridButton);
+        }
+
+        if (this.debugManager) {
+            const toggleDebugButton = this.createToggleDebugButton();
+            headerTools.appendChild(toggleDebugButton);
+        }
+
         // Create button for Search
         const searchIcon = this.createSearchButton();
         headerTools.appendChild(searchIcon);
@@ -250,6 +275,58 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         return validateActionButton;
     }
 
+    protected createResetViewportButton(): HTMLElement {
+        const resetViewportButton = createIcon('screen-normal');
+        resetViewportButton.title = 'Reset Viewport';
+        resetViewportButton.onclick = _event => {
+            this.actionDispatcher.dispatch(OriginViewportAction.create());
+            resetViewportButton.focus();
+        };
+        resetViewportButton.ariaLabel = resetViewportButton.title;
+        resetViewportButton.tabIndex = 1;
+        return resetViewportButton;
+    }
+
+    protected createToggleGridButton(): HTMLElement {
+        const toggleGridButton = createIcon('symbol-numeric');
+        toggleGridButton.title = 'Toggle Grid';
+        toggleGridButton.onclick = () => {
+            if (this.gridManager?.isGridVisible) {
+                toggleGridButton.classList.remove(CLICKED_CSS_CLASS);
+                this.gridManager?.setGridVisible(false);
+            } else {
+                toggleGridButton.classList.add(CLICKED_CSS_CLASS);
+                this.gridManager?.setGridVisible(true);
+            }
+        };
+        if (this.gridManager?.isGridVisible) {
+            toggleGridButton.classList.add(CLICKED_CSS_CLASS);
+        }
+        toggleGridButton.ariaLabel = toggleGridButton.title;
+        toggleGridButton.tabIndex = 1;
+        return toggleGridButton;
+    }
+
+    protected createToggleDebugButton(): HTMLElement {
+        const toggleDebugButton = createIcon('debug');
+        toggleDebugButton.title = 'Debug Mode';
+        toggleDebugButton.onclick = () => {
+            if (this.debugManager?.isDebugEnabled) {
+                toggleDebugButton.classList.remove(CLICKED_CSS_CLASS);
+                this.debugManager?.setDebugEnabled(false);
+            } else {
+                toggleDebugButton.classList.add(CLICKED_CSS_CLASS);
+                this.debugManager?.setDebugEnabled(true);
+            }
+        };
+        if (this.debugManager?.isDebugEnabled) {
+            toggleDebugButton.classList.add(CLICKED_CSS_CLASS);
+        }
+        toggleDebugButton.ariaLabel = toggleDebugButton.title;
+        toggleDebugButton.tabIndex = 1;
+        return toggleDebugButton;
+    }
+
     protected createSearchButton(): HTMLElement {
         const searchIcon = createIcon(SEARCH_ICON_ID);
         searchIcon.onclick = _ev => {
@@ -275,7 +352,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         searchField.classList.add('search-input');
         searchField.id = this.containerElement.id + '_search_field';
         searchField.type = 'text';
-        searchField.placeholder = ' Search...';
+        searchField.placeholder = 'Search...';
         searchField.style.display = 'none';
         searchField.onkeyup = () => this.requestFilterUpdate(this.searchField.value);
         searchField.onkeydown = ev => this.clearOnEscape(ev);

package/src/features/viewport/index.ts

@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 export * from './glsp-scroll-mouse-listener';
+export * from './origin-viewport';
 export * from './reposition';
 export * from './viewport-handler';
 export * from './viewport-modules';

package/src/features/viewport/origin-viewport.ts

@@ -0,0 +1,68 @@
+/********************************************************************************
+ * 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, Bounds, BoundsAwareViewportCommand, GModelRoot, TYPES, Viewport, isViewport, limitViewport } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+
+export interface OriginViewportAction extends Action {
+    kind: typeof OriginViewportAction.KIND;
+    animate: boolean;
+}
+
+export namespace OriginViewportAction {
+    export const KIND = 'originViewport';
+
+    export function is(object: any): object is OriginViewportAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(options: { animate?: boolean } = {}): OriginViewportAction {
+        return {
+            kind: KIND,
+            animate: true,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class OriginViewportCommand extends BoundsAwareViewportCommand {
+    static readonly KIND = OriginViewportAction.KIND;
+
+    constructor(@inject(TYPES.Action) protected action: OriginViewportAction) {
+        super(action.animate);
+    }
+
+    getElementIds(): string[] {
+        return [];
+    }
+
+    protected override initialize(model: GModelRoot): void {
+        if (!isViewport(model)) {
+            return;
+        }
+        this.oldViewport = { scroll: model.scroll, zoom: model.zoom };
+        const newViewport = this.getNewViewport(Bounds.EMPTY, model);
+        if (newViewport) {
+            const { zoomLimits, horizontalScrollLimits, verticalScrollLimits } = this.viewerOptions;
+            this.newViewport = limitViewport(newViewport, model.canvasBounds, horizontalScrollLimits, verticalScrollLimits, zoomLimits);
+        }
+    }
+
+    getNewViewport(_bounds: Bounds, _model: GModelRoot): Viewport | undefined {
+        return { zoom: 1, scroll: { x: 0, y: 0 } };
+    }
+}

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

@@ -27,10 +27,11 @@ import {
     ZoomMouseListener
 } from '@eclipse-glsp/sprotty';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool';
+import { FocusDomAction } from '../accessibility/actions';
 import { GLSPScrollMouseListener } from './glsp-scroll-mouse-listener';
-import { RestoreViewportHandler } from './viewport-handler';
+import { OriginViewportCommand } from './origin-viewport';
 import { RepositionCommand } from './reposition';
-import { FocusDomAction } from '../accessibility/actions';
+import { RestoreViewportHandler } from './viewport-handler';
 
 export const viewportModule = new FeatureModule((bind, _unbind, isBound) => {
     const context = { bind, isBound };
@@ -39,6 +40,7 @@ export const viewportModule = new FeatureModule((bind, _unbind, isBound) => {
     configureCommand(context, GetViewportCommand);
     configureCommand(context, SetViewportCommand);
     configureCommand(context, RepositionCommand);
+    configureCommand(context, OriginViewportCommand);
 
     bindAsService(context, TYPES.MouseListener, ZoomMouseListener);
     bindAsService(context, TYPES.MouseListener, GLSPScrollMouseListener);

package/src/views/base-view-module.ts

@@ -27,9 +27,9 @@ import {
     GCompartment,
     GCompartmentView,
     GForeignObjectElement,
-    GGraphView,
     GHtmlRoot,
     GLabel,
+    GLabelView,
     GNode,
     GPort,
     GPreRenderedElement,
@@ -41,17 +41,17 @@ import {
     PreRenderedView,
     RectangularNode,
     RectangularNodeView,
-    GLabelView,
     SvgViewportView,
     configureModelElement,
     moveFeature,
     selectFeature
 } from '@eclipse-glsp/sprotty';
 import { GIssueMarker } from '../features/validation/issue-marker';
+import { GEdge, GGraph } from '../model';
 import { GEdgeView } from './gedge-view';
+import { GGraphView } from './ggraph-view';
 import { GIssueMarkerView } from './issue-marker-view';
 import { RoundedCornerNodeView } from './rounded-corner-view';
-import { GEdge, GGraph } from '../model';
 
 export const baseViewModule = new FeatureModule((bind, unbind, isBound, rebind) => {
     const context = { bind, unbind, isBound, rebind };

package/src/views/ggraph-view.tsx

@@ -0,0 +1,56 @@
+/********************************************************************************
+ * 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 { Bounds, Dimension, Point, RenderingContext, SGraphImpl, SGraphView, TYPES, Writable } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { VNode } from 'snabbdom';
+import { GridManager, GridStyle } from '../features';
+
+@injectable()
+export class GGraphView extends SGraphView {
+    @inject(TYPES.IGridManager) @optional() protected gridManager?: GridManager;
+
+    override render(model: Readonly<SGraphImpl>, context: RenderingContext): VNode {
+        const graph = super.render(model, context);
+        if (graph.data) {
+            graph.data.style = { ...graph.data.style, ...this.getGridStyle(model, context) };
+        }
+        return graph;
+    }
+
+    protected getGridStyle(model: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
+        if (!this.gridManager?.isGridVisible) {
+            return {};
+        }
+        const bounds = this.getBackgroundBounds(model, context, this.gridManager);
+        return {
+            backgroundPosition: `${bounds.x}px ${bounds.y}px`,
+            backgroundSize: `${bounds.width}px ${bounds.height}px`,
+            // we do not set the background image directly in the style object, because we want to toggle it on and off via CSS
+            '--grid-background-image': this.getBackgroundImage(model, context, this.gridManager)
+        };
+    }
+
+    protected getBackgroundBounds(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): Writable<Bounds> {
+        const position = Point.multiplyScalar(Point.subtract(gridManager.grid, viewport.scroll), viewport.zoom);
+        const size = Dimension.fromPoint(Point.multiplyScalar(gridManager.grid, viewport.zoom));
+        return { ...position, ...size };
+    }
+
+    protected getBackgroundImage(model: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
+        // eslint-disable-next-line max-len
+        return `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${gridManager.grid.x} ${gridManager.grid.y}"><rect width="${gridManager.grid.x}" height="${gridManager.grid.y}" x="0" y="0" fill="none" stroke="black" stroke-width="1" stroke-opacity="0.10" /></svg>')`;
+    }
+}

package/src/views/glsp-projection-view.tsx

@@ -16,19 +16,25 @@
 
 import {
     Bounds,
+    Dimension,
     EdgeRouterRegistry,
     GViewportRootElement,
     IViewArgs,
+    Point,
     ProjectedViewportView,
     ProjectionParams,
     RenderingContext,
+    SGraphImpl,
+    TYPES,
     ViewProjection,
+    Writable,
     html,
     setAttr,
     setClass
 } from '@eclipse-glsp/sprotty';
-import { inject, injectable } from 'inversify';
+import { inject, injectable, optional } from 'inversify';
 import { VNode, VNodeStyle, h } from 'snabbdom';
+import { GridManager, GridStyle } from '../features';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const JSX = { createElement: html };
@@ -39,15 +45,12 @@ const JSX = { createElement: html };
 @injectable()
 export class GLSPProjectionView extends ProjectedViewportView {
     @inject(EdgeRouterRegistry) edgeRouterRegistry: EdgeRouterRegistry;
+    @inject(TYPES.IGridManager) @optional() protected gridManager?: GridManager;
 
     override render(model: Readonly<GViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
-        const svgElem = this.renderSvg(model, context, args);
-        if (svgElem.data) {
-            svgElem.data!.class = { 'sprotty-graph': true };
-        }
         const rootNode: VNode = (
             <div class-sprotty-graph={false} style={{ width: '100%', height: '100%' }}>
-                {svgElem}
+                {this.renderSvg(model, context, args)}
                 {this.renderProjections(model, context, args)}
             </div>
         );
@@ -63,12 +66,36 @@ export class GLSPProjectionView extends ProjectedViewportView {
         const ns = 'http://www.w3.org/2000/svg';
         const svg = h(
             'svg',
-            { ns, style: { height: '100%' } },
+            { ns, style: { height: '100%', ...this.getGridStyle(model, context) }, class: { 'sprotty-graph': true } },
             h('g', { ns, attrs: { transform } }, context.renderChildren(model, { edgeRouting }))
         );
         return svg;
     }
 
+    protected getGridStyle(model: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
+        if (!this.gridManager?.isGridVisible) {
+            return {};
+        }
+        const bounds = this.getBackgroundBounds(model, context, this.gridManager);
+        return {
+            backgroundPosition: `${bounds.x}px ${bounds.y}px`,
+            backgroundSize: `${bounds.width}px ${bounds.height}px`,
+            // we do not set the background image directly in the style object, because we want to toggle it on and off via CSS
+            '--grid-background-image': this.getBackgroundImage(model, context, this.gridManager)
+        };
+    }
+
+    protected getBackgroundBounds(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): Writable<Bounds> {
+        const position = Point.multiplyScalar(Point.subtract(gridManager.grid, viewport.scroll), viewport.zoom);
+        const size = Dimension.fromPoint(Point.multiplyScalar(gridManager.grid, viewport.zoom));
+        return { ...position, ...size };
+    }
+
+    protected getBackgroundImage(model: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
+        // eslint-disable-next-line max-len
+        return `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${gridManager.grid.x} ${gridManager.grid.y}"><rect width="${gridManager.grid.x}" height="${gridManager.grid.y}" x="0" y="0" fill="none" stroke="black" stroke-width="1" stroke-opacity="0.10" /></svg>')`;
+    }
+
     protected override renderProjectionBar(
         projections: ViewProjection[],
         model: Readonly<GViewportRootElement>,

package/src/views/index.ts

@@ -16,6 +16,7 @@
 export * from './base-view-module';
 export * from './compartments';
 export * from './gedge-view';
+export * from './ggraph-view';
 export * from './glsp-projection-view';
 export * from './issue-marker-view';
 export * from './rounded-corner';

package/lib/base/ui-extension-registry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ui-extension-registry.d.ts","sourceRoot":"","sources":["../../src/base/ui-extension-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAElF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAS,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE7G,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,qBACa,uBAAwB,SAAQ,mBAAoB,YAAW,eAAe;IAEvF,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC;gBAEb,UAAU,GAAE,YAAY,EAAO;IAIvD,cAAc,IAAI,YAAY,CAAC,IAAI,CAAC;CAGvC"}

package/lib/base/ui-extension-registry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ui-extension-registry.js","sourceRoot":"","sources":["../../src/base/ui-extension-registry.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;kFAckF;;;;;;;;;;;;;;;AAElF,mDAA6G;AAC7G,yCAAyD;AAIlD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,6BAAmB;IAI5D,YAAwB,aAA6B,EAAE;QACnD,KAAK,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;IAED,cAAc;QACV,IAAI,CAAC,YAAY,CAAC,MAAM,CAAe,eAAK,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;IAC9H,CAAC;CACJ,CAAA;AAXY,0DAAuB;AAEtB;IADT,IAAA,kBAAM,EAAC,sBAAY,CAAC;;6DACgB;kCAF5B,uBAAuB;IADnC,IAAA,sBAAU,GAAE;IAKI,WAAA,IAAA,oBAAQ,GAAE,CAAA;;GAJd,uBAAuB,CAWnC"}

package/lib/features/routing/glsp-manhattan-edge-router.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"glsp-manhattan-edge-router.d.ts","sourceRoot":"","sources":["../../../src/features/routing/glsp-manhattan-edge-router.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAElF,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,gBAAgB,EAAgB,MAAM,uBAAuB,CAAC;AAEhH,qBAAa,uBAAwB,SAAQ,mBAAmB;cACzC,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,IAAI;CAuCtG"}