@eclipse-glsp/client 0.9.0-next.fd1a8bb6 → 0.10.0-next.5dad48d.159

package/src/base/model/update-model-command.ts

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, isSetModelAction, UpdateModelAction } from '@eclipse-glsp/protocol';
 import { inject, injectable, multiInject, optional, postConstruct } from 'inversify';
 import {
-    Action,
     ActionHandlerRegistry,
     Command,
     CommandActionHandler,
@@ -23,13 +23,10 @@ import {
     CommandReturn,
     IActionHandler,
     ILogger,
-    SetModelAction,
-    SetModelCommand,
     SModelRoot,
-    TYPES
+    TYPES,
+    UpdateModelCommand
 } from 'sprotty';
-import { UpdateModelAction, UpdateModelCommand } from 'sprotty/lib/features/update/update-model';
-
 import { IFeedbackActionDispatcher } from '../../features/tool-feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../../features/tool-feedback/model';
 import { GLSP_TYPES } from '../types';
@@ -45,17 +42,13 @@ export class SetModelActionHandler implements IActionHandler {
     }
 }
 
-export function isSetModelAction(action: Action): action is SetModelAction {
-    return action !== undefined && action.kind === SetModelCommand.KIND && (action as SetModelAction).newRoot !== undefined;
-}
-
 export interface SModelRootListener {
     modelRootChanged(root: Readonly<SModelRoot>): void;
 }
 
 /**
- * A special`UpdateModelCommand` that retrieves all registered `actions` from the `IFeedbackActionDispatcher` (if present) and applies their feedback
- * to the `newRoot` before performing the update
+ * A special`UpdateModelCommand` that retrieves all registered `actions` from the `IFeedbackActionDispatcher` (if present) and applies their
+ * feedback to the `newRoot` before performing the update
  */
 @injectable()
 export class FeedbackAwareUpdateModelCommand extends UpdateModelCommand {

package/src/base/model-initialization-constraint.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,8 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, UpdateModelAction } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import { Action, InitializeCanvasBoundsAction, UpdateModelAction } from 'sprotty';
+import { InitializeCanvasBoundsAction } from 'sprotty';
 import { Deferred } from 'sprotty/lib/utils/async';
 
 /**

package/src/base/tool-manager/glsp-tool-manager.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,12 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { distinctAdd, EditMode } from '@eclipse-glsp/protocol';
 import { inject, injectable, multiInject, optional, postConstruct } from 'inversify';
 import { Tool, ToolManager } from 'sprotty';
-
-import { distinctAdd } from '../../utils/array-utils';
-import { EditMode } from '../actions/edit-mode-action';
-import { EditModeListener, EditorContextService, EditorContextServiceProvider } from '../editor-context';
+import { EditModeListener, EditorContextService, EditorContextServiceProvider } from '../editor-context-service';
 import { GLSP_TYPES } from '../types';
 
 export interface IGLSPToolManager extends ToolManager {

package/src/base/types.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -33,5 +33,7 @@ export const GLSP_TYPES = {
     IGLSPToolManager: Symbol.for('IGLSPToolManager'),
     ITool: Symbol.for('ITool'),
     IDefaultTool: Symbol.for('IDefaultTool'),
-    IEditModeListener: Symbol.for('IEditModeListener')
+    IEditModeListener: Symbol.for('IEditModeListener'),
+    LayoutRegistration: Symbol.for('LayoutRegistration'),
+    IMarqueeBehavior: Symbol.for('IMarqueeBehavior')
 };

package/src/features/change-bounds/model.ts

@@ -29,7 +29,7 @@ import {
 
 export const resizeFeature = Symbol('resizeFeature');
 
-export interface Resizable extends BoundsAware, Selectable { }
+export interface Resizable extends BoundsAware, Selectable {}
 
 export function isResizable(element: SModelElement): element is SParentElement & Resizable {
     return isBoundsAware(element) && isSelectable(element) && element instanceof SParentElement && element.hasFeature(resizeFeature);
@@ -61,6 +61,14 @@ export class SResizeHandle extends SChildElement implements Hoverable {
     hasFeature(feature: symbol): boolean {
         return feature === hoverFeedbackFeature;
     }
+
+    isNwSeResize(): boolean {
+        return this.location === ResizeHandleLocation.TopLeft || this.location === ResizeHandleLocation.BottomRight;
+    }
+
+    isNeSwResize(): boolean {
+        return this.location === ResizeHandleLocation.TopRight || this.location === ResizeHandleLocation.BottomLeft;
+    }
 }
 
 export function addResizeHandles(element: SParentElement): void {

package/src/features/change-bounds/movement-restrictor.ts

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import { BoundsAware, Point, SModelElement, SNode, SParentElement } from 'sprotty';
-
+import { BoundsAware, SModelElement, SNode, SParentElement } from 'sprotty';
 import { toAbsoluteBounds } from '../../utils/viewpoint-util';
 import { ModifyCSSFeedbackAction } from '../tool-feedback/css-feedback';
 import { isBoundsAwareMoveable, SResizeHandle } from './model';

package/src/features/change-bounds/snap.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,8 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import { ISnapper, Point, SModelElement } from 'sprotty';
+import { ISnapper, SModelElement } from 'sprotty';
 
 @injectable()
 export class GridSnapper implements ISnapper {

package/src/features/command-palette/server-command-palette-provider.ts

@@ -13,12 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, isSetContextActionsAction, LabeledAction, Point, RequestContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, ICommandPaletteActionProvider, LabeledAction, Point, SModelElement, TYPES } from 'sprotty';
-
+import { ICommandPaletteActionProvider, SModelElement, TYPES } from 'sprotty';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { isSetContextActionsAction, RequestContextActions } from '../../base/actions/context-actions';
-import { EditorContextService } from '../../base/editor-context';
+import { EditorContextService } from '../../base/editor-context-service';
 
 export namespace ServerCommandPalette {
     export const CONTEXT_ID = 'command-palette';

package/src/features/context-menu/delete-element-context-menu.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,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { DeleteElementOperation } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import { IContextMenuItemProvider, MenuItem, Point, SModelRoot } from 'sprotty';
-
-import { EditorContextService, EditorContextServiceProvider } from '../../base/editor-context';
-import { DeleteElementOperation } from '../../base/operations/operation';
+import { EditorContextService, EditorContextServiceProvider } from '../../base/editor-context-service';
 import { GLSP_TYPES } from '../../base/types';
 
 @injectable()

package/src/features/context-menu/di.config.ts

@@ -15,7 +15,6 @@
  ********************************************************************************/
 import { ContainerModule } from 'inversify';
 import { ContextMenuProviderRegistry, IContextMenuService, TYPES } from 'sprotty';
-
 import { SelectionServiceAwareContextMenuMouseListener } from './selection-service-aware-context-menu-mouse-listener';
 import { ServerContextMenuItemProvider } from './server-context-menu-provider';
 

package/src/features/context-menu/selection-service-aware-context-menu-mouse-listener.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
@@ -24,7 +24,7 @@ import {
     SModelElement,
     TYPES
 } from 'sprotty';
-
+import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { GLSP_TYPES } from '../../base/types';
 import { SelectionService } from '../select/selection-service';
 
@@ -34,18 +34,47 @@ export class SelectionServiceAwareContextMenuMouseListener extends MouseListener
     @inject(TYPES.IContextMenuProviderRegistry) @optional() protected readonly menuProvider: ContextMenuProviderRegistry;
     @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService;
 
+    /**
+     * Opens the context menu on right-click.
+     */
     mouseDown(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
         if (event.button === 2 && this.contextMenuService && this.menuProvider) {
-            const mousePosition = { x: event.x, y: event.y };
-            const selectableTarget = findParentByFeature(target, isSelectable);
-            if (selectableTarget) {
-                selectableTarget.selected = true;
-                this.selectionService.updateSelection(target.root, [selectableTarget.id], []);
-            }
-            Promise.all([this.contextMenuService(), this.menuProvider.getItems(target.root, mousePosition)]).then(
-                ([menuService, menuItems]) => menuService.show(menuItems, mousePosition)
-            );
+            return this.openContextMenu(event, target);
         }
         return [];
     }
+
+    /**
+     * Opens the context menu.
+     *
+     *   - query the element on the click-target
+     *   - select the element
+     *   - query the context menu service and the context menu elements
+     *   - show the context menu
+     *   - send a focus state change to indicate that the diagram becomes inactive, once the context menu is shown
+     *
+     * When the context menu is closed, we focus the diagram element again.
+     */
+    protected openContextMenu(event: MouseEvent, target: SModelElement): Promise<Action>[] {
+        const mousePosition = { x: event.x, y: event.y };
+        const selectableTarget = findParentByFeature(target, isSelectable);
+        if (selectableTarget) {
+            selectableTarget.selected = true;
+            this.selectionService.updateSelection(target.root, [selectableTarget.id], []);
+        }
+
+        const result = Promise.all([this.contextMenuService(), this.menuProvider.getItems(target.root, mousePosition)])
+            .then(([menuService, menuItems]) => menuService.show(menuItems, mousePosition, () => this.focusEventTarget(event)))
+            .then((): Action => new FocusStateChangedAction(false));
+
+        return [result];
+    }
+
+    protected focusEventTarget(event: MouseEvent): void {
+        const targetElement = event.target instanceof SVGElement ? event.target : undefined;
+        const svgParentElement = targetElement?.closest('svg');
+        if (svgParentElement) {
+            svgParentElement.focus();
+        }
+    }
 }

package/src/features/context-menu/server-context-menu-provider.ts

@@ -13,12 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, isSetContextActionsAction, LabeledAction, Point, RequestContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, IContextMenuItemProvider, isSelected, LabeledAction, Point, SModelElement, TYPES } from 'sprotty';
-
+import { IContextMenuItemProvider, isSelected, SModelElement, TYPES } from 'sprotty';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { isSetContextActionsAction, RequestContextActions } from '../../base/actions/context-actions';
-import { EditorContextService } from '../../base/editor-context';
+import { EditorContextService } from '../../base/editor-context-service';
 
 export namespace ServerContextMenu {
     export const CONTEXT_ID = 'context-menu';

package/src/features/copy-paste/copy-paste-context-menu.ts

@@ -13,20 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, GLSPServerStatusAction, Point, ServerMessageAction } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import {
-    Action,
-    IActionDispatcher,
-    IActionHandler,
-    IContextMenuItemProvider,
-    isSelected,
-    MenuItem,
-    Point,
-    SModelRoot,
-    TYPES
-} from 'sprotty/lib';
-
-import { GLSPServerStatusAction, ServerMessageAction } from '../../model-source/glsp-server-status';
+import { IActionDispatcher, IActionHandler, IContextMenuItemProvider, isSelected, MenuItem, SModelRoot, TYPES } from 'sprotty';
 
 export class InvokeCopyAction implements Action {
     static readonly KIND = 'invoke-copy';

package/src/features/copy-paste/copy-paste-handler.ts

@@ -13,14 +13,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { ClipboardData, CutOperation, PasteOperation, RequestClipboardDataAction, SetClipboardDataAction } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import { TYPES, ViewerOptions } from 'sprotty';
 import { v4 as uuid } from 'uuid';
-
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { EditorContextService } from '../../base/editor-context';
+import { EditorContextService } from '../../base/editor-context-service';
 import { GLSP_TYPES } from '../../base/types';
-import { ClipboardData, CutOperation, PasteOperation, RequestClipboardDataAction } from './copy-paste-actions';
 
 export interface ICopyPasteHandler {
     handleCopy(event: ClipboardEvent): void;
@@ -105,7 +104,7 @@ export class ServerCopyPasteHandler implements ICopyPasteHandler {
             const clipboardId = uuid();
             event.clipboardData.setData(CLIPBOARD_DATA_FORMAT, toClipboardId(clipboardId));
             this.actionDispatcher
-                .request(RequestClipboardDataAction.create(this.editorContext.get()))
+                .request<SetClipboardDataAction>(RequestClipboardDataAction.create(this.editorContext.get()))
                 .then(action => this.clipboadService.put(action.clipboardData, clipboardId));
             event.preventDefault();
         } else {

package/src/features/copy-paste/di.config.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -14,8 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { ContainerModule } from 'inversify';
-import { configureActionHandler } from 'sprotty/lib';
-
+import { configureActionHandler } from 'sprotty';
 import { GLSP_TYPES } from '../../base/types';
 import {
     CopyPasteContextMenuItemProvider,

package/src/features/decoration/decoration-placer.ts

@@ -13,8 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import { Decoration, DecorationPlacer, isSizeable, ORIGIN_POINT, Point, SChildElement, SModelElement, SRoutableElement } from 'sprotty';
+import { Decoration, DecorationPlacer, isSizeable, ORIGIN_POINT, SChildElement, SModelElement, SRoutableElement } from 'sprotty';
 
 @injectable()
 export class GlspDecorationPlacer extends DecorationPlacer {

package/src/features/edit-label/edit-label-validator.ts

@@ -13,6 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { isSetEditValidationResultAction, RequestEditValidationAction, ValidationStatus } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
     Action,
@@ -26,7 +27,6 @@ import {
 } from 'sprotty';
 
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { isSetEditValidationResultAction, RequestEditValidationAction, ValidationStatus } from '../../base/actions/edit-validation-actions';
 
 export namespace LabelEditValidation {
     export const CONTEXT_ID = 'label-edit';

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,11 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { SetTypeHintsAction } from '@eclipse-glsp/protocol';
 import { ContainerModule } from 'inversify';
 import { configureActionHandler, configureCommand } from 'sprotty';
-
 import { GLSP_TYPES } from '../../base/types';
-import { SetTypeHintsAction } from './request-type-hints-action';
 import { ApplyTypeHintsCommand, TypeHintProvider } from './type-hints';
 
 const modelHintsModule = new ContainerModule((bind, _unbind, isBound) => {

package/src/features/hints/model.ts

@@ -13,7 +13,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { SModelElement, SModelElementSchema, SModelExtension } from 'sprotty';
+import { SModelElementSchema } from '@eclipse-glsp/protocol';
+import { SModelElement, SModelExtension } from 'sprotty';
 
 export const containerFeature = Symbol('containable');
 

package/src/features/hints/type-hints.ts

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, EdgeTypeHint, isSetTypeHintsAction, ShapeTypeHint, TypeHint } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     CommandExecutionContext,
     CommandReturn,
     Connectable,
@@ -28,12 +28,10 @@ import {
     moveFeature,
     SEdge,
     SModelElement,
-    SModelElementSchema,
     SModelRoot,
     SShapeElement,
     TYPES
 } from 'sprotty';
-
 import { GLSP_TYPES } from '../../base/types';
 import { getElementTypeId, hasCompatibleType } from '../../utils/smodel-util';
 import { resizeFeature } from '../change-bounds/model';
@@ -41,67 +39,6 @@ import { reconnectFeature } from '../reconnect/model';
 import { IFeedbackActionDispatcher } from '../tool-feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../tool-feedback/model';
 import { Containable, containerFeature, reparentFeature } from './model';
-import { isSetTypeHintsAction } from './request-type-hints-action';
-
-export abstract class TypeHint {
-    /**
-    The id of the element.
-    */
-    readonly elementTypeId: string;
-
-    /**
-     * Specifies whether the element can be relocated.
-     */
-    readonly repositionable: boolean;
-
-    /**
-     * Specifices wheter the element can be deleted
-     */
-    readonly deletable: boolean;
-}
-
-export class ShapeTypeHint extends TypeHint {
-    /**
-     * Specifies whether the element can be resized.
-     */
-    readonly resizable: boolean;
-
-    /**
-     * Specifies whether the element can be moved to another parent
-     */
-    readonly reparentable: boolean;
-
-    /**
-     * The types of elements that can be contained by this element (if any)
-     */
-    readonly containableElementTypeIds?: string[];
-}
-
-export class EdgeTypeHint extends TypeHint {
-    /**
-     * Specifies whether the routing of this element can be changed.
-     */
-    readonly routable: boolean;
-
-    /**
-     * Allowed source element types for this edge type
-     */
-    readonly sourceElementTypeIds: string[];
-
-    /**
-     * Allowed targe element types for this edge type
-     */
-    readonly targetElementTypeIds: string[];
-
-    isAllowedSource(input: SModelElement | SModelElementSchema | string): boolean {
-        const type = getElementTypeId(input);
-        return this.sourceElementTypeIds.includes(type);
-    }
-    isAllowedTarget(input: SModelElement | SModelElementSchema | string): boolean {
-        const type = getElementTypeId(input);
-        return this.targetElementTypeIds.includes(type);
-    }
-}
 
 @injectable()
 export class ApplyTypeHintsAction implements Action {

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 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
@@ -30,13 +30,13 @@ import {
     TYPES
 } from 'sprotty';
 import { PopupPositionUpdater } from 'sprotty/lib/features/hover/popup-position-updater';
-
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { GlspHoverMouseListener } from './hover';
 
 const glspHoverModule = new ContainerModule((bind, _unbind, isBound) => {
     bind(TYPES.PopupVNodePostprocessor).to(PopupPositionUpdater).inSingletonScope();
-    bind(TYPES.MouseListener).to(GlspHoverMouseListener);
+    bind(GlspHoverMouseListener).toSelf().inSingletonScope();
+    bind(TYPES.MouseListener).toService(GlspHoverMouseListener);
     bind(TYPES.PopupMouseListener).to(PopupHoverMouseListener);
     bind(TYPES.KeyListener).to(HoverKeyListener);
     bind<HoverState>(TYPES.HoverState).toConstantValue({
@@ -56,6 +56,7 @@ const glspHoverModule = new ContainerModule((bind, _unbind, isBound) => {
     configureActionHandler(context, SetViewportCommand.KIND, ClosePopupActionHandler);
     configureActionHandler(context, MoveCommand.KIND, ClosePopupActionHandler);
     configureActionHandler(context, FocusStateChangedAction.KIND, ClosePopupActionHandler);
+    configureActionHandler(context, FocusStateChangedAction.KIND, GlspHoverMouseListener);
 });
 
 export default glspHoverModule;

package/src/features/hover/hover.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,26 +13,46 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, Bounds, RequestPopupModelAction, SetPopupModelAction } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
 import {
-    Action,
-    Bounds,
     EMPTY_ROOT,
+    HoverFeedbackAction,
     HoverMouseListener,
+    IActionHandler,
+    ICommand,
     PreRenderedElementSchema,
-    RequestPopupModelAction,
-    SetPopupModelAction,
     SIssueMarker,
     SIssueSeverity,
     SModelElement,
     SModelElementSchema,
     SModelRootSchema
 } from 'sprotty';
-
+import { isFocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { GIssueMarker } from '../validation/issue-marker';
 
 @injectable()
-export class GlspHoverMouseListener extends HoverMouseListener {
+export class GlspHoverMouseListener extends HoverMouseListener implements IActionHandler {
+    /**
+     * Stops mouse over timer and remove hover feedback, if focus is lost.
+     *
+     * This fixes strange effects that appear if the mouse left the element via e.g. a context menu,
+     * which explicitly removes the focus of the diagram.
+     * @see SelectionServiceAwareContextMenuMouseListener
+     * @param action should be a `FocusStateChangedAction`
+     * @returns a `HoverFeedbackAction` resetting the state, if the specified action indicates lost focus
+     */
+    handle(action: Action): void | Action | ICommand {
+        if (isFocusStateChangedAction(action) && !action.hasFocus) {
+            this.stopMouseOverTimer();
+            if (this.lastHoverFeedbackElementId) {
+                const previousTargetId = this.lastHoverFeedbackElementId;
+                this.lastHoverFeedbackElementId = undefined;
+                return new HoverFeedbackAction(previousTargetId, false);
+            }
+        }
+    }
+
     protected startMouseOverTimer(target: SModelElement, event: MouseEvent): Promise<Action> {
         this.stopMouseOverTimer();
         return new Promise(resolve => {

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -14,13 +14,17 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { ContainerModule } from 'inversify';
-import { configureCommand } from 'sprotty';
-
+import { configureCommand, configureLayout, VBoxLayouter } from 'sprotty';
+import { FreeFormLayouter } from './freeform-layout';
 import { AlignElementsCommand, ResizeElementsCommand } from './layout-commands';
+import { VBoxLayouterExt } from './vbox-layout';
 
-const layoutCommandsModule = new ContainerModule((bind, _unbind, isBound) => {
+const layoutCommandsModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
     configureCommand({ bind, isBound }, ResizeElementsCommand);
     configureCommand({ bind, isBound }, AlignElementsCommand);
+
+    rebind(VBoxLayouter).to(VBoxLayouterExt);
+    configureLayout({ bind, isBound }, FreeFormLayouter.KIND, FreeFormLayouter);
 });
 
 export default layoutCommandsModule;