@eclipse-glsp/client 0.10.0-next.ca17587.154 → 1.1.0-RC01

package/src/features/tools/edge-creation-tool.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-2022 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,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, CreateEdgeOperation, isTriggerElementTypeCreationAction, TriggerEdgeCreationAction } from '@eclipse-glsp/protocol';
+import { Action, CreateEdgeOperation, TriggerEdgeCreationAction } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
     AnchorComputerRegistry,
@@ -66,13 +66,13 @@ export class EdgeCreationTool extends BaseGLSPTool implements IActionHandler {
     disable(): void {
         this.mouseTool.deregister(this.creationToolMouseListener);
         this.mouseTool.deregister(this.feedbackEndMovingMouseListener);
-        this.deregisterFeedback([new RemoveFeedbackEdgeAction(), cursorFeedbackAction()]);
+        this.deregisterFeedback([RemoveFeedbackEdgeAction.create(), cursorFeedbackAction()]);
     }
 
     handle(action: Action): Action | void {
-        if (isTriggerElementTypeCreationAction(action)) {
+        if (TriggerEdgeCreationAction.is(action)) {
             this.triggerAction = action;
-            return new EnableToolsAction([this.id]);
+            return EnableToolsAction.create([this.id]);
         }
     }
 }
@@ -96,16 +96,18 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
         this.target = undefined;
         this.currentTarget = undefined;
         this.allowedTarget = false;
-        this.tool.dispatchFeedback([new RemoveFeedbackEdgeAction()]);
+        this.tool.dispatchFeedback([RemoveFeedbackEdgeAction.create()]);
     }
 
-    nonDraggingMouseUp(_element: SModelElement, event: MouseEvent): Action[] {
+    override nonDraggingMouseUp(_element: SModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
         if (event.button === 0) {
             if (!this.isSourceSelected()) {
                 if (this.currentTarget && this.allowedTarget) {
                     this.source = this.currentTarget.id;
-                    this.tool.dispatchFeedback([new DrawFeedbackEdgeAction(this.triggerAction.elementTypeId, this.source)]);
+                    this.tool.dispatchFeedback([
+                        DrawFeedbackEdgeAction.create({ elementTypeId: this.triggerAction.elementTypeId, sourceId: this.source })
+                    ]);
                 }
             } else {
                 if (this.currentTarget && this.allowedTarget) {
@@ -113,15 +115,22 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
                 }
             }
             if (this.source && this.target) {
-                result.push(new CreateEdgeOperation(this.triggerAction.elementTypeId, this.source, this.target, this.triggerAction.args));
+                result.push(
+                    CreateEdgeOperation.create({
+                        elementTypeId: this.triggerAction.elementTypeId,
+                        sourceElementId: this.source,
+                        targetElementId: this.target,
+                        args: this.triggerAction.args
+                    })
+                );
                 if (!isCtrlOrCmd(event)) {
-                    result.push(new EnableDefaultToolsAction());
+                    result.push(EnableDefaultToolsAction.create());
                 } else {
                     this.reinitialize();
                 }
             }
         } else if (event.button === 2) {
-            result.push(new EnableDefaultToolsAction());
+            result.push(EnableDefaultToolsAction.create());
         }
         return result;
     }
@@ -134,7 +143,7 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
         return this.target !== undefined;
     }
 
-    mouseOver(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseOver(target: SModelElement, event: MouseEvent): Action[] {
         const newCurrentTarget = findParentByFeature(target, isConnectable);
         if (newCurrentTarget !== this.currentTarget) {
             this.currentTarget = newCurrentTarget;

package/src/features/tools/edge-edit-tool.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-2022 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
@@ -22,6 +22,7 @@ import {
     EdgeRouterRegistry,
     findParentByFeature,
     isConnectable,
+    ISnapper,
     isSelected,
     SModelElement,
     SModelRoot,
@@ -29,7 +30,7 @@ import {
     SRoutingHandle
 } from 'sprotty';
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import { GLSP_TYPES } from '../../base/types';
+import { TYPES } from '../../base/types';
 import { isRoutable, isRoutingHandle } from '../../utils/smodel-util';
 import { isReconnectable, isReconnectHandle, isSourceRoutingHandle, isTargetRoutingHandle, SReconnectHandle } from '../reconnect/model';
 import { SelectionListener, SelectionService } from '../select/selection-service';
@@ -50,9 +51,10 @@ import { BaseGLSPTool } from './base-glsp-tool';
 export class EdgeEditTool extends BaseGLSPTool {
     static ID = 'glsp.edge-edit-tool';
 
-    @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService;
+    @inject(TYPES.SelectionService) protected selectionService: SelectionService;
     @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
     @inject(EdgeRouterRegistry) @optional() protected edgeRouterRegistry?: EdgeRouterRegistry;
+    @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
 
     protected feedbackEdgeSourceMovingListener: FeedbackEdgeSourceMovingMouseListener;
     protected feedbackEdgeTargetMovingListener: FeedbackEdgeTargetMovingMouseListener;
@@ -71,7 +73,7 @@ export class EdgeEditTool extends BaseGLSPTool {
         // install feedback move mouse listener for client-side move updates
         this.feedbackEdgeSourceMovingListener = new FeedbackEdgeSourceMovingMouseListener(this.anchorRegistry);
         this.feedbackEdgeTargetMovingListener = new FeedbackEdgeTargetMovingMouseListener(this.anchorRegistry);
-        this.feedbackMovingListener = new FeedbackEdgeRouteMovingMouseListener(this.edgeRouterRegistry);
+        this.feedbackMovingListener = new FeedbackEdgeRouteMovingMouseListener(this.edgeRouterRegistry, this.snapper);
     }
 
     registerFeedbackListeners(): void {
@@ -123,10 +125,10 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         // note: order is important here as we want the reconnect handles to cover the routing handles
         const feedbackActions = [];
         if (canEditRouting(edge)) {
-            feedbackActions.push(new SwitchRoutingModeAction([this.edge.id], []));
+            feedbackActions.push(SwitchRoutingModeAction.create({ elementsToActivate: [this.edge.id] }));
         }
         if (isReconnectable(edge)) {
-            feedbackActions.push(new ShowEdgeReconnectHandlesFeedbackAction(this.edge.id));
+            feedbackActions.push(ShowEdgeReconnectHandlesFeedbackAction.create(this.edge.id));
         }
         this.tool.dispatchFeedback(feedbackActions);
     }
@@ -139,16 +141,16 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         if (this.edge && this.edge.target && this.edge.source) {
             if (isSourceRoutingHandle(edge, reconnectHandle)) {
                 this.tool.dispatchFeedback([
-                    new HideEdgeReconnectHandlesFeedbackAction(),
+                    HideEdgeReconnectHandlesFeedbackAction.create(),
                     cursorFeedbackAction(CursorCSS.EDGE_RECONNECT),
-                    new DrawFeedbackEdgeSourceAction(this.edge.type, this.edge.targetId)
+                    DrawFeedbackEdgeSourceAction.create({ elementTypeId: this.edge.type, targetId: this.edge.targetId })
                 ]);
                 this.reconnectMode = 'NEW_SOURCE';
             } else if (isTargetRoutingHandle(edge, reconnectHandle)) {
                 this.tool.dispatchFeedback([
-                    new HideEdgeReconnectHandlesFeedbackAction(),
+                    HideEdgeReconnectHandlesFeedbackAction.create(),
                     cursorFeedbackAction(CursorCSS.EDGE_CREATION_TARGET),
-                    new DrawFeedbackEdgeAction(this.edge.type, this.edge.sourceId)
+                    DrawFeedbackEdgeAction.create({ elementTypeId: this.edge.type, sourceId: this.edge.sourceId })
                 ]);
                 this.reconnectMode = 'NEW_TARGET';
             }
@@ -185,7 +187,7 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         return this.routingHandle !== undefined;
     }
 
-    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
         const result: Action[] = super.mouseDown(target, event);
         if (event.button === 0) {
             const reconnectHandle = findParentByFeature(target, isReconnectHandle);
@@ -208,7 +210,7 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         return result;
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         const result = super.mouseMove(target, event);
         if (this.isMouseDrag) {
             // reset any selected connectables when we are dragging, maybe the user is just panning
@@ -217,17 +219,17 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         return result;
     }
 
-    mouseUp(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseUp(target: SModelElement, event: MouseEvent): Action[] {
         const result = super.mouseUp(target, event);
         if (!this.isReadyToReconnect() && !this.isReadyToReroute()) {
             return result;
         }
 
         if (this.edge && this.newConnectable) {
-            const sourceId = this.isReconnectingNewSource() ? this.newConnectable.id : this.edge.sourceId;
-            const targetId = this.isReconnectingNewSource() ? this.edge.targetId : this.newConnectable.id;
-            if (this.requiresReconnect(sourceId, targetId)) {
-                result.push(new ReconnectEdgeOperation(this.edge.id, sourceId, targetId));
+            const sourceElementId = this.isReconnectingNewSource() ? this.newConnectable.id : this.edge.sourceId;
+            const targetElementId = this.isReconnectingNewSource() ? this.edge.targetId : this.newConnectable.id;
+            if (this.requiresReconnect(sourceElementId, targetElementId)) {
+                result.push(ReconnectEdgeOperation.create({ edgeElementId: this.edge.id, sourceElementId, targetElementId }));
             }
             this.reset();
         } else if (this.edge && this.routingHandle) {
@@ -235,14 +237,16 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
             // reroute actions
             const latestEdge = target.index.getById(this.edge.id);
             if (latestEdge && isRoutable(latestEdge)) {
-                result.push(new ChangeRoutingPointsOperation([{ elementId: latestEdge.id, newRoutingPoints: latestEdge.routingPoints }]));
+                result.push(
+                    ChangeRoutingPointsOperation.create([{ elementId: latestEdge.id, newRoutingPoints: latestEdge.routingPoints }])
+                );
                 this.routingHandle = undefined;
             }
         }
         return result;
     }
 
-    mouseOver(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseOver(target: SModelElement, event: MouseEvent): Action[] {
         if (this.edge && this.isReconnecting()) {
             const currentTarget = findParentByFeature(target, isConnectable);
             if (!this.newConnectable || currentTarget !== this.newConnectable) {
@@ -306,9 +310,9 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
     protected resetFeedback(): void {
         const result: Action[] = [];
         if (this.edge) {
-            result.push(new SwitchRoutingModeAction([], [this.edge.id]));
+            result.push(SwitchRoutingModeAction.create({ elementsToDeactivate: [this.edge.id] }));
         }
-        result.push(...[new HideEdgeReconnectHandlesFeedbackAction(), cursorFeedbackAction(), new RemoveFeedbackEdgeAction()]);
+        result.push(...[HideEdgeReconnectHandlesFeedbackAction.create(), cursorFeedbackAction(), RemoveFeedbackEdgeAction.create()]);
         this.tool.deregisterFeedback(result);
         this.tool.deregisterFeedbackListeners();
     }

package/src/features/tools/enable-default-tools-on-focus-loss.ts

@@ -0,0 +1,33 @@
+/********************************************************************************
+ * Copyright (c) 2022 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 { Action } from '@eclipse-glsp/protocol';
+import { injectable } from 'inversify';
+import { EnableDefaultToolsAction, IActionHandler, ICommand } from 'sprotty';
+import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
+
+/**
+ * Action handler that enables the default tools when the diagram lost focus.
+ * @see FocusTracker
+ * @see FocusStateChangedAction
+ */
+@injectable()
+export class EnableDefaultToolsOnFocusLossHandler implements IActionHandler {
+    handle(action: Action): void | Action | ICommand {
+        if (FocusStateChangedAction.is(action) && !action.hasFocus) {
+            return EnableDefaultToolsAction.create();
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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,7 @@ export class MarqueeUtil {
     }
 
     drawMarqueeAction(): DrawMarqueeAction {
-        return new DrawMarqueeAction(this.startPoint, this.currentPoint);
+        return DrawMarqueeAction.create({ startPoint: this.startPoint, endPoint: this.currentPoint });
     }
 
     isEdgePathMarked(path: string | null): boolean {

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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
@@ -24,12 +24,11 @@ import {
     SEdge,
     SModelElement,
     SModelRoot,
-    SNode,
-    TYPES
+    SNode
 } 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 { TYPES } from '../../base/types';
 import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
 import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
 import { RemoveMarqueeAction } from '../tool-feedback/marquee-tool-feedback';
@@ -41,7 +40,7 @@ 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;
+    @inject(TYPES.IMarqueeBehavior) @optional() protected marqueeBehavior: IMarqueeBehavior;
 
     protected marqueeMouseListener: MarqueeMouseListener;
     protected shiftKeyListener: ShiftKeyListener = new ShiftKeyListener();
@@ -93,7 +92,7 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
         this.edges = Array.from(document.querySelectorAll('g')).filter(e => sEdges.includes(this.domHelper.findSModelIdByDOMElement(e)));
     }
 
-    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
         this.isActive = true;
         this.marqueeUtil.updateStartPoint(getAbsolutePosition(target, event));
         if (event.ctrlKey) {
@@ -108,27 +107,27 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
         return [];
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         this.marqueeUtil.updateCurrentPoint(getAbsolutePosition(target, event));
         if (this.isActive) {
             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), []),
+                SelectAction.create({ deselectedElementsIDs: Array.from(target.root.index.all().map(e => e.id)) }),
+                SelectAction.create({ selectedElementsIDs: selected.concat(this.previouslySelected) }),
                 this.marqueeUtil.drawMarqueeAction()
             ];
         }
         return [];
     }
 
-    mouseUp(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseUp(target: SModelElement, event: MouseEvent): Action[] {
         this.isActive = false;
         if (event.shiftKey) {
-            return [new RemoveMarqueeAction()];
+            return [RemoveMarqueeAction.create()];
         }
-        return [new RemoveMarqueeAction(), new EnableDefaultToolsAction()];
+        return [RemoveMarqueeAction.create(), EnableDefaultToolsAction.create()];
     }
 
     isEdgeMarked(element: SVGElement): boolean {
@@ -144,10 +143,10 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
 
 @injectable()
 export class ShiftKeyListener extends KeyListener {
-    keyUp(element: SModelElement, event: KeyboardEvent): Action[] {
+    override keyUp(element: SModelElement, event: KeyboardEvent): Action[] {
         if (event.shiftKey) {
             return [];
         }
-        return [new RemoveMarqueeAction(), new EnableDefaultToolsAction()];
+        return [RemoveMarqueeAction.create(), EnableDefaultToolsAction.create()];
     }
 }

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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
@@ -42,9 +42,9 @@ export class MarqueeTool extends BaseGLSPTool {
 
 @injectable()
 export class MarqueeKeyListener extends KeyListener {
-    keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
+    override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
         if (event.shiftKey) {
-            return [new EnableToolsAction([MarqueeMouseTool.ID])];
+            return [EnableToolsAction.create([MarqueeMouseTool.ID])];
         }
         return [];
     }

package/src/features/tools/model.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { boundsFeature, Point, RectangularNode } from 'sprotty';
+import { Point } from '@eclipse-glsp/protocol';
+import { boundsFeature, RectangularNode } from 'sprotty';
 
 export class MarqueeNode extends RectangularNode {
-    static readonly DEFAULT_FEATURES = [boundsFeature];
+    static override readonly DEFAULT_FEATURES = [boundsFeature];
     startPoint: Point;
     endPoint: Point;
 }

package/src/features/tools/node-creation-tool.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2021 EclipseSource and others.
+ * Copyright (c) 2020-2022 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,7 +13,7 @@
  *
  * 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 { Action, CreateNodeOperation, TriggerNodeCreationAction } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
 import {
     EnableDefaultToolsAction,
@@ -60,9 +60,9 @@ export class NodeCreationTool extends BaseGLSPTool implements IActionHandler {
     }
 
     handle(action: Action): Action | void {
-        if (isTriggerNodeCreationAction(action)) {
+        if (TriggerNodeCreationAction.is(action)) {
             this.triggerAction = action;
-            return new EnableToolsAction([this.id]);
+            return EnableToolsAction.create([this.id]);
         }
     }
 }
@@ -83,7 +83,7 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
         return this.triggerAction.elementTypeId;
     }
 
-    nonDraggingMouseUp(target: SModelElement, event: MouseEvent): Action[] {
+    override nonDraggingMouseUp(target: SModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
         if (this.creationAllowed(this.elementTypeId)) {
             const containerId = this.container ? this.container.id : undefined;
@@ -94,15 +94,15 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
                 elementProxy.size = { width: 0, height: 0 };
                 location = this.tool.snapper.snap(location, elementProxy);
             }
-            result.push(new CreateNodeOperation(this.elementTypeId, location, containerId, this.triggerAction.args));
+            result.push(CreateNodeOperation.create(this.elementTypeId, { location, containerId, args: this.triggerAction.args }));
             if (!isCtrlOrCmd(event)) {
-                result.push(new EnableDefaultToolsAction());
+                result.push(EnableDefaultToolsAction.create());
             }
         }
         return result;
     }
 
-    mouseOver(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseOver(target: SModelElement, event: MouseEvent): Action[] {
         const currentContainer = findParentByFeature(target, isContainable);
         if (!this.container || currentContainer !== this.container) {
             this.container = currentContainer;

package/src/features/tools/view.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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
@@ -16,7 +16,6 @@
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import { RectangularNodeView, RenderingContext, svg } from 'sprotty';
-
 import { MarqueeNode } from './model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -24,7 +23,7 @@ const JSX = { createElement: svg };
 
 @injectable()
 export class MarqueeView extends RectangularNodeView {
-    render(node: MarqueeNode, context: RenderingContext): VNode {
+    override render(node: MarqueeNode, context: RenderingContext): VNode {
         const graph = (
             <g>
                 <rect

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2022 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,31 +13,33 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { SetMarkersAction } from '@eclipse-glsp/protocol';
 import { ContainerModule } from 'inversify';
-import { configureCommand, TYPES } from 'sprotty';
-
-import { GLSP_TYPES } from '../../base/types';
+import { configureActionHandler, configureCommand } from 'sprotty';
+import { TYPES } from '../../base/types';
 import {
     LeftToRightTopToBottomComparator,
     MarkerNavigator,
     MarkerNavigatorContextMenuItemProvider,
     MarkerNavigatorKeyListener,
-    NavigateToMarkerCommand,
+    NavigateToMarkerAction,
+    NavigateToMarkerActionHandler,
     SModelElementComparator
 } from './marker-navigator';
-import { ApplyMarkersCommand, DeleteMarkersCommand, SetMarkersCommand, ValidationFeedbackEmitter } from './validate';
+import { ApplyMarkersCommand, DeleteMarkersCommand, SetMarkersActionHandler, ValidationFeedbackEmitter } from './validate';
 
 export const validationModule = new ContainerModule((bind, _unbind, isBound) => {
-    configureCommand({ bind, isBound }, SetMarkersCommand);
-    configureCommand({ bind, isBound }, ApplyMarkersCommand);
-    configureCommand({ bind, isBound }, DeleteMarkersCommand);
+    const context = { bind, isBound };
+    configureActionHandler(context, SetMarkersAction.KIND, SetMarkersActionHandler);
+    configureCommand(context, ApplyMarkersCommand);
+    configureCommand(context, DeleteMarkersCommand);
     bind(ValidationFeedbackEmitter).toSelf().inSingletonScope();
 });
 
 export const markerNavigatorModule = new ContainerModule((bind, _unbind, isBound) => {
     bind(SModelElementComparator).to(LeftToRightTopToBottomComparator).inSingletonScope();
     bind(MarkerNavigator).toSelf().inSingletonScope();
-    configureCommand({ bind, isBound }, NavigateToMarkerCommand);
+    configureActionHandler({ bind, isBound }, NavigateToMarkerAction.KIND, NavigateToMarkerActionHandler);
 });
 
 /**
@@ -46,6 +48,6 @@ export const markerNavigatorModule = new ContainerModule((bind, _unbind, isBound
  * `registerMarkerNavigationCommands()` in `glsp-theia-integration` instead.
  */
 export const markerNavigatorContextMenuModule = new ContainerModule((bind, _unbind, isBound) => {
-    bind(GLSP_TYPES.IContextMenuProvider).to(MarkerNavigatorContextMenuItemProvider).inSingletonScope();
+    bind(TYPES.IContextMenuProvider).to(MarkerNavigatorContextMenuItemProvider).inSingletonScope();
     bind(TYPES.KeyListener).to(MarkerNavigatorKeyListener).inSingletonScope();
 });

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

@@ -13,14 +13,23 @@
  *
  * 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 { Bounds, Marker, MarkerKind } from '@eclipse-glsp/protocol';
+import { isBoundsAware, Projectable, SDecoration, SIssue, SIssueMarker, SIssueSeverity, SParentElement } from 'sprotty';
 
-export class GIssueMarker extends SIssueMarker {
+export class GIssueMarker extends SIssueMarker implements Projectable {
     constructor() {
         super();
         this.features = new Set<symbol>(SDecoration.DEFAULT_FEATURES);
     }
+    projectionCssClasses: string[];
+    projectedBounds?: Bounds;
+    override issues: SIssue[] = [];
+    override type = 'marker';
+
+    computeProjectionCssClasses(): void {
+        const severityCss = getSeverity(this);
+        this.projectionCssClasses = ['sprotty-issue', 'sprotty-' + severityCss];
+    }
 }
 
 /**
@@ -31,14 +40,15 @@ export class GIssueMarker extends SIssueMarker {
  * @returns the child `SIssueMarker` or a new `SIssueMarker` if no such child exists.
  */
 export function getOrCreateSIssueMarker(modelElement: SParentElement): SIssueMarker {
-    let issueMarker: SIssueMarker | undefined;
+    let issueMarker: GIssueMarker | undefined;
 
     issueMarker = getSIssueMarker(modelElement);
 
     if (issueMarker === undefined) {
         issueMarker = new GIssueMarker();
-        issueMarker.type = 'marker';
-        issueMarker.issues = new Array<SIssue>();
+        if (isBoundsAware(modelElement)) {
+            issueMarker.projectedBounds = modelElement.parentToLocal(modelElement.bounds);
+        }
         modelElement.add(issueMarker);
     }
 
@@ -51,11 +61,11 @@ export function getOrCreateSIssueMarker(modelElement: SParentElement): SIssueMar
  * @param modelElement for which the `SIssueMarker` should be retrieved.
  * @returns the child `SIssueMarker` or `undefined` if no such child exists.
  */
-export function getSIssueMarker(modelElement: SParentElement): SIssueMarker | undefined {
-    let issueMarker: SIssueMarker | undefined;
+export function getSIssueMarker(modelElement: SParentElement): GIssueMarker | undefined {
+    let issueMarker: GIssueMarker | undefined;
 
     for (const child of modelElement.children) {
-        if (child instanceof SIssueMarker) {
+        if (child instanceof GIssueMarker) {
             issueMarker = child;
         }
     }
@@ -69,8 +79,8 @@ export function getSIssueMarker(modelElement: SParentElement): SIssueMarker | un
  * @param marker `Marker` for that an `SIssue` should be created.
  * @returns the created `SIssue`.
  */
-export function createSIssue(marker: Marker): SIssue {
-    const issue: SIssue = new SIssue();
+export function createSIssue(marker: Marker, parent?: SParentElement): SIssue {
+    const issue = new SIssue();
     issue.message = marker.description;
 
     switch (marker.kind) {
@@ -87,6 +97,18 @@ export function createSIssue(marker: Marker): SIssue {
             break;
         }
     }
-
     return issue;
 }
+
+export function getSeverity(marker: SIssueMarker): SIssueSeverity {
+    let currentSeverity: SIssueSeverity = 'info';
+    for (const severity of marker.issues.map(s => s.severity)) {
+        if (severity === 'error') {
+            return severity;
+        }
+        if (severity === 'warning' && currentSeverity === 'info') {
+            currentSeverity = severity;
+        }
+    }
+    return currentSeverity;
+}