From 7a51d2971cd4f6bd035b335162fad2254fbc0bb6 Mon Sep 17 00:00:00 2001 From: Tobias Ortmayr Date: Thu, 20 Jun 2024 13:19:16 +0200 Subject: [PATCH] View improvements (#364) - Refactor grind background image rendering to a css only approach - Use @jsx annotion for view files Use @jsx annotation instead of const JSX definition for view files. Adapt eslint config to ignore unused svg and html imports to avoid explict deactivation of the rule in each view file. Reason - Sprotty base views also use annotations - Annotations are more robust. E.g. mocha tests with ts-node fail with an unused local error when using JSX const - Add tests for `initializeDiagramContainer` - Cleanup GLSPProjectionView overrides - Also add Grid properties if grid is not visible - Adjust variable naming in default grid css --- .eslintrc.js | 7 ++ .../src/workflow-diagram-module.ts | 8 +- examples/workflow-glsp/src/workflow-views.tsx | 4 +- packages/client/css/grid.css | 14 +-- packages/client/src/default-modules.spec.ts | 56 ++++++++++++ .../features/debug/debug-bounds-decorator.tsx | 5 +- .../client/src/features/helper-lines/view.tsx | 4 +- .../src/features/tools/change-bounds/view.tsx | 4 +- .../src/features/tools/edge-creation/view.tsx | 6 +- .../features/tools/marquee-selection/view.tsx | 6 +- .../node-creation/node-creation-views.tsx | 5 +- packages/client/src/views/compartments.tsx | 6 +- packages/client/src/views/gedge-view.tsx | 6 +- packages/client/src/views/ggraph-view.tsx | 14 +-- .../client/src/views/glsp-projection-view.tsx | 89 +++---------------- .../client/src/views/issue-marker-view.tsx | 4 +- .../client/src/views/rounded-corner-view.tsx | 6 +- .../glsp-sprotty/src/svg-views-override.tsx | 5 +- 18 files changed, 107 insertions(+), 142 deletions(-) create mode 100644 packages/client/src/default-modules.spec.ts diff --git a/.eslintrc.js b/.eslintrc.js index 5341db24..0ec06053 100644 --- a/.eslintrc.js +++ b/.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' + } ] } }; diff --git a/examples/workflow-glsp/src/workflow-diagram-module.ts b/examples/workflow-glsp/src/workflow-diagram-module.ts index 04c8eadb..a89d88ae 100644 --- a/examples/workflow-glsp/src/workflow-diagram-module.ts +++ b/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); diff --git a/examples/workflow-glsp/src/workflow-views.tsx b/examples/workflow-glsp/src/workflow-views.tsx index e0149690..036a0651 100644 --- a/examples/workflow-glsp/src/workflow-views.tsx +++ b/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[] { diff --git a/packages/client/css/grid.css b/packages/client/css/grid.css index 2f628e92..398f6425 100644 --- a/packages/client/css/grid.css +++ b/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); + --grid-stroke-width: calc(1px * var(--grid-background-zoom)); + --grid-stroke-width-half: calc(var(--grid-stroke-width) / 2); + --grid-color: rgba(0, 0, 0, 0.1); + background-image: linear-gradient(to right, var(--grid-color) var(--grid-stroke-width), transparent var(--grid-stroke-width)), + linear-gradient(to bottom, var(--grid-color) var(--grid-stroke-width), transparent var(--grid-stroke-width)); + background-size: var(--grid-background-width) var(--grid-background-height); + background-position: calc(var(--grid-background-x) - var(--grid-stroke-width-half)) + calc(var(--grid-background-y) - var(--grid-stroke-width-half)); } diff --git a/packages/client/src/default-modules.spec.ts b/packages/client/src/default-modules.spec.ts new file mode 100644 index 00000000..ee783052 --- /dev/null +++ b/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/ + ); + }); + }); +}); diff --git a/packages/client/src/features/debug/debug-bounds-decorator.tsx b/packages/client/src/features/debug/debug-bounds-decorator.tsx index df073f25..c8647ecc 100644 --- a/packages/client/src/features/debug/debug-bounds-decorator.tsx +++ b/packages/client/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() diff --git a/packages/client/src/features/helper-lines/view.tsx b/packages/client/src/features/helper-lines/view.tsx index b47b6d6f..afde81c3 100644 --- a/packages/client/src/features/helper-lines/view.tsx +++ b/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 { diff --git a/packages/client/src/features/tools/change-bounds/view.tsx b/packages/client/src/features/tools/change-bounds/view.tsx index 63d4ef63..afeecb56 100644 --- a/packages/client/src/features/tools/change-bounds/view.tsx +++ b/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 { diff --git a/packages/client/src/features/tools/edge-creation/view.tsx b/packages/client/src/features/tools/edge-creation/view.tsx index 86ac0776..496431bb 100644 --- a/packages/client/src/features/tools/edge-creation/view.tsx +++ b/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. diff --git a/packages/client/src/features/tools/marquee-selection/view.tsx b/packages/client/src/features/tools/marquee-selection/view.tsx index 13470d8b..17e40674 100644 --- a/packages/client/src/features/tools/marquee-selection/view.tsx +++ b/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 { diff --git a/packages/client/src/features/tools/node-creation/node-creation-views.tsx b/packages/client/src/features/tools/node-creation/node-creation-views.tsx index 9a514455..aac320c1 100644 --- a/packages/client/src/features/tools/node-creation/node-creation-views.tsx +++ b/packages/client/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; diff --git a/packages/client/src/views/compartments.tsx b/packages/client/src/views/compartments.tsx index f8680aa3..c4002a7a 100644 --- a/packages/client/src/views/compartments.tsx +++ b/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 { diff --git a/packages/client/src/views/gedge-view.tsx b/packages/client/src/views/gedge-view.tsx index d615561b..e59c5b8f 100644 --- a/packages/client/src/views/gedge-view.tsx +++ b/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 { diff --git a/packages/client/src/views/ggraph-view.tsx b/packages/client/src/views/ggraph-view.tsx index aa503d21..a60d5620 100644 --- a/packages/client/src/views/ggraph-view.tsx +++ b/packages/client/src/views/ggraph-view.tsx @@ -32,7 +32,7 @@ export class GGraphView extends SGraphView { } protected getGridStyle(viewport: Readonly, 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, 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, ')`; - } } diff --git a/packages/client/src/views/glsp-projection-view.tsx b/packages/client/src/views/glsp-projection-view.tsx index ca803b2a..0322409a 100644 --- a/packages/client/src/views/glsp-projection-view.tsx +++ b/packages/client/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, 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, 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, ')`; - } - protected override renderProjectionBar( projections: ViewProjection[], model: Readonly, 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 ( -
- {this.renderViewport(model, params)} - {projections.map(p => this.renderProjection(p, model, params))} -
- ); + const vnode = super.renderProjectionBar(projections, model, modelBounds, orientation); + setClass(vnode, 'bordered-projection-bar', true); + return vnode; } protected override renderViewport(model: Readonly, params: ProjectionParams): VNode { @@ -170,50 +143,14 @@ export class GLSPProjectionView extends ProjectedViewportView { model: Readonly, 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 = ( -
- ); - projection.cssClasses.forEach(cl => setClass(result, cl, true)); - return result; + return vnode; } } diff --git a/packages/client/src/views/issue-marker-view.tsx b/packages/client/src/views/issue-marker-view.tsx index 6766b183..2059aa20 100644 --- a/packages/client/src/views/issue-marker-view.tsx +++ b/packages/client/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 { diff --git a/packages/client/src/views/rounded-corner-view.tsx b/packages/client/src/views/rounded-corner-view.tsx index 9e426147..bee784d5 100644 --- a/packages/client/src/views/rounded-corner-view.tsx +++ b/packages/client/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, context: RenderingContext): VNode | undefined { diff --git a/packages/glsp-sprotty/src/svg-views-override.tsx b/packages/glsp-sprotty/src/svg-views-override.tsx index 45b82d84..9a72c918 100644 --- a/packages/glsp-sprotty/src/svg-views-override.tsx +++ b/packages/glsp-sprotty/src/svg-views-override.tsx @@ -13,7 +13,7 @@ * * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ - +/** @jsx svg */ import { Bounds, Hoverable, Selectable } from '@eclipse-glsp/protocol'; import { injectable } from 'inversify'; import { VNode } from 'snabbdom'; @@ -28,9 +28,6 @@ import { svg } from 'sprotty'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const JSX = { createElement: svg }; - @injectable() export class DiamondNodeView extends SprottyDiamondNodeView { override render(