@eclipse-glsp/client 1.1.0-next.383e4e9.264 → 1.1.0-next.3d1b3e6.280

package/src/features/accessibility/element-navigation/left-right-top-bottom-navigator.ts

@@ -0,0 +1,113 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 { EdgeRouterRegistry, findParentByFeature, SEdge, SModelElement, SModelRoot, Point } from '~glsp-sprotty';
+import { toArray } from 'sprotty/lib/utils/iterable';
+import { calcElementAndRoute, isRoutable, isSelectableAndBoundsAware, SelectableBoundsAware } from '../../../utils/smodel-util';
+import { ElementNavigator } from './element-navigator';
+import { inject, injectable, optional } from 'inversify';
+
+@injectable()
+export class LeftToRightTopToBottomElementNavigator implements ElementNavigator {
+    @inject(EdgeRouterRegistry) @optional() readonly edgeRouterRegistry?: EdgeRouterRegistry;
+
+    previous(
+        root: Readonly<SModelRoot>,
+        current?: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        const elements = this.getElements(root, predicate);
+
+        if (current === undefined) {
+            return elements.length > 0 ? elements[0] : undefined;
+        }
+        return elements[this.getPreviousIndex(current, elements) % elements.length];
+    }
+
+    next(
+        root: Readonly<SModelRoot>,
+        current?: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        const elements = this.getElements(root, predicate);
+        if (current === undefined) {
+            return elements.length > 0 ? elements[0] : undefined;
+        }
+        return elements[this.getNextIndex(current, elements) % elements.length];
+    }
+
+    protected getElements(root: Readonly<SModelRoot>, predicate: (element: SModelElement) => boolean): SModelElement[] {
+        const elements = toArray(root.index.all().filter(e => isSelectableAndBoundsAware(e))) as SelectableBoundsAware[];
+        return elements.sort((a, b) => this.compare(a, b)).filter(predicate);
+    }
+
+    protected getNextIndex(current: SelectableBoundsAware, elements: SModelElement[]): number {
+        for (let index = 0; index < elements.length; index++) {
+            if (this.compare(elements[index], current) > 0) {
+                return index;
+            }
+        }
+
+        return 0;
+    }
+
+    protected getPreviousIndex(current: SelectableBoundsAware, elements: SModelElement[]): number {
+        for (let index = elements.length - 1; index >= 0; index--) {
+            if (this.compare(elements[index], current) < 0) {
+                return index;
+            }
+        }
+
+        return elements.length - 1;
+    }
+
+    protected compare(one: SModelElement, other: SModelElement): number {
+        let positionOne: Point | undefined = undefined;
+        let positionOther: Point | undefined = undefined;
+
+        if (one instanceof SEdge && isRoutable(one)) {
+            positionOne = calcElementAndRoute(one, this.edgeRouterRegistry).newRoutingPoints?.[0];
+        }
+
+        if (other instanceof SEdge && isRoutable(other)) {
+            positionOther = calcElementAndRoute(other, this.edgeRouterRegistry).newRoutingPoints?.[0];
+        }
+
+        const boundsOne = findParentByFeature(one, isSelectableAndBoundsAware);
+        const boundsOther = findParentByFeature(other, isSelectableAndBoundsAware);
+
+        if (positionOne === undefined && boundsOne) {
+            positionOne = boundsOne.bounds;
+        }
+
+        if (positionOther === undefined && boundsOther) {
+            positionOther = boundsOther.bounds;
+        }
+
+        if (positionOne && positionOther) {
+            if (positionOne.y !== positionOther.y) {
+                return positionOne.y - positionOther.y;
+            }
+            if (positionOne.x !== positionOther.x) {
+                return positionOne.x - positionOther.x;
+            }
+        }
+
+        return 0;
+    }
+}

package/src/features/accessibility/element-navigation/local-element-navigator.ts

@@ -0,0 +1,147 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 { BoundsAware, EdgeRouterRegistry, SConnectableElement, SEdge, SModelElement, SModelRoot, TYPES } from '~glsp-sprotty';
+import { ElementNavigator } from './element-navigator';
+import { inject, injectable, optional } from 'inversify';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { applyCssClasses, deleteCssClasses } from '../../../base/feedback/css-feedback';
+import { SelectableBoundsAware } from '../../../utils/smodel-util';
+
+@injectable()
+export class LocalElementNavigator implements ElementNavigator {
+    navigableElementCSS = 'navigable-element';
+    @inject(EdgeRouterRegistry) @optional() readonly edgeRouterRegistry?: EdgeRouterRegistry;
+    @inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
+
+    previous(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getPreviousElement(current, predicate);
+    }
+
+    next(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNextElement(current, predicate);
+    }
+
+    up(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getIterable(current, previousCurrent, predicate);
+    }
+
+    down(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getIterable(current, previousCurrent, predicate);
+    }
+
+    process(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        target: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): void {
+        let elements: SModelElement[] = [];
+
+        // Mark only edges
+        if (target instanceof SEdge) {
+            // If current is a edge, we have to check the source and target
+            if (current instanceof SEdge) {
+                elements = this.getIterables(target, current.source === target.source ? current.source : current.target, predicate);
+            } else {
+                // Otherwise take the current as it is
+                elements = this.getIterables(target, current, predicate);
+            }
+        }
+        elements.filter(e => e.id !== target.id).forEach(e => this.actionDispatcher.dispatch(applyCssClasses(e, this.navigableElementCSS)));
+    }
+
+    clean(root: Readonly<SModelRoot>, current?: SelectableBoundsAware, previousCurrent?: SelectableBoundsAware): void {
+        root.index.all().forEach(e => this.actionDispatcher.dispatch(deleteCssClasses(e, this.navigableElementCSS)));
+    }
+
+    protected getIterables(
+        current: SelectableBoundsAware,
+        previousCurrent?: SModelElement & BoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement[] {
+        const elements: SModelElement[] = [];
+
+        if (current instanceof SEdge) {
+            if (current.target === previousCurrent) {
+                current.target?.incomingEdges.forEach(e => elements.push(e));
+            } else {
+                current.source?.outgoingEdges.forEach(e => elements.push(e));
+            }
+        }
+
+        return elements.filter(predicate);
+    }
+
+    protected getIterable(
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        return this.getIterables(current, previousCurrent, predicate).filter(e => e.id !== current.id)[0];
+    }
+    protected getNextElement(
+        current: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        const elements: SModelElement[] = [];
+
+        if (current instanceof SConnectableElement) {
+            current.outgoingEdges.forEach(e => elements.push(e));
+        } else if (current instanceof SEdge) {
+            const target = current.target as SModelElement;
+            elements.push(target);
+        }
+
+        return elements.filter(predicate)[0];
+    }
+
+    protected getPreviousElement(
+        current: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        const elements: SModelElement[] = [];
+
+        if (current instanceof SConnectableElement) {
+            current.incomingEdges.forEach(e => elements.push(e));
+        } else if (current instanceof SEdge) {
+            const source = current.source as SModelElement;
+            elements.push(source);
+        }
+
+        return elements.filter(predicate)[0];
+    }
+}

package/src/features/accessibility/element-navigation/position-navigator.ts

@@ -0,0 +1,102 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 { isBoundsAware, isSelectable, SChildElement, SModelElement, SModelRoot, SNode, TYPES, Bounds, Point } from '~glsp-sprotty';
+import { ElementNavigator } from './element-navigator';
+import { inject, injectable } from 'inversify';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { toArray } from 'sprotty/lib/utils/iterable';
+import { SelectableBoundsAware } from '../../../utils/smodel-util';
+
+@injectable()
+export class PositionNavigator implements ElementNavigator {
+    @inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
+
+    previous(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).x < this.bounds(root, current).x);
+    }
+
+    next(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).x > this.bounds(root, current).x);
+    }
+
+    up(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).y < this.bounds(root, current).y);
+    }
+
+    down(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).y > this.bounds(root, current).y);
+    }
+
+    protected getNearestElement(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        filter: (e: SelectableBoundsAware) => boolean
+    ): SModelElement | undefined {
+        const elements = this.boundElements(root).filter(filter);
+        return this.sortByDistance(root, current, elements)[0];
+    }
+
+    protected sortByDistance(root: SModelRoot, current: SelectableBoundsAware, elements: SelectableBoundsAware[]): SelectableBoundsAware[] {
+        // https://www.tutorialspoint.com/sort-array-of-points-by-ascending-distance-from-a-given-point-javascript
+        const distance = (coor1: Point, coor2: Point): number => {
+            const x = coor2.x - coor1.x;
+            const y = coor2.y - coor1.y;
+            return Math.sqrt(x * x + y * y);
+        };
+
+        return elements.sort(
+            (a, b) =>
+                distance(this.bounds(root, a), this.bounds(root, current)) - distance(this.bounds(root, b), this.bounds(root, current))
+        );
+    }
+
+    protected boundElements(root: Readonly<SModelRoot>): SelectableBoundsAware[] {
+        return toArray(root.index.all().filter(e => e instanceof SNode && isSelectable(e) && isBoundsAware(e))) as SelectableBoundsAware[];
+    }
+
+    protected bounds(root: Readonly<SModelRoot>, element: SelectableBoundsAware): Bounds {
+        return this.boundsInViewport(element, element.bounds, root);
+    }
+
+    protected boundsInViewport(element: SModelElement, bounds: Bounds, viewport: SModelRoot): Bounds {
+        if (element instanceof SChildElement && element.parent !== viewport) {
+            return this.boundsInViewport(element.parent, element.parent.localToParent(bounds) as Bounds, viewport);
+        } else {
+            return bounds;
+        }
+    }
+}

package/src/features/accessibility/focus-tracker/focus-tracker-module.ts

@@ -0,0 +1,32 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 { ContainerModule } from 'inversify';
+import { FocusTrackerTool } from './focus-tracker-tool';
+import { BindingContext, TYPES, bindAsService } from '~glsp-sprotty';
+
+/**
+ * Handles actions for tracking the focus of the cursor.
+ */
+
+export const glspFocusTrackerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureFocusTrackerTool(context);
+});
+
+export function configureFocusTrackerTool(context: BindingContext): void {
+    bindAsService(context, TYPES.IDefaultTool, FocusTrackerTool);
+}

package/src/features/accessibility/focus-tracker/focus-tracker-tool.ts

@@ -0,0 +1,129 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 { inject, injectable } from 'inversify';
+import { TYPES, ViewerOptions } from '~glsp-sprotty';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { Tool } from '../../../base/tool-manager/tool';
+import * as messages from '../toast/messages.json';
+import { ShowToastMessageAction } from '../toast/toast-handler';
+
+@injectable()
+export class FocusTrackerTool implements Tool {
+    static ID = 'glsp.focus-tracker';
+
+    isEditTool = false;
+    @inject(TYPES.IActionDispatcher)
+    protected actionDispatcher: GLSPActionDispatcher;
+    @inject(TYPES.ViewerOptions)
+    protected readonly viewerOptions: ViewerOptions;
+
+    protected readonly focusInFunction = (event: FocusEvent): Promise<void> => this.focusIn(event);
+    protected readonly focusOutFunction = (event: FocusEvent): Promise<void> => this.focusOut(event);
+    protected registered = false;
+
+    get id(): string {
+        return FocusTrackerTool.ID;
+    }
+
+    enable(): void {
+        if (!this.registered) {
+            document.addEventListener('focusin', this.focusInFunction);
+            document.addEventListener('focusout', this.focusOutFunction);
+        }
+        this.registered = true;
+    }
+
+    disable(): void {
+        // the focus tracker cannot be disabled after enabling it
+    }
+
+    protected async focusOut(event: FocusEvent): Promise<void> {
+        await this.showToast('Focus not set');
+    }
+
+    protected async focusIn(event: FocusEvent): Promise<void> {
+        let message: string | undefined;
+        const target = event.target;
+
+        if (target instanceof HTMLElement) {
+            const parent = this.parentWithAriaLabel(target);
+            const textMessage = this.handleTextNode(target);
+            // eslint-disable-next-line no-null/no-null
+            if (target.ariaLabel !== null) {
+                message = this.handleAriaLabel(target);
+            } else {
+                if (parent === undefined && textMessage !== undefined) {
+                    message = textMessage;
+                } else if (parent !== undefined && textMessage === undefined) {
+                    message = `Focus is in ${parent.ariaLabel}`;
+                } else if (parent !== undefined && textMessage !== undefined) {
+                    message = `${parent.ariaLabel} -> ${textMessage}`;
+                }
+            }
+        }
+
+        await this.showToast(message);
+    }
+
+    protected handleTextNode(target: HTMLElement): string | undefined {
+        const textNode = Array.prototype.filter
+            .call(target.childNodes, element => element.nodeType === Node.TEXT_NODE)
+            .map(element => element.textContent)
+            .join('');
+
+        if (textNode.trim().length !== 0) {
+            return textNode;
+        }
+
+        return undefined;
+    }
+
+    protected handleAriaLabel(target: HTMLElement): string | undefined {
+        // eslint-disable-next-line no-null/no-null
+        return target.ariaLabel === null ? undefined : target.ariaLabel;
+    }
+
+    protected showToast(message?: string): Promise<void> {
+        return this.actionDispatcher.dispatchAll([
+            ShowToastMessageAction.create({
+                id: Symbol.for(FocusTrackerTool.ID),
+                message: `${messages.focus.focus_on} ${message ?? 'unknown'}`,
+                position: 'left'
+            })
+        ]);
+    }
+    protected parentWithAriaLabel(target: HTMLElement): HTMLElement | undefined {
+        let current = target.parentElement;
+
+        while (
+            // eslint-disable-next-line no-null/no-null
+            current !== null &&
+            current !== document.body &&
+            current !== document.getElementById(this.viewerOptions.baseDiv) &&
+            // eslint-disable-next-line no-null/no-null
+            current.ariaLabel === null
+        ) {
+            current = current.parentElement;
+        }
+
+        if (current === document.getElementById(this.viewerOptions.baseDiv) || current === document.body) {
+            return undefined;
+        }
+
+        return current ?? undefined;
+    }
+}

package/src/features/accessibility/key-shortcut/accessible-key-shortcut-tool.ts

@@ -15,12 +15,12 @@
  ********************************************************************************/
 
 import { inject, injectable } from 'inversify';
-import { Action, KeyListener, KeyTool, matchesKeystroke, SetUIExtensionVisibilityAction, SModelElement } from '~glsp-sprotty';
-import { BaseGLSPTool } from '../../tools/base-glsp-tool';
+import { Action, KeyListener, KeyTool, SModelElement, SetUIExtensionVisibilityAction, matchesKeystroke } from '~glsp-sprotty';
+import { BaseEditTool } from '../../tools/base-tools';
 import { KeyShortcutUIExtension } from './accessible-key-shortcut';
 
 @injectable()
-export class AccessibleKeyShortcutTool extends BaseGLSPTool {
+export class AccessibleKeyShortcutTool extends BaseEditTool {
     static ID = 'accessible-key-shortcut-tool';
 
     @inject(KeyTool) protected readonly keytool: KeyTool;

package/src/features/accessibility/key-shortcut/accessible-key-shortcut.ts

@@ -93,6 +93,7 @@ export class KeyShortcutUIExtension extends AbstractUIExtension implements IActi
         const grouped = groupBy(registrations, k => k.group);
 
         const groupTable = document.createElement('table');
+        groupTable.classList.add('shortcut-table');
         const tableHead = document.createElement('thead');
         const tableBody = document.createElement('tbody');
 
@@ -100,8 +101,7 @@ export class KeyShortcutUIExtension extends AbstractUIExtension implements IActi
         const commandCell = document.createElement('th');
         const keybindingCell = document.createElement('th');
 
-        commandCell.classList.add('columnTitle');
-        commandCell.classList.add('columnTitle');
+        commandCell.classList.add('column-title');
 
         commandCell.innerText = 'Command';
         keybindingCell.innerText = 'Keybinding';
@@ -110,7 +110,8 @@ export class KeyShortcutUIExtension extends AbstractUIExtension implements IActi
         headerRow.appendChild(keybindingCell);
         tableHead.appendChild(headerRow);
 
-        for (const [, shortcuts] of Object.entries(grouped)) {
+        for (const [group, shortcuts] of Object.entries(grouped)) {
+            tableBody.appendChild(this.createGroupHeader(group));
             shortcuts.forEach(s => {
                 tableBody.appendChild(this.createEntry(s));
             });
@@ -122,6 +123,20 @@ export class KeyShortcutUIExtension extends AbstractUIExtension implements IActi
         this.shortcutsContainer.append(groupTable);
     }
 
+    protected createGroupHeader(group: string): HTMLElement {
+        const entryRow = document.createElement('tr');
+        const groupElement = document.createElement('td');
+        const text = document.createElement('strong');
+        const emptyElement = document.createElement('td');
+
+        text.innerText = group;
+        groupElement.appendChild(text);
+        entryRow.appendChild(groupElement);
+        entryRow.appendChild(emptyElement);
+
+        return entryRow;
+    }
+
     protected getShortcutHTML(shortcuts: string[]): HTMLElement {
         const shortcutKeys = document.createElement('span');
         shortcutKeys.innerHTML = shortcuts.map(key => `<kbd>${key}</kbd>`).join(' + ');

package/src/features/accessibility/resize-key-tool/resize-key-tool.ts

@@ -16,16 +16,18 @@
 
 import { inject, injectable, optional } from 'inversify';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
-import { Action, EnableDefaultToolsAction, EnableToolsAction, ISnapper, KeyListener, KeyTool, SModelElement, TYPES } from '~glsp-sprotty';
+import { Action, ISnapper, KeyListener, KeyTool, SModelElement, TYPES } from '~glsp-sprotty';
 import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
 import { SelectionService } from '../../../base/selection-service';
-import { GLSPTool } from '../../../base/tool-manager/glsp-tool-manager';
+import { EnableDefaultToolsAction, EnableToolsAction, Tool } from '../../../base/tool-manager/tool';
 import { IMovementRestrictor } from '../../change-bounds/movement-restrictor';
 import { AccessibleKeyShortcutProvider, SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
+import * as messages from '../toast/messages.json';
+import { ShowToastMessageAction } from '../toast/toast-handler';
 import { ResizeElementAction, ResizeType } from './resize-key-handler';
 
 @injectable()
-export class ResizeKeyTool implements GLSPTool {
+export class ResizeKeyTool implements Tool {
     static ID = 'glsp.resize-key-tool';
 
     isEditTool = true;
@@ -61,19 +63,17 @@ export class ResizeKeyListener extends KeyListener implements AccessibleKeyShort
     }
 
     registerShortcutKey(): void {
-        this.tool.actionDispatcher.onceModelInitialized().then(() => {
-            this.tool.actionDispatcher.dispatchAll([
-                SetAccessibleKeyShortcutAction.create({
-                    token: this.token,
-                    keys: [
-                        { shortcuts: ['ALT', 'A'], description: 'Activate resize mode for selected element', group: 'Resize', position: 0 },
-                        { shortcuts: ['+'], description: 'Increase size of element', group: 'Resize', position: 1 },
-                        { shortcuts: ['-'], description: 'Increase size of element', group: 'Resize', position: 2 },
-                        { shortcuts: ['CTRL', '0'], description: 'Set element size to default', group: 'Resize', position: 3 }
-                    ]
-                })
-            ]);
-        });
+        this.tool.actionDispatcher.dispatchOnceModelInitialized(
+            SetAccessibleKeyShortcutAction.create({
+                token: this.token,
+                keys: [
+                    { shortcuts: ['ALT', 'A'], description: 'Activate resize mode for selected element', group: 'Resize', position: 0 },
+                    { shortcuts: ['+'], description: 'Increase size of element', group: 'Resize', position: 1 },
+                    { shortcuts: ['-'], description: 'Increase size of element', group: 'Resize', position: 2 },
+                    { shortcuts: ['CTRL', '0'], description: 'Set element size to default', group: 'Resize', position: 3 }
+                ]
+            })
+        );
     }
 
     override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
@@ -82,12 +82,26 @@ export class ResizeKeyListener extends KeyListener implements AccessibleKeyShort
 
         if (this.isEditMode && this.matchesDeactivateResizeModeKeystroke(event)) {
             this.isEditMode = false;
+
+            this.tool.actionDispatcher.dispatch(
+                ShowToastMessageAction.createWithTimeout({
+                    id: Symbol.for(ResizeKeyListener.name),
+                    message: messages.resize.resize_mode_deactivated
+                })
+            );
+
             actions.push(EnableDefaultToolsAction.create());
         }
 
         if (selectedElementsIds.length > 0) {
             if (!this.isEditMode && this.matchesActivateResizeModeKeystroke(event)) {
                 this.isEditMode = true;
+                this.tool.actionDispatcher.dispatch(
+                    ShowToastMessageAction.create({
+                        id: Symbol.for(ResizeKeyListener.name),
+                        message: messages.resize.resize_mode_activated
+                    })
+                );
                 actions.push(EnableToolsAction.create([ResizeKeyTool.ID]));
             }