@eclipse-glsp/client 0.9.0-next.d9bed812 → 0.9.0-next.e99d24cc

package/src/features/tools/marquee-mouse-tool.ts

@@ -13,20 +13,35 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable } from "inversify";
-import { Action, BoundsAware, EnableDefaultToolsAction, isSelectable, KeyListener, Point, SEdge, SelectAction, SModelElement, SNode, TYPES } from "sprotty";
-import { DragAwareMouseListener } from "../../base/drag-aware-mouse-listener";
-import { CursorCSS, cursorFeedbackAction } from "../tool-feedback/css-feedback";
-import { DrawMarqueeAction, RemoveMarqueeAction } from "../tool-feedback/marquee-tool-feedback";
-import { BaseGLSPTool } from "../tools/base-glsp-tool";
-import { getAbsolutePosition, toAbsoluteBounds } from "../../utils/viewpoint-util";
-import { DOMHelper } from "sprotty/lib/base/views/dom-helper";
+import { Action, SelectAction } from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
+import {
+    BoundsAware,
+    EnableDefaultToolsAction,
+    isSelectable,
+    isSelected,
+    KeyListener,
+    SEdge,
+    SModelElement,
+    SModelRoot,
+    SNode,
+    TYPES
+} from 'sprotty';
+import { DOMHelper } from 'sprotty/lib/base/views/dom-helper';
+import { GLSP_TYPES } from '../../base/types';
+import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
+import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
+import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
+import { RemoveMarqueeAction } from '../tool-feedback/marquee-tool-feedback';
+import { BaseGLSPTool } from './base-glsp-tool';
+import { IMarqueeBehavior, MarqueeUtil } from './marquee-behavior';
 
 @injectable()
 export class MarqueeMouseTool extends BaseGLSPTool {
-    static ID = "glsp.marquee-mouse-tool";
+    static ID = 'glsp.marquee-mouse-tool';
 
     @inject(TYPES.DOMHelper) protected domHelper: DOMHelper;
+    @inject(GLSP_TYPES.IMarqueeBehavior) @optional() protected marqueeBehavior: IMarqueeBehavior;
 
     protected marqueeMouseListener: MarqueeMouseListener;
     protected shiftKeyListener: ShiftKeyListener = new ShiftKeyListener();
@@ -36,7 +51,7 @@ export class MarqueeMouseTool extends BaseGLSPTool {
     }
 
     enable(): void {
-        this.marqueeMouseListener = new MarqueeMouseListener(this.domHelper);
+        this.marqueeMouseListener = new MarqueeMouseListener(this.domHelper, this.editorContext.modelRoot, this.marqueeBehavior);
         this.mouseTool.register(this.marqueeMouseListener);
         this.keyTool.register(this.shiftKeyListener);
         this.dispatchFeedback([cursorFeedbackAction(CursorCSS.MARQUEE)]);
@@ -49,43 +64,60 @@ export class MarqueeMouseTool extends BaseGLSPTool {
     }
 }
 
-@injectable()
 export class MarqueeMouseListener extends DragAwareMouseListener {
-
-    protected startPoint: Point;
-
-    protected currentPoint: Point;
-
     protected domHelper: DOMHelper;
+    protected marqueeUtil: MarqueeUtil;
+    protected nodes: (SModelElement & BoundsAware)[];
+    protected edges: SVGGElement[];
+    protected previouslySelected: string[];
+    protected isActive = false;
 
-    protected isActive: boolean = false;
-
-    constructor(domHelper: DOMHelper) {
+    constructor(domHelper: DOMHelper, root: SModelRoot, marqueeBehavior: IMarqueeBehavior | undefined) {
         super();
         this.domHelper = domHelper;
+        this.marqueeUtil = new MarqueeUtil(marqueeBehavior);
+        this.nodes = Array.from(
+            root.index
+                .all()
+                .map(e => e as SModelElement & BoundsAware)
+                .filter(e => isSelectable(e))
+                .filter(e => e instanceof SNode)
+        );
+        const sEdges = Array.from(
+            root.index
+                .all()
+                .filter(e => e instanceof SEdge)
+                .filter(e => isSelectable(e))
+                .map(e => e.id)
+        );
+        this.edges = Array.from(document.querySelectorAll('g')).filter(e => sEdges.includes(this.domHelper.findSModelIdByDOMElement(e)));
     }
 
     mouseDown(target: SModelElement, event: MouseEvent): Action[] {
         this.isActive = true;
-        this.startPoint = { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y };
+        this.marqueeUtil.updateStartPoint(getAbsolutePosition(target, event));
+        if (event.ctrlKey) {
+            this.previouslySelected = Array.from(
+                target.root.index
+                    .all()
+                    .map(e => e as SModelElement & BoundsAware)
+                    .filter(e => isSelected(e))
+                    .map(e => e.id)
+            );
+        }
         return [];
     }
 
     mouseMove(target: SModelElement, event: MouseEvent): Action[] {
-        this.currentPoint = { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y };
+        this.marqueeUtil.updateCurrentPoint(getAbsolutePosition(target, event));
         if (this.isActive) {
-            const nodeIdsSelected = Array.from(target.root.index.all()
-                .map(e => e as SModelElement & BoundsAware)
-                .filter(e => isSelectable(e))
-                .filter(e => e instanceof SNode)
-                .filter(e => this.isNodeMarked(e)).map(e => e.id));
-            const edgeIdsSelected = this.getMarkedEdges(target.root);
+            const nodeIdsSelected = this.nodes.filter(e => this.marqueeUtil.isNodeMarked(toAbsoluteBounds(e))).map(e => e.id);
+            const edgeIdsSelected = this.edges.filter(e => this.isEdgeMarked(e)).map(e => this.domHelper.findSModelIdByDOMElement(e));
             const selected = nodeIdsSelected.concat(edgeIdsSelected);
             return [
-                new SelectAction([], Array.from(target.index.all().map(e => e.id))),
-                new SelectAction(selected, []),
-                new DrawMarqueeAction(this.startPoint,
-                    { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y })
+                new SelectAction([], Array.from(target.root.index.all().map(e => e.id))),
+                new SelectAction(selected.concat(this.previouslySelected), []),
+                this.marqueeUtil.drawMarqueeAction()
             ];
         }
         return [];
@@ -99,102 +131,19 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
         return [new RemoveMarqueeAction(), new EnableDefaultToolsAction()];
     }
 
-    getMarkedEdges(root: SModelElement): string[] {
-        const elements = Array.from(document.querySelectorAll("g"));
-        const edges = Array.from(root.index.all().filter(e => e instanceof SEdge).
-            filter(e => isSelectable(e)).map(e => e.id));
-        return elements.filter(e => edges.includes(this.domHelper.findSModelIdByDOMElement(e)))
-            .filter(e => this.isEdgeMarked(e)).map(e => this.domHelper.findSModelIdByDOMElement(e));
-    }
-
     isEdgeMarked(element: SVGElement): boolean {
-        if (element.getAttribute("transform") == null) {
-            if (element.children[0] != null) {
-                const path = element.children[0].getAttribute("d");
-                if (path != null) {
-                    const points = path.split(/M|L/);
-                    for (let i = 0; i < points.length - 1; i++) {
-                        const coord1 = points[i].split(",");
-                        const coord2 = points[i + 1].split(",");
-                        const point1 = { x: parseInt(coord1[0]), y: parseInt(coord1[1]) };
-                        const point2 = { x: parseInt(coord2[0]), y: parseInt(coord2[1]) };
-                        if (this.isLineMarked(point1, point2)) return true;
-                    }
-                }
+        if (!element.getAttribute('transform')) {
+            if (element.children[0]) {
+                const path = element.children[0].getAttribute('d');
+                return this.marqueeUtil.isEdgePathMarked(path);
             }
         }
         return false;
     }
-
-    isLineMarked(point1: Point, point2: Point): boolean {
-        if (this.pointInRect(point1) || this.pointInRect(point2)) return true;
-        if (this.linesIntersect(point1, point2, this.startPoint, { x: this.startPoint.x, y: this.currentPoint.y })) return true;
-        if (this.linesIntersect(point1, point2, this.startPoint, { x: this.currentPoint.x, y: this.startPoint.y })) return true;
-        if (this.linesIntersect(point1, point2, { x: this.currentPoint.x, y: this.startPoint.y }, this.currentPoint)) return true;
-        if (this.linesIntersect(point1, point2, { x: this.startPoint.x, y: this.currentPoint.y }, this.currentPoint)) return true;
-        return false;
-    }
-
-    linesIntersect(p1: Point, p2: Point, p3: Point, p4: Point): boolean {
-        const tCount = ((p1.x - p3.x) * (p3.y - p4.y)) - ((p1.y - p3.y) * (p3.x - p4.x));
-        const tDenom = ((p1.x - p2.x) * (p3.y - p4.y)) - ((p1.y - p2.y) * (p3.x - p4.x));
-        const t = tCount / tDenom;
-        const uCount = ((p2.x - p1.x) * (p1.y - p3.y)) - ((p2.y - p1.y) * (p1.x - p3.x));
-        const uDenom = ((p1.x - p2.x) * (p3.y - p4.y)) - ((p1.y - p2.y) * (p3.x - p4.x));
-        const u = uCount / uDenom;
-        if (t >= 0.0 && t <= 1.0 && u >= 0.0 && u <= 1.0) return true;
-        return false;
-    }
-
-    pointInRect(point: Point): boolean {
-        const boolX = this.startPoint.x <= this.currentPoint.x ?
-            this.isBetween(point.x, this.startPoint.x, this.currentPoint.x) : this.isBetween(point.x, this.currentPoint.x, this.startPoint.x);
-        const boolY = this.startPoint.y <= this.currentPoint.y ?
-            this.isBetween(point.y, this.startPoint.y, this.currentPoint.y) : this.isBetween(point.y, this.currentPoint.y, this.startPoint.y);
-        return boolX && boolY;
-    }
-
-    isNodeMarked(element: SModelElement & BoundsAware): boolean {
-        const horizontallyIn = this.startPoint.x < this.currentPoint.x ?
-            this.isElementBetweenXAxis(element, this.startPoint.x, this.currentPoint.x) :
-            this.isElementBetweenXAxis(element, this.currentPoint.x, this.startPoint.x);
-        const verticallyIn = this.startPoint.y < this.currentPoint.y ?
-            this.isElementBetweenYAxis(element, this.startPoint.y, this.currentPoint.y) :
-            this.isElementBetweenYAxis(element, this.currentPoint.y, this.startPoint.y);
-        if (horizontallyIn && verticallyIn) return true;
-        return false;
-    }
-
-    isElementBetweenXAxis(element: SModelElement & BoundsAware, marqueeLeft: number, marqueeRight: number): boolean {
-        if (this.isBetween(marqueeLeft, toAbsoluteBounds(element).x, toAbsoluteBounds(element).x + toAbsoluteBounds(element).width)
-            || this.isBetween(marqueeRight, toAbsoluteBounds(element).x, toAbsoluteBounds(element).x + toAbsoluteBounds(element).width)) {
-            return true;
-        }
-        const leftEdge = this.isBetween(toAbsoluteBounds(element).x, marqueeLeft, marqueeRight);
-        const rightEdge = this.isBetween(toAbsoluteBounds(element).x + toAbsoluteBounds(element).width, marqueeLeft, marqueeRight);
-        return leftEdge || rightEdge;
-    }
-
-    isElementBetweenYAxis(element: SModelElement & BoundsAware, marqueeTop: number, marqueeBottom: number): boolean {
-        if (this.isBetween(marqueeTop, toAbsoluteBounds(element).y, toAbsoluteBounds(element).y + toAbsoluteBounds(element).height)
-            || this.isBetween(marqueeBottom, toAbsoluteBounds(element).y, toAbsoluteBounds(element).y + toAbsoluteBounds(element).height)) {
-            return true;
-        }
-        const topEdge = this.isBetween(toAbsoluteBounds(element).y, marqueeTop, marqueeBottom);
-        const bottomEdge = this.isBetween(toAbsoluteBounds(element).y + toAbsoluteBounds(element).height, marqueeTop, marqueeBottom);
-        return topEdge || bottomEdge;
-    }
-
-    isBetween(x: number, lower: number, upper: number): boolean {
-        if (lower <= x && x <= upper) return true;
-        return false;
-    }
-
 }
 
 @injectable()
 export class ShiftKeyListener extends KeyListener {
-
     keyUp(element: SModelElement, event: KeyboardEvent): Action[] {
         if (event.shiftKey) {
             return [];

package/src/features/tools/marquee-tool.ts

@@ -13,14 +13,15 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable } from "inversify";
-import { Action, EnableToolsAction, KeyListener, KeyTool, SModelElement } from "sprotty";
-import { BaseGLSPTool } from "../tools/base-glsp-tool";
-import { MarqueeMouseTool } from "./marquee-mouse-tool";
+import { Action } from '@eclipse-glsp/protocol';
+import { inject, injectable } from 'inversify';
+import { EnableToolsAction, KeyListener, KeyTool, SModelElement } from 'sprotty';
+import { BaseGLSPTool } from '../tools/base-glsp-tool';
+import { MarqueeMouseTool } from './marquee-mouse-tool';
 
 @injectable()
 export class MarqueeTool extends BaseGLSPTool {
-    static ID = "glsp.marquee-tool";
+    static ID = 'glsp.marquee-tool';
 
     protected marqueeKeyListener: MarqueeKeyListener = new MarqueeKeyListener();
 
@@ -41,7 +42,6 @@ export class MarqueeTool extends BaseGLSPTool {
 
 @injectable()
 export class MarqueeKeyListener extends KeyListener {
-
     keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
         if (event.shiftKey) {
             return [new EnableToolsAction([MarqueeMouseTool.ID])];

package/src/features/tools/model.ts

@@ -13,8 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-
-import { boundsFeature, Point, RectangularNode } from "sprotty";
+import { boundsFeature, Point, RectangularNode } from 'sprotty';
 
 export class MarqueeNode extends RectangularNode {
     static readonly DEFAULT_FEATURES = [boundsFeature];

package/src/features/tools/node-creation-tool.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
@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable, optional } from "inversify";
+import { Action, CreateNodeOperation, isTriggerNodeCreationAction, TriggerNodeCreationAction } from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
 import {
-    Action,
     EnableDefaultToolsAction,
     EnableToolsAction,
     findParentByFeature,
@@ -25,22 +25,16 @@ import {
     SModelElement,
     SNode,
     TYPES
-} from "sprotty";
-
-import { DragAwareMouseListener } from "../../base/drag-aware-mouse-listener";
-import {
-    CreateNodeOperation,
-    isTriggerNodeCreationAction,
-    TriggerNodeCreationAction
-} from "../../base/operations/operation";
-import { getAbsolutePosition } from "../../utils/viewpoint-util";
-import { Containable, isContainable } from "../hints/model";
-import { CursorCSS, cursorFeedbackAction } from "../tool-feedback/css-feedback";
-import { BaseGLSPTool } from "./base-glsp-tool";
+} from 'sprotty';
+import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
+import { getAbsolutePosition } from '../../utils/viewpoint-util';
+import { Containable, isContainable } from '../hints/model';
+import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
+import { BaseGLSPTool } from './base-glsp-tool';
 
 @injectable()
 export class NodeCreationTool extends BaseGLSPTool implements IActionHandler {
-    static ID = "tool_create_node";
+    static ID = 'tool_create_node';
 
     @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
 
@@ -51,7 +45,7 @@ export class NodeCreationTool extends BaseGLSPTool implements IActionHandler {
         return NodeCreationTool.ID;
     }
 
-    enable() {
+    enable(): void {
         if (this.triggerAction === undefined) {
             throw new TypeError(`Could not enable tool ${this.id}.The triggerAction cannot be undefined.`);
         }
@@ -60,7 +54,7 @@ export class NodeCreationTool extends BaseGLSPTool implements IActionHandler {
         this.dispatchFeedback([cursorFeedbackAction(CursorCSS.NODE_CREATION)]);
     }
 
-    disable() {
+    disable(): void {
         this.mouseTool.deregister(this.creationToolMouseListener);
         this.deregisterFeedback([cursorFeedbackAction()]);
     }
@@ -75,18 +69,17 @@ export class NodeCreationTool extends BaseGLSPTool implements IActionHandler {
 
 @injectable()
 export class NodeCreationToolMouseListener extends DragAwareMouseListener {
-
     protected container?: SModelElement & Containable;
 
     constructor(protected triggerAction: TriggerNodeCreationAction, protected tool: NodeCreationTool) {
         super();
     }
 
-    protected creationAllowed(elementTypeId: string) {
+    protected creationAllowed(elementTypeId: string): boolean | undefined {
         return this.container && this.container.isContainableElement(elementTypeId);
     }
 
-    get elementTypeId() {
+    get elementTypeId(): string {
         return this.triggerAction.elementTypeId;
     }
 
@@ -114,8 +107,8 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
         if (!this.container || currentContainer !== this.container) {
             this.container = currentContainer;
             const feedback = this.creationAllowed(this.elementTypeId)
-                ? cursorFeedbackAction(CursorCSS.NODE_CREATION) :
-                cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED);
+                ? cursorFeedbackAction(CursorCSS.NODE_CREATION)
+                : cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED);
             this.tool.dispatchFeedback([feedback]);
         }
         return [];

package/src/features/tools/view.tsx

@@ -13,26 +13,32 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { RectangularNodeView, RenderingContext, svg } from 'sprotty';
 
-import { injectable } from "inversify";
-import * as snabbdom from "snabbdom-jsx";
-import { VNode } from "snabbdom/vnode";
-import { RectangularNodeView, RenderingContext } from "sprotty";
-import { MarqueeNode } from "./model";
+import { MarqueeNode } from './model';
 
-const JSX = { createElement: snabbdom.svg };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
 
 @injectable()
 export class MarqueeView extends RectangularNodeView {
     render(node: MarqueeNode, context: RenderingContext): VNode {
-        const graph = <g>
-            <rect class-sprotty-node={true} class-marquee={true}
-                x={((node.startPoint.x - node.endPoint.x) <= 0) ? node.startPoint.x : node.endPoint.x}
-                y={((node.startPoint.y - node.endPoint.y) <= 0) ? node.startPoint.y : node.endPoint.y}
-                rx={0} ry={0}
-                width={Math.abs(node.startPoint.x - node.endPoint.x)}
-                height={Math.abs(node.startPoint.y - node.endPoint.y)}></rect>
-        </g>;
+        const graph = (
+            <g>
+                <rect
+                    class-sprotty-node={true}
+                    class-marquee={true}
+                    x={node.startPoint.x - node.endPoint.x <= 0 ? node.startPoint.x : node.endPoint.x}
+                    y={node.startPoint.y - node.endPoint.y <= 0 ? node.startPoint.y : node.endPoint.y}
+                    rx={0}
+                    ry={0}
+                    width={Math.abs(node.startPoint.x - node.endPoint.x)}
+                    height={Math.abs(node.startPoint.y - node.endPoint.y)}
+                ></rect>
+            </g>
+        );
         return graph;
     }
-}
+}

package/src/features/validation/di.config.ts

@@ -13,10 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { ContainerModule } from "inversify";
-import { configureCommand, TYPES } from "sprotty";
+import { ContainerModule } from 'inversify';
+import { configureCommand, TYPES } from 'sprotty';
 
-import { GLSP_TYPES } from "../../base/types";
+import { GLSP_TYPES } from '../../base/types';
 import {
     LeftToRightTopToBottomComparator,
     MarkerNavigator,
@@ -24,8 +24,8 @@ import {
     MarkerNavigatorKeyListener,
     NavigateToMarkerCommand,
     SModelElementComparator
-} from "./marker-navigator";
-import { ApplyMarkersCommand, DeleteMarkersCommand, SetMarkersCommand, ValidationFeedbackEmitter } from "./validate";
+} from './marker-navigator';
+import { ApplyMarkersCommand, DeleteMarkersCommand, SetMarkersCommand, ValidationFeedbackEmitter } from './validate';
 
 export const validationModule = new ContainerModule((bind, _unbind, isBound) => {
     configureCommand({ bind, isBound }, SetMarkersCommand);

package/src/features/validation/issue-marker.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
@@ -13,9 +13,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { SDecoration, SIssue, SIssueMarker, SParentElement } from "sprotty";
-
-import { Marker, MarkerKind } from "../../utils/marker";
+import { Marker, MarkerKind } from '@eclipse-glsp/protocol';
+import { SDecoration, SIssue, SIssueMarker, SParentElement } from 'sprotty';
 
 export class GIssueMarker extends SIssueMarker {
     constructor() {
@@ -38,7 +37,7 @@ export function getOrCreateSIssueMarker(modelElement: SParentElement): SIssueMar
 
     if (issueMarker === undefined) {
         issueMarker = new GIssueMarker();
-        issueMarker.type = "marker";
+        issueMarker.type = 'marker';
         issueMarker.issues = new Array<SIssue>();
         modelElement.add(issueMarker);
     }

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
@@ -13,11 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import "mocha";
-import "reflect-metadata";
-
-import { expect } from "chai";
-import { Container } from "inversify";
+/* eslint-disable import/no-deprecated,no-unused-expressions */
+import { expect } from 'chai';
+import { Container } from 'inversify';
+import 'mocha';
+import 'reflect-metadata';
 import {
     BoundsAware,
     decorationModule,
@@ -29,12 +29,11 @@ import {
     SNodeSchema,
     SParentElement,
     TYPES
-} from "sprotty/lib";
-import defaultModule from "sprotty/lib/base/di.config";
-import { SGraphFactory } from "sprotty/lib/graph/sgraph-factory";
-
-import { markerNavigatorModule } from "./di.config";
-import { MarkerNavigator } from "./marker-navigator";
+} from 'sprotty';
+import defaultModule from 'sprotty/lib/base/di.config';
+import { SGraphFactory } from 'sprotty/lib/graph/sgraph-factory';
+import { markerNavigatorModule } from './di.config';
+import { MarkerNavigator } from './marker-navigator';
 
 describe('MarkerNavigator', () => {
     const container = new Container();
@@ -44,28 +43,36 @@ describe('MarkerNavigator', () => {
     const markerNavigator = container.get<MarkerNavigator>(MarkerNavigator);
 
     const rootWithoutAnyMarkers = graphFactory.createRoot({
-        id: 'root', type: 'graph', children: [
-            <SNodeSchema>{
+        id: 'root',
+        type: 'graph',
+        children: [
+            {
                 id: '1',
                 type: 'node'
-            }
+            } as SNodeSchema
         ]
     }) as SModelRoot;
 
     const rootWithMarkers = graphFactory.createRoot({
-        id: 'root', type: 'graph', children: [
-            <SNodeSchema>{
-                id: 'bottom-right', type: 'node'
-            },
-            <SNodeSchema>{
-                id: 'top-right', type: 'node'
-            },
-            <SNodeSchema>{
-                id: 'top-left', type: 'node'
-            },
-            <SNodeSchema>{
-                id: 'bottom-left', type: 'node'
-            }
+        id: 'root',
+        type: 'graph',
+        children: [
+            {
+                id: 'bottom-right',
+                type: 'node'
+            } as SNodeSchema,
+            {
+                id: 'top-right',
+                type: 'node'
+            } as SNodeSchema,
+            {
+                id: 'top-left',
+                type: 'node'
+            } as SNodeSchema,
+            {
+                id: 'bottom-left',
+                type: 'node'
+            } as SNodeSchema
         ]
     }) as SModelRoot;
 
@@ -167,14 +174,13 @@ describe('MarkerNavigator', () => {
         expect(found4).to.eql(marker2);
         expect(found5).to.eql(marker1);
     });
-
 });
 
-function clearMarker(elem: SParentElement) {
+function clearMarker(elem: SParentElement): void {
     elem.children.filter(isMarker).forEach(marker => elem.remove(marker));
 }
 
-function setIssues(elem: SParentElement, issues: SIssue[]) {
+function setIssues(elem: SParentElement, issues: SIssue[]): SIssueMarker {
     const marker = getOrCreateMarker(elem);
     marker.issues = issues;
     return marker;
@@ -196,11 +202,10 @@ function isMarker(element: SModelElement): element is SIssueMarker {
     return element instanceof SIssueMarker;
 }
 
-function createMarker(elem: SParentElement) {
+function createMarker(elem: SParentElement): SIssueMarker {
     const newMarker = new SIssueMarker();
     newMarker.type = 'marker';
     newMarker.id = `${elem.id}_marker`;
     elem.add(newMarker);
     return newMarker;
 }
-