@eclipse-glsp/client 0.9.0-next.c5944e10

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/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,70 @@
+/********************************************************************************
+ * 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 { Point, 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,21 @@
+/********************************************************************************
+ * 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';

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

@@ -0,0 +1,55 @@
+/********************************************************************************
+ * Copyright (c) 2020 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>
+                <circle class-sprotty-issue-background={true} r={this.radius} cx={this.radius} cy={this.radius} />
+                <path d={this.getGlspIssueMarkerPath(maxSeverity)} />
+            </g>
+        </g>;
+        setClass(group, 'sprotty-' + maxSeverity, true);
+        return group;
+    }
+
+    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 FontAwesome icons, resized to var(--theia-icon-size) 16px
+            case 'error': // 'fa-times-circle'
+                return 'M 8,0 C 3.5806452,0 0,3.58065 0,8 c 0,4.41935 3.5806452,8 8,8 4.419355,0 8,-3.58065 8,-8 C 16,3.58065 12.419355,0 8,0 Z m 3.922581,10.1 c 0.151613,0.15161 0.151613,0.39677 0,0.54839 l -1.27742,1.27419 c -0.151613,0.15161 -0.396774,0.15161 -0.548387,0 L 8,9.80645 5.9,11.92258 c -0.1516129,0.15161 -0.3967742,0.15161 -0.5483871,0 L 4.0774194,10.64516 c -0.1516129,-0.15161 -0.1516129,-0.39677 0,-0.54839 L 6.1935484,8 4.0774194,5.9 c -0.1516129,-0.15161 -0.1516129,-0.39677 0,-0.54839 L 5.3548387,4.07419 c 0.1516129,-0.15161 0.3967742,-0.15161 0.5483871,0 L 8,6.19355 10.1,4.07742 c 0.151613,-0.15161 0.396774,-0.15161 0.548387,0 l 1.277419,1.27742 c 0.151613,0.15161 0.151613,0.39677 0,0.54839 L 9.8064516,8 Z';
+            case 'warning': // 'fa-exclamation-circle'
+                return 'm 16,8 c 0,4.41926 -3.582032,8 -8,8 C 3.5820323,16 0,12.41926 0,8 0,3.58332 3.5820323,0 8,0 c 4.417968,0 8,3.58332 8,8 z M 8,9.6129 c -0.8195161,0 -1.483871,0.66436 -1.483871,1.48387 0,0.81952 0.6643549,1.48388 1.483871,1.48388 0.8195161,0 1.483871,-0.66436 1.483871,-1.48388 C 9.483871,10.27726 8.8195161,9.6129 8,9.6129 Z M 6.5911935,4.27916 6.8304839,8.66626 c 0.011194,0.20529 0.1809355,0.366 0.3865161,0.366 h 1.566 c 0.2055806,0 0.3753226,-0.16071 0.3865161,-0.366 L 9.4088065,4.27916 C 9.4209035,4.05742 9.2443548,3.87097 9.0222903,3.87097 H 6.9776774 c -0.2220645,0 -0.3985806,0.18645 -0.3864839,0.40819 z';
+            case 'info': // 'fa-info-circle information'
+                return 'M 8.0000004,0 C 3.5820324,0 0,3.58332 0,8 0,12.41926 3.5820324,16 8.0000004,16 12.417968,16 16,12.41926 16,8 16,3.58332 12.417968,0 8.0000004,0 Z m 0,3.54839 c 0.748258,0 1.354839,0.60658 1.354839,1.35484 0,0.74825 -0.606581,1.35483 -1.354839,1.35483 -0.748258,0 -1.354839,-0.60658 -1.354839,-1.35483 0,-0.74826 0.606581,-1.35484 1.354839,-1.35484 z m 1.806452,8.19355 c 0,0.21377 -0.173323,0.38709 -0.387097,0.38709 h -2.83871 c -0.213774,0 -0.387097,-0.17332 -0.387097,-0.38709 v -0.7742 c 0,-0.21377 0.173323,-0.38709 0.387097,-0.38709 h 0.387097 V 8.51613 h -0.387097 c -0.213774,0 -0.387097,-0.17332 -0.387097,-0.3871 V 7.35484 c 0,-0.21378 0.173323,-0.3871 0.387097,-0.3871 h 2.064516 c 0.213774,0 0.387097,0.17332 0.387097,0.3871 v 3.22581 h 0.387097 c 0.213774,0 0.387097,0.17332 0.387097,0.38709 z';
+        }
+    }
+
+}

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

@@ -0,0 +1,88 @@
+/********************************************************************************
+ * 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`;
+}

package/src/views/rounded-corner.ts

@@ -0,0 +1,88 @@
+/********************************************************************************
+ * 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 { Dimension, Hoverable, Selectable, SShapeElement } from 'sprotty/lib';
+
+import { CornerRadius } from '../utils/argument-utils';
+
+export interface RoundedCorner {
+    radiusX: number;
+    radiusY: number;
+}
+
+export class RoundedCornerWrapper {
+    protected _topLeftCorner: RoundedCorner;
+    protected _topRightCorner: RoundedCorner;
+    protected _bottomRightCorner: RoundedCorner;
+    protected _bottomLeftCorner: RoundedCorner;
+
+    constructor(public readonly element: SShapeElement & Hoverable & Selectable, public readonly cornerRadius: CornerRadius) {
+    }
+
+    get size(): Dimension {
+        return this.element.size;
+    }
+
+    get topLeftCorner(): RoundedCorner {
+        if (!this._topLeftCorner) {
+            this._topLeftCorner = {
+                radiusX: scaledRadius(this.cornerRadius.topLeft, this.element.size.width / 2),
+                radiusY: scaledRadius(this.cornerRadius.topLeft, this.element.size.height / 2)
+            };
+        }
+        return this._topLeftCorner;
+    }
+
+    get topRightCorner(): RoundedCorner {
+        if (!this._topRightCorner) {
+            this._topRightCorner = {
+                radiusX: scaledRadius(this.cornerRadius.topRight, this.element.size.width / 2),
+                radiusY: scaledRadius(this.cornerRadius.topRight, this.element.size.height / 2)
+            };
+        }
+        return this._topRightCorner;
+    }
+
+    get bottomRightCorner(): RoundedCorner {
+        if (!this._bottomRightCorner) {
+            this._bottomRightCorner = {
+                radiusX: scaledRadius(this.cornerRadius.bottomRight, this.element.size.width / 2),
+                radiusY: scaledRadius(this.cornerRadius.bottomRight, this.element.size.height / 2)
+            };
+        }
+        return this._bottomRightCorner;
+    }
+
+    get bottomLeftCorner(): RoundedCorner {
+        if (!this._bottomLeftCorner) {
+            this._bottomLeftCorner = {
+                radiusX: scaledRadius(this.cornerRadius.bottomLeft, this.element.size.width / 2),
+                radiusY: scaledRadius(this.cornerRadius.bottomLeft, this.element.size.height / 2)
+            };
+        }
+        return this._bottomLeftCorner;
+    }
+}
+
+/*
+* Scales the radius if necessary. (Percentual downscaling if the radius is bigger then the maximal allowed length)
+*/
+export function scaledRadius(radius: number, maximalLength: number): number {
+    if (radius <= maximalLength) {
+        return radius;
+    } else {
+        return radius * (maximalLength / radius);
+    }
+}