@eclipse-glsp/client 0.10.0-next.ca17587.154 → 1.1.0-RC01

package/src/utils/smodel-util.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-2022 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,108 +13,192 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { ElementAndRoutingPoints } from '@eclipse-glsp/protocol';
+import { distinctAdd, ElementAndBounds, ElementAndRoutingPoints, remove, SModelElementSchema, TypeGuard } from '@eclipse-glsp/protocol';
 import {
     BoundsAware,
-    ElementAndBounds,
     isBoundsAware,
     isMoveable,
     isSelectable,
     isSelected,
+    ModelIndexImpl,
     Selectable,
     SModelElement,
-    SModelElementSchema,
-    SModelIndex,
     SRoutableElement,
     SRoutingHandle
 } from 'sprotty';
+import { FluentIterable } from 'sprotty/lib/utils/iterable';
 
-export function getIndex(element: SModelElement): SModelIndex<SModelElement> {
-    return element.root.index;
+/**
+ * Helper type to represent a filter predicate for {@link SModelElement}s. This is used to retrieve
+ * elements from the {@link ModelIndexImpl} that also conform to a second type `T`. Its mainly used for
+ * retrieving elements that also implement a certain model features (e.g. selectable)
+ */
+export type ModelFilterPredicate<T> = (modelElement: SModelElement) => modelElement is SModelElement & T;
+
+/**
+ * Retrieves all elements from the given {@link ModelIndexImpl} that match the given {@link ModelFilterPredicate}
+ * @param index The {@link ModelIndexImpl}.
+ * @param predicate The {@link ModelFilterPredicate} that should be used.
+ * @returns A {@link FluentIterable} of all indexed element that match the predicate
+ * (correctly casted to also include the additional type of the predicate).
+ */
+export function filter<T>(index: ModelIndexImpl, predicate: ModelFilterPredicate<T>): FluentIterable<SModelElement & T> {
+    return index.all().filter(predicate) as FluentIterable<SModelElement & T>;
 }
 
+/**
+ * Retrieves all elements from the given {@link ModelIndexImpl} that match the given {@link ModelFilterPredicate} and executes
+ * the given runnable for each element of the result set.
+ * @param index The {@link ModelIndexImpl}.
+ * @param predicate The {@link ModelFilterPredicate} that should be used.
+ * @param runnable The runnable that should be executed for each matching element.
+ */
 export function forEachElement<T>(
-    element: SModelElement,
-    predicate: (modelElement: SModelElement) => modelElement is SModelElement & T,
+    index: ModelIndexImpl,
+    predicate: ModelFilterPredicate<T>,
     runnable: (modelElement: SModelElement & T) => void
 ): void {
-    getIndex(element).all().filter(predicate).forEach(runnable);
+    filter(index, predicate).forEach(runnable);
 }
 
-export function getMatchingElements<T>(
-    element: SModelElement,
-    predicate: (modelElement: SModelElement) => modelElement is SModelElement & T
-): (SModelElement & T)[] {
-    const matching: (SModelElement & T)[] = [];
-    forEachElement(element, predicate, item => matching.push(item));
-    return matching;
+/**
+ * Retrieves an array of all elements that match the given {@link ModelFilterPredicate} from the given {@link ModelIndexImpl}.
+ * @param index The {@link ModelIndexImpl}.
+ * @param predicate The {@link ModelFilterPredicate} that should be used.
+ * @returns An array of all indexed element that match the predicate
+ * (correctly casted to also include the additional type of the predicate).
+ */
+export function getMatchingElements<T>(index: ModelIndexImpl, predicate: ModelFilterPredicate<T>): (SModelElement & T)[] {
+    return Array.from(filter(index, predicate));
 }
 
-export function hasSelectedElements(element: SModelElement): boolean {
-    return getSelectedElementCount(element) > 0;
+/**
+ * Invokes the given model index to retrieve the corresponding model elements for the given set of ids. Ids that
+ * have no corresponding element in the index will be ignored.
+ * @param index THe model index.
+ * @param elementsIDs The element ids.
+ * @param guard Optional typeguard. If defined only elements that match the guard will be returned.
+ * @returns An array of the model elements that correspond to the given ids and filter predicate.
+ */
+export function getElements<S extends SModelElement>(index: ModelIndexImpl, elementsIDs: string[], guard?: TypeGuard<S>): S[] {
+    // Internal filter function that filters out undefined model elements and runs an optional typeguard check.
+    const filterFn = (element?: SModelElement): element is S => {
+        if (element !== undefined) {
+            return guard ? guard(element) : true;
+        }
+        return false;
+    };
+    return elementsIDs.map(id => index.getById(id)).filter(filterFn);
 }
-
-export function getSelectedElementCount(element: SModelElement): number {
+/**
+ * Retrieves the amount of currently selected elements in the given {@link ModelIndexImpl}.
+ * @param index The {@link ModelIndexImpl}.
+ * @returns The amount of selected elements.
+ */
+export function getSelectedElementCount(index: ModelIndexImpl): number {
     let selected = 0;
-    getIndex(element)
-        .all()
-        .filter(isSelected)
-        .forEach(e => (selected = selected + 1));
+    forEachElement(index, isSelected, element => selected++);
     return selected;
 }
 
+/**
+ * Helper function to check wether an any element is selected in the given {@link ModelIndexImpl}.
+ * @param index The {@link ModelIndexImpl}.
+ * @returns `true` if at least one element is selected, `false` otherwise.
+ */
+export function hasSelectedElements(index: ModelIndexImpl): boolean {
+    return getSelectedElementCount(index) > 0;
+}
+
+/**
+ * Helper function to check wether an element is defined. Can be used as {@link ModelFilterPredicate}.
+ * @param element The element that should be checked.
+ * @returns the type predicate for `T`
+ */
 export function isNotUndefined<T>(element: T | undefined): element is T {
     return element !== undefined;
 }
 
-export function addCssClasses(root: SModelElement, cssClasses: string[]): void {
-    if (root.cssClasses === undefined) {
-        root.cssClasses = [];
-    }
-    for (const cssClass of cssClasses) {
-        if (root.cssClasses.indexOf(cssClass) < 0) {
-            root.cssClasses.push(cssClass);
-        }
-    }
+/**
+ * Adds a set of css classes to the given {@link SModelElement}.
+ * @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: SModelElement, cssClasses: string[]): void {
+    const elementCssClasses: string[] = element.cssClasses ?? [];
+    distinctAdd(elementCssClasses, ...cssClasses);
+    element.cssClasses = elementCssClasses;
 }
 
+/**
+ * Removes a set of css classes from the given {@link SModelElement}.
+ * @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: SModelElement, cssClasses: string[]): void {
-    if (root.cssClasses === undefined || root.cssClasses.length === 0) {
+    if (!root.cssClasses || root.cssClasses.length === 0) {
         return;
     }
-    for (const cssClass of cssClasses) {
-        const index = root.cssClasses.indexOf(cssClass);
-        if (index !== -1) {
-            root.cssClasses.splice(root.cssClasses.indexOf(cssClass), 1);
-        }
-    }
+    remove(root.cssClasses, ...cssClasses);
 }
 
 export function isNonRoutableSelectedMovableBoundsAware(element: SModelElement): element is SelectableBoundsAware {
     return isNonRoutableSelectedBoundsAware(element) && isMoveable(element);
 }
 
+/**
+ * A typeguard function to check wether a given {@link SModelElement} implements the {@link BoundsAware} model feature,
+ * the {@link Selectable} model feature and is actually selected. In addition, the element must not be a {@link SRoutableElement}.
+ * @param element The element to check.
+ * @returns A type predicate indicating wether the element is of type {@link SelectableBoundsAware}.
+ */
 export function isNonRoutableSelectedBoundsAware(element: SModelElement): element is SelectableBoundsAware {
     return isBoundsAware(element) && isSelected(element) && !isRoutable(element);
 }
 
+/**
+ * A type guard function to check wether a given {@link SModelElement} is a {@link SRoutableElement}.
+ * @param element The element to check.
+ * @returns A type predicate indicating wether the element is a {@link SRoutableElement}.
+ */
 export function isRoutable<T extends SModelElement>(element: T): element is T & SRoutableElement {
     return element instanceof SRoutableElement && (element as any).routingPoints !== undefined;
 }
 
+/**
+ * A typeguard function to check wether a given {@link SModelElement} is a {@link SRoutingHandle}.
+ * @param element The element to check.
+ * @returns A type predicate indicating wether the element is a {@link SRoutingHandle}
+ */
 export function isRoutingHandle(element: SModelElement | undefined): element is SRoutingHandle {
     return element !== undefined && element instanceof SRoutingHandle;
 }
 
-export function isSelectableAndBoundsAware(element: SModelElement): element is BoundsAware & Selectable & SModelElement {
+/**
+ * A typeguard function to check wether a given {@link SModelElement} implements the {@link Selectable} model feature and
+ * the {@link BoundsAware} model feature.
+ * @returns A type predicate indicating wether the element is of type {@link SelectableBoundsAware}.
+ */
+export function isSelectableAndBoundsAware(element: SModelElement): element is SelectableBoundsAware {
     return isSelectable(element) && isBoundsAware(element);
 }
 
+/**
+ * Union type to describe {@link SModelElement}s that implement the {@link Selectable} and {@link BoundsAware} feature.
+ */
 export type SelectableBoundsAware = SModelElement & BoundsAware & Selectable;
 
+/**
+ * Union type to describe {@link SModelElement}s that implement the {@link BoundsAware} feature.
+ */
 export type BoundsAwareModelElement = SModelElement & BoundsAware;
 
-export function toElementAndBounds(element: SModelElement & BoundsAware): ElementAndBounds {
+/**
+ * Helper function to translate a given {@link SModelElement} into its corresponding {@link ElementAndBounds} representation.
+ * @param element The element to translate.
+ * @returns The corresponding {@link ElementAndBounds} for the given element.
+ */
+export function toElementAndBounds(element: BoundsAwareModelElement): ElementAndBounds {
     return {
         elementId: element.id,
         newPosition: {
@@ -128,6 +212,12 @@ export function toElementAndBounds(element: SModelElement & BoundsAware): Elemen
     };
 }
 
+/**
+ * Helper function to translate a given {@link SRoutableElement} into its corresponding
+ * {@ElementAndRoutingPoints ElementAndBounds} representation.
+ * @param element The element to translate.
+ * @returns The corresponding {@link ElementAndRoutingPoints} for the given element.
+ */
 export function toElementAndRoutingPoints(element: SRoutableElement): ElementAndRoutingPoints {
     return {
         elementId: element.id,
@@ -144,6 +234,12 @@ export function hasCompatibleType(input: SModelElement | SModelElementSchema | s
     return inputType === type ? true : inputType.split(':').includes(type);
 }
 
+/**
+ * Convenience function to retrieve the model element type from a given input. The input
+ * can either be a {@link SModelElement}, {@link SModelElementSchema} or a string.
+ * @param input The type input.
+ * @returns The corresponding model type as string.
+ */
 export function getElementTypeId(input: SModelElement | SModelElementSchema | string): string {
     if (typeof input === 'string') {
         return input as string;

package/src/utils/viewpoint-util.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-2022 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,18 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Bounds, Point } from '@eclipse-glsp/protocol';
-import {
-    BoundsAware,
-    Dimension,
-    findParentByFeature,
-    isAlignable,
-    isViewport,
-    ORIGIN_POINT,
-    SModelElement,
-    translateBounds,
-    Viewport
-} from 'sprotty';
+
+import { Bounds, Dimension, Point, Viewport } from '@eclipse-glsp/protocol';
+import { BoundsAware, findParentByFeature, isAlignable, isViewport, SModelElement, translateBounds } from 'sprotty';
 
 /**
  * Return the position corresponding to this mouse event (Browser coordinates)
@@ -70,7 +61,7 @@ export function getAbsolutePosition(target: SModelElement, mouseEvent: MouseEven
  * @param target  A bounds-aware element from the diagram
  */
 export function toAbsoluteBounds(element: SModelElement & BoundsAware): Bounds {
-    const location = isAlignable(element) ? element.alignment : ORIGIN_POINT;
+    const location = isAlignable(element) ? element.alignment : Point.ORIGIN;
     const x = location.x;
     const y = location.y;
     const width = element.bounds.width;

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

@@ -26,6 +26,7 @@ import {
     ForeignObjectView,
     HtmlRoot,
     HtmlRootView,
+    moveFeature,
     PreRenderedElement,
     PreRenderedView,
     RectangularNode,
@@ -34,6 +35,7 @@ import {
     SCompartment,
     SCompartmentView,
     SEdge,
+    selectFeature,
     SGraphView,
     ShapedPreRenderedElement,
     SIssueMarker,
@@ -66,7 +68,9 @@ export function configureDefaultModelElements(context: ContainerContext): void {
     configureModelElement(context, DefaultTypes.HTML, HtmlRoot, HtmlRootView);
 
     // generic elements
-    configureModelElement(context, DefaultTypes.FOREIGN_OBJECT, ForeignObjectElement, ForeignObjectView);
+    configureModelElement(context, DefaultTypes.FOREIGN_OBJECT, ForeignObjectElement, ForeignObjectView, {
+        disable: [selectFeature, moveFeature]
+    });
     configureModelElement(context, DefaultTypes.PRE_RENDERED, PreRenderedElement, PreRenderedView);
     configureModelElement(context, DefaultTypes.SHAPE_PRE_RENDERED, ShapedPreRenderedElement, PreRenderedView);
 

package/src/views/compartments.tsx

@@ -29,7 +29,7 @@ export class StructureCompartmentView extends ShapeView {
 
         return (
             <g>
-                <rect class-sprotty-comp={true} class-debug={true} x='0' y='0' width={model.size.width} height={model.size.height}></rect>
+                <rect class-sprotty-comp={true} class-debug={false} x='0' y='0' width={model.size.width} height={model.size.height}></rect>
                 {context.renderChildren(model)}
             </g>
         );

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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
@@ -24,7 +24,7 @@ const JSX = { createElement: svg };
 
 @injectable()
 export class GEdgeView extends PolylineEdgeView {
-    render(edge: Readonly<SEdge>, context: RenderingContext): VNode {
+    override render(edge: Readonly<SEdge>, context: RenderingContext): VNode {
         const router = this.edgeRouterRegistry.get(edge.routerKind);
         const route = router.route(edge);
         if (route.length === 0) {
@@ -44,11 +44,11 @@ export class GEdgeView extends PolylineEdgeView {
         return {};
     }
 
-    protected renderLine(_edge: SEdge, segments: Point[], _context: RenderingContext): VNode {
+    protected override renderLine(_edge: SEdge, segments: Point[], _context: RenderingContext): VNode {
         return <path d={this.createPathForSegments(segments)} />;
     }
 
-    protected renderAdditionals(edge: SEdge, segments: Point[], _context: RenderingContext): VNode[] {
+    protected override renderAdditionals(edge: SEdge, segments: Point[], _context: RenderingContext): VNode[] {
         // for additional padding we draw another transparent path with larger stroke width
         const edgePadding = EdgePadding.from(edge);
         return edgePadding ? [this.renderMouseHandle(segments, edgePadding)] : [];

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

@@ -0,0 +1,173 @@
+/********************************************************************************
+ * Copyright (c) 2017-2018 TypeFox 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
+ ********************************************************************************/
+
+/** @jsx html */
+import { Bounds } from '@eclipse-glsp/protocol';
+import { injectable } from 'inversify';
+import { h, VNode, VNodeStyle } from 'snabbdom';
+import {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    html,
+    IViewArgs,
+    ProjectedViewportView,
+    ProjectionParams,
+    RenderingContext,
+    setAttr,
+    setClass,
+    ViewportRootElement,
+    ViewProjection
+} from 'sprotty';
+
+/**
+ * Special viewport root view that renders horizontal and vertical projection bars for quick navigation.
+ */
+@injectable()
+export class GLSPProjectionView extends ProjectedViewportView {
+    override render(model: Readonly<ViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
+        const svgElem = this.renderSvg(model, context, args);
+        if (svgElem.data) {
+            svgElem.data!.class = { 'sprotty-graph': true };
+        }
+        const rootNode: VNode = (
+            <div class-sprotty-graph={false} style={{ width: '100%', height: '100%' }}>
+                {svgElem}
+                {this.renderProjections(model, context, args)}
+            </div>
+        );
+        setAttr(rootNode, 'tabindex', 0);
+        return rootNode;
+    }
+
+    protected override renderSvg(model: Readonly<ViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
+        const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
+        const ns = 'http://www.w3.org/2000/svg';
+        const svg = h('svg', { ns, style: { height: '100%' } }, h('g', { ns, attrs: { transform } }, context.renderChildren(model)));
+        return svg;
+    }
+
+    protected override renderProjectionBar(
+        projections: ViewProjection[],
+        model: Readonly<ViewportRootElement>,
+        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>
+        );
+    }
+
+    protected override renderViewport(model: Readonly<ViewportRootElement>, params: ProjectionParams): VNode {
+        let canvasSize;
+        let viewportPos: number;
+        if (params.orientation === 'horizontal') {
+            canvasSize = model.canvasBounds.width;
+            viewportPos = (model.scroll.x - params.modelBounds.x) * params.factor;
+        } else {
+            canvasSize = model.canvasBounds.height;
+            viewportPos = (model.scroll.y - params.modelBounds.y) * params.factor;
+        }
+        let viewportSize = canvasSize * params.zoomedFactor;
+        if (viewportPos < 0) {
+            viewportSize += viewportPos;
+            viewportPos = 0;
+        } else if (viewportPos > canvasSize) {
+            viewportPos = canvasSize;
+        }
+        if (viewportSize < 0) {
+            viewportSize = 0;
+        } else if (viewportPos + viewportSize > canvasSize) {
+            viewportSize = canvasSize - viewportPos;
+        }
+        if (Math.abs(viewportSize - canvasSize) < 1) {
+            viewportSize = 0;
+        }
+        const style: VNodeStyle =
+            params.orientation === 'horizontal'
+                ? {
+                      left: `${viewportPos}px`,
+                      width: `${viewportSize}px`,
+                      border: 'none'
+                  }
+                : {
+                      top: `${viewportPos}px`,
+                      height: `${viewportSize}px`,
+                      border: 'none'
+                  };
+        return <div class-sprotty-viewport={viewportSize !== 0} class-projection-scroll-bar={true} style={style} />;
+    }
+
+    protected override renderProjection(projection: ViewProjection, model: Readonly<ViewportRootElement>, 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;
+        } else {
+            canvasSize = model.canvasBounds.height;
+            projPos = (projection.projectedBounds.y - params.modelBounds.y) * params.factor;
+            projSize = projection.projectedBounds.height * params.factor;
+        }
+        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;
+    }
+}

package/src/views/index.ts

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

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2021 EclipseSource and others.
+ * Copyright (c) 2020-2022 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
@@ -23,7 +23,7 @@ const JSX = { createElement: svg };
 
 @injectable()
 export class GIssueMarkerView extends IssueMarkerView {
-    render(marker: SIssueMarker, _context: RenderingContext): VNode {
+    override render(marker: SIssueMarker, _context: RenderingContext): VNode {
         const maxSeverity = super.getMaxSeverity(marker);
         const group = (
             <g class-sprotty-issue={true}>

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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 { injectable } from 'inversify';
 import { Classes, VNode } from 'snabbdom';
 import { Hoverable, RectangularNodeView, RenderingContext, Selectable, SNode, SPort, SShapeElement, svg } from 'sprotty';
-
 import { CornerRadius } from '../utils/argument-utils';
 import { RoundedCornerWrapper } from './rounded-corner';
 
@@ -25,7 +24,7 @@ const JSX = { createElement: svg };
 
 @injectable()
 export class RoundedCornerNodeView extends RectangularNodeView {
-    render(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext): VNode | undefined {
+    override render(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext): VNode | undefined {
         const cornerRadius = CornerRadius.from(node);
         if (!cornerRadius) {
             return this.renderWithoutRadius(node, context);