@eclipse-glsp/client 0.9.0-next.d0112315 → 0.9.0-next.f12e3d87

package/src/features/validation/marker-navigator.spec.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * 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
@@ -45,7 +45,9 @@ describe('MarkerNavigator', () => {
     const markerNavigator = container.get<MarkerNavigator>(MarkerNavigator);
 
     const rootWithoutAnyMarkers = graphFactory.createRoot({
-        id: 'root', type: 'graph', children: [
+        id: 'root',
+        type: 'graph',
+        children: [
             {
                 id: '1',
                 type: 'node'
@@ -54,18 +56,24 @@ describe('MarkerNavigator', () => {
     }) as SModelRoot;
 
     const rootWithMarkers = graphFactory.createRoot({
-        id: 'root', type: 'graph', children: [
+        id: 'root',
+        type: 'graph',
+        children: [
             {
-                id: 'bottom-right', type: 'node'
+                id: 'bottom-right',
+                type: 'node'
             } as SNodeSchema,
             {
-                id: 'top-right', type: 'node'
+                id: 'top-right',
+                type: 'node'
             } as SNodeSchema,
             {
-                id: 'top-left', type: 'node'
+                id: 'top-left',
+                type: 'node'
             } as SNodeSchema,
             {
-                id: 'bottom-left', type: 'node'
+                id: 'bottom-left',
+                type: 'node'
             } as SNodeSchema
         ]
     }) as SModelRoot;
@@ -168,7 +176,6 @@ describe('MarkerNavigator', () => {
         expect(found4).to.eql(marker2);
         expect(found5).to.eql(marker1);
     });
-
 });
 
 function clearMarker(elem: SParentElement): void {
@@ -204,4 +211,3 @@ function createMarker(elem: SParentElement): SIssueMarker {
     elem.add(newMarker);
     return newMarker;
 }
-

package/src/features/validation/marker-navigator.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * 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
@@ -51,7 +51,8 @@ export class NavigateToMarkerAction implements Action {
         public readonly direction: 'next' | 'previous' = 'next',
         public readonly selectedElementIds?: string[],
         public readonly severities: SIssueSeverity[] = MarkerNavigator.ALL_SEVERITIES,
-        public kind = NavigateToMarkerAction.KIND) { }
+        public kind = NavigateToMarkerAction.KIND
+    ) {}
 }
 
 export class SModelElementComparator {
@@ -90,7 +91,11 @@ export class MarkerNavigator {
     @inject(SModelElementComparator)
     protected markerComparator: SModelElementComparator;
 
-    next(root: SModelRoot, current?: SModelElement & BoundsAware, predicate: (marker: SIssueMarker) => boolean = MarkerPredicates.ALL): SIssueMarker | undefined {
+    next(
+        root: SModelRoot,
+        current?: SModelElement & BoundsAware,
+        predicate: (marker: SIssueMarker) => boolean = MarkerPredicates.ALL
+    ): SIssueMarker | undefined {
         const markers = this.getMarkers(root, predicate);
         if (current === undefined) {
             return markers.length > 0 ? markers[0] : undefined;
@@ -98,7 +103,11 @@ export class MarkerNavigator {
         return markers[this.getNextIndex(current, markers) % markers.length];
     }
 
-    previous(root: SModelRoot, current?: SModelElement & BoundsAware, predicate: (marker: SIssueMarker) => boolean = MarkerPredicates.ALL): SIssueMarker | undefined {
+    previous(
+        root: SModelRoot,
+        current?: SModelElement & BoundsAware,
+        predicate: (marker: SIssueMarker) => boolean = MarkerPredicates.ALL
+    ): SIssueMarker | undefined {
         const markers = this.getMarkers(root, predicate);
         if (current === undefined) {
             return markers.length > 0 ? markers[0] : undefined;
@@ -206,7 +215,6 @@ export class NavigateToMarkerCommand extends Command {
         }
         return this.centerCommand ? this.centerCommand.redo(context) : context.root;
     }
-
 }
 
 @injectable()
@@ -218,15 +226,22 @@ export class MarkerNavigatorContextMenuItemProvider implements IContextMenuItemP
         const hasMarkers = collectIssueMarkers(root).length > 0;
         return Promise.resolve([
             {
-                id: 'navigate', label: 'Go to', group: 'navigate', actions: [],
+                id: 'navigate',
+                label: 'Go to',
+                group: 'navigate',
+                actions: [],
                 children: [
                     {
-                        id: 'next-marker', label: 'Next marker', group: 'marker',
+                        id: 'next-marker',
+                        label: 'Next marker',
+                        group: 'marker',
                         actions: [new NavigateToMarkerAction('next', selectedElementIds)],
                         isEnabled: () => hasMarkers
                     },
                     {
-                        id: 'previous-marker', label: 'Previous marker', group: 'marker',
+                        id: 'previous-marker',
+                        label: 'Previous marker',
+                        group: 'marker',
                         actions: [new NavigateToMarkerAction('previous', selectedElementIds)],
                         isEnabled: () => hasMarkers
                     }

package/src/features/validation/validate.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2020 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
@@ -43,7 +43,6 @@ import { createSIssue, getOrCreateSIssueMarker, getSIssueMarker } from './issue-
  */
 @injectable()
 export class ValidationFeedbackEmitter implements IFeedbackEmitter {
-
     @inject(GLSP_TYPES.IFeedbackActionDispatcher) protected feedbackActionDispatcher: IFeedbackActionDispatcher;
 
     @inject(TYPES.IActionDispatcherProvider) protected actionDispatcher: () => Promise<IActionDispatcher>;
@@ -51,7 +50,7 @@ export class ValidationFeedbackEmitter implements IFeedbackEmitter {
     private registeredAction: MarkersAction;
 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    private constructor() { }
+    private constructor() {}
 
     /**
      * Register the action that should be emitted for visualizing validation feedback.
@@ -77,11 +76,11 @@ export class ValidationFeedbackEmitter implements IFeedbackEmitter {
  * Action to set markers for a model
  */
 export class SetMarkersAction implements MarkersAction {
-    constructor(public readonly markers: Marker[], public readonly kind = SetMarkersCommand.KIND) { }
+    constructor(public readonly markers: Marker[], public readonly kind = SetMarkersCommand.KIND) {}
 }
 
 export function isSetMarkersAction(action: Action): action is SetMarkersAction {
-    return SetMarkersCommand.KIND === action.kind && ('markers' in action);
+    return SetMarkersCommand.KIND === action.kind && 'markers' in action;
 }
 
 /**
@@ -92,7 +91,6 @@ export function isSetMarkersAction(action: Action): action is SetMarkersAction {
  */
 @injectable()
 export abstract class ExternalMarkerManager {
-
     languageLabel: string;
 
     protected actionDispatcher?: IActionDispatcher;
@@ -115,7 +113,6 @@ export abstract class ExternalMarkerManager {
  */
 @injectable()
 export class SetMarkersCommand extends Command {
-
     @inject(ValidationFeedbackEmitter) protected validationFeedbackEmitter: ValidationFeedbackEmitter;
     @inject(ExternalMarkerManager) @optional() protected externalMarkerManager?: ExternalMarkerManager;
     @inject(EditorContextService) protected editorContextService: EditorContextService;
@@ -147,11 +144,11 @@ export class SetMarkersCommand extends Command {
 }
 
 /**
-* Action to retrieve markers for a model
-*/
+ * Action to retrieve markers for a model
+ */
 export class RequestMarkersAction implements Action {
     static readonly KIND = 'requestMarkers';
-    constructor(public readonly elementsIDs: string[] = [], public readonly kind = RequestMarkersAction.KIND) { }
+    constructor(public readonly elementsIDs: string[] = [], public readonly kind = RequestMarkersAction.KIND) {}
 }
 
 /**
@@ -166,7 +163,7 @@ export interface MarkersAction extends Action {
  */
 @injectable()
 export class ApplyMarkersAction implements MarkersAction {
-    constructor(public readonly markers: Marker[], public readonly kind = ApplyMarkersCommand.KIND) { }
+    constructor(public readonly markers: Marker[], public readonly kind = ApplyMarkersCommand.KIND) {}
 }
 
 /**
@@ -224,7 +221,7 @@ function removeCSSClassFromIssueParent(modelElement: SParentElement, issueMarker
  */
 @injectable()
 export class DeleteMarkersAction implements MarkersAction {
-    constructor(public readonly markers: Marker[], public readonly kind = DeleteMarkersCommand.KIND) { }
+    constructor(public readonly markers: Marker[], public readonly kind = DeleteMarkersCommand.KIND) {}
 }
 
 /**
@@ -271,4 +268,3 @@ export class DeleteMarkersCommand extends Command {
         return this.execute(context);
     }
 }
-

package/src/features/viewport/glsp-scroll-mouse-listener.ts

@@ -14,21 +14,12 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import {
-    Action,
-    EnableDefaultToolsAction,
-    EnableToolsAction,
-    IActionHandler,
-    ICommand,
-    ScrollMouseListener,
-    SModelElement
-} from 'sprotty';
+import { Action, EnableDefaultToolsAction, EnableToolsAction, IActionHandler, ICommand, ScrollMouseListener, SModelElement } from 'sprotty';
 
 import { MarqueeMouseTool } from '../tools/marquee-mouse-tool';
 
 @injectable()
 export class GLSPScrollMouseListener extends ScrollMouseListener implements IActionHandler {
-
     preventScrolling = false;
 
     handle(action: Action): void | Action | ICommand {

package/src/index.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
@@ -39,12 +39,13 @@ export * from './base/actions/context-actions';
 export * from './base/actions/edit-mode-action';
 export * from './base/actions/edit-validation-actions';
 export * from './base/actions/focus-change-action';
-export * from './base/actions/protocol-actions';
 export * from './base/args';
 export * from './base/auto-complete/auto-complete-actions';
 export * from './base/auto-complete/auto-complete-widget';
 export * from './base/auto-complete/validation-decorator';
 export * from './base/command-stack';
+export * from './base/container-modules';
+export { configureServerActions } from './base/di.config';
 export * from './base/drag-aware-mouse-listener';
 export * from './base/editor-context';
 export * from './base/focus-tracker';
@@ -95,21 +96,38 @@ export * from './features/tools/edge-edit-tool';
 export * from './features/tools/node-creation-tool';
 export * from './features/undo-redo/model';
 export * from './features/validation/issue-marker';
-export * from './features/validation/validate';
 export * from './features/validation/marker-navigator';
+export * from './features/validation/validate';
 export * from './features/viewport/glsp-scroll-mouse-listener';
 export * from './lib/model';
-export * from './model-source/glsp-server-status';
 export * from './model-source/glsp-diagram-server';
+export * from './model-source/glsp-server-status';
 export * from './utils/argument-utils';
 export * from './utils/array-utils';
 export * from './utils/marker';
 export * from './utils/smodel-util';
 export * from './utils/viewpoint-util';
 export * from './views';
-
 export {
-    validationModule, saveModule, paletteModule, toolFeedbackModule, defaultGLSPModule, modelHintsModule, glspCommandPaletteModule,
-    glspContextMenuModule, glspServerCopyPasteModule, copyPasteContextMenuModule, glspSelectModule, glspMouseToolModule, layoutCommandsModule, glspEditLabelModule,
-    glspHoverModule, toolsModule, navigationModule, markerNavigatorModule, glspDecorationModule, modelSourceWatcherModule, glspViewportModule
+    validationModule,
+    saveModule,
+    paletteModule,
+    toolFeedbackModule,
+    defaultGLSPModule,
+    modelHintsModule,
+    glspCommandPaletteModule,
+    glspContextMenuModule,
+    glspServerCopyPasteModule,
+    copyPasteContextMenuModule,
+    glspSelectModule,
+    glspMouseToolModule,
+    layoutCommandsModule,
+    glspEditLabelModule,
+    glspHoverModule,
+    toolsModule,
+    navigationModule,
+    markerNavigatorModule,
+    glspDecorationModule,
+    modelSourceWatcherModule,
+    glspViewportModule
 };

package/src/model-source/glsp-diagram-server.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2020 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
@@ -27,11 +27,8 @@ import {
     SwitchEditModeCommand
 } from 'sprotty';
 
-import { RequestContextActions } from '../base/actions/context-actions';
 import { isSetEditModeAction, SetEditModeAction } from '../base/actions/edit-mode-action';
-import { InitializeClientSessionAction } from '../base/actions/protocol-actions';
 import { SourceUriAware } from '../base/source-uri-aware';
-import { RequestTypeHintsAction } from '../features/hints/request-type-hints-action';
 import { isServerMessageAction, ServerMessageAction } from './glsp-server-status';
 
 const receivedFromServerProperty = '__receivedFromServer';
@@ -108,16 +105,7 @@ export function isReceivedFromServer(action: Action): boolean {
 }
 
 export function registerDefaultGLSPServerActions(registry: ActionHandlerRegistry, diagramServer: DiagramServer): void {
-    // Register the InitializeClientSessionAction as a server action. Then, the server will
-    // notify us about all actions it handles (Via ConfigureServerHandlersAction/Handler)
-    registry.register(InitializeClientSessionAction.KIND, diagramServer);
-
-    // Register some additional early actions, that will happen before the server can tell us
-    // which actions it handles
-    registry.register(RequestTypeHintsAction.KIND, diagramServer);
-    registry.register(RequestModelAction.KIND, diagramServer);
-    registry.register(RequestContextActions.KIND, diagramServer);
-
+    registry.register(ServerMessageAction.KIND, diagramServer);
     registry.register(ServerStatusAction.KIND, diagramServer);
 
     // Register an empty handler for SwitchEditMode, to avoid runtime exceptions.

package/src/utils/argument-utils.ts

@@ -18,7 +18,7 @@ import { SModelElement } from 'sprotty';
 import { hasArguments } from '../base/args';
 
 export namespace GArgument {
-    export function asNumber(argValue: (string | number | boolean)): number | undefined {
+    export function asNumber(argValue: string | number | boolean): number | undefined {
         return typeof argValue === 'number' ? argValue : undefined;
     }
 
@@ -26,7 +26,7 @@ export namespace GArgument {
         return argValues.map(asNumber);
     }
 
-    export function asString(argValue: (string | number | boolean)): string | undefined {
+    export function asString(argValue: string | number | boolean): string | undefined {
         return typeof argValue === 'string' ? argValue : undefined;
     }
 
@@ -34,7 +34,7 @@ export namespace GArgument {
         return argValues.map(asString);
     }
 
-    export function asBoolean(argValue: (string | number | boolean)): boolean | undefined {
+    export function asBoolean(argValue: string | number | boolean): boolean | undefined {
         return typeof argValue === 'boolean' ? argValue : undefined;
     }
 
@@ -112,16 +112,20 @@ export class CornerRadius {
         public readonly topLeft: number = 0,
         public readonly topRight: number = topLeft,
         public readonly bottomRight: number = topLeft,
-        public readonly bottomLeft: number = topRight) {
-    }
+        public readonly bottomLeft: number = topRight
+    ) {}
 
     static from(element: SModelElement | undefined): CornerRadius | undefined {
-        const radius = GArgument.getNumbers(element, this.KEY_RADIUS_TOP_LEFT, this.KEY_RADIUS_TOP_RIGHT, this.KEY_RADIUS_BOTTOM_RIGHT, this.KEY_RADIUS_BOTTOM_LEFT);
+        const radius = GArgument.getNumbers(
+            element,
+            this.KEY_RADIUS_TOP_LEFT,
+            this.KEY_RADIUS_TOP_RIGHT,
+            this.KEY_RADIUS_BOTTOM_RIGHT,
+            this.KEY_RADIUS_BOTTOM_LEFT
+        );
         if (radius === undefined || radius[0] === undefined) {
             return undefined;
         }
-        return GArgument.hasNValues(radius, 4)
-            ? new CornerRadius(radius[0], radius[1], radius[2], radius[3])
-            : new CornerRadius(radius[0]);
+        return GArgument.hasNValues(radius, 4) ? new CornerRadius(radius[0], radius[1], radius[2], radius[3]) : new CornerRadius(radius[0]);
     }
 }

package/src/utils/array-utils.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
@@ -31,7 +31,9 @@ export function distinctAdd<T>(array: T[], value: T): boolean {
     return false;
 }
 
-interface Constructor<T> { new(...args: any[]): T }
+interface Constructor<T> {
+    new (...args: any[]): T;
+}
 type PrimitiveType = 'bigint' | 'boolean' | 'function' | 'number' | 'object' | 'string' | 'symbol' | 'undefined';
 
 export function isArrayOfType<T>(object: any, typeGuard: (elem: any) => elem is T, supportEmpty = false): object is T[] {

package/src/utils/layout-utils.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * 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
@@ -52,16 +52,22 @@ export function isValidMove(element: SModelElement & BoundsAware, newPosition: P
     return true;
 }
 
-export function toValidElementMove(element: SModelElement & BoundsAware, move: WriteableElementMove, movementRestrictor?: IMovementRestrictor): WriteableElementMove | undefined {
+export function toValidElementMove(
+    element: SModelElement & BoundsAware,
+    move: WriteableElementMove,
+    movementRestrictor?: IMovementRestrictor
+): WriteableElementMove | undefined {
     if (!isValidMove(element, move.toPosition, movementRestrictor)) {
         return;
     }
     return move;
 }
 
-export function toValidElementAndBounds(element: SModelElement & BoundsAware, bounds: WriteableElementAndBounds,
-    movementRestrictor?: IMovementRestrictor): WriteableElementAndBounds | undefined {
-
+export function toValidElementAndBounds(
+    element: SModelElement & BoundsAware,
+    bounds: WriteableElementAndBounds,
+    movementRestrictor?: IMovementRestrictor
+): WriteableElementAndBounds | undefined {
     if (!isValidMove(element, bounds.newPosition, movementRestrictor)) {
         return;
     }

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
@@ -27,21 +27,24 @@ import {
     SRoutableElement,
     SRoutingHandle
 } from 'sprotty';
-
 import { ElementAndRoutingPoints } from '../base/operations/operation';
 
 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): 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;
@@ -53,9 +56,10 @@ export function hasSelectedElements(element: SModelElement): boolean {
 
 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;
 }
 

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
@@ -41,7 +41,8 @@ import {
  *  A mouseEvent
  */
 export function getAbsolutePosition(target: SModelElement, mouseEvent: MouseEvent): Point {
-    let xPos = mouseEvent.pageX; let yPos = mouseEvent.pageY;
+    let xPos = mouseEvent.pageX;
+    let yPos = mouseEvent.pageY;
     const canvasBounds = target.root.canvasBounds;
     xPos -= canvasBounds.x;
     yPos -= canvasBounds.y;

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/glsp-edge-view.tsx

@@ -14,15 +14,13 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { Classes } from 'snabbdom/modules/class';
-import { VNode } from 'snabbdom/vnode';
-import { Point, PolylineEdgeView, RenderingContext, SEdge } from 'sprotty';
+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: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
 export class GEdgeView extends PolylineEdgeView {
@@ -33,11 +31,13 @@ export class GEdgeView extends PolylineEdgeView {
             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>;
+        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 {
@@ -55,8 +55,16 @@ export class GEdgeView extends PolylineEdgeView {
     }
 
     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" />;
+        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 {
@@ -68,5 +76,4 @@ export class GEdgeView extends PolylineEdgeView {
         }
         return path;
     }
-
 }

package/src/views/index.ts

@@ -19,3 +19,4 @@ export * from './glsp-edge-view';
 export * from './issue-marker-view';
 export * from './rounded-corner';
 export * from './rounded-corner-view';
+export * from './compartments';