View improvements

.eslintrc.js

@@ -20,6 +20,13 @@ module.exports = {
                 message:
                     "The sprotty-protocol default exports are customized and reexported by GLSP. Please use '@eclipse-glsp/client' instead"
             }
+        ],
+        '@typescript-eslint/no-unused-vars': [
+            'error',
+            {
+                args: 'none',
+                varsIgnorePattern: 'svg|html'
+            }
         ]
     }
 };

examples/workflow-glsp/src/workflow-diagram-module.ts

@@ -43,7 +43,8 @@ import {
     editLabelFeature,
     gridModule,
     helperLineModule,
-    initializeDiagramContainer
+    initializeDiagramContainer,
+    overrideModelElement
 } from '@eclipse-glsp/client';
 import 'balloon-css/balloon.min.css';
 import { Container } from 'inversify';
@@ -69,16 +70,15 @@ export const workflowDiagramModule = new FeatureModule(
         configureModelElement(context, 'task:manual', TaskNode, RoundedCornerNodeView);
         configureModelElement(context, 'label:heading', GLabel, GLabelView, { enable: [editLabelFeature] });
         configureModelElement(context, 'comp:comp', GCompartment, GCompartmentView);
-        configureModelElement(context, 'comp:header', GCompartment, GCompartmentView);
         configureModelElement(context, 'label:icon', GLabel, GLabelView);
-        configureModelElement(context, DefaultTypes.EDGE, GEdge, WorkflowEdgeView);
+        overrideModelElement(context, DefaultTypes.EDGE, GEdge, WorkflowEdgeView);
         configureModelElement(context, 'edge:weighted', WeightedEdge, WorkflowEdgeView);
         configureModelElement(context, 'icon', Icon, IconView);
         configureModelElement(context, 'activityNode:merge', BranchingNode, DiamondNodeView);
         configureModelElement(context, 'activityNode:decision', BranchingNode, DiamondNodeView);
         configureModelElement(context, 'activityNode:fork', SynchronizationNode, RectangularNodeView);
         configureModelElement(context, 'activityNode:join', SynchronizationNode, RectangularNodeView);
-        configureModelElement(context, DefaultTypes.GRAPH, GGraph, GLSPProjectionView);
+        overrideModelElement(context, DefaultTypes.GRAPH, GGraph, GLSPProjectionView);
         configureModelElement(context, 'category', CategoryNode, RoundedCornerNodeView);
         configureModelElement(context, 'struct', GCompartment, StructureCompartmentView);
 

examples/workflow-glsp/src/workflow-views.tsx

@@ -13,6 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
 import {
     GEdge,
     Point,
@@ -30,9 +31,6 @@ import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import { Icon, isTaskNode } from './model';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
     protected override renderAdditionals(edge: GEdge, segments: Point[], context: RenderingContext): VNode[] {

packages/client/css/grid.css

@@ -14,12 +14,14 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-:root {
-    --grid-color: rgba(0, 0, 0, 0.1);
-}
-
 /** Control visibility of background image through CSS class on parent */
 .grid-background .sprotty-graph,
 .grid-background.sprotty-graph {
-    background-image: var(--grid-background-image);
+    --b-zoom: calc(1px * var(--grid-background-zoom));
+    --b-zoom-half: calc(var(--b-zoom) / 2);
+    --grid-color: rgba(0, 0, 0, 0.1);
+    background-image: linear-gradient(to right, var(--grid-color) var(--b-zoom), transparent var(--b-zoom)),
+        linear-gradient(to bottom, var(--grid-color) var(--b-zoom), transparent var(--b-zoom));
+    background-size: var(--grid-background-width) var(--grid-background-height);
+    background-position: calc(var(--grid-background-x) - var(--b-zoom-half)) calc(var(--grid-background-y) - var(--b-zoom-half));
 }

packages/client/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/
+            );
+        });
+    });
+});

packages/client/src/features/debug/debug-bounds-decorator.tsx

@@ -14,17 +14,14 @@
  * 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';
 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()

packages/client/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 {

packages/client/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 {

packages/client/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.

packages/client/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 {

packages/client/src/features/tools/node-creation/node-creation-views.tsx

@@ -13,17 +13,14 @@
  *
  * 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';
 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;

packages/client/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 {

packages/client/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 {

packages/client/src/views/ggraph-view.tsx

@@ -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>')`;
-    }
 }