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

package/src/features/tool-palette/tool-palette.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,11 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { isSetContextActionsAction, RequestContextActions, RequestMarkersAction, SetContextActions } from '@eclipse-glsp/protocol';
+import { Action, PaletteItem, RequestContextActions, RequestMarkersAction, SetContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable, postConstruct } from 'inversify';
 import {
     AbstractUIExtension,
-    Action,
     EnableDefaultToolsAction,
     EnableToolsAction,
     IActionHandler,
@@ -33,7 +32,6 @@ import { GLSPActionDispatcher } from '../../base/action-dispatcher';
 import { EditModeListener, EditorContextService } from '../../base/editor-context-service';
 import { MouseDeleteTool } from '../tools/delete-tool';
 import { MarqueeMouseTool } from '../tools/marquee-mouse-tool';
-import { PaletteItem } from './palette-item';
 
 const CLICKED_CSS_CLASS = 'clicked';
 const SEARCH_ICON_ID = 'search';
@@ -41,12 +39,21 @@ const PALETTE_ICON_ID = 'symbol-color';
 const CHEVRON_DOWN_ICON_ID = 'chevron-right';
 const PALETTE_HEIGHT = '500px';
 
-@injectable()
-export class EnableToolPaletteAction implements Action {
-    static readonly KIND = 'enableToolPalette';
-    readonly kind = EnableToolPaletteAction.KIND;
+export interface EnableToolPaletteAction extends Action {
+    kind: typeof EnableToolPaletteAction.KIND;
 }
 
+export namespace EnableToolPaletteAction {
+    export const KIND = 'enableToolPalette';
+
+    export function is(object: any): object is EnableToolPaletteAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(): EnableToolPaletteAction {
+        return { kind: KIND };
+    }
+}
 @injectable()
 export class ToolPalette extends AbstractUIExtension implements IActionHandler, EditModeListener {
     static readonly ID = 'tool-palette';
@@ -75,7 +82,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.editorContext.register(this);
     }
 
-    initialize(): boolean {
+    override initialize(): boolean {
         if (!this.paletteItems) {
             return false;
         }
@@ -88,7 +95,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.lastActivebutton = this.defaultToolsButton;
     }
 
-    protected onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>): void {
+    protected override onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>): void {
         this.modelRootId = root.id;
         this.containerElement.style.maxHeight = PALETTE_HEIGHT;
     }
@@ -215,7 +222,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         validateActionButton.title = 'Validate model';
         validateActionButton.onclick = _event => {
             const modelIds: string[] = [this.modelRootId];
-            this.actionDispatcher.dispatch(new RequestMarkersAction(modelIds));
+            this.actionDispatcher.dispatch(RequestMarkersAction.create(modelIds));
         };
         return validateActionButton;
     }
@@ -284,7 +291,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     protected onClickStaticToolButton(button: HTMLElement, toolId?: string) {
         return (_ev: MouseEvent) => {
             if (!this.editorContext.isReadonly) {
-                const action = toolId ? new EnableToolsAction([toolId]) : new EnableDefaultToolsAction();
+                const action = toolId ? EnableToolsAction.create([toolId]) : EnableDefaultToolsAction.create();
                 this.actionDispatcher.dispatch(action);
                 this.changeActiveButton(button);
                 button.focus();
@@ -307,23 +314,30 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
 
     handle(action: Action): ICommand | Action | void {
         if (action.kind === EnableToolPaletteAction.KIND) {
-            const requestAction = new RequestContextActions(ToolPalette.ID, {
-                selectedElementIds: []
+            const requestAction = RequestContextActions.create({
+                contextId: ToolPalette.ID,
+                editorContext: {
+                    selectedElementIds: []
+                }
             });
             this.actionDispatcher.requestUntil(requestAction).then(response => {
-                if (isSetContextActionsAction(response)) {
+                if (SetContextActions.is(response)) {
                     this.paletteItems = response.actions.map(e => e as PaletteItem);
-                    this.actionDispatcher.dispatch(new SetUIExtensionVisibilityAction(ToolPalette.ID, !this.editorContext.isReadonly));
+                    this.actionDispatcher.dispatch(
+                        SetUIExtensionVisibilityAction.create({ extensionId: ToolPalette.ID, visible: !this.editorContext.isReadonly })
+                    );
                 }
             });
-        } else if (action instanceof EnableDefaultToolsAction) {
+        } else if (action.kind === EnableDefaultToolsAction.KIND) {
             this.changeActiveButton();
             this.restoreFocus();
         }
     }
 
     editModeChanged(_oldValue: string, _newValue: string): void {
-        this.actionDispatcher.dispatch(new SetUIExtensionVisibilityAction(ToolPalette.ID, !this.editorContext.isReadonly));
+        this.actionDispatcher.dispatch(
+            SetUIExtensionVisibilityAction.create({ extensionId: ToolPalette.ID, visible: !this.editorContext.isReadonly })
+        );
     }
 
     protected clearOnEscape(event: KeyboardEvent): void {
@@ -335,7 +349,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
 
     protected clearToolOnEscape(event: KeyboardEvent): void {
         if (matchesKeystroke(event, 'Escape')) {
-            this.actionDispatcher.dispatch(new EnableDefaultToolsAction());
+            this.actionDispatcher.dispatch(EnableDefaultToolsAction.create());
         }
     }
 
@@ -410,10 +424,12 @@ export function createToolGroup(item: PaletteItem): HTMLElement {
 }
 
 export function changeCSSClass(element: Element, css: string): void {
+    // eslint-disable-next-line chai-friendly/no-unused-expressions
     element.classList.contains(css) ? element.classList.remove(css) : element.classList.add(css);
 }
 
 export function changeCodiconClass(element: Element, codiconId: string): void {
+    // eslint-disable-next-line chai-friendly/no-unused-expressions
     element.classList.contains(codiconCSSClasses(codiconId)[1])
         ? element.classList.remove(codiconCSSClasses(codiconId)[1])
         : element.classList.add(codiconCSSClasses(codiconId)[1]);

package/src/features/tools/base-glsp-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
@@ -15,18 +15,18 @@
  ********************************************************************************/
 import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { IActionDispatcher, KeyTool, TYPES } from 'sprotty';
+import { IActionDispatcher, KeyTool } from 'sprotty';
 import { EditorContextService } from '../../base/editor-context-service';
 import { GLSPTool } from '../../base/tool-manager/glsp-tool-manager';
-import { GLSP_TYPES } from '../../base/types';
+import { TYPES } from '../../base/types';
 import { IMouseTool } from '../mouse-tool/mouse-tool';
 import { IFeedbackActionDispatcher, IFeedbackEmitter } from '../tool-feedback/feedback-action-dispatcher';
 
 @injectable()
 export abstract class BaseGLSPTool implements GLSPTool {
-    @inject(GLSP_TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
+    @inject(TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
     @inject(TYPES.IActionDispatcher) protected actionDispatcher: IActionDispatcher;
-    @inject(GLSP_TYPES.MouseTool) protected mouseTool: IMouseTool;
+    @inject(TYPES.MouseTool) protected mouseTool: IMouseTool;
     @inject(KeyTool) protected keyTool: KeyTool;
     @inject(EditorContextService) protected readonly editorContext: EditorContextService;
 
@@ -39,15 +39,15 @@ export abstract class BaseGLSPTool implements GLSPTool {
         return true;
     }
 
-    dispatchFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter): void {
-        this.feedbackDispatcher.registerFeedback(feedbackeEmitter ? feedbackeEmitter : this, actions);
-    }
-
     dispatchActions(actions: Action[]): void {
         this.actionDispatcher.dispatchAll(actions);
     }
 
-    deregisterFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter): void {
-        this.feedbackDispatcher.deregisterFeedback(feedbackeEmitter ? feedbackeEmitter : this, actions);
+    dispatchFeedback(actions: Action[], feedbackEmitter?: IFeedbackEmitter): void {
+        this.feedbackDispatcher.registerFeedback(feedbackEmitter ?? this, actions);
+    }
+
+    deregisterFeedback(actions: Action[], feedbackEmitter?: IFeedbackEmitter): void {
+        this.feedbackDispatcher.deregisterFeedback(feedbackEmitter ?? this, actions);
     }
 }

package/src/features/tools/change-bounds-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
@@ -19,32 +19,30 @@ import {
     ChangeBoundsOperation,
     ChangeRoutingPointsOperation,
     CompoundOperation,
+    Dimension,
+    ElementAndBounds,
     ElementAndRoutingPoints,
     Operation,
-    Point
+    Point,
+    SetBoundsAction
 } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
 import {
     BoundsAware,
-    Dimension,
     EdgeRouterRegistry,
-    ElementAndBounds,
     findParentByFeature,
     ISnapper,
     isSelected,
-    isViewport,
     MouseListener,
     SChildElement,
     SConnectableElement,
-    SetBoundsAction,
     SModelElement,
     SModelRoot,
-    SParentElement,
-    TYPES
+    SParentElement
 } from 'sprotty';
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import { GLSP_TYPES } from '../../base/types';
-import { isValidMove, isValidSize, WriteablePoint } from '../../utils/layout-utils';
+import { TYPES } from '../../base/types';
+import { isValidMove, isValidSize } from '../../utils/layout-utils';
 import {
     forEachElement,
     isNonRoutableSelectedMovableBoundsAware,
@@ -57,6 +55,7 @@ import {
     IMovementRestrictor,
     removeMovementRestrictionFeedback
 } from '../change-bounds/movement-restrictor';
+import { PointPositionUpdater } from '../change-bounds/snap';
 import { SelectionListener, SelectionService } from '../select/selection-service';
 import {
     FeedbackMoveMouseListener,
@@ -83,10 +82,10 @@ import { BaseGLSPTool } from './base-glsp-tool';
 export class ChangeBoundsTool extends BaseGLSPTool {
     static ID = 'glsp.change-bounds-tool';
 
-    @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService;
+    @inject(TYPES.SelectionService) protected selectionService: SelectionService;
     @inject(EdgeRouterRegistry) @optional() readonly edgeRouterRegistry?: EdgeRouterRegistry;
     @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
-    @inject(GLSP_TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor;
+    @inject(TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor;
     protected feedbackMoveMouseListener: MouseListener;
     protected changeBoundsListener: MouseListener & SelectionListener;
 
@@ -118,7 +117,7 @@ export class ChangeBoundsTool extends BaseGLSPTool {
         this.selectionService.deregister(this.changeBoundsListener);
         this.mouseTool.deregister(this.feedbackMoveMouseListener);
         this.deregisterFeedback([], this.feedbackMoveMouseListener);
-        this.deregisterFeedback([new HideChangeBoundsToolResizeFeedbackAction()], this.changeBoundsListener);
+        this.deregisterFeedback([HideChangeBoundsToolResizeFeedbackAction.create()], this.changeBoundsListener);
     }
 }
 
@@ -127,8 +126,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
 
     // members for calculating the correct position change
     protected initialBounds: Bounds | undefined;
-    protected lastDragPosition?: Point;
-    protected positionDelta: WriteablePoint = { x: 0, y: 0 };
+    protected pointPositionUpdater: PointPositionUpdater;
 
     // members for resize mode
     protected activeResizeElement?: SModelElement;
@@ -136,11 +134,14 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
 
     constructor(protected tool: ChangeBoundsTool) {
         super();
+        this.pointPositionUpdater = new PointPositionUpdater(tool.snapper);
     }
 
-    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
         super.mouseDown(target, event);
-        if (event.button !== 0) {
+        // If another button than the left mouse button was clicked or we are
+        // still on the root element we don't need to execute the tool behavior
+        if (event.button !== 0 || target instanceof SModelRoot) {
             return [];
         }
         // check if we have a resize handle (only single-selection)
@@ -157,7 +158,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         return [];
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         super.mouseMove(target, event);
         if (this.isMouseDrag && this.activeResizeHandle) {
             // rely on the FeedbackMoveMouseListener to update the element bounds of selected elements
@@ -166,7 +167,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
                 cursorFeedbackAction(this.activeResizeHandle.isNwSeResize() ? CursorCSS.RESIZE_NWSE : CursorCSS.RESIZE_NESW),
                 applyCssClasses(this.activeResizeHandle, ChangeBoundsListener.CSS_CLASS_ACTIVE)
             ];
-            const positionUpdate = this.updatePosition(target, event);
+            const positionUpdate = this.pointPositionUpdater.updatePosition(target, { x: event.pageX, y: event.pageY }, !event.altKey);
             if (positionUpdate) {
                 const resizeActions = this.handleResizeOnClient(positionUpdate);
                 actions.push(...resizeActions);
@@ -176,8 +177,8 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         return [];
     }
 
-    draggingMouseUp(target: SModelElement, event: MouseEvent): Action[] {
-        if (this.lastDragPosition === undefined) {
+    override draggingMouseUp(target: SModelElement, event: MouseEvent): Action[] {
+        if (this.pointPositionUpdater.isLastDragPositionUndefined()) {
             this.resetPosition();
             return [];
         }
@@ -200,16 +201,16 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         operations.push(...this.handleMoveElementsOnServer(target));
         operations.push(...this.handleMoveRoutingPointsOnServer(target));
         if (operations.length > 0) {
-            return [new CompoundOperation(operations)];
+            return [CompoundOperation.create(operations)];
         }
         return operations;
     }
 
-    protected handleMoveElementsOnServer(target: SModelElement): Action[] {
+    protected handleMoveElementsOnServer(target: SModelElement): Operation[] {
         const result: Operation[] = [];
         const newBounds: ElementAndBounds[] = [];
         const selectedElements: (SModelElement & BoundsAware)[] = [];
-        forEachElement(target, isNonRoutableSelectedMovableBoundsAware, element => {
+        forEachElement(target.index, isNonRoutableSelectedMovableBoundsAware, element => {
             selectedElements.push(element);
         });
 
@@ -220,7 +221,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
             .forEach(bounds => newBounds.push(...bounds));
 
         if (newBounds.length > 0) {
-            result.push(new ChangeBoundsOperation(newBounds));
+            result.push(ChangeBoundsOperation.create(newBounds));
         }
         return result;
     }
@@ -235,10 +236,10 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         return false;
     }
 
-    protected handleMoveRoutingPointsOnServer(target: SModelElement): Action[] {
+    protected handleMoveRoutingPointsOnServer(target: SModelElement): Operation[] {
         const result: Operation[] = [];
         const newRoutingPoints: ElementAndRoutingPoints[] = [];
-        forEachElement(target, isNonRoutableSelectedMovableBoundsAware, element => {
+        forEachElement(target.index, isNonRoutableSelectedMovableBoundsAware, element => {
             //  If client routing is enabled -> delegate routingpoints of connected edges to server
             if (this.tool.edgeRouterRegistry && element instanceof SConnectableElement) {
                 element.incomingEdges.map(toElementAndRoutingPoints).forEach(ear => newRoutingPoints.push(ear));
@@ -246,7 +247,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
             }
         });
         if (newRoutingPoints.length > 0) {
-            result.push(new ChangeRoutingPointsOperation(newRoutingPoints));
+            result.push(ChangeRoutingPointsOperation.create(newRoutingPoints));
         }
         return result;
     }
@@ -287,7 +288,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
             // only allow one element to have the element resize handles
             this.activeResizeElement = moveableElement;
             if (isResizable(this.activeResizeElement)) {
-                this.tool.dispatchFeedback([new ShowChangeBoundsToolResizeFeedbackAction(this.activeResizeElement.id)], this);
+                this.tool.dispatchFeedback([ShowChangeBoundsToolResizeFeedbackAction.create(this.activeResizeElement.id)], this);
             }
             return true;
         }
@@ -299,7 +300,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
     }
 
     protected initPosition(event: MouseEvent): void {
-        this.lastDragPosition = { x: event.pageX, y: event.pageY };
+        this.pointPositionUpdater.updateLastDragPosition({ x: event.pageX, y: event.pageY });
         if (this.activeResizeHandle) {
             const resizeElement = findParentByFeature(this.activeResizeHandle, isResizable);
             this.initialBounds = {
@@ -311,39 +312,9 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         }
     }
 
-    protected updatePosition(target: SModelElement, event: MouseEvent): Point | undefined {
-        if (this.lastDragPosition) {
-            const newDragPosition = { x: event.pageX, y: event.pageY };
-
-            const viewport = findParentByFeature(target, isViewport);
-            const zoom = viewport ? viewport.zoom : 1;
-            const dx = (event.pageX - this.lastDragPosition.x) / zoom;
-            const dy = (event.pageY - this.lastDragPosition.y) / zoom;
-            const deltaToLastPosition = { x: dx, y: dy };
-            this.lastDragPosition = newDragPosition;
-
-            // update position delta with latest delta
-            this.positionDelta.x += deltaToLastPosition.x;
-            this.positionDelta.y += deltaToLastPosition.y;
-
-            // snap our delta and only send update if the position actually changes
-            // otherwise accumulate delta until we do snap to an update
-            const positionUpdate = this.snap(this.positionDelta, target, !event.altKey);
-            if (positionUpdate.x === 0 && positionUpdate.y === 0) {
-                return undefined;
-            }
-
-            // we update our position so we update our delta by the snapped position
-            this.positionDelta.x -= positionUpdate.x;
-            this.positionDelta.y -= positionUpdate.y;
-            return positionUpdate;
-        }
-        return undefined;
-    }
-
     protected reset(): void {
         if (this.activeResizeElement && isResizable(this.activeResizeElement)) {
-            this.tool.dispatchFeedback([new HideChangeBoundsToolResizeFeedbackAction()], this);
+            this.tool.dispatchFeedback([HideChangeBoundsToolResizeFeedbackAction.create()], this);
         }
         this.tool.dispatchActions([cursorFeedbackAction(CursorCSS.DEFAULT)]);
         this.resetPosition();
@@ -351,8 +322,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
 
     protected resetPosition(): void {
         this.activeResizeHandle = undefined;
-        this.lastDragPosition = undefined;
-        this.positionDelta = { x: 0, y: 0 };
+        this.pointPositionUpdater.resetPosition();
     }
 
     protected handleResizeOnClient(positionUpdate: Point): Action[] {
@@ -418,13 +388,13 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
 
     protected createChangeBoundsAction(element: SModelElement & BoundsAware): Action[] {
         if (this.isValidBoundChange(element, element.bounds, element.bounds)) {
-            return [new ChangeBoundsOperation([toElementAndBounds(element)])];
+            return [ChangeBoundsOperation.create([toElementAndBounds(element)])];
         } else if (this.initialBounds) {
             const actions: Action[] = [];
             if (this.tool.movementRestrictor) {
                 actions.push(removeMovementRestrictionFeedback(element, this.tool.movementRestrictor));
             }
-            actions.push(new SetBoundsAction([{ elementId: element.id, newPosition: this.initialBounds, newSize: this.initialBounds }]));
+            actions.push(SetBoundsAction.create([{ elementId: element.id, newPosition: this.initialBounds, newSize: this.initialBounds }]));
             return actions;
         }
         return [];
@@ -446,12 +416,12 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
             if (this.tool.movementRestrictor) {
                 result.push(removeMovementRestrictionFeedback(element, this.tool.movementRestrictor));
             }
-            result.push(new SetBoundsAction([{ elementId: element.id, newPosition, newSize }]));
+            result.push(SetBoundsAction.create([{ elementId: element.id, newPosition, newSize }]));
         } else if (this.isValidSize(element, newSize)) {
             if (this.tool.movementRestrictor) {
                 result.push(createMovementRestrictionFeedback(element, this.tool.movementRestrictor));
             }
-            result.push(new SetBoundsAction([{ elementId: element.id, newPosition, newSize }]));
+            result.push(SetBoundsAction.create([{ elementId: element.id, newPosition, newSize }]));
         }
 
         return result;

package/src/features/tools/delete-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
@@ -28,7 +28,7 @@ import {
 } from 'sprotty';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
 import { GLSPTool } from '../../base/tool-manager/glsp-tool-manager';
-import { GLSP_TYPES } from '../../base/types';
+import { TYPES } from '../../base/types';
 import { IMouseTool } from '../mouse-tool/mouse-tool';
 import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
 import { IFeedbackActionDispatcher } from '../tool-feedback/feedback-action-dispatcher';
@@ -60,7 +60,7 @@ export class DelKeyDeleteTool implements GLSPTool {
 
 @injectable()
 export class DeleteKeyListener extends KeyListener {
-    keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
+    override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
         if (matchesKeystroke(event, 'Delete')) {
             const deleteElementIds = Array.from(
                 element.root.index
@@ -70,7 +70,7 @@ export class DeleteKeyListener extends KeyListener {
                     .map(e => e.id)
             );
             if (deleteElementIds.length > 0) {
-                return [new DeleteElementOperation(deleteElementIds)];
+                return [DeleteElementOperation.create(deleteElementIds)];
             }
         }
         return [];
@@ -88,8 +88,8 @@ export class MouseDeleteTool implements GLSPTool {
 
     protected deleteToolMouseListener: DeleteToolMouseListener = new DeleteToolMouseListener();
 
-    @inject(GLSP_TYPES.MouseTool) protected mouseTool: IMouseTool;
-    @inject(GLSP_TYPES.IFeedbackActionDispatcher) protected readonly feedbackDispatcher: IFeedbackActionDispatcher;
+    @inject(TYPES.MouseTool) protected mouseTool: IMouseTool;
+    @inject(TYPES.IFeedbackActionDispatcher) protected readonly feedbackDispatcher: IFeedbackActionDispatcher;
 
     get id(): string {
         return MouseDeleteTool.ID;
@@ -108,15 +108,15 @@ export class MouseDeleteTool implements GLSPTool {
 
 @injectable()
 export class DeleteToolMouseListener extends MouseListener {
-    mouseUp(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseUp(target: SModelElement, event: MouseEvent): Action[] {
         const deletableParent = findParentByFeature(target, isDeletable);
         if (deletableParent === undefined) {
             return [];
         }
         const result: Action[] = [];
-        result.push(new DeleteElementOperation([deletableParent.id]));
+        result.push(DeleteElementOperation.create([deletableParent.id]));
         if (!isCtrlOrCmd(event)) {
-            result.push(new EnableDefaultToolsAction());
+            result.push(EnableDefaultToolsAction.create());
         }
         return result;
     }

package/src/features/tools/di.config.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
@@ -16,30 +16,36 @@
 import { TriggerEdgeCreationAction, TriggerNodeCreationAction } from '@eclipse-glsp/protocol';
 import { ContainerModule, interfaces } from 'inversify';
 import { configureActionHandler, configureModelElement } from 'sprotty';
-import { GLSP_TYPES } from '../../base/types';
+import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
+import { TYPES } from '../../base/types';
 import { MARQUEE } from '../tool-feedback/marquee-tool-feedback';
 import { ChangeBoundsTool } from './change-bounds-tool';
 import { DelKeyDeleteTool, MouseDeleteTool } from './delete-tool';
 import { EdgeCreationTool } from './edge-creation-tool';
 import { EdgeEditTool } from './edge-edit-tool';
+import { EnableDefaultToolsOnFocusLossHandler } from './enable-default-tools-on-focus-loss';
 import { MarqueeMouseTool } from './marquee-mouse-tool';
 import { MarqueeTool } from './marquee-tool';
 import { MarqueeNode } from './model';
 import { NodeCreationTool } from './node-creation-tool';
 import { MarqueeView } from './view';
 
-const toolsModule = new ContainerModule((bind, _unbind, isBound) => {
+/**
+ * Registers the default tools of GLSP (node and edge creation, changing bounds, edge editing, deletion)
+ * and adds the marquee selection tool.
+ */
+export const toolsModule = new ContainerModule((bind, _unbind, isBound) => {
     // Register default tools
-    bind(GLSP_TYPES.IDefaultTool).to(ChangeBoundsTool);
-    bind(GLSP_TYPES.IDefaultTool).to(EdgeEditTool);
-    bind(GLSP_TYPES.IDefaultTool).to(DelKeyDeleteTool);
+    bind(TYPES.IDefaultTool).to(ChangeBoundsTool);
+    bind(TYPES.IDefaultTool).to(EdgeEditTool);
+    bind(TYPES.IDefaultTool).to(DelKeyDeleteTool);
 
     // Register  tools
-    bind(GLSP_TYPES.ITool).to(MouseDeleteTool);
+    bind(TYPES.ITool).to(MouseDeleteTool);
     bind(NodeCreationTool).toSelf().inSingletonScope();
     bind(EdgeCreationTool).toSelf().inSingletonScope();
-    bind(GLSP_TYPES.ITool).toService(EdgeCreationTool);
-    bind(GLSP_TYPES.ITool).toService(NodeCreationTool);
+    bind(TYPES.ITool).toService(EdgeCreationTool);
+    bind(TYPES.ITool).toService(NodeCreationTool);
 
     configureMarqueeTool({ bind, isBound });
     configureActionHandler({ bind, isBound }, TriggerNodeCreationAction.KIND, NodeCreationTool);
@@ -48,8 +54,13 @@ const toolsModule = new ContainerModule((bind, _unbind, isBound) => {
 
 export function configureMarqueeTool(context: { bind: interfaces.Bind; isBound: interfaces.IsBound }): void {
     configureModelElement(context, MARQUEE, MarqueeNode, MarqueeView);
-    context.bind(GLSP_TYPES.IDefaultTool).to(MarqueeTool);
-    context.bind(GLSP_TYPES.ITool).to(MarqueeMouseTool);
+    context.bind(TYPES.IDefaultTool).to(MarqueeTool);
+    context.bind(TYPES.ITool).to(MarqueeMouseTool);
 }
 
-export default toolsModule;
+/**
+ * Enables the default tools in the tool manager if the diagram looses focus.
+ */
+export const enableDefaultToolsOnFocusLossModule = new ContainerModule((bind, _unbind, isBound) => {
+    configureActionHandler({ bind, isBound }, FocusStateChangedAction.KIND, EnableDefaultToolsOnFocusLossHandler);
+});