@eclipse-glsp/client 0.9.0-next.0633ee0a → 0.9.0-next.0acab46c

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

@@ -0,0 +1,158 @@
+/********************************************************************************
+ * 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 { Bounds, Point } from '@eclipse-glsp/protocol';
+import { PointToPointLine } from 'sprotty';
+import { DrawMarqueeAction } from '../tool-feedback/marquee-tool-feedback';
+
+export interface IMarqueeBehavior {
+    readonly entireElement: boolean;
+    readonly entireEdge: boolean;
+}
+
+export class MarqueeUtil {
+    protected startPoint: Point;
+    protected currentPoint: Point;
+    protected marqueeBehavior: IMarqueeBehavior;
+
+    constructor(marqueeBehavior?: IMarqueeBehavior) {
+        if (marqueeBehavior) {
+            this.marqueeBehavior = marqueeBehavior;
+        } else {
+            this.marqueeBehavior = { entireElement: false, entireEdge: false };
+        }
+    }
+
+    updateStartPoint(position: Point): void {
+        this.startPoint = position;
+    }
+
+    updateCurrentPoint(position: Point): void {
+        this.currentPoint = position;
+    }
+
+    drawMarqueeAction(): DrawMarqueeAction {
+        return new DrawMarqueeAction(this.startPoint, this.currentPoint);
+    }
+
+    isEdgePathMarked(path: string | null): boolean {
+        if (!path) {
+            return false;
+        }
+        const points = path
+            .split(/M|L/)
+            .filter(p => p)
+            .map(p => {
+                const coord = p.split(',');
+                return { x: parseInt(coord[0], 10), y: parseInt(coord[1], 10) };
+            });
+        return this.isEdgeMarked(points);
+    }
+
+    isEdgeMarked(points: Point[]): boolean {
+        return this.marqueeBehavior.entireEdge ? this.isEntireEdgeMarked(points) : this.isPartOfEdgeMarked(points);
+    }
+
+    isNodeMarked(elementBounds: Bounds): boolean {
+        const horizontallyIn =
+            this.startPoint.x < this.currentPoint.x
+                ? this.isElementBetweenXAxis(elementBounds, this.startPoint.x, this.currentPoint.x)
+                : this.isElementBetweenXAxis(elementBounds, this.currentPoint.x, this.startPoint.x);
+        const verticallyIn =
+            this.startPoint.y < this.currentPoint.y
+                ? this.isElementBetweenYAxis(elementBounds, this.startPoint.y, this.currentPoint.y)
+                : this.isElementBetweenYAxis(elementBounds, this.currentPoint.y, this.startPoint.y);
+        return horizontallyIn && verticallyIn;
+    }
+
+    private isEntireEdgeMarked(points: Point[]): boolean {
+        for (let i = 0; i < points.length; i++) {
+            if (!this.pointInRect(points[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private isPartOfEdgeMarked(points: Point[]): boolean {
+        for (let i = 0; i < points.length - 1; i++) {
+            if (this.isLineMarked(points[i], points[i + 1])) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private isLineMarked(point1: Point, point2: Point): boolean {
+        const line = new PointToPointLine(point1, point2);
+        return (
+            this.pointInRect(point1) ||
+            this.pointInRect(point2) ||
+            this.lineIntersect(line, this.startPoint, { x: this.startPoint.x, y: this.currentPoint.y }) ||
+            this.lineIntersect(line, this.startPoint, { x: this.currentPoint.x, y: this.startPoint.y }) ||
+            this.lineIntersect(line, { x: this.currentPoint.x, y: this.startPoint.y }, this.currentPoint) ||
+            this.lineIntersect(line, { x: this.startPoint.x, y: this.currentPoint.y }, this.currentPoint)
+        );
+    }
+
+    private lineIntersect(line: PointToPointLine, p1: Point, p2: Point): boolean {
+        return line.intersection(new PointToPointLine(p1, p2)) !== undefined;
+    }
+
+    private 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;
+    }
+
+    private isElementBetweenXAxis(elementBounds: Bounds, marqueeLeft: number, marqueeRight: number): boolean {
+        const leftEdge = this.isBetween(elementBounds.x, marqueeLeft, marqueeRight);
+        const rightEdge = this.isBetween(elementBounds.x + elementBounds.width, marqueeLeft, marqueeRight);
+        if (this.marqueeBehavior.entireElement) {
+            return leftEdge && rightEdge;
+        }
+        return (
+            leftEdge ||
+            rightEdge ||
+            this.isBetween(marqueeLeft, elementBounds.x, elementBounds.x + elementBounds.width) ||
+            this.isBetween(marqueeRight, elementBounds.x, elementBounds.x + elementBounds.width)
+        );
+    }
+
+    private isElementBetweenYAxis(elementBounds: Bounds, marqueeTop: number, marqueeBottom: number): boolean {
+        const topEdge = this.isBetween(elementBounds.y, marqueeTop, marqueeBottom);
+        const bottomEdge = this.isBetween(elementBounds.y + elementBounds.height, marqueeTop, marqueeBottom);
+        if (this.marqueeBehavior.entireElement) {
+            return topEdge && bottomEdge;
+        }
+        return (
+            topEdge ||
+            bottomEdge ||
+            this.isBetween(marqueeTop, elementBounds.y, elementBounds.y + elementBounds.height) ||
+            this.isBetween(marqueeBottom, elementBounds.y, elementBounds.y + elementBounds.height)
+        );
+    }
+
+    private isBetween(x: number, lower: number, upper: number): boolean {
+        return lower <= x && x <= upper;
+    }
+}

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

@@ -13,34 +13,35 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable } from 'inversify';
+import { Action, SelectAction } from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
 import {
-    Action,
     BoundsAware,
     EnableDefaultToolsAction,
     isSelectable,
     isSelected,
     KeyListener,
-    Point,
     SEdge,
-    SelectAction,
     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 { DrawMarqueeAction, RemoveMarqueeAction } from '../tool-feedback/marquee-tool-feedback';
-import { BaseGLSPTool } from '../tools/base-glsp-tool';
+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';
 
     @inject(TYPES.DOMHelper) protected domHelper: DOMHelper;
+    @inject(GLSP_TYPES.IMarqueeBehavior) @optional() protected marqueeBehavior: IMarqueeBehavior;
 
     protected marqueeMouseListener: MarqueeMouseListener;
     protected shiftKeyListener: ShiftKeyListener = new ShiftKeyListener();
@@ -50,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)]);
@@ -63,51 +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;
 
-    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 };
-        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));
+        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.root.index.all().map(e => e.id))),
                 new SelectAction(selected.concat(this.previouslySelected), []),
-                new DrawMarqueeAction(this.startPoint,
-                    { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y })
+                this.marqueeUtil.drawMarqueeAction()
             ];
         }
         return [];
@@ -121,120 +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')) {
             if (element.children[0]) {
                 const path = element.children[0].getAttribute('d');
-                if (path) {
-                    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], 10), y: parseInt(coord1[1], 10) };
-                        const point2 = { x: parseInt(coord2[0], 10), y: parseInt(coord2[1], 10) };
-                        if (this.isLineMarked(point1, point2)) {
-                            return true;
-                        }
-                    }
-                }
+                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,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, EnableToolsAction, KeyListener, KeyTool, SModelElement } from 'sprotty';
-
+import { EnableToolsAction, KeyListener, KeyTool, SModelElement } from 'sprotty';
 import { BaseGLSPTool } from '../tools/base-glsp-tool';
 import { MarqueeMouseTool } from './marquee-mouse-tool';
 
@@ -42,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/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 { Action, CreateNodeOperation, isTriggerNodeCreationAction, TriggerNodeCreationAction } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
 import {
-    Action,
     EnableDefaultToolsAction,
     EnableToolsAction,
     findParentByFeature,
@@ -26,13 +26,7 @@ import {
     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';
@@ -75,7 +69,6 @@ export class NodeCreationTool extends BaseGLSPTool implements IActionHandler {
 
 @injectable()
 export class NodeCreationToolMouseListener extends DragAwareMouseListener {
-
     protected container?: SModelElement & Containable;
 
     constructor(protected triggerAction: TriggerNodeCreationAction, protected tool: NodeCreationTool) {
@@ -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

@@ -14,26 +14,31 @@
  * 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 { VNode } from 'snabbdom/vnode';
-import { RectangularNodeView, RenderingContext } from 'sprotty';
+import { VNode } from 'snabbdom';
+import { RectangularNodeView, RenderingContext, svg } from 'sprotty';
 
 import { MarqueeNode } from './model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+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/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,10 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Marker, MarkerKind } from '@eclipse-glsp/protocol';
 import { SDecoration, SIssue, SIssueMarker, SParentElement } from 'sprotty';
 
-import { Marker, MarkerKind } from '../../utils/marker';
-
 export class GIssueMarker extends SIssueMarker {
     constructor() {
         super();

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
@@ -14,11 +14,10 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /* eslint-disable import/no-deprecated,no-unused-expressions */
-import 'mocha';
-import 'reflect-metadata';
-
 import { expect } from 'chai';
 import { Container } from 'inversify';
+import 'mocha';
+import 'reflect-metadata';
 import {
     BoundsAware,
     decorationModule,
@@ -30,10 +29,9 @@ import {
     SNodeSchema,
     SParentElement,
     TYPES
-} from 'sprotty/lib';
+} 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';
 
@@ -45,7 +43,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 +54,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 +174,6 @@ describe('MarkerNavigator', () => {
         expect(found4).to.eql(marker2);
         expect(found5).to.eql(marker1);
     });
-
 });
 
 function clearMarker(elem: SParentElement): void {
@@ -204,4 +209,3 @@ function createMarker(elem: SParentElement): SIssueMarker {
     elem.add(newMarker);
     return newMarker;
 }
-