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

package/src/utils/geometry-util.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,88 +14,69 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Bounds, Point } from '@eclipse-glsp/sprotty';
+import { Bounds } from '@eclipse-glsp/sprotty';
 
-export function left(bounds: Bounds): number {
-    return bounds.x;
-}
+/** @deprecated Use {@link Bounds.left} */
+export const left = Bounds.left;
 
-export function center(bounds: Bounds): number {
-    return bounds.x + (bounds.width >= 0 ? bounds.width * 0.5 : 0);
-}
+/** @deprecated Use {@link Bounds.centerX} */
+export const center = Bounds.center;
 
-export function right(bounds: Bounds): number {
-    return bounds.x + bounds.width;
-}
+/** @deprecated Use {@link Bounds.right} */
+export const right = Bounds.right;
 
-export function top(bounds: Bounds): number {
-    return bounds.y;
-}
+/** @deprecated Use {@link Bounds.top} */
+export const top = Bounds.top;
 
-export function middle(bounds: Bounds): number {
-    return bounds.y + (bounds.height >= 0 ? bounds.height * 0.5 : 0);
-}
+/** @deprecated Use {@link Bounds.middle} */
+export const middle = Bounds.middle;
 
-export function bottom(bounds: Bounds): number {
-    return bounds.y + bounds.height;
-}
+/** @deprecated Use {@link Bounds.bottom} */
+export const bottom = Bounds.bottom;
 
-export function topLeft(bounds: Bounds): Point {
-    return { x: left(bounds), y: top(bounds) };
-}
+/** @deprecated Use {@link Bounds.topLeft} */
+export const topLeft = Bounds.topLeft;
 
-export function topCenter(bounds: Bounds): Point {
-    return { x: center(bounds), y: top(bounds) };
-}
+/** @deprecated Use {@link Bounds.topCenter} */
+export const topCenter = Bounds.topCenter;
 
-export function topRight(bounds: Bounds): Point {
-    return { x: right(bounds), y: top(bounds) };
-}
+/** @deprecated Use {@link Bounds.topRight} */
+export const topRight = Bounds.topRight;
 
-export function middleLeft(bounds: Bounds): Point {
-    return { x: left(bounds), y: middle(bounds) };
-}
+/** @deprecated Use {@link Bounds.middleLeft} */
+export const middleLeft = Bounds.middleLeft;
 
-export function middleCenter(bounds: Bounds): Point {
-    return { x: center(bounds), y: middle(bounds) };
-}
+/** @deprecated Use {@link Bounds.middleCenter} */
+export const middleCenter = Bounds.middleCenter;
 
-export function middleRight(bounds: Bounds): Point {
-    return { x: right(bounds), y: middle(bounds) };
-}
+/** @deprecated Use {@link Bounds.middleRight} */
+export const middleRight = Bounds.middleRight;
 
-export function bottomLeft(bounds: Bounds): Point {
-    return { x: left(bounds), y: bottom(bounds) };
-}
+/** @deprecated Use {@link Bounds.bottomLeft} */
+export const bottomLeft = Bounds.bottomLeft;
 
-export function bottomCenter(bounds: Bounds): Point {
-    return { x: center(bounds), y: bottom(bounds) };
-}
+/** @deprecated Use {@link Bounds.bottomCenter} */
+export const bottomCenter = Bounds.bottomCenter;
 
-export function bottomRight(bounds: Bounds): Point {
-    return { x: right(bounds), y: bottom(bounds) };
-}
+/** @deprecated Use {@link Bounds.bottomRight} */
+export const bottomRight = Bounds.bottomRight;
 
-export function sortBy(rankFunc: (elem: Bounds) => number, ...points: Bounds[]): Bounds[] {
-    return points.sort(compareFunction(rankFunc));
-}
+/** @deprecated Use {@link Bounds.left} */
+export const sortBy = Bounds.sortBy;
 
-export function compareFunction<T>(rankFunc: (elem: T) => number): (left: T, right: T) => number {
-    return (elemLeft, elemRight) => rankFunc(elemLeft) - rankFunc(elemRight);
-}
+export const compareFunction =
+    <T>(rankFunc: (elem: T) => number): ((x: T, y: T) => number) =>
+    (x, y) =>
+        rankFunc(x) - rankFunc(y);
 
-export function isAbove(leftBounds: Bounds, rightBounds: Bounds): boolean {
-    return top(leftBounds) <= top(rightBounds);
-}
+/** @deprecated Use {@link Bounds.isAbove} */
+export const isAbove = Bounds.isAbove;
 
-export function isBelow(leftBounds: Bounds, rightBounds: Bounds): boolean {
-    return top(leftBounds) >= top(rightBounds);
-}
+/** @deprecated Use {@link Bounds.isBelow} */
+export const isBelow = Bounds.isBelow;
 
-export function isBefore(leftBounds: Bounds, rightBounds: Bounds): boolean {
-    return left(leftBounds) < left(rightBounds);
-}
+/** @deprecated Use {@link Bounds.isBefore} */
+export const isBefore = Bounds.isBefore;
 
-export function isAfter(leftBounds: Bounds, rightBounds: Bounds): boolean {
-    return left(leftBounds) >= left(rightBounds);
-}
+/** @deprecated Use {@link Bounds.isAfter} */
+export const isAfter = Bounds.isAfter;

package/src/utils/gmodel-util.ts

@@ -25,6 +25,7 @@ import {
     GParentElement,
     GRoutableElement,
     GRoutingHandle,
+    Locateable,
     ModelIndexImpl,
     Point,
     RoutedPoint,
@@ -39,6 +40,7 @@ import {
     isSelected,
     remove
 } from '@eclipse-glsp/sprotty';
+import { ResizeHandleLocation } from '../features/change-bounds/model';
 
 /**
  * Helper type to represent a filter predicate for {@link GModelElement}s. This is used to retrieve
@@ -136,9 +138,12 @@ export function isNotUndefined<T>(element: T | undefined): element is T {
  * @param element The element to which the css classes should be added.
  * @param cssClasses The set of css classes as string array.
  */
-export function addCssClasses(element: GModelElement, cssClasses: string[]): void {
+export function addCssClasses(element: GModelElement, cssClasses: string[]): void;
+export function addCssClasses(element: GModelElement, ...cssClasses: string[]): void;
+export function addCssClasses(element: GModelElement, ...cssClasses: string[] | [string[]]): void {
+    const classes = Array.isArray(cssClasses[0]) ? cssClasses[0] : cssClasses;
     const elementCssClasses: string[] = element.cssClasses ?? [];
-    distinctAdd(elementCssClasses, ...cssClasses);
+    distinctAdd(elementCssClasses, ...classes);
     element.cssClasses = elementCssClasses;
 }
 
@@ -147,11 +152,44 @@ export function addCssClasses(element: GModelElement, cssClasses: string[]): voi
  * @param element The element from which the css classes should be removed.
  * @param cssClasses The set of css classes as string array.
  */
-export function removeCssClasses(root: GModelElement, cssClasses: string[]): void {
-    if (!root.cssClasses || root.cssClasses.length === 0) {
+export function removeCssClasses(element: GModelElement, cssClasses: string[]): void;
+export function removeCssClasses(element: GModelElement, ...cssClasses: string[]): void;
+export function removeCssClasses(element: GModelElement, ...cssClasses: string[] | [string[]]): void {
+    if (!element.cssClasses || element.cssClasses.length === 0) {
         return;
     }
-    remove(root.cssClasses, ...cssClasses);
+    const classes = Array.isArray(cssClasses[0]) ? cssClasses[0] : cssClasses;
+    remove(element.cssClasses, ...classes);
+}
+
+/**
+ * Adds a css classs to a set of {@link GModelElement}s.
+ *
+ * @param elements The elements to which the css class should be added.
+ * @param cssClass The css class to add.
+ */
+export function addCssClassToElements(elements: GModelElement[], ...cssClasses: string[]): void {
+    for (const element of elements) {
+        addCssClasses(element, cssClasses);
+    }
+}
+
+/**
+ * Removes a css class from a set of {@link GModelElement}s.
+ * @param elements The elements from which the css class should be removed.
+ * @param cssClass The css class to remove.
+ */
+export function removeCssClassOfElements(elements: GModelElement[], ...cssClasses: string[]): void {
+    for (const element of elements) {
+        removeCssClasses(element, cssClasses);
+    }
+}
+
+/**
+ * Toggles a css class on a {@link GModelElement} based on the given toggle flag.
+ */
+export function toggleCssClass(element: GModelElement, cssClass: string, toggle: boolean): void {
+    return toggle ? addCssClasses(element, cssClass) : removeCssClasses(element, cssClass);
 }
 
 export function isNonRoutableSelectedMovableBoundsAware(element: GModelElement): element is SelectableBoundsAware {
@@ -194,17 +232,32 @@ export function isRoutingHandle(element: GModelElement | undefined): element is
 export function isSelectableAndBoundsAware(element: GModelElement): element is SelectableBoundsAware {
     return isSelectable(element) && isBoundsAware(element);
 }
+/**
+ * Union type to describe {@link GModelElement}s that implement the {@link Selectable} feature.
+ */
+export type SelectableElement = GModelElement & Selectable;
 
 /**
  * Union type to describe {@link GModelElement}s that implement the {@link Selectable} and {@link BoundsAware} feature.
  */
-export type SelectableBoundsAware = GModelElement & BoundsAware & Selectable;
+export type SelectableBoundsAware = SelectableElement & BoundsAware;
 
 /**
  * Union type to describe {@link GModelElement}s that implement the {@link BoundsAware} feature.
  */
 export type BoundsAwareModelElement = GModelElement & BoundsAware;
 
+/**
+ * Union type to describe {@link GModelElement}s that implement the {@link Locateable} feature.
+ */
+export type MoveableElement = GModelElement & Locateable;
+
+export interface Resizable extends BoundsAware, Selectable {}
+
+export interface ResizableModelElement extends GParentElement, Resizable {
+    resizeLocations?: ResizeHandleLocation[];
+}
+
 /**
  * Helper function to translate a given {@link GModelElement} into its corresponding {@link ElementAndBounds} representation.
  * @param element The element to translate.
@@ -347,7 +400,7 @@ export function findTopLevelElementByFeature<T>(
 export function calculateDeltaBetweenPoints(target: Point, source: Point, element: GModelElement): Point {
     const delta = Point.subtract(target, source);
     const zoom = getZoom(element);
-    const adaptedDelta = { x: delta.x / zoom, y: delta.y / zoom };
+    const adaptedDelta = Point.divideScalar(delta, zoom);
     return adaptedDelta;
 }
 
@@ -373,3 +426,32 @@ export function getDescendantIds(element?: GModelElement, skip?: (t: GModelEleme
     }
     return ids;
 }
+
+/**
+ * Returns a filter function that checks if the given element is not a descendant of any of the given elements.
+ *
+ * @param elements  The elements that the element should not be a descendant of.
+ * @returns the filter function
+ */
+export function isNotDescendantOfAnyElement<T extends GModelElement>(elements: FluentIterable<T>): (element: T) => boolean {
+    const elementsSet = new Set<GModelElement>(elements);
+    return (element: T): boolean => {
+        let parent: GModelElement = element;
+        while (parent instanceof GChildElement) {
+            parent = parent.parent;
+            if (elementsSet.has(parent)) {
+                return false;
+            }
+        }
+        return true;
+    };
+}
+
+/**
+ * Removes any descendants of the given elements from the given elements.
+ * @param elements The elements to filter.
+ * @returns the filtered elements
+ */
+export function removeDescendants<T extends GModelElement>(elements: FluentIterable<T>): FluentIterable<T> {
+    return elements.filter(isNotDescendantOfAnyElement(elements));
+}

package/src/utils/layout-utils.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2023 EclipseSource and others.
+ * Copyright (c) 2020-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,19 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import {
-    BoundsAware,
-    Dimension,
-    ElementAndBounds,
-    ElementMove,
-    ModelLayoutOptions,
-    Point,
-    GModelElement,
-    Writable
-} from '@eclipse-glsp/sprotty';
+import { Dimension, ElementAndBounds, ElementMove, GModelElement, ModelLayoutOptions, Point, Writable } from '@eclipse-glsp/sprotty';
 import { IMovementRestrictor } from '../features/change-bounds/movement-restrictor';
+import { BoundsAwareModelElement } from './gmodel-util';
 
-export function minWidth(element: GModelElement & BoundsAware): number {
+export function minWidth(element: BoundsAwareModelElement): number {
     const layoutOptions = getLayoutOptions(element);
     if (layoutOptions !== undefined && typeof layoutOptions.minWidth === 'number') {
         return layoutOptions.minWidth;
@@ -33,7 +25,7 @@ export function minWidth(element: GModelElement & BoundsAware): number {
     return 1;
 }
 
-export function minHeight(element: GModelElement & BoundsAware): number {
+export function minHeight(element: BoundsAwareModelElement): number {
     const layoutOptions = getLayoutOptions(element);
     if (layoutOptions !== undefined && typeof layoutOptions.minHeight === 'number') {
         return layoutOptions.minHeight;
@@ -41,6 +33,10 @@ export function minHeight(element: GModelElement & BoundsAware): number {
     return 1;
 }
 
+export function minDimensions(element: BoundsAwareModelElement): Dimension {
+    return { width: minWidth(element), height: minHeight(element) };
+}
+
 export function getLayoutOptions(element: GModelElement): ModelLayoutOptions | undefined {
     const layoutOptions = (element as any).layoutOptions;
     if (layoutOptions !== undefined) {
@@ -49,19 +45,16 @@ export function getLayoutOptions(element: GModelElement): ModelLayoutOptions | u
     return undefined;
 }
 
-export function isValidSize(element: GModelElement & BoundsAware, size: Dimension): boolean {
+export function isValidSize(element: BoundsAwareModelElement, size: Dimension): boolean {
     return size.width >= minWidth(element) && size.height >= minHeight(element);
 }
 
-export function isValidMove(element: GModelElement & BoundsAware, newPosition?: Point, movementRestrictor?: IMovementRestrictor): boolean {
-    if (movementRestrictor) {
-        return movementRestrictor.validate(element, newPosition);
-    }
-    return true;
+export function isValidMove(element: GModelElement, newPosition?: Point, movementRestrictor?: IMovementRestrictor): boolean {
+    return movementRestrictor?.validate(element, newPosition) ?? true;
 }
 
 export function toValidElementMove(
-    element: GModelElement & BoundsAware,
+    element: BoundsAwareModelElement,
     move: ElementMove,
     movementRestrictor?: IMovementRestrictor
 ): ElementMove | undefined {
@@ -72,7 +65,7 @@ export function toValidElementMove(
 }
 
 export function toValidElementAndBounds(
-    element: GModelElement & BoundsAware,
+    element: BoundsAwareModelElement,
     bounds: Writable<ElementAndBounds>,
     movementRestrictor?: IMovementRestrictor
 ): ElementAndBounds | undefined {

package/src/utils/viewpoint-util.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
@@ -16,7 +16,6 @@
 
 import {
     Bounds,
-    BoundsAware,
     Dimension,
     GChildElement,
     GModelElement,
@@ -29,7 +28,6 @@ import {
     isViewport,
     translateBounds
 } from '@eclipse-glsp/sprotty';
-import { bottomRight, topLeft } from './geometry-util';
 import { BoundsAwareModelElement } from './gmodel-util';
 
 /**
@@ -50,33 +48,23 @@ export function getAbsolutePosition(target: GModelElement, mouseEvent: MouseEven
 }
 
 export function getAbsolutePositionByPoint(target: GModelElement, point: Point): Point {
-    let xPos = point.x;
-    let yPos = point.y;
-    const canvasBounds = target.root.canvasBounds;
-    xPos -= canvasBounds.x;
-    yPos -= canvasBounds.y;
+    let position = Point.subtract(point, target.root.canvasBounds);
 
     const viewport: Viewport | undefined = findParentByFeature(target, isViewport);
-    const zoom = viewport ? viewport.zoom : 1;
     if (viewport) {
-        const scroll: Point = { x: viewport.scroll.x, y: viewport.scroll.y };
-        xPos += scroll.x * zoom;
-        yPos += scroll.y * zoom;
-
-        xPos /= zoom;
-        yPos /= zoom;
+        const zoom = viewport.zoom;
+        const zoomedScroll = Point.multiplyScalar(viewport.scroll, zoom);
+        position = Point.add(position, zoomedScroll);
+        position = Point.divideScalar(position, zoom);
     }
 
-    return {
-        x: xPos,
-        y: yPos
-    };
+    return position;
 }
 
 export function getViewportBounds(target: GModelElement, bounds: Bounds): Bounds {
-    const start = getAbsolutePositionByPoint(target, topLeft(bounds));
-    const end = getAbsolutePositionByPoint(target, bottomRight(bounds));
-    return { ...start, width: end.x - start.x, height: end.y - start.y };
+    const topLeft = getAbsolutePositionByPoint(target, Bounds.topLeft(bounds));
+    const bottomRight = getAbsolutePositionByPoint(target, Bounds.bottomRight(bounds));
+    return Bounds.from(topLeft, bottomRight);
 }
 
 /**
@@ -85,7 +73,7 @@ export function getViewportBounds(target: GModelElement, bounds: Bounds): Bounds
  *
  * @param target  A bounds-aware element from the diagram
  */
-export function toAbsoluteBounds(element: GModelElement & BoundsAware): Bounds {
+export function toAbsoluteBounds(element: BoundsAwareModelElement): Bounds {
     const location = isAlignable(element) ? element.alignment : Point.ORIGIN;
     const x = location.x;
     const y = location.y;
@@ -100,7 +88,7 @@ export function toAbsoluteBounds(element: GModelElement & BoundsAware): Bounds {
  *
  * @param target  A bounds-aware element from the diagram
  */
-export function toAbsolutePosition(target: GModelElement & BoundsAware): Point {
+export function toAbsolutePosition(target: BoundsAwareModelElement): Point {
     return toAbsoluteBounds(target);
 }
 
@@ -110,7 +98,7 @@ export function toAbsolutePosition(target: GModelElement & BoundsAware): Point {
  *
  * @param target  A bounds-aware element from the diagram
  */
-export function toAbsoluteSize(target: GModelElement & BoundsAware): Dimension {
+export function toAbsoluteSize(target: BoundsAwareModelElement): Dimension {
     return toAbsoluteBounds(target);
 }
 
@@ -140,7 +128,7 @@ export function absoluteToParent(element: BoundsAwareModelElement & GChildElemen
  */
 export function absoluteToLocal(element: BoundsAwareModelElement, absolutePoint: Point): Point {
     const absoluteElementBounds = toAbsoluteBounds(element);
-    return { x: absolutePoint.x - absoluteElementBounds.x, y: absolutePoint.y - absoluteElementBounds.y };
+    return Point.subtract(absolutePoint, absoluteElementBounds);
 }
 
 /**

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021-2023 EclipseSource and others.
+ * Copyright (c) 2021-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,9 +27,9 @@ import {
     GCompartment,
     GCompartmentView,
     GForeignObjectElement,
-    GGraphView,
     GHtmlRoot,
     GLabel,
+    GLabelView,
     GNode,
     GPort,
     GPreRenderedElement,
@@ -41,22 +41,25 @@ 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 };
-    configureDefaultModelElements(context);
-});
+export const baseViewModule = new FeatureModule(
+    (bind, unbind, isBound, rebind) => {
+        const context = { bind, unbind, isBound, rebind };
+        configureDefaultModelElements(context);
+    },
+    { featureId: Symbol('baseView') }
+);
 
 export function configureDefaultModelElements(context: Pick<BindingContext, 'bind' | 'isBound'>): void {
     // HTML elements

package/src/views/compartments.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021-2023 EclipseSource and others.
+ * Copyright (c) 2021-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,12 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
+import { GCompartment, RenderingContext, ShapeView, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { GCompartment, RenderingContext, ShapeView, svg } from '@eclipse-glsp/sprotty';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
 
 @injectable()
 export class StructureCompartmentView extends ShapeView {

package/src/views/gedge-view.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021-2023 EclipseSource and others.
+ * Copyright (c) 2021-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,14 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
 import { Point, PolylineEdgeView, RenderingContext, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { Classes, VNode } from 'snabbdom';
-import { EdgePadding } from '../utils/argument-utils';
 import { GEdge } from '../model';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
+import { EdgePadding } from '../utils/argument-utils';
 
 @injectable()
 export class GEdgeView extends PolylineEdgeView {

package/src/views/ggraph-view.tsx

@@ -0,0 +1,53 @@
+/********************************************************************************
+ * 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, Writable } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { VNode } from 'snabbdom';
+import { GridManager, GridStyle } from '../features/grid/grid-manager';
+import { GridProperty } from '../features/grid/grid-style';
+
+@injectable()
+export class GGraphView extends SGraphView {
+    @inject(GridManager) @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(viewport: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
+        if (context.targetKind === 'hidden' || !this.gridManager) {
+            return {};
+        }
+        const bounds = this.getBackgroundBounds(viewport, context, this.gridManager);
+        return {
+            [GridProperty.GRID_BACKGROUND_X]: bounds.x + 'px',
+            [GridProperty.GRID_BACKGROUND_Y]: bounds.y + 'px',
+            [GridProperty.GRID_BACKGROUND_WIDTH]: bounds.width + 'px',
+            [GridProperty.GRID_BACKGROUND_HEIGHT]: bounds.height + 'px',
+            [GridProperty.GRID_BACKGROUND_ZOOM]: viewport.zoom + ''
+        };
+    }
+
+    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 };
+    }
+}