@eclipse-glsp/client 0.9.0-next.6d10f92e → 0.9.0-next.75608185

package/src/utils/smodel-util.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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,8 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { ElementAndRoutingPoints } from '@eclipse-glsp/protocol';
 import {
     BoundsAware,
+    ElementAndBounds,
     isBoundsAware,
     isMoveable,
     isSelectable,
@@ -22,38 +24,42 @@ import {
     Selectable,
     SModelElement,
     SModelElementSchema,
+    SModelIndex,
     SRoutableElement,
     SRoutingHandle
-} from "sprotty";
+} from 'sprotty';
 
-import { ElementAndRoutingPoints } from "../base/operations/operation";
-
-
-export function getIndex(element: SModelElement) {
+export function getIndex(element: SModelElement): SModelIndex<SModelElement> {
     return element.root.index;
 }
 
-export function forEachElement<T>(element: SModelElement, predicate: (element: SModelElement) => element is SModelElement & T, runnable: (element: SModelElement & T) => void) {
-    getIndex(element).all()
-        .filter(predicate)
-        .forEach(runnable);
+export function forEachElement<T>(
+    element: SModelElement,
+    predicate: (modelElement: SModelElement) => modelElement is SModelElement & T,
+    runnable: (modelElement: SModelElement & T) => void
+): void {
+    getIndex(element).all().filter(predicate).forEach(runnable);
 }
 
-export function getMatchingElements<T>(element: SModelElement, predicate: (element: SModelElement) => element is SModelElement & T): (SModelElement & T)[] {
+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;
 }
 
-export function hasSelectedElements(element: SModelElement) {
+export function hasSelectedElements(element: SModelElement): boolean {
     return getSelectedElementCount(element) > 0;
 }
 
 export function getSelectedElementCount(element: SModelElement): number {
     let selected = 0;
-    getIndex(element).all()
+    getIndex(element)
+        .all()
         .filter(isSelected)
-        .forEach(e => selected = selected + 1);
+        .forEach(e => (selected = selected + 1));
     return selected;
 }
 
@@ -61,7 +67,7 @@ export function isNotUndefined<T>(element: T | undefined): element is T {
     return element !== undefined;
 }
 
-export function addCssClasses(root: SModelElement, cssClasses: string[]) {
+export function addCssClasses(root: SModelElement, cssClasses: string[]): void {
     if (root.cssClasses === undefined) {
         root.cssClasses = [];
     }
@@ -72,7 +78,7 @@ export function addCssClasses(root: SModelElement, cssClasses: string[]) {
     }
 }
 
-export function removeCssClasses(root: SModelElement, cssClasses: string[]) {
+export function removeCssClasses(root: SModelElement, cssClasses: string[]): void {
     if (root.cssClasses === undefined || root.cssClasses.length === 0) {
         return;
     }
@@ -108,7 +114,7 @@ export type SelectableBoundsAware = SModelElement & BoundsAware & Selectable;
 
 export type BoundsAwareModelElement = SModelElement & BoundsAware;
 
-export function toElementAndBounds(element: SModelElement & BoundsAware) {
+export function toElementAndBounds(element: SModelElement & BoundsAware): ElementAndBounds {
     return {
         elementId: element.id,
         newPosition: {
@@ -133,15 +139,15 @@ export function toElementAndRoutingPoints(element: SRoutableElement): ElementAnd
  * Checks if the model is compatible with the passed type string.
  * (either has the same type or a subtype of this type)
  */
-export function hasCompatibleType(input: SModelElement | SModelElementSchema | string, type: string) {
+export function hasCompatibleType(input: SModelElement | SModelElementSchema | string, type: string): boolean {
     const inputType = getElementTypeId(input);
-    return inputType === type ? true : inputType.split(":").includes(type);
+    return inputType === type ? true : inputType.split(':').includes(type);
 }
 
-export function getElementTypeId(input: SModelElement | SModelElementSchema | string) {
+export function getElementTypeId(input: SModelElement | SModelElementSchema | string): string {
     if (typeof input === 'string') {
-        return <string>input;
+        return input as string;
     } else {
-        return <string>(<any>input)["type"];
+        return (input as any)['type'] as string;
     }
 }

package/src/utils/viewpoint-util.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,19 +13,18 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Bounds, Point } from '@eclipse-glsp/protocol';
 import {
-    Bounds,
     BoundsAware,
     Dimension,
     findParentByFeature,
     isAlignable,
     isViewport,
     ORIGIN_POINT,
-    Point,
     SModelElement,
     translateBounds,
     Viewport
-} from "sprotty";
+} from 'sprotty';
 
 /**
  * Return the position corresponding to this mouse event (Browser coordinates)
@@ -41,7 +40,8 @@ import {
  *  A mouseEvent
  */
 export function getAbsolutePosition(target: SModelElement, mouseEvent: MouseEvent): Point {
-    let xPos = mouseEvent.pageX, yPos = mouseEvent.pageY;
+    let xPos = mouseEvent.pageX;
+    let yPos = mouseEvent.pageY;
     const canvasBounds = target.root.canvasBounds;
     xPos -= canvasBounds.x;
     yPos -= canvasBounds.y;
@@ -56,7 +56,6 @@ export function getAbsolutePosition(target: SModelElement, mouseEvent: MouseEven
         xPos /= zoom;
         yPos /= zoom;
     }
-    xPos;
 
     return {
         x: xPos,

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

@@ -0,0 +1,98 @@
+/********************************************************************************
+ * Copyright (c) 2021 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 { ContainerModule, interfaces } from 'inversify';
+import {
+    CircularNode,
+    CircularNodeView,
+    configureModelElement,
+    DiamondNode,
+    DiamondNodeView,
+    ExpandButtonView,
+    ForeignObjectElement,
+    ForeignObjectView,
+    HtmlRoot,
+    HtmlRootView,
+    PreRenderedElement,
+    PreRenderedView,
+    RectangularNode,
+    RectangularNodeView,
+    SButton,
+    SCompartment,
+    SCompartmentView,
+    SEdge,
+    SGraphView,
+    ShapedPreRenderedElement,
+    SIssueMarker,
+    SLabel,
+    SLabelView,
+    SNode,
+    SPort,
+    SRoutingHandle,
+    SRoutingHandleView,
+    SvgViewportView,
+    ViewportRootElement
+} from 'sprotty';
+
+import { GLSPGraph } from '../lib/model';
+import { DefaultTypes } from './default-types';
+import { GEdgeView } from './glsp-edge-view';
+import { GIssueMarkerView } from './issue-marker-view';
+import { RoundedCornerNodeView } from './rounded-corner-view';
+
+interface ContainerContext {
+    bind: interfaces.Bind;
+    isBound: interfaces.IsBound;
+}
+
+const baseViewModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureDefaultModelElements(context);
+});
+
+export function configureDefaultModelElements(context: ContainerContext): void {
+    // HTML elements
+    configureModelElement(context, DefaultTypes.HTML, HtmlRoot, HtmlRootView);
+
+    // generic elements
+    configureModelElement(context, DefaultTypes.FOREIGN_OBJECT, ForeignObjectElement, ForeignObjectView);
+    configureModelElement(context, DefaultTypes.PRE_RENDERED, PreRenderedElement, PreRenderedView);
+    configureModelElement(context, DefaultTypes.SHAPE_PRE_RENDERED, ShapedPreRenderedElement, PreRenderedView);
+
+    // SVG elements
+    configureModelElement(context, DefaultTypes.SVG, ViewportRootElement, SvgViewportView);
+
+    // graph elements
+    configureModelElement(context, DefaultTypes.GRAPH, GLSPGraph, SGraphView);
+    configureModelElement(context, DefaultTypes.NODE, SNode, RoundedCornerNodeView);
+    configureModelElement(context, DefaultTypes.COMPARTMENT, SCompartment, SCompartmentView);
+    configureModelElement(context, DefaultTypes.COMPARTMENT_HEADER, SCompartment, SCompartmentView);
+    configureModelElement(context, DefaultTypes.EDGE, SEdge, GEdgeView);
+    configureModelElement(context, DefaultTypes.PORT, SPort, RectangularNodeView);
+    configureModelElement(context, DefaultTypes.ROUTING_POINT, SRoutingHandle, SRoutingHandleView);
+    configureModelElement(context, DefaultTypes.VOLATILE_ROUTING_POINT, SRoutingHandle, SRoutingHandleView);
+    configureModelElement(context, DefaultTypes.LABEL, SLabel, SLabelView);
+
+    // UI elements
+    configureModelElement(context, DefaultTypes.BUTTON_EXPAND, SButton, ExpandButtonView);
+    configureModelElement(context, DefaultTypes.ISSUE_MARKER, SIssueMarker, GIssueMarkerView);
+
+    // shapes
+    configureModelElement(context, DefaultTypes.NODE_CIRCLE, CircularNode, CircularNodeView);
+    configureModelElement(context, DefaultTypes.NODE_DIAMOND, DiamondNode, DiamondNodeView);
+    configureModelElement(context, DefaultTypes.NODE_RECTANGLE, RectangularNode, RectangularNodeView);
+}
+
+export default baseViewModule;

package/src/views/compartments.tsx

@@ -0,0 +1,37 @@
+/********************************************************************************
+ * Copyright (c) 2021 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 { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { BoundsAware, RenderingContext, SChildElement, SCompartment, ShapeView, svg } from 'sprotty/lib';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class StructureCompartmentView extends ShapeView {
+    render(model: Readonly<SCompartment & SChildElement & BoundsAware>, context: RenderingContext): VNode | undefined {
+        if (!this.isVisible(model, context)) {
+            return undefined;
+        }
+
+        return (
+            <g>
+                <rect class-sprotty-comp={true} class-debug={true} x='0' y='0' width={model.size.width} height={model.size.height}></rect>
+                {context.renderChildren(model)}
+            </g>
+        );
+    }
+}

package/src/views/default-types.ts

@@ -0,0 +1,48 @@
+/********************************************************************************
+ * Copyright (c) 2021 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
+ ********************************************************************************/
+
+export namespace DefaultTypes {
+    // HTML elements
+    export const HTML = 'html';
+
+    // generic types
+    export const FOREIGN_OBJECT = 'foreign-object';
+    export const PRE_RENDERED = 'pre-rendered';
+    export const SHAPE_PRE_RENDERED = 'shape-pre-rendered';
+
+    // SVG elements
+    export const SVG = 'svg';
+
+    // graph types
+    export const GRAPH = 'graph';
+    export const NODE = 'node';
+    export const COMPARTMENT = 'comp';
+    export const COMPARTMENT_HEADER = 'comp:header';
+    export const EDGE = 'edge';
+    export const PORT = 'port';
+    export const ROUTING_POINT = 'routing-point';
+    export const VOLATILE_ROUTING_POINT = `volatile-${ROUTING_POINT}`;
+    export const LABEL = 'label';
+
+    // UI elements
+    export const BUTTON_EXPAND = 'button:expand';
+    export const ISSUE_MARKER = 'marker';
+
+    // shapes
+    export const NODE_CIRCLE = 'node:circle';
+    export const NODE_RECTANGLE = 'node:rectangle';
+    export const NODE_DIAMOND = 'node:diamond';
+}

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

@@ -0,0 +1,79 @@
+/********************************************************************************
+ * Copyright (c) 2021 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 { Point } from '@eclipse-glsp/protocol';
+import { injectable } from 'inversify';
+import { Classes, VNode } from 'snabbdom';
+import { PolylineEdgeView, RenderingContext, SEdge, svg } from 'sprotty';
+import { EdgePadding } from '../utils/argument-utils';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class GEdgeView extends PolylineEdgeView {
+    render(edge: Readonly<SEdge>, context: RenderingContext): VNode {
+        const router = this.edgeRouterRegistry.get(edge.routerKind);
+        const route = router.route(edge);
+        if (route.length === 0) {
+            return this.renderDanglingEdge('Cannot compute route', edge, context);
+        }
+
+        return (
+            <g class-sprotty-edge={true} class-mouseover={edge.hoverFeedback} {...this.addtionalClasses(edge, context)}>
+                {this.renderLine(edge, route, context)}
+                {this.renderAdditionals(edge, route, context)}
+                {context.renderChildren(edge, { route })}
+            </g>
+        );
+    }
+
+    protected addtionalClasses(_edge: Readonly<SEdge>, _context: RenderingContext): Classes {
+        return {};
+    }
+
+    protected renderLine(_edge: SEdge, segments: Point[], _context: RenderingContext): VNode {
+        return <path d={this.createPathForSegments(segments)} />;
+    }
+
+    protected 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)] : [];
+    }
+
+    protected renderMouseHandle(segments: Point[], padding: number): VNode {
+        return (
+            <path
+                class-mouse-handle
+                d={this.createPathForSegments(segments)}
+                style-stroke-width={padding * 2}
+                style-stroke='transparent'
+                style-stroke-dasharray='none'
+                style-stroke-dashoffset='0'
+            />
+        );
+    }
+
+    protected createPathForSegments(segments: Point[]): string {
+        const firstPoint = segments[0];
+        let path = `M ${firstPoint.x},${firstPoint.y}`;
+        for (let i = 1; i < segments.length; i++) {
+            const p = segments[i];
+            path += ` L ${p.x},${p.y}`;
+        }
+        return path;
+    }
+}

package/src/views/index.ts

@@ -0,0 +1,22 @@
+/********************************************************************************
+ * Copyright (c) 2021 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
+ ********************************************************************************/
+export * from './base-view-module';
+export * from './default-types';
+export * from './glsp-edge-view';
+export * from './issue-marker-view';
+export * from './rounded-corner';
+export * from './rounded-corner-view';
+export * from './compartments';

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

@@ -0,0 +1,65 @@
+/********************************************************************************
+ * Copyright (c) 2020-2021 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
+ ********************************************************************************/
+/* eslint-disable max-len */
+import { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { IssueMarkerView, RenderingContext, setClass, SIssueMarker, SIssueSeverity, svg } from 'sprotty';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class GIssueMarkerView extends IssueMarkerView {
+    render(marker: SIssueMarker, _context: RenderingContext): VNode {
+        const maxSeverity = super.getMaxSeverity(marker);
+        const group = (
+            <g class-sprotty-issue={true}>
+                <g>
+                    {this.getGlspIssueMarkerBackground(maxSeverity)}
+                    <path d={this.getGlspIssueMarkerPath(maxSeverity)} />
+                </g>
+            </g>
+        );
+        setClass(group, 'sprotty-' + maxSeverity, true);
+        return group;
+    }
+
+    protected getGlspIssueMarkerBackground(severity: SIssueSeverity): VNode {
+        switch (severity) {
+            case 'warning':
+                return <polygon class-sprotty-issue-background={true} points='8 2, 15.9 14.9, 0.2 14.9' />;
+            case 'error':
+            case 'info':
+                return <circle class-sprotty-issue-background={true} r={this.radius} cx={this.radius} cy={this.radius} />;
+        }
+    }
+
+    protected get radius(): number {
+        return 8; // var(--theia-icon-size)=16px => 16/2=8
+    }
+
+    protected getGlspIssueMarkerPath(severity: SIssueSeverity): string {
+        switch (severity) {
+            // paths used here are svg versions of codicons, resized to var(--theia-icon-size) 16px
+            case 'error': // 'codicon-error'
+                return 'm 8.8527788,0.00699568 c 1.8523692,0.115773 3.5889642,1.04195762 4.8624692,2.31546152 1.505048,1.620823 2.31546,3.5889653 2.31546,5.9044268 0,1.852369 -0.694637,3.588965 -1.852367,5.094015 -1.157733,1.389277 -2.778554,2.431235 -4.6309235,2.778554 C 7.6950478,16.446772 5.8426784,16.215226 4.2218552,15.289042 2.6010319,14.362857 1.3275281,12.97358 0.63288942,11.236984 -0.06174907,9.5003878 -0.17752216,7.5322456 0.4013433,5.7956494 0.98020876,3.9432802 2.0221665,2.4382302 3.6429898,1.3962725 5.14804,0.35431486 7.0004094,-0.10877742 8.8527788,0.00699568 Z M 9.4316445,14.941722 c 1.5050505,-0.347319 2.8943275,-1.15773 3.9362845,-2.431234 0.926185,-1.273504 1.50505,-2.778554 1.389277,-4.3993771 0,-1.8523692 -0.69464,-3.7047384 -1.968142,-4.9782422 C 11.631331,1.9751379 10.242054,1.2804995 8.6212324,1.1647264 7.1161824,1.0489533 5.4953592,1.3962725 4.2218552,2.3224572 2.9483511,3.2486418 2.0221665,4.5221456 1.5590742,6.1429686 c -0.4630923,1.50505 -0.4630923,3.1258731 0.2315462,4.6309234 0.6946384,1.50505 1.7365963,2.66278 3.1258734,3.473192 1.3892769,0.810411 3.0101002,1.041958 4.5151507,0.694638 z M 8.042367,7.5322456 10.82092,4.6379187 11.631331,5.4483302 8.8527788,8.3426571 11.631331,11.236984 10.82092,12.047395 8.042367,9.1530686 5.2638128,12.047395 4.4534013,11.236984 7.2319555,8.3426571 4.4534013,5.4483302 5.2638128,4.6379187 Z';
+            case 'warning': // 'codicon-warning'
+                return 'M 7.5587159,0.61312771 H 8.565869 L 16.050847,14.644601 15.54727,15.491525 H 0.55442396 L 0.05084746,14.644601 Z M 8.0622924,2.0780776 1.5157974,14.347033 H 14.585897 Z M 8.7776,13.202541 V 12.058049 H 7.3469848 v 1.144492 z M 7.3469848,10.913557 V 6.3355883 H 8.7776 v 4.5779687 z';
+            case 'info': // 'codicon-info'
+                return 'M 8.7624795,0.01729008 A 7.8878137,7.8878137 0 0 1 13.625085,2.3592747 8.1894066,8.1894066 0 0 1 14.158672,13.251418 7.9458123,7.9458123 0 0 1 4.2061071,15.26977 8.1198082,8.1198082 0 0 1 0.58699265,11.209866 8.259005,8.259005 0 0 1 0.32019895,5.7463948 8.1198082,8.1198082 0 0 1 3.533323,1.3500986 7.8878137,7.8878137 0 0 1 8.7624795,0.01729008 Z M 9.3099868,14.921778 A 6.8322386,6.8322386 0 0 0 13.265493,12.520635 7.0410337,7.0410337 0 0 0 12.801504,3.1712556 6.7510406,6.7510406 0 0 0 4.1829077,2.3128758 7.029434,7.029434 0 0 0 4.762894,14.248994 6.7394408,6.7394408 0 0 0 9.3099868,14.921778 Z M 7.3786322,5.7811939 H 8.8285979 V 4.6212213 H 7.3786322 Z M 8.8285979,6.9411665 V 11.581057 H 7.3786322 V 6.9411665 Z';
+        }
+    }
+}

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

@@ -0,0 +1,103 @@
+/********************************************************************************
+ * Copyright (c) 2021 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 { 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';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class RoundedCornerNodeView extends RectangularNodeView {
+    render(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext): VNode | undefined {
+        const cornerRadius = CornerRadius.from(node);
+        if (!cornerRadius) {
+            return this.renderWithoutRadius(node, context);
+        }
+
+        const wrapper = new RoundedCornerWrapper(node, cornerRadius);
+        return (
+            <g class-node={true}>
+                <defs>
+                    <clipPath id={toClipPathId(node)}>
+                        <path d={this.renderPath(wrapper, context, this.getClipPathInsets() || 0)}></path>
+                    </clipPath>
+                </defs>
+                {this.renderPathNode(wrapper, context)}
+                {context.renderChildren(node)}
+            </g>
+        );
+    }
+
+    protected renderWithoutRadius(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext): VNode | undefined {
+        return super.render(node, context);
+    }
+
+    protected getClipPathInsets(): number | undefined {
+        return 2;
+    }
+
+    protected renderPathNode(wrapper: Readonly<RoundedCornerWrapper>, context: RenderingContext): VNode {
+        return (
+            <path
+                d={this.renderPath(wrapper, context, 0)}
+                class-sprotty-node={wrapper.element instanceof SNode}
+                class-sprotty-port={wrapper.element instanceof SPort}
+                class-mouseover={wrapper.element.hoverFeedback}
+                class-selected={wrapper.element.selected}
+                {...this.additionalClasses(wrapper.element, context)}
+            />
+        );
+    }
+
+    protected additionalClasses(_node: Readonly<SShapeElement & Hoverable & Selectable>, _context: RenderingContext): Classes {
+        return {};
+    }
+
+    protected renderPath(wrapper: Readonly<RoundedCornerWrapper>, _context: RenderingContext, inset: number): string {
+        // Calcualte length of straight line segments
+        const topLineLength = Math.max(0, wrapper.size.width - wrapper.cornerRadius.topLeft - wrapper.cornerRadius.topRight);
+        const rightLineLength = Math.max(0, wrapper.size.height - wrapper.cornerRadius.topRight - wrapper.cornerRadius.bottomRight);
+        const bottomLineLength = Math.max(0, wrapper.size.width - wrapper.cornerRadius.bottomLeft - wrapper.cornerRadius.bottomRight);
+
+        const path =
+            `M${0 + inset},${0 + wrapper.topLeftCorner.radiusY}` +
+            `q${0},${-(wrapper.topLeftCorner.radiusY - inset)} ${wrapper.topLeftCorner.radiusX - inset},${-(
+                wrapper.topLeftCorner.radiusY - inset
+            )}` +
+            `h${topLineLength}` +
+            `q${wrapper.topRightCorner.radiusX - inset},0 ${wrapper.topRightCorner.radiusX - inset},${
+                wrapper.topRightCorner.radiusY - inset
+            }` +
+            `v${rightLineLength}` +
+            `q0,${wrapper.bottomRightCorner.radiusY - inset} ${-(wrapper.bottomRightCorner.radiusX - inset)},${
+                wrapper.bottomRightCorner.radiusY - inset
+            }` +
+            `h${-bottomLineLength}` +
+            `q${-(wrapper.bottomLeftCorner.radiusX - inset)},0 ${-(wrapper.bottomLeftCorner.radiusX - inset)},${-(
+                wrapper.bottomLeftCorner.radiusY - inset
+            )}` +
+            'z ';
+        return path;
+    }
+}
+
+export function toClipPathId(node: Readonly<SShapeElement & Hoverable & Selectable>): string {
+    return `${node.id}_clip_path`;
+}