@eclipse-glsp/client 2.2.0-next.351 → 2.2.0-next.354

package/lib/views/rounded-corner-view.js

@@ -22,12 +22,11 @@ exports.toClipPathId = exports.RoundedCornerNodeView = void 0;
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-const inversify_1 = require("inversify");
+/** @jsx svg */
 const sprotty_1 = require("@eclipse-glsp/sprotty");
+const inversify_1 = require("inversify");
 const argument_utils_1 = require("../utils/argument-utils");
 const rounded_corner_1 = require("./rounded-corner");
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: sprotty_1.svg };
 let RoundedCornerNodeView = class RoundedCornerNodeView extends sprotty_1.RectangularNodeView {
     render(node, context) {
         const cornerRadius = argument_utils_1.CornerRadius.from(node);
@@ -35,10 +34,10 @@ let RoundedCornerNodeView = class RoundedCornerNodeView extends sprotty_1.Rectan
             return this.renderWithoutRadius(node, context);
         }
         const wrapper = new rounded_corner_1.RoundedCornerWrapper(node, cornerRadius);
-        return (JSX.createElement("g", { "class-node": true },
-            JSX.createElement("defs", null,
-                JSX.createElement("clipPath", { id: toClipPathId(node) },
-                    JSX.createElement("path", { d: this.renderPath(wrapper, context, this.getClipPathInsets() || 0) }))),
+        return ((0, sprotty_1.svg)("g", { "class-node": true },
+            (0, sprotty_1.svg)("defs", null,
+                (0, sprotty_1.svg)("clipPath", { id: toClipPathId(node) },
+                    (0, sprotty_1.svg)("path", { d: this.renderPath(wrapper, context, this.getClipPathInsets() || 0) }))),
             this.renderPathNode(wrapper, context),
             context.renderChildren(node)));
     }
@@ -49,7 +48,7 @@ let RoundedCornerNodeView = class RoundedCornerNodeView extends sprotty_1.Rectan
         return 2;
     }
     renderPathNode(wrapper, context) {
-        return (JSX.createElement("path", Object.assign({ d: this.renderPath(wrapper, context, 0), "class-sprotty-node": wrapper.element instanceof sprotty_1.GNode, "class-sprotty-port": wrapper.element instanceof sprotty_1.GPort, "class-mouseover": wrapper.element.hoverFeedback, "class-selected": wrapper.element.selected }, this.additionalClasses(wrapper.element, context))));
+        return ((0, sprotty_1.svg)("path", Object.assign({ d: this.renderPath(wrapper, context, 0), "class-sprotty-node": wrapper.element instanceof sprotty_1.GNode, "class-sprotty-port": wrapper.element instanceof sprotty_1.GPort, "class-mouseover": wrapper.element.hoverFeedback, "class-selected": wrapper.element.selected }, this.additionalClasses(wrapper.element, context))));
     }
     additionalClasses(_node, _context) {
         return {};

package/lib/views/rounded-corner-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"rounded-corner-view.js","sourceRoot":"","sources":["../../src/views/rounded-corner-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"rounded-corner-view.js","sourceRoot":"","sources":["../../src/views/rounded-corner-view.tsx"],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,eAAe;AACf,mDAAuI;AACvI,yCAAuC;AAEvC,4DAAuD;AACvD,qDAAwD;AAGjD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,6BAAmB;IACjD,MAAM,CAAC,IAA8C,EAAE,OAAyB;QACrF,MAAM,YAAY,GAAG,6BAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACnD,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,qCAAoB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAC7D,OAAO,CACH,wCAAe,IAAI;YACf;gBACI,iCAAU,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC;oBAC5B,6BAAM,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC,GAAS,CAC3E,CACR;YACN,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC;YACrC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAC7B,CACP,CAAC;IACN,CAAC;IAES,mBAAmB,CAAC,IAAsD,EAAE,OAAyB;QAC3G,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC;IAES,iBAAiB;QACvB,OAAO,CAAC,CAAC;IACb,CAAC;IAES,cAAc,CAAC,OAAuC,EAAE,OAAyB;QACvF,OAAO,CACH,2CACI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,wBACnB,OAAO,CAAC,OAAO,YAAY,eAAK,wBAChC,OAAO,CAAC,OAAO,YAAY,eAAK,qBACnC,OAAO,CAAC,OAAO,CAAC,aAAa,oBAC9B,OAAO,CAAC,OAAO,CAAC,QAAQ,IACpC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,EACtD,CACL,CAAC;IACN,CAAC;IAES,iBAAiB,CAAC,KAAuD,EAAE,QAA0B;QAC3G,OAAO,EAAE,CAAC;IACd,CAAC;IAES,UAAU,CAAC,OAAuC,EAAE,QAA0B,EAAE,KAAa;QACnG,6CAA6C;QAC7C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACrH,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QAC5H,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QAE9H,MAAM,IAAI,GACN,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,OAAO,GAAG,KAAK,IAAI,CAAC,CAC3F,OAAO,CAAC,aAAa,CAAC,OAAO,GAAG,KAAK,CACxC,EAAE;YACH,IAAI,aAAa,EAAE;YACnB,IAAI,OAAO,CAAC,cAAc,CAAC,OAAO,GAAG,KAAK,MAAM,OAAO,CAAC,cAAc,CAAC,OAAO,GAAG,KAAK,IAClF,OAAO,CAAC,cAAc,CAAC,OAAO,GAAG,KACrC,EAAE;YACF,IAAI,eAAe,EAAE;YACrB,MAAM,OAAO,CAAC,iBAAiB,CAAC,OAAO,GAAG,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,OAAO,GAAG,KAAK,CAAC,IAC3F,OAAO,CAAC,iBAAiB,CAAC,OAAO,GAAG,KACxC,EAAE;YACF,IAAI,CAAC,gBAAgB,EAAE;YACvB,IAAI,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,CACjG,OAAO,CAAC,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAC3C,EAAE;YACH,IAAI,CAAC;QACT,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ,CAAA;AAxEY,sDAAqB;gCAArB,qBAAqB;IADjC,IAAA,sBAAU,GAAE;GACA,qBAAqB,CAwEjC;AAED,SAAgB,YAAY,CAAC,IAAsD;IAC/E,OAAO,GAAG,IAAI,CAAC,EAAE,YAAY,CAAC;AAClC,CAAC;AAFD,oCAEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-glsp/client",
-  "version": "2.2.0-next.351+53d421e",
+  "version": "2.2.0-next.354+cb93d58",
   "description": "A sprotty-based client for GLSP",
   "keywords": [
     "eclipse",
@@ -46,7 +46,7 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@eclipse-glsp/sprotty": "2.2.0-next.351+53d421e",
+    "@eclipse-glsp/sprotty": "2.2.0-next.354+cb93d58",
     "autocompleter": "^9.1.2",
     "file-saver": "^2.0.5",
     "lodash": "4.17.21",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "53d421e065b6824cac7d284c5f2ea4a32bbccf3a"
+  "gitHead": "cb93d584a5e1822702c6320b36be7e608bcdbd5b"
 }

package/src/base/action-dispatcher.ts

@@ -13,20 +13,23 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, ActionDispatcher, EMPTY_ROOT, RequestAction, ResponseAction, SetModelAction } from '@eclipse-glsp/sprotty';
+import { Action, ActionDispatcher, EMPTY_ROOT, GModelRoot, RequestAction, ResponseAction, SetModelAction } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
 import { GLSPActionHandlerRegistry } from './action-handler-registry';
+import { IGModelRootListener } from './editor-context-service';
 import { OptionalAction } from './model/glsp-model-source';
 import { ModelInitializationConstraint } from './model/model-initialization-constraint';
 
 @injectable()
-export class GLSPActionDispatcher extends ActionDispatcher {
+export class GLSPActionDispatcher extends ActionDispatcher implements IGModelRootListener {
     protected readonly timeouts: Map<string, NodeJS.Timeout> = new Map();
     protected initializedConstraint = false;
 
     @inject(ModelInitializationConstraint)
     protected initializationConstraint: ModelInitializationConstraint;
 
+    protected postUpdateQueue: Action[] = [];
+
     override initialize(): Promise<void> {
         if (!this.initialized) {
             this.initialized = this.doInitialize();
@@ -71,6 +74,27 @@ export class GLSPActionDispatcher extends ActionDispatcher {
         this.initializationConstraint.onInitialized(() => this.dispatchAll(actions));
     }
 
+    /**
+     * Processes all given actions, by dispatching them to the corresponding handlers, after the next model update.
+     * The given actions are queued until the next model update cycle has been completed i.e.
+     * the `EditorContextService.onModelRootChanged` event is triggered.
+     *
+     * @param actions The actions that should be dispatched after the next model update
+     */
+    dispatchAfterNextUpdate(...actions: Action[]): void {
+        this.postUpdateQueue.push(...actions);
+    }
+
+    modelRootChanged(_root: Readonly<GModelRoot>): void {
+        if (this.postUpdateQueue.length === 0) {
+            return;
+        }
+
+        const toDispatch = [...this.postUpdateQueue];
+        this.postUpdateQueue = [];
+        this.dispatchAll(toDispatch);
+    }
+
     override async dispatch(action: Action): Promise<void> {
         const result = await super.dispatch(action);
         this.initializationConstraint.notifyDispatched(action);

package/src/base/command-stack.ts

@@ -67,12 +67,14 @@ export class GLSPCommandStack extends CommandStack implements Disposable {
         return this.currentModel;
     }
 
-    override execute(command: ICommand): Promise<GModelRoot> {
-        const result = super.execute(command);
+    override async execute(command: ICommand): Promise<GModelRoot> {
         if (command instanceof SetModelCommand || command instanceof UpdateModelCommand) {
-            result.then(root => this.notifyListeners(root));
+            const result = await super.execute(command);
+            this.notifyListeners(result);
+            return result;
         }
-        return result;
+
+        return super.execute(command);
     }
 
     protected notifyListeners(root: Readonly<GModelRoot>): void {

package/src/base/default.module.ts

@@ -99,6 +99,7 @@ export const defaultModule = new FeatureModule(
         bindAsService(context, TYPES.MouseListener, SelectionClearingMouseListener);
         bindOrRebind(context, TYPES.ICommandStack).to(GLSPCommandStack).inSingletonScope();
         bind(GLSPActionDispatcher).toSelf().inSingletonScope();
+        bind(TYPES.IGModelRootListener).toService(GLSPActionDispatcher);
         bindOrRebind(context, TYPES.IActionDispatcher).toService(GLSPActionDispatcher);
 
         bindOrRebind(context, ActionHandlerRegistry).to(GLSPActionHandlerRegistry).inSingletonScope();

package/src/default-modules.spec.ts

@@ -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 { FeatureModule } from '@eclipse-glsp/sprotty';
+import { expect } from 'chai';
+import { Container } from 'inversify';
+import * as sinon from 'sinon';
+import { defaultModule } from './base/default.module';
+import { DEFAULT_MODULES, initializeDiagramContainer } from './default-modules';
+
+describe('default-modules', () => {
+    // InitializeDiagramContainer internally uses `resolveContainerConfiguration` so we only test functionality
+    // that is not covered by the tests of `resolveContainerConfiguration`.
+    describe('initializeDiagramContainer', () => {
+        const sandbox = sinon.createSandbox();
+        const container = new Container();
+        const loadSpy = sandbox.spy(container, 'load');
+        container.snapshot();
+
+        beforeEach(() => {
+            sandbox.reset();
+            container.restore();
+            container.snapshot();
+        });
+        it('should initialize the diagram container with the default modules in addition to the given config and load them first', () => {
+            const extraModule = new FeatureModule(() => {});
+            initializeDiagramContainer(container, { add: extraModule });
+            expect(loadSpy.calledOnce).to.be.true;
+            const callArgs = loadSpy.firstCall.args;
+            const lastModule = callArgs.pop();
+            expect(callArgs).to.be.deep.equal(DEFAULT_MODULES).ordered;
+            expect(lastModule).to.be.equal(extraModule);
+        });
+        it('should throw an error if the base (default) module is removed via configuration', () => {
+            expect(() => initializeDiagramContainer(container, { remove: defaultModule })).to.throw(/Invalid module configuration/);
+        });
+        // eslint-disable-next-line max-len
+        it('should throw an error if the base (default) module is not the first module of the resolved configured (removed and added again)', () => {
+            expect(() => initializeDiagramContainer(container, { remove: defaultModule, add: defaultModule })).to.throw(
+                /Invalid module configuration/
+            );
+        });
+    });
+});

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

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /* eslint-disable max-len */
-
+/** @jsx svg */
 import { Bounds, GModelElement, IVNodePostprocessor, Point, isDecoration, isSizeable, setClass, svg } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
 import { VNode } from 'snabbdom';
@@ -22,9 +22,6 @@ import { GGraph } from '../../model';
 import { BoundsAwareModelElement } from '../../utils/gmodel-util';
 import { DebugManager } from './debug-manager';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 export const CSS_DEBUG_BOUNDS = 'debug-bounds';
 
 @injectable()

package/src/features/helper-lines/view.tsx

@@ -13,14 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
 import { IViewArgs, RenderingContext, ShapeView, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import { HelperLine, SelectionBounds } from './model';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class HelperLineView extends ShapeView {
     override render(model: HelperLine, _context: RenderingContext): VNode | undefined {

package/src/features/tools/change-bounds/view.tsx

@@ -13,14 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
 import { IView, Point, RenderingContext, setAttr, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import { GResizeHandle } from '../../change-bounds/model';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class GResizeHandleView implements IView {
     render(handle: GResizeHandle, context: RenderingContext): VNode | undefined {

package/src/features/tools/edge-creation/view.tsx

@@ -13,12 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
+import { GModelElement, IView, Point, RenderingContext, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { IView, Point, RenderingContext, GModelElement, svg } from '@eclipse-glsp/sprotty';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
 
 /**
  * This view is used for the invisible end of the feedback edge.

package/src/features/tools/marquee-selection/view.tsx

@@ -13,14 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
+import { RectangularNodeView, RenderingContext, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { RectangularNodeView, RenderingContext, svg } from '@eclipse-glsp/sprotty';
 import { MarqueeNode } from './model';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class MarqueeView extends RectangularNodeView {
     override render(node: MarqueeNode, context: RenderingContext): VNode {

package/src/features/tools/node-creation/node-creation-views.tsx

@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-
+/** @jsx svg */
 import { IView, RenderingContext, TYPES, setClass, svg } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
 import { VNode } from 'snabbdom';
@@ -21,9 +21,6 @@ import { GArgument } from '../../../utils/argument-utils';
 import { Grid } from '../../grid/grid';
 import { ARG_LENGTH, InsertIndicator } from './insert-indicator';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class InsertIndicatorView implements IView {
     @optional() @inject(TYPES.Grid) protected grid?: Grid;

package/src/views/compartments.tsx

@@ -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

@@ -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

@@ -32,7 +32,7 @@ export class GGraphView extends SGraphView {
     }
 
     protected getGridStyle(viewport: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
-        if (context.targetKind === 'hidden' || !this.gridManager?.isGridVisible) {
+        if (context.targetKind === 'hidden' || !this.gridManager) {
             return {};
         }
         const bounds = this.getBackgroundBounds(viewport, context, this.gridManager);
@@ -41,11 +41,7 @@ export class GGraphView extends SGraphView {
             [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 + '',
-            [GridProperty.GRID_BACKGROUND_IMAGE]: this.getBackgroundImage(viewport, context, this.gridManager),
-            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
+            [GridProperty.GRID_BACKGROUND_ZOOM]: viewport.zoom + ''
         };
     }
 
@@ -54,10 +50,4 @@ export class GGraphView extends SGraphView {
         const size = Dimension.fromPoint(Point.multiplyScalar(gridManager.grid, viewport.zoom));
         return { ...position, ...size };
     }
-
-    protected getBackgroundImage(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
-        const color = getComputedStyle(document.documentElement).getPropertyValue(GridProperty.GRID_COLOR).trim().replace(/#/g, '%23');
-        // 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="${color}" stroke-width="1" /></svg>')`;
-    }
 }

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

@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-
+/** @jsx html */
 import {
     Bounds,
     Dimension,
@@ -36,9 +36,6 @@ import { VNode, VNodeStyle, h } from 'snabbdom';
 import { GridManager, GridStyle } from '../features/grid/grid-manager';
 import { GridProperty } from '../features/grid/grid-style';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: html };
-
 /**
  * Special viewport root view that renders horizontal and vertical projection bars for quick navigation.
  */
@@ -73,7 +70,7 @@ export class GLSPProjectionView extends ProjectedViewportView {
     }
 
     protected getGridStyle(viewport: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
-        if (context.targetKind === 'hidden' || !this.gridManager?.isGridVisible) {
+        if (context.targetKind === 'hidden' || !this.gridManager) {
             return {};
         }
         const bounds = this.getBackgroundBounds(viewport, context, this.gridManager);
@@ -82,11 +79,7 @@ export class GLSPProjectionView extends ProjectedViewportView {
             [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 + '',
-            [GridProperty.GRID_BACKGROUND_IMAGE]: this.getBackgroundImage(viewport, context, this.gridManager),
-            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
+            [GridProperty.GRID_BACKGROUND_ZOOM]: viewport.zoom + ''
         };
     }
 
@@ -96,35 +89,15 @@ export class GLSPProjectionView extends ProjectedViewportView {
         return { ...position, ...size };
     }
 
-    protected getBackgroundImage(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
-        const color = getComputedStyle(document.documentElement).getPropertyValue(GridProperty.GRID_COLOR).trim().replace(/#/g, '%23');
-        // 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="${color}" stroke-width="1" /></svg>')`;
-    }
-
     protected override renderProjectionBar(
         projections: ViewProjection[],
         model: Readonly<GViewportRootElement>,
         modelBounds: Bounds,
         orientation: 'horizontal' | 'vertical'
     ): VNode {
-        const params: ProjectionParams = { modelBounds, orientation } as ProjectionParams;
-        // NOTE: Here we assume that the projection bars have the same size as the diagram canvas,
-        // i.e. they are drawn as overlay above the canvas.
-        params.factor =
-            orientation === 'horizontal' ? model.canvasBounds.width / modelBounds.width : model.canvasBounds.height / modelBounds.height;
-        params.zoomedFactor = params.factor / model.zoom;
-        return (
-            <div
-                class-sprotty-projection-bar={true}
-                class-horizontal={orientation === 'horizontal'}
-                class-vertical={orientation === 'vertical'}
-                class-bordered-projection-bar={true}
-            >
-                {this.renderViewport(model, params)}
-                {projections.map(p => this.renderProjection(p, model, params))}
-            </div>
-        );
+        const vnode = super.renderProjectionBar(projections, model, modelBounds, orientation);
+        setClass(vnode, 'bordered-projection-bar', true);
+        return vnode;
     }
 
     protected override renderViewport(model: Readonly<GViewportRootElement>, params: ProjectionParams): VNode {
@@ -170,50 +143,14 @@ export class GLSPProjectionView extends ProjectedViewportView {
         model: Readonly<GViewportRootElement>,
         params: ProjectionParams
     ): VNode {
-        let canvasSize;
-        let projPos;
-        let projSize: number;
-        if (params.orientation === 'horizontal') {
-            canvasSize = model.canvasBounds.width;
-            projPos = (projection.projectedBounds.x - params.modelBounds.x) * params.factor;
-            projSize = projection.projectedBounds.width * params.factor;
+        const vnode = super.renderProjection(projection, model, params);
+        setClass(vnode, 'glsp-projection', true);
+        const style = vnode.data!.style!;
+        if (style.left) {
+            style.height = '60%';
         } else {
-            canvasSize = model.canvasBounds.height;
-            projPos = (projection.projectedBounds.y - params.modelBounds.y) * params.factor;
-            projSize = projection.projectedBounds.height * params.factor;
+            style.width = '60%';
         }
-        if (projPos < 0) {
-            projSize += projPos;
-            projPos = 0;
-        } else if (projPos > canvasSize) {
-            projPos = canvasSize;
-        }
-        if (projSize < 0) {
-            projSize = 0;
-        } else if (projPos + projSize > canvasSize) {
-            projSize = canvasSize - projPos;
-        }
-        const style: VNodeStyle =
-            params.orientation === 'horizontal'
-                ? {
-                      left: `${projPos}px`,
-                      width: `${projSize}px`,
-                      height: '60%'
-                  }
-                : {
-                      top: `${projPos}px`,
-                      height: `${projSize}px`,
-                      width: '60%'
-                  };
-        const result = (
-            <div
-                id={`${params.orientation}-projection:${projection.elementId}`}
-                class-sprotty-projection={true}
-                class-glsp-projection={true}
-                style={style}
-            />
-        );
-        projection.cssClasses.forEach(cl => setClass(result, cl, true));
-        return result;
+        return vnode;
     }
 }

package/src/views/issue-marker-view.tsx

@@ -14,14 +14,12 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /* eslint-disable max-len */
+/** @jsx svg */
 import { GIssueSeverity, IssueMarkerView, RenderingContext, setClass, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import { GIssueMarker } from '../features/validation/issue-marker';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class GIssueMarkerView extends IssueMarkerView {
     override render(marker: GIssueMarker, _context: RenderingContext): VNode {

package/src/views/rounded-corner-view.tsx

@@ -13,15 +13,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
+import { GNode, GPort, GShapeElement, Hoverable, RectangularNodeView, RenderingContext, Selectable, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { Classes, VNode } from 'snabbdom';
-import { Hoverable, RectangularNodeView, RenderingContext, GNode, GPort, GShapeElement, Selectable, svg } from '@eclipse-glsp/sprotty';
 import { CornerRadius } from '../utils/argument-utils';
 import { RoundedCornerWrapper } from './rounded-corner';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class RoundedCornerNodeView extends RectangularNodeView {
     override render(node: Readonly<GNode & Hoverable & Selectable>, context: RenderingContext): VNode | undefined {